first design
This commit is contained in:
TUTOR03
parent
1417158c14
commit
3d82a01683
128
src/HTML one.html
Normal file
128
src/HTML one.html
Normal file
@ -0,0 +1,128 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
|
||||||
|
<link rel="stylesheet" href="test_html.css">
|
||||||
|
<title>Document</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="wrapper">
|
||||||
|
<nav id="sidebar" class="active me-3">
|
||||||
|
<div class="sidebar-header">
|
||||||
|
<h3>Bootstrap Sidebar</h3>
|
||||||
|
</div>
|
||||||
|
<button type="button" id="sidebar-toggle" class="btn btn-secondary rounded-end">X</button>
|
||||||
|
</nav>
|
||||||
|
<div id="content" class="container mt-3">
|
||||||
|
<!-- <nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||||
|
<div class="container-fluid">
|
||||||
|
<button type="button" id="sidebarCollapse" class="btn btn-info">
|
||||||
|
<i class="fas fa-align-left"></i>
|
||||||
|
<span>Toggle Sidebar</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</nav> -->
|
||||||
|
<div class="row text-center">
|
||||||
|
<div class="col-md-4 rounded-2 shadow-sm">11</div>
|
||||||
|
<div class="col-md-4 rounded-2 shadow-sm">11</div>
|
||||||
|
<div class="col-md-4 rounded-2 shadow-sm">11</div>
|
||||||
|
</div>
|
||||||
|
<div class="row text-center border-bottom border-3">
|
||||||
|
<div class="col-md-2 rounded-2 shadow-sm">91</div>
|
||||||
|
<div class="col-md-2 rounded-2 shadow-sm">91</div>
|
||||||
|
<div class="col-md-2 rounded-2 shadow-sm">91</div>
|
||||||
|
<div class="col-md-2 rounded-2 shadow-sm">91</div>
|
||||||
|
<div class="col-md-2 rounded-2 shadow-sm">91</div>
|
||||||
|
<div class="col-md-2 rounded-2 shadow-sm">91</div>
|
||||||
|
</div>
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-4 rounded-2 shadow-sm">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6 text-center border-bottom border-start border-3">
|
||||||
|
<h6>Физика</h6>
|
||||||
|
<h6>505</h6>
|
||||||
|
<h6>Попов</h6>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6 d-flex align-items-center justify-content-center text-center border-bottom border-end border-start border-3">
|
||||||
|
<div class="dropdown">
|
||||||
|
<button class="btn btn-sm btn-success dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
|
Выберите пару
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
||||||
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-grid gap-2 my-2">
|
||||||
|
<button class="btn btn-outline-primary btn-sm" type="button">Новые Пары</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4 rounded-2 shadow-sm">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6 text-center border-bottom border-3">
|
||||||
|
<h6>Физика</h6>
|
||||||
|
<h6>505</h6>
|
||||||
|
<h6>Попов</h6>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6 d-flex align-items-center justify-content-center text-center border-bottom border-end border-start border-3">
|
||||||
|
<div class="dropdown">
|
||||||
|
<button class="btn btn-sm btn-success dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
|
Выберите пару
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
||||||
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-grid gap-2 my-2">
|
||||||
|
<button class="btn btn-outline-primary btn-sm" type="button">Новые Пары</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-4 rounded-2 shadow-sm">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6 text-center border-bottom border-3">
|
||||||
|
<h6>Физика</h6>
|
||||||
|
<h6>505</h6>
|
||||||
|
<h6>Попов</h6>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6 d-flex align-items-center justify-content-center text-center border-bottom border-end border-start border-3">
|
||||||
|
<div class="dropdown">
|
||||||
|
<button class="btn btn-sm btn-success dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
|
||||||
|
Выберите пару
|
||||||
|
</button>
|
||||||
|
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
||||||
|
<li><a class="dropdown-item" href="#">Action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Another action</a></li>
|
||||||
|
<li><a class="dropdown-item" href="#">Something else here</a></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="d-grid gap-2 my-2">
|
||||||
|
<button class="btn btn-outline-primary btn-sm" type="button">Новые Пары</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="col-md-4 rounded-2 shadow-sm">dfsfsfesfs</div>
|
||||||
|
<div class="col-md-4 rounded-2 shadow-sm">dfsfsfesfs</div> -->
|
||||||
|
</div>
|
||||||
|
<div class="d-grid gap-2 my-2">
|
||||||
|
<button class="btn btn-outline-primary btn-sm" type="button">Новый День</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script type="text/javascript">
|
||||||
|
document.querySelector('#sidebar-toggle').addEventListener('click', ()=>{
|
||||||
|
document.querySelector('#sidebar').classList.toggle('active')
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
|
||||||
|
</html>
|
||||||
38
src/test_html.css
Normal file
38
src/test_html.css
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
.wrapper{
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar{
|
||||||
|
min-width: 18%;
|
||||||
|
max-width: 18%;
|
||||||
|
min-height: 100vh;
|
||||||
|
position: relative;
|
||||||
|
background-color: #ADB5BD;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar{
|
||||||
|
margin-left: -18%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar.active{
|
||||||
|
margin-left: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#sidebar-toggle{
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 0;
|
||||||
|
top: 0;
|
||||||
|
left: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
#sidebar{
|
||||||
|
margin-left: -250px;
|
||||||
|
}
|
||||||
|
#sidebar.active{
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user