Skip to main content

tesla clone

tesla clone 1)html file <! DOCTYPE html > < html lang =" en "> < head >     < meta charset =" UTF-8 ">     < meta http-equiv =" X-UA-Compatible " content =" IE=edge ">     < meta name =" viewport " content =" width=device-width, initial-scale=1.0 ">     < link rel =" stylesheet " href =" https://cdnjs.cloudflare.com/ajax/libs/font-awesome /6.0.0-beta3/css/all.min.css " integrity =" sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLa nw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA== " crossorigin =" anonymous " referrerpolicy =" no-referrer "     />     < link rel =" preconnect " href =" https://fonts.googleapis.com ">     < link rel =" preconnect " href =" https://fonts.gstatic.com " crossorigin >     < link rel =" stylesheet " href =" ./style.css "...
Post a Comment

responsive navbar

how to create responsive navbar 







html code

          1) index.html



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome
/6.0.0-beta3/css/all.min.css"
integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/
zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <title>navbar</title>
</head>
<body>
    <nav>
       <h1>navbar</h1>
       <ul id="midmenu">
           <li><a href="#">home</a></li>
           <li><a href="#">home</a></li>
           <li><a href="#">home</a></li>
           <li><a href="#">home</a></li>
           <li><a href="#">home</a></li>
       </ul>
       <i class="fas fa-bars" id="menu"></i>
    </nav>
    <!-- sidemenu -->
    <div id="sidemenu">
        <i class="fas fa-times-circle " id="close"></i>
        <ul>
        <li><a href="#">home</a></li>
        <li><a href="#">home</a></li>
        <li><a href="#">home</a></li>
        <li><a href="#">home</a></li>
        <li><a href="#">home</a></li>
        <li><a href="#">home</a></li>
        <li><a href="#">home</a></li>
        <li><a href="#">home</a></li>
        <li><a href="#">home</a></li>
        <li><a href="#">home</a></li>
    </ul>
    </div>
    <script src="./index.js"></script>
</body>
</html>

          2) style.css



@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap');

*{
    padding: 0%;
    margin: 0%;
    box-sizing: border-box;
    font-family: 'Ubuntu', sans-serif;
}
body{
    background-color: black;
}
nav{
    width: 100vw;
    height: 5vh;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 18px;
}
nav > ul {
    display: flex;
    list-style: none;
    gap: 5px;
}
a{
    text-decoration: none;
    color: black;
}
#menu{
    display: none;
    background-color: red;
    padding: 4px 6px;
}

/* sidemenu style */
#sidemenu{
    padding: 20px;
    background-color: #fff;
    width: 200px;
    position: fixed;
    top: 0%;
    right: 0%;
    bottom: 0%;
    transition: all 1s;
}
#close{
    margin-left: 80%;
   
    font-size: 1.5rem;
}
#sidemenu > ul{
    display: flex;
    flex-direction: column;
    list-style: none;
    gap: 3px;
}
#sidemenu{
    display: none;
}
@media screen and (max-width:460px) {
   #midmenu{
       display: none;
   }
   #menu{
    display: block;
}
.showmenu{
    display: none;
}
}

.showmenu{
    display: block !important;
    transition: all 1s;
}

            
            3) index.js



const sidemenu = document.getElementById('sidemenu');
const menu = document.getElementById("menu");
const close =  document.getElementById("close");

menu.addEventListener('click',()=>{
    sidemenu.classList.toggle("showmenu")
})

close.addEventListener('click',()=>{
    sidemenu.classList.toggle("showmenu")
})


Comments

Post a Comment