mate-academy · LenilsonCampos · Jan 28, 2026 · Feb 13, 2026 · Feb 18, 2026 · Feb 24, 2026
diff --git a/index.html b/index.html
@@ -1,22 +1,319 @@
+<!-- #region head -->
 <!doctype html>
-<html lang="en">
+<html lang="en" class="page">
   <head>
     <meta charset="UTF-8" />
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1.0"
     />
-    <title>Landing Page</title>
+    <title>Bose</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link
+      rel="preconnect"
+      href="https://fonts.gstatic.com"
+      crossorigin="anonymous"
+    >
+    <link
+      href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"
+      rel="stylesheet"
+    >
+
+    <link rel="shortcut icon" href="./src/images/icons/favicon.ico"
+      type="image/x-icon">
+
     <link
       rel="stylesheet"
-      href="src/styles/main.scss"
+      href="./src/styles/style.scss"
     />
     <script
-      src="src/scripts/main.js"
+      src="./src/scripts/main.js"
       defer
     ></script>
+
+
   </head>
-  <body>
-    <h1>Landing Page</h1>
+  <!-- #endregion-->
+
+  <body class="page__body">
+    <header class="header">
+      <div class="container">
+        <div class="header__content">
+          <div class="top-bar">
+            <a href="#" class="top-bar__logo">
+              <img src="src/images/logo.png" alt="Bose logo">
+            </a>
+            <div class="top-bar__icons">
+              <a
+                href="tel:+1 234 555-55-55"
+                class="icon icon--phone"
+                aria-label="Call us">
+              </a>
+
+              <a
+                href="#menu"
+                class="icon icon--menu"
+                aria-label="Open menu">
+              </a>
+            </div>
+          </div>
+          <div class="header__bottom">
+            <div class="header__waves"></div>
+            <h1 class="header__title">
+              The world shades.
+              <br>
+              Your music shines.
+            </h1>
+          </div>
+        </div>
+      </div>
+
+    </header>
+
+    <aside class="page__menu menu" id="menu">
+      <div class="container">
+        <div class="top-bar menu__top">
+          <a href="#" class="top-bar__logo">
+            <img src="./src/images/logo.png" alt="Bose logo">
+          </a>
+          <a href="#" class="icon icon--close"></a>
+        </div>
+        <div class="menu__bottom">
+          <nav class="nav menu__nav">
+            <ul class="nav__list">
+              <li class="nav__item">
+                <a class="nav__link" href="#">Home</a>
+              </li>
+              <li class="nav__item">
+                <a class="nav__link" href="#recommended">Recommended</a>
+              </li>
+              <li class="nav__item">
+                <a class="nav__link" href="#categories">Categories</a>
+              </li>
+              <li class="nav__item">
+                <a class="nav__link" href="#how-to-buy">How to buy</a>
+              </li>
+              <li class="nav__item">
+                <a class="nav__link" href="#contacts">Contacts</a>
+              </li>
+            </ul>
+          </nav>
+          <a href="tel:+1 234 555-55-55" class="menu__phone-number">
+            +1 234 555-55-55
+          </a>
+          <a href="tel:+1 234 555-55-55" class="menu__call-to-order">
+            Call to order
+          </a>
+        </div>
+      </div>
+    </aside>
+
+    <main class="main">
+      <div class="container">
+        <div class="main__content">
+          <section class="recommended" id="recommended">
+            <h2 class="section-title">Recommended</h2>
+
+            <div class="recommended__products">
+              <article class="product recommended__product">
+                <img
+                  src="./src/images/products/Bose portable Smart speaker.png"
+                  alt="Bose portable Smart speaker"
+                  class="product__photo"
+                >
+                <h3 class="product__title">Bose portable Smart speaker</h3>
+                <p class="product__category">Smart home</p>
+                <p class="product__price">$ 399.00</p>
+              </article>
+
+              <article class="product recommended__product">
+                <img
+                  src="./src/images/products/SoundLink Flex Bluetooth speaker.png"
+                  alt="SoundLink Flex Bluetooth speaker"
+                  class="product__photo"
+                >
+                <h3 class="product__title">SoundLink Flex Bluetooth speaker</h3>
+                <p class="product__category">Portable bluetooth</p>
+                <p class="product__price">$ 149.00</p>
+              </article>
+
+              <article class="product recommended__product">
+                <img
+                  src="./src/images/products/SoundLink Color Bluetooth speaker II.png"
+                  alt="SoundLink Color Bluetooth speaker II"
+                  class="product__photo"
+                >
+                <h3 class="product__title">SoundLink Color Bluetooth speaker II</h3>
+                <p class="product__category">Portable bluetooth</p>
+                <p class="product__price">$ 129.00</p>
+              </article>
+            </div>
+          </section>
+
+          <section class="categories" id="categories">
+            <h2 class="section-title">Browse Bose products by category</h2>
+
+            <div class="categories__wrapper">
+              <article class="category">
+                <div class="category__photos">
+                  <a href="#" class="category__link category__link--wide">
+                    <img
+                      class="category__photo"
+                      src="./src/images/products/Headphones & earbuds - wide.jpg" alt="Headphones & earbuds"
+                    >
+                  </a>
+
+                  <a href="#" class="category__link category__link--square">
+                    <img
+                      class="category__photo"
+                      src="./src/images/products/Headphones & earbuds - square.png" alt="Headphones & earbuds"
+                    >
+                  </a>
+                </div>
+                <h3 class="category__title">Headphones & earbuds</h3>
+              </article>
+
+              <article class="category">
+                <div class="category__photos">
+                  <a href="#" class="category__link category__link--wide">
+                    <img
+                      class="category__photo"
+                      src="./src/images/products/Speakers - wide.png"
+                      alt="Speakers"
+                    >
+                  </a>
+
+                  <a href="#" class="category__link category__link--square">
+                    <img
+                      class="category__photo"
+                      src="./src/images/products/Speakers - square.png"
+                      alt="Speakers"
+                    >
+                  </a>
+                </div>
+
+                <h3 class="category__title">Speakers</h3>
+              </article>
+
+              <article class="category">
+                <div class="category__photos">
+                  <a href="#" class="category__link category__link--square">
+                    <img
+                      class="category__photo"
+                      src="./src/images/products/Audio sunglasses - square.png" alt="Audio sunglasses"
+                    >
+                  </a>
+
+                  <a href="#" class="category__link category__link--wide">
+                    <img
+                      class="category__photo"
+                      src="./src/images/products/Audio sunglasses - wide.jpg" alt="Audio sunglasses"
+                    >
+                  </a>
+                </div>
+
+                <h3 class="category__title">Audio sunglasses</h3>
+              </article>
+
+              <button type="submit" class="category__button">View all</button>
+            </input>
+            </div>
+
+
+
+          </section>
+
+          <section class="how-to-buy" id="how-to-buy">
+            <h2 class="
+              how-to-buy__title
+              section-title
+              section-title--align-left"
+            >
+              Why buy direct from Bose
+            </h2>
+
+            <div class="how-to-buy__content">
+              <ul class="how-to-buy__benefits">
+                <li>Free 2-day shipping and returns</li>
+                <li>90-day risk-free trial</li>
+                <li>World class customer service</li>
+                <li>My Bose account management</li>
+              </ul>
+
+              <p class="how-to-buy__description">
+                A great product is more than what’s in the box. It’s a promise of premium performance, world-class support, and everything you expect from a trusted brand. It’s just one of many reasons why you’ll shop with confidence on Bose.com.
+              </p>
+            </div>
+          </section>
+
+          <section class="contacts" id="contacts">
+            <h2 class="
+              contacts__title
+              section-title
+              section-title--margin-bottom"
+            >
+              Contact us
+            </h2>
+
+            <div class="contacts__wrapper">
+              <form
+                class="contacts__form"
+                action="#"
+                method="post"
+                onsubmit="this.reset();
+                return false;"
+              >
+                <input
+                  class="contacts__cell"
+                  type="text"
+                  name="name"
+                  placeholder="Name"
+                  required
+                >
+
+                <input
+                  class="contacts__cell"
+                  type="email"
+                  placeholder="Email"
+                  required
+                >
+
+                <textarea
+                  class="contacts__message"
+                  name="message"
+                  placeholder="Message"
+                  required
+                >
+                 Message
+                </textarea>
+
+                <button
+                  type="submit"
+                  class="contacts__button"
+                >
+                  Send
+                </button>
+              </form>
+
+              <div class="contacts__card">
+                <label class="contacts__card-title">Phone</label>
+                <h3 class="contacts__data">+1 234 5555-55-55</h3>
+                <label class="contacts__card-title">Email</label>
+                <h3 class="contacts__data">hello@miami.com</h3>
+                <label class="contacts__card-title">Address</label>
+                <h3 class="contacts__data">
+                  400 first ave. <br>
+                  suite 700 <br>
+                  Minneapolis, MN 55401
+                </h3>
+              </div>
+            </div>
+          </section>
+        </div>
+      </div>
+    </main>
+
+    <footer class="footer">
+    </footer>
   </body>
 </html>
