mirror of
https://github.com/Nezumi-2711/loi-phan-internship.git
synced 2026-09-22 13:38:31 +00:00
Merge pull request #17 from Nez27/feature/service-style
Implement style for service section.
This commit is contained in:
Loi Phan
@@ -1,5 +1,7 @@
|
||||
- var service_img_path = "./assets/images/service/";
|
||||
- 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"}];
|
||||
- var list_service_category_1 = [{url_icon : service_img_path + "icon-1.png", content: "Online order"}, {url_icon : service_img_path + "icon-3.png", content: "Pre-Reservation"}, {url_icon : service_img_path + "icon-3.png", content: "Super chef"}];
|
||||
- var list_service_category_2 = [{url_icon : service_img_path + "icon-2.png", content: "24/7 Service"}, {url_icon : service_img_path + "icon-3.png", content: "Oragonized foodhut place"}, {url_icon : service_img_path + "icon-3.png", content: "Clean Kitchen"}];
|
||||
- var list_service_category = [list_service_category_1, list_service_category_2];
|
||||
|
||||
section.service
|
||||
.service__container
|
||||
@@ -41,9 +43,13 @@ 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
|
||||
.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
|
||||
each list in list_service_category
|
||||
.service__category-list
|
||||
each item in list
|
||||
.service__category-item
|
||||
img.service__icon-category(
|
||||
src=item.url_icon,
|
||||
alt="Icon category"
|
||||
)
|
||||
p.service__name-category= item.content
|
||||
a.service__btn.btn(href="javascript:void(0)") About us
|
||||
|
||||
@@ -0,0 +1,228 @@
|
||||
.service {
|
||||
max-width: 428px;
|
||||
margin-inline: auto;
|
||||
|
||||
&__container {
|
||||
@include size(auto, auto);
|
||||
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__background-color {
|
||||
@extend %absolute;
|
||||
@include set-absolute-and-location($top: 200px, $left: 0);
|
||||
@include size(100%, 50%);
|
||||
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(253, 197, 94, 0.01) 0%,
|
||||
rgba(253, 197, 94, 0.1) 50%,
|
||||
rgba(253, 197, 94, 0) 100%
|
||||
);
|
||||
}
|
||||
|
||||
&__img-container {
|
||||
@include size(auto, 436.81px);
|
||||
|
||||
position: relative;
|
||||
padding-top: 80px;
|
||||
}
|
||||
|
||||
&__background-img {
|
||||
@extend %absolute;
|
||||
@include set-absolute-and-location($top: 65px, $left: 0);
|
||||
}
|
||||
|
||||
&__main-img {
|
||||
@extend %absolute;
|
||||
@include set-absolute-and-location($top: 60px, $left: 35px);
|
||||
}
|
||||
|
||||
&__vegetable-img {
|
||||
@extend %absolute;
|
||||
@include set-absolute-and-location($bottom: 0, $left: 50px);
|
||||
}
|
||||
|
||||
&__content {
|
||||
padding-inline: 24px;
|
||||
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__heading {
|
||||
margin-top: 30px;
|
||||
margin-inline: auto;
|
||||
font-size: $fs-x-lg;
|
||||
line-height: 129.9%;
|
||||
font-weight: 700;
|
||||
max-width: 380px;
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin-top: 29px;
|
||||
margin-inline: auto;
|
||||
max-width: 381px;
|
||||
font-size: $fs-md;
|
||||
}
|
||||
|
||||
&__category {
|
||||
@extend %d-flex;
|
||||
@include flex-layout(
|
||||
$direction: column,
|
||||
$justify: space-between,
|
||||
$gap: 41px
|
||||
);
|
||||
|
||||
max-width: 514px;
|
||||
margin-top: 81px;
|
||||
&-list {
|
||||
@extend %d-flex;
|
||||
@include flex-layout($direction: column, $gap: 30px, $justify: center);
|
||||
}
|
||||
}
|
||||
|
||||
&__category-item {
|
||||
@extend %d-flex;
|
||||
@include flex-layout($align: center, $gap: 10px);
|
||||
}
|
||||
|
||||
&__name-category {
|
||||
font-size: $fs-md;
|
||||
}
|
||||
|
||||
&__btn {
|
||||
display: block;
|
||||
margin-top: 43px;
|
||||
max-width: 74px;
|
||||
text-transform: capitalize;
|
||||
padding: 10px 20px;
|
||||
|
||||
&:hover {
|
||||
background-color: $secondary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 840px) {
|
||||
%absolute_840 {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.service {
|
||||
max-width: $max-width;
|
||||
margin-inline: auto;
|
||||
|
||||
&__container {
|
||||
@include flex-layout($align: center);
|
||||
|
||||
display: flex;
|
||||
padding-top: 200px;
|
||||
}
|
||||
|
||||
&__img-container {
|
||||
@include size($width: 100%);
|
||||
|
||||
max-width: 460px;
|
||||
}
|
||||
|
||||
&__img-container {
|
||||
@include size(100%, 619px);
|
||||
}
|
||||
|
||||
&__background-img {
|
||||
@include set-absolute-and-location($top: 100px, $left: 0);
|
||||
@extend %absolute_840;
|
||||
}
|
||||
|
||||
&__background-color {
|
||||
@include set-absolute-and-location($top: 400px, $left: -100px);
|
||||
@include size(400px, 50%);
|
||||
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
rgba(253, 197, 94, 0.2),
|
||||
rgba(253, 197, 94, 0.1),
|
||||
rgba(253, 197, 94, 0.01),
|
||||
rgba(253, 197, 94, 0)
|
||||
);
|
||||
}
|
||||
|
||||
&__main-img {
|
||||
@include set-absolute-and-location($top: 95px, $left: 35px);
|
||||
@extend %absolute_840;
|
||||
}
|
||||
|
||||
&__vegetable-img {
|
||||
@include set-absolute-and-location($bottom: 145px, $left: 50px);
|
||||
@extend %absolute_840;
|
||||
}
|
||||
|
||||
&__heading {
|
||||
max-width: 452px;
|
||||
margin: unset;
|
||||
}
|
||||
|
||||
&__description {
|
||||
max-width: 690px;
|
||||
}
|
||||
|
||||
&__category {
|
||||
@include flex-layout($direction: row, $gap: 10px);
|
||||
|
||||
margin-top: 29px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1200px) {
|
||||
%absolute_1200 {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.service {
|
||||
&__container {
|
||||
@include flex-layout($align: center, $gap: 150px);
|
||||
}
|
||||
|
||||
&__background-img {
|
||||
@include set-absolute-and-location($top: 0px, $left: 0);
|
||||
@extend %absolute_1200;
|
||||
}
|
||||
|
||||
&__background-color {
|
||||
@include set-absolute-and-location($left: -150px);
|
||||
@include size(500px, 50%);
|
||||
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
rgba(253, 197, 94, 0.6),
|
||||
rgba(253, 197, 94, 0.4),
|
||||
rgba(253, 197, 94, 0.2),
|
||||
rgba(253, 197, 94, 0.06),
|
||||
rgba(253, 197, 94, 0.01),
|
||||
rgba(253, 197, 94, 0),
|
||||
rgba(253, 197, 94, 0)
|
||||
);
|
||||
}
|
||||
|
||||
&__description {
|
||||
margin-top: 21px;
|
||||
}
|
||||
|
||||
&__main-img {
|
||||
@include set-absolute-and-location($top: -17px, $left: 70px);
|
||||
@extend %absolute_1200;
|
||||
}
|
||||
|
||||
&__vegetable-img {
|
||||
@include set-absolute-and-location($bottom: 95px, $left: 105px);
|
||||
@extend %absolute_1200;
|
||||
}
|
||||
|
||||
&__content {
|
||||
padding-top: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -18,3 +18,4 @@
|
||||
@import "./layouts/header";
|
||||
@import "./layouts/welcome";
|
||||
@import "./layouts/offer";
|
||||
@import "./layouts/service";
|
||||
|
||||
Reference in New Issue
Block a user