Final page v0.1

mate-academy · Aug 13, 2024 · 0ce05d2 · 0ce05d2
1 parent ce3ae02
commit 0ce05d2
Show file tree

Hide file tree

Showing 14 changed files with 147 additions and 117 deletions.
diff --git a/src/fonts/Roboto-Regular-webfont.woff b/src/fonts/Roboto-Regular-webfont.woff
diff --git a/src/index.html b/src/index.html
@@ -38,28 +38,28 @@
       class="header"
       id="home"
     >
-      <nav class="navigation header__navigation">
+      <nav class="header__navigation navigation">
         <a
-          href="#home"
           class="navigation__item navigation__item--logo"
+          href="#home"
         >
           <img
-            class="navigation__logo-image"
+            class="navigation__image--logo"
             src="./images/logo.svg"
             alt="logo"
           />
         </a>
 
         <a
-          href="tel:+1 234 555-55-55"
           class="navigation__item phone"
+          href="tel:+1 234 555-55-55"
         >
           <span class="phone__label">+1 234 555-55-55</span>
         </a>
 
         <a
-          href="#menu"
           class="navigation__item burger"
+          href="#menu"
         >
           <span class="burger__label">Open menu</span>
         </a>
@@ -72,7 +72,7 @@ <h1 class="header__title">Take the Streets</h1>
       class="menu"
       id="menu"
     >
-      <nav class="navigation menu__navigation">
+      <nav class="menu__navigation navigation">
         <a
           href="#home"
           class="navigation__item"
@@ -86,7 +86,7 @@ <h1 class="header__title">Take the Streets</h1>
 
         <a
           href="#home"
-          class="navigation__item navigation__item--icon menu__close-icon"
+          class="navigation__item menu__close-icon"
         ></a>
       </nav>
 
@@ -100,6 +100,7 @@ <h1 class="header__title">Take the Streets</h1>
               Home
             </a>
           </li>
+
           <li>
             <a
               href="#about-us"
@@ -108,6 +109,7 @@ <h1 class="header__title">Take the Streets</h1>
               About us
             </a>
           </li>
+
           <li>
             <a
               href="#compare-bikes"
@@ -116,6 +118,7 @@ <h1 class="header__title">Take the Streets</h1>
               Compare Bikes
             </a>
           </li>
+
           <li>
             <a
               href="#details"
@@ -124,6 +127,7 @@ <h1 class="header__title">Take the Streets</h1>
               Details
             </a>
           </li>
+
           <li>
             <a
               href="#contacts"
@@ -136,6 +140,7 @@ <h1 class="header__title">Take the Streets</h1>
       </nav>
 
       <p class="menu__paragraph">+1 234 5555-55-55</p>
+
       <a
         href="#book"
         class="menu__call-link"
@@ -156,10 +161,12 @@ <h2 class="main__title">Move Free</h2>
       </p>
 
       <section
-        class="compaire-bikes section main__section"
+        class="section main__section"
         id="compare-bikes"
       >
-        <h3 class="section__title">Compare Bikes</h3>
+        <h3 class="section__title section__title--compare-bikes">
+          Compare Bikes
+        </h3>
 
         <div class="bikes">
           <article class="article bikes__article">
@@ -171,7 +178,7 @@ <h3 class="section__title">Compare Bikes</h3>
 
             <h4 class="article__title">Sporty 4</h4>
 
-            <p class="compaire-bikes__paragraph">
+            <p class="section__paragraph">
               The iconic frame brought to a new performance height as a sporty,
               active ride.
             </p>
@@ -188,7 +195,7 @@ <h4 class="article__title">Sporty 4</h4>
 
             <h4 class="article__title">Ride in town ST</h4>
 
-            <p class="compaire-bikes__paragraph">
+            <p class="section__paragraph">
               An open frame for an upright riding position as the most
               comfortable ride in town.
             </p>
@@ -205,7 +212,7 @@ <h4 class="article__title">Ride in town ST</h4>
 
             <h4 class="article__title">Agile ride 3</h4>
 
-            <p class="compaire-bikes__paragraph">
+            <p class="section__paragraph">
               The lightweight frame that has earned its street tread as a sleek,
               agile ride.
             </p>
@@ -219,7 +226,9 @@ <h4 class="article__title">Agile ride 3</h4>
         class="section main__section section--details"
         id="details"
       >
-        <h3 class="title section__title section__title--details">The Details</h3>
+        <h3 class="title section__title section__title--details">
+          The Details
+        </h3>
 
         <article class="article section__article">
           <div class="pictures article__pictures">
