mirror of
https://github.com/Nezumi-2711/loi-phan-internship.git
synced 2026-09-22 13:38:31 +00:00
Update UI remaining section
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
@@ -1,43 +1,43 @@
|
||||
- var image_footer_path = "./assets/images/footer/";
|
||||
- var about_us_links = ["About Us", "Service Us", "Contact", "Company"];
|
||||
- var company_links = ["Partnership", "Terms of Use", "Privacy", "Sitemap"];
|
||||
- var image_footer_path = './assets/images/footer/';
|
||||
- var about_us_links = ['About Us', 'Service Us', 'Contact', 'Company'];
|
||||
- var company_links = ['Partnership', 'Terms of Use', 'Privacy', 'Sitemap'];
|
||||
|
||||
footer.footer
|
||||
.footer__container
|
||||
.footer__introduction
|
||||
p.footer__brand-name.primary-text Foodhut
|
||||
p.footer__brand-name.text--primary Foodhut
|
||||
p.footer__description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
|
||||
.footer__social-media
|
||||
a.footer__social-link(href="javascript:void(0)")
|
||||
a.footer__social-link(href='javascript:void(0)')
|
||||
img.facebook-icon(
|
||||
src=image_footer_path + "facebook.png",
|
||||
alt="Facebook icon"
|
||||
src=image_footer_path + 'facebook.png',
|
||||
alt='Facebook icon'
|
||||
)
|
||||
a.footer__social-link(href="javascript:void(0)")
|
||||
a.footer__social-link(href='javascript:void(0)')
|
||||
img.instagram-icon(
|
||||
src=image_footer_path + "instagram.png",
|
||||
alt="Instagram icon"
|
||||
src=image_footer_path + 'instagram.png',
|
||||
alt='Instagram icon'
|
||||
)
|
||||
a.footer__social-link(href="javascript:void(0)")
|
||||
a.footer__social-link(href='javascript:void(0)')
|
||||
img.twitter-icon(
|
||||
src=image_footer_path + "twitter.png",
|
||||
alt="Twitter icon"
|
||||
src=image_footer_path + 'twitter.png',
|
||||
alt='Twitter icon'
|
||||
)
|
||||
.footer__information
|
||||
.footer__about-us
|
||||
h3.footer__heading.primary-text About Us
|
||||
h3.footer__heading.text--primary About Us
|
||||
.footer__link
|
||||
each item in about_us_links
|
||||
a.link-text(href="javascript:void(0)")= item
|
||||
a.link-text(href='javascript:void(0)')= item
|
||||
.footer_company
|
||||
h3.footer__heading.primary-text Company
|
||||
h3.footer__heading.text--primary Company
|
||||
.footer__link
|
||||
each item in company_links
|
||||
a.link-text(href="javascript:void(0)")= item
|
||||
a.link-text(href='javascript:void(0)')= item
|
||||
.footer__contact
|
||||
h3.footer__heading.primary-text Get in touch
|
||||
h3.footer__heading.text--primary Get in touch
|
||||
p.footer__description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
|
||||
form.footer__form(action="#")
|
||||
input.footer__email-input(type="text", placeholder="Email")
|
||||
button.footer__submit-btn(type="submit") Subscribe
|
||||
form.footer__form(action='#')
|
||||
input.footer__email-input(type='text', placeholder='Email')
|
||||
button.footer__submit-btn(type='submit') Subscribe
|
||||
p.footer__copyright Copyright © 2022 Foodhut.
|
||||
|
||||
@@ -1,21 +1,21 @@
|
||||
- var avatar_img_path = "./assets/images/avatar/";
|
||||
- var food_img_path = "./assets/images/food/";
|
||||
- var avatar_img_path = './assets/images/avatar/';
|
||||
- var food_img_path = './assets/images/food/';
|
||||
|
||||
- var list_category = ["Ramen", "Breakfast", "Lunch", "Dinner", "Maxican", "Italian", "Desserts", "Drinks"];
|
||||
- var list_image_food = [food_img_path + "food-1.png", food_img_path + "food-2.png", food_img_path + "food-3.png", food_img_path + "food-4.png", food_img_path + "food-5.png", food_img_path + "food-6.png", food_img_path + "food-7.png", food_img_path + "food-8.png"];
|
||||
- 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" }] };
|
||||
- var list_category = ['Ramen', 'Breakfast', 'Lunch', 'Dinner', 'Maxican', 'Italian', 'Desserts', 'Drinks'];
|
||||
- var list_image_food = [food_img_path + 'food-1.png', food_img_path + 'food-2.png', food_img_path + 'food-3.png', food_img_path + 'food-4.png', food_img_path + 'food-5.png', food_img_path + 'food-6.png', food_img_path + 'food-7.png', food_img_path + 'food-8.png'];
|
||||
- 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.primary-text Menu
|
||||
= " That "
|
||||
span.secondary-text Always
|
||||
= " Make You Fall In "
|
||||
span.primary-text Love
|
||||
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
|
||||
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 };
|
||||
|
||||
@@ -1,24 +1,24 @@
|
||||
- var offer_img_path = "./assets/images/offer/";
|
||||
- var avatar_img_path = "./assets/images/avatar/";
|
||||
- var food_img_path = "./assets/images/food/";
|
||||
- var offer_img_path = './assets/images/offer/';
|
||||
- var avatar_img_path = './assets/images/avatar/';
|
||||
- var food_img_path = './assets/images/food/';
|
||||
|
||||
- var food_1 = { imageUrl: food_img_path + "food-1.png", 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" }] };
|
||||
- var food_2 = { imageUrl: food_img_path + "food-2.png", price: "15", ratePoint: "4.8", foodName: "Chicken Tikka", foodDescription: "Lorem Ipsum is simply dummy text of the printing and typesetting industry", avatarImageList: [{ avatarUrl: avatar_img_path + "avatar-4.png" }, { avatarUrl: avatar_img_path + "avatar-5.png" }, { avatarUrl: avatar_img_path + "avatar-6.png" }] };
|
||||
- var food_3 = { imageUrl: food_img_path + "food-3.png", price: "8", ratePoint: "4.2", foodName: "Desi Chowmein", foodDescription: "Lorem Ipsum is simply dummy text of the printing and typesetting industry", avatarImageList: [{ avatarUrl: avatar_img_path + "avatar-7.png" }, { avatarUrl: avatar_img_path + "avatar-8.png" }, { avatarUrl: avatar_img_path + "avatar-9.png" }] };
|
||||
- var food_4 = { imageUrl: food_img_path + "food-4.png", price: "28", ratePoint: "5.0", foodName: "Chicken Chargha", 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" }] };
|
||||
- var food_1 = { imageUrl: food_img_path + 'food-1.png', 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' }] };
|
||||
- var food_2 = { imageUrl: food_img_path + 'food-2.png', price: '15', ratePoint: '4.8', foodName: 'Chicken Tikka', foodDescription: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry', avatarImageList: [{ avatarUrl: avatar_img_path + 'avatar-4.png' }, { avatarUrl: avatar_img_path + 'avatar-5.png' }, { avatarUrl: avatar_img_path + 'avatar-6.png' }] };
|
||||
- var food_3 = { imageUrl: food_img_path + 'food-3.png', price: '8', ratePoint: '4.2', foodName: 'Desi Chowmein', foodDescription: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry', avatarImageList: [{ avatarUrl: avatar_img_path + 'avatar-7.png' }, { avatarUrl: avatar_img_path + 'avatar-8.png' }, { avatarUrl: avatar_img_path + 'avatar-9.png' }] };
|
||||
- var food_4 = { imageUrl: food_img_path + 'food-4.png', price: '28', ratePoint: '5.0', foodName: 'Chicken Chargha', 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' }] };
|
||||
- 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"
|
||||
src=offer_img_path + 'dot-background.png',
|
||||
alt='Dot background image'
|
||||
)
|
||||
h2.offer__heading Today
|
||||
= " "
|
||||
span.primary-text Special
|
||||
= " Offers"
|
||||
= ' '
|
||||
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
|
||||
@@ -26,7 +26,7 @@ section.offer
|
||||
.offer__rosemary-container
|
||||
picture
|
||||
source(
|
||||
media="(min-width: 840px)",
|
||||
srcset=offer_img_path + "rosemary-desktop.png"
|
||||
media='(min-width: 840px)',
|
||||
srcset=offer_img_path + 'rosemary-desktop.png'
|
||||
)
|
||||
img(src=offer_img_path + "rosemary-mobile.png", alt="Rosemary image")
|
||||
img(src=offer_img_path + 'rosemary-mobile.png', alt='Rosemary image')
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
- var platform_image_path = "./assets/images/platform/";
|
||||
- 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
|
||||
@@ -6,43 +6,47 @@ section.platform
|
||||
.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")
|
||||
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"
|
||||
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"
|
||||
src=platform_image_path + 'background-mobile.png',
|
||||
alt='Background image'
|
||||
)
|
||||
picture
|
||||
source(
|
||||
media="(min-width: 1200px)",
|
||||
srcset=platform_image_path + "main-image-desktop.png"
|
||||
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"
|
||||
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
|
||||
= ' '
|
||||
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"
|
||||
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"
|
||||
src=platform_image_path + 'app-store.png',
|
||||
alt='App store image'
|
||||
)
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
- var service_img_path = "./assets/images/service/";
|
||||
- var service_img_path = './assets/images/service/';
|
||||
- var list_service_category_1 = [{url_icon : service_img_path + "icon-1.png", content: "Online order"}, {url_icon : service_img_path + "icon-3.png", content: "Pre-Reservation"}, {url_icon : service_img_path + "icon-3.png", content: "Super chef"}];
|
||||
- var list_service_category_2 = [{url_icon : service_img_path + "icon-2.png", content: "24/7 Service"}, {url_icon : service_img_path + "icon-3.png", content: "Oragonized foodhut place"}, {url_icon : service_img_path + "icon-3.png", content: "Clean Kitchen"}];
|
||||
- var list_service_category = [list_service_category_1, list_service_category_2];
|
||||
@@ -9,38 +9,42 @@ section.service
|
||||
.service__img-container
|
||||
picture
|
||||
source(
|
||||
media="(min-width: 1200px)",
|
||||
srcset=service_img_path + "background-desktop.png"
|
||||
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"
|
||||
src=service_img_path + 'background-mobile.png',
|
||||
alt='Background image'
|
||||
)
|
||||
picture
|
||||
source(
|
||||
media="(min-width: 1200px)",
|
||||
srcset=service_img_path + "main-character-desktop.png"
|
||||
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"
|
||||
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"
|
||||
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"
|
||||
src=service_img_path + 'vegetable-mobile.png',
|
||||
alt='Vegetable background image'
|
||||
)
|
||||
.service__content
|
||||
h2.service__heading We are
|
||||
= " "
|
||||
span.primary-text more
|
||||
= " than "
|
||||
span.secondary-text multiple
|
||||
= " service"
|
||||
= ' '
|
||||
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
|
||||
@@ -49,7 +53,7 @@ section.service
|
||||
.service__category-item
|
||||
img.service__icon-category(
|
||||
src=item.url_icon,
|
||||
alt="Icon category"
|
||||
alt='Icon category'
|
||||
)
|
||||
p.service__name-category= item.content
|
||||
a.service__btn.btn(href="javascript:void(0)") About us
|
||||
a.service__btn.btn(href='javascript:void(0)') About us
|
||||
|
||||
@@ -93,14 +93,17 @@ section.welcome
|
||||
p.welcome__text-box-content People Trust us
|
||||
h1.welcome__heading We're
|
||||
= ' '
|
||||
span.primary-text serious
|
||||
span.text--primary serious
|
||||
= ' for '
|
||||
span.primary-text food
|
||||
span.text--primary food
|
||||
= ' & '
|
||||
.delivery-text-box
|
||||
span.secondary-text delivery
|
||||
span.text--secondary delivery
|
||||
.welcome__underline-img-container
|
||||
img(src=welcome_img_path + 'underline.png', alt='Underline image')
|
||||
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.
|
||||
|
||||
@@ -1,47 +1,47 @@
|
||||
$font-path: "../assets/fonts";
|
||||
$font-path: '../assets/fonts';
|
||||
|
||||
%fs-100 {
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Sofia Pro";
|
||||
src: url("#{$font-path}/sofia-pro-regular.woff2") format("woff2"),
|
||||
url("#{$font-path}/sofia-pro-regular.ttf") format("truetype");
|
||||
font-family: 'Sofia Pro';
|
||||
src: url('#{$font-path}/sofia-pro-regular.woff2') format('woff2'),
|
||||
url('#{$font-path}/sofia-pro-regular.ttf') format('truetype');
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Sofia Pro";
|
||||
src: url("#{$font-path}/sofia-pro-medium.woff2") format("woff2"),
|
||||
url("#{$font-path}/sofia-pro-medium.ttf") format("truetype");
|
||||
font-family: 'Sofia Pro';
|
||||
src: url('#{$font-path}/sofia-pro-medium.woff2') format('woff2'),
|
||||
url('#{$font-path}/sofia-pro-medium.ttf') format('truetype');
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Sofia Pro";
|
||||
src: url("#{$font-path}/sofia-pro-semi-bold.woff2") format("woff2"),
|
||||
url("#{$font-path}/sofia-pro-semi-bold.ttf") format("truetype");
|
||||
font-family: 'Sofia Pro';
|
||||
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-face {
|
||||
font-family: "Sofia Pro";
|
||||
src: url("#{$font-path}/sofia-pro-bold.woff2") format("woff2"),
|
||||
url("#{$font-path}/sofia-pro-bold.ttf") format("truetype");
|
||||
font-family: 'Sofia Pro';
|
||||
src: url('#{$font-path}/sofia-pro-bold.woff2') format('woff2'),
|
||||
url('#{$font-path}/sofia-pro-bold.ttf') format('truetype');
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Inter";
|
||||
src: url("#{$font-path}/inter.woff2") format("woff2"),
|
||||
url("#{$font-path}/inter.ttf") format("truetype");
|
||||
font-family: 'Inter';
|
||||
src: url('#{$font-path}/inter.woff2') format('woff2'),
|
||||
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: 'Poppins';
|
||||
src: url('#{$font-path}/poppins-medium.woff2') format('woff2'),
|
||||
url('#{$font-path}/poppins-medium.ttf') format('truetype');
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -59,13 +59,13 @@ $font-path: "../assets/fonts";
|
||||
color: $secondary-color;
|
||||
}
|
||||
|
||||
.primary-text {
|
||||
.text--primary {
|
||||
@extend %fs-100;
|
||||
|
||||
color: $primary-color;
|
||||
}
|
||||
|
||||
.secondary-text {
|
||||
.text--secondary {
|
||||
@extend %fs-100;
|
||||
|
||||
color: $secondary-color;
|
||||
|
||||
@@ -69,15 +69,16 @@
|
||||
}
|
||||
|
||||
&__form {
|
||||
@include size(378px, auto);
|
||||
@extend %d-flex;
|
||||
@include flex-layout($justify: space-between, $gap: 15px, $wrap: wrap);
|
||||
|
||||
max-width: 338px;
|
||||
margin-top: 27px;
|
||||
}
|
||||
|
||||
&__email-input {
|
||||
@include size(178px, 48px);
|
||||
|
||||
margin-right: 15px;
|
||||
border-radius: 40px;
|
||||
padding-left: 25px;
|
||||
border: none;
|
||||
@@ -88,7 +89,7 @@
|
||||
&__submit-btn {
|
||||
@include size(118px, 50px);
|
||||
|
||||
border-radius: 40px;
|
||||
border-radius: 30px;
|
||||
color: $white;
|
||||
background-color: $primary-color;
|
||||
border: none;
|
||||
@@ -111,15 +112,15 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 840px) {
|
||||
@media screen and (min-width: 600px) {
|
||||
.footer {
|
||||
&__container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
max-width: $max-width;
|
||||
width: auto;
|
||||
padding-inline: 90px;
|
||||
column-gap: 10px;
|
||||
padding-inline: 10px;
|
||||
}
|
||||
|
||||
&__introduction {
|
||||
@@ -133,36 +134,52 @@
|
||||
&__contact {
|
||||
grid-column: -2;
|
||||
}
|
||||
|
||||
&__information {
|
||||
@include flex-layout($justify: space-between);
|
||||
|
||||
max-width: 310px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 840px) {
|
||||
.footer {
|
||||
&__container {
|
||||
padding-inline: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1200px) {
|
||||
.footer {
|
||||
&__container {
|
||||
grid-template-columns: auto auto auto;
|
||||
grid-template-columns: 505px auto auto;
|
||||
padding-left: 135px;
|
||||
column-gap: 40px;
|
||||
column-gap: 30px;
|
||||
}
|
||||
|
||||
&__introduction {
|
||||
padding-top: 119px;
|
||||
padding-left: 112px;
|
||||
padding-top: 89px;
|
||||
padding-left: unset;
|
||||
}
|
||||
|
||||
&__information {
|
||||
@include flex-layout($justify: space-between, $gap: 30px);
|
||||
|
||||
max-width: 304px;
|
||||
padding-top: 155px;
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin-top: 9px;
|
||||
padding-left: 1px;
|
||||
padding-top: 138px;
|
||||
}
|
||||
|
||||
&__contact {
|
||||
padding-top: 155px;
|
||||
padding-top: 138px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1300px) {
|
||||
.footer__introduction {
|
||||
padding-left: 112px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
@extend %absolute;
|
||||
@include set-location($top: 0, $right: 0, $left: 0);
|
||||
|
||||
min-width: 428px;
|
||||
width: 428px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
@@ -21,6 +21,12 @@
|
||||
@include flex-layout($justify: space-between);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 600px) {
|
||||
.header {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 840px) {
|
||||
.header {
|
||||
@include size(auto, auto);
|
||||
|
||||
@@ -72,7 +72,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 840px) {
|
||||
@media screen and (min-width: 600px) {
|
||||
.menu {
|
||||
&__container {
|
||||
max-width: $max-width;
|
||||
@@ -82,6 +82,16 @@
|
||||
max-width: 653px;
|
||||
}
|
||||
|
||||
&__card-list {
|
||||
grid-auto-columns: unset;
|
||||
grid-template-rows: 1fr 1fr;
|
||||
row-gap: 66px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 840px) {
|
||||
.menu {
|
||||
&__list-category {
|
||||
margin-inline: 59px;
|
||||
}
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
top: -1px;
|
||||
top: -5px;
|
||||
|
||||
&:before {
|
||||
@extend .line-icon-menu;
|
||||
|
||||
@@ -79,25 +79,44 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 600px) {
|
||||
.platform {
|
||||
&__container {
|
||||
max-width: $max-width;
|
||||
}
|
||||
|
||||
&__image-container {
|
||||
width: fit-content;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
&__main-image {
|
||||
@include set-location($top: 0, $left: 28px);
|
||||
}
|
||||
|
||||
&__heading,
|
||||
&__description {
|
||||
max-width: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 840px) {
|
||||
.platform {
|
||||
&__container {
|
||||
@include flex-layout($direction: row-reverse, $align: center);
|
||||
@include flex-layout(
|
||||
$direction: row-reverse,
|
||||
$align: center,
|
||||
$justify: space-between
|
||||
);
|
||||
|
||||
// width: 100%;
|
||||
display: flex;
|
||||
max-width: $max-width;
|
||||
max-height: 632px;
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
&__image-container {
|
||||
@include size(100%, 500px);
|
||||
}
|
||||
|
||||
&__background-img {
|
||||
@include set-location($top: 0, $right: 0);
|
||||
|
||||
position: absolute;
|
||||
margin-inline: unset;
|
||||
}
|
||||
|
||||
&__main-image {
|
||||
@@ -140,43 +159,35 @@
|
||||
}
|
||||
|
||||
&__image-container {
|
||||
@include size(600px, 632px);
|
||||
@include size(auto, 632px);
|
||||
|
||||
padding-top: 20px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&__main-image {
|
||||
@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);
|
||||
@include set-location($top: 20px, $right: 107px);
|
||||
}
|
||||
|
||||
&__image-food:first-child,
|
||||
&__image-food:nth-child(2),
|
||||
&__image-food:nth-child(3),
|
||||
&__image-food:nth-child(4) {
|
||||
@include set-location($bottom: 80px, $right: 80px);
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__content {
|
||||
padding-top: 33px;
|
||||
}
|
||||
|
||||
&__heading,
|
||||
&__description,
|
||||
&__store-container {
|
||||
padding-left: 47px;
|
||||
padding-left: 45px;
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin-top: 52px;
|
||||
margin-top: 58px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -22,29 +22,24 @@
|
||||
}
|
||||
|
||||
&__img-container {
|
||||
@include size(auto, 436.81px);
|
||||
|
||||
padding-top: 75px;
|
||||
position: relative;
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
&__background-img {
|
||||
@extend %absolute;
|
||||
@include set-location($top: 75px, $left: 0);
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
&__main-img {
|
||||
@extend %absolute;
|
||||
@include set-location($top: 70px, $left: 35px);
|
||||
@include set-location($top: 73px, $left: 35px);
|
||||
}
|
||||
|
||||
&__vegetable-img {
|
||||
@extend %absolute;
|
||||
@include set-location($bottom: -10px, $left: 50px);
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
&__content {
|
||||
margin-top: 65px;
|
||||
margin-top: 61px;
|
||||
padding-inline: 24px;
|
||||
|
||||
z-index: 1;
|
||||
@@ -60,7 +55,6 @@
|
||||
|
||||
&__description {
|
||||
margin-top: 29px;
|
||||
margin-inline: auto;
|
||||
max-width: 381px;
|
||||
}
|
||||
|
||||
@@ -102,7 +96,27 @@
|
||||
}
|
||||
|
||||
@media screen and (min-width: 600px) {
|
||||
//TODO
|
||||
.service {
|
||||
max-width: $max-width;
|
||||
|
||||
&__main-img {
|
||||
@include set-location($top: 30px, $left: 25px);
|
||||
}
|
||||
|
||||
&__heading {
|
||||
max-width: unset;
|
||||
}
|
||||
|
||||
&__description {
|
||||
max-width: 690px;
|
||||
}
|
||||
|
||||
&__category {
|
||||
@include flex-layout($direction: row, $gap: 10px);
|
||||
|
||||
margin-top: 29px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 840px) {
|
||||
@@ -122,6 +136,7 @@
|
||||
@include size($width: 100%);
|
||||
|
||||
max-width: 460px;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
&__img-container {
|
||||
@@ -148,12 +163,12 @@
|
||||
}
|
||||
|
||||
&__main-img {
|
||||
@include set-location($top: 95px, $left: 35px);
|
||||
@include set-location($top: 55px, $left: 25px);
|
||||
@extend %absolute_840;
|
||||
}
|
||||
|
||||
&__vegetable-img {
|
||||
@include set-location($bottom: 145px, $left: 50px);
|
||||
@include set-location($bottom: 180px, $left: 50px);
|
||||
@extend %absolute_840;
|
||||
}
|
||||
|
||||
@@ -161,16 +176,6 @@
|
||||
max-width: 452px;
|
||||
margin: unset;
|
||||
}
|
||||
|
||||
&__description {
|
||||
max-width: 690px;
|
||||
}
|
||||
|
||||
&__category {
|
||||
@include flex-layout($direction: row, $gap: 10px);
|
||||
|
||||
margin-top: 29px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -189,21 +194,27 @@
|
||||
@extend %absolute_1200;
|
||||
}
|
||||
|
||||
&__img-container {
|
||||
margin-inline: unset;
|
||||
}
|
||||
|
||||
&__background-color {
|
||||
@include set-location($left: -150px);
|
||||
@include set-location($left: -151px);
|
||||
@include size(500px, 50%);
|
||||
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
rgba(253, 197, 94, 0.6),
|
||||
rgba(253, 197, 94, 0.4),
|
||||
rgba(253, 197, 94, 0.3),
|
||||
rgba(253, 197, 94, 0.2),
|
||||
rgba(253, 197, 94, 0.1),
|
||||
rgba(253, 197, 94, 0.06),
|
||||
rgba(253, 197, 94, 0.01),
|
||||
rgba(253, 197, 94, 0),
|
||||
rgba(253, 197, 94, 0)
|
||||
);
|
||||
|
||||
clip-path: polygon(30% 0, 100% 0, 100% 100%, 30% 100%);
|
||||
}
|
||||
|
||||
&__description {
|
||||
@@ -227,8 +238,12 @@
|
||||
}
|
||||
|
||||
&__content {
|
||||
padding-top: 78px;
|
||||
padding-top: 69px;
|
||||
padding-left: 29px;
|
||||
}
|
||||
|
||||
&__btn {
|
||||
margin-top: 26px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
.delivery-text-box {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
font-size: $fs-xxx-lg;
|
||||
font-size: $fs-xx-lg;
|
||||
}
|
||||
|
||||
.welcome {
|
||||
@@ -63,7 +63,7 @@
|
||||
|
||||
&__rate-card {
|
||||
@extend %absolute;
|
||||
@include set-location($top: 103px, $right: 0);
|
||||
@include set-location($top: 103px, $right: -5px);
|
||||
}
|
||||
|
||||
&__background-banner {
|
||||
@@ -142,7 +142,7 @@
|
||||
}
|
||||
|
||||
&__heading {
|
||||
margin-top: 12px;
|
||||
margin-top: 16px;
|
||||
font-size: $fs-xx-lg;
|
||||
text-transform: capitalize;
|
||||
font-weight: 900;
|
||||
@@ -150,11 +150,11 @@
|
||||
|
||||
&__underline-img-container {
|
||||
@extend %absolute;
|
||||
@include set-location($bottom: -27px, $left: 0);
|
||||
@include set-location($bottom: -15px, $left: 0);
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin-top: 40px;
|
||||
margin-top: 36px;
|
||||
font-size: $fs-x-md;
|
||||
line-height: 140%;
|
||||
letter-spacing: -0.2px;
|
||||
@@ -164,7 +164,7 @@
|
||||
&__search-form {
|
||||
@extend %d-flex;
|
||||
|
||||
margin-top: 32px;
|
||||
margin-top: 30px;
|
||||
border-radius: 100px;
|
||||
border: 0.5px solid $black;
|
||||
max-width: 471px;
|
||||
@@ -317,7 +317,17 @@
|
||||
}
|
||||
|
||||
&__content {
|
||||
width: fit-content;
|
||||
width: unset;
|
||||
padding-inline: unset;
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
&__underline-img-container {
|
||||
@include set-location($bottom: 0px, $left: 0);
|
||||
}
|
||||
|
||||
&__underline-img {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -362,8 +372,12 @@
|
||||
line-height: 125%;
|
||||
}
|
||||
|
||||
&__underline-img {
|
||||
width: unset;
|
||||
}
|
||||
|
||||
&__underline-img-container {
|
||||
@include set-location($bottom: -25px, $left: 8px);
|
||||
@include set-location($bottom: -10px, $left: 8px);
|
||||
}
|
||||
|
||||
&__description {
|
||||
@@ -432,11 +446,11 @@
|
||||
}
|
||||
|
||||
&__lines-background {
|
||||
@include set-location($top: -85px, $right: -98px);
|
||||
@include set-location($top: -85px, $right: -96px);
|
||||
}
|
||||
|
||||
&__review-card {
|
||||
@include set-location($top: 160px, $left: -47px);
|
||||
@include set-location($top: 160px, $left: 1px);
|
||||
}
|
||||
|
||||
&__rate-card {
|
||||
@@ -444,11 +458,11 @@
|
||||
}
|
||||
|
||||
&__food-img:nth-child(2) {
|
||||
@include set-location($bottom: 108px, $left: -68px);
|
||||
@include set-location($bottom: 108px, $left: -18px);
|
||||
}
|
||||
|
||||
&__food-img:nth-child(3) {
|
||||
@include set-location($bottom: -29px, $left: 102);
|
||||
@include set-location($bottom: -29px, $left: 151px);
|
||||
}
|
||||
|
||||
&__food-img:nth-child(4) {
|
||||
@@ -477,6 +491,10 @@
|
||||
padding-left: 1px;
|
||||
}
|
||||
|
||||
.delivery-text-box {
|
||||
font-size: $fs-xxx-lg;
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin-top: 29px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user