mate-academy · inklynx · Feb 15, 2026 · Mar 16, 2026 · Apr 9, 2026 · Apr 12, 2026
diff --git a/README.md b/README.md
@@ -10,6 +10,6 @@ In this task, you will learn how to implement a landing page. To do that:
   - [Nothing](https://www.figma.com/file/DtkQmQ797hk0nI4KfMi2Uq/BOSE-New-Version?type=design&node-id=6802-139&t=L7eKz5YKLN0m5WxR-0)
 - watch the lesson videos and implement your page blocks similarly to the videos;
 - **DON'T** try to do it `Pixel Perfect` - implement it the most `simple` way so it looks similar;
-- when you finish the first block of your page deploy it and create a Pull Request with a [DEMO LINK](https://<your_account>.github.io/layout_miami/) 
+- when you finish the first block of your page deploy it and create a Pull Request with a [DEMO LINK](https://inklynx.github.io/layout_miami/)
 - after each next block do the same (add, commit and push the changes, and deploy the updated demo;
 - check yourself using the [CHECKLIST](https://github.com/mate-academy/layout_miami/blob/master/checklist.md) when finished;
diff --git a/index.html b/index.html
@@ -6,17 +6,252 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0"
     />
-    <title>Miami</title>
+    <title>BOSE Landing</title>
+
+    <meta
+      name="description"
+      content="Bose products landing page project created as a part of course. It uses modern CSS ans JS techniques." />
+
+    <link rel="icon"
+          href="/src/images/bose-fav.svg"
+          type="image/svg+xml" />
+
+    <link
+      rel="preload"
+      as="image"
+      href="/src/images/photos/hero-girl-lg.webp"
+      media="(min-width: 1024px)"
+      imagesizes="100vw"
+      fetchpriority="high">
+
+    <link
+      rel="preload"
+      as="image"
+      href="/src/images/photos/hero-girl-mobile.webp"
+      media="(max-width: 1023px)"
+      imagesizes="100vw"
+      fetchpriority="high">
+
     <link
       rel="stylesheet"
-      href="src/styles/main.scss"
+      href="/src/styles/main.scss"
     />
     <script
-      src="src/scripts/main.js"
       defer
+      type="module"
+      src="/src/scripts/main.js"
     ></script>
   </head>
   <body>
-    <h1>Miami</h1>
+
+    <header class="header">
+      <div class="grid-container header__container">
+        <a href="/"
+          class="header__logo-link">
+          <img
+          src="/src/images/hero-logo-bose.svg"
+          alt="Bose Home"
+          class="header__logo"
+          />
+        </a>
+
+        <div class="header__actions">
+          <a
+            href="tel:+1 234 555-55-55"
+            class="header__phone-link"
+            aria-label="Call us">
+
+            <span class="header__phone-number">
+              +1 234 555-55-55
+            </span>
+
+            <img
+              src="/src/images/header-phone.svg"
+              alt=" "
+              class="header__phone-icon"
+              aria-hidden="true"
+            />
+          </a>
+
+          <button
+            type="button"
+            class="burger"
+            aria-controls="main-menu"
+            aria-expanded="false"
+            aria-label="Menu"
+          >
+            <div class="burger__wrapper">
+              <img
+                src="/src/images/menu-burger.svg"
+                alt=" "
+                aria-hidden="true"
+                class="burger__icon burger__icon--default"
+              />
+              <img
+                src="/src/images/menu-burger-hover.svg"
+                alt=" "
+                aria-hidden="true"
+                class="burger__icon burger__icon--hover"
+              />
+              <img
+                src="/src/images/menu-x.svg"
+                alt=" "
+                aria-hidden="true"
+                class="burger__icon burger__icon--close"
+              />
+            </div>
+          </button>
+
+          <nav
+            id="main-menu"
+            class="menu">
+            <div class="menu__container">
+              <ul class="menu__list">
+                <li class="menu__item"><a href="#home" class="menu__link">home</a></li>
+                <li class="menu__item"><a href="#recommanded" class="menu__link">recommended</a></li>
+                <li class="menu__item"><a href="#categories" class="menu__link">categories</a></li>
+                <li class="menu__item"><a href="#how-to-buy" class="menu__link">how to buy</a></li>
+                <li class="menu__item"><a href="#contacts" class="menu__link">contacts</a></li>
+              </ul>
+              <div class="menu__contact">
+                <a href="tel:+1 234 555-55-55" class="menu__link menu__tel">
+                  <span class="menu__tel-number">+1 234 555-55-55</span>
+                  <span class="menu__tel-label">call to order</span>
+                </a>
+              </div>
+            </div>
+          </nav>
+        </div>
+      </div>
+    </header>
+
+    <div class="menu-overlay"></div>
+
+    <main>
+      <h1 class="visually-hidden">
+        Bose Quiet Comfort Wireless Headphones - Premium Noise Cancelling Audio Experience
+      </h1>
+      <section class="hero">
+        <picture>
+          <source
+            media="(min-width: 1024px)"
+            srcset="/src/images/photos/hero-girl-lg.webp"
+          >
+          <img
+            src="/src/images/photos/hero-girl-mobile.webp"
+            alt="woman wearing Bose headphones"
+            class="hero__bg"
+            loading="eager"
+          >
+        </picture>
+        <div class="grid-container hero__container">
+          <div class="hero__content">
+
+            <svg
+            class="hero__soundwave"
+            viewBox="0 0 48 58"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            aria-hidden="true">
+              <rect
+                class="wave-bar"
+                x="4.57129" y="21.3684"
+                width="2.28571"
+                height="15.2632"
+                rx="1.14286"
+                fill="currentColor"/>
+              <rect
+                class="wave-bar"
+                x="0"
+                y="25.1843"
+                width="2.28571"
+                height="7.63158"
+                rx="1.14286"
+                fill="currentColor"/>
+              <rect
+                class="wave-bar"
+                x="45.7142"
+                y="25.1843"
+                width="2.28571"
+                height="7.63158"
+                rx="1.14286"
+                fill="currentColor"/>
+              <rect
+                class="wave-bar"
+                x="9.14282"
+                y="19.079"
+                width="2.28571"
+                height="19.8421"
+                rx="1.14286"
+                fill="currentColor"/>
+              <rect
+                class="wave-bar"
+                x="13.7144"
+                y="12.2106"
+                width="2.28571"
+                height="33.5789"
+                rx="1.14286"
+                fill="currentColor"/>
+              <rect
+                class="wave-bar"
+                x="18.2856"
+                y="16.7894"
+                width="2.28571"
+                height="24.4211"
+                rx="1.14286"
+                fill="currentColor"/>
+              <rect
+                class="wave-bar"
+                x="22.8572"
+                y="4.57886"
+                width="2.28571"
+                height="48.8421"
+                rx="1.14286"
+                fill="currentColor"/>
+              <rect
+                class="wave-bar"
+                x="27.4285"
+                y="0"
+                width="2.28571"
+                height="58"
+                rx="1.14286"
+                fill="currentColor"/>
+              <rect
+                class="wave-bar"
+                x="32.0002"
+                y="12.2106"
+                width="2.28571"
+                height="33.5789"
+                rx="1.14286"
+                fill="currentColor"/>
+              <rect
+                class="wave-bar"
+                x="36.5715"
+                y="17.5526"
+                width="2.28571"
+                height="22.8947"
+                rx="1.14286"
+                fill="currentColor"/>
+              <rect
+                class="wave-bar"
+                x="41.1427"
+                y="20.6052"
+                width="2.28571"
+                height="16.7895"
+                rx="1.14286"
+                fill="currentColor"/>
+            </svg>
+
+            <h2 class="hero__display-text">
+              The world shades.
+              <br />
+              Your music shines.
+            </h2>
+          </div>
+        </div>
+
+      </section>
+    </main>
+
   </body>
 </html>
diff --git a/robots.txt b/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /
diff --git a/src/fonts/roboto-blackitalic-webfont.woff2 b/src/fonts/roboto-blackitalic-webfont.woff2
diff --git a/src/fonts/roboto-bold-webfont.woff2 b/src/fonts/roboto-bold-webfont.woff2
diff --git a/src/fonts/roboto-bolditalic-webfont.woff2 b/src/fonts/roboto-bolditalic-webfont.woff2
diff --git a/src/fonts/roboto-italic-webfont.woff2 b/src/fonts/roboto-italic-webfont.woff2
diff --git a/src/fonts/roboto-medium-webfont.woff2 b/src/fonts/roboto-medium-webfont.woff2
diff --git a/src/fonts/roboto-mediumitalic-webfont.woff2 b/src/fonts/roboto-mediumitalic-webfont.woff2
diff --git a/src/fonts/roboto-regular-webfont.woff2 b/src/fonts/roboto-regular-webfont.woff2
diff --git a/src/images/bose-fav.svg b/src/images/bose-fav.svg
diff --git a/src/images/cross.svg b/src/images/cross.svg
diff --git a/src/images/crown.svg b/src/images/crown.svg
diff --git a/src/images/favicon.png b/src/images/favicon.png
diff --git a/src/images/header-phone.svg b/src/images/header-phone.svg
diff --git a/src/images/hero-icon-sound-waves.svg b/src/images/hero-icon-sound-waves.svg
diff --git a/src/images/hero-logo-bose.svg b/src/images/hero-logo-bose.svg
diff --git a/src/images/logo.png b/src/images/logo.png
diff --git a/src/images/menu-burger-hover.svg b/src/images/menu-burger-hover.svg
diff --git a/src/images/menu-burger.svg b/src/images/menu-burger.svg
diff --git a/src/images/menu-x.svg b/src/images/menu-x.svg
diff --git a/src/images/menu.svg b/src/images/menu.svg
diff --git a/src/images/menu_hover.svg b/src/images/menu_hover.svg
diff --git a/src/images/phone.svg b/src/images/phone.svg
diff --git a/src/images/photos/1.jpg b/src/images/photos/1.jpg
diff --git a/src/images/photos/2.jpg b/src/images/photos/2.jpg
diff --git a/src/images/photos/3.jpg b/src/images/photos/3.jpg
diff --git a/src/images/photos/4.jpg b/src/images/photos/4.jpg
diff --git a/src/images/photos/5.jpg b/src/images/photos/5.jpg
diff --git a/src/images/photos/6.jpg b/src/images/photos/6.jpg
diff --git a/src/images/photos/bluetooth-speaker-1.webp b/src/images/photos/bluetooth-speaker-1.webp
diff --git a/src/images/photos/bluetooth-speaker-2.webp b/src/images/photos/bluetooth-speaker-2.webp
diff --git a/src/images/photos/footer-girl-lg.webp b/src/images/photos/footer-girl-lg.webp
diff --git a/src/images/photos/footer-girl-mobile.webp b/src/images/photos/footer-girl-mobile.webp
diff --git a/src/images/photos/gallery-girl-1.webp b/src/images/photos/gallery-girl-1.webp
diff --git a/src/images/photos/gallery-girl-2.webp b/src/images/photos/gallery-girl-2.webp
diff --git a/src/images/photos/gallery-girl-3.webp b/src/images/photos/gallery-girl-3.webp
diff --git a/src/images/photos/gallery-speaker-4.webp b/src/images/photos/gallery-speaker-4.webp
diff --git a/src/images/photos/gallery-sunglasses-5.webp b/src/images/photos/gallery-sunglasses-5.webp
diff --git a/src/images/photos/gallery-sunglasses-6.webp b/src/images/photos/gallery-sunglasses-6.webp
diff --git a/src/images/photos/hero-girl-lg.webp b/src/images/photos/hero-girl-lg.webp
diff --git a/src/images/photos/hero-girl-mobile.webp b/src/images/photos/hero-girl-mobile.webp