mirror of
https://github.com/Nezumi-2711/loi-phan-internship.git
synced 2026-09-22 13:38:31 +00:00
Merge branch 'html-css-practice-two' into feature/service-style
This commit is contained in:
|
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 3.3 KiB |
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 2.9 KiB |
|
Before Width: | Height: | Size: 3.7 KiB After Width: | Height: | Size: 3.7 KiB |
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 3.2 KiB |
|
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 3.4 KiB |
|
Before Width: | Height: | Size: 2.9 KiB After Width: | Height: | Size: 2.9 KiB |
|
Before Width: | Height: | Size: 3.4 KiB After Width: | Height: | Size: 3.4 KiB |
|
Before Width: | Height: | Size: 2.7 KiB After Width: | Height: | Size: 2.7 KiB |
|
Before Width: | Height: | Size: 3.6 KiB After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.7 KiB |
@@ -1,30 +1,17 @@
|
||||
- var values = [1, 2, 3];
|
||||
|
||||
mixin cardFoodItem(itemFood, price, ratePoint, foodName, foodDescription)
|
||||
.offer__card-item
|
||||
img.offer__card-img(
|
||||
src=offer_img_path + "item-card.png",
|
||||
alt="Item card image"
|
||||
)
|
||||
img.offer__food-image(
|
||||
src=offer_img_path + "food-" + itemFood + ".png",
|
||||
alt="Food " + itemFood + " image"
|
||||
)
|
||||
span.offer__price= price + "$"
|
||||
.offer__content-card
|
||||
.offer__rate
|
||||
.offer__avatar-container
|
||||
each val in values
|
||||
img(
|
||||
src=offer_img_path + "avatar-" + val + "-item-" + itemFood + ".png",
|
||||
alt="Avatar user rate",
|
||||
class="offer__avatar-" + val
|
||||
)
|
||||
.offer__star-container
|
||||
mixin foodItemCard(food)
|
||||
.card-item
|
||||
img.card-img(src=offer_img_path + "item-card.png", alt="Item card image")
|
||||
img.food-image(src=food.imageUrl, alt=food.name + " image")
|
||||
span.price= food.price + "$"
|
||||
.content-card
|
||||
.rate
|
||||
.avatar-container
|
||||
if food.avatarImageList && food.avatarImageList.length > 0
|
||||
each avatar, index in food.avatarImageList
|
||||
img.avatar(src=avatar.avatarUrl, alt="Avatar user rate")
|
||||
.star-container
|
||||
img(src=offer_img_path + "star.png", alt="Star image")
|
||||
span.offer__rate-point= "(" + ratePoint + ")"
|
||||
span.offer__food-name= foodName
|
||||
p.offer__food-description= foodDescription
|
||||
a.offer__order-btn Order now
|
||||
|
||||
//- mixin listCategory(iconUrl, content)
|
||||
span.rate-point= "(" + food.ratePoint + ")"
|
||||
p.food-name= food.foodName
|
||||
p.food-description= food.foodDescription
|
||||
a.order-btn.btn(href="javascript:void(0)") Order now
|
||||
|
||||
@@ -6,5 +6,5 @@ nav.nav
|
||||
ul.nav-list
|
||||
each val in list
|
||||
li.nav-item
|
||||
a.nav-link.no-underline(href="javascript:void(0)")= val
|
||||
a.btn.nav-download-btn.no-underline(href="javascript:void(0)") Download App
|
||||
a.nav-link.link-text(href="javascript:void(0)")= val
|
||||
a.btn.nav-download-btn(href="javascript:void(0)") Download App
|
||||
|
||||
@@ -1,4 +1,11 @@
|
||||
- var offer_img_path = "./assets/images/offer/";
|
||||
- var avatar_img_path = "./assets/images/avatar/";
|
||||
|
||||
- var food_1 = { imageUrl: offer_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: offer_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: offer_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: offer_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
|
||||
@@ -13,10 +20,8 @@ section.offer
|
||||
= " 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
|
||||
+cardFoodItem(1, 10, "4.5", "Kebab", "Lorem Ipsum is simply dummy text of the printing and typesetting industry")
|
||||
+cardFoodItem(2, 15, "4.8", "Chicken Tikka", "Lorem Ipsum is simply dummy text of the printing and typesetting industry")
|
||||
+cardFoodItem(3, 8, "4.2", "Desi Chowmein", "Lorem Ipsum is simply dummy text of the printing and typesetting industry")
|
||||
+cardFoodItem(4, 28, "5.0", "Chicken Chargha", "Lorem Ipsum is simply dummy text of the printing and typesetting industry")
|
||||
each val in list_food
|
||||
+foodItemCard(val)
|
||||
.offer__rosemary-container
|
||||
picture
|
||||
source(
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
- var service_img_path = "./assets/images/service/";
|
||||
- var list_1 = [{icon : 1, content: "Online order"}, {icon : 3, content: "Pre-Reservation"}, {icon : 3, content: "Super chef"}];
|
||||
- var list_2 = [{icon : 2, content: "24/7 Service"}, {icon : 3, content: "Oragonized foodhut place"}, {icon : 3, content: "Clean Kitchen"}];
|
||||
- var list_service_category = [{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"}, {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"}];
|
||||
|
||||
section.service
|
||||
.service__container
|
||||
@@ -42,13 +41,9 @@ section.service
|
||||
= " 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 item in [list_1, list_2]
|
||||
.service__category-list
|
||||
each val in item
|
||||
.service__category-item
|
||||
img.service__icon-category(
|
||||
src=service_img_path + "icon-" + val.icon + ".png",
|
||||
alt="Icon category"
|
||||
)
|
||||
span.service__name-category= val.content
|
||||
.service__category-list
|
||||
each val in list_service_category
|
||||
.service__category-item
|
||||
img.service__icon-category(src=val.url_icon, alt="Icon category")
|
||||
p.service__name-category= val.content
|
||||
a.service__btn.btn(href="javascript:void(0)") About us
|
||||
|
||||
@@ -1,100 +1,104 @@
|
||||
- var welcome_img_path = "./assets/images/welcome/";
|
||||
|
||||
section.welcome
|
||||
.welcome__banner
|
||||
.welcome__banner-container
|
||||
img.welcome__banner-img(
|
||||
src=welcome_img_path + "welcome-image-mobile.png",
|
||||
alt="Welcome banner image"
|
||||
)
|
||||
picture
|
||||
source(
|
||||
media="(min-width: 840px)",
|
||||
srcset=welcome_img_path + "lines-background-desktop.png"
|
||||
.welcome__container
|
||||
.welcome__banner
|
||||
.welcome__banner-container
|
||||
img.welcome__banner-img(
|
||||
src=welcome_img_path + "welcome-image-mobile.png",
|
||||
alt="Welcome banner image"
|
||||
)
|
||||
img.welcome__lines-background(
|
||||
src=welcome_img_path + "lines-background-mobile.png",
|
||||
alt="Lines background"
|
||||
)
|
||||
picture
|
||||
source(
|
||||
media="(min-width: 840px)",
|
||||
srcset=welcome_img_path + "arrow-desktop.png",
|
||||
alt="Arrow image"
|
||||
)
|
||||
img.welcome__arrow-img-up(
|
||||
src=welcome_img_path + "arrow-mobile.png",
|
||||
alt="Arrow image"
|
||||
)
|
||||
img.welcome__mint-img(
|
||||
src=welcome_img_path + "mint.png",
|
||||
alt="Mint image"
|
||||
)
|
||||
.welcome__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.primary-text serious
|
||||
= " for "
|
||||
span.primary-text food
|
||||
= " & "
|
||||
.delivery-text-box
|
||||
span.secondary-text delivery
|
||||
.welcome__underline-img-container
|
||||
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.no-underline(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"
|
||||
picture
|
||||
source(
|
||||
media="(min-width: 840px)",
|
||||
srcset=welcome_img_path + "lines-background-desktop.png"
|
||||
)
|
||||
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"
|
||||
)
|
||||
img.welcome__lines-background(
|
||||
src=welcome_img_path + "lines-background-mobile.png",
|
||||
alt="Lines background"
|
||||
)
|
||||
picture
|
||||
source(
|
||||
media="(min-width: 840px)",
|
||||
srcset=welcome_img_path + "arrow-desktop.png",
|
||||
alt="Arrow image"
|
||||
)
|
||||
img.welcome__arrow-img-up(
|
||||
src=welcome_img_path + "arrow-mobile.png",
|
||||
alt="Arrow image"
|
||||
)
|
||||
img.welcome__mint-img(
|
||||
src=welcome_img_path + "mint.png",
|
||||
alt="Mint image"
|
||||
)
|
||||
.welcome__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.primary-text serious
|
||||
= " for "
|
||||
span.primary-text food
|
||||
= " & "
|
||||
.delivery-text-box
|
||||
span.secondary-text delivery
|
||||
.welcome__underline-img-container
|
||||
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"
|
||||
)
|
||||
|
||||
@@ -1,3 +1,11 @@
|
||||
%d-flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
%absolute {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
@mixin base-icon-menu {
|
||||
@include size(36px, 3px);
|
||||
|
||||
@@ -8,38 +16,38 @@
|
||||
|
||||
@mixin icon-menu {
|
||||
@include base-icon-menu;
|
||||
@extend %absolute;
|
||||
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
@mixin flex-container(
|
||||
$flex: false,
|
||||
$justify-content: null,
|
||||
$flex-direction: null,
|
||||
$align-items: null,
|
||||
$gap: null
|
||||
@mixin flex-layout(
|
||||
$justify: null,
|
||||
$align: null,
|
||||
$direction: null,
|
||||
$gap: null,
|
||||
$wrap: null
|
||||
) {
|
||||
@if $flex {
|
||||
display: flex;
|
||||
@if $justify != null {
|
||||
justify-content: $justify;
|
||||
}
|
||||
|
||||
@if $justify-content != null {
|
||||
justify-content: $justify-content;
|
||||
@if $align != null {
|
||||
align-items: $align;
|
||||
}
|
||||
|
||||
@if $flex-direction != null {
|
||||
flex-direction: $flex-direction;
|
||||
}
|
||||
|
||||
@if $align-items != null {
|
||||
align-items: $align-items;
|
||||
@if $direction != null {
|
||||
flex-direction: $direction;
|
||||
}
|
||||
|
||||
@if $gap != null {
|
||||
gap: $gap;
|
||||
}
|
||||
|
||||
@if $wrap != null {
|
||||
flex-wrap: $wrap;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin size($width: null, $height: null) {
|
||||
@@ -52,17 +60,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
@mixin setAbsoluteAndLocation(
|
||||
$absolute: false,
|
||||
@mixin set-absolute-and-location(
|
||||
$top: null,
|
||||
$left: null,
|
||||
$right: null,
|
||||
$bottom: null
|
||||
) {
|
||||
@if $absolute {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
@if $top != null {
|
||||
top: $top;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
.no-underline {
|
||||
.link-text {
|
||||
font-size: $fs-md;
|
||||
color: $black;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,102 @@
|
||||
%align-center-col {
|
||||
@include flex-layout($align: center, $direction: column);
|
||||
}
|
||||
|
||||
.card-item {
|
||||
@extend %d-flex, %align-center-col;
|
||||
@include size(auto, 516px);
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.food-image {
|
||||
@extend %absolute;
|
||||
@include set-absolute-and-location($top: 29px);
|
||||
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.price {
|
||||
@extend %absolute;
|
||||
@include set-absolute-and-location($top: 176px, $right: 70px);
|
||||
@include size(52px, 52px);
|
||||
|
||||
color: $white;
|
||||
border: 4px solid $white;
|
||||
border-radius: 50px;
|
||||
background-color: $secondary-color;
|
||||
font-size: $fs-md;
|
||||
text-align: center;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
.content-card {
|
||||
@extend %d-flex, %align-center-col, %absolute;
|
||||
@include set-absolute-and-location($bottom: 60px);
|
||||
@include size(100%, auto);
|
||||
}
|
||||
|
||||
.rate {
|
||||
@extend %d-flex;
|
||||
@include flex-layout($align: center, $gap: 10px);
|
||||
}
|
||||
|
||||
.star-container {
|
||||
@include size(24px, 22px);
|
||||
}
|
||||
|
||||
.avatar-container {
|
||||
@include size(74px, 38px);
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
&:first-child {
|
||||
@extend %absolute;
|
||||
@include set-absolute-and-location($left: 38px);
|
||||
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
@extend %absolute;
|
||||
@include set-absolute-and-location($left: 19px);
|
||||
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
@extend %absolute;
|
||||
@include set-absolute-and-location($left: 0);
|
||||
}
|
||||
}
|
||||
|
||||
.food-name {
|
||||
margin-top: 30px;
|
||||
color: $primary-color;
|
||||
font-size: $fs-lg;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.food-description {
|
||||
@include size(100%, auto);
|
||||
|
||||
max-width: 243px;
|
||||
margin-top: 16px;
|
||||
text-align: center;
|
||||
text-transform: capitalize;
|
||||
color: $black;
|
||||
}
|
||||
|
||||
.order-btn {
|
||||
@extend %absolute;
|
||||
@include set-absolute-and-location($bottom: 0px);
|
||||
|
||||
padding: 10px 20px;
|
||||
text-transform: capitalize;
|
||||
|
||||
&:hover {
|
||||
background-color: $secondary-color;
|
||||
}
|
||||
}
|
||||
@@ -18,9 +18,9 @@
|
||||
}
|
||||
|
||||
.toggle-menu {
|
||||
@extend %absolute;
|
||||
@include size(36px, 27px);
|
||||
|
||||
position: absolute;
|
||||
top: 46px;
|
||||
right: 21px;
|
||||
cursor: pointer;
|
||||
|
||||
@@ -1,18 +1,16 @@
|
||||
.header {
|
||||
@include setAbsoluteAndLocation(
|
||||
$absolute: true,
|
||||
$top: 0,
|
||||
$right: 0,
|
||||
$left: 0
|
||||
);
|
||||
@extend %absolute;
|
||||
@include set-absolute-and-location($top: 0, $right: 0, $left: 0);
|
||||
|
||||
max-width: 428px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.header-container {
|
||||
@include flex-container(true, space-between, $align-items: center);
|
||||
@extend %d-flex;
|
||||
@include flex-layout($align: center);
|
||||
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
max-width: 428px;
|
||||
min-width: $min-width;
|
||||
@@ -21,7 +19,8 @@
|
||||
}
|
||||
|
||||
.header-content {
|
||||
@include flex-container(true, space-between);
|
||||
@extend %d-flex;
|
||||
@include flex-layout($justify: space-between);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 840px) {
|
||||
@@ -30,17 +29,18 @@
|
||||
}
|
||||
|
||||
.header-container {
|
||||
@include flex-layout($gap: 10px);
|
||||
|
||||
padding-top: 32px;
|
||||
padding-left: 70px;
|
||||
padding-right: 61px;
|
||||
gap: 10px;
|
||||
max-width: 1309px;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
@include flex-layout($gap: 10px);
|
||||
@include size(100%, auto);
|
||||
|
||||
gap: 10px;
|
||||
max-width: 918px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
.nav-list {
|
||||
@extend %absolute;
|
||||
@include size(max-content, auto);
|
||||
|
||||
display: none;
|
||||
list-style: none;
|
||||
transition: 0.1s;
|
||||
position: absolute;
|
||||
border: 2px solid $primary-color;
|
||||
top: 100px;
|
||||
right: 25px;
|
||||
@@ -53,12 +53,12 @@
|
||||
|
||||
.nav-list {
|
||||
@include size(auto, auto);
|
||||
@include flex-container(true, space-between, column);
|
||||
@include flex-layout($justify: space-between, $direction: row, $gap: 10px);
|
||||
|
||||
display: flex;
|
||||
position: unset;
|
||||
flex-direction: row;
|
||||
border: none;
|
||||
max-width: 600px;
|
||||
max-width: 660px;
|
||||
margin: unset;
|
||||
background-color: transparent;
|
||||
}
|
||||
@@ -66,6 +66,7 @@
|
||||
.nav-item {
|
||||
border-bottom: none;
|
||||
padding: 0;
|
||||
text-align: center;
|
||||
|
||||
&:hover {
|
||||
background-color: unset;
|
||||
|
||||
@@ -4,11 +4,8 @@
|
||||
margin-inline: auto;
|
||||
|
||||
&__container {
|
||||
@include flex-container(
|
||||
true,
|
||||
$justify-content: center,
|
||||
$flex-direction: column
|
||||
);
|
||||
@extend %d-flex;
|
||||
@include flex-layout($justify: center, $direction: column);
|
||||
|
||||
max-width: 380px;
|
||||
margin: auto;
|
||||
@@ -17,7 +14,8 @@
|
||||
}
|
||||
|
||||
&__dot-background {
|
||||
@include setAbsoluteAndLocation(true, $top: 168px, $left: 0px);
|
||||
@extend %absolute;
|
||||
@include set-absolute-and-location($top: 168px, $left: 0px);
|
||||
|
||||
display: none;
|
||||
}
|
||||
@@ -40,112 +38,24 @@
|
||||
}
|
||||
|
||||
&__card-list {
|
||||
display: grid;
|
||||
@extend %d-flex;
|
||||
@include flex-layout($wrap: nowrap, $gap: 70px);
|
||||
|
||||
padding-inline: 35px;
|
||||
padding-top: 65px;
|
||||
grid-auto-flow: column;
|
||||
grid-auto-columns: 100%;
|
||||
overflow-x: auto;
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__card-item {
|
||||
@include flex-container(
|
||||
true,
|
||||
$align-items: center,
|
||||
$flex-direction: column
|
||||
);
|
||||
@include size(auto, 516px);
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__food-image {
|
||||
@include setAbsoluteAndLocation(true, $top: 29px);
|
||||
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
&__price {
|
||||
@include setAbsoluteAndLocation(true, $top: 176px, $right: 110px);
|
||||
@include size(52px, 52px);
|
||||
|
||||
color: $white;
|
||||
border: 4px solid $white;
|
||||
border-radius: 50px;
|
||||
background-color: $secondary-color;
|
||||
font-size: $fs-md;
|
||||
text-align: center;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
&__content-card {
|
||||
@include setAbsoluteAndLocation(true, $bottom: 60px);
|
||||
@include size(100%, auto);
|
||||
@include flex-container(
|
||||
true,
|
||||
$align-items: center,
|
||||
$flex-direction: column
|
||||
);
|
||||
}
|
||||
|
||||
&__rate {
|
||||
@include flex-container(true, $align-items: center, $gap: 10px);
|
||||
}
|
||||
|
||||
&__avatar-container {
|
||||
position: relative;
|
||||
@include size(74px, 38px);
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
&-1 {
|
||||
@include setAbsoluteAndLocation(true, $left: 38px);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&-2 {
|
||||
@include setAbsoluteAndLocation(true, $left: 19px);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&-3 {
|
||||
@include setAbsoluteAndLocation(true, $left: 0);
|
||||
}
|
||||
}
|
||||
|
||||
&__food-name {
|
||||
margin-top: 30px;
|
||||
color: $primary-color;
|
||||
font-size: $fs-lg;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&__food-description {
|
||||
@include size(100%, auto);
|
||||
|
||||
max-width: 243px;
|
||||
margin-top: 16px;
|
||||
text-align: center;
|
||||
text-transform: capitalize;
|
||||
color: $black;
|
||||
}
|
||||
|
||||
&__order-btn {
|
||||
@include setAbsoluteAndLocation(true, $bottom: 0px);
|
||||
|
||||
padding: 10px 20px;
|
||||
background-color: $primary-color;
|
||||
border-radius: 100px;
|
||||
color: $white;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
&__rosemary-container {
|
||||
@include setAbsoluteAndLocation(true, $bottom: -120px, $right: 0);
|
||||
@extend %absolute;
|
||||
@include set-absolute-and-location($bottom: -120px, $right: 0);
|
||||
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
@@ -158,23 +68,15 @@
|
||||
max-width: $max-width;
|
||||
}
|
||||
|
||||
&__food-image {
|
||||
@include setAbsoluteAndLocation($top: 29px, $right: 55px);
|
||||
}
|
||||
|
||||
&__card-list {
|
||||
@include flex-container(
|
||||
true,
|
||||
$align-items: center,
|
||||
$gap: 18px,
|
||||
$justify-content: center
|
||||
@include flex-layout(
|
||||
$align: center,
|
||||
$justify: center,
|
||||
$wrap: wrap,
|
||||
$gap: 18px
|
||||
);
|
||||
row-gap: 30px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
&__price {
|
||||
@include setAbsoluteAndLocation($top: 176px, $right: 70px);
|
||||
row-gap: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,20 +4,25 @@
|
||||
}
|
||||
|
||||
.welcome {
|
||||
@include flex-container(true, center, column);
|
||||
margin: auto;
|
||||
max-width: 428px;
|
||||
padding-top: 117px;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(245, 71, 72, 0.06) 0%,
|
||||
rgba(245, 71, 72, 0) 100%
|
||||
);
|
||||
|
||||
&__container {
|
||||
@extend %d-flex;
|
||||
@include flex-layout($justify: center, $direction: column);
|
||||
|
||||
margin: auto;
|
||||
max-width: 428px;
|
||||
padding-top: 117px;
|
||||
}
|
||||
// Start banner
|
||||
&__banner-container {
|
||||
@extend %d-flex;
|
||||
@include size(428px, auto);
|
||||
@include flex-container(true, center, column);
|
||||
@include flex-layout($justify: center, $direction: column);
|
||||
|
||||
position: relative;
|
||||
}
|
||||
@@ -27,25 +32,28 @@
|
||||
}
|
||||
|
||||
&__lines-background {
|
||||
@include setAbsoluteAndLocation($absolute: true, $top: -76px, $right: 0);
|
||||
@extend %absolute;
|
||||
@include set-absolute-and-location($top: -76px, $right: 0);
|
||||
@include size(187px, 430px);
|
||||
}
|
||||
|
||||
&__arrow-img-up {
|
||||
@include setAbsoluteAndLocation($absolute: true, $top: -15px, $right: 50px);
|
||||
|
||||
@extend %absolute;
|
||||
@include set-absolute-and-location($top: -15px, $right: 50px);
|
||||
@include size(43px, 215px);
|
||||
}
|
||||
|
||||
&__mint-img {
|
||||
@include setAbsoluteAndLocation($absolute: true, $bottom: 100px, $right: 0);
|
||||
@extend %absolute;
|
||||
@include set-absolute-and-location($bottom: 100px, $right: 0);
|
||||
}
|
||||
// End banner
|
||||
|
||||
// Start content
|
||||
&__content {
|
||||
@include flex-container(true, $flex-direction: column);
|
||||
@include size(calc(428px - 48px), auto);
|
||||
@extend %d-flex;
|
||||
@include flex-layout($direction: column);
|
||||
|
||||
position: relative;
|
||||
padding-top: 63.37px;
|
||||
@@ -53,15 +61,19 @@
|
||||
}
|
||||
|
||||
&__arrow-down-img-wrapper {
|
||||
@extend %absolute;
|
||||
|
||||
display: none;
|
||||
}
|
||||
|
||||
&__orange-img-wrapper {
|
||||
@include setAbsoluteAndLocation($absolute: true, $top: 0, $right: 35px);
|
||||
@extend %absolute;
|
||||
@include set-absolute-and-location($top: 0, $right: 35px);
|
||||
}
|
||||
|
||||
&__text-box {
|
||||
@include flex-container(true, $align-items: center, $gap: 6px);
|
||||
@extend %d-flex;
|
||||
@include flex-layout($align: center, $gap: 6px);
|
||||
@include size(fit-content);
|
||||
|
||||
background-color: #feeae9;
|
||||
@@ -84,7 +96,8 @@
|
||||
|
||||
&__head-arrow-container {
|
||||
@include size(13px, 7.3px);
|
||||
@include setAbsoluteAndLocation($absolute: true, $right: 107px);
|
||||
@extend %absolute;
|
||||
@include set-absolute-and-location($right: 107px);
|
||||
}
|
||||
|
||||
&__heading {
|
||||
@@ -96,11 +109,8 @@
|
||||
}
|
||||
|
||||
&__underline-img-container {
|
||||
@include setAbsoluteAndLocation(
|
||||
$absolute: true,
|
||||
$bottom: -20px,
|
||||
$left: 0px
|
||||
);
|
||||
@extend %absolute;
|
||||
@include set-absolute-and-location($bottom: -20px, $left: 0px);
|
||||
}
|
||||
|
||||
&__description {
|
||||
@@ -112,7 +122,7 @@
|
||||
}
|
||||
|
||||
&__search-form {
|
||||
@include flex-container(true);
|
||||
@extend %d-flex;
|
||||
|
||||
margin-top: 32px;
|
||||
border-radius: 100px;
|
||||
@@ -154,7 +164,8 @@
|
||||
}
|
||||
|
||||
&__action-container {
|
||||
@include flex-container(true, $justify-content: space-between);
|
||||
@extend %d-flex;
|
||||
@include flex-layout($justify: space-between, $gap: 10px);
|
||||
|
||||
width: 100%;
|
||||
margin-top: 44px;
|
||||
@@ -162,10 +173,10 @@
|
||||
}
|
||||
|
||||
&__watch-video-link {
|
||||
@include flex-container(true, $align-items: center, $gap: 21px);
|
||||
@extend %d-flex;
|
||||
@include flex-layout($align: center, $gap: 21px);
|
||||
|
||||
position: relative;
|
||||
|
||||
&:hover {
|
||||
.welcome__play-icon-wrapper {
|
||||
transform: scale(1.2);
|
||||
@@ -183,8 +194,9 @@
|
||||
}
|
||||
|
||||
&__play-icon-wrapper {
|
||||
@extend %absolute;
|
||||
@include size(12px, 17px);
|
||||
position: absolute;
|
||||
|
||||
padding: 17.5px 20px;
|
||||
border-radius: 50px;
|
||||
background-color: $white;
|
||||
@@ -208,6 +220,8 @@
|
||||
}
|
||||
|
||||
&__slider-container {
|
||||
@extend %absolute;
|
||||
|
||||
display: none;
|
||||
}
|
||||
// End content
|
||||
@@ -219,15 +233,17 @@
|
||||
|
||||
@media screen and (min-width: 840px) {
|
||||
.welcome {
|
||||
@include flex-container(
|
||||
$flex-direction: row-reverse,
|
||||
$align-items: center,
|
||||
$justify-content: space-between
|
||||
);
|
||||
&__container {
|
||||
@include flex-layout(
|
||||
$direction: row-reverse,
|
||||
$align: center,
|
||||
$justify: space-between
|
||||
);
|
||||
|
||||
padding-top: 130px;
|
||||
width: 100%;
|
||||
max-width: $max-width;
|
||||
padding-top: 130px;
|
||||
width: 100%;
|
||||
max-width: $max-width;
|
||||
}
|
||||
|
||||
// Start banner
|
||||
&__banner-img {
|
||||
@@ -237,13 +253,14 @@
|
||||
}
|
||||
|
||||
&__lines-background {
|
||||
@include setAbsoluteAndLocation($top: -150px, $right: 0px);
|
||||
@include set-absolute-and-location($top: -150px, $right: 0px);
|
||||
@include size(313px, 718px);
|
||||
}
|
||||
|
||||
&__arrow-img-up {
|
||||
@include size(117px, 315px);
|
||||
@include setAbsoluteAndLocation($top: -40px, $right: 5px);
|
||||
@include set-absolute-and-location($top: -40px, $right: 5px);
|
||||
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
@@ -262,13 +279,15 @@
|
||||
// Start content
|
||||
&__content {
|
||||
@include size(auto, auto);
|
||||
|
||||
padding-left: 70px;
|
||||
padding-right: 0px;
|
||||
max-width: 560px;
|
||||
}
|
||||
|
||||
&__orange-img-wrapper {
|
||||
@include setAbsoluteAndLocation($top: 170px, $right: -50px);
|
||||
@include set-absolute-and-location($top: 170px, $right: -50px);
|
||||
|
||||
transition: 0.2s;
|
||||
}
|
||||
|
||||
@@ -278,7 +297,7 @@
|
||||
}
|
||||
|
||||
&__underline-img-container {
|
||||
@include setAbsoluteAndLocation($bottom: -25px, $left: 8px);
|
||||
@include set-absolute-and-location($bottom: -25px, $left: 8px);
|
||||
}
|
||||
|
||||
&__description {
|
||||
@@ -298,11 +317,7 @@
|
||||
}
|
||||
|
||||
&__arrow-down-img-wrapper {
|
||||
@include setAbsoluteAndLocation(
|
||||
$absolute: true,
|
||||
$top: -50px,
|
||||
$left: 220px
|
||||
);
|
||||
@include set-absolute-and-location($top: -50px, $left: 220px);
|
||||
|
||||
display: block;
|
||||
transition: 0.2s;
|
||||
@@ -314,11 +329,7 @@
|
||||
|
||||
&__slider-container {
|
||||
display: block;
|
||||
@include setAbsoluteAndLocation(
|
||||
$absolute: true,
|
||||
$bottom: -135px,
|
||||
$left: 65px
|
||||
);
|
||||
@include set-absolute-and-location($bottom: -135px, $left: 65px);
|
||||
}
|
||||
|
||||
// End content
|
||||
@@ -332,15 +343,15 @@
|
||||
}
|
||||
|
||||
&__arrow-img-up {
|
||||
@include setAbsoluteAndLocation($top: 8px, $right: 62px);
|
||||
@include set-absolute-and-location($top: 8px, $right: 62px);
|
||||
}
|
||||
|
||||
&__orange-img-wrapper {
|
||||
@include setAbsoluteAndLocation($top: 110px, $right: -50px);
|
||||
@include set-absolute-and-location($top: 110px, $right: -50px);
|
||||
}
|
||||
|
||||
&__arrow-down-img-wrapper {
|
||||
@include setAbsoluteAndLocation($top: -75px, $left: 230px);
|
||||
@include set-absolute-and-location($top: -75px, $left: 230px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,6 +11,7 @@
|
||||
@import "./components/button";
|
||||
@import "./components/toggle-menu";
|
||||
@import "./components/logo";
|
||||
@import "./components/card-item";
|
||||
|
||||
// Layouts
|
||||
@import "./layouts/navbar";
|
||||
|
||||
Reference in New Issue
Block a user