Merge branch 'html-css-practice-two' into feature/offers-style

practice/practice-02/src/includes/mixins.pug

@@ -1,25 +1,21 @@
-- var values = [1, 2, 3];
-
-mixin cardFoodItem(itemFood, price, ratePoint, foodName, foodDescription)
+mixin foodItemCard(food)
   .card-item
     img.card-img(src=offer_img_path + "item-card.png", alt="Item card image")
-    img.food-image(
-      src=offer_img_path + "food-" + itemFood + ".png",
-      alt="Food " + itemFood + " image"
-    )
-    span.price= price + "$"
+    img.food-image(src=food.imageUrl, alt=food.name + " image")
+    span.price= food.price + "$"
     .content-card
       .rate
         .avatar-container
-          each val in values 
-            img(
-              src=offer_img_path + "avatar-" + val + "-item-" + itemFood + ".png",
-              alt="Avatar user rate",
-              class="avatar-" + val
-            )
+          if food.avatarImageList && food.avatarImageList.length > 0
+            each avatar, index in food.avatarImageList 
+              img(
+                src=avatar.avatarUrl,
+                alt="Avatar user rate",
+                class="avatar-" + index
+              )
         .star-container
           img(src=offer_img_path + "star.png", alt="Star image")
-        span.rate-point= "(" + ratePoint + ")"
-      span.food-name= foodName
-      p.food-description= foodDescription
-    a.order-btn.btn.no-underline(href="javascript:void(0)") Order now
+        span.rate-point= "(" + food.ratePoint + ")"
+      p.food-name= food.foodName
+      p.food-description= food.foodDescription
+    a.order-btn.btn(href="javascript:void(0)") Order now

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

@@ -1,4 +1,11 @@
 - var offer_img_path = "./assets/images/offer/";
+- var avatar_img_path = "./assets/images/avatar/";
+
+- 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
@@ -13,10 +20,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")
-      +cardFoodItem(2, 15, "4.8", "Chicken Tikka", "Lorem Ipsum is simply dummy text of the printing and typesetting industry")
-      +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")
+      each val in list_food
+        +foodItemCard(val)
   .offer__rosemary-container
     picture
       source(

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

@@ -1,100 +1,104 @@
 - var welcome_img_path = "./assets/images/welcome/";
 
 section.welcome
-  .welcome__banner
-    .welcome__banner-container
-      img.welcome__banner-img(
-        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"
+  .welcome__container
+    .welcome__banner
+      .welcome__banner-container
+        img.welcome__banner-img(
+          src=welcome_img_path + "welcome-image-mobile.png",
+          alt="Welcome banner image"
         )
-        img.welcome__lines-background(
-          src=welcome_img_path + "lines-background-mobile.png",
-          alt="Lines background"
-        )
-      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"
+        picture
+          source(
+            media="(min-width: 840px)",
+            srcset=welcome_img_path + "lines-background-desktop.png"
           )
-            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"
-      )
+          img.welcome__lines-background(
+            src=welcome_img_path + "lines-background-mobile.png",
+            alt="Lines background"
+          )
+        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(
+                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"
+        )

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

@@ -4,20 +4,22 @@
 }
 
 .welcome {
-  @include flex-container(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 {
+    @include flex-container(true, center, column);
+    margin: auto;
+    max-width: 428px;
+    padding-top: 117px;
+  }
   // Start banner
   &__banner-container {
     @include size(428px, auto);
-    @include flex-container(center, column);
+    @include flex-container(true, center, column);
 
     position: relative;
   }
@@ -44,7 +46,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 +63,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 +114,7 @@
   }
 
   &__search-form {
-    @include flex-container();
+    @include flex-container(true);
 
     margin-top: 32px;
     border-radius: 100px;
@@ -154,7 +156,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 +164,7 @@
   }
 
   &__watch-video-link {
-    @include flex-container($align-items: center, $gap: 21px);
+    @include flex-container(true, $align-items: center, $gap: 21px);
 
     position: relative;
 
@@ -219,15 +221,17 @@
 
 @media screen and (min-width: 840px) {
   .welcome {
-    @include flex-container(
-      $flex-direction: row-reverse,
-      $align-items: center,
-      $justify-content: space-between
-    );
+    &__container {
+      @include flex-container(
+        $flex-direction: row-reverse,
+        $align-items: center,
+        $justify-content: space-between
+      );
 
-    padding-top: 130px;
-    width: 100%;
-    max-width: $max-width;
+      padding-top: 130px;
+      width: 100%;
+      max-width: $max-width;
+    }
 
     // Start banner
     &__banner-img {