From 7163bbf72161f2f7e6be2f67d7478697bd7fe055 Mon Sep 17 00:00:00 2001
From: Loi Phan <phanhuuloi15@gmail.com>
Date: Fri, 21 Jul 2023 14:30:51 +0700
Subject: [PATCH] Update code and add file assets

---
 .../assets/images/welcome/orange-desktop.png  | Bin 0 -> 5603 bytes
 practice/practice-02/src/layouts/welcome.pug  |  27 ++++--
 .../src/styles/layouts/_header.scss           |   2 +-
 .../src/styles/layouts/_welcome.scss          |  80 ++++++++++++++----
 4 files changed, 82 insertions(+), 27 deletions(-)
 create mode 100644 practice/practice-02/src/assets/images/welcome/orange-desktop.png

diff --git a/practice/practice-02/src/assets/images/welcome/orange-desktop.png b/practice/practice-02/src/assets/images/welcome/orange-desktop.png
new file mode 100644
index 0000000000000000000000000000000000000000..33ceed06b5ae27c3b8e391f9e42e5fcf04d76b63
GIT binary patch
literal 5603
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

literal 0
HcmV?d00001

diff --git a/practice/practice-02/src/layouts/welcome.pug b/practice/practice-02/src/layouts/welcome.pug
index c5f3478..c677a21 100644
--- a/practice/practice-02/src/layouts/welcome.pug
+++ b/practice/practice-02/src/layouts/welcome.pug
@@ -3,7 +3,7 @@
 section.welcome
   .welcome__banner
     .welcome__banner-container
-      img.welcome__banner-image(
+      img.welcome__banner-img(
         src=welcome_img_path + "welcome-image-mobile.png",
         alt="Welcome banner image"
       )
@@ -22,17 +22,27 @@ section.welcome
           srcset=welcome_img_path + "arrow-desktop.png",
           alt="Arrow image"
         )
