-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathindex.html
307 lines (293 loc) · 16.7 KB
/
index.html
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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Panda Commerce</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<!-- FontAwesome -->
<script src="https://kit.fontawesome.com/1694914d74.js" crossorigin="anonymous"></script>
<!-- External CSS StyleSheet -->
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<!-- Start Header -->
<header>
<!-- NavBar Added -->
<nav class="navbar navbar-expand-lg py-4">
<div class="container">
<a class="navbar-brand" href="#">
<img src="images/logo.png" alt="">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse fs-5" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Product</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact Us</a>
</li>
</ul>
<div class="input-group w-25">
<input type="text" class="form-control" placeholder="search" aria-label="search"
aria-describedby="button-addon2">
<button class="btn btn-outline-secondary" type="button" id="button-addon2"><i
class="fa-solid fa-magnifying-glass"></i></button>
</div>
</div>
</div>
</nav>
<!-- Carousel Added -->
<div class="container mt-3 mb-5">
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0"
class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"
aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"
aria-label="Slide 3"></button>
</div>
<div class="carousel-inner rounded-3">
<div class="carousel-item active">
<div class="row panda-bg-info p-5 d-flex align-items-center">
<div class="col-lg-7 ps-5">
<h1 class="fw-bold mb-3">Mega LCD TV For Sports</h1>
<p class="mb-4">This is the best tv in the world for people who just want to waste time
in front of
tv. We've recommended screens of at least 65 inches (though other sizes are
available), and that feature refresh rates of 60Hz and 120Hz so that they can
accommodate the motion of fast-paced games.</p>
<h1 class="price fw-semibold">$1200</h1>
<button type="button" class="btn-buy-now">Buy Now <i
class="fa-solid fa-arrow-right"></i></button>
</div>
<div class="col-lg-4">
<img src="images/banner-images/tv.png" class="d-block w-100 mt-4 mt-md-0" alt="">
</div>
</div>
</div>
<div class="carousel-item">
<div class="row panda-bg-info p-5 d-flex align-items-center">
<div class="col-lg-7 ps-5">
<h1 class="fw-bold mb-3">Cool Dude Headphone</h1>
<p class="mb-4">This is the best headphone in the world for people who just want to
waste time in
front of funky world. Find Cool Dude Headphones stock images in HD and millions of
other royalty-free stock photos, illustrations and vectors in the Shutterstock
collection.</p>
<h1 class="price fw-semibold">$420</h1>
<button type="button" class="btn-buy-now">Buy Now <i
class="fa-solid fa-arrow-right"></i></button>
</div>
<div class="col-lg-4">
<img src="images/banner-images/headphone.png" class="d-block w-100 mt-4 mt-lg-0" alt="">
</div>
</div>
</div>
<div class="carousel-item">
<div class="row panda-bg-info p-5 d-flex align-items-center">
<div class="col-lg-7 ps-5">
<h1 class="fw-bold mb-3">X-Box for your living room</h1>
<p class="mb-4">This is the best x-box in the world for people who just want to waste
time in front
of fake sports. For a lot of people, the living room is the ideal place to keep your
video game system. Everyone can access it, there is probably at least one big couch
to sit on while you play, and this is often the room where the biggest T.V. is
located.</p>
<h1 class="price fw-semibold">$600</h1>
<button type="button" class="btn-buy-now">Buy Now <i
class="fa-solid fa-arrow-right"></i></button>
</div>
<div class="col-lg-4">
<img src="images/banner-images/xbox.png" class="d-block w-100" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- End Header -->
<!-- Start Main -->
<main>
<!-- Categories -->
<div class="container my-5">
<h2 class="fw-semibold mb-3">Categories</h2>
<div class="row g-4">
<div class="col-sm-12 col-md-6 col-lg-4">
<div
class="p-3 border bg-primary text-light d-flex align-items-center justify-content-around rounded-3 watch">
<h2 class="fw-semibold">Watch</h2>
<img class="w-25" src="images/categories/watch.png" alt="">
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<div
class="p-3 border bg-success text-light d-flex align-items-center justify-content-around rounded-3 bag">
<h2 class="fw-semibold">Bag</h2>
<img class="w-25" src="images/categories/bag.png" alt="">
</div>
</div>
<div class="col-sm-12 col-md-6 col-lg-4">
<div
class="p-3 border bg-warning text-light d-flex align-items-center justify-content-around rounded-3 shoes">
<h2 class="fw-semibold">Shoes</h2>
<img class="w-25" src="images/categories/shoes.png" alt="">
</div>
</div>
</div>
</div>
<!-- Category Shoes -->
<section class="all-categories">
<section id="shoes" class="container">
<div class="d-flex justify-content-between align-items-center">
<h2 class="fw-semibold mb-3">Shoes</h2>
<h5 class="fw-semibold text-warning">See All</h5>
</div>
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
<div class="col">
<div class="card border-0 rounded-3 h-100">
<img src="images/shoes/shoe-1.png" class="card-img-top" alt="...">
<div class="card-body text-center">
<h5 class="card-title fw-semibold">Supply 350</h5>
<p class="card-text mt-4">This is a longer card with supporting text below as a natural
lead-in
to additional.</p>
<h5 class="price fw-semibold">$120</h5>
</div>
<div class="mb-4 mx-auto">
<button type="button" class="btn-buy-now">Buy Now <i
class="fa-solid fa-arrow-right"></i></button>
</div>
</div>
</div>
<div class="col">
<div class="card border-0 rounded-3 h-100">
<img src="images/shoes/shoe-2.png" class="card-img-top" alt="...">
<div class="card-body text-center">
<h5 class="card-title fw-semibold">Nike 360</h5>
<p class="card-text mt-4">This card has supporting text below as a natural lead-in to
additional
content.</p>
<h5 class="price fw-semibold">$320</h5>
</div>
<div class="mb-4 mx-auto">
<button type="button" class="btn-buy-now">Buy Now <i
class="fa-solid fa-arrow-right"></i></button>
</div>
</div>
</div>
<div class="col">
<div class="card border-0 rounded-3 h-100">
<img src="images/shoes/shoe-3.png" class="card-img-top" alt="...">
<div class="card-body text-center">
<h5 class="card-title fw-semibold">Red Airmax</h5>
<p class="card-text mt-4">This is a wider card with supporting text below as a natural
lead-in to
additional.</p>
<h5 class="price fw-semibold">$350</h5>
</div>
<div class="mb-4 mx-auto">
<button type="button" class="btn-buy-now">Buy Now <i
class="fa-solid fa-arrow-right"></i></button>
</div>
</div>
</div>
</div>
</section>
<!-- Category Backpack -->
<section id="backpack" class="container">
<div class="d-flex justify-content-between align-items-center">
<h2 class="fw-semibold mb-3">Backpack</h2>
<h5 class="fw-semibold text-warning">See All</h5>
</div>
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
<div class="col">
<div class="card border-0 rounded-3 h-100">
<img src="images/bags/bag-1.png" class="card-img-top" alt="...">
<div class="card-body text-center">
<h5 class="card-title fw-semibold">Red Laltu Bag</h5>
<p class="card-text mt-4">This is a wider card with supporting text below as a natural
lead-in to
additional content. This content is a little bit longer.</p>
<h5 class="price fw-semibold">$120</h5>
</div>
<div class="mb-4 mx-auto">
<button type="button" class="btn-buy-now">Buy Now >></button>
</div>
</div>
</div>
<div class="col">
<div class="card border-0 rounded-3 h-100">
<img src="images/bags/bag-2.png" class="card-img-top" alt="...">
<div class="card-body text-center">
<h5 class="card-title fw-semibold">Blue Niltu Bag</h5>
<p class="card-text mt-4">This is a wider card with supporting text below as a natural
lead-in to
additional content. This content is a little bit longer.</p>
<h5 class="price fw-semibold">$320</h5>
</div>
<div class="mb-4 mx-auto">
<button type="button" class="btn-buy-now">Buy Now >></button>
</div>
</div>
</div>
<div class="col">
<div class="card border-0 rounded-3 h-100">
<img src="images/bags/bag-3.png" class="card-img-top" alt="...">
<div class="card-body text-center">
<h5 class="card-title fw-semibold">Black Kaltu Bag</h5>
<p class="card-text mt-4">This is a wider card with supporting text below as a natural
lead-in to
additional content. This content is a little bit longer.</p>
<h5 class="price fw-semibold">$169</h5>
</div>
<div class="mb-4 mx-auto">
<button type="button" class="btn-buy-now">Buy Now >></button>
</div>
</div>
</div>
</div>
</section>
</section>
<!-- Subscribe Section -->
<section id="subscribe" style="height: 450px;"
class="container my-5 panda-bg-info rounded-3 d-flex justify-content-center align-items-center">
<div class="text-center">
<h3 class="fw-bold">LET'S STAY IN TOUCH</h3>
<h6 class="text-secondary">Get updates on sales, specials and more</h6>
<div class="input-group mt-4 mb-3">
<input type="text" class="form-control fs-5 ps-4 pe-5 py-2" placeholder="Enter your email"
aria-label="Recipient's username" aria-describedby="button-addon2">
<button class="btn-buy-now mt-0 px-5 text-capitalize" type="button" id="button-addon2">Send</button>
</div>
</div>
</section>
</main>
<!-- End Main -->
<!-- Start Footer -->
<footer class="mb-0 pb-0 mt-3 text-center">
<small>©2023. Panda Commerce. All rights reserved.</small>
</footer>
<!-- End Footer -->
<!-- Bootstrap Script -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe"
crossorigin="anonymous"></script>
</body>
</html>