add background color to aboutus section

mate-academy · Oct 2, 2023 · ce28d9b · ce28d9b
1 parent 8562e31
commit ce28d9b
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 3 deletions.
diff --git a/src/index.html b/src/index.html
@@ -209,7 +209,7 @@ <h2 class="section__title">
         <button class="button">View all</button>
       </section>
 
-      <section class="section" id="aboutus">
+      <section class="section section--aboutus" id="aboutus">
         <div class="section__item section__item--aboutus__picture">
           <img
           class="section__picture section__picture--ignore"
@@ -233,7 +233,7 @@ <h2 class="section__title section__title--aboutus">
         </div>
       </section>
 
-      <section class="section" id="contactus">
+      <section class="section section--contactus" id="contactus">
         <h2 class="section__title">
           Contact us
         </h2>

diff --git a/src/styles/section/item.scss b/src/styles/section/item.scss
@@ -40,11 +40,11 @@
       background-repeat: no-repeat;
       background-size: cover;
       margin-left: -120px;
-      margin-bottom: 50px;
     }
   }
 
   &--aboutus__paragraph {
+    padding: 50px 0;
     @include for-desktop() {
       justify-content: space-between;
     }

diff --git a/src/styles/section/section.scss b/src/styles/section/section.scss
@@ -14,4 +14,13 @@
   justify-content: center;
   color: $color-black;
   padding-bottom: 50px;
+
+  &--aboutus {
+    background-color: $color-aboutus-background;
+    padding-bottom: 0;
+  }
+
+  &--contactus {
+    padding-top: 50px;
+  }
 }
diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss
@@ -4,3 +4,4 @@ $color-input: #f9f9f9;
 $color-orange: #f98921;
 $color-gray: #9393a3;
 $color-darker-black: #010810;
+$color-aboutus-background: #fcfaef;