Merge pull request #14 from Nez27/feature/offers-style

Implement style for offers UI.

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

@@ -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;
   }
@@ -48,7 +52,7 @@
   }
 }
 
-@mixin setAbsoluteAndLocation(
+@mixin set-absolute-and-location(
   $absolute: false,
   $top: null,
   $left: null,

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

@@ -3,7 +3,7 @@ $secondary-font: "Inter";
 $tertiary-font: "Poppins";
 
 // Color
-$black: #000;
+$black: #191919;
 $white: #fff;
 $gray: #686d77;
 $primary-color: #f54748;

practice/practice-02/src/styles/bases/_base.scss

@@ -9,3 +9,7 @@
 .secondary-text {
   color: $secondary-color;
 }
+
+* {
+  line-height: normal;
+}

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

@@ -0,0 +1,87 @@
+.card-item {
+  @include flex-container(true, $align-items: center, $flex-direction: column);
+  @include size(auto, 516px);
+
+  position: relative;
+}
+
+.food-image {
+  @include set-absolute-and-location(true, $top: 29px);
+
+  margin: auto;
+}
+
+.price {
+  @include set-absolute-and-location(true, $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 {
+  @include set-absolute-and-location(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 {
+  @include size(74px, 38px);
+
+  position: relative;
+}
+
+.avatar {
+  &:first-child {
+    @include set-absolute-and-location(true, $left: 38px);
+
+    z-index: 2;
+  }
+
+  &:nth-child(2) {
+    @include set-absolute-and-location(true, $left: 19px);
+
+    z-index: 1;
+  }
+
+  &:last-child {
+    @include set-absolute-and-location(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 set-absolute-and-location(true, $bottom: 0px);
+
+  padding: 10px 20px;
+  text-transform: capitalize;
+
+  &:hover {
+    background-color: $secondary-color;
+  }
+}

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,
@@ -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) {

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;

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

@@ -0,0 +1,89 @@
+.offer {
+  position: relative;
+  max-width: 428px;
+  margin-inline: auto;
+
+  &__container {
+    @include flex-container(
+      true,
+      $justify-content: center,
+      $flex-direction: column
+    );
+
+    max-width: 380px;
+    margin: auto;
+    padding-top: 101px;
+    position: relative;
+  }
+
+  &__dot-background {
+    @include set-absolute-and-location(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 {
+    @include flex-container(true, $gap: 70px);
+
+    padding-inline: 35px;
+    flex-wrap: nowrap;
+    padding-top: 65px;
+    overflow-x: auto;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  &__rosemary-container {
+    @include set-absolute-and-location(true, $bottom: -120px, $right: 0);
+
+    z-index: 0;
+  }
+}
+
+@media screen and (min-width: 840px) {
+  .offer {
+    max-width: $max-width;
+
+    &__container {
+      max-width: $max-width;
+    }
+
+    &__card-list {
+      @include flex-container(
+        $align-items: center,
+        $gap: 18px,
+        $justify-content: center
+      );
+
+      row-gap: 30px;
+      flex-wrap: wrap;
+    }
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .offer__dot-background {
+    display: block;
+  }
+}

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

@@ -11,7 +11,8 @@
   );
 
   &__container {
-    @include flex-container(center, column);
+    @include flex-container(true, center, column);
+
     margin: auto;
     max-width: 428px;
     padding-top: 117px;
@@ -19,7 +20,7 @@
   // Start banner
   &__banner-container {
     @include size(428px, auto);
-    @include flex-container(center, column);
+    @include flex-container(true, center, column);
 
     position: relative;
   }
@@ -29,24 +30,31 @@
   }
 
   &__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
 
   // Start content
   &__content {
-    @include flex-container($flex-direction: column);
+    @include flex-container(true, $flex-direction: column);
     @include size(calc(428px - 48px), auto);
 
     position: relative;
@@ -59,11 +67,11 @@
   }
 
   &__orange-img-wrapper {
-    @include setAbsoluteAndLocation($absolute: true, $top: 0, $right: 35px);
+    @include set-absolute-and-location($absolute: true, $top: 0, $right: 35px);
   }
 
   &__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;
@@ -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
@@ -114,7 +122,7 @@
   }
 
   &__search-form {
-    @include flex-container();
+    @include flex-container(true);
 
     margin-top: 32px;
     border-radius: 100px;
@@ -156,7 +164,7 @@
   }
 
   &__action-container {
-    @include flex-container($justify-content: space-between);
+    @include flex-container(true, $justify-content: space-between);
 
     width: 100%;
     margin-top: 44px;
@@ -164,7 +172,7 @@
   }
 
   &__watch-video-link {
-    @include flex-container($align-items: center, $gap: 21px);
+    @include flex-container(true, $align-items: center, $gap: 21px);
 
     position: relative;
 
@@ -186,12 +194,14 @@
 
   &__play-icon-wrapper {
     @include size(12px, 17px);
+
     position: absolute;
     padding: 17.5px 20px;
     border-radius: 50px;
     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 {
@@ -240,13 +250,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;
     }
 
@@ -265,13 +276,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;
     }
 
@@ -281,7 +294,7 @@
     }
 
     &__underline-img-container {
-      @include setAbsoluteAndLocation($bottom: -25px, $left: 8px);
+      @include set-absolute-and-location($bottom: -25px, $left: 8px);
     }
 
     &__description {
@@ -301,7 +314,7 @@
     }
 
     &__arrow-down-img-wrapper {
-      @include setAbsoluteAndLocation(
+      @include set-absolute-and-location(
         $absolute: true,
         $top: -50px,
         $left: 220px
@@ -317,7 +330,7 @@
 
     &__slider-container {
       display: block;
-      @include setAbsoluteAndLocation(
+      @include set-absolute-and-location(
         $absolute: true,
         $bottom: -135px,
         $left: 65px
@@ -335,15 +348,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);
     }
   }
 }

practice/practice-02/src/styles/main.scss

@@ -11,8 +11,10 @@
 @import "./components/button";
 @import "./components/toggle-menu";
 @import "./components/logo";
+@import "./components/card-item";
 
 // Layouts
 @import "./layouts/navbar";
 @import "./layouts/header";
 @import "./layouts/welcome";
+@import "./layouts/offer";