Update code

2026-09-22 20:01:23 +00:00 · 2023-07-24 09:22:51 +07:00
parent 6487515679
commit f247bc05a9
48 changed files with 589 additions and 33 deletions
@@ -0,0 +1,167 @@
+.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;
+
+    z-index: 1;
+  }
+
+  &__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;
+    padding: 10px 20px;
+
+    &:hover {
+      background-color: $secondary-color;
+    }
+  }
+}
+
+@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;
+    }
+  }
+}