-        img.welcome__arrow-image(
+        img.welcome__arrow-img-up(
           src=welcome_img_path + "arrow-mobile.png",
           alt="Arrow image"
         )
-      img.welcome__mint-image(
+      img.welcome__mint-img(
         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")
+    .welcome__arrow-down-img-wrapper
+      img.welcome__arrow-img-down(
+        src=welcome_img_path + "arrow-desktop-2.png",
+        alt="Arrow image down"
+      )
+    .welcome__orange-img-wrapper
+      picture
+        source(
+          media="(min-width: 840px)",
+          srcset=welcome_img_path + "orange-desktop.png"
+        )
+        img(src=welcome_img_path + "orange.png", alt="Orange background image")
     .welcome__text-box
       .welcome__icon-container
         img.welcome__love-icon(
@@ -49,9 +59,10 @@ section.welcome
       span.primary-text food
       = " & "
       span.secondary-text delivery
+        .welcome__underline-img-container
+          img(src=welcome_img_path + "underline.png", alt="Underline image")
       = "."
-    .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
@@ -82,7 +93,7 @@ section.welcome
             ) 
         span.welcome__text-download-btn Watch Video
     .welcome__slider-container
-      img.welcome__slider-image(
+      img.welcome__slider-img(
         src=welcome_img_path + "slider.png",
         alt="Slider image"
       )
diff --git a/practice/practice-02/src/styles/layouts/_header.scss b/practice/practice-02/src/styles/layouts/_header.scss
index 87499ba..4166abe 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 flex-container(space-between, null, center);
+  @include flex-container(space-between, $align-items: center);
 
   position: relative;
   max-width: 428px;
diff --git a/practice/practice-02/src/styles/layouts/_welcome.scss b/practice/practice-02/src/styles/layouts/_welcome.scss
index fa36a13..6a9161e 100644
--- a/practice/practice-02/src/styles/layouts/_welcome.scss
+++ b/practice/practice-02/src/styles/layouts/_welcome.scss
@@ -3,7 +3,7 @@
   margin: auto;
   max-width: 428px;
 
-  // Start banner css code
+  // Start banner
   &__banner-container {
     @include size(428px, auto);
     @include flex-container(center, column);
@@ -11,7 +11,7 @@
     position: relative;
   }
 
-  &__banner-image {
+  &__banner-img {
     z-index: 1;
   }
 
@@ -20,18 +20,18 @@
     @include size(187px, 430px);
   }
 
-  &__arrow-image {
+  &__arrow-img-up {
     @include setAbsoluteAndLocation($top: -15px, $right: 50px);
 
     @include size(43px, 215px);
   }
 
-  &__mint-image {
+  &__mint-img {
     @include setAbsoluteAndLocation($bottom: 100px, $right: 0);
   }
-  // End banner css code
+  // End banner
 
-  // Start content css code
+  // Start content
   &__content {
     @include flex-container($flex-direction: column);
     @include size(calc(428px - 48px), auto);
@@ -41,7 +41,11 @@
     padding-inline: 24px;
   }
 
-  &__orange-image-wrapper {
+  &__arrow-down-img-wrapper {
+    display: none;
+  }
+
+  &__orange-img-wrapper {
     @include setAbsoluteAndLocation($top: 0, $right: 35px);
   }
 
@@ -77,9 +81,10 @@
     font-size: $fs-x-lg;
     text-transform: capitalize;
     font-weight: 900;
+    max-width: 530px;
   }
 
-  &__underline-image-container {
+  &__underline-img-container {
     margin-top: 12px;
   }
 
@@ -88,6 +93,7 @@
     font-size: $fs-x-md;
     line-height: 140%;
     letter-spacing: -0.2px;
+    max-width: 517px;
   }
 
   &__search-form {
@@ -96,6 +102,7 @@
     margin-top: 32px;
     border-radius: 100px;
     border: 0.5px solid $black;
+    max-width: 471px;
   }
 
   &__search-icon-wrapper {
@@ -148,7 +155,7 @@
       }
 
       .welcome__text-download-btn {
-        color: $primary-color;
+        color: $white;
       }
     }
   }
@@ -183,7 +190,7 @@
   &__slider-container {
     display: none;
   }
-  // End content css code
+  // End content
 }
 
 .slider-container {
@@ -191,6 +198,10 @@
 }
 
 @media screen and (min-width: 840px) {
+  .secondary-text {
+    position: relative;
+  }
+
   .welcome {
     @include flex-container(
       $flex-direction: row-reverse,
@@ -203,10 +214,10 @@
     max-width: $max-width;
 
     // Start banner
-    &__banner-image {
+    &__banner-img {
       @include size(100%, 100%);
 
-      max-width: 689px;
+      max-width: 650px;
     }
 
     &__lines-background {
@@ -214,7 +225,7 @@
       @include size(313px, 718px);
     }
 
-    &__arrow-image {
+    &__arrow-img-up {
       @include size(117px, 315px);
       @include setAbsoluteAndLocation($top: -40px, $right: 5px);
       transition: 0.2s;
@@ -237,13 +248,43 @@
       @include size(auto, auto);
       padding-left: 70px;
       padding-right: 0px;
-      max-width: 440px;
+      max-width: 560px;
+    }
+
+    &__orange-img-wrapper {
+      @include setAbsoluteAndLocation($top: 170px, $right: -50px);
+      transition: 0.2s;
+    }
+
+    &__heading {
+      font-size: $fs-xx-lg;
+    }
+
+    &__underline-img-container {
+      @include setAbsoluteAndLocation($bottom: -10px, $left: 8px);
+    }
+
+    &__description {
+      font-size: $fs-lg;
+    }
+
+    &__arrow-down-img-wrapper {
+      @include setAbsoluteAndLocation($top: -50px, $left: 220px);
+
+      display: block;
+      transition: 0.2s;
+    }
+
+    &__search-form {
+      @include size(auto, 54px);
     }
 
     &__slider-container {
       display: block;
       @include setAbsoluteAndLocation($bottom: -135px, $left: 65px);
     }
+
+    // End content
   }
 }
 
@@ -253,13 +294,16 @@
       padding-right: 74px;
     }
 
-    &__arrow-image {
-      @include size(117px, 315px);
+    &__arrow-img-up {
       @include setAbsoluteAndLocation($top: 8px, $right: 62px);
     }
 
-    &__orange-image-wrapper {
-      @include setAbsoluteAndLocation($top: 110px, $right: -12px);
+    &__orange-img-wrapper {
+      @include setAbsoluteAndLocation($top: 110px, $right: -50px);
+    }
+
+    &__arrow-down-img-wrapper {
+      @include setAbsoluteAndLocation($top: -95px, $left: 230px);
     }
   }
 }