@@ -230,6 +239,7 @@ <h3 class="title section__title section__title--details">The Details</h3>
                 alt="Details-1"
               />
             </div>
+
             <div class="pictures__item pictures__item--small">
               <img
                 class="pictures__image"
@@ -240,10 +250,13 @@ <h3 class="title section__title section__title--details">The Details</h3>
           </div>
 
           <p class="article__title">Auto Unlock</p>
-          <p class="article__paragraph">
-            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 class="article__paragraph article__paragraph--details">
+            <p>
+              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>
         </article>
 
         <article class="article section__article">
@@ -255,6 +268,7 @@ <h3 class="title section__title section__title--details">The Details</h3>
                 alt="Details-3"
               />
             </div>
+
             <div class="pictures__item pictures__item--small">
               <img
                 class="pictures__image"
@@ -265,11 +279,14 @@ <h3 class="title section__title section__title--details">The Details</h3>
           </div>
 
           <p class="title article__title">Range & Integrated lights</p>
-          <p class="article__paragraph">
-            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 class="article__paragraph article__paragraph--details">
+            <p>
+              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>
         </article>
 
         <article class="article section__article">
@@ -281,6 +298,7 @@ <h3 class="title section__title section__title--details">The Details</h3>
                 alt="Details-5"
               />
             </div>
+
             <div class="pictures__item pictures__item--big">
               <img
                 class="pictures__image"
@@ -293,12 +311,16 @@ <h3 class="title section__title section__title--details">The Details</h3>
           <p class="title article__title">
             Hydraulic disc brakes & Lightweight
           </p>
-          <p class="article__paragraph">
-            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 class="article__paragraph article__paragraph--details">
+            <p>
+              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>
+
           <div class="article__item">
             <a
               href="#Explore"
@@ -314,7 +336,7 @@ <h3 class="title section__title section__title--details">The Details</h3>
         class="section section--contact-us main__section"
         id="contacts"
       >
-        <h3 class="section__title">Contact us</h3>
+        <h3 class="section__title section__title--contact-us">Contact us</h3>
 
         <div class="contact">
           <form class="form contact__form contact__item">

diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss
diff --git a/src/styles/_utils.scss b/src/styles/_utils.scss
diff --git a/src/styles/blocks/article.scss b/src/styles/blocks/article.scss
@@ -8,16 +8,30 @@
     font-size: 16px;
     font-weight: 400;
     line-height: 22px;
+
+    &--details {
+      @include page-grid;
+
+      p {
+        grid-column: span 2;
+
+        @include for-tablet {
+          grid-column: span 6;
+        }
+
+        @include for-desktop {
+          grid-column: 1 / 9;
+        }
+      }
+    }
   }
 
   &__title {
     margin-bottom: 8px;
-    font-size: 24px;
-    font-weight: 700;
-    line-height: 34px;
   }
 
-  &__price {
+  &__price,
+  &__title {
     font-size: 24px;
     font-weight: 700;
     line-height: 34px;
@@ -32,7 +46,6 @@
   }
 
   &__button {
-
     margin-top: 40px;
 
     @include for-tablet {

diff --git a/src/styles/blocks/compaire-bikes.scss b/src/styles/blocks/compaire-bikes.scss
diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss
@@ -1,12 +1,19 @@
 @use '../utils/mixins' as *;
 
 .header {
+  box-sizing: border-box;
+  padding: 24px 20px 88px;
+  min-height: 100dvh;
   background-color: #484848;
   background-image: url(../images/photos/header-background.jpg);
   background-position: 86%;
   background-repeat: no-repeat;
   background-size: cover;
 
+  @media (max-height: 480px) {
+    height: 480px;
+  }
+
   @include for-tablet {
     background-position: center;
   }
@@ -15,6 +22,16 @@
     background-position: center;
   }
 
+  @include for-tablet {
+    padding: 36px 20px 130px;
+  }
+
+  @include for-desktop {
+    padding: 36px 20px 203px;
+  }
+
+  @include page-grid;
+
   &__title {
     font-family: Poppins, Helvetica, sans-serif;
     font-size: 36px;
@@ -41,20 +58,6 @@
     }
   }
 
-  box-sizing: border-box;
-  padding: 24px 20px 88px;
-  min-height: 100vh;
-
-  @include for-tablet {
-    padding: 36px 20px 130px;
-  }
-
-  @include for-desktop {
-    padding: 36px 20px 203px;
-  }
-
-  @include page-grid;
-
   &__navigation {
     align-self: start;
     grid-column: 1 / 3;