nezumi/html-css-practice-two
1
0
Fork 0
mirror of https://github.com/Nezumi-2711/html-css-practice-two.git synced 2026-09-22 20:01:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update code 28/07

Browse Source
This commit is contained in:
nezumi
2023-07-28 11:54:43 +07:00
parent a94e8b12dc
commit e361fd6e88
2 changed files with 24 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layouts/menu.pug
+6 -6
View File
@@ -1,12 +1,12 @@
- var image_menu_path = "./assets/images/menu/"; - var image_menu_path = "./assets/images/menu/";
- var list_category = ["Ramen", "Breakfast", "Lunch", "Dinner", "Maxican", "Italian", "Desserts", "Drinks"]; - var list_category = ["Ramen", "Breakfast", "Lunch", "Dinner", "Maxican", "Italian", "Desserts", "Drinks"];
- var description_text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry"; - var list_image_food = ["./assets/images/offer/food-1.png", image_menu_path + "food-2.png", image_menu_path + "food-3.png", image_menu_path + "food-4.png", image_menu_path + "food-5.png", image_menu_path + "food-6.png", image_menu_path + "food-7.png", image_menu_path + "food-8.png"];
- var image_food = ["./assets/images/offer/food-1.png", image_menu_path + "food-2.png", image_menu_path + "food-3.png", image_menu_path + "food-4.png", image_menu_path + "food-5.png", image_menu_path + "food-6.png", image_menu_path + "food-7.png", image_menu_path + "food-8.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 .menu__container
h2.menu__heading h2.menu__heading
span.primary-text Menu span.primary-text= Menu
= " That " = " That "
span.secondary-text Always span.secondary-text Always
= " Make You Fall In " = " Make You Fall In "
@@ -15,7 +15,7 @@ section.menu
each item in list_category each item in list_category
a.menu__category-item.link-text(href="javascript:void(0)")= item a.menu__category-item.link-text(href="javascript:void(0)")= item
.menu__card-list .menu__card-list
each url in image_food each url in list_image_food
- var food = { imageUrl: url, price: "10", ratePoint: "4.5", foodName: "Kebab", foodDescription: description_text, avatarImageList: [{ avatarUrl: avatar_img_path + "avatar-1.png" }, { avatarUrl: avatar_img_path + "avatar-2.png" }, { avatarUrl: avatar_img_path + "avatar-3.png" }] }; - var image_food = { imageUrl: url };
+foodItemCard(food) +foodItemCard({ ...image_food, ...default_food_data })
src/styles/layouts/_menu.scss
+21 -11
View File
@@ -1,16 +1,28 @@
.menu { %mr-inline-auto {
&__container {
padding-top: 150px;
max-width: 424px;
margin-inline: auto; margin-inline: auto;
} }
%style-category-item {
font-size: $fs-md;
padding: 8px 18px;
border-radius: 50px;
}
.menu {
&__container {
@extend %mr-inline-auto;
padding-top: 150px;
max-width: 424px;
}
&__heading { &__heading {
@extend %mr-inline-auto;
font-size: $fs-x-lg; font-size: $fs-x-lg;
font-weight: 700; font-weight: 700;
text-align: center; text-align: center;
max-width: 363px; max-width: 363px;
margin-inline: auto;
} }
&__list-category { &__list-category {
@@ -29,21 +41,19 @@
} }
&__category-item:focus { &__category-item:focus {
font-size: $fs-md; @extend %style-category-item;
color: $white; color: $white;
background-color: $primary-color; background-color: $primary-color;
border: 2px solid $primary-color; border: 2px solid $primary-color;
padding: 8px 18px;
border-radius: 50px;
} }
&__category-item { &__category-item {
font-size: $fs-md; @extend %style-category-item;
color: $gray; color: $gray;
background-color: transparent; background-color: transparent;
border: 2px solid $black; border: 2px solid $black;
padding: 8px 18px;
border-radius: 50px;
} }
&__card-list { &__card-list {