Update code

src/includes/mixins.pug

@@ -0,0 +1,30 @@
+- var values = [1, 2, 3];
+
+mixin cardFoodItem(itemFood, price, ratePoint, foodName, foodDescription)
+  .offer__card-item
+    img.offer__card-img(
+      src=offer_img_path + "item-card.png",
+      alt="Item card image"
+    )
+    img.offer__food-image(
+      src=offer_img_path + "food-" + itemFood + ".png",
+      alt="Food " + itemFood + " image"
+    )
+    span.offer__price= price + "$"
+    .offer__content-card
+      .offer__rate
+        .offer__avatar-container
+          each val in values 
+            img(
+              src=offer_img_path + "avatar-" + val + "-item-" + itemFood + ".png",
+              alt="Avatar user rate",
+              class="offer__avatar-" + val
+            )
+        .offer__star-container
+          img(src=offer_img_path + "star.png", alt="Star image")
+        span.offer__rate-point= "(" + ratePoint + ")"
+      span.offer__food-name= foodName
+      p.offer__food-description= foodDescription
+    a.offer__order-btn Order now
+
+//- mixin listCategory(iconUrl, content)

src/index.pug

@@ -1,15 +1,25 @@
+include ./includes/mixins
+
 doctype html
 html(lang="en")
   head
     meta(charset="UTF-8")
     meta(name="viewport", content="width=device-width, initial-scale=1.0")
     link(rel="stylesheet", href="./styles/main.scss")
+    link(
+      rel="icon",
+      type="image/x-icon",
+      href="./assets/images/favicon-16x16.png"
+    )
     title Food Hut
   body
-    header.header.flex
+    header.header
-      .logo-wrapper
+      .header-container
-        a.logo-link(href="javascript:void(0)")
+        .logo-wrapper
-          img.logo(src="./assets/images/logo.svg", alt="Food Hut logo")
+          a.logo-link(href="javascript:void(0)")
-      .header-content.flex
+            img.logo(src="./assets/images/logo.svg", alt="Food Hut logo")
-        include layouts/nav-menu
+        .header-content
+          include layouts/nav-menu
     include layouts/welcome
+    include layouts/offer
+    include layouts/service

src/layouts/offer.pug

@@ -0,0 +1,26 @@
+- var offer_img_path = "./assets/images/offer/";
+
+section.offer
+  .offer__container
+    .offer__dot-background
+      img(
+        src=offer_img_path + "dot-background.png",
+        alt="Dot background image"
+      )
+    h2.offer__heading Today
+      = " "
+      span.primary-text Special
+      = " 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")
+  .offer__rosemary-container
+    picture
+      source(
+        media="(min-width: 840px)",
+        srcset=offer_img_path + "rosemary-desktop.png"
+      )
+      img(src=offer_img_path + "rosemary-mobile.png", alt="Rosemary image")

src/layouts/service.pug

@@ -0,0 +1,54 @@
+- var service_img_path = "./assets/images/service/";
+- var list_1 = [{icon : 1, content: "Online order"}, {icon : 3, content: "Pre-Reservation"}, {icon : 3, content: "Super chef"}];
+- var list_2 = [{icon : 2, content: "24/7 Service"}, {icon : 3, content: "Oragonized foodhut place"}, {icon : 3, content: "Clean Kitchen"}];
+
+section.service
+  .service__container
+    .service__background-color
+    .service__img-container
+      picture
+        source(
+          media="(min-width: 1200px)",
+          srcset=service_img_path + "background-desktop.png"
+        )
+        img.service__background-img(
+          src=service_img_path + "background-mobile.png",
+          alt="Background image"
+        )
+      picture
+        source(
+          media="(min-width: 1200px)",
+          srcset=service_img_path + "main-character-desktop.png"
+        )
+        img.service__main-img(
+          src=service_img_path + "main-character-mobile.png",
+          alt="Main character image"
+        )
+      picture
+        source(
+          media="(min-width: 1200px)",
+          srcset=service_img_path + "vegetable-desktop.png"
+        )
+        img.service__vegetable-img(
+          src=service_img_path + "vegetable-mobile.png",
+          alt="Vegetable background image"
+        )
+    .service__content
+      h2.service__heading We are
+        = " "
+        span.primary-text more
+        = " than "
+        span.secondary-text multiple
+        = " service"
+      p.service__description This is a type of resturent which typically serves food and drink, in addition to light refreshments such as baked goods or snacks. The term comes frome the rench word meaning food
+      .service__category
+        each item in [list_1, list_2]
+          .service__category-list
+            each val in item
+              .service__category-item
+                img.service__icon-category(
+                  src=service_img_path + "icon-" + val.icon + ".png",
+                  alt="Icon category"
+                )
+                span.service__name-category= val.content
+      a.service__btn.btn(href="javascript:void(0)") About us

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 {
+    display: flex;
+  }
+
   @if $justify-content != null {
     justify-content: $justify-content;
   }
