Implememnt css code

practice/practice-02/src/layouts/welcome.pug

@@ -3,16 +3,22 @@
 section.welcome
   .welcome__banner
     .welcome__banner-container
-      img(
+      img.welcome__banner-image(
         src=welcome_img_path + "welcome-image-mobile.png",
         alt="Welcome banner image"
       )
-      img(
+      img.welcome__lines-background(
         src=welcome_img_path + "lines-background-mobile.png",
         alt="Lines background"
       )
-      img(src=welcome_img_path + "arrow-mobile.png", alt="Arrow image")
+      img.welcome__arrow-image(
-      img(src=welcome_img_path + "mint.png", alt="Mint image")
+        src=welcome_img_path + "arrow-mobile.png",
+        alt="Arrow image"
+      )
+      img.welcome__mint-image(
+        src=welcome_img_path + "mint.png",
+        alt="Mint image"
+      )
   .welcome__content
     .welcome__orange-image-wrapper
       img(src=welcome_img_path + "orange.png", alt="Orange background image")
@@ -22,15 +28,19 @@ section.welcome
           src=welcome_img_path + "love-icon.png",
           alt="Love icon"
         )
+      .welcome__head-arrow-container
+        img(src=welcome_img_path + "head-arrow.png", alt="Head arrow image")
       p.welcome__text-box-content People Trust us
     h1.welcome__heading We're
       = " "
-      span serious
+      span.primary-text serious
       = " for "
-      span food
+      span.primary-text food
       = " & "
-      span delivery
+      span.secondary-text delivery
       = "."
+    .welcome__underline-image-container
+      img(src=welcome_img_path + "underline.png", alt="Underline image")
     p.welcome__description Best cooks and best delivery guys all at your service. Hot tasty food will reach you in 60 minutes.
     form.welcome__search-form(action="#")
       .welcome__search-icon-wrapper
@@ -38,16 +48,17 @@ section.welcome
           src=welcome_img_path + "search-icon.png",
           alt="Search icon"
         )
-      input.welcome__text-input(type="text")
+      input.welcome__text-input(type="text", placeholder="Search food")
-      .welcome__button-icon-wrapper
+      button.welcome__submit-btn(type="submit")
-        button.welcome__submit-btn(type="submit")
+        img.welcome__search-icon-btn(
-          img.welcome__search-icon-btn(
+          src=welcome_img_path + "search-icon-btn.svg",
-            src=welcome_img_path + "search-icon-btn.svg",
+          alt="Search button image"
-            alt="Search button image"
+        )
-          )
+    .welcome__action-container
-    a.btn(href="javascript:void(0)") Download App
+      a.welcome__download-btn.btn(href="javascript:void(0)") Download App
-    a.welcome__watch-video-button(href="javascript:void(0)")
+      a.welcome__watch-video-button(href="javascript:void(0)")
-      .welcome__watch-video-wrapper
+        .welcome__watch-video-wrapper
-        img(src=welcome_img_path + "play-btn.png", alt="Watch button image")
+          img(src=welcome_img_path + "play-btn.png", alt="Watch button image")
-      p Watch Video
+        p Watch Video
-  img(src=welcome_img_path + "slider.png", alt="Slider image")
+    .welcome__slider-container
+      img.welcome__slider-image(src=welcome_img_path + "slider.png", alt="Slider image")

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

@@ -17,7 +17,8 @@
 @mixin flex-container(
   $justify-content: null,
   $flex-direction: null,
-  $align-items: null
+  $align-items: null,
+  $gap: null
 ) {
   display: flex;
   @if $justify-content != null {
@@ -31,6 +32,10 @@
   @if $align-items != null {
     align-items: $align-items;
   }
+
+  @if $gap != null {
+    gap: $gap;
+  }
 }
 
 @mixin size($width: null, $height: null) {
@@ -42,3 +47,28 @@
     height: $height;
   }
 }
+
+@mixin setAbsoluteAndLocation(
+  $top: null,
+  $left: null,
+  $right: null,
+  $bottom: null
+) {
+  position: absolute;
+
+  @if $top != null {
+    top: $top;
+  }
+
+  @if $left != null {
+    left: $left;
+  }
+
+  @if $right != null {
+    right: $right;
+  }
+
+  @if $bottom != null {
+    bottom: $bottom;
+  }
+}

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

