mate-academy · Tomek93x · Nov 13, 2025 · Nov 13, 2025 · Nov 13, 2025 · Nov 13, 2025
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://tomek93x.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
@@ -1,22 +1,133 @@
 <!doctype html>
-<html lang="en">
+<html lang="pl">
   <head>
     <meta charset="UTF-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0"
-    />
-    <title>Miami</title>
-    <link
-      rel="stylesheet"
-      href="src/styles/main.scss"
-    />
-    <script
-      src="src/scripts/main.js"
-      defer
-    ></script>
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <title>BOSE Landing</title>
+    <link rel="stylesheet" href="src/styles/main.css" />
+    <link rel="icon" href="src/images/logo.png" type="image/png" />
   </head>
   <body>
-    <h1>Miami</h1>
+    <img
+      src="src/images/header.png"
+      alt="BOSE logo"
+      class="logo-floating"
+    />
+
+    <header class="header">
+      <nav class="nav">
+        <ul class="nav-menu">
+          <li>
+            <a href="#products" class="nav-link">Produkty</a>
+          </li>
+          <li>
+            <a href="#about" class="nav-link">O nas</a>
+          </li>
+          <li>
+            <a href="#contact" class="nav-link">Kontakt</a>
+          </li>
+        </ul>
+      </nav>
+    </header>
+
+    <section class="hero">
+      <img
+        class="hero-banner"
+        src="src/images/hero.png"
+        alt="Bose headphones"
+      />
+      <div class="hero-content">
+        <h1>Bose: Doświadcz dźwięku przyszłości</h1>
+        <p>The world shakes. Your music shines.</p>
+        <a href="#products" class="btn">Zobacz produkty</a>
+      </div>
+    </section>
+
+    <main>
+      <section class="products-list" id="products">
+        <div class="product-card">
+          <img
+            src="src/images/bose-portable-smart-speaker.png"
+            alt="Bose portable Smart speaker"
+          />
+          <div class="product-info">
+            <h3>Bose portable Smart speaker</h3>
+            <p>Smart home</p>
+            <span class="price">$399.00</span>
+          </div>
+        </div>
+        <div class="product-card">
+          <img
+            src="src/images/soundlink-color-bluetooth-speaker-2.png"
+            alt="SoundLink Color Bluetooth speaker II"
+          />
+          <div class="product-info">
+            <h3>SoundLink Color Bluetooth speaker II</h3>
+            <p>Portable bluetooth</p>
+            <span class="price">$199.00</span>
+          </div>
+        </div>
+        <div class="product-card">
+          <img
+            src="src/images/soundlink-flex-bluetooth-speaker.png"
+            alt="SoundLink Flex Bluetooth speaker"
+          />
+          <div class="product-info">
+            <h3>SoundLink Flex Bluetooth speaker</h3>
+            <p>Portable bluetooth</p>
+            <span class="price">$149.00</span>
+          </div>
+        </div>
+      </section>
+
+      <section class="categories-header">
+        <h2 class="categories-title">
+          Browse Bose
+          <br />
+          products by category
+        </h2>
+      </section>
+      <section class="categories-grid-section">
+        <div class="categories-grid-wrapper">
+          <div class="category-grid-item">
+            <img
+              src="src/images/Middle-2.png"
+              alt="Speakers"
+            />
+            <p class="category-grid-label">Speakers</p>
+          </div>
+          <div class="category-grid-item">
+            <img
+              src="src/images/Middle-3.png"
+              alt="Audio sunglasses"
+            />
+            <p class="category-grid-label">Audio sunglasses</p>
+          </div>
+        </div>
+      </section>
+
+      <section class="about" id="about">
+        <h2>O nas</h2>
+        <p>Bose to światowy lider w dziedzinie innowacji dźwięku.</p>
+      </section>
+
+      <section class="contact" id="contact">
+        <h2>Kontakt</h2>
+        <form>
+          <input type="text" placeholder="Imię" required />
+          <input type="email" placeholder="Email" required />
+          <textarea placeholder="Twoja wiadomość"></textarea>
+          <button type="submit">Wyślij</button>
+        </form>
+      </section>
+    </main>
+
+    <section class="bottom-banner">
+      <img src="src/images/Bottom.png" alt="Bose bottom graphic" />
+    </section>
+
+    <footer class="footer">
+      <p>&copy; 2025 Bose. All rights reserved.</p>
+    </footer>
   </body>
 </html>