From 89dfc602109c7b746beb0bbdb7f71e7ab8a29e57 Mon Sep 17 00:00:00 2001
From: Nezumi <loiphan2711@gmail.com>
Date: Sun, 23 Jul 2023 09:24:49 +0700
Subject: [PATCH 1/8] Add style for offers UI

---
 .../src/styles/abstracts/_mixins.scss         |   5 +-
 .../src/styles/abstracts/_variables.scss      |   3 +-
 .../practice-02/src/styles/bases/_base.scss   |   4 +
 .../src/styles/bases/_typography.scss         |   6 +
 .../src/styles/components/_logo.scss          |  12 +-
 .../src/styles/layouts/_header.scss           |  16 ++
 .../src/styles/layouts/_navbar.scss           |   1 +
 .../src/styles/layouts/_offer.scss            | 163 ++++++++++++++++++
 .../src/styles/layouts/_welcome.scss          |  63 +++++--
 practice/practice-02/src/styles/main.scss     |   1 +
 10 files changed, 257 insertions(+), 17 deletions(-)
 create mode 100644 practice/practice-02/src/styles/layouts/_offer.scss

diff --git a/practice/practice-02/src/styles/abstracts/_mixins.scss b/practice/practice-02/src/styles/abstracts/_mixins.scss
index 52ff198..d5f760d 100644
--- a/practice/practice-02/src/styles/abstracts/_mixins.scss
+++ b/practice/practice-02/src/styles/abstracts/_mixins.scss
@@ -49,12 +49,15 @@
 }
 
 @mixin setAbsoluteAndLocation(
+  $absolute: false,
   $top: null,
   $left: null,
   $right: null,
   $bottom: null
 ) {
-  position: absolute;
+  @if $absolute {
+    position: absolute;
+  }
 
   @if $top != null {
     top: $top;
diff --git a/practice/practice-02/src/styles/abstracts/_variables.scss b/practice/practice-02/src/styles/abstracts/_variables.scss
index ea34243..1f37c80 100644
--- a/practice/practice-02/src/styles/abstracts/_variables.scss
+++ b/practice/practice-02/src/styles/abstracts/_variables.scss
@@ -1,8 +1,9 @@
 $primary-font: "Sofia Pro";
 $secondary-font: "Inter";
+$tertiary-font: "Poppins";
 
 // Color
-$black: #000;
+$black: #191919;
 $white: #fff;
 $gray: #686d77;
 $primary-color: #f54748;
diff --git a/practice/practice-02/src/styles/bases/_base.scss b/practice/practice-02/src/styles/bases/_base.scss
index 926044f..0be5e68 100644
--- a/practice/practice-02/src/styles/bases/_base.scss
+++ b/practice/practice-02/src/styles/bases/_base.scss
@@ -9,3 +9,7 @@
 .secondary-text {
   color: $secondary-color;
 }
+
+* {
+  line-height: normal;
+}
diff --git a/practice/practice-02/src/styles/bases/_typography.scss b/practice/practice-02/src/styles/bases/_typography.scss
index e337b24..889a589 100644
--- a/practice/practice-02/src/styles/bases/_typography.scss
+++ b/practice/practice-02/src/styles/bases/_typography.scss
@@ -34,6 +34,12 @@ $font-path: "../assets/fonts";
     url("#{$font-path}/inter.ttf") format("truetype");
 }
 
+@font-face {
+  font-family: "Poppins";
+  src: url("#{$font-path}/poppins-medium.woff2") format("woff2"),
+    url("#{$font-path}/poppins-medium.ttf") format("truetype");
+}
+
 * {
   font-family: $primary-font;
 }
diff --git a/practice/practice-02/src/styles/components/_logo.scss b/practice/practice-02/src/styles/components/_logo.scss
index 637f73e..aeb0333 100644
--- a/practice/practice-02/src/styles/components/_logo.scss
+++ b/practice/practice-02/src/styles/components/_logo.scss
@@ -1,5 +1,9 @@
+.logo {
+  @include size(100%, 100%);
+}
+
 .logo-wrapper {
-  @include size(121px, 78px);
+  @include size(97px, 62px);
 
   flex-shrink: 0;
 }
@@ -9,3 +13,9 @@
 
   display: inline-block;
 }
