mate-academy · ani-wska · Mar 3, 2026 · Mar 3, 2026 · Mar 5, 2026 · Mar 5, 2026
diff --git a/.gitignore b/.gitignore
@@ -13,3 +13,5 @@ raw_reports
 reports
 cypress/screenshots
 cypress/videos
+main.css
+main.css.map
diff --git a/index.html b/index.html
@@ -1,22 +1,172 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-  <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>
-  </head>
-  <body>
-    <h1>Miami</h1>
-  </body>
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Boost</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz@1,14..32&family=Roboto:ital,wght@1,753&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="src/styles/main.css">
+</head>
+<body>
+  <header class="header" id="header">
+    <nav class="navigation header__navigation">
+      <a href=""><img class="navigation__logo" src="src/images/Logo.svg" alt="Logo"></a>
+      <a class="phone navigation__phone" href="tel:+1 234 555-55-55"><span class="phone__label">+1 234 555-55-55</span><img src="src/images/Icon-Phone-call.svg" alt="Phone"></a>
+      <a href="#menu" class="burger navigation__icon"><span class="burger__label">Open menu</span></a>
+    </nav>
+    <h1 class="title title--decorated header__title">The world shades.<br>Your music shines.</h1>
+  </header>
+
+  <div class="menu" id="menu">
+    <nav class="navigation">
+      <img class="navigation__logo" src="src/images/Logo.svg" alt="Logo">
+      <a href="#header"><img class="navigation__icon" src="src/images/Icon-Close.svg" alt="Menu"></a>
+    </nav>
+
+    <nav class="links menu__links">
+      <ul class="links__list">
+        <li class="links__item"><a href="#header" class="links__link">Home</a></li>
+        <li class="links__item"><a href="#recommended" class="links__link">Recommended</a></li>
+        <li class="links__item"><a href="#categories" class="links__link">Categories</a></li>
+        <li class="links__item"><a href="#how-to-buy" class="links__link">How to buy</a></li>
+        <li class="links__item"><a href="#contacts" class="links__link">Contacts</a></li>
+      </ul>
+    </nav>
+
+    <p class="menu__paragraph">+1 234 5555-55-55</p>
+    <p class="menu__paragraph">
+      <a href="#" class="menu__link">call to order</a>
+    </p>
+
+  </div>
+
+  <main class="main">
+    <h2 id="recommended" class="title title--secondary">Recommended</h2>
+
+    <section class="recommended">
+      <article class="article">
+        <div class="pictures">
+          <img class="article__image" src="src/images/Image1.jpg" alt="">
+        </div>
+        <p class="article__name">Bose portable Smart speaker</p>
+        <p class="article__category">Smart home</p>
+        <p class="article__price">$ 399.00</p>
+      </article>
+
+      <article class="article">
+        <div class="pictures">
+          <img class="article__image" src="src/images/Image2.jpg" alt="">
+        </div>
+        <p class="article__name">SoundLink Flex Bluetooth speaker</p>
+        <p class="article__category">Portable bluetooth</p>
+        <p class="article__price">$ 149.00</p>
+      </article>
+
+      <article class="article">
+        <div class="pictures">
+          <img class="article__image" src="src/images/Image3.jpg" alt="Picture 1">
+        </div>
+        <p class="article__name">SoundLink Color Bluetooth speaker II</p>
+        <p class="article__category">Portable bluetooth</p>
+        <p class="article__price">$ 129.00</p>
+      </article>
+    </section>
+
+    <h2 id="categories" class="title title--third">Browse Bose<br>products by<br>category</h2>
+    <h2 id="categories" class="title title--hidden">Browse Bose<br>products by category</h2>
+
+    <section class="categories">
+      <article class="article">
+        <div class="pictures__secondary">
+          <div class="pictures__secondary pictures__secondary--big">
+            <img src="src/images/picture6.svg" class="picture__item" alt="">
+          </div>
+          <div class="pictures__secondary pictures__secondary--small">
+            <img src="src/images/picture5.svg" class="picture__item" alt="">
+          </div>
+        </div>
+
+        <p class="article__name">Headphones & earbuds</p>
+      </article>
+
+      <article class="article">
+        <div class="pictures__secondary">
+          <div class="pictures__secondary pictures__secondary--big">
+            <img src="src/images/picture4.svg" class="picture__item" alt="">
+          </div>
+          <div class="pictures__secondary pictures__secondary--small">
+            <img src="src/images/picture3.svg" class="picture__item" alt="">
+          </div>
+        </div>
+
+        <p class="article__name">Speakers</p>
+      </article>
+
+      <article class="article">
+        <div class="pictures__secondary">
+          <div class="pictures__secondary pictures__secondary--big">
+            <img src="src/images/picture2.svg" class="picture__item" alt="">
+          </div>
+          <div class="pictures__secondary pictures__secondary--small">
+            <img src="src/images/picture1.svg" class="picture__item" alt="">
+          </div>
+        </div>
+
+        <p class="article__name">Audio sunglasses</p>
+      </article>
+    </section>
+
+    <a href="#" class="button">View all</a>
+
+
+    <section class="article__buy">
+      <h2  id="how-to-buy" class="article__buy article__buy--title">Why buy direct<br>from Bose</h2>
+      <p class="article__name article__name--secondary">Free 2-day shipping and returns</p>
+      <p class="article__name article__name--secondary">90-day risk-free trial</p>
+      <p class="article__name article__name--secondary">World class customer service</p>
+      <p class="article__name article__name--secondary">My Bose account management</p>
+      <p class="article__paragraph">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>
+    </section>
+
+    <h2 id="contacts" class="title title--secondary">Contact us</h2>
+
+    <section class="contacts">
+      <form class="contacts form">
+        <div class="form__item">
+          <label class="form__label" for="name">Name</label>
+          <input id="name" class="form__input" type="text" placeholder="Name">
+        </div>
+
+        <div class="form__item">
+          <label class="form__label" for="email">Email</label>
+          <input id="email" class="form__input" type="email" placeholder="Email">
+        </div>
+
+        <div class="form__item">
+          <label class="form__label" for="message">Message</label>
+          <textarea id="message" class="form__textarea" placeholder="Message"></textarea>
+        </div>
+
+        <button class="button button--secondary" type="submit" onclick="this.classList.toggle('active')">Send</button>
+      </form>
+
+      <adress class="contacts adress form">
+        <div class="form__adress">
+          <h3 class="adress__label">Phone</h3>
+          <p class="adress__content">+1 234 5555-55-55</p>
+          <h3 class="adress__label">Email</h3>
+          <p class="adress__content">[email protected]</p>
+          <h3 class="adress__label">Address</h3>
+          <p class="adress__content">400 first ave.<br>suite 700<br>Minneapolis MN 55401</p>
+        </div>
+      </adress>
+    </section>
+
+  </main>
+
+  <footer class="footer"></footer>
+
+</body>
 </html>
