nezumi/loi-phan-internship
1
0
Fork 0
mirror of https://github.com/Nezumi-2711/loi-phan-internship.git synced 2026-09-22 20:01:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix style and resolve error

Browse Source
This commit is contained in:
nezumi
2023-07-27 14:48:31 +07:00
parent 12b4ac5c31
commit 39a7a72b40
2 changed files with 58 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
practice/practice-02/src/layouts/service.pug
+12 -6
View File
@@ -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
practice/practice-02/src/styles/layouts/_service.scss
+46 -18
View File
@@ -9,7 +9,8 @@
}
&__background-color {
@include setAbsoluteAndLocation(true, $top: 200px, $left: 0);
@extend %absolute;
@include set-absolute-and-location($top: 200px, $left: 0);
@include size(100%, 50%);
background: linear-gradient(
180deg,
@@ -27,15 +28,18 @@
}
&__background-img {
@include setAbsoluteAndLocation(true, $top: 65px, $left: 0);
@extend %absolute;
@include set-absolute-and-location($top: 65px, $left: 0);
}
&__main-img {
@include setAbsoluteAndLocation(true, $top: 60px, $left: 35px);
@extend %absolute;
@include set-absolute-and-location($top: 60px, $left: 35px);
}
&__vegetable-img {
@include setAbsoluteAndLocation(true, $bottom: 0, $left: 50px);
@extend %absolute;
@include set-absolute-and-location($bottom: 0, $left: 50px);
}
&__content {
@@ -61,16 +65,24 @@
}
&__category {
@include flex-container(true, $flex-direction: column, $gap: 41px);
@extend %d-flex;
@include flex-layout(
$direction: column,
$justify: space-between,
$gap: 41px
);
max-width: 514px;
margin-top: 81px;
&-list {
@include flex-container(true, $flex-direction: column, $gap: 30px);
@extend %d-flex;
@include flex-layout($direction: column, $gap: 30px, $justify: center);
}
}
&__category-item {
@include flex-container(true, $align-items: center, $gap: 10px);
@extend %d-flex;
@include flex-layout($align: center, $gap: 10px);
}
&__name-category {
@@ -91,13 +103,18 @@
}
@media screen and (min-width: 840px) {
%absolute_840 {
position: absolute;
}
.service {
max-width: $max-width;
margin-inline: auto;
&__container {
@include flex-container(true, $align-items: center);
@include flex-layout($align: center);
display: flex;
padding-top: 200px;
}
@@ -112,11 +129,12 @@
}
&__background-img {
@include setAbsoluteAndLocation(true, $top: 100px, $left: 0);
@include set-absolute-and-location($top: 100px, $left: 0);
@extend %absolute_840;
}
&__background-color {
@include setAbsoluteAndLocation($top: 400px, $left: -100px);
@include set-absolute-and-location($top: 400px, $left: -100px);
@include size(400px, 50%);
border-radius: 50%;
background: radial-gradient(
@@ -129,11 +147,13 @@
}
&__main-img {
@include setAbsoluteAndLocation(true, $top: 95px, $left: 35px);
@include set-absolute-and-location($top: 95px, $left: 35px);
@extend %absolute_840;
}
&__vegetable-img {
@include setAbsoluteAndLocation(true, $bottom: 145px, $left: 50px);
@include set-absolute-and-location($bottom: 145px, $left: 50px);
@extend %absolute_840;
}
&__heading {
@@ -146,24 +166,30 @@
}
&__category {
flex-direction: row;
@include flex-layout($direction: row, $gap: 10px);
margin-top: 29px;
}
}
}
@media screen and (min-width: 1200px) {
%absolute_1200 {
position: absolute;
}
.service {
&__container {
@include flex-container($align-items: center, $gap: 150px);
@include flex-layout($align: center, $gap: 150px);
}
&__background-img {
@include setAbsoluteAndLocation(true, $top: 0px, $left: 0);
@include set-absolute-and-location($top: 0px, $left: 0);
@extend %absolute_1200;
}
&__background-color {
@include setAbsoluteAndLocation($left: -150px);
@include set-absolute-and-location($left: -150px);
@include size(500px, 50%);
border-radius: 50%;
background: radial-gradient(
@@ -183,11 +209,13 @@
}
&__main-img {
@include setAbsoluteAndLocation(true, $top: -17px, $left: 70px);
@include set-absolute-and-location($top: -17px, $left: 70px);
@extend %absolute_1200;
}
&__vegetable-img {
@include setAbsoluteAndLocation(true, $bottom: 95px, $left: 105px);
@include set-absolute-and-location($bottom: 95px, $left: 105px);
@extend %absolute_1200;
}
&__content {