+
+@media screen and (min-width: 840px) {
+  .logo-wrapper {
+    @include size(121px, 78px);
+  }
+}
diff --git a/practice/practice-02/src/styles/layouts/_header.scss b/practice/practice-02/src/styles/layouts/_header.scss
index 4166abe..388638b 100644
--- a/practice/practice-02/src/styles/layouts/_header.scss
+++ b/practice/practice-02/src/styles/layouts/_header.scss
@@ -1,4 +1,16 @@
 .header {
+  @include setAbsoluteAndLocation(
+    $absolute: true,
+    $top: 0,
+    $right: 0,
+    $left: 0
+  );
+
+  max-width: 428px;
+  margin: auto;
+}
+
+.header-container {
   @include flex-container(space-between, $align-items: center);
 
   position: relative;
@@ -14,6 +26,10 @@
 
 @media screen and (min-width: 840px) {
   .header {
+    max-width: $max-width;
+  }
+
+  .header-container {
     padding-top: 32px;
     padding-left: 70px;
     padding-right: 61px;
diff --git a/practice/practice-02/src/styles/layouts/_navbar.scss b/practice/practice-02/src/styles/layouts/_navbar.scss
index ae65128..d349b76 100644
--- a/practice/practice-02/src/styles/layouts/_navbar.scss
+++ b/practice/practice-02/src/styles/layouts/_navbar.scss
@@ -60,6 +60,7 @@
     border: none;
     max-width: 600px;
     margin: unset;
+    background-color: transparent;
   }
 
   .nav-item {
diff --git a/practice/practice-02/src/styles/layouts/_offer.scss b/practice/practice-02/src/styles/layouts/_offer.scss
new file mode 100644
index 0000000..d699676
--- /dev/null
+++ b/practice/practice-02/src/styles/layouts/_offer.scss
@@ -0,0 +1,163 @@
+.offer {
+  &__container {
+    @include flex-container($justify-content: center, $flex-direction: column);
+
+    max-width: 380px;
+    margin: auto;
+    padding-top: 101px;
+    position: relative;
+  }
+
+  &__dot-background {
+    @include setAbsoluteAndLocation(true, $top: 168px, $left: 0px);
+
+    display: none;
+  }
+
+  &__heading {
+    font-size: $fs-x-lg;
+    text-align: center;
+    font-weight: 700;
+  }
+
+  &__description {
+    font-size: $fs-md;
+    font-weight: 400;
+    text-transform: capitalize;
+    text-align: center;
+    color: $black;
+    margin-top: 15px;
+    max-width: 856px;
+    margin-inline: auto;
+  }
+
+  &__card-list {
+    display: grid;
+    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($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($align-items: center, $flex-direction: column);
+  }
+
+  &__rate {
+    @include flex-container($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;
+  }
+}
+
+@media screen and (min-width: 840px) {
+  .offer {
+    padding-inline: 73px;
+    &__container {
+      max-width: 1440px;
+    }
+
+    &__food-image {
+      @include setAbsoluteAndLocation($top: 29px, $right: 55px);
+    }
+
+    &__card-list {
+      @include flex-container(
+        $align-items: center,
+        $gap: 18px,
+        $justify-content: center
+      );
+      row-gap: 30px;
+      flex-wrap: wrap;
+    }
+
+    &__price {
+      @include setAbsoluteAndLocation($top: 176px, $right: 70px);
+    }
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .offer__dot-background {
+    display: block;
+  }
+}
diff --git a/practice/practice-02/src/styles/layouts/_welcome.scss b/practice/practice-02/src/styles/layouts/_welcome.scss
index bacace0..e4d8b1d 100644
--- a/practice/practice-02/src/styles/layouts/_welcome.scss
+++ b/practice/practice-02/src/styles/layouts/_welcome.scss
@@ -7,6 +7,12 @@
   @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%
+  );
 
   // Start banner
   &__banner-container {
@@ -21,18 +27,18 @@
   }
 
   &__lines-background {
-    @include setAbsoluteAndLocation($top: -76px, $right: 0);
+    @include setAbsoluteAndLocation($absolute: true, $top: -76px, $right: 0);
     @include size(187px, 430px);
   }
 
   &__arrow-img-up {
-    @include setAbsoluteAndLocation($top: -15px, $right: 50px);
+    @include setAbsoluteAndLocation($absolute: true, $top: -15px, $right: 50px);
 
     @include size(43px, 215px);
   }
 
   &__mint-img {
-    @include setAbsoluteAndLocation($bottom: 100px, $right: 0);
+    @include setAbsoluteAndLocation($absolute: true, $bottom: 100px, $right: 0);
   }
   // End banner
 
@@ -51,7 +57,7 @@
   }
 
   &__orange-img-wrapper {
-    @include setAbsoluteAndLocation($top: 0, $right: 35px);
+    @include setAbsoluteAndLocation($absolute: true, $top: 0, $right: 35px);
   }
 
   &__text-box {
@@ -78,7 +84,7 @@
 
   &__head-arrow-container {
     @include size(13px, 7.3px);
-    @include setAbsoluteAndLocation($right: 107px);
+    @include setAbsoluteAndLocation($absolute: true, $right: 107px);
   }
 
   &__heading {
@@ -90,7 +96,11 @@
   }
 
   &__underline-img-container {
-    @include setAbsoluteAndLocation($bottom: -20px, $left: 0px);
+    @include setAbsoluteAndLocation(
+      $absolute: true,
+      $bottom: -20px,
+      $left: 0px
+    );
   }
 
   &__description {
@@ -144,8 +154,11 @@
   }
 
   &__action-container {
-    @include flex-container($gap: 31px);
+    @include flex-container($justify-content: space-between);
+
+    width: 100%;
     margin-top: 44px;
+    max-width: 376px;
   }
 
   &__watch-video-link {
@@ -155,12 +168,12 @@
 
     &:hover {
       .welcome__play-icon-wrapper {
-        width: 100%;
-        background-color: $secondary-color;
+        transform: scale(1.2);
+        transition: 0.2s;
       }
 
       .welcome__text-download-btn {
-        color: $white;
+        color: $primary-color;
       }
     }
   }
@@ -182,6 +195,7 @@
   &__text-download-btn {
     color: $gray;
     font-size: $fs-sm;
+    font-family: $tertiary-font;
     margin-left: 70px;
     transition: 0.5s;
     z-index: 1;
@@ -210,7 +224,7 @@
       $justify-content: space-between
     );
 
-    padding-top: 20px;
+    padding-top: 130px;
     width: 100%;
     max-width: $max-width;
 
@@ -259,6 +273,7 @@
 
     &__heading {
       font-size: $fs-xx-lg;
+      line-height: 125%;
     }
 
     &__underline-img-container {
@@ -269,8 +284,24 @@
       font-size: $fs-lg;
     }
 
+    &__watch-video-link:hover {
+      .welcome__play-icon-wrapper {
+        transform: unset;
+        width: 100%;
+        background-color: $secondary-color;
+      }
+
+      .welcome__text-download-btn {
+        color: $white;
+      }
+    }
+
     &__arrow-down-img-wrapper {
-      @include setAbsoluteAndLocation($top: -50px, $left: 220px);
+      @include setAbsoluteAndLocation(
+        $absolute: true,
+        $top: -50px,
+        $left: 220px
+      );
 
       display: block;
       transition: 0.2s;
@@ -282,7 +313,11 @@
 
     &__slider-container {
       display: block;
-      @include setAbsoluteAndLocation($bottom: -135px, $left: 65px);
+      @include setAbsoluteAndLocation(
+        $absolute: true,
+        $bottom: -135px,
+        $left: 65px
+      );
     }
 
     // End content
@@ -304,7 +339,7 @@
     }
 
     &__arrow-down-img-wrapper {
-      @include setAbsoluteAndLocation($top: -95px, $left: 230px);
+      @include setAbsoluteAndLocation($top: -75px, $left: 230px);
     }
   }
 }
diff --git a/practice/practice-02/src/styles/main.scss b/practice/practice-02/src/styles/main.scss
index 890d387..63c2ab3 100644
--- a/practice/practice-02/src/styles/main.scss
+++ b/practice/practice-02/src/styles/main.scss
@@ -16,3 +16,4 @@
 @import "./layouts/navbar";
 @import "./layouts/header";
 @import "./layouts/welcome";
+@import "./layouts/offer";

From f01c702e5b941bb7d8c05345a495ebc57de7770c Mon Sep 17 00:00:00 2001
From: Nezumi <loiphan2711@gmail.com>
Date: Sun, 23 Jul 2023 10:01:34 +0700
Subject: [PATCH 2/8] Update style for rosemary

---
 .../practice-02/src/styles/layouts/_offer.scss     | 14 ++++++++++++--
 .../practice-02/src/styles/layouts/_welcome.scss   |  1 +
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/practice/practice-02/src/styles/layouts/_offer.scss b/practice/practice-02/src/styles/layouts/_offer.scss
index d699676..df8cc1a 100644
--- a/practice/practice-02/src/styles/layouts/_offer.scss
+++ b/practice/practice-02/src/styles/layouts/_offer.scss
@@ -1,4 +1,8 @@
 .offer {
+  position: relative;
+  max-width: 428px;
+  margin-inline: auto;
+
   &__container {
     @include flex-container($justify-content: center, $flex-direction: column);
 
@@ -127,13 +131,19 @@
     color: $white;
     text-transform: capitalize;
   }
+
+  &__rosemary-container {
+    @include setAbsoluteAndLocation(true, $bottom: -120px, $right: 0);
+    z-index: 0;
+  }
 }
 
 @media screen and (min-width: 840px) {
   .offer {
-    padding-inline: 73px;
+    max-width: $max-width;
+
     &__container {
-      max-width: 1440px;
+      max-width: $max-width;
     }
 
     &__food-image {
diff --git a/practice/practice-02/src/styles/layouts/_welcome.scss b/practice/practice-02/src/styles/layouts/_welcome.scss
index e4d8b1d..007faa7 100644
--- a/practice/practice-02/src/styles/layouts/_welcome.scss
+++ b/practice/practice-02/src/styles/layouts/_welcome.scss
@@ -190,6 +190,7 @@
     background-color: $white;
     box-shadow: 0 40px 50px 3px rgba($color: $primary-color, $alpha: 0.5);
     transition: width 0.5s;
+    line-height: 100%;
   }
 
   &__text-download-btn {

From a2230be4bac9505944a0e8349ace152d5bb991dc Mon Sep 17 00:00:00 2001
From: Nezumi <loiphan2711@gmail.com>
Date: Sun, 23 Jul 2023 20:33:32 +0700
Subject: [PATCH 3/8] Add style when hover on order button

---
 practice/practice-02/src/styles/layouts/_offer.scss | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/practice/practice-02/src/styles/layouts/_offer.scss b/practice/practice-02/src/styles/layouts/_offer.scss
index df8cc1a..d8a86cb 100644
--- a/practice/practice-02/src/styles/layouts/_offer.scss
+++ b/practice/practice-02/src/styles/layouts/_offer.scss
@@ -126,10 +126,11 @@
     @include setAbsoluteAndLocation(true, $bottom: 0px);
 
     padding: 10px 20px;
-    background-color: $primary-color;
-    border-radius: 100px;
-    color: $white;
     text-transform: capitalize;
+
+    &:hover {
+      background-color: $secondary-color;
+    }
   }
 
   &__rosemary-container {

From 488ff7d4e21d53f8a59c99b3a0c00c18bce47165 Mon Sep 17 00:00:00 2001
From: Loi Phan <phanhuuloi15@gmail.com>
Date: Mon, 24 Jul 2023 08:33:43 +0700
Subject: [PATCH 4/8] Seperate the card item from offers section style

---
 .../src/styles/components/_card-item.scss     | 84 ++++++++++++++++
 .../src/styles/layouts/_offer.scss            | 99 ++-----------------
 practice/practice-02/src/styles/main.scss     |  1 +
 3 files changed, 92 insertions(+), 92 deletions(-)
 create mode 100644 practice/practice-02/src/styles/components/_card-item.scss

diff --git a/practice/practice-02/src/styles/components/_card-item.scss b/practice/practice-02/src/styles/components/_card-item.scss
new file mode 100644
index 0000000..2c99b45
--- /dev/null
+++ b/practice/practice-02/src/styles/components/_card-item.scss
@@ -0,0 +1,84 @@
+.card-item {
+  @include flex-container($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($align-items: center, $flex-direction: column);
+}
+
+.rate {
+  @include flex-container($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;
+  text-transform: capitalize;
+
+  &:hover {
+    background-color: $secondary-color;
+  }
+}
diff --git a/practice/practice-02/src/styles/layouts/_offer.scss b/practice/practice-02/src/styles/layouts/_offer.scss
index d8a86cb..797bd3d 100644
--- a/practice/practice-02/src/styles/layouts/_offer.scss
+++ b/practice/practice-02/src/styles/layouts/_offer.scss
@@ -48,91 +48,6 @@
     }
   }
 
-  &__card-item {
-    @include flex-container($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($align-items: center, $flex-direction: column);
-  }
-
-  &__rate {
-    @include flex-container($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;
-    text-transform: capitalize;
-
-    &:hover {
-      background-color: $secondary-color;
-    }
-  }
-
   &__rosemary-container {
     @include setAbsoluteAndLocation(true, $bottom: -120px, $right: 0);
     z-index: 0;
@@ -147,10 +62,6 @@
       max-width: $max-width;
     }
 
-    &__food-image {
-      @include setAbsoluteAndLocation($top: 29px, $right: 55px);
-    }
-
     &__card-list {
       @include flex-container(
         $align-items: center,
@@ -160,10 +71,14 @@
       row-gap: 30px;
       flex-wrap: wrap;
     }
+  }
 
-    &__price {
-      @include setAbsoluteAndLocation($top: 176px, $right: 70px);
-    }
+  .price {
+    @include setAbsoluteAndLocation($top: 176px, $right: 70px);
+  }
+
+  .food-image {
+    @include setAbsoluteAndLocation($top: 29px, $right: 55px);
   }
 }
 
diff --git a/practice/practice-02/src/styles/main.scss b/practice/practice-02/src/styles/main.scss
index 63c2ab3..941a339 100644
--- a/practice/practice-02/src/styles/main.scss
+++ b/practice/practice-02/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";

From a82faf709eea73a2a8cc083da46aae2c10d9e9ad Mon Sep 17 00:00:00 2001
From: Loi Phan <phanhuuloi15@gmail.com>
Date: Tue, 25 Jul 2023 09:26:48 +0700
Subject: [PATCH 5/8] Fix style for offers UI

---
 .../src/styles/abstracts/_mixins.scss         |  6 +++++-
 .../src/styles/components/_card-item.scss     | 14 ++++++-------
 .../src/styles/layouts/_header.scss           |  4 ++--
 .../src/styles/layouts/_navbar.scss           |  2 +-
 .../src/styles/layouts/_offer.scss            | 21 ++++++++-----------
 5 files changed, 24 insertions(+), 23 deletions(-)

diff --git a/practice/practice-02/src/styles/abstracts/_mixins.scss b/practice/practice-02/src/styles/abstracts/_mixins.scss
index d5f760d..9771080 100644
--- a/practice/practice-02/src/styles/abstracts/_mixins.scss
+++ b/practice/practice-02/src/styles/abstracts/_mixins.scss
@@ -15,12 +15,16 @@
 }
 
 @mixin flex-container(
+  $flex: false,
   $justify-content: null,
   $flex-direction: null,
   $align-items: null,
   $gap: null
 ) {
-  display: flex;
+  @if $flex != false {
+    display: flex;
+  }
+
   @if $justify-content != null {
     justify-content: $justify-content;
   }
diff --git a/practice/practice-02/src/styles/components/_card-item.scss b/practice/practice-02/src/styles/components/_card-item.scss
index 2c99b45..a60ea48 100644
--- a/practice/practice-02/src/styles/components/_card-item.scss
+++ b/practice/practice-02/src/styles/components/_card-item.scss
@@ -1,5 +1,5 @@
 .card-item {
-  @include flex-container($align-items: center, $flex-direction: column);
+  @include flex-container(true, $align-items: center, $flex-direction: column);
   @include size(auto, 516px);
 
   position: relative;
@@ -12,7 +12,7 @@
 }
 
 .price {
-  @include setAbsoluteAndLocation(true, $top: 176px, $right: 110px);
+  @include setAbsoluteAndLocation(true, $top: 176px, $right: 70px);
   @include size(52px, 52px);
 
   color: $white;
@@ -27,11 +27,11 @@
 .content-card {
   @include setAbsoluteAndLocation(true, $bottom: 60px);
   @include size(100%, auto);
-  @include flex-container($align-items: center, $flex-direction: column);
+  @include flex-container(true, $align-items: center, $flex-direction: column);
 }
 
 .rate {
-  @include flex-container($align-items: center, $gap: 10px);
+  @include flex-container(true, $align-items: center, $gap: 10px);
 }
 
 .avatar-container {
@@ -40,17 +40,17 @@
 }
 
 .avatar {
-  &-1 {
+  &-0 {
     @include setAbsoluteAndLocation(true, $left: 38px);
     z-index: 2;
   }
 
-  &-2 {
+  &-1 {
     @include setAbsoluteAndLocation(true, $left: 19px);
     z-index: 1;
   }
 
-  &-3 {
+  &-2 {
     @include setAbsoluteAndLocation(true, $left: 0);
   }
 }
diff --git a/practice/practice-02/src/styles/layouts/_header.scss b/practice/practice-02/src/styles/layouts/_header.scss
index 388638b..528e34d 100644
--- a/practice/practice-02/src/styles/layouts/_header.scss
+++ b/practice/practice-02/src/styles/layouts/_header.scss
@@ -11,7 +11,7 @@
 }
 
 .header-container {
-  @include flex-container(space-between, $align-items: center);
+  @include flex-container(true, space-between, $align-items: center);
 
   position: relative;
   max-width: 428px;
@@ -21,7 +21,7 @@
 }
 
 .header-content {
-  @include flex-container(space-between);
+  @include flex-container(true, space-between);
 }
 
 @media screen and (min-width: 840px) {
diff --git a/practice/practice-02/src/styles/layouts/_navbar.scss b/practice/practice-02/src/styles/layouts/_navbar.scss
index d349b76..3194837 100644
--- a/practice/practice-02/src/styles/layouts/_navbar.scss
+++ b/practice/practice-02/src/styles/layouts/_navbar.scss
@@ -53,7 +53,7 @@
 
   .nav-list {
     @include size(auto, auto);
-    @include flex-container(space-between, column);
+    @include flex-container(true, space-between, column);
 
     position: unset;
     flex-direction: row;
diff --git a/practice/practice-02/src/styles/layouts/_offer.scss b/practice/practice-02/src/styles/layouts/_offer.scss
index 797bd3d..a797e66 100644
--- a/practice/practice-02/src/styles/layouts/_offer.scss
+++ b/practice/practice-02/src/styles/layouts/_offer.scss
@@ -4,7 +4,11 @@
   margin-inline: auto;
 
   &__container {
-    @include flex-container($justify-content: center, $flex-direction: column);
+    @include flex-container(
+      true,
+      $justify-content: center,
+      $flex-direction: column
+    );
 
     max-width: 380px;
     margin: auto;
@@ -36,10 +40,11 @@
   }
 
   &__card-list {
-    display: grid;
+    @include flex-container(true, $gap: 70px);
+
+    padding-inline: 35px;
+    flex-wrap: nowrap;
     padding-top: 65px;
-    grid-auto-flow: column;
-    grid-auto-columns: 100%;
     overflow-x: auto;
     -ms-overflow-style: none;
     scrollbar-width: none;
@@ -72,14 +77,6 @@
       flex-wrap: wrap;
     }
   }
-
-  .price {
-    @include setAbsoluteAndLocation($top: 176px, $right: 70px);
-  }
-
-  .food-image {
-    @include setAbsoluteAndLocation($top: 29px, $right: 55px);
-  }
 }
 
 @media screen and (min-width: 1200px) {

From befc640757ee6a1ada8fb0b61a35917b780321b4 Mon Sep 17 00:00:00 2001
From: Loi Phan <phanhuuloi15@gmail.com>
Date: Tue, 25 Jul 2023 11:17:15 +0700
Subject: [PATCH 6/8] Fix comments

---
 practice/practice-02/src/includes/mixins.pug  |  6 +--
 .../src/styles/abstracts/_mixins.scss         |  2 +-
 .../src/styles/components/_card-item.scss     | 25 ++++++------
 .../src/styles/layouts/_header.scss           |  2 +-
 .../src/styles/layouts/_offer.scss            |  7 +++-
 .../src/styles/layouts/_welcome.scss          | 38 +++++++++++--------
 6 files changed, 45 insertions(+), 35 deletions(-)

diff --git a/practice/practice-02/src/includes/mixins.pug b/practice/practice-02/src/includes/mixins.pug
index f6e01ac..4b47151 100644
--- a/practice/practice-02/src/includes/mixins.pug
+++ b/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 + ")"
diff --git a/practice/practice-02/src/styles/abstracts/_mixins.scss b/practice/practice-02/src/styles/abstracts/_mixins.scss
index 9771080..ea14f18 100644
--- a/practice/practice-02/src/styles/abstracts/_mixins.scss
+++ b/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,
diff --git a/practice/practice-02/src/styles/components/_card-item.scss b/practice/practice-02/src/styles/components/_card-item.scss
index a60ea48..899d44f 100644
--- a/practice/practice-02/src/styles/components/_card-item.scss
+++ b/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;
diff --git a/practice/practice-02/src/styles/layouts/_header.scss b/practice/practice-02/src/styles/layouts/_header.scss
index 528e34d..7bf1d7c 100644
--- a/practice/practice-02/src/styles/layouts/_header.scss
+++ b/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,
diff --git a/practice/practice-02/src/styles/layouts/_offer.scss b/practice/practice-02/src/styles/layouts/_offer.scss
index a797e66..f29aa7c 100644
--- a/practice/practice-02/src/styles/layouts/_offer.scss
+++ b/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;
     }
diff --git a/practice/practice-02/src/styles/layouts/_welcome.scss b/practice/practice-02/src/styles/layouts/_welcome.scss
index c6fcf80..703312c 100644
--- a/practice/practice-02/src/styles/layouts/_welcome.scss
+++ b/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);
     }
   }
 }

From 3a0032ca4464f298048be21616eeee02d527dce9 Mon Sep 17 00:00:00 2001
From: Loi Phan <phanhuuloi15@gmail.com>
Date: Tue, 25 Jul 2023 11:25:45 +0700
Subject: [PATCH 7/8] Format the file

---
 practice/practice-02/src/styles/layouts/_welcome.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/practice/practice-02/src/styles/layouts/_welcome.scss b/practice/practice-02/src/styles/layouts/_welcome.scss
index 703312c..81d5d11 100644
--- a/practice/practice-02/src/styles/layouts/_welcome.scss
+++ b/practice/practice-02/src/styles/layouts/_welcome.scss
@@ -12,6 +12,7 @@
 
   &__container {
     @include flex-container(true, center, column);
+
     margin: auto;
     max-width: 428px;
     padding-top: 117px;
@@ -194,6 +195,7 @@
 
   &__play-icon-wrapper {
     @include size(12px, 17px);
+
     position: absolute;
     padding: 17.5px 20px;
     border-radius: 50px;
@@ -250,12 +252,14 @@
 
     &__lines-background {
       @include set-absolute-and-location($top: -150px, $right: 0px);
+
       @include size(313px, 718px);
     }
 
     &__arrow-img-up {
       @include size(117px, 315px);
       @include set-absolute-and-location($top: -40px, $right: 5px);
+
       transition: 0.2s;
     }
 

From 965e221714cbb8fc0cb87a664ac8e92904fecd3f Mon Sep 17 00:00:00 2001
From: Loi Phan <phanhuuloi15@gmail.com>
Date: Tue, 25 Jul 2023 15:18:13 +0700
Subject: [PATCH 8/8] Format code

---
 practice/practice-02/src/styles/layouts/_welcome.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/practice/practice-02/src/styles/layouts/_welcome.scss b/practice/practice-02/src/styles/layouts/_welcome.scss
index 81d5d11..cdb218e 100644
--- a/practice/practice-02/src/styles/layouts/_welcome.scss
+++ b/practice/practice-02/src/styles/layouts/_welcome.scss
@@ -40,7 +40,6 @@
       $top: -15px,
       $right: 50px
     );
-
     @include size(43px, 215px);
   }
 
@@ -252,7 +251,6 @@
 
     &__lines-background {
       @include set-absolute-and-location($top: -150px, $right: 0px);
-
       @include size(313px, 718px);
     }
 
@@ -278,6 +276,7 @@
     // Start content
     &__content {
       @include size(auto, auto);
+
       padding-left: 70px;
       padding-right: 0px;
       max-width: 560px;
@@ -285,6 +284,7 @@
 
     &__orange-img-wrapper {
       @include set-absolute-and-location($top: 170px, $right: -50px);
+
       transition: 0.2s;
     }