mate-academy · valerij0412 · Jan 17, 2026 · Jan 18, 2026 · Jan 19, 2026 · Jan 20, 2026
diff --git a/.github/workflows/test.yml-template b/.github/workflows/test.yml-template
@@ -0,0 +1,29 @@
+name: Test
+
+on:
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.x]
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: npm install
+    - run: npm test
+    - name: Upload HTML report(backstop data)
+      if: ${{ always() }}
+      uses: actions/upload-artifact@v2
+      with:
+        name: report
+        path: backstop_data
diff --git a/.stylelintrc.js b/.stylelintrc.js
@@ -3,5 +3,7 @@ module.exports = {
   plugins: [
     "stylelint-scss"
   ],
-  rules: {}
+  rules: {
+    "scss/at-mixin-pattern": ".*"
+  }
 };
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://valerij0412.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,249 @@
+
 <!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>
+    <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=Space+Grotesk:wght@300..700&family=Space+Mono&display=swap" rel="stylesheet">
     <link
       rel="stylesheet"
-      href="src/styles/main.scss"
+      href="/src/styles/index.scss"
     />
     <script
-      src="src/scripts/main.js"
+      type="module" src="./src/scripts/main.js"
       defer
     ></script>
   </head>
-  <body>
-    <h1>Landing Page</h1>
+
+
+  <body class="page__body">
+
+    <header class="header" id="header">
+      <div class="top-bar top-bar--header">
+        <div class="header__logo">
+          <a href="#" class="logo logo--N"></a>
+        </div>
+
+        <div class="top-bar__icons">
+          <a href="#" class="icon icon--phone-call"></a>
+          <span class="phone-number">+1 234 555-55-55</span>
+          <a href="#menu" id="burger"
+          class="icon icon--burger-menu"></a>
+
+
+        </div>
+      </div>
+      <div class="header__bottom">
+        <h1 class="header__title">Bring joy back
+          <br>
+          to the everyday
+        </h1>
+      </div>
+    </header>
+
+    <aside class="page__menu menu" id="menu">
+      <div class="top-bar top-bar--menu">
+        <div class="menu__content">
+          <div class="header__logo">
+            <a href="#" class="logo logo--N"></a>
+          </div>
+          <div class="header__icons">
+            <a href="#" class="icon icon--close"></a>
+          </div>
+        </div>
+        <nav class="nav menu__nav">
+          <ul class="nav__list">
+            <li class="nav__item">
+              <a class="nav__link" href="#recommended">Products</a>
+            </li>
+            <li class="nav__item">
+              <a class="nav__link" href="#products">Store</a>
+            </li>
+            <li class="nav__item">
+              <a class="nav__link" href="#login">Login</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-namber">
+          +1 234 5555-55-55
+        </a>
+        <a href="tel:+1 234 5555-55-55" class="menu__call-to-order">
+          CALL TO ORDER
+        </a>
+      </div>
+    </aside>
+
+    <main class="main">
+      <section class="recommended" id="recommended">
+
+        <h2 class="recommended__title">Recommended</h2>
+
+        <div class="recommended__products">
+
+          <section class="product recommended__product">
+            <img src="src/images/image-camera.webp" alt="Phone (1)"
+            class="product__image product__image--large">
+            <h3 class="product__title">Phone (1)</h3>
+
+            <p class="product__description">
+              <span class="product__intro">
+                Designed with instinct, to bring joy back to the everyday.
+              </span>
+              Through the Glyph Interface, a perfected OS and exceptional dual camera.
+              All startlingly fast.
+            </p>
+
+            <p class="product__price">$499.00
+
+            </p>
+          </section>
+
+          <section class="product recommended__product">
+            <img src="src/images/image-ear.png" alt="Ear(2)"
+            class="product__image product__image--large">
+            <h3 class="product__title">Ear(2)</h3>
+            <p class="product__description">
+              Perfecting the path from <br>
+              artist to ear.So that music <br>
+              sounds just as it was intended.
+            </p>
+            <p class="product__price">$149.00</p>
+          </section>
+
+          <section class="product recommended__product">
+            <img src="src/images/image-ear(stick).png" alt="Ear"
+            class="product__image product__image--large">
+            <h3 class="product__title">Ear(stick)</h3>
+            <p class="product__description">
+              Tech you can’t feel. Leaving just space for sound to come to life.
+              Powered by custom sound technology.
+            </p>
+            <p class="product__price">$119.00</p>
+          </section>
+        </div>
+      </section>
+
+      <section class="browse" id="products">
+        <h2 class="browse__title">Browse Nothing
+          products by
+          category
+        </h2>
+
+        <div class="browse__section">
+          <a href="#" class="browse__item browse__item--big">
+            <img src="src/images/image-parrot.webp" alt="Product 1"
+            class="browse__image">
+          </a>
+          <a href="#" class="browse__item browse__item--small">
+            <img src="src/images/image-hand-ear.webp" alt="Product 2"
+            class="browse__image">
+          </a>
+        </div>
+        <h3 class="browse__subtitle">All products</h3>
+
+        <div class="browse__section">
+          <a href="#" class="browse__item browse__item--small">
+            <img src="src/images/image-one-ear.webp" alt="Audio 1"
+            class="browse__image">
+          </a>
+          <a href="#" class="browse__item browse__item--big">
+            <img src="src/images/image-hand-ear-stick.webp" alt="Audio 2"
+            class="browse__image">
+          </a>
+        </div>
+        <h3 class="browse__subtitle">Audio</h3>
+
+        <div class="browse__section">
+          <a href="#" class="browse__item browse__item--big">
+            <img src="src/images/image-mobaile.webp" alt="Accessory 1"
+            class="browse__image">
+          </a>
+          <a href="#" class="browse__item browse__item--small">
+            <img src="src/images/image-adapter.webp" alt="Accessory 2"
+            class="browse__image">
+          </a>
+        </div>
+        <h3 class="browse__subtitle">Accessories</h3>
+
+        <div class="browse__button">
+          <button type="button" class="category__button">View all</button>
+        </div>
+      </section>
+    </main>
+
+
+
+
+    <footer class="footer" id="login">
+      <div class="footer__logo">
+        <img src="src/images/image-1.png" alt="Company logo"
+        class="footer__image">
+      </div>
+
+
+
+      <div class="footer__container">
+
+        <h2 class="footer__title">About us</h2>
+
+        <div class="footer__text-block">
+          <p class="footer__text">
+            We’re a London-based tech company on a mission to remove barriers between people and technology.
+          </p>
+          <p class="footer__text">
+            To do this, we’re crafting intuitive, flawlessly connected products that improve our lives without getting in the way.
+            No confusing tech-speak. No silly product names. Just artistry, passion and trust. And products we’re proud to share
+            with our friends and family. Simple.
+          </p>
+          <p class="footer__text">
+            Because beautiful tech shouldn’t be complicated.
+          </p>
+        </div>
+
+
+        <h2 class="footer__subtitle">Contact us</h2>
+
+        <form class="footer__form">
+
+
+          <input type="text" name="no-autocomplete-name"
+          placeholder="Name" class="footer__input"
+           autocomplete="new-name" required>
+          <input type="email" name="no-autocomplete-email"
+          placeholder="Email" class="footer__input"
+          autocomplete="new-password" required>
+          <textarea name="message"
+          placeholder="Message" class="footer__textarea"
+          required></textarea>
+          <button type="submit" class="footer__button">Send</button>
+        </form>
+
+        <div class="footer__contacts" id="contact-us">
+          <p class="footer__contact">Phone</p>
+          <a class="footer__link" href="tel:+1 234 5555-55-55">+1 234 5555-55-55</a>
+          <p class="footer__contact">Email</p>
+          <a class="footer__link" href="mailto:hello@nothing.com">hello@nothing.com</a>
+          <p class="footer__contact">Address</p>
+          <a class="footer__link"
+           href="https://www.google.com/maps/place/400+First+Ave+N,+Suite+700,+Minneapolis,+MN+55401" target="_blank"> 400 first ave. <br>
+             suite 700 <br>
+             Minneapolis, MN 55401
+          </a>
+        </div>
+      </div>
+    </footer>
   </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,7 +24,7 @@
     "@mate-academy/eslint-config": "latest",
     "@mate-academy/jest-mochawesome-reporter": "^1.0.0",
     "@mate-academy/linthtml-config": "latest",
-    "@mate-academy/scripts": "^2.1.2",
+    "@mate-academy/scripts": "^2.1.3",
     "@mate-academy/stylelint-config": "latest",
     "cypress": "^13.13.0",
     "eslint": "^8.57.0",

diff --git a/src/images/Image-adapter.webp b/src/images/Image-adapter.webp
diff --git a/src/images/Image-camera.webp b/src/images/Image-camera.webp
diff --git a/src/images/Image-faes.png b/src/images/Image-faes.png
diff --git a/src/images/Image-hand-ear-stick.webp b/src/images/Image-hand-ear-stick.webp
diff --git a/src/images/Image-hand-ear.webp b/src/images/Image-hand-ear.webp
diff --git a/src/images/Image-mobaile.webp b/src/images/Image-mobaile.webp
diff --git a/src/images/Image-one-ear.webp b/src/images/Image-one-ear.webp
diff --git a/src/images/Image-parrot.webp b/src/images/Image-parrot.webp
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/image-1.png b/src/images/image-1.png
diff --git a/src/images/image-ear(stick).png b/src/images/image-ear(stick).png
diff --git a/src/images/image-ear.png b/src/images/image-ear.png
diff --git a/src/images/logo-N.svg b/src/images/logo-N.svg