Merge pull request #11 from Nez27/feature/fix-UI

Fix UI and resolve duplicated code.

practice/practice-02/src/index.pug

@@ -4,12 +4,18 @@ html(lang="en")
     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
-      .logo-wrapper
-        a.logo-link(href="javascript:void(0)")
-          img.logo(src="./assets/images/logo.svg", alt="Food Hut logo")
-      .header-content.flex
-        include layouts/nav-menu
+    header.header
+      .header-container
+        .logo-wrapper
+          a.logo-link(href="javascript:void(0)")
+            img.logo(src="./assets/images/logo.svg", alt="Food Hut logo")
+        .header-content
+          include layouts/nav-menu
     include layouts/welcome

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

@@ -1,100 +1,104 @@
 - var welcome_img_path = "./assets/images/welcome/";
 
 section.welcome
-  .welcome__banner
-    .welcome__banner-container
-      img.welcome__banner-img(
-        src=welcome_img_path + "welcome-image-mobile.png",
-        alt="Welcome banner image"
-      )
-      picture
-        source(
-          media="(min-width: 840px)",
-          srcset=welcome_img_path + "lines-background-desktop.png"
+  .welcome__container
+    .welcome__banner
+      .welcome__banner-container
+        img.welcome__banner-img(
+          src=welcome_img_path + "welcome-image-mobile.png",
+          alt="Welcome banner image"
         )
-        img.welcome__lines-background(
-          src=welcome_img_path + "lines-background-mobile.png",
-          alt="Lines background"
-        )
-      picture
-        source(
-          media="(min-width: 840px)",
-          srcset=welcome_img_path + "arrow-desktop.png",
-          alt="Arrow image"
-        )
-        img.welcome__arrow-img-up(
-          src=welcome_img_path + "arrow-mobile.png",
-          alt="Arrow image"
-        )
-      img.welcome__mint-img(
-        src=welcome_img_path + "mint.png",
-        alt="Mint image"
-      )
-  .welcome__content
-    .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(
-          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.primary-text serious
-      = " for "
-      span.primary-text food
-      = " & "
-      .delivery-text-box
-        span.secondary-text delivery
-        .welcome__underline-img-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
-        img.welcome__search-icon(
-          src=welcome_img_path + "search-icon.png",
-          alt="Search icon"
-        )
-      input.welcome__text-input(type="text", placeholder="Search food")
-      button.welcome__submit-btn(type="submit")
-        img.welcome__search-icon-btn(
-          src=welcome_img_path + "search-icon-btn.svg",
-          alt="Search button image"
-        )
-    .welcome__action-container
-      a.welcome__download-btn.btn(href="javascript:void(0)") Download App
-      a.welcome__watch-video-link.no-underline(href="javascript:void(0)")
-        .welcome__play-icon-wrapper
-          svg.welcome__play-icon(
-            width="12",
-            height="12",
-            viewBox="0 0 12 13",
-            fill="none",
-            xmlns="http://www.w3.org/2000/svg"
+        picture
+          source(
+            media="(min-width: 840px)",
+            srcset=welcome_img_path + "lines-background-desktop.png"
           )
-            path(
-              d="M12 6.5L0.749999 12.9952L0.75 0.00480889L12 6.5Z",
-              fill="currentColor"
-            ) 
-        span.welcome__text-download-btn Watch Video
-    .welcome__slider-container
-      img.welcome__slider-img(
-        src=welcome_img_path + "slider.png",
-        alt="Slider image"
-      )
+          img.welcome__lines-background(
+            src=welcome_img_path + "lines-background-mobile.png",
+            alt="Lines background"
+          )
+        picture
+          source(
+            media="(min-width: 840px)",
+            srcset=welcome_img_path + "arrow-desktop.png",
+            alt="Arrow image"
+          )
+          img.welcome__arrow-img-up(
+            src=welcome_img_path + "arrow-mobile.png",
+            alt="Arrow image"
+          )
+        img.welcome__mint-img(
+          src=welcome_img_path + "mint.png",
+          alt="Mint image"
+        )
+    .welcome__content
+      .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(
+            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.primary-text serious
+        = " for "
+        span.primary-text food
+        = " & "
+        .delivery-text-box
+          span.secondary-text delivery
+          .welcome__underline-img-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
+          img.welcome__search-icon(
+            src=welcome_img_path + "search-icon.png",
+            alt="Search icon"
+          )
+        input.welcome__text-input(type="text", placeholder="Search food")
+        button.welcome__submit-btn(type="submit")
+          img.welcome__search-icon-btn(
+            src=welcome_img_path + "search-icon-btn.svg",
+            alt="Search button image"
+          )
+      .welcome__action-container
+        a.welcome__download-btn.btn(href="javascript:void(0)") Download App
+        a.welcome__watch-video-link.no-underline(href="javascript:void(0)")
+          .welcome__play-icon-wrapper
+            svg.welcome__play-icon(
+              width="12",
+              height="12",
+              viewBox="0 0 12 13",
+              fill="none",
+              xmlns="http://www.w3.org/2000/svg"
+            )
+              path(
+                d="M12 6.5L0.749999 12.9952L0.75 0.00480889L12 6.5Z",
+                fill="currentColor"
+              ) 
+          span.welcome__text-download-btn Watch Video
+      .welcome__slider-container
+        img.welcome__slider-img(
+          src=welcome_img_path + "slider.png",
+          alt="Slider image"
+        )

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;

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

@@ -1,5 +1,6 @@
 $primary-font: "Sofia Pro";
 $secondary-font: "Inter";
+$tertiary-font: "Poppins";
 
 // Color
 $black: #000;

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

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

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;

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

@@ -60,6 +60,7 @@
     border: none;
     max-width: 600px;
     margin: unset;
+    background-color: transparent;
   }
 
   .nav-item {

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

@@ -4,10 +4,18 @@
 }
 
 .welcome {
-  @include flex-container(center, column);
-  margin: auto;
-  max-width: 428px;
+  background: linear-gradient(
+    180deg,
+    rgba(245, 71, 72, 0.06) 0%,
+    rgba(245, 71, 72, 0) 100%
+  );
 
+  &__container {
+    @include flex-container(center, column);
+    margin: auto;
+    max-width: 428px;
+    padding-top: 117px;
+  }
   // Start banner
   &__banner-container {
     @include size(428px, auto);
@@ -21,18 +29,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 +59,7 @@
   }
 
   &__orange-img-wrapper {
-    @include setAbsoluteAndLocation($top: 0, $right: 35px);
+    @include setAbsoluteAndLocation($absolute: true, $top: 0, $right: 35px);
   }
 
   &__text-box {
@@ -78,7 +86,7 @@
 
   &__head-arrow-container {
     @include size(13px, 7.3px);
-    @include setAbsoluteAndLocation($right: 107px);
+    @include setAbsoluteAndLocation($absolute: true, $right: 107px);
   }
 
   &__heading {
@@ -90,7 +98,11 @@
   }
 
   &__underline-img-container {
-    @include setAbsoluteAndLocation($bottom: -20px, $left: 0px);
+    @include setAbsoluteAndLocation(
+      $absolute: true,
+      $bottom: -20px,
+      $left: 0px
+    );
   }
 
   &__description {
@@ -144,8 +156,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 +170,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 +197,7 @@
   &__text-download-btn {
     color: $gray;
     font-size: $fs-sm;
+    font-family: $tertiary-font;
     margin-left: 70px;
     transition: 0.5s;
     z-index: 1;
@@ -204,15 +220,17 @@
 
 @media screen and (min-width: 840px) {
   .welcome {
-    @include flex-container(
-      $flex-direction: row-reverse,
-      $align-items: center,
-      $justify-content: space-between
-    );
+    &__container {
+      @include flex-container(
+        $flex-direction: row-reverse,
+        $align-items: center,
+        $justify-content: space-between
+      );
 
-    padding-top: 20px;
-    width: 100%;
-    max-width: $max-width;
+      padding-top: 130px;
+      width: 100%;
+      max-width: $max-width;
+    }
 
     // Start banner
     &__banner-img {
@@ -259,6 +277,7 @@
 
     &__heading {
       font-size: $fs-xx-lg;
+      line-height: 125%;
     }
 
     &__underline-img-container {
@@ -269,8 +288,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 +317,11 @@
 
     &__slider-container {
       display: block;
-      @include setAbsoluteAndLocation($bottom: -135px, $left: 65px);
+      @include setAbsoluteAndLocation(
+        $absolute: true,
+        $bottom: -135px,
+        $left: 65px
+      );
     }
 
     // End content
@@ -304,7 +343,7 @@
     }
 
     &__arrow-down-img-wrapper {
-      @include setAbsoluteAndLocation($top: -95px, $left: 230px);
+      @include setAbsoluteAndLocation($top: -75px, $left: 230px);
     }
   }
 }