mate-academy · Bajkowsky · Aug 25, 2024 · Aug 25, 2024 · Aug 26, 2024 · Aug 26, 2024
diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
     "@linthtml/linthtml": "^0.9.5",
     "@mate-academy/bemlint": "latest",
     "@mate-academy/linthtml-config": "latest",
-    "@mate-academy/scripts": "^1.7.3",
+    "@mate-academy/scripts": "^1.9.4",
     "@mate-academy/stylelint-config": "latest",
     "@parcel/transformer-sass": "^2.12.0",
     "jest": "^29.7.0",

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/MyBiKE.svg b/src/images/MyBiKE.svg
diff --git a/src/images/MyBiKE2.svg b/src/images/MyBiKE2.svg
diff --git a/src/images/cross.svg b/src/images/cross.svg
diff --git a/src/images/crown.svg b/src/images/crown.svg
diff --git a/src/images/favicon.png b/src/images/favicon.png
diff --git a/src/images/iconmenu.svg b/src/images/iconmenu.svg
diff --git a/src/images/iconmenuhover.svg b/src/images/iconmenuhover.svg
diff --git a/src/images/logo.png b/src/images/logo.png
diff --git a/src/images/menu.svg b/src/images/menu.svg
diff --git a/src/images/menu_hover.svg b/src/images/menu_hover.svg
diff --git a/src/images/phone.svg b/src/images/phone.svg
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/accessories1.jpg b/src/images/photos/accessories1.jpg
diff --git a/src/images/photos/accessories2.jpg b/src/images/photos/accessories2.jpg
diff --git a/src/images/photos/accessories3.jpg b/src/images/photos/accessories3.jpg
diff --git a/src/images/photos/accessories4.jpg b/src/images/photos/accessories4.jpg
diff --git a/src/images/photos/accessories5.jpg b/src/images/photos/accessories5.jpg
diff --git a/src/images/photos/accessories6.jpg b/src/images/photos/accessories6.jpg
diff --git a/src/images/photos/bike1.jpg b/src/images/photos/bike1.jpg
diff --git a/src/images/photos/bike2.jpg b/src/images/photos/bike2.jpg
diff --git a/src/images/photos/bike3.jpg b/src/images/photos/bike3.jpg
diff --git a/src/images/photos/footer.jpg b/src/images/photos/footer.jpg
diff --git a/src/images/photos/header-background.jpg b/src/images/photos/header-background.jpg
diff --git a/src/index.html b/src/index.html
@@ -6,7 +6,10 @@
       name="viewport"
       content="width=device-width, initial-scale=1.0"
     />
-    <title>Miami</title>
+    <title>My Bike Miami</title>
+    <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:wght@300;400;500;600;700&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
     <link
       rel="stylesheet"
       href="./styles/main.scss"
@@ -17,6 +20,220 @@
     ></script>
   </head>
   <body>
