Coffee Website || BrodScholl

<!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8">
        <meta name="viewport" content ="width=device-width, initial-scale=1.0">
        <title> Coffee Website</title>
    </head>
  <body>
       <header>
       <nav class="nabvar">
         <a class="logo">Cofee</a>
        <ul class="nabvar">
           <span id="close-menu-btn"class="material-sym-out">Close</span>
          <li><a class="#">Home</a></li>
          <li><a class="#">Products</a></li>
          <li><a class="#">Testimonials</a></li>
          <li><a class="#">About us</a></li>
          <li><a class="#">Contact us</a></li>
        </ul>
           <span id="hamburger-btn"class="material-sym-out">Menu</span>
        </nav>
     </header>
       <section class="hr-section">
       <div class="content">
                 <h2 class="movi-name">Start Your Day With Fresh Coffee</h2>
                 <p >Coffee is a popular and beloved beverage enjoyed by people around the world.Awaken your senses with a steaming cup of liquid motivation.</p>
     <button> Order Now<button>
     </div>
   </section>
   </body>
  </html>

/*Style the box items */
   * {
   padding: 0 ;
   margin: 0 ;
   box-sizing: border-box ;
   font-family: sans-serif ;
    }
   header{
   position: fixed ;
   top: 0px ;
   left: 0px ;
   width: 100% ;
   padding: 20px ;
    }
   .header .navbar {
   display :flex ;
   align-items :center ;
   justify-content :space-between ;
   max-width :1200px ;
   margin :0px auto ;
   }
   .navbar .logo {
   color :#fff ;
   font-width :600 ;
   font-size :32px ;
   text-decoration :none ;
   }
   .navbar .menu-links {
   display :flex ;
   list-style :none ;
   gap :35px ;
   }
   .hr-section {
   background-position :center ;
   height :100vh ;
   background-size :cover ;
   disable :flex ;
   padding :0px 21px ;
   align-items :center ;
   }
   .hr-section content button {
   background :#fff ;
   border :none ;
   font-size :32px ;
   border-radius :6px ;
   padding :12px 30px ;
   font-weight :600 ;
   margin-top :37px ;
   transition :0.2s ease ;
   }
   #hamburger-btn {
   color :#fff ;
   cursor :pointer ;
   disable :none ;
   }
   .navbar.menu-links {
   position :fixed ;
   top :0px ;
   background :#fff ;
   width :250px ;
   height :100vh ;
   left :-250px ;
   padding :70px 40px 0px ;
   flex-direction :column ;
   }

/*Javascript */
   const header = document.querySelector("header") ;
   const hmberbtn = document.querySelector("#hmber-btn") ;
   const closeMenuBtn = document.querySelector("#close-menu-btn") ;
hamburgerBtn.addEventListener("click", () => header.classList.toggle("show-mobile-menu"));
hamburgerBtn.addEventListener("click", () => hamburgerBtn.click());

Creating a Responsive Coffee Website

Output

Other

BrodSchool

Usefull link

Quick Link