diff --git a/src/assets/images/platform/background-desktop.png b/src/assets/images/platform/background-desktop.png new file mode 100644 index 0000000..fa1ee28 Binary files /dev/null and b/src/assets/images/platform/background-desktop.png differ diff --git a/src/assets/images/platform/background-mobile.png b/src/assets/images/platform/background-mobile.png new file mode 100644 index 0000000..7c6e0e4 Binary files /dev/null and b/src/assets/images/platform/background-mobile.png differ diff --git a/src/assets/images/platform/food-1-desktop.png b/src/assets/images/platform/food-1-desktop.png new file mode 100644 index 0000000..f4f2b12 Binary files /dev/null and b/src/assets/images/platform/food-1-desktop.png differ diff --git a/src/assets/images/platform/food-1-mobile.png b/src/assets/images/platform/food-1-mobile.png new file mode 100644 index 0000000..766b804 Binary files /dev/null and b/src/assets/images/platform/food-1-mobile.png differ diff --git a/src/assets/images/platform/food-2-desktop.png b/src/assets/images/platform/food-2-desktop.png new file mode 100644 index 0000000..3ffba79 Binary files /dev/null and b/src/assets/images/platform/food-2-desktop.png differ diff --git a/src/assets/images/platform/food-2-mobile.png b/src/assets/images/platform/food-2-mobile.png new file mode 100644 index 0000000..c987e2e Binary files /dev/null and b/src/assets/images/platform/food-2-mobile.png differ diff --git a/src/assets/images/platform/food-3-desktop.png b/src/assets/images/platform/food-3-desktop.png new file mode 100644 index 0000000..104e963 Binary files /dev/null and b/src/assets/images/platform/food-3-desktop.png differ diff --git a/src/assets/images/platform/food-3-mobile.png b/src/assets/images/platform/food-3-mobile.png new file mode 100644 index 0000000..b0887d7 Binary files /dev/null and b/src/assets/images/platform/food-3-mobile.png differ diff --git a/src/assets/images/platform/food-4-desktop.png b/src/assets/images/platform/food-4-desktop.png new file mode 100644 index 0000000..3b44f05 Binary files /dev/null and b/src/assets/images/platform/food-4-desktop.png differ diff --git a/src/assets/images/platform/food-4-mobile.png b/src/assets/images/platform/food-4-mobile.png new file mode 100644 index 0000000..faefe1e Binary files /dev/null and b/src/assets/images/platform/food-4-mobile.png differ diff --git a/src/assets/images/platform/main-image-desktop.png b/src/assets/images/platform/main-image-desktop.png index 7b65e94..7b77c6d 100644 Binary files a/src/assets/images/platform/main-image-desktop.png and b/src/assets/images/platform/main-image-desktop.png differ diff --git a/src/assets/images/platform/main-image-mobile.png b/src/assets/images/platform/main-image-mobile.png index 83150d2..fbbfe27 100644 Binary files a/src/assets/images/platform/main-image-mobile.png and b/src/assets/images/platform/main-image-mobile.png differ diff --git a/src/assets/images/welcome/arrow-desktop-2.png b/src/assets/images/welcome/arrow-desktop-2.png index a26d2d8..ac4f082 100644 Binary files a/src/assets/images/welcome/arrow-desktop-2.png and b/src/assets/images/welcome/arrow-desktop-2.png differ diff --git a/src/assets/images/welcome/arrow-desktop.png b/src/assets/images/welcome/arrow-desktop.png index e6d43b7..c7b1721 100644 Binary files a/src/assets/images/welcome/arrow-desktop.png and b/src/assets/images/welcome/arrow-desktop.png differ diff --git a/src/assets/images/welcome/arrow-mobile.png b/src/assets/images/welcome/arrow-mobile.png index 7646c20..0e108e9 100644 Binary files a/src/assets/images/welcome/arrow-mobile.png and b/src/assets/images/welcome/arrow-mobile.png differ diff --git a/src/assets/images/welcome/food-1-desktop.png b/src/assets/images/welcome/food-1-desktop.png new file mode 100644 index 0000000..d056fd8 Binary files /dev/null and b/src/assets/images/welcome/food-1-desktop.png differ diff --git a/src/assets/images/welcome/food-1-mobile.png b/src/assets/images/welcome/food-1-mobile.png new file mode 100644 index 0000000..8508d99 Binary files /dev/null and b/src/assets/images/welcome/food-1-mobile.png differ diff --git a/src/assets/images/welcome/food-2-desktop.png b/src/assets/images/welcome/food-2-desktop.png new file mode 100644 index 0000000..20d40b9 Binary files /dev/null and b/src/assets/images/welcome/food-2-desktop.png differ diff --git a/src/assets/images/welcome/food-2-mobile.png b/src/assets/images/welcome/food-2-mobile.png new file mode 100644 index 0000000..bcc9144 Binary files /dev/null and b/src/assets/images/welcome/food-2-mobile.png differ diff --git a/src/assets/images/welcome/food-3-desktop.png b/src/assets/images/welcome/food-3-desktop.png new file mode 100644 index 0000000..0696719 Binary files /dev/null and b/src/assets/images/welcome/food-3-desktop.png differ diff --git a/src/assets/images/welcome/food-3-mobile.png b/src/assets/images/welcome/food-3-mobile.png new file mode 100644 index 0000000..67105a8 Binary files /dev/null and b/src/assets/images/welcome/food-3-mobile.png differ diff --git a/src/assets/images/welcome/food-4-desktop.png b/src/assets/images/welcome/food-4-desktop.png new file mode 100644 index 0000000..515536f Binary files /dev/null and b/src/assets/images/welcome/food-4-desktop.png differ diff --git a/src/assets/images/welcome/food-4-mobile.png b/src/assets/images/welcome/food-4-mobile.png new file mode 100644 index 0000000..b280732 Binary files /dev/null and b/src/assets/images/welcome/food-4-mobile.png differ diff --git a/src/assets/images/welcome/lines-background-desktop.png b/src/assets/images/welcome/lines-background-desktop.png index c2a863c..e47ba16 100644 Binary files a/src/assets/images/welcome/lines-background-desktop.png and b/src/assets/images/welcome/lines-background-desktop.png differ diff --git a/src/assets/images/welcome/lines-background-mobile.png b/src/assets/images/welcome/lines-background-mobile.png index 0b3c964..4120680 100644 Binary files a/src/assets/images/welcome/lines-background-mobile.png and b/src/assets/images/welcome/lines-background-mobile.png differ diff --git a/src/assets/images/welcome/mint-desktop.png b/src/assets/images/welcome/mint-desktop.png new file mode 100644 index 0000000..a5bfbd5 Binary files /dev/null and b/src/assets/images/welcome/mint-desktop.png differ diff --git a/src/assets/images/welcome/mint.png b/src/assets/images/welcome/mint-mobile.png similarity index 100% rename from src/assets/images/welcome/mint.png rename to src/assets/images/welcome/mint-mobile.png diff --git a/src/assets/images/welcome/rate-card-desktop.png b/src/assets/images/welcome/rate-card-desktop.png new file mode 100644 index 0000000..a68378f Binary files /dev/null and b/src/assets/images/welcome/rate-card-desktop.png differ diff --git a/src/assets/images/welcome/rate-card-mobile.png b/src/assets/images/welcome/rate-card-mobile.png new file mode 100644 index 0000000..cf16484 Binary files /dev/null and b/src/assets/images/welcome/rate-card-mobile.png differ diff --git a/src/assets/images/welcome/review-card-desktop.png b/src/assets/images/welcome/review-card-desktop.png new file mode 100644 index 0000000..62578c3 Binary files /dev/null and b/src/assets/images/welcome/review-card-desktop.png differ diff --git a/src/assets/images/welcome/review-card-mobile.png b/src/assets/images/welcome/review-card-mobile.png new file mode 100644 index 0000000..b40c7c5 Binary files /dev/null and b/src/assets/images/welcome/review-card-mobile.png differ diff --git a/src/assets/images/welcome/welcome-image-desktop.png b/src/assets/images/welcome/welcome-image-desktop.png index fb14277..e8c2886 100644 Binary files a/src/assets/images/welcome/welcome-image-desktop.png and b/src/assets/images/welcome/welcome-image-desktop.png differ diff --git a/src/assets/images/welcome/welcome-image-mobile.png b/src/assets/images/welcome/welcome-image-mobile.png index 93b0bc8..d7f8512 100644 Binary files a/src/assets/images/welcome/welcome-image-mobile.png and b/src/assets/images/welcome/welcome-image-mobile.png differ diff --git a/src/index.pug b/src/index.pug index 1fe6087..328fcdc 100644 --- a/src/index.pug +++ b/src/index.pug @@ -13,16 +13,11 @@ html(lang="en") ) title Food Hut body - 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 - include layouts/offer - include layouts/service - include layouts/menu - include layouts/platform + include layouts/header + main + include sections/welcome + include sections/offer + include sections/service + include sections/menu + include sections/platform include layouts/footer diff --git a/src/layouts/footer.pug b/src/layouts/footer.pug index d447f82..bea0d01 100644 --- a/src/layouts/footer.pug +++ b/src/layouts/footer.pug @@ -5,21 +5,24 @@ footer.footer .footer__container .footer__introduction - p.footer__branch-name.primary-text Foodhut + p.footer__brand-name.primary-text Foodhut p.footer__description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor .footer__social-media - img.facebook-icon( - src=image_footer_path + "facebook.png", - alt="Facebook icon" - ) - img.instagram-icon( - src=image_footer_path + "instagram.png", - alt="Instagram icon" - ) - img.twitter-icon( - src=image_footer_path + "twitter.png", - alt="Twitter icon" - ) + a.footer__social-link(href="javascript:void(0)") + img.facebook-icon( + src=image_footer_path + "facebook.png", + alt="Facebook icon" + ) + a.footer__social-link(href="javascript:void(0)") + img.instagram-icon( + src=image_footer_path + "instagram.png", + alt="Instagram icon" + ) + a.footer__social-link(href="javascript:void(0)") + img.twitter-icon( + src=image_footer_path + "twitter.png", + alt="Twitter icon" + ) .footer__information .footer__about-us h3.footer__heading.primary-text About Us diff --git a/src/layouts/header.pug b/src/layouts/header.pug new file mode 100644 index 0000000..1c68e70 --- /dev/null +++ b/src/layouts/header.pug @@ -0,0 +1,16 @@ +- var list = ["Today Special Offers", "Why FoodHut", "Our Menu", "Our Popular Food"]; + +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 + nav.nav + input.toggle-menu(type="checkbox") + .icon-menu + ul.nav-list + each val in list + li.nav-item + a.nav-link.link-text(href="javascript:void(0)")= val + a.btn.nav-download-btn(href="javascript:void(0)") Download App diff --git a/src/layouts/nav-menu.pug b/src/layouts/nav-menu.pug deleted file mode 100644 index fad3302..0000000 --- a/src/layouts/nav-menu.pug +++ /dev/null @@ -1,10 +0,0 @@ -- var list = ["Today Special Offers", "Why FoodHut", "Our Menu", "Our Popular Food"]; - -nav.nav - input.toggle-menu(type="checkbox") - .icon-menu - ul.nav-list - each val in list - li.nav-item - a.nav-link.link-text(href="javascript:void(0)")= val -a.btn.nav-download-btn(href="javascript:void(0)") Download App diff --git a/src/layouts/platform.pug b/src/layouts/platform.pug deleted file mode 100644 index 36cdd57..0000000 --- a/src/layouts/platform.pug +++ /dev/null @@ -1,34 +0,0 @@ -- var platform_image_path = "./assets/images/platform/"; - -section.platform - .platform__container - .platform__image-container - picture - source( - media="(min-width: 1200px)", - srcset=platform_image_path + "main-image-desktop.png" - ) - img.platform__main-image( - src=platform_image_path + "main-image-mobile.png", - alt="The image introduce the platform" - ) - .platform__content - h2.platform__heading It's Now - = " " - span.primary-text More Easy - = " to " - span.secondary-text Order - = " by Our Mobile " - span.primary-text App - p.platform__description All you need to do is downlode one of the best delivery apps, makes a and most companies are opting for mobile app devlopment for food delivery. - .platform__store-container - .platform__google-store - img.platform__google-store-image( - src=platform_image_path + "chplay.png", - alt="Google store image" - ) - .platform__app-store - img.platform__app-store-image( - src=platform_image_path + "app-store.png", - alt="App store image" - ) diff --git a/src/layouts/menu.pug b/src/sections/menu.pug similarity index 97% rename from src/layouts/menu.pug rename to src/sections/menu.pug index 0cdd49a..1dc6463 100644 --- a/src/layouts/menu.pug +++ b/src/sections/menu.pug @@ -6,7 +6,7 @@ section.menu .menu__container h2.menu__heading - span.primary-text= Menu + span.primary-text Menu = " That " span.secondary-text Always = " Make You Fall In " diff --git a/src/layouts/offer.pug b/src/sections/offer.pug similarity index 100% rename from src/layouts/offer.pug rename to src/sections/offer.pug diff --git a/src/sections/platform.pug b/src/sections/platform.pug new file mode 100644 index 0000000..11a2eef --- /dev/null +++ b/src/sections/platform.pug @@ -0,0 +1,48 @@ +- var platform_image_path = "./assets/images/platform/"; +- var list_food_image_path = [{mobile_image_path: platform_image_path + "food-1-mobile.png", desktop_image_path: platform_image_path + "food-1-desktop.png"}, {mobile_image_path: platform_image_path + "food-2-mobile.png", desktop_image_path: platform_image_path + "food-2-desktop.png"}, {mobile_image_path: platform_image_path + "food-3-mobile.png", desktop_image_path: platform_image_path + "food-3-desktop.png"}, {mobile_image_path: platform_image_path + "food-4-mobile.png", desktop_image_path: platform_image_path + "food-4-desktop.png"}]; + +section.platform + .platform__container + .platform__image-container + each item in list_food_image_path + picture.platform__image-food + source(media="(min-width: 1200px)", srcset=item.desktop_image_path) + img(src=item.mobile_image_path, alt="Food image") + picture + source( + media="(min-width: 1200px)", + srcset=platform_image_path + "background-desktop.png" + ) + img.platform__background-img( + src=platform_image_path + "background-mobile.png", + alt="Background image" + ) + picture + source( + media="(min-width: 1200px)", + srcset=platform_image_path + "main-image-desktop.png" + ) + img.platform__main-image( + src=platform_image_path + "main-image-mobile.png", + alt="The image introduce the platform" + ) + .platform__content + h2.platform__heading It's Now + = " " + span.primary-text More Easy + = " to " + span.secondary-text Order + = " by Our Mobile " + span.primary-text App + p.platform__description All you need to do is downlode one of the best delivery apps, make a and most companies are opting for mobile app devlopment for food delivery + .platform__store-container + .platform__google-store + img.platform__google-store-image( + src=platform_image_path + "chplay.png", + alt="Google store image" + ) + .platform__app-store + img.platform__app-store-image( + src=platform_image_path + "app-store.png", + alt="App store image" + ) diff --git a/src/layouts/service.pug b/src/sections/service.pug similarity index 100% rename from src/layouts/service.pug rename to src/sections/service.pug diff --git a/src/layouts/welcome.pug b/src/sections/welcome.pug similarity index 50% rename from src/layouts/welcome.pug rename to src/sections/welcome.pug index 641ae51..784ac6b 100644 --- a/src/layouts/welcome.pug +++ b/src/sections/welcome.pug @@ -1,36 +1,71 @@ - var welcome_img_path = "./assets/images/welcome/"; +- var list_food_image_mobile = [{img_mobile_path: welcome_img_path + "food-1-mobile.png", img_desktop_path: welcome_img_path + "food-1-desktop.png"}, {img_mobile_path: welcome_img_path + "food-2-mobile.png", img_desktop_path: welcome_img_path + "food-2-desktop.png"}, {img_mobile_path: welcome_img_path + "food-3-mobile.png", img_desktop_path: welcome_img_path + "food-3-desktop.png"}, {img_mobile_path: welcome_img_path + "food-4-mobile.png", img_desktop_path: welcome_img_path + "food-4-desktop.png"}]; section.welcome .welcome__container .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" - ) - 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__main-image + picture + source( + media="(min-width: 1200px)", + srcset=welcome_img_path + "welcome-image-desktop.png" + ) + img.welcome__banner-img( + src=welcome_img_path + "welcome-image-mobile.png", + alt="Welcome banner image" + ) + each item in list_food_image_mobile + picture.welcome__food-img + source(media="(min-width: 1200px)", srcset=item.img_desktop_path) + img(src=item.img_mobile_path, alt="Food image") + picture + source( + media="(min-width: 1200px)", + srcset=welcome_img_path + "review-card-desktop.png" + ) + img.welcome__review-card( + src=welcome_img_path + "review-card-mobile.png", + alt="Review card" + ) + picture + source( + media="(min-width: 1200px)", + srcset=welcome_img_path + "rate-card-desktop.png" + ) + img.welcome__rate-card( + src=welcome_img_path + "rate-card-mobile.png", + alt="Review card" + ) + .welcome__background-banner + picture + source( + media="(min-width: 1200px)", + 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: 1200px)", + 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" + ) + picture + source( + media="(min-width: 1200px)", + srcset=welcome_img_path + "mint-desktop.png" + ) + img.welcome__mint-img( + src=welcome_img_path + "mint-mobile.png", + alt="Mint image" + ) .welcome__content .welcome__arrow-down-img-wrapper img.welcome__arrow-img-down( diff --git a/src/styles/abstracts/_mixins.scss b/src/styles/abstracts/_mixins.scss index b0fa2d4..c7b1623 100644 --- a/src/styles/abstracts/_mixins.scss +++ b/src/styles/abstracts/_mixins.scss @@ -7,7 +7,7 @@ } @mixin base-icon-menu { - @include size(36px, 3px); + @include size(36px, 5px); background: #000000; border-radius: 10px; @@ -60,12 +60,7 @@ } } -@mixin set-absolute-and-location( - $top: null, - $left: null, - $right: null, - $bottom: null -) { +@mixin set-location($top: null, $left: null, $right: null, $bottom: null) { @if $top != null { top: $top; } diff --git a/src/styles/abstracts/_variables.scss b/src/styles/abstracts/_variables.scss index b33b5d0..72d5adb 100644 --- a/src/styles/abstracts/_variables.scss +++ b/src/styles/abstracts/_variables.scss @@ -8,6 +8,7 @@ $white: #fff; $gray: #686d77; $primary-color: #f54748; $secondary-color: #fdc55e; +$secondary-light-color: #f7d699; // Font size $fs-xx-sm: 14px; diff --git a/src/styles/bases/_typography.scss b/src/styles/bases/_typography.scss index 889a589..dd250e8 100644 --- a/src/styles/bases/_typography.scss +++ b/src/styles/bases/_typography.scss @@ -42,4 +42,5 @@ $font-path: "../assets/fonts"; * { font-family: $primary-font; + line-height: normal; } diff --git a/src/styles/components/_button.scss b/src/styles/components/_button.scss index 229e758..c15fc81 100644 --- a/src/styles/components/_button.scss +++ b/src/styles/components/_button.scss @@ -1,6 +1,6 @@ .btn { align-self: center; - padding: 13px 20px; + padding: 11px 20px; background-color: $primary-color; border-radius: 100px; font-size: $fs-md; diff --git a/src/styles/components/_card-item.scss b/src/styles/components/_card-item.scss index 2d80572..d4e5f80 100644 --- a/src/styles/components/_card-item.scss +++ b/src/styles/components/_card-item.scss @@ -11,14 +11,14 @@ .food-image { @extend %absolute; - @include set-absolute-and-location($top: 29px); + @include set-location($top: 29px); margin: auto; } .price { @extend %absolute; - @include set-absolute-and-location($top: 176px, $right: 70px); + @include set-location($top: 176px, $right: 70px); @include size(52px, 52px); color: $white; @@ -32,7 +32,7 @@ .content-card { @extend %d-flex, %align-center-col, %absolute; - @include set-absolute-and-location($bottom: 60px); + @include set-location($bottom: 72px); @include size(100%, auto); } @@ -41,6 +41,10 @@ @include flex-layout($align: center, $gap: 10px); } +.rate-point { + font-size: $fs-md; +} + .star-container { @include size(24px, 22px); } @@ -54,21 +58,21 @@ .avatar { &:first-child { @extend %absolute; - @include set-absolute-and-location($left: 38px); + @include set-location($left: 38px); z-index: 2; } &:nth-child(2) { @extend %absolute; - @include set-absolute-and-location($left: 19px); + @include set-location($left: 19px); z-index: 1; } &:last-child { @extend %absolute; - @include set-absolute-and-location($left: 0); + @include set-location($left: 0); } } @@ -83,7 +87,7 @@ @include size(100%, auto); max-width: 243px; - margin-top: 16px; + margin-top: 13px; text-align: center; text-transform: capitalize; color: $black; @@ -91,7 +95,7 @@ .order-btn { @extend %absolute; - @include set-absolute-and-location($bottom: 0px); + @include set-location($bottom: 0px); padding: 10px 20px; text-transform: capitalize; diff --git a/src/styles/components/_toggle-menu.scss b/src/styles/components/_toggle-menu.scss index 74e7ceb..953a85a 100644 --- a/src/styles/components/_toggle-menu.scss +++ b/src/styles/components/_toggle-menu.scss @@ -3,17 +3,18 @@ position: relative; cursor: pointer; + top: -1px; &:before { @include icon-menu; - top: -10px; + top: -11px; } &:after { @include icon-menu; - top: 10px; + top: 11px; } } diff --git a/src/styles/layouts/_footer.scss b/src/styles/layouts/_footer.scss index 300b89b..920fe34 100644 --- a/src/styles/layouts/_footer.scss +++ b/src/styles/layouts/_footer.scss @@ -11,23 +11,35 @@ max-width: 428px; } - &__branch-name { + &__brand-name { font-size: $fs-x-lg; font-weight: 600; } &__introduction .footer__description { - margin-top: 10px; + margin-top: 8 px; font-size: $fs-md; max-width: 325px; } &__social-media { @extend %d-flex; - @include flex-layout($gap: 30px); + @include flex-layout($gap: 30px, $align: center); margin-top: 22.6px; } + &__social-link:first-child { + @include size(auto, 21px); + } + + &__social-link:nth-child(2) { + @include size(auto, 19px); + } + + &__social-link:nth-child(3) { + @include size(auto, 17px); + } + &__information { @extend %d-flex; @include flex-layout($gap: 80px); @@ -87,6 +99,8 @@ @extend %mr-ml-auto; @include size(fit-content, auto); + font-size: $fs-x-sm; + font-family: $secondary-font; margin-top: 80px; padding-bottom: 29px; } @@ -97,7 +111,7 @@ &__container { display: grid; grid-template-columns: 1fr 1fr; - max-width: 1440px; + max-width: $max-width; width: auto; padding-inline: 90px; column-gap: 10px; @@ -126,7 +140,21 @@ } &__introduction { - margin-top: 15px; + padding-top: 119px; + padding-left: 112px; + } + + &__information { + padding-top: 155px; + } + + &__description { + margin-top: 9px; + padding-left: 1px; + } + + &__contact { + padding-top: 125px; } } } diff --git a/src/styles/layouts/_header.scss b/src/styles/layouts/_header.scss index 9f71f26..2af581f 100644 --- a/src/styles/layouts/_header.scss +++ b/src/styles/layouts/_header.scss @@ -1,6 +1,6 @@ .header { @extend %absolute; - @include set-absolute-and-location($top: 0, $right: 0, $left: 0); + @include set-location($top: 0, $right: 0, $left: 0); max-width: 428px; margin: auto; @@ -42,5 +42,6 @@ @include size(100%, auto); max-width: 918px; + padding-bottom: 26px; } } diff --git a/src/styles/layouts/_menu.scss b/src/styles/layouts/_menu.scss index 8c10685..0c9f8fb 100644 --- a/src/styles/layouts/_menu.scss +++ b/src/styles/layouts/_menu.scss @@ -12,7 +12,7 @@ &__container { @extend %mr-inline-auto; - padding-top: 150px; + padding-top: 110px; max-width: 424px; } @@ -29,11 +29,11 @@ @extend %d-flex; @include flex-layout($gap: 30px); - margin-top: 62px; - padding-left: 50px; + margin-top: 74px; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; + padding-left: 49px; &::-webkit-scrollbar { display: none; @@ -60,9 +60,9 @@ display: grid; grid-auto-flow: column; grid-auto-columns: 100%; - column-gap: 18px; + column-gap: 70px; margin-top: 43px; - margin-inline: 59px; + padding-inline: 59px; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; @@ -84,7 +84,6 @@ } &__list-category { - max-width: 1018px; margin-inline: 59px; } @@ -98,10 +97,28 @@ @media screen and (min-width: 1200px) { .menu { + &__container { + padding-top: 160px; + } + + &__list-category { + @include flex-layout($gap: 33px); + + margin-top: 58px; + } + &__list-category { max-width: 1018px; margin-inline: auto; padding-left: unset; + overflow-x: unset; + } + + &__card-list { + margin-inline: auto; + max-width: 1294px; + column-gap: 18px; + margin-top: 106px; } } } diff --git a/src/styles/layouts/_navbar.scss b/src/styles/layouts/_navbar.scss index 70ab433..ca652ba 100644 --- a/src/styles/layouts/_navbar.scss +++ b/src/styles/layouts/_navbar.scss @@ -10,6 +10,7 @@ right: 25px; background-color: $white; z-index: 2; + border-radius: 20px; } .nav-download-btn { @@ -27,8 +28,8 @@ border-bottom: unset; } - &:hover { - background-color: $secondary-color; + &:hover .nav-link { + color: $secondary-color; } } @@ -67,13 +68,9 @@ border-bottom: none; padding: 0; text-align: center; - - &:hover { - background-color: unset; - } } - .nav-link:hover { - color: $secondary-color; - } + // .nav-link:hover { + // color: $secondary-color; + // } } diff --git a/src/styles/layouts/_offer.scss b/src/styles/layouts/_offer.scss index c61d263..d7c65ff 100644 --- a/src/styles/layouts/_offer.scss +++ b/src/styles/layouts/_offer.scss @@ -9,13 +9,13 @@ max-width: 380px; margin: auto; - padding-top: 101px; + padding-top: 90px; position: relative; } &__dot-background { @extend %absolute; - @include set-absolute-and-location($top: 168px, $left: 0px); + @include set-location($top: 168px, $left: 0px); display: none; } @@ -32,7 +32,7 @@ text-transform: capitalize; text-align: center; color: $black; - margin-top: 15px; + margin-top: 22px; max-width: 856px; margin-inline: auto; } @@ -42,7 +42,7 @@ @include flex-layout($wrap: nowrap, $gap: 70px); padding-inline: 35px; - padding-top: 65px; + margin-top: 65px; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; @@ -54,7 +54,7 @@ &__rosemary-container { @extend %absolute; - @include set-absolute-and-location($bottom: -120px, $right: 0); + @include set-location($bottom: -95px, $right: 0); z-index: 0; } @@ -82,7 +82,22 @@ } @media screen and (min-width: 1200px) { - .offer__dot-background { - display: block; + .offer { + &__dot-background { + display: block; + } + + &__container { + padding-top: 142px; + } + + &__description { + margin-top: 27px; + padding-left: 64px; + } + + &__card-list { + margin-top: 67px; + } } } diff --git a/src/styles/layouts/_platform.scss b/src/styles/layouts/_platform.scss index 3a16413..141bb2b 100644 --- a/src/styles/layouts/_platform.scss +++ b/src/styles/layouts/_platform.scss @@ -18,16 +18,45 @@ position: relative; max-width: 100%; + text-align: right; } &__main-image { @extend %absolute; - @include set-absolute-and-location($top: 0, $right: 0); + @include set-location($top: 0px, $left: 60px); + } + + &__image-food:first-child { + @extend %absolute; + @include set-location($bottom: 54px, $right: 163px); + + z-index: 1; + } + + &__image-food:nth-child(2) { + @extend %absolute; + @include set-location($bottom: 67px, $right: 118px); + + z-index: 1; + } + + &__image-food:nth-child(3) { + @extend %absolute; + @include set-location($bottom: 92px, $right: 75px); + + z-index: 1; + } + + &__image-food:nth-child(4) { + @extend %absolute; + @include set-location($bottom: 147px, $right: 45px); + + z-index: 1; } &__content { - padding-top: 52px; - padding-left: 20px; + padding-top: 46px; + padding-left: 25px; } &__heading { @@ -39,7 +68,7 @@ &__description { font-size: $fs-md; color: $black; - margin-top: 23px; + margin-top: 31px; max-width: 366px; } @@ -57,17 +86,39 @@ @include flex-layout($direction: row-reverse, $align: center); display: flex; - max-width: 1440px; + max-width: $max-width; max-height: 632px; padding-top: 50px; } &__image-container { - @include size(704px, 786px); + @include size(100%, 500px); + } + + &__background-img { + @include set-location($top: 0px, $right: 0px); + + position: absolute; } &__main-image { - @include set-absolute-and-location($top: 160px, $right: 0); + @include set-location($top: 0px, $right: 58px, $left: unset); + } + + &__image-food:first-child { + @include set-location($bottom: 53px, $right: 160px); + } + + &__image-food:nth-child(2) { + @include set-location($bottom: 68px, $right: 117px); + } + + &__image-food:nth-child(3) { + @include set-location($bottom: 90px, $right: 70px); + } + + &__image-food:nth-child(4) { + @include set-location($bottom: 145px, $right: 43px); } &__heading { @@ -83,11 +134,50 @@ @media screen and (min-width: 1200px) { .platform { &__container { - padding-top: 170px; + @include flex-layout($justify: space-between); + + display: flex; + padding-top: 122px; + } + + &__image-container { + @include size(600px, 632px); + + text-align: right; } &__main-image { - @include set-absolute-and-location($top: 70px, $right: 0); + @include set-location($top: 20px, $right: 105px); + } + + &__background-img { + @include set-location($top: 20px, $right: 00px); + } + + &__image-food:first-child { + @include set-location($bottom: -65px, $right: 263px); + } + + &__image-food:nth-child(2) { + @include set-location($bottom: -40px, $right: 190px); + } + + &__image-food:nth-child(3) { + @include set-location($bottom: -8px, $right: 125px); + } + + &__image-food:nth-child(4) { + @include set-location($bottom: 80px, $right: 80px); + } + + &__heading, + &__description, + &__store-container { + padding-left: 47px; + } + + &__description { + margin-top: 52px; } } } diff --git a/src/styles/layouts/_service.scss b/src/styles/layouts/_service.scss index 5775af4..2390a81 100644 --- a/src/styles/layouts/_service.scss +++ b/src/styles/layouts/_service.scss @@ -10,7 +10,7 @@ &__background-color { @extend %absolute; - @include set-absolute-and-location($top: 200px, $left: 0); + @include set-location($top: 200px, $left: 0); @include size(100%, 50%); background: linear-gradient( @@ -30,20 +30,21 @@ &__background-img { @extend %absolute; - @include set-absolute-and-location($top: 65px, $left: 0); + @include set-location($top: 75px, $left: 0); } &__main-img { @extend %absolute; - @include set-absolute-and-location($top: 60px, $left: 35px); + @include set-location($top: 70px, $left: 35px); } &__vegetable-img { @extend %absolute; - @include set-absolute-and-location($bottom: 0, $left: 50px); + @include set-location($bottom: -10px, $left: 50px); } &__content { + margin-top: 65px; padding-inline: 24px; z-index: 1; @@ -70,14 +71,14 @@ @include flex-layout( $direction: column, $justify: space-between, - $gap: 41px + $gap: 40px ); max-width: 514px; margin-top: 81px; &-list { @extend %d-flex; - @include flex-layout($direction: column, $gap: 30px, $justify: center); + @include flex-layout($direction: column, $gap: 33px, $justify: center); } } @@ -88,6 +89,7 @@ &__name-category { font-size: $fs-md; + text-transform: capitalize; } &__btn { @@ -130,12 +132,12 @@ } &__background-img { - @include set-absolute-and-location($top: 100px, $left: 0); + @include set-location($top: 100px, $left: 0); @extend %absolute_840; } &__background-color { - @include set-absolute-and-location($top: 400px, $left: -100px); + @include set-location($top: 400px, $left: -100px); @include size(400px, 50%); border-radius: 50%; @@ -149,12 +151,12 @@ } &__main-img { - @include set-absolute-and-location($top: 95px, $left: 35px); + @include set-location($top: 95px, $left: 35px); @extend %absolute_840; } &__vegetable-img { - @include set-absolute-and-location($bottom: 145px, $left: 50px); + @include set-location($bottom: 145px, $left: 50px); @extend %absolute_840; } @@ -186,12 +188,12 @@ } &__background-img { - @include set-absolute-and-location($top: 0px, $left: 0); + @include set-location($top: 0px, $left: 0); @extend %absolute_1200; } &__background-color { - @include set-absolute-and-location($left: -150px); + @include set-location($left: -150px); @include size(500px, 50%); border-radius: 50%; @@ -212,17 +214,24 @@ } &__main-img { - @include set-absolute-and-location($top: -17px, $left: 70px); - @extend %absolute_1200; + @include set-location($top: 45px, $left: 70px); } &__vegetable-img { - @include set-absolute-and-location($bottom: 95px, $left: 105px); - @extend %absolute_1200; + @include set-location($bottom: 35px, $left: 92px); + } + + &__background-img { + @include set-location($top: 55px, $left: 0); + } + + &__category-list { + @include flex-layout($gap: 34px); } &__content { - padding-top: 50px; + padding-top: 78px; + padding-left: 29px; } } } diff --git a/src/styles/layouts/_welcome.scss b/src/styles/layouts/_welcome.scss index 275fb2f..97fcf74 100644 --- a/src/styles/layouts/_welcome.scss +++ b/src/styles/layouts/_welcome.scss @@ -10,13 +10,15 @@ rgba(245, 71, 72, 0) 100% ); + padding-top: 50px; + &__container { @extend %d-flex; @include flex-layout($justify: center, $direction: column); margin: auto; max-width: 428px; - padding-top: 117px; + padding-top: 67px; } // Start banner &__banner-container { @@ -27,25 +29,60 @@ position: relative; } - &__banner-img { + &__main-image { + text-align: right; + padding-right: 25px; z-index: 1; } + &__food-img:nth-child(2) { + @extend %absolute; + @include set-location($bottom: 75px, $left: 12px); + } + + &__food-img:nth-child(3) { + @extend %absolute; + @include set-location($bottom: -7px, $left: 110); + } + + &__food-img:nth-child(4) { + @extend %absolute; + @include set-location($bottom: 0px, $right: 80px); + } + + &__food-img:nth-child(5) { + @extend %absolute; + @include set-location($bottom: 85px, $right: 15px); + } + + &__review-card { + @extend %absolute; + @include set-location($top: 100px, $left: 10px); + } + + &__rate-card { + @extend %absolute; + @include set-location($top: 103px, $right: 0); + } + + &__background-banner { + @extend %absolute; + @include size(100%, 100%); + } + &__lines-background { @extend %absolute; - @include set-absolute-and-location($top: -76px, $right: 0); - @include size(187px, 430px); + @include set-location($top: -85px, $right: 1px); } &__arrow-img-up { @extend %absolute; - @include set-absolute-and-location($top: -15px, $right: 50px); - @include size(43px, 215px); + @include set-location($top: -15px, $right: 40px); } &__mint-img { @extend %absolute; - @include set-absolute-and-location($bottom: 100px, $right: 0); + @include set-location($bottom: 90px, $right: 0px); } // End banner @@ -56,7 +93,7 @@ @include flex-layout($direction: column); position: relative; - padding-top: 63.37px; + padding-top: 58px; padding-inline: 24px; } @@ -68,7 +105,7 @@ &__orange-img-wrapper { @extend %absolute; - @include set-absolute-and-location($top: 0, $right: 35px); + @include set-location($top: 7px, $right: 0); } &__text-box { @@ -78,7 +115,8 @@ background-color: #feeae9; border-radius: 100px; - padding: 6px; + padding: 4px; + margin-left: 10px; font-size: $fs-xx-sm; } @@ -97,11 +135,11 @@ &__head-arrow-container { @include size(13px, 7.3px); @extend %absolute; - @include set-absolute-and-location($right: 107px); + @include set-location($right: 107px); } &__heading { - margin-top: 20px; + margin-top: 12px; font-size: $fs-xx-lg; text-transform: capitalize; font-weight: 900; @@ -110,11 +148,11 @@ &__underline-img-container { @extend %absolute; - @include set-absolute-and-location($bottom: -20px, $left: 0px); + @include set-location($bottom: -27px, $left: 0px); } &__description { - margin-top: 35px; + margin-top: 40px; font-size: $fs-x-md; line-height: 140%; letter-spacing: -0.2px; @@ -158,7 +196,7 @@ cursor: pointer; &:hover { - background-color: #f7d699; + background-color: $secondary-light-color; transition: 0.2s; } } @@ -168,7 +206,7 @@ @include flex-layout($justify: space-between, $gap: 10px); width: 100%; - margin-top: 44px; + margin-top: 35px; max-width: 376px; } @@ -200,7 +238,7 @@ padding: 17.5px 20px; border-radius: 50px; background-color: $white; - box-shadow: 0 40px 50px 3px rgba($color: $primary-color, $alpha: 0.5); + box-shadow: 0 25px 50px 3px rgba($color: $primary-color, $alpha: 0.4); transition: width 0.5s; line-height: 100%; } @@ -236,8 +274,8 @@ &__container { @include flex-layout( $direction: row-reverse, - $align: center, - $justify: space-between + $justify: space-between, + $align: center ); padding-top: 130px; @@ -245,48 +283,18 @@ max-width: $max-width; } - // Start banner - &__banner-img { - @include size(100%, 100%); - - max-width: 650px; - } - - &__lines-background { - @include set-absolute-and-location($top: -150px, $right: 0px); - @include size(313px, 718px); - } - - &__arrow-img-up { - @include size(117px, 315px); - @include set-absolute-and-location($top: -40px, $right: 5px); - - transition: 0.2s; - } - - &__head-arrow-container { - display: none; - } - - &__banner-container { - @include size(auto, auto); - - max-width: 1000px; - min-width: 500px; - } - // End banner - // Start content &__content { @include size(auto, auto); padding-left: 70px; padding-right: 0px; + padding-top: 70px; max-width: 560px; } &__orange-img-wrapper { - @include set-absolute-and-location($top: 170px, $right: -50px); + @include set-location($top: 170px, $right: -50px); transition: 0.2s; } @@ -297,7 +305,7 @@ } &__underline-img-container { - @include set-absolute-and-location($bottom: -25px, $left: 8px); + @include set-location($bottom: -25px, $left: 8px); } &__description { @@ -317,7 +325,7 @@ } &__arrow-down-img-wrapper { - @include set-absolute-and-location($top: -50px, $left: 220px); + @include set-location($top: -50px, $left: 220px); display: block; transition: 0.2s; @@ -329,7 +337,7 @@ &__slider-container { display: block; - @include set-absolute-and-location($bottom: -135px, $left: 65px); + @include set-location($bottom: -135px, $left: 65px); } // End content @@ -338,20 +346,85 @@ @media screen and (min-width: 1200px) { .welcome { + padding-top: 0px; + + // Start banner + &__banner { + padding-right: 96px; + } + &__banner-container { - padding-right: 74px; + @include size(100%, auto); + } + + &__main-image { + padding-right: 29px; } &__arrow-img-up { - @include set-absolute-and-location($top: 8px, $right: 62px); + @include set-location($top: 4px, $right: -34px); } &__orange-img-wrapper { - @include set-absolute-and-location($top: 110px, $right: -50px); + @include set-location($top: 110px, $right: -50px); } &__arrow-down-img-wrapper { - @include set-absolute-and-location($top: -75px, $left: 230px); + @include set-location($top: -40px, $left: 223px); + } + + &__lines-background { + @include set-location($top: -85px, $right: -98px); + } + + &__review-card { + @include set-location($top: 160px, $left: -47px); + } + + &__rate-card { + @include set-location($top: 168px, $right: -62px); + } + + &__food-img:nth-child(2) { + @include set-location($bottom: 108px, $left: -68px); + } + + &__food-img:nth-child(3) { + @include set-location($bottom: -29px, $left: 102); + } + + &__food-img:nth-child(4) { + @include set-location($bottom: -19px, $right: 107px); + } + + &__food-img:nth-child(5) { + @include set-location($bottom: 125px, $right: -1px); + } + + // End banner + + &__container { + @include flex-layout($align: unset, $gap: 50px); + } + + &__content { + padding-top: 81px; + } + + &__text-box { + padding-left: 1px; + } + + &__description { + margin-top: 29px; + } + + &__search-form { + margin-top: 24px; + } + + &__slider-container { + @include set-location($bottom: -58px, $left: 68px); } } }