deshi-deals/index.html at main · devvnawaz/deshi-deals · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Deshi Deals | Home</title>
    <link rel="shortcut icon" href="./assets/logo.png" type="image/x-icon" />
    <link
      href="https://cdn.jsdelivr.net/npm/daisyui@5"
      rel="stylesheet"
      type="text/css"
    />
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
  </head>
  <body>
    <header class="shadow py-3">
      <div class="logo flex justify-center items-center gap-1">
        <img src="./assets/logo.png" alt="" class="w-12" />
        <div>
          <h2 class="text-pink-500 text-xl">
            Deshi <span class="font-bold">Deals</span>
          </h2>
          <p class="text-sm text-gray-500">Cheap Price, Best Quality</p>
        </div>
      </div>
    </header>
    <main class="bg-gray-100">
      <section id="banner"></section>
      <section
        id="products-container"
        class="w-11/12 mx-auto py-10 grid grid-cols-12 gap-8"
      >
        <section id="products-box" class="col-span-9">
          <div class="kitchen">
            <h1 class="text-2xl font-bold mb-5">Kitchenware</h1>
            <div class="kitchen-items grid grid-cols-3 gap-5">
              <!-- product card 1 -->
              <div class="card bg-base-100 shadow-sm">
                <figure class="px-10 bg-gray-200 m-5">
                  <img
                    src="./assets/kitchen-1.png"
                    alt="Shoes"
                    class="rounded-xl py-5"
                  />
                </figure>
                <div class="card-body items-center text-center">
                  <h2 id="cooking-stick-title" class="card-title">
                    Cooking Stick
                  </h2>
                  <p>⭐️⭐️⭐️⭐️</p>
                  <p id="" class="text-gray-500">
                    <span id="cooking-stick-price">150.00</span> TK
                  </p>
                </div>
                <div class="m-5">
                  <button
                    id="cooking-stick-add-to-cart-btn"
                    class="btn bg-pink-500 text-white btn-block"
                  >
                    Add to Cart
                  </button>
                </div>
              </div>

              <!-- product card 2 -->
              <div class="card bg-base-100 shadow-sm">
                <figure class="px-10 bg-gray-200 m-5">
                  <img
                    src="./assets/kitchen-2.png"
                    alt="Shoes"
                    class="rounded-xl py-5"
                  />
                </figure>
                <div class="card-body items-center text-center">
                  <h2 class="card-title">Cooking Plates</h2>
                  <p>⭐️⭐️⭐️⭐️</p>
                  <p class="text-gray-500"><span>150.00</span> TK</p>
                </div>
                <div class="m-5">
                  <button class="btn bg-pink-500 text-white btn-block">
                    Add to Cart
                  </button>
                </div>
              </div>

              <!-- product card 3 -->
              <div class="card bg-base-100 shadow-sm">
                <figure class="px-10 bg-gray-200 m-5">
                  <img
                    src="./assets/kitchen-3.png"
                    alt="Shoes"
                    class="rounded-xl py-5"
                  />
                </figure>
                <div class="card-body items-center text-center">
                  <h2 class="card-title">Cooking Pan</h2>
                  <p>⭐️⭐️⭐️⭐️</p>
                  <p class="text-gray-500"><span>150.00</span> TK</p>
                </div>
                <div class="m-5">
                  <button class="btn bg-pink-500 text-white btn-block">
                    Add to Cart
                  </button>
                </div>
              </div>
            </div>
          </div>
        </section>
        <aside id="cart-box" class="col-span-3">
          <div class="bg-white p-5 rounded">
            <h2 class="font-bold mb-5">Have a Coupon?</h2>
            <div class="join">
              <input class="input join-item" placeholder="Email" />
              <button class="btn join-item rounded-r-xl bg-pink-500 text-white">
                Apply
              </button>
            </div>
          </div>
          <div class="cart-box mt-10 p-5 bg-white">
            <h2 class="font-bold">Cart</h2>
            <div class="" id="cart-container"></div>
            <div class="">
              <h2>Total Price: <span id="total-price">0</span> TK</h2>
              <h2>Total Quantity: <span id="total-quanity">0</span> Items</h2>
              <button class="btn bg-pink-500 text-white btn-block">
                Make Purchase
              </button>
            </div>
          </div>
        </aside>
      </section>
    </main>
    <script></script>
    <script src="./script/index.js"></script>
  </body>
</html>