Implement style for service UI

practice/practice-02/src/styles/abstracts/_mixins.scss

@@ -15,12 +15,16 @@
 }
 
 @mixin flex-container(
+  $flex: false,
   $justify-content: null,
   $flex-direction: null,
   $align-items: null,
   $gap: null
 ) {
-  display: flex;
+  @if $flex {
+    display: flex;
+  }
+
   @if $justify-content != null {
     justify-content: $justify-content;
   }

practice/practice-02/src/styles/layouts/_header.scss

@@ -11,7 +11,7 @@
 }
 
 .header-container {
-  @include flex-container(space-between, $align-items: center);
+  @include flex-container(true, space-between, $align-items: center);
 
   position: relative;
   max-width: 428px;
@@ -21,7 +21,7 @@
 }
 
 .header-content {
-  @include flex-container(space-between);
+  @include flex-container(true, space-between);
 }
 
 @media screen and (min-width: 840px) {

practice/practice-02/src/styles/layouts/_navbar.scss

@@ -53,7 +53,7 @@
 
   .nav-list {
     @include size(auto, auto);
-    @include flex-container(space-between, column);
+    @include flex-container(true, space-between, column);
 
     position: unset;
     flex-direction: row;

practice/practice-02/src/styles/layouts/_offer.scss

@@ -4,7 +4,11 @@
   margin-inline: auto;
 
   &__container {
-    @include flex-container($justify-content: center, $flex-direction: column);
+    @include flex-container(
+      true,
+      $justify-content: center,
+      $flex-direction: column
+    );
 
     max-width: 380px;
     margin: auto;
@@ -49,7 +53,11 @@
   }
 
   &__card-item {
-    @include flex-container($align-items: center, $flex-direction: column);
+    @include flex-container(
+      true,
+      $align-items: center,
+      $flex-direction: column
+    );
     @include size(auto, 516px);
 
     position: relative;
@@ -77,11 +85,15 @@
   &__content-card {
     @include setAbsoluteAndLocation(true, $bottom: 60px);
     @include size(100%, auto);
-    @include flex-container($align-items: center, $flex-direction: column);
+    @include flex-container(
+      true,
+      $align-items: center,
+      $flex-direction: column
+    );
   }
 
   &__rate {
-    @include flex-container($align-items: center, $gap: 10px);
+    @include flex-container(true, $align-items: center, $gap: 10px);
   }
 
   &__avatar-container {
@@ -152,6 +164,7 @@
 
     &__card-list {
       @include flex-container(
+        true,
         $align-items: center,
         $gap: 18px,
         $justify-content: center

practice/practice-02/src/styles/layouts/_service.scss

@@ -0,0 +1,163 @@
+.service {
+  max-width: 428px;
+  margin-inline: auto;
+
+  &__container {
+    @include size(auto, auto);
+
+    position: relative;
+  }
+
+  &__background-color {
+    @include setAbsoluteAndLocation(true, $top: 200px, $left: 0);
+    @include size(100%, 50%);
+    background: linear-gradient(
+      180deg,
+      rgba(253, 197, 94, 0.01) 0%,
+      rgba(253, 197, 94, 0.06) 50%,
+      rgba(253, 197, 94, 0) 100%
+    );
+  }
+
+  &__img-container {
+    @include size(auto, 436.81px);
+
+    position: relative;
+    padding-top: 80px;
+  }
+
+  &__background-img {
+    @include setAbsoluteAndLocation(true, $top: 65px, $left: 0);
+  }
+
+  &__main-img {
+    @include setAbsoluteAndLocation(true, $top: 60px, $left: 35px);
+  }
+
+  &__vegetable-img {
+    @include setAbsoluteAndLocation(true, $bottom: 0, $left: 50px);
+  }
+
+  &__content {
+    padding-inline: 24px;
+  }
+
+  &__heading {
+    margin-top: 30px;
+    font-size: $fs-x-lg;
+    line-height: 129.9%;
+    font-weight: 700;
+    max-width: 380px;
+    margin-inline: auto;
+  }
+
+  &__description {
+    margin-top: 29px;
+    max-width: 381px;
+    margin-inline: auto;
+    font-size: $fs-md;
+  }
+
+  &__category {
+    @include flex-container(true, $flex-direction: column, $gap: 41px);
+
+    margin-top: 81px;
+    &-list {
+      @include flex-container(true, $flex-direction: column, $gap: 30px);
+    }
+  }
+
+  &__category-item {
+    @include flex-container(true, $align-items: center, $gap: 10px);
+  }
+
+  &__name-category {
+    font-size: $fs-md;
+  }
+
+  &__btn {
+    display: block;
+    margin-top: 43px;
+    max-width: 74px;
+    text-transform: capitalize;
+    font-size: $fs-md;
+    text-align: center;
+    padding: 10px 20px;
+  }
+}
+
+@media screen and (min-width: 840px) {
+  .service {
+    max-width: $max-width;
+    margin-inline: auto;
+
+    &__container {
+      @include flex-container(true, $align-items: center);
+
+      padding-top: 200px;
+    }
+
+    &__img-container {
+      @include size($width: 100%);
+
+      max-width: 460px;
+    }
+
+    &__background-img {
+      @include setAbsoluteAndLocation(true, $top: 35px, $left: 0);
+    }
+
+    &__main-img {
+      @include setAbsoluteAndLocation(true, $top: 30px, $left: 35px);
+    }
+
+    &__vegetable-img {
+      @include setAbsoluteAndLocation(true, $bottom: 30, $left: 50px);
+    }
+
+    &__heading {
+      max-width: 452px;
+      margin: unset;
+    }
+
+    &__description {
+      max-width: 690px;
+    }
+
+    &__category {
+      flex-direction: row;
+      margin-top: 29px;
+    }
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .service {
+    &__container {
+      @include flex-container($align-items: center, $gap: 150px);
+    }
+    &__background-color {
+      display: none;
+    }
+
+    &__img-container {
+      @include size(100%, 619px);
+    }
+
+    &__background-img {
+      @include setAbsoluteAndLocation(true, $top: -200px, $left: 0);
+    }
+
+    &__main-img {
+      @include setAbsoluteAndLocation(true, $top: 70px, $left: 70px);
+    }
+
+    &__vegetable-img {
+      @include setAbsoluteAndLocation(true, $bottom: 10, $left: 95px);
+    }
+
+    &__content {
+      padding-top: 220px;
+    }
+  }
+}

practice/practice-02/src/styles/layouts/_welcome.scss

@@ -4,7 +4,7 @@
 }
 
 .welcome {
-  @include flex-container(center, column);
+  @include flex-container(true, center, column);
   margin: auto;
   max-width: 428px;
   padding-top: 117px;
@@ -17,7 +17,7 @@
   // Start banner
   &__banner-container {
     @include size(428px, auto);
-    @include flex-container(center, column);
+    @include flex-container(true, center, column);
 
     position: relative;
   }
@@ -44,7 +44,7 @@
 
   // Start content
   &__content {
-    @include flex-container($flex-direction: column);
+    @include flex-container(true, $flex-direction: column);
     @include size(calc(428px - 48px), auto);
 
     position: relative;
@@ -61,7 +61,7 @@
   }
 
   &__text-box {
-    @include flex-container($align-items: center, $gap: 6px);
+    @include flex-container(true, $align-items: center, $gap: 6px);
     @include size(fit-content);
 
     background-color: #feeae9;
@@ -112,7 +112,7 @@
   }
 
   &__search-form {
-    @include flex-container();
+    @include flex-container(true);
 
     margin-top: 32px;
     border-radius: 100px;
@@ -154,7 +154,7 @@
   }
 
   &__action-container {
-    @include flex-container($justify-content: space-between);
+    @include flex-container(true, $justify-content: space-between);
 
     width: 100%;
     margin-top: 44px;
@@ -162,7 +162,7 @@
   }
 
   &__watch-video-link {
-    @include flex-container($align-items: center, $gap: 21px);
+    @include flex-container(true, $align-items: center, $gap: 21px);
 
     position: relative;
 

practice/practice-02/src/styles/main.scss

@@ -17,3 +17,4 @@
 @import "./layouts/header";
 @import "./layouts/welcome";
 @import "./layouts/offer";
+@import "./layouts/service";