Loading
.
.
.
We use cookies to personalize ads and analyze traffic. By continuing to browse the site, you agree to our Privacy Policy. You can also choose to reject cookies.
The content on this website, including videos and code examples, is for educational purposes only. All demonstrations and designs are fictional and created to illustrate coding techniques. Any resemblance to existing websites or brands is purely coincidental.
The creators and administrators of this website do not claim ownership or affiliation with any existing websites or companies. Users are encouraged to use the information responsibly for learning purposes. Liability for any misuse of the content provided is not accepted.
Below is the html code for this video.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sleek Hamburger Fold-Out</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav role="navigation">
<div class="menu-toggle">
<input type="checkbox">
<span></span>
<span></span>
<span></span>
<ul class="menu">
<a href="#home">
<li>Home</li>
</a>
<a href="#about">
<li>About</li>
</a>
<a href="#features">
<li>Features</li>
</a>
<a href="#contact">
<li>Contact</li>
</a>
<a href="#login">
<li>Login</li>
</a>
</ul>
</div>
</nav>
<div class="container">
<h1>Sleek Hamburger Fold-Out</h1>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Deserunt sunt veniam illo reiciendis dolores nisi.
Illo labore consequuntur possimus distinctio quaerat ratione facere, aut neque cumque laborum suscipit
dignissimos minima.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta dolorum ipsum fugiat libero saepe, sit rem
assumenda sint veniam quis omnis asperiores deleniti doloremque unde quae eveniet, excepturi autem
necessitatibus.</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis ex obcaecati in laborum deserunt vel beatae
iusto provident fugit maxime sed ab tempora, quas totam officia fugiat dolores asperiores. Vel!</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab dignissimos, deserunt accusamus reiciendis
laudantium dolore sint, maxime beatae rem, voluptates commodi impedit vitae tenetur? Quas ex laborum
veritatis sapiente soluta.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime tenetur sapiente tempore perspiciatis
officiis dolor nam facilis consectetur atque. Laborum praesentium aliquam soluta animi, deleniti dicta!
Error magnam asperiores autem?</p>
</div>
</body>
</html>Below is the css code for this video.
style.css
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
width: 100%;
background: #1d3c47;
color: #d4ccac;
overflow: hidden;
}
nav {
position: absolute;
}
.menu-toggle {
position: relative;
top: 50px;
left: 50px;
display: block;
z-index: 1;
user-select: none;
}
.menu-toggle a {
text-decoration: none;
color: #1d3c47;
transition: all 0.5s ease;
}
.menu-toggle a:hover {
color: #d4ccac;
}
.menu-toggle a:hover li {
font-size: 24px;
}
.menu-toggle input {
position: absolute;
top: -7px;
left: -7px;
display: block;
height: 32px;
width: 40px;
cursor: pointer;
z-index: 2;
opacity: 0;
}
.menu-toggle span {
position: relative;
display: block;
height: 4px;
width: 33px;
background: #eb83b5;
border-radius: 3px;
transform-origin: 4px 0px;
margin-bottom: 5px;
z-index: 1;
transition: transform 0.5s cubic-bezier(0.75, 0.25, 0.05, 1), background 0.5s cubic-bezier(0.75, 0.2, 0.05, 1), opacity 0.5s ease;
}
.menu-toggle span:first-child {
transform-origin: 0% 0%;
}
.menu-toggle span:nth-last-child(2) {
transform-origin: 0% 100%;
}
.menu-toggle input:checked~span {
background: #b15f88;
transform: rotate(45deg) translate(-2px, -1px);
opacity: 1;
}
.menu-toggle input:checked~span:nth-last-child(3) {
transform: rotate(0deg) scale(0.2, 0.2);
opacity: 0;
}
.menu-toggle input:checked~span:nth-last-child(2) {
transform: rotate(-45deg) translate(0, -1px);
}
.menu {
position: absolute;
width: 150px;
background: #4bb2d6;
transform: translate(-100%, 0);
transform-origin: 0% 0%;
list-style-type: none;
margin: -100px 0 0 -50px;
padding: 125px 50px 50px;
transition: transform 0.5s cubic-bezier(0.75, 0.25, 0.05, 1);
}
.menu li {
font-size: 18px;
padding: 10px 0;
transition: all 0.5s ease;
}
.menu-toggle input:checked~ul {
transform: none;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
width: 75%;
margin: 0 auto;
}
.container h1 {
line-height: 2;
margin-bottom: 5%;
}
.container p {
text-align: justify;
line-height: 1.5;
margin-bottom: 3%;
}
.container p:last-child {
margin-bottom: 0;
}Thanks for visiting