Merge pull request #17 from Nez27/feature/service-style

Implement style for service section.

practice/practice-02/src/layouts/service.pug

@@ -1,5 +1,7 @@
 - var service_img_path = "./assets/images/service/";
-- var list_service_category = [{url_icon : service_img_path + "icon-1.png", content: "Online order"}, {url_icon : service_img_path + "icon-3.png", content: "Pre-Reservation"}, {url_icon : service_img_path + "icon-3.png", content: "Super chef"}, {url_icon : service_img_path + "icon-2.png", content: "24/7 Service"}, {url_icon : service_img_path + "icon-3.png", content: "Oragonized foodhut place"}, {url_icon : service_img_path + "icon-3.png", content: "Clean Kitchen"}];
+- var list_service_category_1 = [{url_icon : service_img_path + "icon-1.png", content: "Online order"}, {url_icon : service_img_path + "icon-3.png", content: "Pre-Reservation"}, {url_icon : service_img_path + "icon-3.png", content: "Super chef"}];
+- var list_service_category_2 = [{url_icon : service_img_path + "icon-2.png", content: "24/7 Service"}, {url_icon : service_img_path + "icon-3.png", content: "Oragonized foodhut place"}, {url_icon : service_img_path + "icon-3.png", content: "Clean Kitchen"}];
+- var list_service_category = [list_service_category_1, list_service_category_2];
 
 section.service
   .service__container
@@ -41,9 +43,13 @@ section.service
         = " service"
       p.service__description This is a type of resturent which typically serves food and drink, in addition to light refreshments such as baked goods or snacks. The term comes frome the rench word meaning food
       .service__category
-        .service__category-list
+        each list in list_service_category
-          each val in list_service_category
+          .service__category-list
-            .service__category-item
+            each item in list
-              img.service__icon-category(src=val.url_icon, alt="Icon category")
+              .service__category-item
-              p.service__name-category= val.content
+                img.service__icon-category(
+                  src=item.url_icon,
+                  alt="Icon category"
+                )
+                p.service__name-category= item.content
       a.service__btn.btn(href="javascript:void(0)") About us

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

@@ -0,0 +1,228 @@
+.service {
+  max-width: 428px;
+  margin-inline: auto;
+
+  &__container {
+    @include size(auto, auto);
+
+    position: relative;
+  }
+
+  &__background-color {
+    @extend %absolute;
+    @include set-absolute-and-location($top: 200px, $left: 0);
+    @include size(100%, 50%);
+
+    background: linear-gradient(
+      180deg,
+      rgba(253, 197, 94, 0.01) 0%,
+      rgba(253, 197, 94, 0.1) 50%,
+      rgba(253, 197, 94, 0) 100%
+    );
+  }
+
+  &__img-container {
+    @include size(auto, 436.81px);
+
+    position: relative;
+    padding-top: 80px;
+  }
+
+  &__background-img {
+    @extend %absolute;
+    @include set-absolute-and-location($top: 65px, $left: 0);
+  }
+
+  &__main-img {
+    @extend %absolute;
+    @include set-absolute-and-location($top: 60px, $left: 35px);
+  }
+
+  &__vegetable-img {
+    @extend %absolute;
+    @include set-absolute-and-location($bottom: 0, $left: 50px);
+  }
+
+  &__content {
+    padding-inline: 24px;
+
+    z-index: 1;
+  }
+
+  &__heading {
+    margin-top: 30px;
+    margin-inline: auto;
+    font-size: $fs-x-lg;
+    line-height: 129.9%;
+    font-weight: 700;
+    max-width: 380px;
+  }
+
+  &__description {
+    margin-top: 29px;
+    margin-inline: auto;
+    max-width: 381px;
+    font-size: $fs-md;
+  }
+
+  &__category {
+    @extend %d-flex;
+    @include flex-layout(
+      $direction: column,
+      $justify: space-between,
+      $gap: 41px
+    );
+
+    max-width: 514px;
+    margin-top: 81px;
+    &-list {
+      @extend %d-flex;
+      @include flex-layout($direction: column, $gap: 30px, $justify: center);
+    }
+  }
+
+  &__category-item {
+    @extend %d-flex;
+    @include flex-layout($align: center, $gap: 10px);
+  }
+
+  &__name-category {
+    font-size: $fs-md;
+  }
+
+  &__btn {
+    display: block;
+    margin-top: 43px;
+    max-width: 74px;
+    text-transform: capitalize;
+    padding: 10px 20px;
+
+    &:hover {
+      background-color: $secondary-color;
+    }
+  }
+}
+
+@media screen and (min-width: 840px) {
+  %absolute_840 {
+    position: absolute;
+  }
+
+  .service {
+    max-width: $max-width;
+    margin-inline: auto;
+
+    &__container {
+      @include flex-layout($align: center);
+
+      display: flex;
+      padding-top: 200px;
+    }
+
+    &__img-container {
+      @include size($width: 100%);
+
+      max-width: 460px;
+    }
+
+    &__img-container {
+      @include size(100%, 619px);
+    }
+
+    &__background-img {
+      @include set-absolute-and-location($top: 100px, $left: 0);
+      @extend %absolute_840;
+    }
+
+    &__background-color {
+      @include set-absolute-and-location($top: 400px, $left: -100px);
+      @include size(400px, 50%);
+
+      border-radius: 50%;
+      background: radial-gradient(
+        circle,
+        rgba(253, 197, 94, 0.2),
+        rgba(253, 197, 94, 0.1),
+        rgba(253, 197, 94, 0.01),
+        rgba(253, 197, 94, 0)
+      );
+    }
+
+    &__main-img {
+      @include set-absolute-and-location($top: 95px, $left: 35px);
+      @extend %absolute_840;
+    }
+
+    &__vegetable-img {
+      @include set-absolute-and-location($bottom: 145px, $left: 50px);
+      @extend %absolute_840;
+    }
+
+    &__heading {
+      max-width: 452px;
+      margin: unset;
+    }
+
+    &__description {
+      max-width: 690px;
+    }
+
+    &__category {
+      @include flex-layout($direction: row, $gap: 10px);
+
+      margin-top: 29px;
+    }
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  %absolute_1200 {
+    position: absolute;
+  }
+
+  .service {
+    &__container {
+      @include flex-layout($align: center, $gap: 150px);
+    }
+
+    &__background-img {
+      @include set-absolute-and-location($top: 0px, $left: 0);
+      @extend %absolute_1200;
+    }
+
+    &__background-color {
+      @include set-absolute-and-location($left: -150px);
+      @include size(500px, 50%);
+
+      border-radius: 50%;
+      background: radial-gradient(
+        circle,
+        rgba(253, 197, 94, 0.6),
+        rgba(253, 197, 94, 0.4),
+        rgba(253, 197, 94, 0.2),
+        rgba(253, 197, 94, 0.06),
+        rgba(253, 197, 94, 0.01),
+        rgba(253, 197, 94, 0),
+        rgba(253, 197, 94, 0)
+      );
+    }
+
+    &__description {
+      margin-top: 21px;
+    }
+
+    &__main-img {
+      @include set-absolute-and-location($top: -17px, $left: 70px);
+      @extend %absolute_1200;
+    }
+
+    &__vegetable-img {
+      @include set-absolute-and-location($bottom: 95px, $left: 105px);
+      @extend %absolute_1200;
+    }
+
+    &__content {
+      padding-top: 50px;
+    }
+  }
+}

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

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