From 4d07bdab8c2d9216f52ee369453dc23f851cd9ce Mon Sep 17 00:00:00 2001 From: Loi Phan Date: Thu, 20 Jul 2023 13:57:41 +0700 Subject: [PATCH] Implememnt css code --- practice/practice-02/src/layouts/welcome.pug | 51 ++++--- .../src/styles/abstracts/_mixins.scss | 32 ++++- .../src/styles/abstracts/_variables.scss | 1 + .../practice-02/src/styles/bases/_base.scss | 8 ++ .../src/styles/layouts/_header.scss | 4 +- .../src/styles/layouts/_navbar.scss | 1 + .../src/styles/layouts/_welcome.scss | 131 ++++++++++++++++++ practice/practice-02/src/styles/main.scss | 1 + 8 files changed, 207 insertions(+), 22 deletions(-) create mode 100644 practice/practice-02/src/styles/layouts/_welcome.scss diff --git a/practice/practice-02/src/layouts/welcome.pug b/practice/practice-02/src/layouts/welcome.pug index 110e085..b4204d3 100644 --- a/practice/practice-02/src/layouts/welcome.pug +++ b/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(src=welcome_img_path + "mint.png", alt="Mint image") + img.welcome__arrow-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") - .welcome__button-icon-wrapper - button.welcome__submit-btn(type="submit") - img.welcome__search-icon-btn( - src=welcome_img_path + "search-icon-btn.svg", - alt="Search button image" - ) - a.btn(href="javascript:void(0)") Download App - a.welcome__watch-video-button(href="javascript:void(0)") - .welcome__watch-video-wrapper - img(src=welcome_img_path + "play-btn.png", alt="Watch button image") - p Watch Video - img(src=welcome_img_path + "slider.png", alt="Slider image") + 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-button(href="javascript:void(0)") + .welcome__watch-video-wrapper + img(src=welcome_img_path + "play-btn.png", alt="Watch button image") + p Watch Video + .welcome__slider-container + img.welcome__slider-image(src=welcome_img_path + "slider.png", alt="Slider image") diff --git a/practice/practice-02/src/styles/abstracts/_mixins.scss b/practice/practice-02/src/styles/abstracts/_mixins.scss index 30c1588..52ff198 100644 --- a/practice/practice-02/src/styles/abstracts/_mixins.scss +++ b/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; + } +} diff --git a/practice/practice-02/src/styles/abstracts/_variables.scss b/practice/practice-02/src/styles/abstracts/_variables.scss index e2baab0..9c06621 100644 --- a/practice/practice-02/src/styles/abstracts/_variables.scss +++ b/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; diff --git a/practice/practice-02/src/styles/bases/_base.scss b/practice/practice-02/src/styles/bases/_base.scss index ee78604..926044f 100644 --- a/practice/practice-02/src/styles/bases/_base.scss +++ b/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; +} diff --git a/practice/practice-02/src/styles/layouts/_header.scss b/practice/practice-02/src/styles/layouts/_header.scss index fd2060a..adf0905 100644 --- a/practice/practice-02/src/styles/layouts/_header.scss +++ b/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 { diff --git a/practice/practice-02/src/styles/layouts/_navbar.scss b/practice/practice-02/src/styles/layouts/_navbar.scss index 1419bc7..bc6e08a 100644 --- a/practice/practice-02/src/styles/layouts/_navbar.scss +++ b/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 { diff --git a/practice/practice-02/src/styles/layouts/_welcome.scss b/practice/practice-02/src/styles/layouts/_welcome.scss new file mode 100644 index 0000000..6396027 --- /dev/null +++ b/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; + } +} diff --git a/practice/practice-02/src/styles/main.scss b/practice/practice-02/src/styles/main.scss index 7545e54..890d387 100644 --- a/practice/practice-02/src/styles/main.scss +++ b/practice/practice-02/src/styles/main.scss @@ -15,3 +15,4 @@ // Layouts @import "./layouts/navbar"; @import "./layouts/header"; +@import "./layouts/welcome";