Add menu section

src/includes/mixins.pug

@@ -1,30 +1,19 @@
-- var values = [1, 2, 3];
+- var avatar_img_path = "./assets/images/avatar/";
 
-mixin cardFoodItem(itemFood, price, ratePoint, foodName, foodDescription)
+mixin foodItemCard(food)
-  .offer__card-item
+  .card-item
-    img.offer__card-img(
+    img.card-img(src=offer_img_path + "item-card.png", alt="Item card image")
-      src=offer_img_path + "item-card.png",
+    img.food-image(src=food.imageUrl, alt=food.name + " image")
-      alt="Item card image"
+    span.price= food.price + "$"
-    )
+    .content-card
-    img.offer__food-image(
+      .rate
-      src=offer_img_path + "food-" + itemFood + ".png",
+        .avatar-container
-      alt="Food " + itemFood + " image"
+          if food.avatarImageList && food.avatarImageList.length > 0
-    )
+            each avatar, index in food.avatarImageList 
-    span.offer__price= price + "$"
+              img.avatar(src=avatar.avatarUrl, alt="Avatar user rate")
-    .offer__content-card
+        .star-container
-      .offer__rate
-        .offer__avatar-container
-          each val in values 
-            img(
-              src=offer_img_path + "avatar-" + val + "-item-" + itemFood + ".png",
-              alt="Avatar user rate",
-              class="offer__avatar-" + val
-            )
-        .offer__star-container
           img(src=offer_img_path + "star.png", alt="Star image")
-        span.offer__rate-point= "(" + ratePoint + ")"
+        span.rate-point= "(" + food.ratePoint + ")"
-      span.offer__food-name= foodName
+      p.food-name= food.foodName
-      p.offer__food-description= foodDescription
+      p.food-description= food.foodDescription
-    a.offer__order-btn Order now
+    a.order-btn.btn(href="javascript:void(0)") Order now
-
-//- mixin listCategory(iconUrl, content)

src/index.pug

@@ -23,3 +23,4 @@ html(lang="en")
     include layouts/welcome
     include layouts/offer
     include layouts/service
+    include layouts/menu

src/layouts/menu.pug

@@ -0,0 +1,21 @@
+- var image_menu_path = "./assets/images/menu/";
+- var list_category = ["Ramen", "Breakfast", "Lunch", "Dinner", "Maxican", "Italian", "Desserts", "Drinks"];
+- var description_text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry";
+- var image_food = ["./assets/images/offer/food-1.png", image_menu_path + "food-2.png", image_menu_path + "food-3.png", image_menu_path + "food-4.png", image_menu_path + "food-5.png", image_menu_path + "food-6.png", image_menu_path + "food-7.png", image_menu_path + "food-8.png"];
+
+section.menu
+  .menu__container
+    h2.menu__heading
+      span.primary-text Menu
+      = " That "
+      span.secondary-text Always
+      = " Make You Fall In "
+      span.primary-text Love
+    .menu__list-category
+      each item in list_category
+        a.menu__category-item.link-text(href="javascript:void(0)")= item
+    .menu__card-list
+      each url in image_food
+        - var food = { imageUrl: url, price: "10", ratePoint: "4.5", foodName: "Kebab", foodDescription: description_text, avatarImageList: [{ avatarUrl: avatar_img_path + "avatar-1.png" }, { avatarUrl: avatar_img_path + "avatar-2.png" }, { avatarUrl: avatar_img_path + "avatar-3.png" }] };
+
+        +foodItemCard(food)

src/layouts/nav-menu.pug

@@ -6,5 +6,5 @@ nav.nav
   ul.nav-list
     each val in list
       li.nav-item
-        a.nav-link.no-underline(href="javascript:void(0)")= val
+        a.nav-link.link-text(href="javascript:void(0)")= val
-a.btn.nav-download-btn.no-underline(href="javascript:void(0)") Download App
+a.btn.nav-download-btn(href="javascript:void(0)") Download App

src/layouts/offer.pug

@@ -1,5 +1,11 @@
 - var offer_img_path = "./assets/images/offer/";
 
