From b6397cc150365e4305c7a86df7026a7edf54f54b Mon Sep 17 00:00:00 2001 From: Loi Phan Date: Fri, 21 Jul 2023 11:12:23 +0700 Subject: [PATCH] Update style for welcome UI --- practice/practice-02/src/layouts/welcome.pug | 41 +++++++-- .../src/styles/components/_toggle-menu.scss | 2 +- .../src/styles/layouts/_header.scss | 5 +- .../src/styles/layouts/_navbar.scss | 17 ++-- .../src/styles/layouts/_welcome.scss | 92 +++++++++++++++++-- 5 files changed, 129 insertions(+), 28 deletions(-) diff --git a/practice/practice-02/src/layouts/welcome.pug b/practice/practice-02/src/layouts/welcome.pug index c425e8e..c5f3478 100644 --- a/practice/practice-02/src/layouts/welcome.pug +++ b/practice/practice-02/src/layouts/welcome.pug @@ -7,14 +7,25 @@ section.welcome 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" - ) - img.welcome__arrow-image( - src=welcome_img_path + "arrow-mobile.png", - alt="Arrow image" - ) + picture + source( + media="(min-width: 840px)", + srcset=welcome_img_path + "lines-background-desktop.png" + ) + 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-image( + src=welcome_img_path + "arrow-mobile.png", + alt="Arrow image" + ) img.welcome__mint-image( src=welcome_img_path + "mint.png", alt="Mint image" @@ -58,8 +69,18 @@ section.welcome 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 - img(src=welcome_img_path + "play-icon.svg", alt="Watch button image") - = "Watch Video" + svg.welcome__play-icon( + width="12", + height="13", + 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-image( src=welcome_img_path + "slider.png", diff --git a/practice/practice-02/src/styles/components/_toggle-menu.scss b/practice/practice-02/src/styles/components/_toggle-menu.scss index 415a580..57cd366 100644 --- a/practice/practice-02/src/styles/components/_toggle-menu.scss +++ b/practice/practice-02/src/styles/components/_toggle-menu.scss @@ -43,7 +43,7 @@ } .toggle-menu:checked ~ .nav-list { - right: 0; + display: block; } @media screen and (min-width: 840px) { diff --git a/practice/practice-02/src/styles/layouts/_header.scss b/practice/practice-02/src/styles/layouts/_header.scss index adf0905..87499ba 100644 --- a/practice/practice-02/src/styles/layouts/_header.scss +++ b/practice/practice-02/src/styles/layouts/_header.scss @@ -15,9 +15,10 @@ @media screen and (min-width: 840px) { .header { padding-top: 32px; - padding-inline: 24px; + padding-left: 70px; + padding-right: 61px; gap: 10px; - max-width: $max-width; + max-width: 1309px; } .header-content { diff --git a/practice/practice-02/src/styles/layouts/_navbar.scss b/practice/practice-02/src/styles/layouts/_navbar.scss index bc6e08a..ae65128 100644 --- a/practice/practice-02/src/styles/layouts/_navbar.scss +++ b/practice/practice-02/src/styles/layouts/_navbar.scss @@ -1,21 +1,21 @@ .nav-list { - @include flex-container(space-between, column); + @include size(max-content, auto); + display: none; list-style: none; transition: 0.1s; - position: fixed; + position: absolute; border: 2px solid $primary-color; - top: 0; - right: -300px; - margin-top: 105px; - margin-right: 10px; - margin-left: 10px; + top: 100px; + right: 25px; background-color: $white; z-index: 2; } .nav-download-btn { display: none; + + z-index: 1; } .nav-item { @@ -52,6 +52,9 @@ } .nav-list { + @include size(auto, auto); + @include flex-container(space-between, column); + position: unset; flex-direction: row; border: none; diff --git a/practice/practice-02/src/styles/layouts/_welcome.scss b/practice/practice-02/src/styles/layouts/_welcome.scss index da9627b..fa36a13 100644 --- a/practice/practice-02/src/styles/layouts/_welcome.scss +++ b/practice/practice-02/src/styles/layouts/_welcome.scss @@ -9,7 +9,6 @@ @include flex-container(center, column); position: relative; - padding: 0 14px; } &__banner-image { @@ -125,6 +124,11 @@ padding: 9px; margin: 5px 4px; cursor: pointer; + + &:hover { + background-color: #f7d699; + transition: 0.2s; + } } &__action-container { @@ -135,25 +139,57 @@ &__watch-video-link { @include flex-container($align-items: center, $gap: 21px); - color: $gray; - font-size: $fs-sm; + position: relative; + + &:hover { + .welcome__play-icon-wrapper { + width: 100%; + background-color: $secondary-color; + } + + .welcome__text-download-btn { + color: $primary-color; + } + } + } + + &__play-icon { + color: $primary-color; } &__play-icon-wrapper { - padding: 25px; - border-radius: 50%; + @include size(12px, 17px); + position: absolute; + padding: 17.5px 20px; + border-radius: 50px; background-color: $white; box-shadow: 0 40px 50px 3px rgba($color: $primary-color, $alpha: 0.5); + transition: width 0.5s; + } + + &__text-download-btn { + color: $gray; + font-size: $fs-sm; + margin-left: 70px; + transition: 0.5s; + z-index: 1; + } + + &__download-btn:hover { + background-color: $secondary-color; + transition: 0.2s; } &__slider-container { - @include size(22px, 61px); - display: none; } // End content css code } +.slider-container { + display: none; +} + @media screen and (min-width: 840px) { .welcome { @include flex-container( @@ -166,24 +202,64 @@ width: 100%; max-width: $max-width; + // Start banner &__banner-image { @include size(100%, 100%); max-width: 689px; } + &__lines-background { + @include setAbsoluteAndLocation($top: -150px, $right: 0px); + @include size(313px, 718px); + } + + &__arrow-image { + @include size(117px, 315px); + @include setAbsoluteAndLocation($top: -40px, $right: 5px); + transition: 0.2s; + } + + &__head-arrow-container { + display: none; + } + &__banner-container { @include size(auto, auto); - padding-right: 74px; max-width: 1000px; + min-width: 500px; } + // End banner + // Start content &__content { @include size(auto, auto); padding-left: 70px; padding-right: 0px; max-width: 440px; } + + &__slider-container { + display: block; + @include setAbsoluteAndLocation($bottom: -135px, $left: 65px); + } + } +} + +@media screen and (min-width: 1200px) { + .welcome { + &__banner-container { + padding-right: 74px; + } + + &__arrow-image { + @include size(117px, 315px); + @include setAbsoluteAndLocation($top: 8px, $right: 62px); + } + + &__orange-image-wrapper { + @include setAbsoluteAndLocation($top: 110px, $right: -12px); + } } }