diff --git a/practice/practice-02/src/assets/images/service/background-desktop.png b/practice/practice-02/src/assets/images/service/background-desktop.png new file mode 100644 index 0000000..408118c Binary files /dev/null and b/practice/practice-02/src/assets/images/service/background-desktop.png differ diff --git a/practice/practice-02/src/assets/images/service/background-mobile.png b/practice/practice-02/src/assets/images/service/background-mobile.png new file mode 100644 index 0000000..804ff68 Binary files /dev/null and b/practice/practice-02/src/assets/images/service/background-mobile.png differ diff --git a/practice/practice-02/src/assets/images/service/icon-1.png b/practice/practice-02/src/assets/images/service/icon-1.png new file mode 100644 index 0000000..7c0a638 Binary files /dev/null and b/practice/practice-02/src/assets/images/service/icon-1.png differ diff --git a/practice/practice-02/src/assets/images/service/icon-2.png b/practice/practice-02/src/assets/images/service/icon-2.png new file mode 100644 index 0000000..a638877 Binary files /dev/null and b/practice/practice-02/src/assets/images/service/icon-2.png differ diff --git a/practice/practice-02/src/assets/images/service/icon-3.png b/practice/practice-02/src/assets/images/service/icon-3.png new file mode 100644 index 0000000..847a421 Binary files /dev/null and b/practice/practice-02/src/assets/images/service/icon-3.png differ diff --git a/practice/practice-02/src/assets/images/service/main-character-desktop.png b/practice/practice-02/src/assets/images/service/main-character-desktop.png new file mode 100644 index 0000000..3315f04 Binary files /dev/null and b/practice/practice-02/src/assets/images/service/main-character-desktop.png differ diff --git a/practice/practice-02/src/assets/images/service/main-character-mobile.png b/practice/practice-02/src/assets/images/service/main-character-mobile.png new file mode 100644 index 0000000..4716e83 Binary files /dev/null and b/practice/practice-02/src/assets/images/service/main-character-mobile.png differ diff --git a/practice/practice-02/src/assets/images/service/vegetable-desktop.png b/practice/practice-02/src/assets/images/service/vegetable-desktop.png new file mode 100644 index 0000000..1b92099 Binary files /dev/null and b/practice/practice-02/src/assets/images/service/vegetable-desktop.png differ diff --git a/practice/practice-02/src/assets/images/service/vegetable-mobile.png b/practice/practice-02/src/assets/images/service/vegetable-mobile.png new file mode 100644 index 0000000..2c90cf0 Binary files /dev/null and b/practice/practice-02/src/assets/images/service/vegetable-mobile.png differ diff --git a/practice/practice-02/src/layouts/welcome.pug b/practice/practice-02/src/layouts/welcome.pug index 5a9fc61..f23e2f7 100644 --- a/practice/practice-02/src/layouts/welcome.pug +++ b/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" + ) diff --git a/practice/practice-02/src/styles/abstracts/_mixins.scss b/practice/practice-02/src/styles/abstracts/_mixins.scss index 52ff198..d5f760d 100644 --- a/practice/practice-02/src/styles/abstracts/_mixins.scss +++ b/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; diff --git a/practice/practice-02/src/styles/abstracts/_variables.scss b/practice/practice-02/src/styles/abstracts/_variables.scss index ea34243..d3a50b3 100644 --- a/practice/practice-02/src/styles/abstracts/_variables.scss +++ b/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; diff --git a/practice/practice-02/src/styles/bases/_typography.scss b/practice/practice-02/src/styles/bases/_typography.scss index e337b24..889a589 100644 --- a/practice/practice-02/src/styles/bases/_typography.scss +++ b/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; } diff --git a/practice/practice-02/src/styles/components/_logo.scss b/practice/practice-02/src/styles/components/_logo.scss index 637f73e..aeb0333 100644 --- a/practice/practice-02/src/styles/components/_logo.scss +++ b/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); + } +} diff --git a/practice/practice-02/src/styles/layouts/_header.scss b/practice/practice-02/src/styles/layouts/_header.scss index 4166abe..388638b 100644 --- a/practice/practice-02/src/styles/layouts/_header.scss +++ b/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; diff --git a/practice/practice-02/src/styles/layouts/_navbar.scss b/practice/practice-02/src/styles/layouts/_navbar.scss index ae65128..d349b76 100644 --- a/practice/practice-02/src/styles/layouts/_navbar.scss +++ b/practice/practice-02/src/styles/layouts/_navbar.scss @@ -60,6 +60,7 @@ border: none; max-width: 600px; margin: unset; + background-color: transparent; } .nav-item { diff --git a/practice/practice-02/src/styles/layouts/_welcome.scss b/practice/practice-02/src/styles/layouts/_welcome.scss index bacace0..367ec35 100644 --- a/practice/practice-02/src/styles/layouts/_welcome.scss +++ b/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); } } }