mate-academy · Bartolomeu-07 · Feb 14, 2026 · Feb 19, 2026 · Feb 19, 2026 · Feb 19, 2026
diff --git a/.eslintignore b/.eslintignore
@@ -1,2 +1,2 @@
+/backstop_data
 /dist
-/node_modules
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/.gitignore b/.gitignore
@@ -1,15 +1,15 @@
+# IDE
 .idea
 .vscode
-build
-dist
+
+# Node
 node_modules
-.DS_Store
 
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
+# MacOS
+.DS_Store
 
-raw_reports
-reports
-cypress/screenshots
-cypress/videos
+# Generated files
+backstop_data
+dist
+.cache
+.parcel-cache
diff --git a/README.md b/README.md
@@ -10,6 +10,6 @@ In this task, you will learn how to implement a landing page. To do that:
   - [Nothing](https://www.figma.com/file/DtkQmQ797hk0nI4KfMi2Uq/BOSE-New-Version?type=design&node-id=6802-139&t=L7eKz5YKLN0m5WxR-0)
 - watch the lesson videos and implement your page blocks similarly to the videos;
 - **DON'T** try to do it `Pixel Perfect` - implement it the most `simple` way so it looks similar;
-- when you finish the first block of your page deploy it and create a Pull Request with a [DEMO LINK](https://<your_account>.github.io/layout_miami/) 
+- when you finish the first block of your page deploy it and create a Pull Request with a [DEMO LINK](https://Bartolomeu-07.github.io/layout_miami/)
 - after each next block do the same (add, commit and push the changes, and deploy the updated demo;
 - check yourself using the [CHECKLIST](https://github.com/mate-academy/layout_miami/blob/master/checklist.md) when finished;
diff --git a/index.html b/index.html
@@ -6,17 +6,173 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0"
     />
-    <title>Miami</title>
+    <link rel="icon" type="image/svg"
+     href="src/images/logo.svg" />
+    <title>Bang & Olufses</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,700;1,14..32,700&display=swap" rel="stylesheet">
     <link
       rel="stylesheet"
-      href="src/styles/main.scss"
+      href="./styles/main.scss"
     />
-    <script
-      src="src/scripts/main.js"
-      defer
-    ></script>
   </head>
-  <body>
-    <h1>Miami</h1>
+  <body class="page">
+    <header class="header">
+      <nav class="header__nav">
+        <a href="/">
+          <img class="header__logo" src="src/images/logo.svg"
+          alt="logo" />
+        </a>
+        <div class="header__icons icons">
+          <a class="icons__item" href="tel:+12345555555">
+            <img class="icons__icon icons__icon--call" src="src/images/call_icon.svg"
+            alt="call button" />
+            <span class="icons__label">+1 234 555-55-55</span>
+          </a>
+          <a class="icons__item" href="#menu">
+            <img class="icons__icon icons__icon--burger" src="src/images/burger_icon.svg"
+            alt="menu" />
+          </a>
+        </div>
+      </nav>
+      <h1 class="title"><p>Your senses.</p><p>Set free.</p></h1>
+    </header>
+
+    <nav class="menu" id="menu">
+      <div class="menu__top">
+        <a href="/">
+          <img class="menu__logo" src="src/images/logo.svg"
+          alt="logo">
+        </a>
+        <a class="menu__close-button" href="#"><img src="src/images/close_button.svg" alt="close menu"></a>
+      </div>
+      <ul class="menu__list">
+        <li class="menu__list-item"><a href="#recommended">Recommended</a></li>
+        <li class="menu__list-item"><a href="#categories">Categories</a></li>
+        <li class="menu__list-item"><a href="#about">About us</a></li>
+        <li class="menu__list-item"><a href="#contact">Contact us</a></li>
+      </ul>
+      <div class="menu__contact">
+        <p>+1 234 555-55-55</p>
+        <p class="menu__contact--underline"><a href="#">Call to order</a></p>
+      </div>
+    </nav>
+
+    <main class="content">
+      <section class="section__recommended" id="recommended">
+        <h2 class="section__title">Recommended</h2>
+        <div class="recommended__products products">
+          <div class="products__item">
+            <img class="products__image" src="src/images/recommended/one.jpg"
+            alt="product image">
+            <p class="products__name">Beosound A5</p>
+            <p class="section__text">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="products__price">$ 1299,00</p>
+          </div>
+
+          <div class="products__item">
+            <img class="products__image" src="src/images/recommended/two.jpg"
+            alt="product image">
+            <p class="products__name">Beoplay HX</p>
+            <p class="section__text">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="products__price">$ 499,00</p>
+          </div>
+
+          <div class="products__item">
+            <img class="products__image" src="src/images/recommended/three.jpg"
+            alt="product image">
+            <p class="products__name">Beosound Theatre</p>
+            <p class="section__text">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="products__price">$ 3199,00</p>
+          </div>
+        </div>
+      </section>
+
+      <section class="section__categories" id="categories">
+        <h2 class="section__title">
+          <p>Sound. Vision.</p>
+          <p>It’s your pick.</p>
+        </h2>
+        <div class="categories">
+          <img class="categories__image" src="src/images/categories/one.jpg"
+          alt="category image">
+          <img class="categories__image" src="src/images/categories/two.jpg"
+          alt="category image">
+          <p class="categories__name">Portable speakers</p>
+          <img class="categories__image" src="src/images/categories/three.jpg"
+          alt="category image">
+          <img class="categories__image" src="src/images/categories/four.jpg"
+          alt="category image">
+          <p class="categories__name">Earphones</p>
+          <img class="categories__image" src="src/images/categories/five.jpg"
+          alt="category image">
+          <img class="categories__image" src="src/images/categories/six.jpg"
+          alt="category image">
+          <p class="categories__name">Smart Home</p>
+          <button class="button categories__button">View all</button>
+        </div>
+      </section>
+
+      <section class="section__about" id="about">
+        <img class="about__image" src="src/images/about/one.jpg"
+        alt="about">
+        <div class="about__content">
+          <h2 class="section__title">Timeless, for 50 years and counting</h2>
+          <p class="about__text section__text">
+            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>
+      </section>
+
+      <section class="section__contact" id="contact">
+        <h2 class="section__title">Contact us</h2>
+        <div class="contact">
+          <form class="form contact__item--left" action="#"
+          method="post">
+            <input class="form__item" type="text"
+            name="name" placeholder="Name"
+            required>
+
+            <input class="form__item" type="email"
+            name="email" placeholder="Email"
+            required>
+
+            <textarea class="form__item" name="message"
+            placeholder="Message" required
+            rows="4"></textarea>
+            <button class="button form__button" type="submit">Send</button>
+          </form>
+
+          <div class="info contact__item--right">
+            <div class="info__item">
+              <p class="info__label">Phone</p>
+              <p class="info__value">+1 234 555-55-55</p>
+            </div>
+            <div class="info__item">
+              <p class="info__label">Email</p>
+              <p class="info__value">hello@bang&olufsen.com</p>
+            </div>
+            <div class="info__item">
+              <p class="info__label">Address</p>
+              <p class="info__value">
+                400 first ave.<br>
+                suite 700<br>
+                Minneapolis, MN 55401
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
   </body>
 </html>