mate-academy · dziadulec · Jan 28, 2026 · Jan 29, 2026 · Jan 29, 2026 · Jan 29, 2026
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://dziadulec.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,223 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0"
     />
-    <title>Miami</title>
+    <title>MYBIKE</title>
+    <link
+      rel="icon"
+      type="image/svg+xml"
+      href="./src/images/photos/favicon.svg"
+    />
     <link
       rel="stylesheet"
       href="src/styles/main.scss"
     />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Flex:opsz,wght,XOPQ,XTRA,YOPQ,YTDE,YTFI,YTLC,YTUC@8..144,100..1000,96,468,79,-203,738,514,712&family=Roboto:wght@500&display=swap" rel="stylesheet">
     <script
       src="src/scripts/main.js"
       defer
     ></script>
   </head>
   <body>
-    <h1>Miami</h1>
+    <menu class="menu" id="menu">
+      <div class="menu__header">
+        <a href="#home">
+          <img
+            class="menu__logo"
+            src="./src/images/photos/MyBiKE_logo_Black.svg"
+            alt="MyBike logo"
+        >
+        </a>
+        <a href="#home" class="menu__close"></a>
+
+      </div>
+      <ul class="menu__links">
+        <li class="menu__item"><a href="#home" class="menu__link">HOME</a></li>
+        <li class="menu__item"><a href="#about" class="menu__link">ABOUT US</a></li>
+        <li class="menu__item"><a href="#bikes" class="menu__link">COMPARE BIKES</a></li>
+        <li class="menu__item"><a href="#details" class="menu__link">DETAILS</a></li>
+        <li class="menu__item"><a href="#contacts" class="menu__link">CONTACTS</a></li>
+      </ul>
+      <div class="menu__footer">
+        <a href="tel:+48123456789" class="menu__phone">+1 234 5555-55-55</a>
+        <p class="menu__info">Book a test ride</p>
+      </div>
+
+    </menu>
+    <header class="header" id="home">
+      <nav class="navigation">
+        <img
+          class="navigation__logo"
+          src="./src/images/photos/MyBiKE_logo.svg"
+          alt="MyBike logo"
+        >
+        <div class="navigation__buttons">
+          <a href="tel:+48123456789" class="navigation__icon navigation__icon--phone"></a>
+          <a href="#menu" class="navigation__icon navigation__icon--burger"></a>
+        </div>
+      </nav>
+      <h1 class="title title__main">Take the Streets</h1>
+    </header>
+    <main class="content" id="about">
+      <div class="lead">
+        <h2 class="lead__title">Move Free</h2>
+        <p class="lead__text">Shift your ride, not gears. Find the fastest way to move in the city as the bike adapts intuitively to power the speed you need.</p>
+      </div>
+      <h3 class="title title__section" id="bikes">Compare bikes</h3>
+      <article class="bikes" >
+
+        <div class="bike" >
+          <img
+          class="bike__image"
+          src="./src/images/photos/ffa793c437ea939517652cd41ee797dd863a0409.png"
+          alt="Sporty 4"
+        >
+          <h4 class="bike__name">Sporty 4</h4>
+          <p class="bike__text">The iconic frame brought to a new performance height as a sporty, active ride.</p>
+          <p class="bike__price">$ 2 590</p>
+        </div>
+        <div class="bike">
+          <img
+            class="bike__image"
+            src="./src/images/photos/Ride in town ST_392.jpg"
+            alt="Ride in town ST"
+          >
+          <h4 class="bike__name">Ride in town ST</h4>
+          <p class="bike__text">An open frame for an upright riding position as the most comfortable ride in town.</p>
+          <p class="bike__price">$ 2 590</p>
+        </div>
+        <div class="bike">
+          <img
+            class="bike__image"
+            src="./src/images/photos/Agile_ride_3_392.jpg"
+            alt="Agile ride 3"
+          >
+          <h4 class="bike__name">Agile ride 3</h4>
+          <p class="bike__text">The lightweight frame that has earned its street tread as a sleek, agile ride.</p>
+          <p class="bike__price">$ 2 090</p>
+        </div>
+      </article>
+      <article>
+        <h3 class="title title__section" id="details">The details</h3>
+        <div class="detail">
+          <img
+            class="detail__image detail__image--wide"
+            src="./src/images/photos/auto_unlock_672.jpg"
+            alt="Agile ride 3"
+          >
+          <img
+            class="detail__image"
+            src="./src/images/photos/Auto Unlock_2_small.jpg"
+            alt="Agile ride 3"
+          >
+          <h4 class="detail__title">Auto Unlock</h4>
+          <p class="detail__description">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>
+        </div>
+        <div class="detail">
+          <img
+            class="detail__image detail__image--wide"
+            src="./src/images/photos/My_bikes_light_back_mobile.jpg"
+            alt="Agile ride 3"
+          >
+          <img
+            class="detail__image"
+            src="./src/images/photos/My_bikes_light_front_mobile.jpg"
+            alt="Agile ride 3"
+          >
+          <h4 class="detail__title">Range & Integrated lights</h4>
+          <p class="detail__description">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>
+        </div>
+        <div class="detail">
+          <img
+            class="detail__image"
+            src="./src/images/photos/My_bikes_brakes_mobile.jpg"
+            alt="Agile ride 3"
+          >
+          <img
+            class="detail__image detail__image--wide"
+            src="./src/images/photos/My_bikes_lightweight_mobile.jpg"
+            alt="Agile ride 3"
+          >
+          <h4 class="detail__title">Hydraulic disc brakes & Lightweight</h4>
+          <p class="detail__description">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>
+        </div>
+        <button class="button">Explore</button>
+      </article>
+      <footer class="footer" id="footer">
+        <h3 class="title title__section">Contact us</h3>
+        <div class="contact">
+          <form class="form" id ="contact-form">
+            <label class="form__label" for="name">Name</label>
+            <input
+              class="form__input"
+              type="text"
+              id="name"
+              name="name"
+              required placeholder="Name"
+            >
+            <label class="form__label" for="email">Email</label>
+            <input
+              class="form__input"
+              type="email"
+              id="email"
+              name="email"
+              required placeholder="Email"
+              >
+            <label class="form__label" for="message">Message</label>
+            <textarea
+              class="form__textarea"
+              id="message" name="message"
+              rows="4" required
+              placeholder="Message"
+              ></textarea>
+            <button class="button button--form" type="submit">Send</button>
+          </form>
+          <script>
+            const form = document.getElementById('contact-form');
+
+            form.addEventListener('submit', function(event) {
+              event.preventDefault();
+              console.log("The form was sent!");
+
+              form.reset();
+            });
+
+            window.addEventListener('hashchange',() => {
+              if (window.location.hash === '#menu') {
+                document.body.classList.add('page__body--with-menu');
+              } else {
+                document.body.classList.remove('page__body--with-menu');
+              }
+            });
+          </script>
+          <address class="address">
+            <p class="address__text">
+              Phone:
+              <a class="address__link" href="tel:+48123456789">
+                +1 234 5555-55-55
+              </a>
+            </p>
+            <p class="address__text">
+              Email:
+              <a class="address__link" href="mailto:hello@miami.com">
+                hello@miami.com
+              </a>
+            </p>
+            <p class="address__text">
+              Address:
+              <a class="address__link" href="https://www.google.com/maps?q=400+First+Ave+Suite+700+Minneapolis+MN+55401">
+                400 first ave,<br> suite 700, Minneapolis, MN 55401
+              </a>
+            </p>
+          </address>
+        </div>
+      </footer>
+    </main>
+    <img
+          class="image"
+          src="./src/images/photos/footer_image.jpg"
+          alt="footer image"
+        >
   </body>
 </html>