diff --git a/src/images/cursor/Vector.png b/src/images/cursor/Vector.png
diff --git a/src/images/header-bg-mobile.png b/src/images/header-bg-mobile.png
diff --git a/src/images/icons/Icon-close.png b/src/images/icons/Icon-close.png
diff --git a/src/images/icons/favicon.ico b/src/images/icons/favicon.ico
diff --git a/src/images/icons/icon-burguer-menu.png b/src/images/icons/icon-burguer-menu.png
diff --git a/src/images/icons/icon-phone.png b/src/images/icons/icon-phone.png
diff --git a/src/images/logo.png b/src/images/logo.png
diff --git a/src/images/products/Audio sunglasses - square.png b/src/images/products/Audio sunglasses - square.png
diff --git a/src/images/products/Audio sunglasses - wide.jpg b/src/images/products/Audio sunglasses - wide.jpg
diff --git a/src/images/products/Bose portable Smart speaker.png b/src/images/products/Bose portable Smart speaker.png
diff --git a/src/images/products/Headphones & earbuds - square.png b/src/images/products/Headphones & earbuds - square.png
diff --git a/src/images/products/Headphones & earbuds - wide.jpg b/src/images/products/Headphones & earbuds - wide.jpg
diff --git a/src/images/products/SoundLink Color Bluetooth speaker II.png b/src/images/products/SoundLink Color Bluetooth speaker II.png
diff --git a/src/images/products/SoundLink Flex Bluetooth speaker.png b/src/images/products/SoundLink Flex Bluetooth speaker.png
diff --git a/src/images/products/Speakers - square.png b/src/images/products/Speakers - square.png
diff --git a/src/images/products/Speakers - wide.png b/src/images/products/Speakers - wide.png
diff --git a/src/images/sound-waves.png b/src/images/sound-waves.png
diff --git a/src/images/woman.jpg b/src/images/woman.jpg