diff --git a/src/images/Icon-Burger-menu-hover.svg b/src/images/Icon-Burger-menu-hover.svg
diff --git a/src/images/Icon-Burger-menu.svg b/src/images/Icon-Burger-menu.svg
diff --git a/src/images/Icon-Close.svg b/src/images/Icon-Close.svg
diff --git a/src/images/Icon-Phone-call.svg b/src/images/Icon-Phone-call.svg
diff --git a/src/images/Image1.jpg b/src/images/Image1.jpg
diff --git a/src/images/Image2.jpg b/src/images/Image2.jpg
diff --git a/src/images/Image3.jpg b/src/images/Image3.jpg
diff --git a/src/images/Logo.svg b/src/images/Logo.svg
diff --git a/src/images/Sound-waves.svg b/src/images/Sound-waves.svg
diff --git a/src/images/background-image.jpg b/src/images/background-image.jpg
diff --git a/src/images/background1020.jpg b/src/images/background1020.jpg
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/footer.jpg b/src/images/footer.jpg
diff --git a/src/images/footer1.svg b/src/images/footer1.svg
diff --git a/src/images/logo.png b/src/images/logo.png
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/picture-1.svg b/src/images/picture-1.svg
diff --git a/src/images/picture-2.svg b/src/images/picture-2.svg
diff --git a/src/images/picture-3.svg b/src/images/picture-3.svg
diff --git a/src/images/picture-4.svg b/src/images/picture-4.svg
diff --git a/src/images/picture-5.svg b/src/images/picture-5.svg
diff --git a/src/images/picture-6.svg b/src/images/picture-6.svg
diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss
diff --git a/src/styles/_main.scss b/src/styles/_main.scss
@@ -0,0 +1,15 @@
+@use './utils/reset.scss';
+@use './blocks/title.scss';
+@use './blocks/header.scss';
+@use './blocks/main.scss';
+@use './blocks/article.scss';
+@use './blocks/pictures.scss';
+@use './blocks/button.scss';
+@use './blocks/form.scss';
+@use './blocks/adress.scss';
+@use './blocks/footer.scss';
+@use './blocks/navigation.scss';
+@use './blocks/menu.scss';
+@use './blocks/links.scss';
+@use './blocks/burger.scss';
+@use './blocks/phone.scss';
diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss
diff --git a/src/styles/blocks/_adress.scss b/src/styles/blocks/_adress.scss
@@ -0,0 +1,65 @@
+@use '../utils/mixins' as *;
+
+.adress {
+  @include for-medium {
+    grid-column: 2;
+    display: block;
+  }
+
+  @include for-desktop {
+    grid-column: 7 / 12;
+  }
+  &__label {
+    font-family: Inter, sans-serif;
+    font-weight: 400;
+    font-style: Regular;
+    font-size: 14px;
+    line-height: 140%;
+    letter-spacing: 0;
+    color: #9fadc2;
+
+    &:not(:first-child) {
+      margin-top: 30px;
+    }
+  }
+
+  &__content {
+    font-family: Inter, sans-serif;
+    font-weight: 400;
+    font-style: Regular;
+    font-size: 16px;
+    line-height: 140%;
+    letter-spacing: 0;
+    padding-top: 10px;
+
+    &--phone {
+      font-family: Inter, sans-serif;
+      font-weight: 400;
+      font-style: Regular;
+      font-size: 16px;
+      line-height: 140%;
+      letter-spacing: 0;
+      padding-top: 10px;
+      color: black;
+      text-decoration: none;
+      cursor: pointer;
+    }
+
+    &--adress {
+      font-family: Inter, sans-serif;
+      font-weight: 400;
+      font-style: Regular;
+      font-size: 16px;
+      line-height: 140%;
+      letter-spacing: 0;
+      padding-top: 10px;
+      color: black;
+      text-decoration: none;
+      cursor: pointer;
+    }
+
+    &:hover {
+      color: #9fadc4;
+    }
+  }
+}