-    <h1>Miami</h1>
+    <header class="header" id="home">
+      <nav class="navigation">
+
+        <div class="logo">
+          <a class="navigation__item" href="#">
+            <img class="navigation__logo"
+          src="images/MyBiKE.svg"
+          alt="logo">
+          </a>
+        </div>
+
+        <div class="items">
+          <a class="phone navigation__item" href="tel:+1 234 555-55-55">
+            <span class="phone__label">+1 234 555-55-55</span>
+            <img class="navigation__phone"
+          src="images/Icon-Phone-call.svg" alt="iconPhone">
+          </a>
+
+          <div>
+            <a class="navigation__item" href="#menu">
+              <div class="navigation__menu"></div>
+            </a>
+          </div>
+        </div>
+      </nav>
+
+      <h1 class="title__header">Take the Streets</h1>
+    </header>
+
+    <div class="menu" id="menu">
+      <nav class="navigation">
+        <div class="logo">
+          <a class="navigation__item" href="#">
+            <img class="navigation__logo" src="images/MyBiKE2.svg"
+            alt="logo">
+          </a>
+        </div>
+        <div class="items__menu">
+          <a class="navigation__item--hidden" href="#">
+            <img class="navigation__logo"
+            src="images/Icon-Phone-call.svg" alt="logo">
+          </a>
+          <a class="navigation__item" href="#home">
+            <img class="navigation__close-icon"
+          src="images/Icon-Close.svg" alt="close">
+          </a>
+        </div>
+      </nav>
+      <nav class="links menu__links">
+        <ul class="links__list">
+          <li class="links__item"><a href="#home" class="links__link">Home</a></li>
+          <li class="links__item"><a href="#about-us" class="links__link">About us</a></li>
+          <li class="links__item"><a href="#bikes" class="links__link">Compare bikes</a></li>
+          <li class="links__item"><a href="#the-details" class="links__link">Details</a></li>
+          <li class="links__item"><a href="#contact-us" class="links__link">Contacts</a></li>
+        </ul>
+      </nav>
+      <a href="tel:+12345555555">
+        <p class="menu__paragraph">+1 234 5555-55-55</p>
+      </a>
+      <p class="menu__paragraph">
+        <a href="#" class="menu__call-link">Book a test ride</a>
+      </p>
+    </div>
+
+
+    <main class="main" id="about-us">
+      <section class="about">
+        <h2 class="about__title--secondary">Move Free</h2>
+        <p class="about__title--paragraf">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>
+      </section>
+
+      <h2 class="title__title--bike" id="bikes">Compare bike</h2>
+
+      <section class="products">
+        <article class="bike">
+          <div class="bike_img">
+            <img class="bike_img" src="images/photos/bike1.jpg"
+            alt="sport-bike">
+          </div>
+          <h3 class="bike_title">Sporty 4</h3>
+          <p class="bike_paragraf-2">The iconic frame brought to a new
+            performance height as a sporty, active ride.
+          </p>
+          <h3 class="bike_title bike_title-amount">$ 2 590</h3>
+        </article>
+
+
+        <article class="bike">
+          <div class="bike_img">
+            <img class="bike_img" src="images/photos/bike2.jpg"
+            alt="sport-bike">
+          </div>
+          <h3 class="bike_title">Ride in town ST</h3>
+          <p class="bike_paragraf-2">An open frame for an upright riding position
+             as the most comfortable ride in town.
+          </p>
+          <h3 class="bike_title bike_title-amount">$ 2 590</h3>
+        </article>
+
+
+        <article class="bike">
+          <div class="bike_img">
+            <img class="bike_img" src="images/photos/bike3.jpg"
+            alt="sport-bike">
+          </div>
+          <h3 class="bike_title">Agile ride 3</h3>
+          <p class="bike_paragraf-2">The lightweight frame that has earned
+             its street tread as a sleek, agile ride.
+          </p>
+          <h3 class="bike_title bike_title-amount">$ 2 090</h3>
+        </article>
+      </section>
+
+
+      <h3 class="details_title" id="the-details">The Details</h3>
+
+      <section class="specifics">
+
+        <article class="details">
+          <div class="details_img">
+            <img class="details_picture" src="images/photos/accessories1.jpg"
+          alt="handlebar-phone">
+            <img class="details_picture" src="images/photos/accessories2.jpg"
+           alt="handlebar-brakes">
+          </div>
+          <h3 class="details_heading">Auto Unlock</h3>
+          <p class="details_paragraf">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">
+          <div class="details_img">
+            <img class="img details_picture" src="images/photos/accessories3.jpg"
+        alt="front">
+            <img class="img details_picture" src="images/photos/accessories4.jpg"
+         alt="handlebar-brakes">
+          </div>
+          <h3 class="details_heading">Range & Integrated lights</h3>
+          <p class="details_paragraf">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">
+          <div class="details_img details_img--reversed">
+            <img class="img details_picture" src="images/photos/accessories5.jpg"
+        alt="zoom-hand">
+            <img class="img details_picture" src="images/photos/accessories6.jpg"
+              alt="kickstand-zoom">
+          </div>
+          <h3 class="details_heading">Range & Integrated lights</h3>
+          <p class="details_paragraf">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="button">
+          <a href="#" class="button_item">Explore</a>
+        </div>
+      </section>
+
+      <h3 class="contact" id="contact-us">Contact us</h3>
+      <div class="contact__adress">
+
+        <section class="blank">
+          <form class="fields">
+            <div class="fields__item fields-item">
+              <label for="name" class="fields-item__label"></label>
+              <input class="fields-item__input" type="text"
+          id="name"
+          placeholder="Name" required>
+            </div>
+
+            <div class="fields__item fields-item">
+              <label for="email" class="fields-item__label"></label>
+              <input class="fields-item__input" type="email"
+              id="email"
+              placeholder="Email" required>
+            </div>
+
+            <div class="fields__item fields-item">
+              <label for="message" class="fields-item__label"></label>
+              <textarea class="fields-item__textarea" type="text"
+            id="message"
+            placeholder="Message" required></textarea>
+            </div>
+            <button class="fields-item__button">Send</button>
+          </form>
+        </section>
+
+        <section class="section">
+          <address class="addres">
+            <h4 class="address__label">Phone</h4>
+            <p class="address__content">
+              <a  class="address__content" href="tel:+12345555555">+1 234 5555-55-55</a>
+            </p>
+            <h4 class="address__label">Email</h4>
+            <p class="address__content">
+              <a  class="address__content" href="mailto:[email protected]">[email protected]</a>
+            </p>
+            <h4 class="address__label">Addres</h4>
+            <p class="address__content">
+              <a class="address__content" href="https://tiny.pl/clhgs"> first ave.<br>suite 700<br>Minneapolis, MN 55401</a>
+            </p>
+          </address>
+        </section>
+      </div>
+      <footer class="footer">
+      </footer>
+    </main>
   </body>
 </html>
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
diff --git a/src/styles/blocks/about.scss b/src/styles/blocks/about.scss
@@ -0,0 +1,48 @@
+.about {
+  margin: 0 auto;
+  max-width: 1300px;
+
+  &__title--secondary {
+    color: $color-white;
+    padding: 60px 148px 32px 20px;
+    font-size: 32px;
+    font-weight: $font-weight-medium;
+    line-height: 100%;
+    letter-spacing: -1.5px;
+  }
+
+  &__title--paragraf {
+    color: $color-white;
+    padding: 0 20px;
+    font-size: 23px;
+    font-style: normal;
+    font-weight: $font-weight-large;
+    line-height: 140%;
+  }
+}
+
+@media screen and (min-width: $screen-small-width) {
+  .about {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: auto;
+
+    &__title--secondary {
+      display: grid;
+      font-size: 48px;
+      padding: 120px 24px 144px 72px;
+    }
+
+    &__title--paragraf {
+      padding: 120px 52px 132px 24px;
+    }
+  }
+}
+
+@media  screen and (min-width: $screen-large-width) {
+  .about {
+    &__title--secondary {
+      font-size: 64px;
+    }
+  }
+}