From efcd19046ce772c7ed5d4902ab1bab1ddec93777 Mon Sep 17 00:00:00 2001
From: Nezumi <loiphan2711@gmail.com>
Date: Sun, 23 Jul 2023 09:23:40 +0700
Subject: [PATCH] Implement html layout for offers UI

---
 practice/practice-02/src/includes/mixins.pug | 28 ++++++++++++++++++++
 practice/practice-02/src/index.pug           | 21 ++++++++++-----
 practice/practice-02/src/layouts/offer.pug   | 19 +++++++++++++
 3 files changed, 62 insertions(+), 6 deletions(-)
 create mode 100644 practice/practice-02/src/layouts/offer.pug

diff --git a/practice/practice-02/src/includes/mixins.pug b/practice/practice-02/src/includes/mixins.pug
index e69de29..5b1dd78 100644
--- a/practice/practice-02/src/includes/mixins.pug
+++ b/practice/practice-02/src/includes/mixins.pug
@@ -0,0 +1,28 @@
+- var values = [1, 2, 3];
+
+mixin cardFoodItem(itemFood, price, ratePoint, foodName, foodDescription)
+  .offer__card-item
+    img.offer__card-img(
+      src=offer_img_path + "item-card.png",
+      alt="Item card image"
+    )
+    img.offer__food-image(
+      src=offer_img_path + "food-" + itemFood + ".png",
+      alt="Food " + itemFood + " image"
+    )
+    span.offer__price= price + "$"
+    .offer__content-card
+      .offer__rate
+        .offer__avatar-container
+          each val in values 
+            img(
+              src=offer_img_path + "avatar-" + val + "-item-" + itemFood + ".png",
+              alt="Avatar user rate",
+              class="offer__avatar-" + val
+            )
+        .offer__star-container
+          img(src=offer_img_path + "star.png", alt="Star image")
+        span.offer__rate-point= "(" + ratePoint + ")"
+      span.offer__food-name= foodName
+      p.offer__food-description= foodDescription
+    a.offer__order-btn Order now
diff --git a/practice/practice-02/src/index.pug b/practice/practice-02/src/index.pug
index 9eba337..e532558 100644
--- a/practice/practice-02/src/index.pug
+++ b/practice/practice-02/src/index.pug
@@ -1,15 +1,24 @@
+include ./includes/mixins
+
 doctype html
 html(lang="en")
   head
     meta(charset="UTF-8")
     meta(name="viewport", content="width=device-width, initial-scale=1.0")
     link(rel="stylesheet", href="./styles/main.scss")
+    link(
+      rel="icon",
+      type="image/x-icon",
+      href="./assets/images/favicon-16x16.png"
+    )
     title Food Hut
   body
-    header.header.flex
-      .logo-wrapper
-        a.logo-link(href="javascript:void(0)")
-          img.logo(src="./assets/images/logo.svg", alt="Food Hut logo")
-      .header-content.flex
-        include layouts/nav-menu
+    header.header
+      .header-container
+        .logo-wrapper
+          a.logo-link(href="javascript:void(0)")
+            img.logo(src="./assets/images/logo.svg", alt="Food Hut logo")
+        .header-content
+          include layouts/nav-menu
     include layouts/welcome
+    include layouts/offer
diff --git a/practice/practice-02/src/layouts/offer.pug b/practice/practice-02/src/layouts/offer.pug
new file mode 100644
index 0000000..b4b7ebd
--- /dev/null
+++ b/practice/practice-02/src/layouts/offer.pug
@@ -0,0 +1,19 @@
+- var offer_img_path = "./assets/images/offer/";
+
+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
+      +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")