diff --git a/practice/practice-02/src/assets/images/offer/avatar-1-item-1.png b/practice/practice-02/src/assets/images/avatar/avatar-1.png similarity index 100% rename from practice/practice-02/src/assets/images/offer/avatar-1-item-1.png rename to practice/practice-02/src/assets/images/avatar/avatar-1.png diff --git a/practice/practice-02/src/assets/images/offer/avatar-2-item-1.png b/practice/practice-02/src/assets/images/avatar/avatar-2.png similarity index 100% rename from practice/practice-02/src/assets/images/offer/avatar-2-item-1.png rename to practice/practice-02/src/assets/images/avatar/avatar-2.png diff --git a/practice/practice-02/src/assets/images/offer/avatar-3-item-1.png b/practice/practice-02/src/assets/images/avatar/avatar-3.png similarity index 100% rename from practice/practice-02/src/assets/images/offer/avatar-3-item-1.png rename to practice/practice-02/src/assets/images/avatar/avatar-3.png diff --git a/practice/practice-02/src/assets/images/offer/avatar-1-item-2.png b/practice/practice-02/src/assets/images/avatar/avatar-4.png similarity index 100% rename from practice/practice-02/src/assets/images/offer/avatar-1-item-2.png rename to practice/practice-02/src/assets/images/avatar/avatar-4.png diff --git a/practice/practice-02/src/assets/images/offer/avatar-2-item-2.png b/practice/practice-02/src/assets/images/avatar/avatar-5.png similarity index 100% rename from practice/practice-02/src/assets/images/offer/avatar-2-item-2.png rename to practice/practice-02/src/assets/images/avatar/avatar-5.png diff --git a/practice/practice-02/src/assets/images/offer/avatar-3-item-2.png b/practice/practice-02/src/assets/images/avatar/avatar-6.png similarity index 100% rename from practice/practice-02/src/assets/images/offer/avatar-3-item-2.png rename to practice/practice-02/src/assets/images/avatar/avatar-6.png diff --git a/practice/practice-02/src/assets/images/offer/avatar-1-item-3.png b/practice/practice-02/src/assets/images/avatar/avatar-7.png similarity index 100% rename from practice/practice-02/src/assets/images/offer/avatar-1-item-3.png rename to practice/practice-02/src/assets/images/avatar/avatar-7.png diff --git a/practice/practice-02/src/assets/images/offer/avatar-2-item-3.png b/practice/practice-02/src/assets/images/avatar/avatar-8.png similarity index 100% rename from practice/practice-02/src/assets/images/offer/avatar-2-item-3.png rename to practice/practice-02/src/assets/images/avatar/avatar-8.png diff --git a/practice/practice-02/src/assets/images/offer/avatar-3-item-3.png b/practice/practice-02/src/assets/images/avatar/avatar-9.png similarity index 100% rename from practice/practice-02/src/assets/images/offer/avatar-3-item-3.png rename to practice/practice-02/src/assets/images/avatar/avatar-9.png diff --git a/practice/practice-02/src/assets/images/offer/avatar-1-item-4.png b/practice/practice-02/src/assets/images/offer/avatar-1-item-4.png deleted file mode 100644 index bb4221f..0000000 Binary files a/practice/practice-02/src/assets/images/offer/avatar-1-item-4.png and /dev/null differ diff --git a/practice/practice-02/src/assets/images/offer/avatar-2-item-4.png b/practice/practice-02/src/assets/images/offer/avatar-2-item-4.png deleted file mode 100644 index 685124a..0000000 Binary files a/practice/practice-02/src/assets/images/offer/avatar-2-item-4.png and /dev/null differ diff --git a/practice/practice-02/src/assets/images/offer/avatar-3-item-4.png b/practice/practice-02/src/assets/images/offer/avatar-3-item-4.png deleted file mode 100644 index 974de73..0000000 Binary files a/practice/practice-02/src/assets/images/offer/avatar-3-item-4.png and /dev/null differ diff --git a/practice/practice-02/src/assets/images/service/background-desktop.png b/practice/practice-02/src/assets/images/service/background-desktop.png new file mode 100644 index 0000000..408118c Binary files /dev/null and b/practice/practice-02/src/assets/images/service/background-desktop.png differ diff --git a/practice/practice-02/src/assets/images/service/background-mobile.png b/practice/practice-02/src/assets/images/service/background-mobile.png new file mode 100644 index 0000000..804ff68 Binary files /dev/null and b/practice/practice-02/src/assets/images/service/background-mobile.png differ diff --git a/practice/practice-02/src/assets/images/service/icon-1.png b/practice/practice-02/src/assets/images/service/icon-1.png new file mode 100644 index 0000000..7c0a638 Binary files /dev/null and b/practice/practice-02/src/assets/images/service/icon-1.png differ diff --git a/practice/practice-02/src/assets/images/service/icon-2.png b/practice/practice-02/src/assets/images/service/icon-2.png new file mode 100644 index 0000000..a638877 Binary files /dev/null and b/practice/practice-02/src/assets/images/service/icon-2.png differ diff --git a/practice/practice-02/src/assets/images/service/icon-3.png b/practice/practice-02/src/assets/images/service/icon-3.png new file mode 100644 index 0000000..847a421 Binary files /dev/null and b/practice/practice-02/src/assets/images/service/icon-3.png differ diff --git a/practice/practice-02/src/assets/images/service/main-character-desktop.png b/practice/practice-02/src/assets/images/service/main-character-desktop.png new file mode 100644 index 0000000..3315f04 Binary files /dev/null and b/practice/practice-02/src/assets/images/service/main-character-desktop.png differ diff --git a/practice/practice-02/src/assets/images/service/main-character-mobile.png b/practice/practice-02/src/assets/images/service/main-character-mobile.png new file mode 100644 index 0000000..4716e83 Binary files /dev/null and b/practice/practice-02/src/assets/images/service/main-character-mobile.png differ diff --git a/practice/practice-02/src/assets/images/service/vegetable-desktop.png b/practice/practice-02/src/assets/images/service/vegetable-desktop.png new file mode 100644 index 0000000..1b92099 Binary files /dev/null and b/practice/practice-02/src/assets/images/service/vegetable-desktop.png differ diff --git a/practice/practice-02/src/assets/images/service/vegetable-mobile.png b/practice/practice-02/src/assets/images/service/vegetable-mobile.png new file mode 100644 index 0000000..2c90cf0 Binary files /dev/null and b/practice/practice-02/src/assets/images/service/vegetable-mobile.png differ diff --git a/practice/practice-02/src/includes/mixins.pug b/practice/practice-02/src/includes/mixins.pug index 0fa72f2..f6e01ac 100644 --- a/practice/practice-02/src/includes/mixins.pug +++ b/practice/practice-02/src/includes/mixins.pug @@ -1,25 +1,21 @@ -- var values = [1, 2, 3]; - -mixin cardFoodItem(itemFood, price, ratePoint, foodName, foodDescription) +mixin foodItemCard(food) .card-item img.card-img(src=offer_img_path + "item-card.png", alt="Item card image") - img.food-image( - src=offer_img_path + "food-" + itemFood + ".png", - alt="Food " + itemFood + " image" - ) - span.price= price + "$" + img.food-image(src=food.imageUrl, alt=food.name + " image") + span.price= food.price + "$" .content-card .rate .avatar-container - each val in values - img( - src=offer_img_path + "avatar-" + val + "-item-" + itemFood + ".png", - alt="Avatar user rate", - class="avatar-" + val - ) + if food.avatarImageList && food.avatarImageList.length > 0 + each avatar, index in food.avatarImageList + img( + src=avatar.avatarUrl, + alt="Avatar user rate", + class="avatar-" + index + ) .star-container img(src=offer_img_path + "star.png", alt="Star image") - span.rate-point= "(" + ratePoint + ")" - span.food-name= foodName - p.food-description= foodDescription - a.order-btn.btn.no-underline(href="javascript:void(0)") Order now + 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 diff --git a/practice/practice-02/src/layouts/offer.pug b/practice/practice-02/src/layouts/offer.pug index f3291ab..e4cc937 100644 --- a/practice/practice-02/src/layouts/offer.pug +++ b/practice/practice-02/src/layouts/offer.pug @@ -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( diff --git a/practice/practice-02/src/layouts/welcome.pug b/practice/practice-02/src/layouts/welcome.pug index 5a9fc61..f23e2f7 100644 --- a/practice/practice-02/src/layouts/welcome.pug +++ b/practice/practice-02/src/layouts/welcome.pug @@ -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.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" + ) + 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" + ) diff --git a/practice/practice-02/src/styles/layouts/_welcome.scss b/practice/practice-02/src/styles/layouts/_welcome.scss index 007faa7..c6fcf80 100644 --- a/practice/practice-02/src/styles/layouts/_welcome.scss +++ b/practice/practice-02/src/styles/layouts/_welcome.scss @@ -4,20 +4,22 @@ } .welcome { - @include flex-container(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 { + @include flex-container(true, center, column); + margin: auto; + max-width: 428px; + padding-top: 117px; + } // Start banner &__banner-container { @include size(428px, auto); - @include flex-container(center, column); + @include flex-container(true, center, column); position: relative; } @@ -44,7 +46,7 @@ // Start content &__content { - @include flex-container($flex-direction: column); + @include flex-container(true, $flex-direction: column); @include size(calc(428px - 48px), auto); position: relative; @@ -61,7 +63,7 @@ } &__text-box { - @include flex-container($align-items: center, $gap: 6px); + @include flex-container(true, $align-items: center, $gap: 6px); @include size(fit-content); background-color: #feeae9; @@ -112,7 +114,7 @@ } &__search-form { - @include flex-container(); + @include flex-container(true); margin-top: 32px; border-radius: 100px; @@ -154,7 +156,7 @@ } &__action-container { - @include flex-container($justify-content: space-between); + @include flex-container(true, $justify-content: space-between); width: 100%; margin-top: 44px; @@ -162,7 +164,7 @@ } &__watch-video-link { - @include flex-container($align-items: center, $gap: 21px); + @include flex-container(true, $align-items: center, $gap: 21px); position: relative; @@ -219,15 +221,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-container( + $flex-direction: row-reverse, + $align-items: center, + $justify-content: space-between + ); - padding-top: 130px; - width: 100%; - max-width: $max-width; + padding-top: 130px; + width: 100%; + max-width: $max-width; + } // Start banner &__banner-img {