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 13:38:40 +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 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 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 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 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
.menu__container
h2.menu__heading
span.primary-text Menu
span.primary-text= Menu
= " That "
span.secondary-text Always
= " Make You Fall In "
@@ -15,7 +15,7 @@ section.menu
each item in list_category
a.menu__category-item.link-text(href="javascript:void(0)")= item
.menu__card-list
each url in 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" }] };
each url in list_image_food
- var image_food = { imageUrl: url };
+foodItemCard(food)
+foodItemCard({ ...image_food, ...default_food_data })
src/styles/layouts/_menu.scss
+18 -8
View File
@@ -1,16 +1,28 @@
%mr-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;
margin-inline: auto;
}
&__heading {
@extend %mr-inline-auto;
font-size: $fs-x-lg;
font-weight: 700;
text-align: center;
max-width: 363px;
margin-inline: auto;
}
&__list-category {
@@ -29,21 +41,19 @@
}
&__category-item:focus {
font-size: $fs-md;
@extend %style-category-item;
color: $white;
background-color: $primary-color;
border: 2px solid $primary-color;
padding: 8px 18px;
border-radius: 50px;
}
&__category-item {
font-size: $fs-md;
@extend %style-category-item;
color: $gray;
background-color: transparent;
border: 2px solid $black;
padding: 8px 18px;
border-radius: 50px;
}
&__card-list {