From cd59768e88f62e66bf699c47cc062bb5fcbdf022 Mon Sep 17 00:00:00 2001 From: Loi Phan Date: Thu, 3 Aug 2023 10:39:13 +0700 Subject: [PATCH] Update code --- src/index.pug | 14 +- src/sections/menu.pug | 29 +- src/sections/offer.pug | 43 +-- src/sections/platform.pug | 93 +++--- src/sections/service.pug | 107 +++---- src/sections/welcome.pug | 275 +++++++++--------- src/styles/{main.scss => _main.scss} | 10 +- src/styles/bases/_base.scss | 11 + src/styles/bases/_typography.scss | 12 + src/styles/components/_card-item.scss | 2 +- src/styles/layouts/_footer.scss | 2 - src/styles/layouts/_header.scss | 2 - .../{sections => pages/home}/_menu.scss | 6 +- .../{sections => pages/home}/_offer.scss | 5 +- .../{sections => pages/home}/_platform.scss | 22 +- .../{sections => pages/home}/_service.scss | 6 +- .../{sections => pages/home}/_welcome.scss | 10 +- 17 files changed, 333 insertions(+), 316 deletions(-) rename src/styles/{main.scss => _main.scss} (69%) rename src/styles/{sections => pages/home}/_menu.scss (96%) rename src/styles/{sections => pages/home}/_offer.scss (95%) rename src/styles/{sections => pages/home}/_platform.scss (91%) rename src/styles/{sections => pages/home}/_service.scss (98%) rename src/styles/{sections => pages/home}/_welcome.scss (98%) diff --git a/src/index.pug b/src/index.pug index 328fcdc..12af2fe 100644 --- a/src/index.pug +++ b/src/index.pug @@ -1,15 +1,15 @@ include ./includes/mixins doctype html -html(lang="en") +html(lang='en') head - meta(charset="UTF-8") - meta(name="viewport", content="width=device-width, initial-scale=1.0") - link(rel="stylesheet", href="./styles/main.scss") + meta(charset='UTF-8') + meta(name='viewport', content='width=device-width, initial-scale=1.0') + link(rel='stylesheet', href='./styles/_main.scss') link( - rel="icon", - type="image/x-icon", - href="./assets/images/favicon-16x16.png" + rel='icon', + type='image/x-icon', + href='./assets/images/favicon-16x16.png' ) title Food Hut body diff --git a/src/sections/menu.pug b/src/sections/menu.pug index fae4769..bb70ba3 100644 --- a/src/sections/menu.pug +++ b/src/sections/menu.pug @@ -6,18 +6,19 @@ - var default_food_data = { price: '10', ratePoint: '4.5', foodName: 'Kebab', foodDescription: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry', avatarImageList: [{ avatarUrl: avatar_img_path + 'avatar-1.png' }, { avatarUrl: avatar_img_path + 'avatar-2.png' }, { avatarUrl: avatar_img_path + 'avatar-3.png' }] }; section.menu - .menu__container - h2.menu__heading - span.text--primary Menu - = ' That ' - span.text--secondary Always - = ' Make You Fall In ' - span.text--primary Love - .menu__list-category - each item in list_category - a.menu__category-item.link-text(href='javascript:void(0)')= item - .menu__card-list - each url in list_image_food - - var image_food = { imageUrl: url }; + .wrapper + .menu__container + h2.menu__heading + span.text--primary Menu + = ' That ' + span.text--secondary Always + = ' Make You Fall In ' + span.text--primary Love + .menu__list-category + each item in list_category + a.menu__category-item.link-text(href='javascript:void(0)')= item + .menu__card-list + each url in list_image_food + - var image_food = { imageUrl: url }; - +foodItemCard({ ...image_food, ...default_food_data }) + +foodItemCard({ ...image_food, ...default_food_data }) diff --git a/src/sections/offer.pug b/src/sections/offer.pug index 0e9500b..331facd 100644 --- a/src/sections/offer.pug +++ b/src/sections/offer.pug @@ -9,24 +9,25 @@ - var list_food = [food_1, food_2, food_3, food_4]; section.offer - .offer__container - .offer__dot-background - img( - src=offer_img_path + 'dot-background.png', - alt='Dot background image' - ) - h2.offer__heading Today - = ' ' - span.text--primary Special - = ' Offers' - p.offer__description Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s - .offer__card-list - each val in list_food - +foodItemCard(val) - .offer__rosemary-container - picture - source( - media='(min-width: 840px)', - srcset=offer_img_path + 'rosemary-desktop.png' - ) - img(src=offer_img_path + 'rosemary-mobile.png', alt='Rosemary image') + .wrapper + .offer__container + .offer__dot-background + img( + src=offer_img_path + 'dot-background.png', + alt='Dot background image' + ) + h2.offer__heading Today + = ' ' + span.text--primary Special + = ' Offers' + p.offer__description Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s + .offer__card-list + each val in list_food + +foodItemCard(val) + .offer__rosemary-container + picture + source( + media='(min-width: 840px)', + srcset=offer_img_path + 'rosemary-desktop.png' + ) + img(src=offer_img_path + 'rosemary-mobile.png', alt='Rosemary image') diff --git a/src/sections/platform.pug b/src/sections/platform.pug index 0fe4beb..5badaad 100644 --- a/src/sections/platform.pug +++ b/src/sections/platform.pug @@ -2,51 +2,52 @@ - 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' - ) - source( - media='(min-width: 600px)', - srcset=platform_image_path + 'background-tablet.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.text--primary More Easy - = ' to ' - span.text--secondary Order - = ' by Our Mobile ' - span.text--primary 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' + .wrapper + .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' ) - .platform__app-store - img.platform__app-store-image( - src=platform_image_path + 'app-store.png', - alt='App store image' + source( + media='(min-width: 600px)', + srcset=platform_image_path + 'background-tablet.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.text--primary More Easy + = ' to ' + span.text--secondary Order + = ' by Our Mobile ' + span.text--primary 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/sections/service.pug b/src/sections/service.pug index 0826381..111940e 100644 --- a/src/sections/service.pug +++ b/src/sections/service.pug @@ -4,56 +4,57 @@ - var list_service_category = [list_service_category_1, list_service_category_2]; section.service - .service__container - .service__background-color - .service__img-container - picture - source( - media='(min-width: 1200px)', - srcset=service_img_path + 'background-desktop.png' - ) - source( - media='(min-width: 600px)', - srcset=service_img_path + 'background-tablet.png' - ) - img.service__background-img( - src=service_img_path + 'background-mobile.png', - alt='Background image' - ) - picture - source( - media='(min-width: 1200px)', - srcset=service_img_path + 'main-character-desktop.png' - ) - img.service__main-img( - src=service_img_path + 'main-character-mobile.png', - alt='Main character image' - ) - picture - source( - media='(min-width: 1200px)', - srcset=service_img_path + 'vegetable-desktop.png' - ) - img.service__vegetable-img( - src=service_img_path + 'vegetable-mobile.png', - alt='Vegetable background image' - ) - .service__content - h2.service__heading We are - = ' ' - span.text--primary more - = ' than ' - span.text--secondary multiple - = ' service' - p.service__description This is a type of resturent which typically serves food and drink, in addition to light refreshments such as baked goods or snacks. The term comes frome the rench word meaning food - .service__category - each list in list_service_category - .service__category-list - each item in list - .service__category-item - img.service__icon-category( - src=item.url_icon, - alt='Icon category' - ) - p.service__name-category= item.content - a.service__btn.btn(href='javascript:void(0)') About us + .wrapper + .service__container + .service__background-color + .service__img-container + picture + source( + media='(min-width: 1200px)', + srcset=service_img_path + 'background-desktop.png' + ) + source( + media='(min-width: 600px)', + srcset=service_img_path + 'background-tablet.png' + ) + img.service__background-img( + src=service_img_path + 'background-mobile.png', + alt='Background image' + ) + picture + source( + media='(min-width: 1200px)', + srcset=service_img_path + 'main-character-desktop.png' + ) + img.service__main-img( + src=service_img_path + 'main-character-mobile.png', + alt='Main character image' + ) + picture + source( + media='(min-width: 1200px)', + srcset=service_img_path + 'vegetable-desktop.png' + ) + img.service__vegetable-img( + src=service_img_path + 'vegetable-mobile.png', + alt='Vegetable background image' + ) + .service__content + h2.service__heading We are + = ' ' + span.text--primary more + = ' than ' + span.text--secondary multiple + = ' service' + p.service__description This is a type of resturent which typically serves food and drink, in addition to light refreshments such as baked goods or snacks. The term comes frome the rench word meaning food + .service__category + each list in list_service_category + .service__category-list + each item in list + .service__category-item + img.service__icon-category( + src=item.url_icon, + alt='Icon category' + ) + p.service__name-category= item.content + a.service__btn.btn(href='javascript:void(0)') About us diff --git a/src/sections/welcome.pug b/src/sections/welcome.pug index 30d0fe1..cea71f6 100644 --- a/src/sections/welcome.pug +++ b/src/sections/welcome.pug @@ -2,141 +2,148 @@ - 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 - .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' - ) - 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' - ) - .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 + '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( - 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' + .wrapper + .welcome__container + .welcome__banner + .welcome__banner-container + .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' + ) + 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' + ) + .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 + '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( + src=welcome_img_path + 'arrow-desktop-2.png', + alt='Arrow image down' ) - 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.text--primary serious - = ' for ' - span.text--primary food - = ' & ' - .delivery-text-box - span.text--secondary delivery - .welcome__underline-img-container - img.welcome__underline-img( - src=welcome_img_path + 'underline.png', - alt='Underline image' + .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.text--primary serious + = ' for ' + span.text--primary food + = ' & ' + .delivery-text-box + span.text--secondary delivery + .welcome__underline-img-container + img.welcome__underline-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.link-text(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' + 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' ) - 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' - ) + 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.link-text(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/src/styles/main.scss b/src/styles/_main.scss similarity index 69% rename from src/styles/main.scss rename to src/styles/_main.scss index 193a01a..52dfd66 100644 --- a/src/styles/main.scss +++ b/src/styles/_main.scss @@ -17,8 +17,8 @@ @import './layouts/footer'; //Sections -@import './sections/welcome'; -@import './sections/offer'; -@import './sections/service'; -@import './sections/menu'; -@import './sections/platform'; +@import './pages/home/welcome'; +@import './pages/home/offer'; +@import './pages/home/service'; +@import './pages/home/menu'; +@import './pages/home/platform'; diff --git a/src/styles/bases/_base.scss b/src/styles/bases/_base.scss index f9309c0..40524a9 100644 --- a/src/styles/bases/_base.scss +++ b/src/styles/bases/_base.scss @@ -1,3 +1,14 @@ body { min-width: 428px; } + +.wrapper { + max-width: 428px; + margin-inline: auto; +} + +@media screen and (min-width: 600px) { + .wrapper { + max-width: $max-width; + } +} diff --git a/src/styles/bases/_typography.scss b/src/styles/bases/_typography.scss index ec1f792..c6cfecf 100644 --- a/src/styles/bases/_typography.scss +++ b/src/styles/bases/_typography.scss @@ -9,6 +9,8 @@ $font-path: '../assets/fonts'; src: url('#{$font-path}/sofia-pro-regular.woff2') format('woff2'), url('#{$font-path}/sofia-pro-regular.ttf') format('truetype'); font-weight: 400; + + font-display: swap; } @font-face { @@ -16,6 +18,8 @@ $font-path: '../assets/fonts'; src: url('#{$font-path}/sofia-pro-medium.woff2') format('woff2'), url('#{$font-path}/sofia-pro-medium.ttf') format('truetype'); font-weight: 600; + + font-display: swap; } @font-face { @@ -23,6 +27,8 @@ $font-path: '../assets/fonts'; src: url('#{$font-path}/sofia-pro-semi-bold.woff2') format('woff2'), url('#{$font-path}/sofia-pro-semi-bold.ttf') format('truetype'); font-weight: 700; + + font-display: swap; } @font-face { @@ -30,18 +36,24 @@ $font-path: '../assets/fonts'; src: url('#{$font-path}/sofia-pro-bold.woff2') format('woff2'), url('#{$font-path}/sofia-pro-bold.ttf') format('truetype'); font-weight: 900; + + font-display: swap; } @font-face { font-family: 'Inter'; src: url('#{$font-path}/inter.woff2') format('woff2'), url('#{$font-path}/inter.ttf') format('truetype'); + + font-display: swap; } @font-face { font-family: 'Poppins'; src: url('#{$font-path}/poppins-medium.woff2') format('woff2'), url('#{$font-path}/poppins-medium.ttf') format('truetype'); + + font-display: swap; } * { diff --git a/src/styles/components/_card-item.scss b/src/styles/components/_card-item.scss index b8a64b6..dae5327 100644 --- a/src/styles/components/_card-item.scss +++ b/src/styles/components/_card-item.scss @@ -4,7 +4,7 @@ .card { @extend %d-flex, %align-center-col; - @include size(auto, 516px); + @include size(310px, 516px); position: relative; diff --git a/src/styles/layouts/_footer.scss b/src/styles/layouts/_footer.scss index f3999de..3909cea 100644 --- a/src/styles/layouts/_footer.scss +++ b/src/styles/layouts/_footer.scss @@ -8,7 +8,6 @@ padding-top: 116px; padding-left: 24px; - max-width: 428px; } &__brand-name { @@ -117,7 +116,6 @@ &__container { display: grid; grid-template-columns: 1fr 1fr; - max-width: $max-width; width: auto; column-gap: 10px; padding-inline: 10px; diff --git a/src/styles/layouts/_header.scss b/src/styles/layouts/_header.scss index 1d4d782..c6d0c10 100644 --- a/src/styles/layouts/_header.scss +++ b/src/styles/layouts/_header.scss @@ -30,8 +30,6 @@ @media screen and (min-width: 1020px) { .header { @include size(auto, auto); - - max-width: $max-width; } .header__container { diff --git a/src/styles/sections/_menu.scss b/src/styles/pages/home/_menu.scss similarity index 96% rename from src/styles/sections/_menu.scss rename to src/styles/pages/home/_menu.scss index 4e187d6..7830f5f 100644 --- a/src/styles/sections/_menu.scss +++ b/src/styles/pages/home/_menu.scss @@ -12,7 +12,6 @@ @extend %mr-inline-auto; padding-top: 110px; - max-width: 424px; } &__heading { @@ -74,10 +73,6 @@ @media screen and (min-width: 600px) { .menu { - &__container { - max-width: $max-width; - } - &__heading { max-width: 653px; } @@ -128,6 +123,7 @@ max-width: 1294px; column-gap: 18px; margin-top: 106px; + padding-inline: unset; } } } diff --git a/src/styles/sections/_offer.scss b/src/styles/pages/home/_offer.scss similarity index 95% rename from src/styles/sections/_offer.scss rename to src/styles/pages/home/_offer.scss index 75cb543..37e89a6 100644 --- a/src/styles/sections/_offer.scss +++ b/src/styles/pages/home/_offer.scss @@ -1,6 +1,5 @@ .offer { position: relative; - max-width: 428px; margin-inline: auto; &__container { @@ -61,10 +60,8 @@ @media screen and (min-width: 600px) { .offer { - max-width: $max-width; - &__container { - max-width: $max-width; + max-width: unset; } &__card-list { diff --git a/src/styles/sections/_platform.scss b/src/styles/pages/home/_platform.scss similarity index 91% rename from src/styles/sections/_platform.scss rename to src/styles/pages/home/_platform.scss index a7a25ab..05fbfcf 100644 --- a/src/styles/sections/_platform.scss +++ b/src/styles/pages/home/_platform.scss @@ -1,20 +1,18 @@ .platform { + background: linear-gradient( + 0, + rgba(253, 197, 94, 0.15) 0%, + rgba(253, 197, 94, 0.05) 50%, + rgba(253, 197, 94, 0) 100% + ); &__container { - max-width: 428px; margin-inline: auto; padding-top: 26px; padding-bottom: 58px; - - background: linear-gradient( - 0, - rgba(253, 197, 94, 0.15) 0%, - rgba(253, 197, 94, 0.05) 50%, - rgba(253, 197, 94, 0) 100% - ); } &__image-container { - @include size(auto, 502px); + @include size(428px, 502px); position: relative; max-width: 100%; @@ -81,10 +79,6 @@ @media screen and (min-width: 600px) { .platform { - &__container { - max-width: $max-width; - } - &__image-container { width: fit-content; margin-inline: auto; @@ -159,7 +153,7 @@ } &__image-container { - @include size(auto, 632px); + @include size(622px, 652px); padding-top: 20px; text-align: right; diff --git a/src/styles/sections/_service.scss b/src/styles/pages/home/_service.scss similarity index 98% rename from src/styles/sections/_service.scss rename to src/styles/pages/home/_service.scss index d903eb3..c52f88c 100644 --- a/src/styles/sections/_service.scss +++ b/src/styles/pages/home/_service.scss @@ -1,5 +1,4 @@ .service { - max-width: 428px; margin-inline: auto; &__container { @@ -22,9 +21,10 @@ } &__img-container { + @include size(406px, 405px); + padding-top: 75px; position: relative; - width: fit-content; } &__main-img { @@ -97,8 +97,6 @@ @media screen and (min-width: 600px) { .service { - max-width: $max-width; - &__img-container { margin-inline: auto; } diff --git a/src/styles/sections/_welcome.scss b/src/styles/pages/home/_welcome.scss similarity index 98% rename from src/styles/sections/_welcome.scss rename to src/styles/pages/home/_welcome.scss index 8181de4..3993d3e 100644 --- a/src/styles/sections/_welcome.scss +++ b/src/styles/pages/home/_welcome.scss @@ -18,14 +18,13 @@ @include flex-layout($justify: center, $direction: column); margin: auto; - max-width: 428px; padding-top: 67px; } // Start banner &__banner-container { @extend %d-flex; - @include size(428px, auto); @include flex-layout($justify: center, $direction: column); + @include size(428px, 417px); position: relative; } @@ -277,10 +276,12 @@ } &__banner-container { - width: unset; + @include size(auto, auto); } &__main-image { + @include size(355px, 417px); + margin-inline: auto; position: relative; padding-left: 50px; @@ -343,7 +344,6 @@ padding-top: 130px; width: 100%; - max-width: $max-width; } // Start content @@ -430,6 +430,8 @@ } &__main-image { + @include size(570px, 655px); + padding-right: 29px; }