mate-academy · Patryk91sz · Dec 11, 2025 · Dec 11, 2025 · Dec 11, 2025 · Dec 12, 2025
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,8 @@ 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://<Patryk91sz>.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,126 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0"
     />
-    <title>Miami</title>
+    <title>My-Bike</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=Poppins:wght@400;700&display=swap" rel="stylesheet">
     <link
       rel="stylesheet"
-      href="src/styles/main.scss"
+      href="src/styles/main.css"
     />
     <script
       src="src/scripts/main.js"
       defer
     ></script>
   </head>
   <body>
-    <h1>Miami</h1>
+
+    <header class="header">
+      <nav class="header__nav">
+
+        <h1 class="header__nav-logo">MyBiKE</h1>
+
+        <div class="header__nav-buttons">
+          <button class="header__nav-button header__nav-button--phone">
+            <img class="header__nav-button--phone-icon" src="src/images/phone.svg"
+            alt="phone Icon"/>
+          </button>
+          <button class="header__nav-button header__nav-button--menu">
+            <img class="header__nav-button--menu-icon" src="src/images/menu.svg"
+            alt="menu Icon"/>
+          </button>
+        </div>
+      </nav>
+
+      <div class="header__motto">
+        <h2 class="header__motto__tittle">Take the Streets</h2>
+      </div>
+    </header>
+
+    <main class="main">
+
+      <section class="move-free">
+        <h3 class="move-free__title">Move Free</h3>
+        <p class="move-free__text">Shift your ride, not<br>
+          gears. Find the fastest way to move in the city as the bike adapts intuitively to power the speed you need.
+        </p>
+      </section>
+
+      <section class="compare">
+        <h3 class="compare__title">Compare bikes</h3>
+
+        <div class="compare__bikes">
+
+          <article class="compare__bike">
+            <img class="compare__bike-image photo" src="src/images/photos/bike1_mobile.jpg"
+            alt="Bike Sporty 4"/>
+
+            <h4 class="compare__bike-name">Sporty 4</h4>
+            <p class="compare__bike-description">The iconic frame brought to a new performance height as a sporty, active ride.</p>
+            <p class="compare__bike-price">$ 2 590</p>
+          </article>
+
+          <article class="compare__bike">
+            <img class="compare__bike-image photo" src="src/images/photos/bike2_mobile.jpg"
+            alt="Ride in town ST"/>
+            <h4 class="compare__bike-name">Ride in town ST</h4>
+            <p class="compare__bike-description">An open frame for an upright riding position as the most comfortable ride in town.</p>
+            <p class="compare__bike-price">$ 2 590</p>
+          </article>
+
+          <article class="compare__bike">
+            <img class="compare__bike-image photo" src="src/images/photos/bike3_mobile.jpg"
+
+            alt="Agile ride 3"/>
+            <h4 class="compare__bike-name">Agile ride 3</h4>
+            <p class="compare__bike-description">The lightweight frame that has earned its street tread as a sleek, agile ride.</p>
+            <p class="compare__bike-price">$ 2 090</p>
+          </article>
+
+        </div>
+      </section>
+
+      <section class="details">
+        <h3 class="details__tittle">The details</h3>
+
+        <article class="details__detail">
+          <div class="details__detail__photos">
+            <img class="details__detail__photos__photo photo" src="src/images/photos/unlock1_mobile.jpg"
+            alt="Auto Unlock-1"/>
+            <img class="details__detail__photos__photo photo" src="src/images/photos/unlock2_mobile.jpg"
+            alt="Auto Unlock-2"/>
+          </div>
+          <h4 class="details__detail__tittle">Auto Unlock</h4>
+          <p class="details__detail__text">The app senses when you're nearby to unlock automatically. GPS tracking so you know where your bike is and can track it anytime.</p>
+        </article>
+
+        <article class="details__detail">
+          <div class="details__detail__photos">
+            <img class="details__detail__photos__photo photo" src="src/images/photos/light1_mobile.jpg"
+            alt="lights1"/>
+            <img class="details__detail__photos__photo photo" src="src/images/photos/light2_mobile.jpg"
+            alt="lights2"/>
+          </div>
+          <h4 class="details__detail__tittle">Range & Integrated lights</h4>
+          <p class="details__detail__text">The removable battery has up to 70km battery autonomy and weighs only 2.4 kg. Lights integrated into the frame give you always-on visibility day and night.</p>
+        </article>
+
+        <article class="details__detail">
+          <div class="details__detail__photos">
+            <img class="details__detail__photos__photo photo" src="src/images/photos/breakes1_mobile.jpg"
+            alt="breakes1"/>
+            <img class="details__detail__photos__photo photo" src="src/images/photos/breakes2_mobile.jpg"
+            alt="breakes2"/>
+          </div>
+          <h4 class="details__detail__tittle">Hydraulic disc brakes & Lightweight</h4>
+          <p class="details__detail__text">Brakes with total stopping power the second you make contact. The removable battery has up to 70km battery autonomy and weighs only 2.4 kg. Lights integrated into the frame give you always-on visibility day and night.</p>
+        </article>
+        <div class="explore">
+          <button class="explore__button" type="button">Explore</button>
+        </div>
+      </section>
+    </main>
   </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,8 +23,9 @@
     "@linthtml/linthtml": "^0.9.6",
     "@mate-academy/bemlint": "latest",
     "@mate-academy/linthtml-config": "latest",