@@ -49,12 +53,15 @@
 }
 
 @mixin setAbsoluteAndLocation(
+  $absolute: false,
   $top: null,
   $left: null,
   $right: null,
   $bottom: null
 ) {
-  position: absolute;
+  @if $absolute {
+    position: absolute;
+  }
 
   @if $top != null {
     top: $top;

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;

src/styles/bases/_base.scss

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

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;
 }

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);
+  }
+}

src/styles/layouts/_header.scss

@@ -1,5 +1,17 @@
 .header {
-  @include flex-container(space-between, $align-items: center);
+  @include setAbsoluteAndLocation(
+    $absolute: true,
+    $top: 0,
+    $right: 0,
+    $left: 0
+  );
+
+  max-width: 428px;
+  margin: auto;
+}
+
+.header-container {
+  @include flex-container(true, space-between, $align-items: center);
 
   position: relative;
   max-width: 428px;
@@ -9,11 +21,15 @@
 }
 
 .header-content {
-  @include flex-container(space-between);
+  @include flex-container(true, space-between);
 }
 
 @media screen and (min-width: 840px) {
   .header {
+    max-width: $max-width;
+  }
+
+  .header-container {
     padding-top: 32px;
     padding-left: 70px;
     padding-right: 61px;

src/styles/layouts/_navbar.scss

@@ -53,13 +53,14 @@
 
   .nav-list {
     @include size(auto, auto);
-    @include flex-container(space-between, column);
+    @include flex-container(true, space-between, column);
 
     position: unset;
     flex-direction: row;
     border: none;
     max-width: 600px;
     margin: unset;
+    background-color: transparent;
   }
 
   .nav-item {

src/styles/layouts/_offer.scss

@@ -0,0 +1,186 @@
+.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 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(
+      true,
+      $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(
+      true,
+      $align-items: center,
+      $flex-direction: column
+    );
+  }
+
+  &__rate {
+    @include flex-container(true, $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;
+  }
+
+  &__rosemary-container {
+    @include setAbsoluteAndLocation(true, $bottom: -120px, $right: 0);
+    z-index: 0;
+  }
+}
+
+@media screen and (min-width: 840px) {
+  .offer {
+    max-width: $max-width;
+
+    &__container {
+      max-width: $max-width;
+    }
+
+    &__food-image {
+      @include setAbsoluteAndLocation($top: 29px, $right: 55px);
+    }
+
+    &__card-list {
+      @include flex-container(
+        true,
+        $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;
+  }
+}

src/styles/layouts/_service.scss

@@ -0,0 +1,167 @@
+.service {
+  max-width: 428px;
+  margin-inline: auto;
+
+  &__container {
+    @include size(auto, auto);
+
+    position: relative;
+  }
+
+  &__background-color {
+    @include setAbsoluteAndLocation(true, $top: 200px, $left: 0);
+    @include size(100%, 50%);
+    background: linear-gradient(
+      180deg,
+      rgba(253, 197, 94, 0.01) 0%,
+      rgba(253, 197, 94, 0.06) 50%,
+      rgba(253, 197, 94, 0) 100%
+    );
+  }
+
+  &__img-container {
+    @include size(auto, 436.81px);
+
+    position: relative;
+    padding-top: 80px;
+  }
+
+  &__background-img {
+    @include setAbsoluteAndLocation(true, $top: 65px, $left: 0);
+  }
+
+  &__main-img {
+    @include setAbsoluteAndLocation(true, $top: 60px, $left: 35px);
+  }
+
+  &__vegetable-img {
+    @include setAbsoluteAndLocation(true, $bottom: 0, $left: 50px);
+  }
+
+  &__content {
+    padding-inline: 24px;
+
+    z-index: 1;
+  }
+
+  &__heading {
+    margin-top: 30px;
+    font-size: $fs-x-lg;
+    line-height: 129.9%;
+    font-weight: 700;
+    max-width: 380px;
+    margin-inline: auto;
+  }
+
+  &__description {
+    margin-top: 29px;
+    max-width: 381px;
+    margin-inline: auto;
+    font-size: $fs-md;
+  }
+
+  &__category {
+    @include flex-container(true, $flex-direction: column, $gap: 41px);
+
+    margin-top: 81px;
+    &-list {
+      @include flex-container(true, $flex-direction: column, $gap: 30px);
+    }
+  }
+
+  &__category-item {
+    @include flex-container(true, $align-items: center, $gap: 10px);
+  }
+
+  &__name-category {
+    font-size: $fs-md;
+  }
+
+  &__btn {
+    display: block;
+    margin-top: 43px;
+    max-width: 74px;
+    text-transform: capitalize;
+    padding: 10px 20px;
+
+    &:hover {
+      background-color: $secondary-color;
+    }
+  }
+}
+
+@media screen and (min-width: 840px) {
+  .service {
+    max-width: $max-width;
+    margin-inline: auto;
+
+    &__container {
+      @include flex-container(true, $align-items: center);
+
+      padding-top: 200px;
+    }
+
+    &__img-container {
+      @include size($width: 100%);
+
+      max-width: 460px;
+    }
+
+    &__background-img {
+      @include setAbsoluteAndLocation(true, $top: 35px, $left: 0);
+    }
+
+    &__main-img {
+      @include setAbsoluteAndLocation(true, $top: 30px, $left: 35px);
+    }
+
+    &__vegetable-img {
+      @include setAbsoluteAndLocation(true, $bottom: 30, $left: 50px);
+    }
+
+    &__heading {
+      max-width: 452px;
+      margin: unset;
+    }
+
+    &__description {
+      max-width: 690px;
+    }
+
+    &__category {
+      flex-direction: row;
+      margin-top: 29px;
+    }
+  }
+}
+
+@media screen and (min-width: 1200px) {
+  .service {
+    &__container {
+      @include flex-container($align-items: center, $gap: 150px);
+    }
+    &__background-color {
+      display: none;
+    }
+
+    &__img-container {
+      @include size(100%, 619px);
+    }
+
+    &__background-img {
+      @include setAbsoluteAndLocation(true, $top: -200px, $left: 0);
+    }
+
+    &__main-img {
+      @include setAbsoluteAndLocation(true, $top: 70px, $left: 70px);
+    }
+
+    &__vegetable-img {
+      @include setAbsoluteAndLocation(true, $bottom: 10, $left: 95px);
+    }
+
+    &__content {
+      padding-top: 220px;
+    }
+  }
+}

src/styles/layouts/_welcome.scss

@@ -4,14 +4,20 @@
 }
 
 .welcome {
-  @include flex-container(center, column);
+  @include flex-container(true, 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 {
     @include size(428px, auto);
-    @include flex-container(center, column);
+    @include flex-container(true, center, column);
 
     position: relative;
   }
@@ -21,24 +27,24 @@
   }
 
   &__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
 
   // Start content
   &__content {
-    @include flex-container($flex-direction: column);
+    @include flex-container(true, $flex-direction: column);
     @include size(calc(428px - 48px), auto);
 
     position: relative;
@@ -51,11 +57,11 @@
   }
 
   &__orange-img-wrapper {
-    @include setAbsoluteAndLocation($top: 0, $right: 35px);
+    @include setAbsoluteAndLocation($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;
@@ -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 {
@@ -102,7 +112,7 @@
   }
 
   &__search-form {
-    @include flex-container();
+    @include flex-container(true);
 
     margin-top: 32px;
     border-radius: 100px;
@@ -144,23 +154,26 @@
   }
 
   &__action-container {
-    @include flex-container($gap: 31px);
+    @include flex-container(true, $justify-content: space-between);
+
+    width: 100%;
     margin-top: 44px;
+    max-width: 376px;
   }
 
   &__watch-video-link {
-    @include flex-container($align-items: center, $gap: 21px);
+    @include flex-container(true, $align-items: center, $gap: 21px);
 
     position: relative;
 
     &:hover {
       .welcome__play-icon-wrapper {
-        width: 100%;
+        transform: scale(1.2);
-        background-color: $secondary-color;
+        transition: 0.2s;
       }
 
       .welcome__text-download-btn {
-        color: $white;
+        color: $primary-color;
       }
     }
   }
@@ -177,11 +190,13 @@
     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 {
     color: $gray;
     font-size: $fs-sm;
+    font-family: $tertiary-font;
     margin-left: 70px;
     transition: 0.5s;
     z-index: 1;
@@ -210,7 +225,7 @@
       $justify-content: space-between
     );
 
-    padding-top: 20px;
+    padding-top: 130px;
     width: 100%;
     max-width: $max-width;
 
@@ -259,6 +274,7 @@
 
     &__heading {
       font-size: $fs-xx-lg;
+      line-height: 125%;
     }
 
     &__underline-img-container {
@@ -269,8 +285,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 +314,11 @@
 
     &__slider-container {
       display: block;
-      @include setAbsoluteAndLocation($bottom: -135px, $left: 65px);
+      @include setAbsoluteAndLocation(
+        $absolute: true,
+        $bottom: -135px,
+        $left: 65px
+      );
     }
 
     // End content
@@ -304,7 +340,7 @@
     }
 
     &__arrow-down-img-wrapper {
-      @include setAbsoluteAndLocation($top: -95px, $left: 230px);
+      @include setAbsoluteAndLocation($top: -75px, $left: 230px);
     }
   }
 }

src/styles/main.scss

@@ -16,3 +16,5 @@
 @import "./layouts/navbar";
 @import "./layouts/header";
 @import "./layouts/welcome";
+@import "./layouts/offer";
+@import "./layouts/service";