grid for main section

mate-academy · Nov 30, 2024 · 5d322f1 · 5d322f1
1 parent 6555ede
commit 5d322f1
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 7 deletions.
diff --git a/src/index.html b/src/index.html
@@ -75,7 +75,7 @@ <h2 class="title title--secondary main__title">Move Free</h2>
         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 class="section" id="compare-bikes">
+      <section class="section main__section" id="compare-bikes">
         <h3 class="title title--section section__title">Compare bikes</h3>
         <article class="bike section__article">
           <img
@@ -117,7 +117,7 @@ <h4 class="title title--article">Agile ride 3</h4>
         </article>
       </section>
 
-      <section class="section" id="details">
+      <section class="section main__section" id="details">
         <h3 class="title title--section section__title">The details</h3>
 
         <article class="article section__article">
@@ -180,7 +180,7 @@ <h4 class="title title--article">Hydraulic disc brakes & Lightweight</h4>
         <a href="#" class="button">Explore</a>
       </section>
 
-      <section class="section section--last" id="contact">
+      <section class="section main__section section--last" id="contact">
         <h3 class="title title--section section__title">Contact us</h3>
 
         <form class="form">

diff --git a/src/styles/bloks/header.scss b/src/styles/bloks/header.scss
@@ -8,17 +8,19 @@
   min-height: 100vh;
   padding: 0 20px 88px;
   box-sizing: border-box;
-  display: grid;
-  justify-content: center;
 
-  grid-template-columns: repeat(2, 130px);
   grid-template-rows: 1fr 1fr;
+
+  grid-template-columns: repeat(2, 130px);
+  display: grid;
+  justify-content: center;
   gap: 20px;
 
   @include for-desktop {
     grid-template-columns: repeat(12, 63px);
-    grid-template-rows: 1fr 1fr;
     gap: 24px;
+    background-image: url(../images/header-background-big.jpg);
+    background-position: center;
   }
 
   &__navigation {

diff --git a/src/styles/bloks/main.scss b/src/styles/bloks/main.scss
@@ -1,3 +1,5 @@
+@use '../utils/mixins' as *;
+
 .main{
   padding: 60px 20px;
   background-color: #1D1D1D;
@@ -7,8 +9,41 @@
   font-size: 23px;
   line-height: 140%;
   color: white;
+  box-sizing: border-box;
+
+  grid-template-columns: repeat(2, 130px);
+  display: grid;
+  justify-content: center;
+  gap: 20px;
+
+  @include for-desktop {
+    grid-template-columns: repeat(12, 63px);
+    gap: 24px;
+  }
 
   &__title{
     margin-bottom: 32px;
+    grid-column: 1 / 3;
+
+    @include for-desktop {
+      grid-column: 1 / 7;
+    }
+  }
+
+  &__paragraph{
+    grid-column: 1 / 3;
+
+    @include for-desktop {
+      grid-column: 7 / 13;
+    }
+  }
+
+  &__section{
+    grid-column: 1 / 3;
+
+    @include for-desktop {
+      grid-column: 1 / 13;
+    }
+
   }
 }