mate-academy · QmilQrek · Jan 21, 2026 · Jan 22, 2026 · Jan 22, 2026 · Jan 22, 2026
diff --git a/.gitignore b/.gitignore
@@ -1,15 +1,20 @@
+# IDE
 .idea
 .vscode
-build
-dist
+
+# Node
 node_modules
+
+# MacOS
 .DS_Store
 
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
+# Generated files
+backstop_data
+dist
+.cache
+.parcel-cache
 
-raw_reports
-reports
-cypress/screenshots
-cypress/videos
+package-lock.json
+package.json
+.github/workflows/test.yml-template
+checklist.md
diff --git a/checklist.md b/checklist.md
@@ -1,6 +1,6 @@
-1. Add a favicon
-2. Don’t forget to add a title for the whole web page (it could be the name of your landing)
-3. All Logos on the page should be links to home page
+<!-- 1. Add a favicon -->
+<!-- 2. Don’t forget to add a title for the whole web page (it could be the name of your landing) -->
+<!-- 3. All Logos on the page should be links to home page -->
 4. Change text color on hover for phone, email and address
 5. When you click on phone icon or phone number in contacts section, make sure that there is no 404 error, make it a real link to start a call on device
 6. Same when you click on logo. There shouldn't be any error.

diff --git a/index.html b/index.html
@@ -6,17 +6,254 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0"
     />
-    <title>Miami</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=Manrope:[email protected]&display=swap" rel="stylesheet">
+    <title>Bang & Olfusen</title>
+
     <link
       rel="stylesheet"
       href="src/styles/main.scss"
     />
+
     <script
       src="src/scripts/main.js"
       defer
     ></script>
+    <link rel="icon" href="src/images/fav2.png">
+
   </head>
   <body>