+- var food_1 = { imageUrl: offer_img_path + "food-1.png", price: "10", ratePoint: "4.5", foodName: "Kebab", foodDescription: "Lorem Ipsum is simply dummy text of the printing and typesetting industry", avatarImageList: [{ avatarUrl: avatar_img_path + "avatar-1.png" }, { avatarUrl: avatar_img_path + "avatar-2.png" }, { avatarUrl: avatar_img_path + "avatar-3.png" }] };
+- var food_2 = { imageUrl: offer_img_path + "food-2.png", price: "15", ratePoint: "4.8", foodName: "Chicken Tikka", foodDescription: "Lorem Ipsum is simply dummy text of the printing and typesetting industry", avatarImageList: [{ avatarUrl: avatar_img_path + "avatar-4.png" }, { avatarUrl: avatar_img_path + "avatar-5.png" }, { avatarUrl: avatar_img_path + "avatar-6.png" }] };
+- var food_3 = { imageUrl: offer_img_path + "food-3.png", price: "8", ratePoint: "4.2", foodName: "Desi Chowmein", foodDescription: "Lorem Ipsum is simply dummy text of the printing and typesetting industry", avatarImageList: [{ avatarUrl: avatar_img_path + "avatar-7.png" }, { avatarUrl: avatar_img_path + "avatar-8.png" }, { avatarUrl: avatar_img_path + "avatar-9.png" }] };
+- var food_4 = { imageUrl: offer_img_path + "food-4.png", price: "28", ratePoint: "5.0", foodName: "Chicken Chargha", foodDescription: "Lorem Ipsum is simply dummy text of the printing and typesetting industry", avatarImageList: [{ avatarUrl: avatar_img_path + "avatar-1.png" }, { avatarUrl: avatar_img_path + "avatar-2.png" }, { avatarUrl: avatar_img_path + "avatar-3.png" }] };
+- var list_food = [food_1, food_2, food_3, food_4];
+
 section.offer
   .offer__container
     .offer__dot-background
@@ -13,10 +19,8 @@ section.offer
       = " Offers"
     p.offer__description Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
     .offer__card-list
