mirror of
https://github.com/Nezumi-2711/html-css-practice-two.git
synced 2026-09-22 13:38:40 +00:00
Update code and assets file
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 171 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 496 KiB After Width: | Height: | Size: 310 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 225 KiB After Width: | Height: | Size: 136 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 110 KiB After Width: | Height: | Size: 110 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 76 KiB After Width: | Height: | Size: 43 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
|
Before Width: | Height: | Size: 2.5 KiB After Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 584 KiB After Width: | Height: | Size: 411 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 830 KiB After Width: | Height: | Size: 168 KiB |
+7
-12
@@ -13,16 +13,11 @@ html(lang="en")
|
||||
)
|
||||
title Food Hut
|
||||
body
|
||||
header.header
|
||||
.header-container
|
||||
.logo-wrapper
|
||||
a.logo-link(href="javascript:void(0)")
|
||||
img.logo(src="./assets/images/logo.svg", alt="Food Hut logo")
|
||||
.header-content
|
||||
include layouts/nav-menu
|
||||
include layouts/welcome
|
||||
include layouts/offer
|
||||
include layouts/service
|
||||
include layouts/menu
|
||||
include layouts/platform
|
||||
include layouts/header
|
||||
main
|
||||
include sections/welcome
|
||||
include sections/offer
|
||||
include sections/service
|
||||
include sections/menu
|
||||
include sections/platform
|
||||
include layouts/footer
|
||||
|
||||
@@ -5,17 +5,20 @@
|
||||
footer.footer
|
||||
.footer__container
|
||||
.footer__introduction
|
||||
p.footer__branch-name.primary-text Foodhut
|
||||
p.footer__brand-name.primary-text Foodhut
|
||||
p.footer__description Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
|
||||
.footer__social-media
|
||||
a.footer__social-link(href="javascript:void(0)")
|
||||
img.facebook-icon(
|
||||
src=image_footer_path + "facebook.png",
|
||||
alt="Facebook icon"
|
||||
)
|
||||
a.footer__social-link(href="javascript:void(0)")
|
||||
img.instagram-icon(
|
||||
src=image_footer_path + "instagram.png",
|
||||
alt="Instagram icon"
|
||||
)
|
||||
a.footer__social-link(href="javascript:void(0)")
|
||||
img.twitter-icon(
|
||||
src=image_footer_path + "twitter.png",
|
||||
alt="Twitter icon"
|
||||
|
||||
@@ -0,0 +1,16 @@
|
||||
- var list = ["Today Special Offers", "Why FoodHut", "Our Menu", "Our Popular Food"];
|
||||
|
||||
header.header
|
||||
.header-container
|
||||
.logo-wrapper
|
||||
a.logo-link(href="javascript:void(0)")
|
||||
img.logo(src="./assets/images/logo.svg", alt="Food Hut logo")
|
||||
.header-content
|
||||
nav.nav
|
||||
input.toggle-menu(type="checkbox")
|
||||
.icon-menu
|
||||
ul.nav-list
|
||||
each val in list
|
||||
li.nav-item
|
||||
a.nav-link.link-text(href="javascript:void(0)")= val
|
||||
a.btn.nav-download-btn(href="javascript:void(0)") Download App
|
||||
@@ -1,10 +0,0 @@
|
||||
- var list = ["Today Special Offers", "Why FoodHut", "Our Menu", "Our Popular Food"];
|
||||
|
||||
nav.nav
|
||||
input.toggle-menu(type="checkbox")
|
||||
.icon-menu
|
||||
ul.nav-list
|
||||
each val in list
|
||||
li.nav-item
|
||||
a.nav-link.link-text(href="javascript:void(0)")= val
|
||||
a.btn.nav-download-btn(href="javascript:void(0)") Download App
|
||||
@@ -1,34 +0,0 @@
|
||||
- var platform_image_path = "./assets/images/platform/";
|
||||
|
||||
section.platform
|
||||
.platform__container
|
||||
.platform__image-container
|
||||
picture
|
||||
source(
|
||||
media="(min-width: 1200px)",
|
||||
srcset=platform_image_path + "main-image-desktop.png"
|
||||
)
|
||||
img.platform__main-image(
|
||||
src=platform_image_path + "main-image-mobile.png",
|
||||
alt="The image introduce the platform"
|
||||
)
|
||||
.platform__content
|
||||
h2.platform__heading It's Now
|
||||
= " "
|
||||
span.primary-text More Easy
|
||||
= " to "
|
||||
span.secondary-text Order
|
||||
= " by Our Mobile "
|
||||
span.primary-text App
|
||||
p.platform__description All you need to do is downlode one of the best delivery apps, makes a and most companies are opting for mobile app devlopment for food delivery.
|
||||
.platform__store-container
|
||||
.platform__google-store
|
||||
img.platform__google-store-image(
|
||||
src=platform_image_path + "chplay.png",
|
||||
alt="Google store image"
|
||||
)
|
||||
.platform__app-store
|
||||
img.platform__app-store-image(
|
||||
src=platform_image_path + "app-store.png",
|
||||
alt="App store image"
|
||||
)
|
||||
@@ -6,7 +6,7 @@
|
||||
section.menu
|
||||
.menu__container
|
||||
h2.menu__heading
|
||||
span.primary-text= Menu
|
||||
span.primary-text Menu
|
||||
= " That "
|
||||
span.secondary-text Always
|
||||
= " Make You Fall In "
|
||||
@@ -0,0 +1,48 @@
|
||||
- var platform_image_path = "./assets/images/platform/";
|
||||
- var list_food_image_path = [{mobile_image_path: platform_image_path + "food-1-mobile.png", desktop_image_path: platform_image_path + "food-1-desktop.png"}, {mobile_image_path: platform_image_path + "food-2-mobile.png", desktop_image_path: platform_image_path + "food-2-desktop.png"}, {mobile_image_path: platform_image_path + "food-3-mobile.png", desktop_image_path: platform_image_path + "food-3-desktop.png"}, {mobile_image_path: platform_image_path + "food-4-mobile.png", desktop_image_path: platform_image_path + "food-4-desktop.png"}];
|
||||
|
||||
section.platform
|
||||
.platform__container
|
||||
.platform__image-container
|
||||
each item in list_food_image_path
|
||||
picture.platform__image-food
|
||||
source(media="(min-width: 1200px)", srcset=item.desktop_image_path)
|
||||
img(src=item.mobile_image_path, alt="Food image")
|
||||
picture
|
||||
source(
|
||||
media="(min-width: 1200px)",
|
||||
srcset=platform_image_path + "background-desktop.png"
|
||||
)
|
||||
img.platform__background-img(
|
||||
src=platform_image_path + "background-mobile.png",
|
||||
alt="Background image"
|
||||
)
|
||||
picture
|
||||
source(
|
||||
media="(min-width: 1200px)",
|
||||
srcset=platform_image_path + "main-image-desktop.png"
|
||||
)
|
||||
img.platform__main-image(
|
||||
src=platform_image_path + "main-image-mobile.png",
|
||||
alt="The image introduce the platform"
|
||||
)
|
||||
.platform__content
|
||||
h2.platform__heading It's Now
|
||||
= " "
|
||||
span.primary-text More Easy
|
||||
= " to "
|
||||
span.secondary-text Order
|
||||
= " by Our Mobile "
|
||||
span.primary-text App
|
||||
p.platform__description All you need to do is downlode one of the best delivery apps, make a and most companies are opting for mobile app devlopment for food delivery
|
||||
.platform__store-container
|
||||
.platform__google-store
|
||||
img.platform__google-store-image(
|
||||
src=platform_image_path + "chplay.png",
|
||||
alt="Google store image"
|
||||
)
|
||||
.platform__app-store
|
||||
img.platform__app-store-image(
|
||||
src=platform_image_path + "app-store.png",
|
||||
alt="App store image"
|
||||
)
|
||||
@@ -1,16 +1,46 @@
|
||||
- var welcome_img_path = "./assets/images/welcome/";
|
||||
- var list_food_image_mobile = [{img_mobile_path: welcome_img_path + "food-1-mobile.png", img_desktop_path: welcome_img_path + "food-1-desktop.png"}, {img_mobile_path: welcome_img_path + "food-2-mobile.png", img_desktop_path: welcome_img_path + "food-2-desktop.png"}, {img_mobile_path: welcome_img_path + "food-3-mobile.png", img_desktop_path: welcome_img_path + "food-3-desktop.png"}, {img_mobile_path: welcome_img_path + "food-4-mobile.png", img_desktop_path: welcome_img_path + "food-4-desktop.png"}];
|
||||
|
||||
section.welcome
|
||||
.welcome__container
|
||||
.welcome__banner
|
||||
.welcome__banner-container
|
||||
.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: 840px)",
|
||||
media="(min-width: 1200px)",
|
||||
srcset=welcome_img_path + "review-card-desktop.png"
|
||||
)
|
||||
img.welcome__review-card(
|
||||
src=welcome_img_path + "review-card-mobile.png",
|
||||
alt="Review card"
|
||||
)
|
||||
picture
|
||||
source(
|
||||
media="(min-width: 1200px)",
|
||||
srcset=welcome_img_path + "rate-card-desktop.png"
|
||||
)
|
||||
img.welcome__rate-card(
|
||||
src=welcome_img_path + "rate-card-mobile.png",
|
||||
alt="Review card"
|
||||
)
|
||||
.welcome__background-banner
|
||||
picture
|
||||
source(
|
||||
media="(min-width: 1200px)",
|
||||
srcset=welcome_img_path + "lines-background-desktop.png"
|
||||
)
|
||||
img.welcome__lines-background(
|
||||
@@ -19,7 +49,7 @@ section.welcome
|
||||
)
|
||||
picture
|
||||
source(
|
||||
media="(min-width: 840px)",
|
||||
media="(min-width: 1200px)",
|
||||
srcset=welcome_img_path + "arrow-desktop.png",
|
||||
alt="Arrow image"
|
||||
)
|
||||
@@ -27,8 +57,13 @@ section.welcome
|
||||
src=welcome_img_path + "arrow-mobile.png",
|
||||
alt="Arrow image"
|
||||
)
|
||||
picture
|
||||
source(
|
||||
media="(min-width: 1200px)",
|
||||
srcset=welcome_img_path + "mint-desktop.png"
|
||||
)
|
||||
img.welcome__mint-img(
|
||||
src=welcome_img_path + "mint.png",
|
||||
src=welcome_img_path + "mint-mobile.png",
|
||||
alt="Mint image"
|
||||
)
|
||||
.welcome__content
|
||||
@@ -7,7 +7,7 @@
|
||||
}
|
||||
|
||||
@mixin base-icon-menu {
|
||||
@include size(36px, 3px);
|
||||
@include size(36px, 5px);
|
||||
|
||||
background: #000000;
|
||||
border-radius: 10px;
|
||||
@@ -60,12 +60,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@mixin set-absolute-and-location(
|
||||
$top: null,
|
||||
$left: null,
|
||||
$right: null,
|
||||
$bottom: null
|
||||
) {
|
||||
@mixin set-location($top: null, $left: null, $right: null, $bottom: null) {
|
||||
@if $top != null {
|
||||
top: $top;
|
||||
}
|
||||
|
||||
@@ -8,6 +8,7 @@ $white: #fff;
|
||||
$gray: #686d77;
|
||||
$primary-color: #f54748;
|
||||
$secondary-color: #fdc55e;
|
||||
$secondary-light-color: #f7d699;
|
||||
|
||||
// Font size
|
||||
$fs-xx-sm: 14px;
|
||||
|
||||
@@ -42,4 +42,5 @@ $font-path: "../assets/fonts";
|
||||
|
||||
* {
|
||||
font-family: $primary-font;
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
.btn {
|
||||
align-self: center;
|
||||
padding: 13px 20px;
|
||||
padding: 11px 20px;
|
||||
background-color: $primary-color;
|
||||
border-radius: 100px;
|
||||
font-size: $fs-md;
|
||||
|
||||
@@ -11,14 +11,14 @@
|
||||
|
||||
.food-image {
|
||||
@extend %absolute;
|
||||
@include set-absolute-and-location($top: 29px);
|
||||
@include set-location($top: 29px);
|
||||
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.price {
|
||||
@extend %absolute;
|
||||
@include set-absolute-and-location($top: 176px, $right: 70px);
|
||||
@include set-location($top: 176px, $right: 70px);
|
||||
@include size(52px, 52px);
|
||||
|
||||
color: $white;
|
||||
@@ -32,7 +32,7 @@
|
||||
|
||||
.content-card {
|
||||
@extend %d-flex, %align-center-col, %absolute;
|
||||
@include set-absolute-and-location($bottom: 60px);
|
||||
@include set-location($bottom: 72px);
|
||||
@include size(100%, auto);
|
||||
}
|
||||
|
||||
@@ -41,6 +41,10 @@
|
||||
@include flex-layout($align: center, $gap: 10px);
|
||||
}
|
||||
|
||||
.rate-point {
|
||||
font-size: $fs-md;
|
||||
}
|
||||
|
||||
.star-container {
|
||||
@include size(24px, 22px);
|
||||
}
|
||||
@@ -54,21 +58,21 @@
|
||||
.avatar {
|
||||
&:first-child {
|
||||
@extend %absolute;
|
||||
@include set-absolute-and-location($left: 38px);
|
||||
@include set-location($left: 38px);
|
||||
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
@extend %absolute;
|
||||
@include set-absolute-and-location($left: 19px);
|
||||
@include set-location($left: 19px);
|
||||
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
@extend %absolute;
|
||||
@include set-absolute-and-location($left: 0);
|
||||
@include set-location($left: 0);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -83,7 +87,7 @@
|
||||
@include size(100%, auto);
|
||||
|
||||
max-width: 243px;
|
||||
margin-top: 16px;
|
||||
margin-top: 13px;
|
||||
text-align: center;
|
||||
text-transform: capitalize;
|
||||
color: $black;
|
||||
@@ -91,7 +95,7 @@
|
||||
|
||||
.order-btn {
|
||||
@extend %absolute;
|
||||
@include set-absolute-and-location($bottom: 0px);
|
||||
@include set-location($bottom: 0px);
|
||||
|
||||
padding: 10px 20px;
|
||||
text-transform: capitalize;
|
||||
|
||||
@@ -3,17 +3,18 @@
|
||||
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
top: -1px;
|
||||
|
||||
&:before {
|
||||
@include icon-menu;
|
||||
|
||||
top: -10px;
|
||||
top: -11px;
|
||||
}
|
||||
|
||||
&:after {
|
||||
@include icon-menu;
|
||||
|
||||
top: 10px;
|
||||
top: 11px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -11,23 +11,35 @@
|
||||
max-width: 428px;
|
||||
}
|
||||
|
||||
&__branch-name {
|
||||
&__brand-name {
|
||||
font-size: $fs-x-lg;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&__introduction .footer__description {
|
||||
margin-top: 10px;
|
||||
margin-top: 8 px;
|
||||
font-size: $fs-md;
|
||||
max-width: 325px;
|
||||
}
|
||||
|
||||
&__social-media {
|
||||
@extend %d-flex;
|
||||
@include flex-layout($gap: 30px);
|
||||
@include flex-layout($gap: 30px, $align: center);
|
||||
margin-top: 22.6px;
|
||||
}
|
||||
|
||||
&__social-link:first-child {
|
||||
@include size(auto, 21px);
|
||||
}
|
||||
|
||||
&__social-link:nth-child(2) {
|
||||
@include size(auto, 19px);
|
||||
}
|
||||
|
||||
&__social-link:nth-child(3) {
|
||||
@include size(auto, 17px);
|
||||
}
|
||||
|
||||
&__information {
|
||||
@extend %d-flex;
|
||||
@include flex-layout($gap: 80px);
|
||||
@@ -87,6 +99,8 @@
|
||||
@extend %mr-ml-auto;
|
||||
@include size(fit-content, auto);
|
||||
|
||||
font-size: $fs-x-sm;
|
||||
font-family: $secondary-font;
|
||||
margin-top: 80px;
|
||||
padding-bottom: 29px;
|
||||
}
|
||||
@@ -97,7 +111,7 @@
|
||||
&__container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
max-width: 1440px;
|
||||
max-width: $max-width;
|
||||
width: auto;
|
||||
padding-inline: 90px;
|
||||
column-gap: 10px;
|
||||
@@ -126,7 +140,21 @@
|
||||
}
|
||||
|
||||
&__introduction {
|
||||
margin-top: 15px;
|
||||
padding-top: 119px;
|
||||
padding-left: 112px;
|
||||
}
|
||||
|
||||
&__information {
|
||||
padding-top: 155px;
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin-top: 9px;
|
||||
padding-left: 1px;
|
||||
}
|
||||
|
||||
&__contact {
|
||||
padding-top: 125px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
.header {
|
||||
@extend %absolute;
|
||||
@include set-absolute-and-location($top: 0, $right: 0, $left: 0);
|
||||
@include set-location($top: 0, $right: 0, $left: 0);
|
||||
|
||||
max-width: 428px;
|
||||
margin: auto;
|
||||
@@ -42,5 +42,6 @@
|
||||
@include size(100%, auto);
|
||||
|
||||
max-width: 918px;
|
||||
padding-bottom: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
&__container {
|
||||
@extend %mr-inline-auto;
|
||||
|
||||
padding-top: 150px;
|
||||
padding-top: 110px;
|
||||
max-width: 424px;
|
||||
}
|
||||
|
||||
@@ -29,11 +29,11 @@
|
||||
@extend %d-flex;
|
||||
@include flex-layout($gap: 30px);
|
||||
|
||||
margin-top: 62px;
|
||||
padding-left: 50px;
|
||||
margin-top: 74px;
|
||||
overflow-x: auto;
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
padding-left: 49px;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
@@ -60,9 +60,9 @@
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: 100%;
|
||||
column-gap: 18px;
|
||||
column-gap: 70px;
|
||||
margin-top: 43px;
|
||||
margin-inline: 59px;
|
||||
padding-inline: 59px;
|
||||
overflow-x: auto;
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
@@ -84,7 +84,6 @@
|
||||
}
|
||||
|
||||
&__list-category {
|
||||
max-width: 1018px;
|
||||
margin-inline: 59px;
|
||||
}
|
||||
|
||||
@@ -98,10 +97,28 @@
|
||||
|
||||
@media screen and (min-width: 1200px) {
|
||||
.menu {
|
||||
&__container {
|
||||
padding-top: 160px;
|
||||
}
|
||||
|
||||
&__list-category {
|
||||
@include flex-layout($gap: 33px);
|
||||
|
||||
margin-top: 58px;
|
||||
}
|
||||
|
||||
&__list-category {
|
||||
max-width: 1018px;
|
||||
margin-inline: auto;
|
||||
padding-left: unset;
|
||||
overflow-x: unset;
|
||||
}
|
||||
|
||||
&__card-list {
|
||||
margin-inline: auto;
|
||||
max-width: 1294px;
|
||||
column-gap: 18px;
|
||||
margin-top: 106px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,6 +10,7 @@
|
||||
right: 25px;
|
||||
background-color: $white;
|
||||
z-index: 2;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.nav-download-btn {
|
||||
@@ -27,8 +28,8 @@
|
||||
border-bottom: unset;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $secondary-color;
|
||||
&:hover .nav-link {
|
||||
color: $secondary-color;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -67,13 +68,9 @@
|
||||
border-bottom: none;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
|
||||
&:hover {
|
||||
background-color: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: $secondary-color;
|
||||
}
|
||||
// .nav-link:hover {
|
||||
// color: $secondary-color;
|
||||
// }
|
||||
}
|
||||
|
||||
@@ -9,13 +9,13 @@
|
||||
|
||||
max-width: 380px;
|
||||
margin: auto;
|
||||
padding-top: 101px;
|
||||
padding-top: 90px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__dot-background {
|
||||
@extend %absolute;
|
||||
@include set-absolute-and-location($top: 168px, $left: 0px);
|
||||
@include set-location($top: 168px, $left: 0px);
|
||||
|
||||
display: none;
|
||||
}
|
||||
@@ -32,7 +32,7 @@
|
||||
text-transform: capitalize;
|
||||
text-align: center;
|
||||
color: $black;
|
||||
margin-top: 15px;
|
||||
margin-top: 22px;
|
||||
max-width: 856px;
|
||||
margin-inline: auto;
|
||||
}
|
||||
@@ -42,7 +42,7 @@
|
||||
@include flex-layout($wrap: nowrap, $gap: 70px);
|
||||
|
||||
padding-inline: 35px;
|
||||
padding-top: 65px;
|
||||
margin-top: 65px;
|
||||
overflow-x: auto;
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
@@ -54,7 +54,7 @@
|
||||
|
||||
&__rosemary-container {
|
||||
@extend %absolute;
|
||||
@include set-absolute-and-location($bottom: -120px, $right: 0);
|
||||
@include set-location($bottom: -95px, $right: 0);
|
||||
|
||||
z-index: 0;
|
||||
}
|
||||
@@ -82,7 +82,22 @@
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1200px) {
|
||||
.offer__dot-background {
|
||||
.offer {
|
||||
&__dot-background {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&__container {
|
||||
padding-top: 142px;
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin-top: 27px;
|
||||
padding-left: 64px;
|
||||
}
|
||||
|
||||
&__card-list {
|
||||
margin-top: 67px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -18,16 +18,45 @@
|
||||
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&__main-image {
|
||||
@extend %absolute;
|
||||
@include set-absolute-and-location($top: 0, $right: 0);
|
||||
@include set-location($top: 0px, $left: 60px);
|
||||
}
|
||||
|
||||
&__image-food:first-child {
|
||||
@extend %absolute;
|
||||
@include set-location($bottom: 54px, $right: 163px);
|
||||
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__image-food:nth-child(2) {
|
||||
@extend %absolute;
|
||||
@include set-location($bottom: 67px, $right: 118px);
|
||||
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__image-food:nth-child(3) {
|
||||
@extend %absolute;
|
||||
@include set-location($bottom: 92px, $right: 75px);
|
||||
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__image-food:nth-child(4) {
|
||||
@extend %absolute;
|
||||
@include set-location($bottom: 147px, $right: 45px);
|
||||
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__content {
|
||||
padding-top: 52px;
|
||||
padding-left: 20px;
|
||||
padding-top: 46px;
|
||||
padding-left: 25px;
|
||||
}
|
||||
|
||||
&__heading {
|
||||
@@ -39,7 +68,7 @@
|
||||
&__description {
|
||||
font-size: $fs-md;
|
||||
color: $black;
|
||||
margin-top: 23px;
|
||||
margin-top: 31px;
|
||||
max-width: 366px;
|
||||
}
|
||||
|
||||
@@ -57,17 +86,39 @@
|
||||
@include flex-layout($direction: row-reverse, $align: center);
|
||||
|
||||
display: flex;
|
||||
max-width: 1440px;
|
||||
max-width: $max-width;
|
||||
max-height: 632px;
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
&__image-container {
|
||||
@include size(704px, 786px);
|
||||
@include size(100%, 500px);
|
||||
}
|
||||
|
||||
&__background-img {
|
||||
@include set-location($top: 0px, $right: 0px);
|
||||
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
&__main-image {
|
||||
@include set-absolute-and-location($top: 160px, $right: 0);
|
||||
@include set-location($top: 0px, $right: 58px, $left: unset);
|
||||
}
|
||||
|
||||
&__image-food:first-child {
|
||||
@include set-location($bottom: 53px, $right: 160px);
|
||||
}
|
||||
|
||||
&__image-food:nth-child(2) {
|
||||
@include set-location($bottom: 68px, $right: 117px);
|
||||
}
|
||||
|
||||
&__image-food:nth-child(3) {
|
||||
@include set-location($bottom: 90px, $right: 70px);
|
||||
}
|
||||
|
||||
&__image-food:nth-child(4) {
|
||||
@include set-location($bottom: 145px, $right: 43px);
|
||||
}
|
||||
|
||||
&__heading {
|
||||
@@ -83,11 +134,50 @@
|
||||
@media screen and (min-width: 1200px) {
|
||||
.platform {
|
||||
&__container {
|
||||
padding-top: 170px;
|
||||
@include flex-layout($justify: space-between);
|
||||
|
||||
display: flex;
|
||||
padding-top: 122px;
|
||||
}
|
||||
|
||||
&__image-container {
|
||||
@include size(600px, 632px);
|
||||
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&__main-image {
|
||||
@include set-absolute-and-location($top: 70px, $right: 0);
|
||||
@include set-location($top: 20px, $right: 105px);
|
||||
}
|
||||
|
||||
&__background-img {
|
||||
@include set-location($top: 20px, $right: 00px);
|
||||
}
|
||||
|
||||
&__image-food:first-child {
|
||||
@include set-location($bottom: -65px, $right: 263px);
|
||||
}
|
||||
|
||||
&__image-food:nth-child(2) {
|
||||
@include set-location($bottom: -40px, $right: 190px);
|
||||
}
|
||||
|
||||
&__image-food:nth-child(3) {
|
||||
@include set-location($bottom: -8px, $right: 125px);
|
||||
}
|
||||
|
||||
&__image-food:nth-child(4) {
|
||||
@include set-location($bottom: 80px, $right: 80px);
|
||||
}
|
||||
|
||||
&__heading,
|
||||
&__description,
|
||||
&__store-container {
|
||||
padding-left: 47px;
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin-top: 52px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
|
||||
&__background-color {
|
||||
@extend %absolute;
|
||||
@include set-absolute-and-location($top: 200px, $left: 0);
|
||||
@include set-location($top: 200px, $left: 0);
|
||||
@include size(100%, 50%);
|
||||
|
||||
background: linear-gradient(
|
||||
@@ -30,20 +30,21 @@
|
||||
|
||||
&__background-img {
|
||||
@extend %absolute;
|
||||
@include set-absolute-and-location($top: 65px, $left: 0);
|
||||
@include set-location($top: 75px, $left: 0);
|
||||
}
|
||||
|
||||
&__main-img {
|
||||
@extend %absolute;
|
||||
@include set-absolute-and-location($top: 60px, $left: 35px);
|
||||
@include set-location($top: 70px, $left: 35px);
|
||||
}
|
||||
|
||||
&__vegetable-img {
|
||||
@extend %absolute;
|
||||
@include set-absolute-and-location($bottom: 0, $left: 50px);
|
||||
@include set-location($bottom: -10px, $left: 50px);
|
||||
}
|
||||
|
||||
&__content {
|
||||
margin-top: 65px;
|
||||
padding-inline: 24px;
|
||||
|
||||
z-index: 1;
|
||||
@@ -70,14 +71,14 @@
|
||||
@include flex-layout(
|
||||
$direction: column,
|
||||
$justify: space-between,
|
||||
$gap: 41px
|
||||
$gap: 40px
|
||||
);
|
||||
|
||||
max-width: 514px;
|
||||
margin-top: 81px;
|
||||
&-list {
|
||||
@extend %d-flex;
|
||||
@include flex-layout($direction: column, $gap: 30px, $justify: center);
|
||||
@include flex-layout($direction: column, $gap: 33px, $justify: center);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -88,6 +89,7 @@
|
||||
|
||||
&__name-category {
|
||||
font-size: $fs-md;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
&__btn {
|
||||
@@ -130,12 +132,12 @@
|
||||
}
|
||||
|
||||
&__background-img {
|
||||
@include set-absolute-and-location($top: 100px, $left: 0);
|
||||
@include set-location($top: 100px, $left: 0);
|
||||
@extend %absolute_840;
|
||||
}
|
||||
|
||||
&__background-color {
|
||||
@include set-absolute-and-location($top: 400px, $left: -100px);
|
||||
@include set-location($top: 400px, $left: -100px);
|
||||
@include size(400px, 50%);
|
||||
|
||||
border-radius: 50%;
|
||||
@@ -149,12 +151,12 @@
|
||||
}
|
||||
|
||||
&__main-img {
|
||||
@include set-absolute-and-location($top: 95px, $left: 35px);
|
||||
@include set-location($top: 95px, $left: 35px);
|
||||
@extend %absolute_840;
|
||||
}
|
||||
|
||||
&__vegetable-img {
|
||||
@include set-absolute-and-location($bottom: 145px, $left: 50px);
|
||||
@include set-location($bottom: 145px, $left: 50px);
|
||||
@extend %absolute_840;
|
||||
}
|
||||
|
||||
@@ -186,12 +188,12 @@
|
||||
}
|
||||
|
||||
&__background-img {
|
||||
@include set-absolute-and-location($top: 0px, $left: 0);
|
||||
@include set-location($top: 0px, $left: 0);
|
||||
@extend %absolute_1200;
|
||||
}
|
||||
|
||||
&__background-color {
|
||||
@include set-absolute-and-location($left: -150px);
|
||||
@include set-location($left: -150px);
|
||||
@include size(500px, 50%);
|
||||
|
||||
border-radius: 50%;
|
||||
@@ -212,17 +214,24 @@
|
||||
}
|
||||
|
||||
&__main-img {
|
||||
@include set-absolute-and-location($top: -17px, $left: 70px);
|
||||
@extend %absolute_1200;
|
||||
@include set-location($top: 45px, $left: 70px);
|
||||
}
|
||||
|
||||
&__vegetable-img {
|
||||
@include set-absolute-and-location($bottom: 95px, $left: 105px);
|
||||
@extend %absolute_1200;
|
||||
@include set-location($bottom: 35px, $left: 92px);
|
||||
}
|
||||
|
||||
&__background-img {
|
||||
@include set-location($top: 55px, $left: 0);
|
||||
}
|
||||
|
||||
&__category-list {
|
||||
@include flex-layout($gap: 34px);
|
||||
}
|
||||
|
||||
&__content {
|
||||
padding-top: 50px;
|
||||
padding-top: 78px;
|
||||
padding-left: 29px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,13 +10,15 @@
|
||||
rgba(245, 71, 72, 0) 100%
|
||||
);
|
||||
|
||||
padding-top: 50px;
|
||||
|
||||
&__container {
|
||||
@extend %d-flex;
|
||||
@include flex-layout($justify: center, $direction: column);
|
||||
|
||||
margin: auto;
|
||||
max-width: 428px;
|
||||
padding-top: 117px;
|
||||
padding-top: 67px;
|
||||
}
|
||||
// Start banner
|
||||
&__banner-container {
|
||||
@@ -27,25 +29,60 @@
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__banner-img {
|
||||
&__main-image {
|
||||
text-align: right;
|
||||
padding-right: 25px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__food-img:nth-child(2) {
|
||||
@extend %absolute;
|
||||
@include set-location($bottom: 75px, $left: 12px);
|
||||
}
|
||||
|
||||
&__food-img:nth-child(3) {
|
||||
@extend %absolute;
|
||||
@include set-location($bottom: -7px, $left: 110);
|
||||
}
|
||||
|
||||
&__food-img:nth-child(4) {
|
||||
@extend %absolute;
|
||||
@include set-location($bottom: 0px, $right: 80px);
|
||||
}
|
||||
|
||||
&__food-img:nth-child(5) {
|
||||
@extend %absolute;
|
||||
@include set-location($bottom: 85px, $right: 15px);
|
||||
}
|
||||
|
||||
&__review-card {
|
||||
@extend %absolute;
|
||||
@include set-location($top: 100px, $left: 10px);
|
||||
}
|
||||
|
||||
&__rate-card {
|
||||
@extend %absolute;
|
||||
@include set-location($top: 103px, $right: 0);
|
||||
}
|
||||
|
||||
&__background-banner {
|
||||
@extend %absolute;
|
||||
@include size(100%, 100%);
|
||||
}
|
||||
|
||||
&__lines-background {
|
||||
@extend %absolute;
|
||||
@include set-absolute-and-location($top: -76px, $right: 0);
|
||||
@include size(187px, 430px);
|
||||
@include set-location($top: -85px, $right: 1px);
|
||||
}
|
||||
|
||||
&__arrow-img-up {
|
||||
@extend %absolute;
|
||||
@include set-absolute-and-location($top: -15px, $right: 50px);
|
||||
@include size(43px, 215px);
|
||||
@include set-location($top: -15px, $right: 40px);
|
||||
}
|
||||
|
||||
&__mint-img {
|
||||
@extend %absolute;
|
||||
@include set-absolute-and-location($bottom: 100px, $right: 0);
|
||||
@include set-location($bottom: 90px, $right: 0px);
|
||||
}
|
||||
// End banner
|
||||
|
||||
@@ -56,7 +93,7 @@
|
||||
@include flex-layout($direction: column);
|
||||
|
||||
position: relative;
|
||||
padding-top: 63.37px;
|
||||
padding-top: 58px;
|
||||
padding-inline: 24px;
|
||||
}
|
||||
|
||||
@@ -68,7 +105,7 @@
|
||||
|
||||
&__orange-img-wrapper {
|
||||
@extend %absolute;
|
||||
@include set-absolute-and-location($top: 0, $right: 35px);
|
||||
@include set-location($top: 7px, $right: 0);
|
||||
}
|
||||
|
||||
&__text-box {
|
||||
@@ -78,7 +115,8 @@
|
||||
|
||||
background-color: #feeae9;
|
||||
border-radius: 100px;
|
||||
padding: 6px;
|
||||
padding: 4px;
|
||||
margin-left: 10px;
|
||||
font-size: $fs-xx-sm;
|
||||
}
|
||||
|
||||
@@ -97,11 +135,11 @@
|
||||
&__head-arrow-container {
|
||||
@include size(13px, 7.3px);
|
||||
@extend %absolute;
|
||||
@include set-absolute-and-location($right: 107px);
|
||||
@include set-location($right: 107px);
|
||||
}
|
||||
|
||||
&__heading {
|
||||
margin-top: 20px;
|
||||
margin-top: 12px;
|
||||
font-size: $fs-xx-lg;
|
||||
text-transform: capitalize;
|
||||
font-weight: 900;
|
||||
@@ -110,11 +148,11 @@
|
||||
|
||||
&__underline-img-container {
|
||||
@extend %absolute;
|
||||
@include set-absolute-and-location($bottom: -20px, $left: 0px);
|
||||
@include set-location($bottom: -27px, $left: 0px);
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin-top: 35px;
|
||||
margin-top: 40px;
|
||||
font-size: $fs-x-md;
|
||||
line-height: 140%;
|
||||
letter-spacing: -0.2px;
|
||||
@@ -158,7 +196,7 @@
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: #f7d699;
|
||||
background-color: $secondary-light-color;
|
||||
transition: 0.2s;
|
||||
}
|
||||
}
|
||||
@@ -168,7 +206,7 @@
|
||||
@include flex-layout($justify: space-between, $gap: 10px);
|
||||
|
||||
width: 100%;
|
||||
margin-top: 44px;
|
||||
margin-top: 35px;
|
||||
max-width: 376px;
|
||||
}
|
||||
|
||||
@@ -200,7 +238,7 @@
|
||||
padding: 17.5px 20px;
|
||||
border-radius: 50px;
|
||||
background-color: $white;
|
||||
box-shadow: 0 40px 50px 3px rgba($color: $primary-color, $alpha: 0.5);
|
||||
box-shadow: 0 25px 50px 3px rgba($color: $primary-color, $alpha: 0.4);
|
||||
transition: width 0.5s;
|
||||
line-height: 100%;
|
||||
}
|
||||
@@ -236,8 +274,8 @@
|
||||
&__container {
|
||||
@include flex-layout(
|
||||
$direction: row-reverse,
|
||||
$align: center,
|
||||
$justify: space-between
|
||||
$justify: space-between,
|
||||
$align: center
|
||||
);
|
||||
|
||||
padding-top: 130px;
|
||||
@@ -245,48 +283,18 @@
|
||||
max-width: $max-width;
|
||||
}
|
||||
|
||||
// Start banner
|
||||
&__banner-img {
|
||||
@include size(100%, 100%);
|
||||
|
||||
max-width: 650px;
|
||||
}
|
||||
|
||||
&__lines-background {
|
||||
@include set-absolute-and-location($top: -150px, $right: 0px);
|
||||
@include size(313px, 718px);
|
||||
}
|
||||
|
||||
&__arrow-img-up {
|
||||
@include size(117px, 315px);
|
||||
@include set-absolute-and-location($top: -40px, $right: 5px);
|
||||
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
&__head-arrow-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__banner-container {
|
||||
@include size(auto, auto);
|
||||
|
||||
max-width: 1000px;
|
||||
min-width: 500px;
|
||||
}
|
||||
// End banner
|
||||
|
||||
// Start content
|
||||
&__content {
|
||||
@include size(auto, auto);
|
||||
|
||||
padding-left: 70px;
|
||||
padding-right: 0px;
|
||||
padding-top: 70px;
|
||||
max-width: 560px;
|
||||
}
|
||||
|
||||
&__orange-img-wrapper {
|
||||
@include set-absolute-and-location($top: 170px, $right: -50px);
|
||||
@include set-location($top: 170px, $right: -50px);
|
||||
|
||||
transition: 0.2s;
|
||||
}
|
||||
@@ -297,7 +305,7 @@
|
||||
}
|
||||
|
||||
&__underline-img-container {
|
||||
@include set-absolute-and-location($bottom: -25px, $left: 8px);
|
||||
@include set-location($bottom: -25px, $left: 8px);
|
||||
}
|
||||
|
||||
&__description {
|
||||
@@ -317,7 +325,7 @@
|
||||
}
|
||||
|
||||
&__arrow-down-img-wrapper {
|
||||
@include set-absolute-and-location($top: -50px, $left: 220px);
|
||||
@include set-location($top: -50px, $left: 220px);
|
||||
|
||||
display: block;
|
||||
transition: 0.2s;
|
||||
@@ -329,7 +337,7 @@
|
||||
|
||||
&__slider-container {
|
||||
display: block;
|
||||
@include set-absolute-and-location($bottom: -135px, $left: 65px);
|
||||
@include set-location($bottom: -135px, $left: 65px);
|
||||
}
|
||||
|
||||
// End content
|
||||
@@ -338,20 +346,85 @@
|
||||
|
||||
@media screen and (min-width: 1200px) {
|
||||
.welcome {
|
||||
padding-top: 0px;
|
||||
|
||||
// Start banner
|
||||
&__banner {
|
||||
padding-right: 96px;
|
||||
}
|
||||
|
||||
&__banner-container {
|
||||
padding-right: 74px;
|
||||
@include size(100%, auto);
|
||||
}
|
||||
|
||||
&__main-image {
|
||||
padding-right: 29px;
|
||||
}
|
||||
|
||||
&__arrow-img-up {
|
||||
@include set-absolute-and-location($top: 8px, $right: 62px);
|
||||
@include set-location($top: 4px, $right: -34px);
|
||||
}
|
||||
|
||||
&__orange-img-wrapper {
|
||||
@include set-absolute-and-location($top: 110px, $right: -50px);
|
||||
@include set-location($top: 110px, $right: -50px);
|
||||
}
|
||||
|
||||
&__arrow-down-img-wrapper {
|
||||
@include set-absolute-and-location($top: -75px, $left: 230px);
|
||||
@include set-location($top: -40px, $left: 223px);
|
||||
}
|
||||
|
||||
&__lines-background {
|
||||
@include set-location($top: -85px, $right: -98px);
|
||||
}
|
||||
|
||||
&__review-card {
|
||||
@include set-location($top: 160px, $left: -47px);
|
||||
}
|
||||
|
||||
&__rate-card {
|
||||
@include set-location($top: 168px, $right: -62px);
|
||||
}
|
||||
|
||||
&__food-img:nth-child(2) {
|
||||
@include set-location($bottom: 108px, $left: -68px);
|
||||
}
|
||||
|
||||
&__food-img:nth-child(3) {
|
||||
@include set-location($bottom: -29px, $left: 102);
|
||||
}
|
||||
|
||||
&__food-img:nth-child(4) {
|
||||
@include set-location($bottom: -19px, $right: 107px);
|
||||
}
|
||||
|
||||
&__food-img:nth-child(5) {
|
||||
@include set-location($bottom: 125px, $right: -1px);
|
||||
}
|
||||
|
||||
// End banner
|
||||
|
||||
&__container {
|
||||
@include flex-layout($align: unset, $gap: 50px);
|
||||
}
|
||||
|
||||
&__content {
|
||||
padding-top: 81px;
|
||||
}
|
||||
|
||||
&__text-box {
|
||||
padding-left: 1px;
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin-top: 29px;
|
||||
}
|
||||
|
||||
&__search-form {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
&__slider-container {
|
||||
@include set-location($bottom: -58px, $left: 68px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user