@@ -12,6 +12,7 @@ $fs-xx-sm: 14px;
 $fs-x-sm: 16px;
 $fs-sm: 17px;
 $fs-md: 18px;
+$fs-x-md: 20px;
 $fs-lg: 24px;
 $fs-x-lg: 48px;
 $fs-xx-lg: 58px;

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

@@ -1,3 +1,11 @@
 .no-underline {
   text-decoration: none;
 }
+
+.primary-text {
+  color: $primary-color;
+}
+
+.secondary-text {
+  color: $secondary-color;
+}

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

@@ -2,9 +2,10 @@
   @include flex-container(space-between, null, center);
 
   position: relative;
-  max-width: $max-width;
+  max-width: 428px;
   min-width: $min-width;
   padding: 24px;
+  margin: auto;
 }
 
 .header-content {
@@ -16,6 +17,7 @@
     padding-top: 32px;
     padding-inline: 24px;
     gap: 10px;
+    max-width: $max-width;
   }
 
   .header-content {

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

@@ -11,6 +11,7 @@
   margin-right: 10px;
   margin-left: 10px;
   background-color: $white;
+  z-index: 2;
 }
 
 .nav-download-btn {

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

@@ -0,0 +1,131 @@
+.welcome {
+  @include flex-container(center, column);
+
+  // Start banner css code
+  &__banner-container {
+    @include size(428px, auto);
+    @include flex-container(center, column);
+
+    position: relative;
+    margin: auto;
+    max-width: 428px;
+  }
+
+  &__banner-image {
+    @include size(auto, auto);
+
+    z-index: 1;
+  }
+
+  &__lines-background {
+    @include setAbsoluteAndLocation($top: -100px, $right: 0);
+  }
+
+  &__arrow-image {
+    @include setAbsoluteAndLocation($top: -15px, $right: 50px);
+
+    @include size(43px, 215px);
+  }
+
+  &__mint-image {
+    @include setAbsoluteAndLocation($bottom: 100px, $right: 0);
+  }
+  // End banner css code
+
+  // Start content css code
+  &__content {
+    @include flex-container($flex-direction: column);
+
+    position: relative;
+    padding-top: 68.48px;
+    padding-left: 33px;
+    max-width: 380px;
+    margin: auto;
+  }
+
+  &__orange-image-wrapper {
+    @include setAbsoluteAndLocation($top: 0, $right: 0);
+  }
+
+  &__text-box {
+    @include flex-container($align-items: center, $gap: 6px);
+    @include size(fit-content);
+
+    background-color: #feeae9;
+    border-radius: 100px;
+    padding: 6px;
+    font-size: $fs-xx-sm;
+    font-family: $secondary-font;
+  }
+
+  &__icon-container {
+    @include size(20px, 20px);
+  }
+
+  &__head-arrow-container {
+    @include size(13px, 7.3px);
+    @include setAbsoluteAndLocation($right: 107px);
+  }
+
+  &__heading {
+    margin-top: 20px;
+    font-size: $fs-x-lg;
+    text-transform: capitalize;
+    font-weight: 900;
+  }
+
+  &__underline-image-container {
+    margin-top: 12px;
+  }
+
+  &__description {
+    margin-top: 35px;
+    font-size: $fs-x-md;
+    line-height: 140%;
+    letter-spacing: -0.2px;
+  }
+
+  &__search-form {
+    @include flex-container();
+
+    margin-top: 32px;
+    border-radius: 100px;
+    border: 0.5px solid $black;
+  }
+
+  &__search-icon-wrapper {
+    @include size(24px, 24px);
+
+    padding: 14px;
+  }
+
+  &__text-input {
+    @include size(100%, auto);
+
+    padding: 15px 0;
+    font-size: $fs-md;
+    border: none;
+  }
+
+  &__submit-btn {
+    @include size(42px, 42px);
+
+    background-color: #fdc55e;
+    border-radius: 100px;
+    border: none;
+    padding: 9px;
+    margin: 6px 4px;
+    cursor: pointer;
+  }
+
+  &__action-container {
+    @include flex-container();
+    margin-top: 44px;
+  }
+
+  &__slider-container {
+    @include size(22px, 61px);
+
+    display: none;
+  }
+}

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

@@ -15,3 +15,4 @@
 // Layouts
 @import "./layouts/navbar";
 @import "./layouts/header";
+@import "./layouts/welcome";