Afroj Mansoori's Blog

MediaQuery Project Web development

Afroj Mansoori's photo
Afroj Mansoori
·

2 min read

Build a responsive Navbar, on smaller screens it should be a hamburger menu which on click should reveal the menu items nicely, and on larger screens they should be displayed directly on the screen.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
    <link rel="stylesheet" href="style.css">
    <title>Box</title>
</head>
<body>
    <div class="box">
        <div class="head">
        <i id="flag" class="fa-solid fa-bars"></i>
        <h1>Burger Menia</h1>
        </div> <br>
        <div id="search"><li><input type="search"  placeholder="search loaction"> <button>search</button></li>
        </div>

        <nav  class="navbar">
        <ul>
        <li>Home</li>
        <li>Menu</li>
        <li>Catering</li>
        <li>login</li></ul>
        </nav>
    </div>
<script src="index.js"></script>
</body>
</html>    justify-content: space-between;

*{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}
body{ 
    width: 100%;
    height: 100vh;
    background:linear-gradient(rgba(83, 77, 231, 0.1),rgba(59, 143, 68, 0.3)), url(image.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}
.box{
    height: 8vh;
    width: 100%;
    background:linear-gradient(rgba(232, 14, 47, 0.7),rgba(188, 37, 118, 0.5));
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.head{
    display: flex;
    align-items: center;
    display: flex;
}
.head #flag{
    margin: 0px;
    visibility: hidden;
}
.head h1{
    color: rgb(238, 211, 38);
    padding: 5px;
}
.navbar ul{
    display: flex;
    align-items: center;
    justify-content: center;
    float: right;
    margin-top: 10px;
}
ul li{
    margin: 20px;
    margin-top: 15px;
    color: rgb(130, 188, 14);
    font-size: 18px;
    font-weight: 600;
}
li{
list-style: none;
}
li input{
    padding: 2px 5px 2px 5px;
    width: 200px;
    border: 2px solid  rgb(40, 215, 55) ;;
    border-radius: 3px;
}
li button{
    background-color:rgb(40, 215, 55) ;
   border-radius: 5px;
   padding: 2px 5px 2px 5px;
}
button:hover{
    background-color: red;
    color: aliceblue;
    cursor: pointer;
}
@media  screen and (max-width:700px)  and (min-width:300px){
    .head #flag{
       visibility: visible;
        margin: 10px;
        margin-top: 20px;
       }
       #flag:hover{
        cursor: pointer;
       }
    .box{
        display: block;
        height: 15vh;
    }
    .hidden{
        display: none;
    }
    .head{
       float: left;
       gap: 20vw;
       align-items: center;
    }
    .fa-solid {
      color: antiquewhite;
      font-weight: 900;
    }
    .fa-bars:hover{
        cursor: pointer;
    }

    .navbar ul{
        display: block;
        background-color: rgb(122, 132, 129);
        float: left;
         height: 200px;
        width: 100px; 
    }

    ul li{
        margin: 10px;
        margin-top: 0%;
        color: rgb(120, 1, 48);
        font-size: 16px;
        font-weight: 600;
        list-style: none;
    }

  .search {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
   div li input{
    margin-left: 25%;
    margin-top: 10px;
        width: 200px;
        border: 2px solid  rgb(40, 215, 55) ;;
        border-radius: 3px;
    }

@media screen and (max-width:300px) {
    button{
         margin-left: 130px;
         margin-top: 5px;
    }
    .box{
        height: 110px;
    }

}

const bar = document.querySelector('#flag');
const nav=document.querySelector('nav')
bar.addEventListener('click', function(){
    if(nav.classList=="navbar"){
        nav.classList.add("hidden");
        nav.classList.remove("navbar")
    }else{
        nav.classList.remove("hidden")
        nav.classList.add("navbar")
    }
});

// background image

for max-width 700px and min-width 300px

for max-width 300px

PhysicswalaJavaScriptprojectsHTMLCSS