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] 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";