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,249 @@
       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" id="home">
+      <nav class="header__nav">
+
+        <h1 class="header__nav--logo">MyBiKE</h1>
-        <h1 class="header__nav--logo">MyBiKE</h1>
+        <h1 class="header__nav-logo">MyBiKE</h1>
-        <h1 class="header__nav--logo">MyBiKE</h1>
+        <h1 class="header__logo">MyBiKE</h1>
-        <h1 class="header__nav--logo">MyBiKE</h1>
+    <header class="header" id="home">
+      <nav class="header__nav nav">
+        <h1 class="nav__logo">MyBiKE</h1>
-        <h1 class="header__nav--logo">MyBiKE</h1>
+        <h1 class="header__nav-logo">MyBiKE</h1>
-        <h1 class="header__nav--logo">MyBiKE</h1>
+        <h1 class="header__logo">MyBiKE</h1>
-        <h1 class="header__nav--logo">MyBiKE</h1>
+    <header class="header" id="home">
+      <nav class="header__nav nav">
+        <h1 class="nav__logo">MyBiKE</h1>
+
+        <div class="header__nav--buttons">
+          <button class="header__nav--button">
+            <img class="header__nav--phone-icon" src="src/images/phone.svg"
+            alt="phone Icon"/>
+          </button>
+
+          <button class="header__nav--button">
+            <a href="#menu">
+              <img class="header__nav--menu-icon" src="src/images/menu.svg"
+            alt="menu Icon"/>
+            </a>
+          </button>
+
+        </div>
+      </nav>
+
+      <div class="header__motto">
+        <h2 class="header__motto--title">Take the Streets</h2>
+      </div>
+
+    </header>
+
+    <main class="main" id="about">
+
+      <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="h3-title">Compare bikes</h3>
+
+        <div class="compare__bikes" id="compare">
+
+          <article class="compare__bike">
+            <img class="photo" src="src/images/photos/bike1_mobile.jpg"
+            alt="Bike Sporty 4"/>
+
+            <h4 class="compare__bike--name h4-title">Sporty 4</h4>
+            <p class="description-title">The iconic frame brought to a new performance height as a sporty, active ride.</p>
+            <p class="compare__bike--price h4-title">$ 2 590</p>
+          </article>
+
+          <article class="compare__bike">
+            <img class="photo" src="src/images/photos/bike2_mobile.jpg"
+            alt="Ride in town ST"/>
+            <h4 class="compare__bike--name h4-title">Ride in town ST</h4>
+            <p class="description-title">An open frame for an upright riding position as the most comfortable ride in town.</p>
+            <p class="compare__bike--price h4-title">$ 2 590</p>
+          </article>
+
+          <article class="compare__bike">
+            <img class="photo" src="src/images/photos/bike3_mobile.jpg"
+
+            alt="Agile ride 3"/>
+            <h4 class="compare__bike--name h4-title">Agile ride 3</h4>
+            <p class="description-title">The lightweight frame that has earned its street tread as a sleek, agile ride.</p>
+            <p class="compare__bike--price h4-title">$ 2 090</p>
+          </article>
+
+        </div>
+      </section>
+
+      <section class="details" id="details">
+
+        <h3 class="details__title h3-title">The details</h3>
+
+        <article class="details__detail">
+
+          <div class="details__detail--photos">
+            <img class="details__detail--photo photo" src="src/images/photos/unlock1_mobile.jpg"
+            alt="Auto Unlock-1"/>
+            <img class="details__detail--photo photo" src="src/images/photos/unlock2_mobile.jpg"
+            alt="Auto Unlock-2"/>
+          </div>
+
+          <h4 class="details__detail--title h4-title">Auto Unlock</h4>
+
+          <p class="description-title">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--photo photo" src="src/images/photos/light1_mobile.jpg"
+            alt="lights1"/>
+            <img class="details__detail--photo photo" src="src/images/photos/light2_mobile.jpg"
+            alt="lights2"/>
+          </div>
+
+          <h4 class="details__detail--title h4-title">Range & Integrated lights</h4>
+
+          <p class="description-title">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--photo photo" src="src/images/photos/breakes1_mobile.jpg"
+            alt="breakes1"/>
+            <img class="details__detail--photo photo" src="src/images/photos/breakes2_mobile.jpg"
+            alt="breakes2"/>
+          </div>
+
+          <h4 class="details__detail--title h4-title">Hydraulic disc brakes & Lightweight</h4>
+
+          <p class="description-title">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 button" type="button">Explore</button>
+        </div>
+
+      </section>
+    </main>
+
+    <footer class="footer">
+
+      <h3 class="contact-us__title h3-title">Contact us</h3>
+      <div class="contact-us__title-container">
+
+        <section class="contact-us">
+
+          <form class="contact-us__form">
+            <input
+              class="contact-us__input"
+              type="text"
+              name="name"
+              placeholder="Name"
+              required/>
+
+            <input
+              class="contact-us__input"
+              type="email"
+              name="email"
+              placeholder="Email"
+              required/>
+
+            <textarea
+              class="contact-us__input contact-us__textarea"
+              placeholder="Message"
+              required></textarea>
+
+            <div class="container-button">
+              <button class="contact-us__button button" type="submit">
+                Send
+              </button>
+            </div>
+
+          </form>
+        </section>
+
+        <section class="contact" id="contacts">
+          <div class="contact__item">
+            <h3 class="contact__label">Phone</h3>
+
+            <p class="contact__value">
+              <a class="contact__link" href="tel:+1 234 5555-55-55">+1 234 5555-55-55</a>
+            </p>
+          </div>
+
+          <div class="contact__item">
+            <h3 class="contact__label">Email</h3>
+
+            <p class="contact__value">
+              <a class="contact__link" href="hello@miami.com">hello@miami.com</a>
+            </p>
+          </div>
+
+          <div class="contact__item">
+            <h3 class="contact__label">Address</h3>
+
+            <p class="contact__value">
+              400 first ave.<br>
+              suite 700<br>
+              Minneapolis, MN 55401
+            </p>
+          </div>
+
+        </section>
+      </div>
+      <div class="footer__background"></div>
+    </footer>
+
+    <section class="menu" id="menu">
+      <header class="menu__header">
+        <h2 class="menu__header--title">MyBiKE</h2>
+        <a class="menu__header--close-button" type="button"
+        href="#home">
+          <img class="menu__header--close-button-icon" src="src/images/Icon-Close-black.svg"
+          alt="close Icon"/>
+        </a>
+      </header>
+
+      <main class="menu__main">
+        <nav class="menu__nav">
+          <ul class="menu__nav--links">
+            <li ><a   class="menu__nav--link" href="#home">Home</a></li>
+            <li><a class="menu__nav--link" href="#about">About Us</a></li>
+            <li><a class="menu__nav--link" href="#compare">Compare Bikes</a></li>
+            <li><a class="menu__nav--link" href="#details">Details</a></li>
+            <li><a class="menu__nav--link" href="#contacts">Contacts</a></li>
+          </ul>
+        </nav>
+      </main>
+
+      <footer class="menu__footer">
+        <address class="contact">
+          <a class="menu__footer--phone-link menu-link" href="tel:+48123123123">
+            +1 234 5555-55-55
+          </a>
+        </address>
+
+        <a class="menu__footer--cta-btn menu-link" href="/book-test-ride" >
+          Book a test ride
+        </a>
+      </footer>
+    </section>
   </body>
 </html>