mirror of
https://github.com/Nezumi-2711/html-css-practice-two.git
synced 2026-09-22 20:01:23 +00:00
Update code
This commit is contained in:
+7
-7
@@ -1,15 +1,15 @@
|
|||||||
include ./includes/mixins
|
include ./includes/mixins
|
||||||
|
|
||||||
doctype html
|
doctype html
|
||||||
html(lang="en")
|
html(lang='en')
|
||||||
head
|
head
|
||||||
meta(charset="UTF-8")
|
meta(charset='UTF-8')
|
||||||
meta(name="viewport", content="width=device-width, initial-scale=1.0")
|
meta(name='viewport', content='width=device-width, initial-scale=1.0')
|
||||||
link(rel="stylesheet", href="./styles/main.scss")
|
link(rel='stylesheet', href='./styles/_main.scss')
|
||||||
link(
|
link(
|
||||||
rel="icon",
|
rel='icon',
|
||||||
type="image/x-icon",
|
type='image/x-icon',
|
||||||
href="./assets/images/favicon-16x16.png"
|
href='./assets/images/favicon-16x16.png'
|
||||||
)
|
)
|
||||||
title Food Hut
|
title Food Hut
|
||||||
body
|
body
|
||||||
|
|||||||
+15
-14
@@ -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' }] };
|
- 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
|
section.menu
|
||||||
.menu__container
|
.wrapper
|
||||||
h2.menu__heading
|
.menu__container
|
||||||
span.text--primary Menu
|
h2.menu__heading
|
||||||
= ' That '
|
span.text--primary Menu
|
||||||
span.text--secondary Always
|
= ' That '
|
||||||
= ' Make You Fall In '
|
span.text--secondary Always
|
||||||
span.text--primary Love
|
= ' Make You Fall In '
|
||||||
.menu__list-category
|
span.text--primary Love
|
||||||
each item in list_category
|
.menu__list-category
|
||||||
a.menu__category-item.link-text(href='javascript:void(0)')= item
|
each item in list_category
|
||||||
.menu__card-list
|
a.menu__category-item.link-text(href='javascript:void(0)')= item
|
||||||
each url in list_image_food
|
.menu__card-list
|
||||||
- var image_food = { imageUrl: url };
|
each url in list_image_food
|
||||||
|
- var image_food = { imageUrl: url };
|
||||||
|
|
||||||
+foodItemCard({ ...image_food, ...default_food_data })
|
+foodItemCard({ ...image_food, ...default_food_data })
|
||||||
|
|||||||
+22
-21
@@ -9,24 +9,25 @@
|
|||||||
- var list_food = [food_1, food_2, food_3, food_4];
|
- var list_food = [food_1, food_2, food_3, food_4];
|
||||||
|
|
||||||
section.offer
|
section.offer
|
||||||
.offer__container
|
.wrapper
|
||||||
.offer__dot-background
|
.offer__container
|
||||||
img(
|
.offer__dot-background
|
||||||
src=offer_img_path + 'dot-background.png',
|
img(
|
||||||
alt='Dot background image'
|
src=offer_img_path + 'dot-background.png',
|
||||||
)
|
alt='Dot background image'
|
||||||
h2.offer__heading Today
|
)
|
||||||
= ' '
|
h2.offer__heading Today
|
||||||
span.text--primary Special
|
= ' '
|
||||||
= ' Offers'
|
span.text--primary Special
|
||||||
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
|
= ' Offers'
|
||||||
.offer__card-list
|
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
|
||||||
each val in list_food
|
.offer__card-list
|
||||||
+foodItemCard(val)
|
each val in list_food
|
||||||
.offer__rosemary-container
|
+foodItemCard(val)
|
||||||
picture
|
.offer__rosemary-container
|
||||||
source(
|
picture
|
||||||
media='(min-width: 840px)',
|
source(
|
||||||
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')
|
||||||
|
|||||||
+47
-46
@@ -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"}];
|
- 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
|
section.platform
|
||||||
.platform__container
|
.wrapper
|
||||||
.platform__image-container
|
.platform__container
|
||||||
each item in list_food_image_path
|
.platform__image-container
|
||||||
picture.platform__image-food
|
each item in list_food_image_path
|
||||||
source(media='(min-width: 1200px)', srcset=item.desktop_image_path)
|
picture.platform__image-food
|
||||||
img(src=item.mobile_image_path, alt='Food image')
|
source(media='(min-width: 1200px)', srcset=item.desktop_image_path)
|
||||||
picture
|
img(src=item.mobile_image_path, alt='Food image')
|
||||||
source(
|
picture
|
||||||
media='(min-width: 1200px)',
|
source(
|
||||||
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'
|
|
||||||
)
|
|
||||||
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
|
source(
|
||||||
img.platform__app-store-image(
|
media='(min-width: 600px)',
|
||||||
src=platform_image_path + 'app-store.png',
|
srcset=platform_image_path + 'background-tablet.png'
|
||||||
alt='App store image'
|
|
||||||
)
|
)
|
||||||
|
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'
|
||||||
|
)
|
||||||
|
|||||||
+54
-53
@@ -4,56 +4,57 @@
|
|||||||
- var list_service_category = [list_service_category_1, list_service_category_2];
|
- var list_service_category = [list_service_category_1, list_service_category_2];
|
||||||
|
|
||||||
section.service
|
section.service
|
||||||
.service__container
|
.wrapper
|
||||||
.service__background-color
|
.service__container
|
||||||
.service__img-container
|
.service__background-color
|
||||||
picture
|
.service__img-container
|
||||||
source(
|
picture
|
||||||
media='(min-width: 1200px)',
|
source(
|
||||||
srcset=service_img_path + 'background-desktop.png'
|
media='(min-width: 1200px)',
|
||||||
)
|
srcset=service_img_path + 'background-desktop.png'
|
||||||
source(
|
)
|
||||||
media='(min-width: 600px)',
|
source(
|
||||||
srcset=service_img_path + 'background-tablet.png'
|
media='(min-width: 600px)',
|
||||||
)
|
srcset=service_img_path + 'background-tablet.png'
|
||||||
img.service__background-img(
|
)
|
||||||
src=service_img_path + 'background-mobile.png',
|
img.service__background-img(
|
||||||
alt='Background image'
|
src=service_img_path + 'background-mobile.png',
|
||||||
)
|
alt='Background image'
|
||||||
picture
|
)
|
||||||
source(
|
picture
|
||||||
media='(min-width: 1200px)',
|
source(
|
||||||
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',
|
img.service__main-img(
|
||||||
alt='Main character image'
|
src=service_img_path + 'main-character-mobile.png',
|
||||||
)
|
alt='Main character image'
|
||||||
picture
|
)
|
||||||
source(
|
picture
|
||||||
media='(min-width: 1200px)',
|
source(
|
||||||
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',
|
img.service__vegetable-img(
|
||||||
alt='Vegetable background image'
|
src=service_img_path + 'vegetable-mobile.png',
|
||||||
)
|
alt='Vegetable background image'
|
||||||
.service__content
|
)
|
||||||
h2.service__heading We are
|
.service__content
|
||||||
= ' '
|
h2.service__heading We are
|
||||||
span.text--primary more
|
= ' '
|
||||||
= ' than '
|
span.text--primary more
|
||||||
span.text--secondary multiple
|
= ' than '
|
||||||
= ' service'
|
span.text--secondary multiple
|
||||||
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'
|
||||||
.service__category
|
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
|
||||||
each list in list_service_category
|
.service__category
|
||||||
.service__category-list
|
each list in list_service_category
|
||||||
each item in list
|
.service__category-list
|
||||||
.service__category-item
|
each item in list
|
||||||
img.service__icon-category(
|
.service__category-item
|
||||||
src=item.url_icon,
|
img.service__icon-category(
|
||||||
alt='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
|
p.service__name-category= item.content
|
||||||
|
a.service__btn.btn(href='javascript:void(0)') About us
|
||||||
|
|||||||
+144
-137
@@ -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"}];
|
- 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
|
section.welcome
|
||||||
.welcome__container
|
.wrapper
|
||||||
.welcome__banner
|
.welcome__container
|
||||||
.welcome__banner-container
|
.welcome__banner
|
||||||
.welcome__main-image
|
.welcome__banner-container
|
||||||
picture
|
.welcome__main-image
|
||||||
source(
|
picture
|
||||||
media='(min-width: 1200px)',
|
source(
|
||||||
srcset=welcome_img_path + 'welcome-image-desktop.png'
|
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'
|
|
||||||
)
|
|
||||||
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'
|
|
||||||
)
|
|
||||||
path(
|
|
||||||
d='M12 6.5L0.749999 12.9952L0.75 0.00480889L12 6.5Z',
|
|
||||||
fill='currentColor'
|
|
||||||
)
|
)
|
||||||
span.welcome__text-download-btn Watch Video
|
img.welcome__banner-img(
|
||||||
.welcome__slider-container
|
src=welcome_img_path + 'welcome-image-mobile.png',
|
||||||
img.welcome__slider-img(
|
alt='Welcome banner image'
|
||||||
src=welcome_img_path + 'slider.png',
|
)
|
||||||
alt='Slider 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'
|
||||||
|
)
|
||||||
|
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'
|
||||||
|
)
|
||||||
|
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'
|
||||||
|
)
|
||||||
|
|||||||
@@ -17,8 +17,8 @@
|
|||||||
@import './layouts/footer';
|
@import './layouts/footer';
|
||||||
|
|
||||||
//Sections
|
//Sections
|
||||||
@import './sections/welcome';
|
@import './pages/home/welcome';
|
||||||
@import './sections/offer';
|
@import './pages/home/offer';
|
||||||
@import './sections/service';
|
@import './pages/home/service';
|
||||||
@import './sections/menu';
|
@import './pages/home/menu';
|
||||||
@import './sections/platform';
|
@import './pages/home/platform';
|
||||||
@@ -1,3 +1,14 @@
|
|||||||
body {
|
body {
|
||||||
min-width: 428px;
|
min-width: 428px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.wrapper {
|
||||||
|
max-width: 428px;
|
||||||
|
margin-inline: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 600px) {
|
||||||
|
.wrapper {
|
||||||
|
max-width: $max-width;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@@ -9,6 +9,8 @@ $font-path: '../assets/fonts';
|
|||||||
src: url('#{$font-path}/sofia-pro-regular.woff2') format('woff2'),
|
src: url('#{$font-path}/sofia-pro-regular.woff2') format('woff2'),
|
||||||
url('#{$font-path}/sofia-pro-regular.ttf') format('truetype');
|
url('#{$font-path}/sofia-pro-regular.ttf') format('truetype');
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
|
||||||
|
font-display: swap;
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
@@ -16,6 +18,8 @@ $font-path: '../assets/fonts';
|
|||||||
src: url('#{$font-path}/sofia-pro-medium.woff2') format('woff2'),
|
src: url('#{$font-path}/sofia-pro-medium.woff2') format('woff2'),
|
||||||
url('#{$font-path}/sofia-pro-medium.ttf') format('truetype');
|
url('#{$font-path}/sofia-pro-medium.ttf') format('truetype');
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
|
|
||||||
|
font-display: swap;
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
@@ -23,6 +27,8 @@ $font-path: '../assets/fonts';
|
|||||||
src: url('#{$font-path}/sofia-pro-semi-bold.woff2') format('woff2'),
|
src: url('#{$font-path}/sofia-pro-semi-bold.woff2') format('woff2'),
|
||||||
url('#{$font-path}/sofia-pro-semi-bold.ttf') format('truetype');
|
url('#{$font-path}/sofia-pro-semi-bold.ttf') format('truetype');
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
|
|
||||||
|
font-display: swap;
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
@@ -30,18 +36,24 @@ $font-path: '../assets/fonts';
|
|||||||
src: url('#{$font-path}/sofia-pro-bold.woff2') format('woff2'),
|
src: url('#{$font-path}/sofia-pro-bold.woff2') format('woff2'),
|
||||||
url('#{$font-path}/sofia-pro-bold.ttf') format('truetype');
|
url('#{$font-path}/sofia-pro-bold.ttf') format('truetype');
|
||||||
font-weight: 900;
|
font-weight: 900;
|
||||||
|
|
||||||
|
font-display: swap;
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Inter';
|
font-family: 'Inter';
|
||||||
src: url('#{$font-path}/inter.woff2') format('woff2'),
|
src: url('#{$font-path}/inter.woff2') format('woff2'),
|
||||||
url('#{$font-path}/inter.ttf') format('truetype');
|
url('#{$font-path}/inter.ttf') format('truetype');
|
||||||
|
|
||||||
|
font-display: swap;
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'Poppins';
|
font-family: 'Poppins';
|
||||||
src: url('#{$font-path}/poppins-medium.woff2') format('woff2'),
|
src: url('#{$font-path}/poppins-medium.woff2') format('woff2'),
|
||||||
url('#{$font-path}/poppins-medium.ttf') format('truetype');
|
url('#{$font-path}/poppins-medium.ttf') format('truetype');
|
||||||
|
|
||||||
|
font-display: swap;
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
|
|
||||||
.card {
|
.card {
|
||||||
@extend %d-flex, %align-center-col;
|
@extend %d-flex, %align-center-col;
|
||||||
@include size(auto, 516px);
|
@include size(310px, 516px);
|
||||||
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
|||||||
@@ -8,7 +8,6 @@
|
|||||||
|
|
||||||
padding-top: 116px;
|
padding-top: 116px;
|
||||||
padding-left: 24px;
|
padding-left: 24px;
|
||||||
max-width: 428px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&__brand-name {
|
&__brand-name {
|
||||||
@@ -117,7 +116,6 @@
|
|||||||
&__container {
|
&__container {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 1fr;
|
grid-template-columns: 1fr 1fr;
|
||||||
max-width: $max-width;
|
|
||||||
width: auto;
|
width: auto;
|
||||||
column-gap: 10px;
|
column-gap: 10px;
|
||||||
padding-inline: 10px;
|
padding-inline: 10px;
|
||||||
|
|||||||
@@ -30,8 +30,6 @@
|
|||||||
@media screen and (min-width: 1020px) {
|
@media screen and (min-width: 1020px) {
|
||||||
.header {
|
.header {
|
||||||
@include size(auto, auto);
|
@include size(auto, auto);
|
||||||
|
|
||||||
max-width: $max-width;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.header__container {
|
.header__container {
|
||||||
|
|||||||
@@ -12,7 +12,6 @@
|
|||||||
@extend %mr-inline-auto;
|
@extend %mr-inline-auto;
|
||||||
|
|
||||||
padding-top: 110px;
|
padding-top: 110px;
|
||||||
max-width: 424px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&__heading {
|
&__heading {
|
||||||
@@ -74,10 +73,6 @@
|
|||||||
|
|
||||||
@media screen and (min-width: 600px) {
|
@media screen and (min-width: 600px) {
|
||||||
.menu {
|
.menu {
|
||||||
&__container {
|
|
||||||
max-width: $max-width;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__heading {
|
&__heading {
|
||||||
max-width: 653px;
|
max-width: 653px;
|
||||||
}
|
}
|
||||||
@@ -128,6 +123,7 @@
|
|||||||
max-width: 1294px;
|
max-width: 1294px;
|
||||||
column-gap: 18px;
|
column-gap: 18px;
|
||||||
margin-top: 106px;
|
margin-top: 106px;
|
||||||
|
padding-inline: unset;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1,6 +1,5 @@
|
|||||||
.offer {
|
.offer {
|
||||||
position: relative;
|
position: relative;
|
||||||
max-width: 428px;
|
|
||||||
margin-inline: auto;
|
margin-inline: auto;
|
||||||
|
|
||||||
&__container {
|
&__container {
|
||||||
@@ -61,10 +60,8 @@
|
|||||||
|
|
||||||
@media screen and (min-width: 600px) {
|
@media screen and (min-width: 600px) {
|
||||||
.offer {
|
.offer {
|
||||||
max-width: $max-width;
|
|
||||||
|
|
||||||
&__container {
|
&__container {
|
||||||
max-width: $max-width;
|
max-width: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
&__card-list {
|
&__card-list {
|
||||||
@@ -1,20 +1,18 @@
|
|||||||
.platform {
|
.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 {
|
&__container {
|
||||||
max-width: 428px;
|
|
||||||
margin-inline: auto;
|
margin-inline: auto;
|
||||||
padding-top: 26px;
|
padding-top: 26px;
|
||||||
padding-bottom: 58px;
|
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 {
|
&__image-container {
|
||||||
@include size(auto, 502px);
|
@include size(428px, 502px);
|
||||||
|
|
||||||
position: relative;
|
position: relative;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
@@ -81,10 +79,6 @@
|
|||||||
|
|
||||||
@media screen and (min-width: 600px) {
|
@media screen and (min-width: 600px) {
|
||||||
.platform {
|
.platform {
|
||||||
&__container {
|
|
||||||
max-width: $max-width;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__image-container {
|
&__image-container {
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
margin-inline: auto;
|
margin-inline: auto;
|
||||||
@@ -159,7 +153,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__image-container {
|
&__image-container {
|
||||||
@include size(auto, 632px);
|
@include size(622px, 652px);
|
||||||
|
|
||||||
padding-top: 20px;
|
padding-top: 20px;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
@@ -1,5 +1,4 @@
|
|||||||
.service {
|
.service {
|
||||||
max-width: 428px;
|
|
||||||
margin-inline: auto;
|
margin-inline: auto;
|
||||||
|
|
||||||
&__container {
|
&__container {
|
||||||
@@ -22,9 +21,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__img-container {
|
&__img-container {
|
||||||
|
@include size(406px, 405px);
|
||||||
|
|
||||||
padding-top: 75px;
|
padding-top: 75px;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: fit-content;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&__main-img {
|
&__main-img {
|
||||||
@@ -97,8 +97,6 @@
|
|||||||
|
|
||||||
@media screen and (min-width: 600px) {
|
@media screen and (min-width: 600px) {
|
||||||
.service {
|
.service {
|
||||||
max-width: $max-width;
|
|
||||||
|
|
||||||
&__img-container {
|
&__img-container {
|
||||||
margin-inline: auto;
|
margin-inline: auto;
|
||||||
}
|
}
|
||||||
@@ -18,14 +18,13 @@
|
|||||||
@include flex-layout($justify: center, $direction: column);
|
@include flex-layout($justify: center, $direction: column);
|
||||||
|
|
||||||
margin: auto;
|
margin: auto;
|
||||||
max-width: 428px;
|
|
||||||
padding-top: 67px;
|
padding-top: 67px;
|
||||||
}
|
}
|
||||||
// Start banner
|
// Start banner
|
||||||
&__banner-container {
|
&__banner-container {
|
||||||
@extend %d-flex;
|
@extend %d-flex;
|
||||||
@include size(428px, auto);
|
|
||||||
@include flex-layout($justify: center, $direction: column);
|
@include flex-layout($justify: center, $direction: column);
|
||||||
|
@include size(428px, 417px);
|
||||||
|
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
@@ -277,10 +276,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__banner-container {
|
&__banner-container {
|
||||||
width: unset;
|
@include size(auto, auto);
|
||||||
}
|
}
|
||||||
|
|
||||||
&__main-image {
|
&__main-image {
|
||||||
|
@include size(355px, 417px);
|
||||||
|
|
||||||
margin-inline: auto;
|
margin-inline: auto;
|
||||||
position: relative;
|
position: relative;
|
||||||
padding-left: 50px;
|
padding-left: 50px;
|
||||||
@@ -343,7 +344,6 @@
|
|||||||
|
|
||||||
padding-top: 130px;
|
padding-top: 130px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: $max-width;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Start content
|
// Start content
|
||||||
@@ -430,6 +430,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__main-image {
|
&__main-image {
|
||||||
|
@include size(570px, 655px);
|
||||||
|
|
||||||
padding-right: 29px;
|
padding-right: 29px;
|
||||||
}
|
}
|
||||||
|
|
||||||
Reference in New Issue
Block a user