-    <h1>Miami</h1>
+    <header class="header" id="header">
+      <nav class="navigation header__navigation">
+        <a href="#" class="logo">
+          <img class="logo__image" src="/src/images/Logo.svg" alt="logo">
+        </a>
+        <div class="navigation__icons">
+          <a href="tel:+1 234 555-55-55" class="phone">
+            <span class="phone__label">+1 234 555-55-55</span>
+            <img class="phone__icon" src="/src/images/phone.svg" alt="phone icon">
+          </a>
+          <a href="#menu" class="burger">
+            <span class="burger__label">Open menu</span>
+          </a>
+        </div>
+      </nav>
+      <h1 class="title header__title">
+        Your senses.
+        <br>
+        Set free.</h1>
+    </header>
+
+    <div class="menu" id="menu">
+      <nav class="navigation menu__navigation">
+        <a href="#" class="logo">
+          <img class="logo__image"
+          src="/src/images/Logo.svg" alt="logo">
+        </a>
+        <div class="navigation__icons">
+          <a href="#header" class="close">
+            <img class="close__icon"
+            src="/src/images/cross.svg" alt="menu icon">
+          </a>
+        </div>
+      </nav>
+
+      <nav class="links menu__links">
+        <ul class="links__list">
+          <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="#about-us" class="links__link">About Us</a></li>
+          <li class="links__item"><a href="#contact-us" class="links__link">Contact Us</a></li>
+        </ul>
+      </nav>
+
+      <p class="menu__paragraph">+1 234 5555-55-55</p>
+      <p class="menu__paragraph">
+        <a href="" class="menu__call-link">CALL TO ORDER</a>
+      </p>
+
+
+    </div>
+
+    <main class="main">
+      <section class="section main__section" id="recommended">
+        <h2 class="title title--secondary section__title">
+          Recommended
+        </h2>
+        <div class="products">
+          <article class="recommended products__recommended">
+            <img class="recommended__photo" src="./src/images/photos/3.jpg"
+            alt="speaker photo">
+            <h3 class="title title--third">
+              BEOSOUND A5
+            </h3>
+            <p class="recommended__paragraph">
+              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="recommended__paragraph--bold">$ 1299.00</p>
+          </article>
+
+          <article class="recommended products__recommended">
+            <img class="recommended__photo" src="./src/images/photos/2.jpg"
+            alt="headphones photo">
+            <h3 class="title title--third">
+              BEOPLAY HX
+            </h3>
+            <p class="recommended__paragraph">
+              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="recommended__paragraph--bold">$ 499.00</p>
+          </article>
+
+          <article class="recommended products__recommended">
+            <img class="recommended__photo" src="./src/images/photos/1.jpg"
+            alt="soundbar photo">
+            <h3 class="title title--third">
+              BEOSOUND THEATRE
+            </h3>
+            <p class="recommended__paragraph">
+              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="recommended__paragraph--bold">$ 3199.00</p>
+          </article>
+        </div>
+      </section>
+
+      <section class="section main__section" id="categories">
+        <h2 class="title title--secondary section__title">
+          Sound. Vision.
+          <br>
+          It's your pick.
+        </h2>
+        <article class="article section__article">
+          <div class="pictures article__pictures">
+            <div class="pictures__item">
+              <img src="./src/images/photos/Image(4).jpg" class="pictures__image" alt="">
+            </div>
+            <div class="pictures__item">
+              <img src="./src/images/photos/Image(5).jpg" class="pictures__image" alt="">
+            </div>
+          </div>
+          <p class="article__paragraph">
+            <span class="article__highlight">
+              Portable speakers
+            </span>
+          </p>
+        </article>
+
+        <article class="article section__article">
+          <div class="pictures article__pictures">
+            <div class="pictures__item">
+              <img src="./src/images/photos/Image(6).jpg" class="pictures__image" alt="">
+            </div>
+            <div class="pictures__item">
+              <img src="./src/images/photos/Image(7).jpg" class="pictures__image" alt="">
+            </div>
+          </div>
+          <p class="article__paragraph">
+            <span class="article__highlight">
+              Earphones
+            </span>
+          </p>
+        </article>
+
+        <article class="article section__article">
+          <div class="pictures article__pictures">
+            <div class="pictures__item">
+              <img src="./src/images/photos/Image(8).jpg" class="pictures__image" alt="">
+            </div>
+            <div class="pictures__item">
+              <img src="./src/images/photos/Image(10).jpg" class="pictures__image" alt="">
+            </div>
+          </div>
+          <p class="article__paragraph">
+            <span class="article__highlight">
+              Smart Home
+            </span>
+          </p>
+        </article>
+      </section>
+      <a href="#" class="button main__button">View all</a>
+    </main>
+
+
+
+    <div class="about" id="about-us">
+      <div class="about__backimage"></div>
+      <div class="about__inside">
+          <h2 class="about__inside--title about__inside__title">
+            Timeless, for 50
+            years and
+            counting
+          </h2>
+
+          <p class="about__inside--description about__inside__content">
+            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>
+
+
+    <main class="main">
+      <section class="section main__section" id="contact-us">
+        <h2 class="title title--secondary section__title">Contact us</h2>
+        <div class="contact">
+          <form class="form contact__form">
+            <div class="form__item">
+              <label class="form__label" for="name" >Name</label>
+              <input id="name" class="form__input"
+              type="text" placeholder="Name" required>
+            </div>
+            <div class="form__item">
+              <label class="form__label" for="email">Email</label>
+              <input id="email" class="form__input"
+              type="email" placeholder="Email" required>
+            </div>
+            <div class="form__item">
+              <label class="form__label" for="message">Message</label>
+              <textarea id="message" class="form__textarea"
+              placeholder="Message" required></textarea>
+            </div>
+            <button type="submit" class="button button--send">Send</button>
+          </form>
+          <address class="address contact__info">
+            <h3 class="address__label">Phone</h3>
+            <p class="address__content">
+              <a class="address__link" href="tel:+123455555555">+1 234 5555-55-55</a>
+            </p>
+            <h3 class="address__label">Email</h3>
+            <p class="address__content">
+              <a class="address__link" href="mailto:hello@bang&amp;olufsen.com">hello@bang&olufsen.com</a>
+            </p>
+            <h3 class="address__label">Adress</h3>
+            <p class="address__content">
+              <a class="address__link"
+              target="_blank"
+              href="https://www.google.pl/maps/place/400+N+1st+Ave+STE+700,+Minneapolis,+MN+55401,+Stany+Zjednoczone/">
+                400 first ave.
+                <br>suite 700
+                <br>Minneapolis, MN 55401
+              </a>
+            </p>
+          </address>
+        </div>
+      </section>
+
+
+    </main>
+
   </body>
 </html>
diff --git a/src/images/Logo.svg b/src/images/Logo.svg
diff --git a/src/images/cross.svg b/src/images/cross.svg
diff --git a/src/images/fav2.png b/src/images/fav2.png
diff --git a/src/images/favicon.png b/src/images/favicon.png
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/photos/Image(10).jpg b/src/images/photos/Image(10).jpg
diff --git a/src/images/photos/Image(4).jpg b/src/images/photos/Image(4).jpg
diff --git a/src/images/photos/Image(5).jpg b/src/images/photos/Image(5).jpg
diff --git a/src/images/photos/Image(6).jpg b/src/images/photos/Image(6).jpg
diff --git a/src/images/photos/Image(7).jpg b/src/images/photos/Image(7).jpg
diff --git a/src/images/photos/Image(8).jpg b/src/images/photos/Image(8).jpg
diff --git a/src/images/photos/back2.jpg b/src/images/photos/back2.jpg
diff --git a/src/images/photos/background.jpg b/src/images/photos/background.jpg
diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss
@@ -1,3 +1,5 @@
-@import 'utils/vars';
-@import 'utils/mixins';
-@import 'utils/extends';
+@import './utils/reset';
+@import './utils/vars';
+@import './utils/mixins';
+@import './utils/extends';
+