mate-academy · daria1503t · Feb 25, 2026 · Feb 25, 2026 · Feb 25, 2026 · Feb 27, 2026
diff --git a/README.md b/README.md
@@ -17,7 +17,7 @@ Follow the instructions in this and next lessons to implement the page block by
 - Start writing styles in the `main.scss` file. It is be explained in the `Sass` lesson.
 - **DON'T** try to do it `Pixel Perfect` - implement it the most `simple` way so it looks similar.
 - When done check yourself using the [CHECKLIST](./checklist.md) when finished.
-- Deploy and create a Pull Request with a [DEMO LINK](https://<your_account>.github.io/layout_landing-page/).
+- Deploy and create a Pull Request with a [DEMO LINK](https://daria1503t.github.io/layout_landing-page/).
 
 # Tips & Hints
 - Check `background-image: url()` to be relative to the `main.scss`. So should start with `../images`.

diff --git a/index.html b/index.html
@@ -1,22 +1,268 @@
+<!-- #region page -->
 <!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=Manrope:wght@200..800&display=swap" rel="stylesheet">
     <link
       rel="stylesheet"
-      href="src/styles/main.scss"
+      href="src/styles/style.scss"
     />
     <script
       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-link">
+              <img src="src/images/logo-2x.png"
+              alt="Bose Logo"
+              class="top-bar__logo">
+            </a>
+            <div class="top-bar__icons">
+              <a href="tel:+1 234 5555-55-55" class="icon icon--phone"></a>
+              <a href="#menu" class="icon icon--menu"></a>
+            </div>
+          </div>
+          <div class="header__bottom">
+            <h1 class="header__title">
+              Your senses.
+              <br>
+              Set free.
+            </h1>
+          </div>
+        </div>
+      </div>
+    </header>
+
+    <aside class="menu page__menu" id="menu">
+      <div class="container">
+        <div class="top-bar menu__top">
+          <a href="#" class="top-bar__logo-link">
+            <img src="src/images/logo-2x.png"
+            alt="Bose Logo"
+            class="top-bar__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="#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="#about-us">About Us</a>
+              </li>
+              <li class="nav__item">
+                <a class="nav__link" href="#contact-us">Contact Us</a>
+              </li>
+            </ul>
+          </nav>
+          <a href="tel:+1 234 5555-55-55" class="menu__phone-number">+1 234 5555-55-55</a>
+          <a href="tel:+1 234 5555-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">
+                <a href="#" class="product__link">
+                  <img src="src/images/products/a5.png"
+                  alt="BEOSOUND A5"
+                  class="product__photo">
+                </a>
+                <h3 class="product__name">BEOSOUND A5</h3>
+                <p class="product__description">Huge sound anywhere – in the home or outdoors. Beosound A5 is a Wi-Fi and Bluetooth speaker with long-lasting battery and wireless charging built in.</p>
+                <p class="product__price">$ 1299.00</p>
+              </article>
+              <article class="product recommended__product">
+                <a href="#" class="product__link">
+                  <img src="src/images/products/hx.png"
+                  alt="BEOPLAY HX"
+                  class="product__photo">
+                </a>
+                <h3 class="product__name">BEOPLAY HX</h3>
+                <p class="product__description">Wireless noise-cancelling headphones. Listen in comfort whether you're on a call, working from home or taking a moment for yourself.</p>
+                <p class="product__price">$ 499.00</p>
+              </article>
+              <article class="product recommended__product">
+                <a href="#" class="product__link">
+                  <img src="src/images/products/theatre.png"
+                  alt="BEOSOUND THEATRE"
+                  class="product__photo">
+                </a>
+                <h3 class="product__name">BEOSOUND THEATRE</h3>
+                <p class="product__description">Four patent-pending acoustic innovations in one sleek soundbar envelop you in sound from every angle. Made to fit any TV, and last for generations.</p>
+                <p class="product__price">$ 3199.00</p>
+              </article>
+            </div>
+          </section>
+
+          <section class="categories" id="categories">
+            <h2 class="section-title">
+              Sound. Vision.
+              <br>
+              It’s your pick.
+            </h2>
+
+            <div class="categories__wrapper">
+              <article class="category">
+                <div class="category__photos">
+                  <a href="#" class="category__link">
+                    <img src="src/images/categories/portable-speakers-1.png"
+                    alt="Portable speakers"
+                    class="category__photo">
+                  </a>
+                  <a href="#" class="category__link">
+                    <img src="src/images/categories/portable-speakers-2.png"
+                    alt="Portable speakers"
+                    class="category__photo">
+                  </a>
+                </div>
+
+                <h3 class="category__title">Portable speakers</h3>
+              </article>
+
+              <article class="category">
+                <div class="category__photos">
+                  <a href="#" class="category__link">
+                    <img src="src/images/categories/earphones-1.png"
+                    alt="Earphones"
+                    class="category__photo">
+                  </a>
+                  <a href="#" class="category__link">
+                    <img src="src/images/categories/earphones-2.png"
+                    alt="Earphones"
+                    class="category__photo">
+                  </a>
+                </div>
+
+                <h3 class="category__title">Earphones</h3>
+              </article>
+
+              <article class="category">
+                <div class="category__photos">
+                  <a href="#" class="category__link">
+                    <img src="src/images/categories/smart-home-1.png"
+                    alt="Smart Home"
+                    class="category__photo">
+                  </a>
+                  <a href="#" class="category__link">
+                    <img src="src/images/categories/smart-home-2.png"
+                    alt="Smart Home"
+                    class="category__photo">
+                  </a>
+                </div>
+
+                <h3 class="category__title">Smart Home</h3>
+              </article>
+
+              <div class="categories__button-wrapper">
+                <button type="button" class="categories__button">View all</button>
+              </div>
+            </div>
+          </section>
+        </div>
+      </div>
+
+      <div class="main__content main__content--section-three">
+        <section class="about-us" id="about-us">
+          <div class="about-us__player"></div>
+          <div class="container">
+            <div class="about-us__timeless">
+              <h2 class="about-us__title section-title section-title--section-three">Timeless, for 50 years and counting</h2>
+
+              <div class="about-us__content">
+                <p class="about-us__description">Bang & Olufsen is expanding its Recreated Classics Program with the launch of Beosystems – a limited edition music system that transcends time by bridging the gap between one of our iconic designs from 1972 and today’s cutting-edge digital technology.</p>
+              </div>
+            </div>
+          </div>
+        </section>
+      </div>
+
+      <div class="container">
+        <div class="main__content main__content--section-four">
+          <section class="contacts" id="contact-us">
+            <h2 class="section-title">Contact us</h2>
+            <div class="contacts__wrapper">
+              <form class="contacts__form"
+              action="#"
+              method="post"
+              onsubmit="this.reset();
+              return false;">
+                <div class="contacts__form-inputs">
+                  <input
+                  type="text"
+                  class="contacts__item"
+                  name="name"
+                  placeholder="Name"
+                  required>
+                  <input
+                  type="text"
+                  class="contacts__item"
+                  name="email"
+                  placeholder="Email"
+                  required>
+                  <textarea
+                  type="textarea"
+                  class="contacts__item contacts__item--message"
+                  name="message"
+                  placeholder="Message"
+                  required></textarea>
+                </div>
+                <button type="submit" class="contacts__button">Send</button>
+              </form>
+              <footer class="footer">
+                <div class="footer__wrapper">
+                  Phone
+                  <a href="tel:+1 234 5555-55-55" class="footer__link">+1 234 5555-55-55</a>
+                </div>
+                <div class="footer__wrapper">
+                  Email
+                  <a href="mailto:hello@bang&olufsen.com" class="footer__link">hello@bang&olufsen.com</a>
+                </div>
+                <div class="footer__wrapper">
+                  Address
+                  <a href="https://www.google.com/maps?q=400+first+ave.+suite+700+Minneapolis,+MN+55401"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    class="footer__link">
+                    400 first ave.
+                    <br>
+                    suite 700
+                    <br>
+                    Minneapolis, MN 55401
+                  </a>
+                </div>
+              </footer>
+            </div>
+          </section>
+        </div>
+      </div>
+    </main>
   </body>
 </html>
diff --git a/src/images/background.png b/src/images/background.png
diff --git a/src/images/categories/earphones-1.png b/src/images/categories/earphones-1.png
diff --git a/src/images/categories/earphones-2.png b/src/images/categories/earphones-2.png
diff --git a/src/images/categories/portable-speakers-1.png b/src/images/categories/portable-speakers-1.png
diff --git a/src/images/categories/portable-speakers-2.png b/src/images/categories/portable-speakers-2.png
diff --git a/src/images/categories/smart-home-1.png b/src/images/categories/smart-home-1.png
diff --git a/src/images/categories/smart-home-2.png b/src/images/categories/smart-home-2.png
diff --git a/src/images/icons/icon-burger-menu-2x.png b/src/images/icons/icon-burger-menu-2x.png
diff --git a/src/images/icons/icon-burger-menu-hover.png b/src/images/icons/icon-burger-menu-hover.png
diff --git a/src/images/icons/icon-burger-menu.png b/src/images/icons/icon-burger-menu.png
diff --git a/src/images/icons/icon-close-2x.png b/src/images/icons/icon-close-2x.png
diff --git a/src/images/icons/icon-close.png b/src/images/icons/icon-close.png
diff --git a/src/images/icons/icon-phone-2x.png b/src/images/icons/icon-phone-2x.png
diff --git a/src/images/icons/icon-phone.png b/src/images/icons/icon-phone.png
diff --git a/src/images/logo-2x.png b/src/images/logo-2x.png
diff --git a/src/images/logo.png b/src/images/logo.png
diff --git a/src/images/player.png b/src/images/player.png
diff --git a/src/images/products/a5.png b/src/images/products/a5.png
diff --git a/src/images/products/hx.png b/src/images/products/hx.png
diff --git a/src/images/products/theatre.png b/src/images/products/theatre.png
diff --git a/src/styles/blocks/about-us.scss b/src/styles/blocks/about-us.scss
@@ -0,0 +1,63 @@
+.about-us{
+  background-color: #FCFAEF;
+
+  &__player{
+    background-image: url('../images/player.png');
+    width: 100%;
+    height: 200px;
+    background-size: cover;
+    background-position: center;
+
+    @include onTablet {
+      height: 400px;
+    }
+
+    @include onDesktop {
+      height: 460px;
+    }
+  }
+
+  &__timeless{
+    @include pageGrid;
+    padding-block: 48px;
+
+
+    @include onTablet {
+      padding-block: 120px;
+    }
+  }
+
+  &__title{
+    grid-column: 1 / -1;
+
+    @include onTablet {
+      grid-column: span 3;
+    }
+
+    @include onDesktop {
+      grid-column: span 6;
+    }
+  }
+
+  &__content{
+    grid-column: 1 / -1;
+
+    @include onTablet {
+      grid-column: span 3;
+    }
+
+    @include onDesktop {
+      grid-column: 8 / -1;
+    }
+  }
+
+  &__description{
+    padding: 0;
+    margin: 0;
+    font-weight: $section-text-font-weight;
+    font-size: $section-text-font-size;
+    letter-spacing: $section-text-letter-spacing;
+  }
+}
+
+
diff --git a/src/styles/blocks/categories.scss b/src/styles/blocks/categories.scss
@@ -0,0 +1,23 @@
+.categories{
+  &__wrapper{
+    display: grid;
+    row-gap: 40px;
+
+    @include onTablet {
+      row-gap: 56px;
+    }
+  }
+
+  &__button-wrapper{
+    @include pageGrid;
+  }
+
+  &__button{
+    @include buttonStyle;
+
+    grid-column: 1 / -1;
+    @include onDesktop {
+      grid-column: span 4;
+    }
+  }
+}