Fix UI

practice/practice-02/src/index.pug

@@ -6,10 +6,11 @@ html(lang="en")
     link(rel="stylesheet", href="./styles/main.scss")
     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/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,11 @@
 .header {
+  @include setAbsoluteAndLocation($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 +21,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

@@ -7,6 +7,12 @@
   @include flex-container(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 {
@@ -144,8 +150,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 +164,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 +191,7 @@
   &__text-download-btn {
     color: $gray;
     font-size: $fs-sm;
+    font-family: $tertiary-font;
     margin-left: 70px;
     transition: 0.5s;
     z-index: 1;
@@ -210,7 +220,7 @@
       $justify-content: space-between
     );
 
-    padding-top: 20px;
+    padding-top: 130px;
     width: 100%;
     max-width: $max-width;
 
@@ -259,6 +269,7 @@
 
     &__heading {
       font-size: $fs-xx-lg;
+      line-height: 125%;
     }
 
     &__underline-img-container {
@@ -269,6 +280,18 @@
       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);