<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
html,
body {
overflow-x: hidden;
height: 100%;
}
body {
font-family: Arial, sans-serif;
background-color: #ffffff;
margin: 0px;
padding: 0px;
}
.header {
background-color: rgb(0, 0, 0);
width: 100%;
height: 60px;
position: fixed;
z-index: 10;
}
.main {
height: 100%;
margin-top: 60px;
padding: 0px 20px;
}
.main p{
font-size: 20px;
}
.border{
border: 1px solid black;
border-radius: 20px;
margin: 15px;
padding: 10px;
}
#sidebarMenu {
height: 100%;
position: fixed;
left: 0;
top: 0;
width: 250px;
margin-top: 60px;
background-color: rgb(223, 219, 219);
transform: translateX(-250px);
transition-duration: 0.5s;
}
#openSidebarMenu:checked ~ #sidebarMenu{
transform: translateX(0px);
}
.menu {
list-style: none;
padding: 0px;
margin: 0px;
}
.menu li {
color: #fff;
border-bottom: 1px solid rgba(255, 255, 255, 0.50);
}
.menu li:hover {
background-color: #fff;
}
.menu li a {
color: rgb(0, 0, 0);
display: block;
text-decoration: none;
text-transform: uppercase;
padding: 20px;
}
.sidebarIconToggle{
/* background-color: #fff; */
width: 22px;
height: 22px;
position: absolute;
z-index: 20;
top: 22px;
left: 15px;
cursor:pointer;
}
.spinner{
height: 3px;
background-color: #fff;
transition: all 0.3s;
}
.spinner.middle,.spinner.bottom{
margin-top: 3px;
}
#openSidebarMenu:checked ~ .sidebarIconToggle >.spinner.middle {
opacity: 0;
}
#openSidebarMenu:checked ~ .sidebarIconToggle >.spinner.top {
transform: rotate(135deg);
margin-top: 8px;
}
#openSidebarMenu:checked ~ .sidebarIconToggle >.spinner.bottom {
transform: rotate(-135deg);
margin-top: -9px;
}
@media(min-width: 801px){
.spinner {
display: none;
}
#sidebarMenu{
display: none;
}
}
@media(max-width: 800px){
.menu1 {
display: none;
}
}
.menu1{
list-style: none ;
}
.menu1 li a {
font-size:20px;
text-decoration: none;
color:rgb(255, 255, 255);
}
.menu1 li{
padding: 15px;
z-index: 20;
display: inline-block;
}
.menu1 li a:hover {
background:yellow ;
color: black;
border: 2px solid #fff;
padding: 10px;
transition-duration: 0.5s;
font-weight:bold ;
}
.footer{
background:black ;
color: rgb(226, 223, 223);
padding: 20px;
margin-top: 10px;
text-align: end;
bottom: -10px;
}
</style>
</head>
<body>
<div class="header">
<ul class="menu1">
<li><a href="google.com">Home</a></li>
<li><a href="google.com">About</a></li>
<li><a href="google.com">Contact</a></li>
<li><a href="google.com">Disclaimer</a></li>
<li><a href="google.com">Privacy policy</a></li>
<li><a href="google.com">Term & Condition</a></li>
</ul>
</div>
<input type="checkbox" name="" id="openSidebarMenu">
<label for="openSidebarMenu" class="sidebarIconToggle">
<div class="spinner top"></div>
<div class="spinner middle"></div>
<div class="spinner bottom "></div>
</label>
<div id="sidebarMenu">
<ul class="menu">
<li><a href="google.com">Home</a></li>
<li><a href="google.com">About</a></li>
<li><a href="google.com">contact</a></li>
<li><a href="google.com">Disclaimer</a></li>
<li><a href="google.com">Privacy policy</a></li>
<li><a href="google.com">Term &condition</a></li>
</ul>
</div>
<div class="main">
<div class="border">
<h1>hi my name is ansh </h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis dolor voluptatem ut voluptates. Animi nobis
veniam ipsum pariatur voluptatibus dolor, optio consequatur eum maxime unde nisi laboriosam iste quam odit.
Sapiente error reiciendis tempore pariatur rem perferendis ullam, est et sed reprehenderit. Aspernatur eum
sunt incidunt quod, necessitatibus at odit exercitationem nam, earum ea ad fuga illo. Reiciendis voluptatum
exercitationem, consequatur sequi eos labore ratione eligendi delectus ut in non, doloribus animi! Maxime
delectus ad corporis sit neque aliquam optio soluta nemo maiores libero dolore nihil veniam pariatur
accusamus quibusdam voluptatum iusto voluptatem, ut dolorem dignissimos? Voluptatem itaque quidem voluptate?
</p>
</div>
<div class="border">
<h1>hi my name is ansh </h1>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis dolor voluptatem ut voluptates. Animi nobis
veniam ipsum pariatur voluptatibus dolor, optio consequatur eum maxime unde nisi laboriosam iste quam odit.
Sapiente error reiciendis tempore pariatur rem perferendis ullam, est et sed reprehenderit. Aspernatur eum
sunt incidunt quod, necessitatibus at odit exercitationem nam, earum ea ad fuga illo. Reiciendis voluptatum
exercitationem, consequatur sequi eos labore ratione eligendi delectus ut in non, doloribus animi! Maxime
delectus ad corporis sit neque aliquam optio soluta nemo maiores libero dolore nihil veniam pariatur
accusamus quibusdam voluptatum iusto voluptatem, ut dolorem dignissimos? Voluptatem itaque quidem voluptate?
</p>
</div>
<div class=" footer"> copyright© Best of Scratch - All Right Reserved </div>
</div>
</body>
</html>