-    "@mate-academy/scripts": "^2.1.2",
+    "@mate-academy/scripts": "^2.1.3",
     "@mate-academy/stylelint-config": "latest",
+    "cross-env": "^10.1.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "prettier": "^3.3.2",

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/bike-mobile.jpg b/src/images/photos/bike-mobile.jpg
diff --git a/src/images/photos/bike.jpg b/src/images/photos/bike.jpg
diff --git a/src/images/photos/bike1_mobile.jpg b/src/images/photos/bike1_mobile.jpg
diff --git a/src/images/photos/bike1_tab.jpg b/src/images/photos/bike1_tab.jpg
diff --git a/src/images/photos/bike2_mobile.jpg b/src/images/photos/bike2_mobile.jpg
diff --git a/src/images/photos/bike2_tab.jpg b/src/images/photos/bike2_tab.jpg
diff --git a/src/images/photos/bike3_mobile.jpg b/src/images/photos/bike3_mobile.jpg
diff --git a/src/images/photos/bike3_tab.jpg b/src/images/photos/bike3_tab.jpg
diff --git a/src/images/photos/bike_4k.jpg b/src/images/photos/bike_4k.jpg
diff --git a/src/images/photos/bike_tab.jpg b/src/images/photos/bike_tab.jpg
diff --git a/src/images/photos/breakes1_mobile.jpg b/src/images/photos/breakes1_mobile.jpg
diff --git a/src/images/photos/breakes1_tab.jpg b/src/images/photos/breakes1_tab.jpg
diff --git a/src/images/photos/breakes2_mobile.jpg b/src/images/photos/breakes2_mobile.jpg
diff --git a/src/images/photos/breakes2_tab.jpg b/src/images/photos/breakes2_tab.jpg
diff --git a/src/images/photos/cover_1260.jpg b/src/images/photos/cover_1260.jpg
diff --git a/src/images/photos/end-photo_mobile.jpg b/src/images/photos/end-photo_mobile.jpg
diff --git a/src/images/photos/end-photo_tab.jpg b/src/images/photos/end-photo_tab.jpg
diff --git a/src/images/photos/light1_mobile.jpg b/src/images/photos/light1_mobile.jpg
diff --git a/src/images/photos/light1_tab.jpg b/src/images/photos/light1_tab.jpg
diff --git a/src/images/photos/light2_mobile.jpg b/src/images/photos/light2_mobile.jpg
diff --git a/src/images/photos/light2_tab.jpg b/src/images/photos/light2_tab.jpg
diff --git a/src/images/photos/unlock1_mobile.jpg b/src/images/photos/unlock1_mobile.jpg
diff --git a/src/images/photos/unlock1_tab.jpg b/src/images/photos/unlock1_tab.jpg
diff --git a/src/images/photos/unlock2_mobile.jpg b/src/images/photos/unlock2_mobile.jpg
diff --git a/src/images/photos/unlock2_tab.jpg b/src/images/photos/unlock2_tab.jpg
diff --git a/src/styles/.gitignore b/src/styles/.gitignore
@@ -0,0 +1,2 @@
+main.css
+main.css.map
diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss
diff --git a/src/styles/_typography.scss b/src/styles/_typography.scss
diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss
@@ -1,3 +1,2 @@
-@import 'utils/vars';
-@import 'utils/mixins';
-@import 'utils/extends';
+@use 'utils/mixins';
+@use 'utils/reset';
diff --git a/src/styles/blocks/compare-section.scss b/src/styles/blocks/compare-section.scss
@@ -0,0 +1,56 @@
+.compare {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+
+  &__title {
+    justify-content: center;
+    height: 32px;
+    padding-top: 92px;
+    font-family: Poppins, sans-serif;
+    font-weight: 500;
+    font-style: normal;
+    font-size: 32px;
+    line-height: 32px;
+    letter-spacing: -1.5px;
+    text-transform: capitalize;
+  }
+
+  &__bikes {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    padding-top: 8px;
+  }
+
+  &__bike {
+    padding-top: 40px;
+
+    &-name {
+      font-family: Poppins, sans-serif;
+      font-weight: 700;
+      font-style: normal;
+      font-size: 24px;
+      line-height: 140%;
+      padding-top: 32px;
+    }
+
+    &-description {
+      font-family: Poppins, sans-serif;
+      font-weight: 300;
+      font-style: normal;
+      font-size: 16px;
+      line-height: 140%;
+      padding-top: 8px;
+    }
+
+    &-price {
+      font-family: Poppins, sans-serif;
+      font-weight: 700;
+      font-style: normal;
+      font-size: 24px;
+      line-height: 140%;
+      padding-top: 16px;
+    }
+  }
+}