hero s hlavičkou v24

by Petr Haluza

HTML

<!-- Header Section -->
<header class="header" id="header">
   <nav class="navbar container">
      <a href="#" class="brand">MojeLogo</a>
      <div class="burger" id="burger">
         <span class="burger-line"></span>
         <span class="burger-line"></span>
         <span class="burger-line"></span>
      </div>
      <div class="menu" id="menu">
         <ul class="menu-inner">
            <li class="menu-item"><a href="#" class="menu-link">Uvod</a></li>
            <li class="menu-item"><a href="#" class="menu-link">Produkty</a></li>
            <li class="menu-item"><a href="#" class="menu-link">O nás</a></li>
            <li class="menu-item"><a href="#" class="menu-link">Kontakty</a></li>
         </ul>
      </div>
      <a href="#" class="menu-block">Nakupovat</a>
   </nav>
</header>
<!-- Main Section -->
<main class="main">
   <section class="section banner banner-section">
      <div class="container banner-column">
         <img class="banner-image" src="https://i.ibb.co/vB5LTFG/Headphone.png" alt="banner">
         <div class="banner-inner">
            <h1 class="heading-xl">Zažij nepoznanou rychlost</h1>
            <p class="paragraph">
               Lorem ipsum dolor shit amber hard makes me hard.
            </p>
            <button class="btn btn-darken btn-inline">
               Produkty<i class="bx bx-right-arrow-alt"></i>
            </button>
         </div>
         <div class="banner-links">
            <a href="#" title=""><i class="bx bxl-facebook"></i></a>
            <a href="#" title=""><i class="bx bxl-instagram"></i></a>
            <a href="#" title=""><i class="bx bxl-twitter"></i></a>
            <a href="#" title=""><i class="bx bxl-youtube"></i></a>
         </div>
      </div>
   </section>
</main>

SCSS

@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap");

:root {
   --color-white-100: hsl(206, 5%, 100%);
   --color-white-200: hsl(206, 5%, 90%);
   --color-white-300: hsl(206, 5%, 80%);
   --color-white-400: hsl(206, 5%, 65%);
   --color-white-500: hsl(206, 5%, 50%);

   --color-black-100: hsl(213, 20%, 10%);
   --color-black-200: hsl(213, 23%, 8%);
   --color-black-300: hsl(214, 21%, 6%);
   --color-black-400: hsl(210, 21%, 6%);
   --color-black-500: hsl(216, 22%, 4%);
   --color-black-600: hsl(220, 18%, 3%);
   --color-black-700: hsl(220, 27%, 2%);
   --color-black-800: hsl(180, 20%, 1%);

   --color-blue-100: hsl(214, 95%, 93%);
   --color-blue-200: hsl(213, 97%, 87%);
   --color-blue-300: hsl(212, 96%, 78%);
   --color-blue-400: hsl(213, 94%, 68%);
   --color-blue-500: hsl(217, 91%, 60%);
   --color-blue-600: hsl(221, 83%, 53%);
   --color-blue-700: hsl(224, 76%, 48%);
   --color-blue-800: hsl(226, 71%, 40%);
   --color-blue-900: hsl(224, 64%, 33%);

   --shadow-small: 0 1px 3px 0 rgba(0, 0, 0, 0.1),
      0 1px 2px 0 rgba(0, 0, 0, 0.06);
   --shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
      0 2px 4px -1px rgba(0, 0, 0, 0.06);
   --shadow-large: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
      0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

*,
*::before,
*::after {
   padding: 0;
   margin: 0;
   box-sizing: border-box;
   list-style: none;
   list-style-type: none;
   text-decoration: none;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
}

html {
   font-size: 100%;
   box-sizing: inherit;
   scroll-behavior: smooth;
   height: -webkit-fill-available;
}

body {
   font-family: "Rubik", sans-serif;
   font-size: clamp(1rem, 2vw, 1.125rem);
   font-weight: 400;
   line-height: 1.5;
   height: -webkit-fill-available;
   color: var(--color-white-100);
   background-color: var(--color-black-500);
}

main {
   overflow: hidden;
}

a,
button {
   cursor:...

JavaScript

const navbarMenu = document.getElementById("menu");
const burgerMenu = document.getElementById("burger");
const headerMenu = document.getElementById("header");

// Open Close Navbar Menu on Click Burger
if (burgerMenu && navbarMenu) {
   burgerMenu.addEventListener("click", () => {
      burgerMenu.classList.toggle("is-active");
      navbarMenu.classList.toggle("is-active");
   });
}

// Close Navbar Menu on Click Menu Links
document.querySelectorAll(".menu-link").forEach((link) => {
   link.addEventListener("click", () => {
      burgerMenu.classList.remove("is-active");
      navbarMenu.classList.remove("is-active");
   });
});

// Change Header Background on Scrolling
window.addEventListener("scroll", () => {
   if (this.scrollY >= 85) {
      headerMenu.classList.add("on-scroll");
   } else {
      headerMenu.classList.remove("on-scroll");
   }
});

// Fixed Navbar Menu on Window Resize
window.addEventListener("resize", () => {
   if (window.innerWidth > 768) {
      if (navbarMenu.classList.contains("is-active")) {
         navbarMenu.classList.remove("is-active");
      }
   }
});