Merge pull request #13 from Nez27/feature/offers-html

Implement html layout for offers section.

practice/practice-02/src/includes/mixins.pug

@@ -0,0 +1,21 @@
+mixin foodItemCard(food)
+  .card-item
+    img.card-img(src=offer_img_path + "item-card.png", alt="Item card image")
+    img.food-image(src=food.imageUrl, alt=food.name + " image")
+    span.price= food.price + "$"
+    .content-card
+      .rate
+        .avatar-container
+          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= "(" + food.ratePoint + ")"
+      p.food-name= food.foodName
+      p.food-description= food.foodDescription
+    a.order-btn.btn(href="javascript:void(0)") Order now

practice/practice-02/src/index.pug

@@ -1,3 +1,5 @@
+include ./includes/mixins
+
 doctype html
 html(lang="en")
   head
@@ -19,3 +21,4 @@ html(lang="en")
         .header-content
           include layouts/nav-menu
     include layouts/welcome
+    include layouts/offer

practice/practice-02/src/layouts/offer.pug

@@ -0,0 +1,31 @@
+- 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
+    .offer__dot-background
+      img(
+        src=offer_img_path + "dot-background.png",
+        alt="Dot background image"
+      )
+    h2.offer__heading Today
+      = " "
+      span.primary-text Special
+      = " 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
+      each val in list_food
+        +foodItemCard(val)
+  .offer__rosemary-container
+    picture
+      source(
+        media="(min-width: 840px)",
+        srcset=offer_img_path + "rosemary-desktop.png"
+      )
+      img(src=offer_img_path + "rosemary-mobile.png", alt="Rosemary image")