-      +cardFoodItem(1, 10, "4.5", "Kebab", "Lorem Ipsum is simply dummy text of the printing and typesetting industry")
+      each val in list_food
-      +cardFoodItem(2, 15, "4.8", "Chicken Tikka", "Lorem Ipsum is simply dummy text of the printing and typesetting industry")
+        +foodItemCard(val)
-      +cardFoodItem(3, 8, "4.2", "Desi Chowmein", "Lorem Ipsum is simply dummy text of the printing and typesetting industry")
-      +cardFoodItem(4, 28, "5.0", "Chicken Chargha", "Lorem Ipsum is simply dummy text of the printing and typesetting industry")
   .offer__rosemary-container
     picture
       source(

src/layouts/service.pug

@@ -1,6 +1,7 @@
 - var service_img_path = "./assets/images/service/";
-- var list_1 = [{icon : 1, content: "Online order"}, {icon : 3, content: "Pre-Reservation"}, {icon : 3, content: "Super chef"}];
+- 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_2 = [{icon : 2, content: "24/7 Service"}, {icon : 3, content: "Oragonized foodhut place"}, {icon : 3, content: "Clean Kitchen"}];
+- 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
@@ -42,13 +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
-        each item in [list_1, list_2]
+        each list in list_service_category
           .service__category-list
-            each val in item
+            each item in list
               .service__category-item
                 img.service__icon-category(
-                  src=service_img_path + "icon-" + val.icon + ".png",
+                  src=item.url_icon,
                   alt="Icon category"
                 )
-                span.service__name-category= val.content
+                p.service__name-category= item.content
       a.service__btn.btn(href="javascript:void(0)") About us

src/layouts/welcome.pug

@@ -1,100 +1,104 @@
 - var welcome_img_path = "./assets/images/welcome/";
 
 section.welcome
-  .welcome__banner
+  .welcome__container
-    .welcome__banner-container
+    .welcome__banner
-      img.welcome__banner-img(
+      .welcome__banner-container
-        src=welcome_img_path + "welcome-image-mobile.png",
+        img.welcome__banner-img(
-        alt="Welcome banner image"
+          src=welcome_img_path + "welcome-image-mobile.png",
-      )
+          alt="Welcome banner image"
-      picture
-        source(
-          media="(min-width: 840px)",
-          srcset=welcome_img_path + "lines-background-desktop.png"
         )
-        img.welcome__lines-background(
+        picture
-          src=welcome_img_path + "lines-background-mobile.png",
+          source(
-          alt="Lines background"
+            media="(min-width: 840px)",
-        )
+            srcset=welcome_img_path + "lines-background-desktop.png"
-      picture
-        source(
-          media="(min-width: 840px)",
-          srcset=welcome_img_path + "arrow-desktop.png",
-          alt="Arrow image"
-        )
-        img.welcome__arrow-img-up(
-          src=welcome_img_path + "arrow-mobile.png",
-          alt="Arrow image"
-        )
-      img.welcome__mint-img(
-        src=welcome_img_path + "mint.png",
-        alt="Mint image"
-      )
-  .welcome__content
-    .welcome__arrow-down-img-wrapper
-      img.welcome__arrow-img-down(
-        src=welcome_img_path + "arrow-desktop-2.png",
-        alt="Arrow image down"
-      )
-    .welcome__orange-img-wrapper
-      picture
-        source(
-          media="(min-width: 840px)",
-          srcset=welcome_img_path + "orange-desktop.png"
-        )
-        img(src=welcome_img_path + "orange.png", alt="Orange background image")
-    .welcome__text-box
-      .welcome__icon-container
-        img.welcome__love-icon(
-          src=welcome_img_path + "love-icon.png",
-          alt="Love icon"
-        )
-      .welcome__head-arrow-container
-        img(src=welcome_img_path + "head-arrow.png", alt="Head arrow image")
-      p.welcome__text-box-content People Trust us
-    h1.welcome__heading We're
-      = " "
-      span.primary-text serious
-      = " for "
-      span.primary-text food
-      = " & "
-      .delivery-text-box
-        span.secondary-text delivery
-        .welcome__underline-img-container
-          img(src=welcome_img_path + "underline.png", alt="Underline image")
-      = "."
-
-    p.welcome__description Best cooks and best delivery guys all at your service. Hot tasty food will reach you in 60 minutes.
-    form.welcome__search-form(action="#")
-      .welcome__search-icon-wrapper
-        img.welcome__search-icon(
-          src=welcome_img_path + "search-icon.png",
-          alt="Search icon"
-        )
-      input.welcome__text-input(type="text", placeholder="Search food")
-      button.welcome__submit-btn(type="submit")
-        img.welcome__search-icon-btn(
-          src=welcome_img_path + "search-icon-btn.svg",
-          alt="Search button image"
-        )
-    .welcome__action-container
-      a.welcome__download-btn.btn(href="javascript:void(0)") Download App
-      a.welcome__watch-video-link.no-underline(href="javascript:void(0)")
-        .welcome__play-icon-wrapper
-          svg.welcome__play-icon(
-            width="12",
-            height="12",
-            viewBox="0 0 12 13",
-            fill="none",
-            xmlns="http://www.w3.org/2000/svg"
           )
-            path(
+          img.welcome__lines-background(
-              d="M12 6.5L0.749999 12.9952L0.75 0.00480889L12 6.5Z",
+            src=welcome_img_path + "lines-background-mobile.png",
-              fill="currentColor"
+            alt="Lines background"
-            ) 
+          )
-        span.welcome__text-download-btn Watch Video
+        picture
-    .welcome__slider-container
+          source(
-      img.welcome__slider-img(
+            media="(min-width: 840px)",
-        src=welcome_img_path + "slider.png",
+            srcset=welcome_img_path + "arrow-desktop.png",
-        alt="Slider image"
+            alt="Arrow image"
-      )
+          )
+          img.welcome__arrow-img-up(
+            src=welcome_img_path + "arrow-mobile.png",
+            alt="Arrow image"
+          )
+        img.welcome__mint-img(
+          src=welcome_img_path + "mint.png",
+          alt="Mint image"
+        )
+    .welcome__content
+      .welcome__arrow-down-img-wrapper
+        img.welcome__arrow-img-down(
+          src=welcome_img_path + "arrow-desktop-2.png",
+          alt="Arrow image down"
+        )
+      .welcome__orange-img-wrapper
+        picture
+          source(
+            media="(min-width: 840px)",
+            srcset=welcome_img_path + "orange-desktop.png"
+          )
+          img(
+            src=welcome_img_path + "orange.png",
+            alt="Orange background image"
+          )
+      .welcome__text-box
+        .welcome__icon-container
+          img.welcome__love-icon(
+            src=welcome_img_path + "love-icon.png",
+            alt="Love icon"
+          )
+        .welcome__head-arrow-container
+          img(src=welcome_img_path + "head-arrow.png", alt="Head arrow image")
+        p.welcome__text-box-content People Trust us
+      h1.welcome__heading We're
+        = " "
+        span.primary-text serious
+        = " for "
+        span.primary-text food
+        = " & "
+        .delivery-text-box
+          span.secondary-text delivery
+          .welcome__underline-img-container
+            img(src=welcome_img_path + "underline.png", alt="Underline image")
+        = "."
+
+      p.welcome__description Best cooks and best delivery guys all at your service. Hot tasty food will reach you in 60 minutes.
+      form.welcome__search-form(action="#")
+        .welcome__search-icon-wrapper
+          img.welcome__search-icon(
+            src=welcome_img_path + "search-icon.png",
+            alt="Search icon"
+          )
+        input.welcome__text-input(type="text", placeholder="Search food")
+        button.welcome__submit-btn(type="submit")
+          img.welcome__search-icon-btn(
+            src=welcome_img_path + "search-icon-btn.svg",
+            alt="Search button image"
+          )
+      .welcome__action-container
+        a.welcome__download-btn.btn(href="javascript:void(0)") Download App
+        a.welcome__watch-video-link.link-text(href="javascript:void(0)")
+          .welcome__play-icon-wrapper
+            svg.welcome__play-icon(
+              width="12",
+              height="12",
+              viewBox="0 0 12 13",
+              fill="none",
+              xmlns="http://www.w3.org/2000/svg"
+            )
+              path(
+                d="M12 6.5L0.749999 12.9952L0.75 0.00480889L12 6.5Z",
+                fill="currentColor"
+              ) 
+          span.welcome__text-download-btn Watch Video
+      .welcome__slider-container
+        img.welcome__slider-img(
+          src=welcome_img_path + "slider.png",
+          alt="Slider image"
+        )

src/styles/abstracts/_mixins.scss

@@ -1,3 +1,11 @@
+%d-flex {
+  display: flex;
+}
+
+%absolute {
+  position: absolute;
+}
+
 @mixin base-icon-menu {
   @include size(36px, 3px);
 
@@ -8,38 +16,38 @@
 
 @mixin icon-menu {
   @include base-icon-menu;
+  @extend %absolute;
 
   content: "";
-  position: absolute;
   right: 0;
 }
 
-@mixin flex-container(
+@mixin flex-layout(
-  $flex: false,
+  $justify: null,
-  $justify-content: null,
+  $align: null,
-  $flex-direction: null,
+  $direction: null,
-  $align-items: null,
+  $gap: null,
-  $gap: null
+  $wrap: null
 ) {
-  @if $flex {
+  @if $justify != null {
-    display: flex;
+    justify-content: $justify;
   }
 
-  @if $justify-content != null {
+  @if $align != null {
-    justify-content: $justify-content;
+    align-items: $align;
   }
 
-  @if $flex-direction != null {
+  @if $direction != null {
-    flex-direction: $flex-direction;
+    flex-direction: $direction;
-  }
-
-  @if $align-items != null {
-    align-items: $align-items;
   }
 
   @if $gap != null {
     gap: $gap;
   }
+
+  @if $wrap != null {
+    flex-wrap: $wrap;
+  }
 }
 
 @mixin size($width: null, $height: null) {
@@ -52,17 +60,12 @@
   }
 }
 
-@mixin setAbsoluteAndLocation(
+@mixin set-absolute-and-location(
-  $absolute: false,
   $top: null,
   $left: null,
   $right: null,
   $bottom: null
 ) {
-  @if $absolute {
-    position: absolute;
-  }
-
   @if $top != null {
     top: $top;
   }

src/styles/bases/_base.scss

@@ -1,4 +1,6 @@
-.no-underline {
+.link-text {
+  font-size: $fs-md;
+  color: $black;
   text-decoration: none;
 }
 

src/styles/components/_card-item.scss

@@ -0,0 +1,102 @@
+%align-center-col {
+  @include flex-layout($align: center, $direction: column);
+}
+
+.card-item {
+  @extend %d-flex, %align-center-col;
+  @include size(auto, 516px);
+
+  position: relative;
+}
+
+.food-image {
+  @extend %absolute;
+  @include set-absolute-and-location($top: 29px);
+
+  margin: auto;
+}
+
+.price {
+  @extend %absolute;
+  @include set-absolute-and-location($top: 176px, $right: 70px);
+  @include size(52px, 52px);
+
+  color: $white;
+  border: 4px solid $white;
+  border-radius: 50px;
+  background-color: $secondary-color;
+  font-size: $fs-md;
+  text-align: center;
+  line-height: 50px;
+}
+
+.content-card {
+  @extend %d-flex, %align-center-col, %absolute;
+  @include set-absolute-and-location($bottom: 60px);
+  @include size(100%, auto);
+}
+
+.rate {
+  @extend %d-flex;
+  @include flex-layout($align: center, $gap: 10px);
+}
+
+.star-container {
+  @include size(24px, 22px);
+}
+
+.avatar-container {
+  @include size(74px, 38px);
+
+  position: relative;
+}
+
+.avatar {
+  &:first-child {
+    @extend %absolute;
+    @include set-absolute-and-location($left: 38px);
+
+    z-index: 2;
+  }
+
+  &:nth-child(2) {
+    @extend %absolute;
+    @include set-absolute-and-location($left: 19px);
+
+    z-index: 1;
+  }
+
+  &:last-child {
+    @extend %absolute;
+    @include set-absolute-and-location($left: 0);
+  }
+}
+
+.food-name {
+  margin-top: 30px;
+  color: $primary-color;
+  font-size: $fs-lg;
+  font-weight: 600;
+}
+
+.food-description {
+  @include size(100%, auto);
+
+  max-width: 243px;
+  margin-top: 16px;
+  text-align: center;
+  text-transform: capitalize;
+  color: $black;
+}
+
+.order-btn {
+  @extend %absolute;
+  @include set-absolute-and-location($bottom: 0px);
+
+  padding: 10px 20px;
+  text-transform: capitalize;
+
+  &:hover {
+    background-color: $secondary-color;
+  }
+}

src/styles/components/_toggle-menu.scss

@@ -18,9 +18,9 @@
 }
 
 .toggle-menu {
+  @extend %absolute;
   @include size(36px, 27px);
 
-  position: absolute;
   top: 46px;
   right: 21px;
   cursor: pointer;

src/styles/layouts/_header.scss

@@ -1,18 +1,16 @@
 .header {
-  @include setAbsoluteAndLocation(
+  @extend %absolute;
-    $absolute: true,
+  @include set-absolute-and-location($top: 0, $right: 0, $left: 0);
-    $top: 0,
-    $right: 0,
-    $left: 0
-  );
 
   max-width: 428px;
   margin: auto;
 }
 
 .header-container {
-  @include flex-container(true, space-between, $align-items: center);
+  @extend %d-flex;
+  @include flex-layout($align: center);
 
+  justify-content: space-between;
   position: relative;
   max-width: 428px;
   min-width: $min-width;
@@ -21,7 +19,8 @@
 }
 
 .header-content {
-  @include flex-container(true, space-between);
+  @extend %d-flex;
+  @include flex-layout($justify: space-between);
 }
 
 @media screen and (min-width: 840px) {
@@ -30,17 +29,18 @@
   }
 
   .header-container {
+    @include flex-layout($gap: 10px);
+
     padding-top: 32px;
     padding-left: 70px;
     padding-right: 61px;
-    gap: 10px;
     max-width: 1309px;
   }
 
   .header-content {
+    @include flex-layout($gap: 10px);
     @include size(100%, auto);
 
-    gap: 10px;
     max-width: 918px;
   }
 }

src/styles/layouts/_menu.scss

@@ -0,0 +1,97 @@
+.menu {
+  &__container {
+    padding-top: 150px;
+    max-width: 424px;
+    margin-inline: auto;
+  }
+
+  &__heading {
+    font-size: $fs-x-lg;
+    font-weight: 700;
+    text-align: center;
+    max-width: 363px;
+    margin-inline: auto;
+  }
+
+  &__list-category {
+    @extend %d-flex;
+    @include flex-layout($gap: 30px);
+
+    margin-top: 62px;
+    padding-left: 50px;
+    overflow-x: auto;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  &__category-item:focus {
+    font-size: $fs-md;
+    color: $white;
+    background-color: $primary-color;
+    border: 2px solid $primary-color;
+    padding: 8px 18px;
+    border-radius: 50px;
+  }
+
+  &__category-item {
+    font-size: $fs-md;
+    color: $gray;
+    background-color: transparent;
+    border: 2px solid $black;
+    padding: 8px 18px;
+    border-radius: 50px;
+  }
+
+  &__card-list {
+    display: grid;
+    grid-auto-flow: column;
+    grid-auto-columns: 100%;
+    column-gap: 18px;
+    margin-top: 43px;
+    margin-inline: 59px;
+    overflow-x: auto;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+}
+
+@media screen and (min-width: 840px) {
+  .menu {
+    &__container {
+      max-width: $max-width;
+    }
+
+    &__heading {
+      max-width: 653px;
+    }
+
+    &__list-category {
+      max-width: 1018px;
+      margin-inline: 59px;
+    }
+
+    &__card-list {
+      grid-auto-columns: unset;
+      grid-template-rows: 1fr 1fr;
+      row-gap: 66px;
+    }
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .menu {
+    &__list-category {
+      max-width: 1018px;
+      margin-inline: auto;
+      padding-left: unset;
+    }
+  }
+}

src/styles/layouts/_navbar.scss

@@ -1,10 +1,10 @@
 .nav-list {
+  @extend %absolute;
   @include size(max-content, auto);
 
   display: none;
   list-style: none;
   transition: 0.1s;
-  position: absolute;
   border: 2px solid $primary-color;
   top: 100px;
   right: 25px;
@@ -53,12 +53,12 @@
 
   .nav-list {
     @include size(auto, auto);
-    @include flex-container(true, space-between, column);
+    @include flex-layout($justify: space-between, $direction: row, $gap: 10px);
 
+    display: flex;
     position: unset;
-    flex-direction: row;
     border: none;
-    max-width: 600px;
+    max-width: 660px;
     margin: unset;
     background-color: transparent;
   }
@@ -66,6 +66,7 @@
   .nav-item {
     border-bottom: none;
     padding: 0;
+    text-align: center;
 
     &:hover {
       background-color: unset;

src/styles/layouts/_offer.scss

@@ -4,11 +4,8 @@
   margin-inline: auto;
 
   &__container {
-    @include flex-container(
+    @extend %d-flex;
-      true,
+    @include flex-layout($justify: center, $direction: column);
-      $justify-content: center,
-      $flex-direction: column
-    );
 
     max-width: 380px;
     margin: auto;
@@ -17,7 +14,8 @@
   }
 
   &__dot-background {
-    @include setAbsoluteAndLocation(true, $top: 168px, $left: 0px);
+    @extend %absolute;
+    @include set-absolute-and-location($top: 168px, $left: 0px);
 
     display: none;
   }
@@ -40,112 +38,24 @@
   }
 
   &__card-list {
-    display: grid;
+    @extend %d-flex;
+    @include flex-layout($wrap: nowrap, $gap: 70px);
+
+    padding-inline: 35px;
     padding-top: 65px;
-    grid-auto-flow: column;
-    grid-auto-columns: 100%;
     overflow-x: auto;
     -ms-overflow-style: none;
     scrollbar-width: none;
+
     &::-webkit-scrollbar {
       display: none;
     }
   }
 
-  &__card-item {
-    @include flex-container(
-      true,
-      $align-items: center,
-      $flex-direction: column
-    );
-    @include size(auto, 516px);
-
-    position: relative;
-  }
-
-  &__food-image {
-    @include setAbsoluteAndLocation(true, $top: 29px);
-
-    margin: auto;
-  }
-
-  &__price {
-    @include setAbsoluteAndLocation(true, $top: 176px, $right: 110px);
-    @include size(52px, 52px);
-
-    color: $white;
-    border: 4px solid $white;
-    border-radius: 50px;
-    background-color: $secondary-color;
-    font-size: $fs-md;
-    text-align: center;
-    line-height: 50px;
-  }
-
-  &__content-card {
-    @include setAbsoluteAndLocation(true, $bottom: 60px);
-    @include size(100%, auto);
-    @include flex-container(
-      true,
-      $align-items: center,
-      $flex-direction: column
-    );
-  }
-
-  &__rate {
-    @include flex-container(true, $align-items: center, $gap: 10px);
-  }
-
-  &__avatar-container {
-    position: relative;
-    @include size(74px, 38px);
-  }
-
-  &__avatar {
-    &-1 {
-      @include setAbsoluteAndLocation(true, $left: 38px);
-      z-index: 2;
-    }
-
-    &-2 {
-      @include setAbsoluteAndLocation(true, $left: 19px);
-      z-index: 1;
-    }
-
-    &-3 {
-      @include setAbsoluteAndLocation(true, $left: 0);
-    }
-  }
-
-  &__food-name {
-    margin-top: 30px;
-    color: $primary-color;
-    font-size: $fs-lg;
-    font-weight: 600;
-  }
-
-  &__food-description {
-    @include size(100%, auto);
-
-    max-width: 243px;
-    margin-top: 16px;
-    text-align: center;
-    text-transform: capitalize;
-    color: $black;
-  }
-
-  &__order-btn {
-    @include setAbsoluteAndLocation(true, $bottom: 0px);
-
-    padding: 10px 20px;
-    background-color: $primary-color;
-    border-radius: 100px;
-    color: $white;
-    text-transform: capitalize;
-  }
-
   &__rosemary-container {
-    @include setAbsoluteAndLocation(true, $bottom: -120px, $right: 0);
+    @extend %absolute;
+    @include set-absolute-and-location($bottom: -120px, $right: 0);
+
     z-index: 0;
   }
 }
@@ -158,23 +68,15 @@
       max-width: $max-width;
     }
 
-    &__food-image {
-      @include setAbsoluteAndLocation($top: 29px, $right: 55px);
-    }
-
     &__card-list {
-      @include flex-container(
+      @include flex-layout(
-        true,
+        $align: center,
-        $align-items: center,
+        $justify: center,
-        $gap: 18px,
+        $wrap: wrap,
-        $justify-content: center
+        $gap: 18px
       );
-      row-gap: 30px;
-      flex-wrap: wrap;
-    }
 
-    &__price {
+      row-gap: 30px;
-      @include setAbsoluteAndLocation($top: 176px, $right: 70px);
     }
   }
 }

src/styles/layouts/_service.scss

@@ -9,12 +9,14 @@
   }
 
   &__background-color {
-    @include setAbsoluteAndLocation(true, $top: 200px, $left: 0);
+    @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.06) 50%,
+      rgba(253, 197, 94, 0.1) 50%,
       rgba(253, 197, 94, 0) 100%
     );
   }
@@ -27,15 +29,18 @@
   }
 
   &__background-img {
-    @include setAbsoluteAndLocation(true, $top: 65px, $left: 0);
+    @extend %absolute;
+    @include set-absolute-and-location($top: 65px, $left: 0);
   }
 
   &__main-img {
-    @include setAbsoluteAndLocation(true, $top: 60px, $left: 35px);
+    @extend %absolute;
+    @include set-absolute-and-location($top: 60px, $left: 35px);
   }
 
   &__vegetable-img {
-    @include setAbsoluteAndLocation(true, $bottom: 0, $left: 50px);
+    @extend %absolute;
+    @include set-absolute-and-location($bottom: 0, $left: 50px);
   }
 
   &__content {
@@ -46,31 +51,39 @@
 
   &__heading {
     margin-top: 30px;
+    margin-inline: auto;
     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;
+    max-width: 381px;
     font-size: $fs-md;
   }
 
   &__category {
-    @include flex-container(true, $flex-direction: column, $gap: 41px);
+    @extend %d-flex;
+    @include flex-layout(
+      $direction: column,
+      $justify: space-between,
+      $gap: 41px
+    );
 
+    max-width: 514px;
     margin-top: 81px;
     &-list {
-      @include flex-container(true, $flex-direction: column, $gap: 30px);
+      @extend %d-flex;
+      @include flex-layout($direction: column, $gap: 30px, $justify: center);
     }
   }
 
   &__category-item {
-    @include flex-container(true, $align-items: center, $gap: 10px);
+    @extend %d-flex;
+    @include flex-layout($align: center, $gap: 10px);
   }
 
   &__name-category {
@@ -91,13 +104,18 @@
 }
 
 @media screen and (min-width: 840px) {
+  %absolute_840 {
+    position: absolute;
+  }
+
   .service {
     max-width: $max-width;
     margin-inline: auto;
 
     &__container {
-      @include flex-container(true, $align-items: center);
+      @include flex-layout($align: center);
 
+      display: flex;
       padding-top: 200px;
     }
 
@@ -107,16 +125,37 @@
       max-width: 460px;
     }
 
+    &__img-container {
+      @include size(100%, 619px);
+    }
+
     &__background-img {
-      @include setAbsoluteAndLocation(true, $top: 35px, $left: 0);
+      @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 setAbsoluteAndLocation(true, $top: 30px, $left: 35px);
+      @include set-absolute-and-location($top: 95px, $left: 35px);
+      @extend %absolute_840;
     }
 
     &__vegetable-img {
-      @include setAbsoluteAndLocation(true, $bottom: 30, $left: 50px);
+      @include set-absolute-and-location($bottom: 145px, $left: 50px);
+      @extend %absolute_840;
     }
 
     &__heading {
@@ -129,39 +168,61 @@
     }
 
     &__category {
-      flex-direction: row;
+      @include flex-layout($direction: row, $gap: 10px);
+
       margin-top: 29px;
     }
   }
 }
 
 @media screen and (min-width: 1200px) {
+  %absolute_1200 {
+    position: absolute;
+  }
+
   .service {
     &__container {
-      @include flex-container($align-items: center, $gap: 150px);
+      @include flex-layout($align: center, $gap: 150px);
-    }
-    &__background-color {
-      display: none;
-    }
-
-    &__img-container {
-      @include size(100%, 619px);
     }
 
     &__background-img {
-      @include setAbsoluteAndLocation(true, $top: -200px, $left: 0);
+      @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 setAbsoluteAndLocation(true, $top: 70px, $left: 70px);
+      @include set-absolute-and-location($top: -17px, $left: 70px);
+      @extend %absolute_1200;
     }
 
     &__vegetable-img {
-      @include setAbsoluteAndLocation(true, $bottom: 10, $left: 95px);
+      @include set-absolute-and-location($bottom: 95px, $left: 105px);
+      @extend %absolute_1200;
     }
 
     &__content {
-      padding-top: 220px;
+      padding-top: 50px;
     }
   }
 }

src/styles/layouts/_welcome.scss

@@ -4,20 +4,25 @@
 }
 
 .welcome {
-  @include flex-container(true, center, column);
-  margin: auto;
-  max-width: 428px;
-  padding-top: 117px;
   background: linear-gradient(
     180deg,
     rgba(245, 71, 72, 0.06) 0%,
     rgba(245, 71, 72, 0) 100%
   );
 
+  &__container {
+    @extend %d-flex;
+    @include flex-layout($justify: center, $direction: column);
+
+    margin: auto;
+    max-width: 428px;
+    padding-top: 117px;
+  }
   // Start banner
   &__banner-container {
+    @extend %d-flex;
     @include size(428px, auto);
-    @include flex-container(true, center, column);
+    @include flex-layout($justify: center, $direction: column);
 
     position: relative;
   }
@@ -27,25 +32,28 @@
   }
 
   &__lines-background {
-    @include setAbsoluteAndLocation($absolute: true, $top: -76px, $right: 0);
+    @extend %absolute;
+    @include set-absolute-and-location($top: -76px, $right: 0);
     @include size(187px, 430px);
   }
 
   &__arrow-img-up {
-    @include setAbsoluteAndLocation($absolute: true, $top: -15px, $right: 50px);
+    @extend %absolute;
-
+    @include set-absolute-and-location($top: -15px, $right: 50px);
     @include size(43px, 215px);
   }
 
   &__mint-img {
-    @include setAbsoluteAndLocation($absolute: true, $bottom: 100px, $right: 0);
+    @extend %absolute;
+    @include set-absolute-and-location($bottom: 100px, $right: 0);
   }
   // End banner
 
   // Start content
   &__content {
-    @include flex-container(true, $flex-direction: column);
     @include size(calc(428px - 48px), auto);
+    @extend %d-flex;
+    @include flex-layout($direction: column);
 
     position: relative;
     padding-top: 63.37px;
@@ -53,15 +61,19 @@
   }
 
   &__arrow-down-img-wrapper {
+    @extend %absolute;
+
     display: none;
   }
 
   &__orange-img-wrapper {
-    @include setAbsoluteAndLocation($absolute: true, $top: 0, $right: 35px);
+    @extend %absolute;
+    @include set-absolute-and-location($top: 0, $right: 35px);
   }
 
   &__text-box {
-    @include flex-container(true, $align-items: center, $gap: 6px);
+    @extend %d-flex;
+    @include flex-layout($align: center, $gap: 6px);
     @include size(fit-content);
 
     background-color: #feeae9;
@@ -84,7 +96,8 @@
 
   &__head-arrow-container {
     @include size(13px, 7.3px);
-    @include setAbsoluteAndLocation($absolute: true, $right: 107px);
+    @extend %absolute;
+    @include set-absolute-and-location($right: 107px);
   }
 
   &__heading {
@@ -96,11 +109,8 @@
   }
 
   &__underline-img-container {
-    @include setAbsoluteAndLocation(
+    @extend %absolute;
-      $absolute: true,
+    @include set-absolute-and-location($bottom: -20px, $left: 0px);
-      $bottom: -20px,
-      $left: 0px
-    );
   }
 
   &__description {
@@ -112,7 +122,7 @@
   }
 
   &__search-form {
-    @include flex-container(true);
+    @extend %d-flex;
 
     margin-top: 32px;
     border-radius: 100px;
@@ -154,7 +164,8 @@
   }
 
   &__action-container {
-    @include flex-container(true, $justify-content: space-between);
+    @extend %d-flex;
+    @include flex-layout($justify: space-between, $gap: 10px);
 
     width: 100%;
     margin-top: 44px;
@@ -162,10 +173,10 @@
   }
 
   &__watch-video-link {
-    @include flex-container(true, $align-items: center, $gap: 21px);
+    @extend %d-flex;
+    @include flex-layout($align: center, $gap: 21px);
 
     position: relative;
-
     &:hover {
       .welcome__play-icon-wrapper {
         transform: scale(1.2);
@@ -183,8 +194,9 @@
   }
 
   &__play-icon-wrapper {
+    @extend %absolute;
     @include size(12px, 17px);
-    position: absolute;
+
     padding: 17.5px 20px;
     border-radius: 50px;
     background-color: $white;
@@ -208,6 +220,8 @@
   }
 
   &__slider-container {
+    @extend %absolute;
+
     display: none;
   }
   // End content
@@ -219,15 +233,17 @@
 
 @media screen and (min-width: 840px) {
   .welcome {
-    @include flex-container(
+    &__container {
-      $flex-direction: row-reverse,
+      @include flex-layout(
-      $align-items: center,
+        $direction: row-reverse,
-      $justify-content: space-between
+        $align: center,
-    );
+        $justify: space-between
+      );
 
-    padding-top: 130px;
+      padding-top: 130px;
-    width: 100%;
+      width: 100%;
-    max-width: $max-width;
+      max-width: $max-width;
+    }
 
     // Start banner
     &__banner-img {
@@ -237,13 +253,14 @@
     }
 
     &__lines-background {
-      @include setAbsoluteAndLocation($top: -150px, $right: 0px);
+      @include set-absolute-and-location($top: -150px, $right: 0px);
       @include size(313px, 718px);
     }
 
     &__arrow-img-up {
       @include size(117px, 315px);
-      @include setAbsoluteAndLocation($top: -40px, $right: 5px);
+      @include set-absolute-and-location($top: -40px, $right: 5px);
+
       transition: 0.2s;
     }
 
@@ -262,13 +279,15 @@
     // Start content
     &__content {
       @include size(auto, auto);
+
       padding-left: 70px;
       padding-right: 0px;
       max-width: 560px;
     }
 
     &__orange-img-wrapper {
-      @include setAbsoluteAndLocation($top: 170px, $right: -50px);
+      @include set-absolute-and-location($top: 170px, $right: -50px);
+
       transition: 0.2s;
     }
 
@@ -278,7 +297,7 @@
     }
 
     &__underline-img-container {
-      @include setAbsoluteAndLocation($bottom: -25px, $left: 8px);
+      @include set-absolute-and-location($bottom: -25px, $left: 8px);
     }
 
     &__description {
@@ -298,11 +317,7 @@
     }
 
     &__arrow-down-img-wrapper {
-      @include setAbsoluteAndLocation(
+      @include set-absolute-and-location($top: -50px, $left: 220px);
-        $absolute: true,
-        $top: -50px,
-        $left: 220px
-      );
 
       display: block;
       transition: 0.2s;
@@ -314,11 +329,7 @@
 
     &__slider-container {
       display: block;
-      @include setAbsoluteAndLocation(
+      @include set-absolute-and-location($bottom: -135px, $left: 65px);
-        $absolute: true,
-        $bottom: -135px,
-        $left: 65px
-      );
     }
 
     // End content
@@ -332,15 +343,15 @@
     }
 
     &__arrow-img-up {
-      @include setAbsoluteAndLocation($top: 8px, $right: 62px);
+      @include set-absolute-and-location($top: 8px, $right: 62px);
     }
 
     &__orange-img-wrapper {
-      @include setAbsoluteAndLocation($top: 110px, $right: -50px);
+      @include set-absolute-and-location($top: 110px, $right: -50px);
     }
 
     &__arrow-down-img-wrapper {
-      @include setAbsoluteAndLocation($top: -75px, $left: 230px);
+      @include set-absolute-and-location($top: -75px, $left: 230px);
     }
   }
 }

src/styles/main.scss

@@ -11,6 +11,7 @@
 @import "./components/button";
 @import "./components/toggle-menu";
 @import "./components/logo";
+@import "./components/card-item";
 
 // Layouts
 @import "./layouts/navbar";
@@ -18,3 +19,4 @@
 @import "./layouts/welcome";
 @import "./layouts/offer";
 @import "./layouts/service";
+@import "./layouts/menu";