-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
271 lines (243 loc) · 11.4 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Panda Commerce</title>
<link rel="shortcut icon" href="images/fav.ico" type="image/x-icon">
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container nav">
<nav class="navbar navbar-expand-lg">
<div class="container-fluid ">
<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" 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">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#shoes">Shoes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#bagpack">Bagpack</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#subscribe">Subscribe</a>
</li>
</div>
</div>
</nav>
</div>
<div class="container">
<div id="carouselExampleAutoplaying" class="carousel slide orange-bg" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row align-items-center">
<div class="col-md-7">
<h1>Mega LCD TV For Sports</h1>
<p>The Mega LCD TV delivers a premium sports experience with ultra-clear picture quality, smooth motion, vibrant colors, immersive sound, and a sleek, modern design.</p>
<h1 class="price">$1200</h1>
<button class="buy-now-button">Buy Now>></button>
</div>
<div class="col-md-5">
<img src="images/banner-images/tv.png" class="d-block w-100" alt="...">
</div>
</div>
<div class="carousel-caption d-none d-md-block">
</div>
</div>
<div class="carousel-item">
<div class="row align-items-center">
<div class="col-md-7">
<h1>Cool Dude Headphone</h1>
<p>The Cool Dude Headphones offer superior sound quality, stylish design, comfortable fit, noise-canceling features, and long-lasting battery life for a premium audio experience.</p>
<h1 class="price">$420</h1>
<button class="buy-now-button">Buy Now>></button>
</div>
<div class="col-md-5">
<img src="images/banner-images/headphone.png" class="d-block w-100" alt="...">
</div>
</div>
<div class="carousel-caption d-none d-md-block">
</div>
</div>
<div class="carousel-item">
<div class="row align-items-center">
<div class="col-md-7">
<h1>X-Box</h1>
<p>The Xbox is a gaming console known for its powerful performance, vast game library, online multiplayer capabilities, and immersive gaming experience with stunning graphics and sound.</p>
<h1 class="price">$600</h1>
<button class="buy-now-button">Buy Now>></button>
</div>
<div class="col-md-5">
<img src="images/banner-images/xbox.png" class="d-block w-100" alt="...">
</div>
</div>
<div class="carousel-caption d-none d-md-block">
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<div class="container catagories">
<div class="row">
<div class="col-md-4">
<div class="d-flex justify-content-evenly align-items-center cat1">
<h1>Watch</h1>
<img src="images/categories/watch.png" alt="">
</div>
</div>
<div class="col-md-4">
<div class="d-flex justify-content-evenly align-items-center cat2">
<h1>Bag</h1>
<img src="images/categories/bag.png" alt="">
</div>
</div>
<div class="col-md-4">
<div class="d-flex justify-content-evenly align-items-center cat3">
<h1>Shoes</h1>
<img src="images/categories/shoes.png" alt="">
</div>
</div>
</div>
</div>
<div class="container shoes" id="shoes">
<h3>Shoes</h3>
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<img src="images/shoes/shoe-1.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Sply 350</h5>
<p class="card-text">The SPLY 350 shoes showcase a sleek, sock-like fit, responsive Boost cushioning, signature side stripe and a perfect blend of comfort and iconic streetwear style.</p>
<h5>$120</h5>
<button class="buy-now-button">Buy Now>></button>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="images/shoes/shoe-2.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Nike 360</h5>
<p class="card-text">The Nike Air Max 360 boasts full-length Air cushioning, futuristic design, lightweight materials, and unparalleled comfort for sporty, everyday wear.</p>
<h5>$320</h5>
<button class="buy-now-button">Buy Now>></button>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="images/shoes/shoe-3.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Red Airmax</h5>
<p class="card-text">The Red Air Max shoes combine bold, monochromatic design with iconic Air cushioning, lightweight materials, and premium comfort for standout style.</p>
<h5>$350</h5>
<button class="buy-now-button">Buy Now>></button>
</div>
</div>
</div>
</div>
<div class="container" id="bagpack">
<h3>Bagpack</h3>
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100">
<img src="images/bags/bag-1.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Ogio</h5>
<h5>$120</h5>
<p class="card-text">The Ogio bag features durable construction, modern design, multiple compartments, ergonomic comfort, and versatile functionality, ideal for work, travel, or sports.</p>
</div>
<div class="card-footer">
<button class="buy-now-button">Buy Now>></button>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="images/bags/bag-2.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Urton</h5>
<h5>$250</h5>
<p class="card-text">The Urton bag combines sleek design with durable materials, ample storage, and versatile functionality, perfect for daily use or travel adventures.</p>
</div>
<div class="card-footer">
<button class="buy-now-button">Buy Now>></button>
</div>
</div>
</div>
<div class="col">
<div class="card h-100">
<img src="images/bags/bag-3.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Kathmandu</h5>
<h5>$320</h5>
<p class="card-text">The Kathmandu bag offers rugged durability, versatile storage, ergonomic comfort, and weather-resistant materials, ideal for outdoor adventures and everyday travel.</p>
</div>
<div class="card-footer">
<button class="buy-now-button">Buy Now>></button>
</div>
</div>
</div>
</div>
</div>
<div class="container d-flex justify-content-center align-items-center orange-bg " id="subscribe">
<div>
<h3>LET'S STAY IN TOUCH</h3>
<h6>Get updates on sales, Special and more</h6>
<input class="form-control" type="email" placeholder="Input Your email Address Here:">
<button class="buy-now-button">SUBMIT</button>
</div>
</div>
<footer>
<p> ©2024 Panda Commerce. All rights reversed. Dhaka,Bangladesh</p>
</footer>
<script
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"
integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
crossorigin="anonymous"
></script>
</body>
</html>