mate-academy · damian-k-dev · Mar 3, 2026 · Mar 3, 2026 · Mar 3, 2026 · Mar 4, 2026
diff --git a/index.html b/index.html
@@ -6,7 +6,11 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0"
     />
-    <title>Miami</title>
+    <title>Bose | Headphones, speakers</title>
+    <link
+      rel="shortcut icon"
+      href="./src/images/favicon.ico"
+    />
     <link
       rel="stylesheet"
       href="src/styles/main.scss"
@@ -17,6 +21,372 @@
     ></script>
   </head>
   <body>
-    <h1>Miami</h1>
+    <div class="page-content">
+      <header
+        class="header"
+        id="header"
+      >
+        <a
+          href="#header"
+          class="header__logo"
+        >
+          <img
+            src="./src/images/bose-logo-icon.svg"
+            alt="bose-logo"
+          />
+        </a>
+
+        <div class="header__actions">
+          <a
+            href="tel:+1 234 5555-55-55"
+            class="header__call"
+            aria-label="Call us"
+          >
+            <span class="header__phone-number">+1 234 5555-55-55</span>
+            <img
+              class="header__call-icon"
+              src="./src/images/call-icon.svg"
+              alt=""
+            />
+          </a>
+          <a
+            href="#menu"
+            class="header__menu-toggle"
+            aria-label="Open menu"
+          ></a>
+        </div>
+      </header>
+      <nav
+        id="menu"
+        class="navigation"
+      >
+        <div class="navigation__actions-wrapper">
+          <a
+            href="#header"
+            class="navigation__logo"
+          >
+            <img
+              class="navigation__logo-img"
+              src="./src/images/bose-logo-icon.svg"
+              alt="Bose logo"
+            />
+          </a>
+          <a
+            href="#"
+            class="navigation__close-menu"
+            aria-label="Close menu"
+          >
+            <img
+              class="navigation__close-icon"
+              src="./src/images/close-menu-icon.svg"
+              alt=""
+            />
+          </a>
+        </div>
+        <ul class="navigation__list">
+          <li class="navigation__item">
+            <a
+              class="navigation__link"
+              href="#"
+            >
+              home
+            </a>
+          </li>
+          <li class="navigation__item">
+            <a
+              class="navigation__link"
+              href="#"
+            >
+              recommended
+            </a>
+          </li>
+          <li class="navigation__item">
+            <a
+              class="navigation__link"
+              href="#"
+            >
+              categories
+            </a>
+          </li>
+          <li class="navigation__item">
+            <a
+              class="navigation__link"
+              href="#"
+            >
+              how to buy
+            </a>
+          </li>
+          <li class="navigation__item">
+            <a
+              class="navigation__link"
+              href="#"
+            >
+              contacts
+            </a>
+          </li>
+        </ul>
+        <div class="navigation__order-info">
+          <a
+            class="navigation__phone"
+            href="tel:+1 234 5555-55-55"
+          >
+            +1 234 5555-55-55
+          </a>
+          <a
+            href="tel:+1 234 5555-55-55"
+            class="navigation__order-link"
+          >
+            call to order
+          </a>
+        </div>
+      </nav>
+      <main class="main">
+        <section class="hero">
+          <img
+            class="hero__sound-waves-pic"
+            src="./src/images/sound-waves.png"
+            alt=""
+          />
+          <h1 class="title">
+            <span class="title__line">The world shades.</span>
+            <span class="title__line">Your music shines.</span>
+          </h1>
+        </section>
+        <section class="section section--first recommended">
+          <h2 class="title title--secondary">Recommended</h2>
+          <div class="recommended__cards">
+            <article class="product-card">
+              <img
+                class="product-card_image"
+                src="./src/images/portable-smart-speaker.png"
+                alt="bose portable smart speaker"
+              />
+              <p class="product-card__title">Bose portable Smart speaker</p>
+              <p class="product-card__type">Smart home</p>
+              <p class="product-card__price">$ 149.00</p>
+            </article>
+            <article class="product-card">
+              <img
+                class="product-card_image"
+                src="./src/images/soundlink-flex-speaker.png"
+                alt="soundlink flex bluetooth speaker"
+              />
+              <p class="product-card__title">
+                SoundLink Flex Bluetooth speaker
+              </p>
+              <p class="product-card__type">Portable bluetooth</p>
+              <p class="product-card__price">$ 149.00</p>
+            </article>
+            <article class="product-card">
+              <img
+                class="product-card_image"
+                src="./src/images/soundlink-color-speaker.png"
+                alt="soundlink color bluetooth speaker"
+              />
+              <p class="product-card__title">
+                SoundLink Color Bluetooth speaker II
+              </p>
+              <p class="product-card__type">Portable bluetooth</p>
+              <p class="product-card__price">$ 129.00</p>
+            </article>
+          </div>
+        </section>
+        <section class="section category">
+          <h2 class="title title--secondary">
+            Browse Bose products by
+            <br />
+            category
+          </h2>
+          <div class="category__list">
+            <a
+              href="#"
+              class="category-card"
+            >
+              <div class="category-card__images">
+                <img
+                  class="category-card__image"
+                  src="./src/images/picture-1.jpg"
+                  alt=""
+                />
+                <img
+                  class="category-card__image"
+                  src="./src/images/picture-2.jpg"
+                  alt=""
+                />
+              </div>
+              <h3 class="category-card__title">Headphones & earbuds</h3>
+            </a>
+            <a
+              href="#"
+              class="category-card category-card--offset-left"
+            >
+              <div class="category-card__images">
+                <img
+                  class="category-card__image"
+                  src="./src/images/picture-3.jpg"
+                  alt=""
+                />
+                <img
+                  class="category-card__image"
+                  src="./src/images/picture-4.jpg"
+                  alt=""
+                />
+              </div>
+              <h3 class="category-card__title">Speakers</h3>
+            </a>
+            <a
+              href="#"
+              class="category-card category-card--offset-right category-card--reverse-grid"
+            >
+              <div class="category-card__images">
+                <img
+                  class="category-card__image"
+                  src="./src/images/picture-5.jpg"
+                  alt=""
+                />
+                <img
+                  class="category-card__image"
+                  src="./src/images/picture-6.jpg"
+                  alt=""
+                />
+              </div>
+              <h3 class="category-card__title">Audio sunglasses</h3>
+            </a>
+          </div>
+          <a
+            href="#"
+            class="button"
+          >
+            View all
+          </a>
+        </section>
+        <section class="benefits section">
+          <h2 class="title title--secondary">
+            Why buy direct
+            <br />
+            from Bose
+          </h2>
+          <div class="benefits__content">
+            <ul class="benefits__list">
+              <li class="benefits__item">Free 2-day shipping and returns</li>
+              <li class="benefits__item">90-day risk-free trial</li>
+              <li class="benefits__item">World class customer service</li>
+              <li class="benefits__item">My Bose account management</li>
+            </ul>
+            <p class="benefits__text">
+              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="section contact">
+          <h2 class="title title--secondary">Contact us</h2>
+          <div class="contact__content">
+            <form
+              action=""
+              class="form-contact"
+            >
+              <div class="form-contact__item">
+                <label
+                  for="name"
+                  class="form-contact__label"
+                >
+                  Name
+                </label>
+                <input
+                  type="text"
+                  name="name"
+                  class="form-contact__input"
+                  id="name"
+                  placeholder="Name"
+                  required
+                />
+              </div>
+              <div class="form-contact__item">
+                <label
+                  for="email"
+                  class="form-contact__label"
+                >
+                  Email
+                </label>
+                <input
+                  type="email"
+                  name="email"
+                  class="form-contact__input"
+                  id="email"
+                  placeholder="Email"
+                  required
+                />
+              </div>
+              <div class="form-contact__item">
+                <label
+                  for="message"
+                  class="form-contact__label"
+                >
+                  Message
+                </label>
+                <textarea
+                  name="message"
+                  class="form-contact__textarea"
+                  id="message"
+                  placeholder="Message"
+                  required
+                ></textarea>
+              </div>
+              <button
+                class="button button--secondary form-contact__button"
+                type="submit"
+              >
+                Send
+              </button>
+            </form>
+            <address class="contact__info">
+              <div class="contact__item">
+                <p class="contact__label">Phone</p>
+                <a
+                  class="contact__link"
+                  href="tel:+1 234 5555-55-55"
+                >
+                  +1 234 5555-55-55
+                </a>
+              </div>
+              <div class="contact__item">
+                <p class="contact__label">Email</p>
+                <a
+                  class="contact__link"
+                  href="mailto:[email protected]"
+                >
+                  [email protected]
+                </a>
+              </div>
+              <div class="contact__item">
+                <p class="contact__label">Address</p>
+                <a
+                  href="https://www.google.com/maps?q=400+N+1st+Ave,+Minneapolis,+MN+55401,+USA"
+                  target="_blank"
+                  rel="noopener"
+                  class="contact__address"
+                >
+                  400 first ave.
+                  <br />
+                  suite 700
+                  <br />
+                  Minneapolis, MN 55401
+                </a>
+              </div>
+            </address>
+          </div>
+        </section>
+        <footer class="section section--last footer">
+          <img
+            class="footer__image"
+            src="./src/images/woman-laying-down-and-listening.jpg"
+            alt="woman laying down and listening to music"
+          />
+        </footer>
+      </main>
+    </div>
   </body>
 </html>
diff --git a/src/blocks/_base.scss b/src/blocks/_base.scss
@@ -0,0 +1,3 @@
+html {
+  scroll-behavior: smooth;
+}