Fix comments

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

@@ -8,11 +8,7 @@ mixin foodItemCard(food)
         .avatar-container
           if food.avatarImageList && food.avatarImageList.length > 0
             each avatar, index in food.avatarImageList 
-              img(
-                src=avatar.avatarUrl,
-                alt="Avatar user rate",
-                class="avatar-" + index
-              )
+              img.avatar(src=avatar.avatarUrl, alt="Avatar user rate")
         .star-container
           img(src=offer_img_path + "star.png", alt="Star image")
         span.rate-point= "(" + food.ratePoint + ")"

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

@@ -52,7 +52,7 @@
   }
 }
 
-@mixin setAbsoluteAndLocation(
+@mixin set-absolute-and-location(
   $absolute: false,
   $top: null,
   $left: null,

practice/practice-02/src/styles/components/_card-item.scss

@@ -6,13 +6,13 @@
 }
 
 .food-image {
-  @include setAbsoluteAndLocation(true, $top: 29px);
+  @include set-absolute-and-location(true, $top: 29px);
 
   margin: auto;
 }
 
 .price {
-  @include setAbsoluteAndLocation(true, $top: 176px, $right: 70px);
+  @include set-absolute-and-location(true, $top: 176px, $right: 70px);
   @include size(52px, 52px);
 
   color: $white;
@@ -25,7 +25,7 @@
 }
 
 .content-card {
-  @include setAbsoluteAndLocation(true, $bottom: 60px);
+  @include set-absolute-and-location(true, $bottom: 60px);
   @include size(100%, auto);
   @include flex-container(true, $align-items: center, $flex-direction: column);
 }
@@ -35,23 +35,26 @@
 }
 
 .avatar-container {
-  position: relative;
   @include size(74px, 38px);
+
+  position: relative;
 }
 
 .avatar {
-  &-0 {
-    @include setAbsoluteAndLocation(true, $left: 38px);
+  &:first-child {
+    @include set-absolute-and-location(true, $left: 38px);
+
     z-index: 2;
   }
 
-  &-1 {
-    @include setAbsoluteAndLocation(true, $left: 19px);
+  &:nth-child(2) {
+    @include set-absolute-and-location(true, $left: 19px);
+
     z-index: 1;
   }
 
-  &-2 {
-    @include setAbsoluteAndLocation(true, $left: 0);
+  &:last-child {
+    @include set-absolute-and-location(true, $left: 0);
   }
 }
 
@@ -73,7 +76,7 @@
 }
 
 .order-btn {
-  @include setAbsoluteAndLocation(true, $bottom: 0px);
+  @include set-absolute-and-location(true, $bottom: 0px);
 
   padding: 10px 20px;
   text-transform: capitalize;

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

@@ -1,5 +1,5 @@
 .header {
-  @include setAbsoluteAndLocation(
+  @include set-absolute-and-location(
     $absolute: true,
     $top: 0,
     $right: 0,

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

@@ -17,7 +17,7 @@
   }
 
   &__dot-background {
-    @include setAbsoluteAndLocation(true, $top: 168px, $left: 0px);
+    @include set-absolute-and-location(true, $top: 168px, $left: 0px);
 
     display: none;
   }
@@ -48,13 +48,15 @@
     overflow-x: auto;
     -ms-overflow-style: none;
     scrollbar-width: none;
+
     &::-webkit-scrollbar {
       display: none;
     }
   }
 
   &__rosemary-container {
-    @include setAbsoluteAndLocation(true, $bottom: -120px, $right: 0);
+    @include set-absolute-and-location(true, $bottom: -120px, $right: 0);
+
     z-index: 0;
   }
 }
@@ -73,6 +75,7 @@
         $gap: 18px,
         $justify-content: center
       );
+
       row-gap: 30px;
       flex-wrap: wrap;
     }

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

@@ -29,18 +29,26 @@
   }
 
   &__lines-background {
-    @include setAbsoluteAndLocation($absolute: true, $top: -76px, $right: 0);
+    @include set-absolute-and-location($absolute: true, $top: -76px, $right: 0);
     @include size(187px, 430px);
   }
 
   &__arrow-img-up {
-    @include setAbsoluteAndLocation($absolute: true, $top: -15px, $right: 50px);
+    @include set-absolute-and-location(
+      $absolute: true,
+      $top: -15px,
+      $right: 50px
+    );
 
     @include size(43px, 215px);
   }
 
   &__mint-img {
-    @include setAbsoluteAndLocation($absolute: true, $bottom: 100px, $right: 0);
+    @include set-absolute-and-location(
+      $absolute: true,
+      $bottom: 100px,
+      $right: 0
+    );
   }
   // End banner
 
@@ -59,7 +67,7 @@
   }
 
   &__orange-img-wrapper {
-    @include setAbsoluteAndLocation($absolute: true, $top: 0, $right: 35px);
+    @include set-absolute-and-location($absolute: true, $top: 0, $right: 35px);
   }
 
   &__text-box {
@@ -86,7 +94,7 @@
 
   &__head-arrow-container {
     @include size(13px, 7.3px);
-    @include setAbsoluteAndLocation($absolute: true, $right: 107px);
+    @include set-absolute-and-location($absolute: true, $right: 107px);
   }
 
   &__heading {
@@ -98,7 +106,7 @@
   }
 
   &__underline-img-container {
-    @include setAbsoluteAndLocation(
+    @include set-absolute-and-location(
       $absolute: true,
       $bottom: -20px,
       $left: 0px
@@ -241,13 +249,13 @@
     }
 
     &__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;
     }
 
@@ -272,7 +280,7 @@
     }
 
     &__orange-img-wrapper {
-      @include setAbsoluteAndLocation($top: 170px, $right: -50px);
+      @include set-absolute-and-location($top: 170px, $right: -50px);
       transition: 0.2s;
     }
 
@@ -282,7 +290,7 @@
     }
 
     &__underline-img-container {
-      @include setAbsoluteAndLocation($bottom: -25px, $left: 8px);
+      @include set-absolute-and-location($bottom: -25px, $left: 8px);
     }
 
     &__description {
@@ -302,7 +310,7 @@
     }
 
     &__arrow-down-img-wrapper {
-      @include setAbsoluteAndLocation(
+      @include set-absolute-and-location(
         $absolute: true,
         $top: -50px,
         $left: 220px
@@ -318,7 +326,7 @@
 
     &__slider-container {
       display: block;
-      @include setAbsoluteAndLocation(
+      @include set-absolute-and-location(
         $absolute: true,
         $bottom: -135px,
         $left: 65px
@@ -336,15 +344,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);
     }
   }
 }