Hugging Face's logo

Spaces:
pratham0011
/
E-commerce
Sleeping

App Files Community
1
pratham0011 commited on
Commit
a5d3183
·
verified ·
1 Parent(s): 5fe493c

Upload 16 files

Browse files
Files changed (16) hide show
  1. .github/workflows/static.yml +43 -0
  2. img/Apple Watch Series 1 Sport.jpg +0 -0
  3. img/Apple iPhone 12 Pro 6.1 RAM.jpg +0 -0
  4. img/Canon camera 20x zoom, Black.jpg +0 -0
  5. img/Gaming Headset 32db Black.jpg +0 -0
  6. img/GoPro HERO6 4K Action.jpg +0 -0
  7. img/Xiaomi.jpg +0 -0
  8. img/blue bag.jpg +0 -0
  9. img/boxes.jpg +0 -0
  10. img/fruit.jpg +0 -0
  11. img/girl.jpg +0 -0
  12. img/logo.svg +21 -0
  13. img/ship.jpg +0 -0
  14. img/watch.jpg +0 -0
  15. index.html +497 -19
  16. styles.css +77 -0
.github/workflows/static.yml ADDED
@@ -0,0 +1,43 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ # Simple workflow for deploying static content to GitHub Pages
2
+ name: Deploy static content to Pages
3
+
4
+ on:
5
+ # Runs on pushes targeting the default branch
6
+ push:
7
+ branches: ["main"]
8
+
9
+ # Allows you to run this workflow manually from the Actions tab
10
+ workflow_dispatch:
11
+
12
+ # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
13
+ permissions:
14
+ contents: read
15
+ pages: write
16
+ id-token: write
17
+
18
+ # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
19
+ # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
20
+ concurrency:
21
+ group: "pages"
22
+ cancel-in-progress: false
23
+
24
+ jobs:
25
+ # Single deploy job since we're just deploying
26
+ deploy:
27
+ environment:
28
+ name: github-pages
29
+ url: ${{ steps.deployment.outputs.page_url }}
30
+ runs-on: ubuntu-latest
31
+ steps:
32
+ - name: Checkout
33
+ uses: actions/checkout@v3
34
+ - name: Setup Pages
35
+ uses: actions/configure-pages@v3
36
+ - name: Upload artifact
37
+ uses: actions/upload-pages-artifact@v1
38
+ with:
39
+ # Upload entire repository
40
+ path: '.'
41
+ - name: Deploy to GitHub Pages
42
+ id: deployment
43
+ uses: actions/deploy-pages@v2
img/Apple Watch Series 1 Sport.jpg ADDED
img/Apple iPhone 12 Pro 6.1 RAM.jpg ADDED
img/Canon camera 20x zoom, Black.jpg ADDED
img/Gaming Headset 32db Black.jpg ADDED
img/GoPro HERO6 4K Action.jpg ADDED
img/Xiaomi.jpg ADDED
img/blue bag.jpg ADDED
img/boxes.jpg ADDED
img/fruit.jpg ADDED
img/girl.jpg ADDED
img/logo.svg ADDED
img/ship.jpg ADDED
img/watch.jpg ADDED
index.html CHANGED
@@ -1,19 +1,497 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
7
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
+ <title>Clone E-Commerce</title>
9
+
10
+
11
+ <link rel="stylesheet" type="text/css" href="styles.css">
12
+ <!-- Bootstrap -->
13
+ <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">
14
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
15
+
16
+ <!--Font awesome!-->
17
+ <script src="https://kit.fontawesome.com/f4e855eb8f.js" crossorigin="anonymous"></script>
18
+ </head>
19
+
20
+ <body>
21
+
22
+
23
+
24
+ <div class="container pt-3">
25
+
26
+ <div class="input-group">
27
+ <a class="navbar-brand" href="#"> <img alt="logo" class="me-3 me-md-5"
28
+ src="img/logo.svg"></img></a> <!--LOGO!-->
29
+
30
+ <input type="text" id="input-form" class="form-control" placeholder="Search"
31
+ aria-label="Text input with dropdown button">
32
+ <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown"
33
+ aria-expanded="false">All type</button>
34
+ <button title="Search" class="btn btn-primary d-none d-lg-block"><i
35
+ class="fa-solid fa-magnifying-glass rounded d-none d-lg-block"></i></button>
36
+
37
+ <div class="ms-md-5 mt-2 mt-md-0">
38
+ <a type="button" class="btn btn-outline-primary fw-500 rounded ">
39
+ <i class="fa-solid fa-user me-lg-2"></i>
40
+ <p class="d-none d-lg-inline">Sign in</p>
41
+ </a>
42
+ <a type="button" class="btn btn-outline-primary fw-500 rounded">
43
+ <i class="fa-solid fa-heart me-lg-2"></i>
44
+ <p class="d-none d-lg-inline">Wishlist</p>
45
+ </a>
46
+ <a type="button" class="btn btn-outline-primary fw-500 rounded ">
47
+ <i class="fa-solid fa-cart-shopping me-lg-2"></i>
48
+ <p class="d-none d-lg-inline">My Cart</p>
49
+
50
+ </a>
51
+ </div>
52
+
53
+ <ul class="dropdown-menu dropdown-menu-start">
54
+ <li><a class="dropdown-item" href="#">Best</a></li>
55
+ <li><a class="dropdown-item" href="#">Special</a></li>
56
+ <li><a class="dropdown-item" href="#">Latest</a></li>
57
+ </ul>
58
+
59
+ </div>
60
+
61
+ </div> <!--Container div!-->
62
+ <hr>
63
+
64
+
65
+ <!-- Navbar -->
66
+ <div class="container mt-3">
67
+ <nav class="navbar navbar-expand-lg navbar-light">
68
+
69
+ <button class="navbar-toggler mb-2" type="button" data-bs-toggle="collapse"
70
+ data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
71
+ aria-label="Toggle navigation">
72
+ <span class="navbar-toggler-icon"></span>
73
+ </button>
74
+
75
+ <div class="collapse navbar-collapse" id="navbarSupportedContent">
76
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0">
77
+ <li class="nav-item">
78
+ <a class="nav-link active" aria-current="page" href="#">Categories</a>
79
+ </li>
80
+ <li class="nav-item">
81
+ <a class="nav-link" href="#">Hot offers</a>
82
+ </li>
83
+ <li class="nav-item">
84
+ <a class="nav-link" href="#">Gift boxes</a>
85
+ </li>
86
+ <li class="nav-item">
87
+ <a class="nav-link" href="#">Projects</a>
88
+ </li>
89
+ <li class="nav-item">
90
+ <a class="nav-link" href="#">Menu item</a>
91
+ </li>
92
+ <li class="nav-item">
93
+ <a class="nav-link" href="#">Menu name</a>
94
+ </li>
95
+
96
+ <li class="nav-item dropdown">
97
+ <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
98
+ data-bs-toggle="dropdown" aria-expanded="false">
99
+ Others
100
+ </a>
101
+ <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
102
+ <li><a class="dropdown-item" href="#">Action</a></li>
103
+ <li><a class="dropdown-item" href="#">Another action</a></li>
104
+ <li><a class="dropdown-item" href="#">Something else here</a></li>
105
+ </ul>
106
+ </li>
107
+ </div>
108
+ </div>
109
+
110
+ <!-- Content --->
111
+ <div class="bg-primary py-5">
112
+ <div class="container py-5 text-light">
113
+ <h1 class="display-1">Best products &<br> Brands in our store</h1>
114
+ <p class="lead">Trendy Products, Factory Prices, Excellent Service</p>
115
+ <a id="shop-btn" href="#" role="button" class="btn btn-warning fs-5 text-light ">Shop
116
+ now</a>
117
+ <a href="#" role="button" class="btn btn-light text-dark fs-5 ">Learn more</a>
118
+ </div>
119
+ </div>
120
+
121
+
122
+ <!-- Product section -->
123
+
124
+ <div class="py-5">
125
+ <div class="container">
126
+ <h3 class="fw-bold mb-sm-3 mb-md-5 text-center text-md-start">New products</h3>
127
+
128
+ <div class="row g-3 d-flex justify-content-evenly">
129
+ <div class="card" id="card-width">
130
+ <img alt="GoPro HERO6 4K Action" class="img"
131
+ src="img/GoPro HERO6 4K Action.jpg" width="100%"
132
+ height="240px" img>
133
+ <div class="card-body">
134
+ <hr>
135
+ <h5 class="card-title">$790.50</h5>
136
+ <h6 class="card-subtitle mb-2 text-muted">GoPro HERO6 4K Action</h6>
137
+ <h6 class="card-subtitle mb-2 text-muted">Camera - Black</h6>
138
+ <a href="#" role="button" class="btn btn-primary card-link py-2 px-4">Add to card</a>
139
+ <a title="Add to cart" href="#" class="btn btn-outline-primary card-link"> <i class="fa-solid fa-heart"></i></a>
140
+ </div>
141
+ </div> <!--First Card--->
142
+
143
+
144
+
145
+ <div class="card" id="card-width">
146
+ <img alt="Canon camera 20x zoom, Black"
147
+ src="img/Canon camera 20x zoom, Black.jpg" width="100%"
148
+ height="240px" img>
149
+
150
+ <div class="card-body">
151
+ <hr>
152
+ <h5 class="card-title">$320.00</h5>
153
+ <h6 class="card-subtitle mb-2 text-muted">Canon camera 20x zoom, Black</h6>
154
+ <h6 class="card-subtitle mb-2 text-muted">color EOS 2000</h6>
155
+
156
+ <a href="#" role="button" class="btn btn-primary card-link py-2 px-4">Add to card</a>
157
+ <a title="Add to cart" href="#" class="btn btn-outline-primary card-link "> <i class="fa-solid fa-heart"></i></a>
158
+ </div>
159
+ </div><!-- 2nd card -->
160
+
161
+
162
+
163
+ <div class="card" id="card-width">
164
+ <img alt="Xiaomi Redmi 8 Original Global"
165
+ src="img/Xiaomi.jpg" width="100%"
166
+ height="240px" img>
167
+
168
+ <div class="card-body">
169
+ <hr>
170
+ <h5 class="card-title">$120.00</h5>
171
+ <h6 class="card-subtitle mb-2 text-muted">Xiaomi Redmi 8 Original Global</h6>
172
+ <h6 class="card-subtitle mb-2 text-muted">Version 4GB</h6>
173
+
174
+ <a href="#" role="button" class="btn btn-primary card-link py-2 px-4">Add to card</a>
175
+ <a title="Add to cart" href="#" class="btn btn-outline-primary card-link "> <i class="fa-solid fa-heart"></i></a>
176
+ </div>
177
+ </div><!-- 3rd card -->
178
+
179
+
180
+
181
+ <div class="card" id="card-width">
182
+ <img alt="Apple iPhone 12 Pro 6.1"
183
+ src="img/Apple iPhone 12 Pro 6.1 RAM.jpg" width="100%"
184
+ height="240px" img>
185
+
186
+ <div class="card-body">
187
+ <hr>
188
+ <h5 class="card-title">$120.00</h5>
189
+ <h6 class="card-subtitle mb-2 text-muted">Apple iPhone 12 Pro 6.1 RAM</h6>
190
+ <h6 class="card-subtitle mb-2 text-muted">6GB 512GB Unlocked</h6>
191
+
192
+ <a href="#" role="button" class="btn btn-primary card-link py-2 px-4">Add to card</a>
193
+ <a title="Add to cart" href="#" class="btn btn-outline-primary card-link "> <i class="fa-solid fa-heart"></i></a>
194
+ </div>
195
+ </div><!-- 4th card -->
196
+
197
+
198
+
199
+
200
+
201
+ <div class="card" id="card-width">
202
+ <img alt="Apple Watch Series 1 Sport"
203
+ src="img/Apple Watch Series 1 Sport.jpg" width="100%"
204
+ height="240px" img>
205
+
206
+ <div class="card-body">
207
+ <hr>
208
+ <h5 class="card-title">$120.00</h5>
209
+ <h6 class="card-subtitle mb-2 text-muted">Apple Watch Series 1 Sport</h6>
210
+ <h6 class="card-subtitle mb-2 text-muted">Case 38mm Black</h6>
211
+
212
+ <a href="#" role="button" class="btn btn-primary card-link py-2 px-4">Add to card</a>
213
+ <a title="Add to cart" href="#" class="btn btn-outline-primary card-link "> <i class="fa-solid fa-heart"></i></a>
214
+ </div>
215
+ </div><!-- 5th card -->
216
+
217
+
218
+
219
+
220
+ <div class="card" id="card-width">
221
+ <img alt="T-shirts with multiple colors"
222
+ src="img/watch.jpg" width="100%"
223
+ height="240px" img>
224
+
225
+ <div class="card-body">
226
+ <hr>
227
+ <h5 class="card-title">$120.00</h5>
228
+ <h6 class="card-subtitle mb-2 text-muted">T-shirts with multiple colors, for</h6>
229
+ <h6 class="card-subtitle mb-2 text-muted">men and lady</h6>
230
+
231
+ <a href="#" role="button" class="btn btn-primary card-link py-2 px-4">Add to card</a>
232
+ <a title="Add to cart" href="#" class="btn btn-outline-primary card-link "> <i class="fa-solid fa-heart"></i></a>
233
+ </div>
234
+ </div><!-- 6th card -->
235
+
236
+
237
+
238
+
239
+ <div class="card" id="card-width">
240
+ <img alt="Gaming Headset 32db Black"
241
+ src="img/Gaming Headset 32db Black.jpg" width="100%"
242
+ height="240px" img>
243
+
244
+ <div class="card-body">
245
+ <hr>
246
+ <h5 class="card-title">$99.50</h5>
247
+ <h6 class="card-subtitle mb-2 text-muted">Gaming Headset 32db Black</h6>
248
+ <h6 class="card-subtitle mb-2 text-muted">built in mic</h6>
249
+
250
+ <a href="#" role="button" class="btn btn-primary card-link py-2 px-4">Add to card</a>
251
+ <a title="Add to cart" href="#" class="btn btn-outline-primary card-link "> <i class="fa-solid fa-heart"></i></a>
252
+ </div>
253
+ </div><!-- 7th card -->
254
+
255
+
256
+
257
+ <div class="card" id="card-width">
258
+ <img alt="Blue Bag"
259
+ src="img/blue bag.jpg" width="100%"
260
+ height="240px" img>
261
+
262
+ <div class="card-body">
263
+ <hr>
264
+ <h5 class="card-title">$120.00</h5>
265
+ <h6 class="card-subtitle mb-2 text-muted">Blue Bag, for</h6>
266
+ <h6 class="card-subtitle mb-2 text-muted">men and lady</h6>
267
+
268
+ <a href="#" role="button" class="btn btn-primary card-link py-2 px-4">Add to card</a>
269
+ <a title="Add to cart" Fhref="#" class="btn btn-outline-primary card-link "> <i class="fa-solid fa-heart"></i></a>
270
+ </div>
271
+ </div><!-- 8th card -->
272
+
273
+ </div><!--row and container div--->
274
+ </div>
275
+
276
+
277
+
278
+ <!-- New section -->
279
+ <div class="py-5 px-3">
280
+ <div class="container py-5">
281
+ <h3 class="fw-bold text-center text-md-start mb-3">Why choose Us?</h3>
282
+ <div class="row">
283
+
284
+ <div class="col-lg-4 col-md-6 d-flex align-items-center">
285
+
286
+ <div class="bg-white shadow-sm rounded-circle p-3">
287
+ <i class="fa-solid fa-money-bill fs-1 text-primary"></i>
288
+ </div>
289
+
290
+ <div class="ms-3 mt-md-5">
291
+ <h6 class="h6 fw-bold">Reasonable prices</h6>
292
+ <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do
293
+ eiusmor</p>
294
+ </div>
295
+ </div>
296
+
297
+
298
+ <div class="col-lg-4 col-md-6 d-flex align-items-center">
299
+
300
+ <div class="bg-white shadow-sm rounded-circle p-3">
301
+ <i class="fa-solid fa-star fs-1 text-primary"></i>
302
+ </div>
303
+
304
+ <div class="ms-3 mt-md-5">
305
+ <h6 class="h6 fw-bold">
306
+ Best quality</h6>
307
+ <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do
308
+ eiusmor</p>
309
+ </div>
310
+ </div>
311
+
312
+
313
+ <div class=" col-lg-4 col-md-6 d-flex align-items-center">
314
+
315
+ <div class="bg-white shadow-sm rounded-circle p-3">
316
+ <i class="fa-solid fa-plane fs-1 text-primary"></i>
317
+ </div>
318
+ <div class="ms-3 mt-md-5">
319
+ <h6 class="h6 fw-bold">Worldwide shipping</h6>
320
+ <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do
321
+ eiusmor</p>
322
+ </div>
323
+ </div>
324
+
325
+
326
+ <div class="col-lg-4 col-md-6 d-flex align-items-center">
327
+
328
+ <div class="bg-white shadow-sm rounded-circle p-3">
329
+ <i class="fa-solid fa-users fs-1 text-primary"></i>
330
+ </div>
331
+ <div class="ms-3 mt-md-5">
332
+ <h6 class="h6 fw-bold">Customer satisfaction</h6>
333
+ <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do
334
+ eiusmor</p>
335
+ </div>
336
+ </div>
337
+
338
+
339
+ <div class="col-lg-4 col-md-6 d-flex align-items-center">
340
+
341
+ <div class="bg-white shadow-sm rounded-circle p-3">
342
+ <i class="fa-solid fa-thumbs-up fs-1 text-primary"></i>
343
+ </div>
344
+ <div class="ms-3 mt-md-5">
345
+ <h6 class="h6 fw-bold">Happy customers</h6>
346
+ <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do
347
+ eiusmor</p>
348
+ </div>
349
+ </div>
350
+
351
+ <div class="col-lg-4 col-md-6 d-flex align-items-center">
352
+
353
+ <div class="bg-white shadow-sm rounded-circle p-3">
354
+ <i class="fa-solid fa-box-open fs-1 text-primary"></i>
355
+ </div>
356
+ <div class="ms-3 mt-md-5">
357
+ <h6 class="h6 fw-bold">Thousand items</h6>
358
+ <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do
359
+ eiusmor</p>
360
+ </div>
361
+ </div>
362
+
363
+
364
+ </div><!--row idv--->
365
+
366
+ </div>
367
+ </div>
368
+
369
+
370
+ <!--blog post---->
371
+ <div class="pb-5">
372
+ <div class="container py-5">
373
+ <h3 class="h3 fw-bold mb-3 text-center text-md-start mb-3">Blog posts</h3>
374
+ <div class="row mt-md-5">
375
+
376
+ <div class="col-sm-6 col-md-6 col-lg-3">
377
+ <img alt="boxes" class="bg rounded"
378
+ src="img/boxes.jpg" width="250"
379
+ height="200" img>
380
+ <div class="mt-3">
381
+ <a href="#" class="fw-bold">How to promote brands</a>
382
+ <p class="text-muted">When you enter into any new area of science, you almost reach</p>
383
+ </div>
384
+ </div><!--col div -->
385
+
386
+ <div class="col-sm-6 col-md-6 col-lg-3">
387
+ <img alt="shipping" class="bg rounded"
388
+ src="img/ship.jpg" width="250"
389
+ height="200" img>
390
+ <div class="mt-3">
391
+ <a class="fw-bold">How we handle shipping</a>
392
+ <p class="text-muted">When you enter into any new area of science, you almost reach</p>
393
+ </div>
394
+ </div><!--col div -->
395
+
396
+ <div class="col-sm-6 col-md-6 col-lg-3">
397
+ <img alt="fruit" class="bg rounded"
398
+ src="img/fruit.jpg" width="250"
399
+ height="200" img>
400
+ <div class="mt-3">
401
+ <a class="fw-bold">How to promote brands</a>
402
+ <p class="text-muted">When you enter into any new area of science, you almost reach</p>
403
+ </div>
404
+ </div><!--col div -->
405
+
406
+ <div class="col-sm-6 col-md-6 col-lg-3">
407
+ <img alt="a girl with her laptop" class="bg rounded"
408
+ src="img/girl.jpg" width="250"
409
+ height="200" img>
410
+ <div class="mt-3">
411
+ <a class="fw-bold">Success story of sellers</a>
412
+ <p class="text-muted">When you enter into any new area of science, you almost reach</p>
413
+ </div>
414
+ </div><!--col div -->
415
+
416
+ </div><!-- div row -->
417
+
418
+ </div>
419
+ </div>
420
+
421
+
422
+ <!-- Footer -->
423
+
424
+ <div class="py-5">
425
+ <div class="container">
426
+
427
+ <div class="row d-flex">
428
+
429
+ <div class="col-md-12 col-lg-3 mb-3">
430
+
431
+ <img alt="logo"
432
+ src="https://bootstrap-ecommerce.com/bootstrap5-ecommerce/images/logo.svg"></img>
433
+ <p class="mt-4 text-muted">© 2018- 2021 Templatemount.<br>
434
+ All rights reserved.</p>
435
+
436
+ </div>
437
+
438
+ <div class="col-6 col-sm-6 col-md-4 col-lg-2">
439
+
440
+ <h6 class="h6 fw-bold">Store</h6>
441
+
442
+ <a href="#" class="text-decoration-none text-muted">About us</a>
443
+ <a href="#" class="text-decoration-none text-muted">Find stories</a>
444
+ <a href="#" class="text-decoration-none text-muted">Categories</a>
445
+ <a href="#" class="text-decoration-none text-muted">Blogs</a>
446
+ </div>
447
+
448
+ <div class="col-6 col-sm-6 col-md-4 col-lg-2">
449
+ <h6 class="h6 fw-bold">Information</h6>
450
+ <a href="#" class="text-decoration-none text-muted">About us</a>
451
+ <a href="#" class="text-decoration-none text-muted">Find stories</a>
452
+ <a href="#" class="text-decoration-none text-muted">Categories</a>
453
+ <a href="#" class="text-decoration-none text-muted">Blogs</a>
454
+ </div>
455
+
456
+ <div class="col-6 col-sm-6 col-md-4 col-lg-2 mt-3 mt-md-0">
457
+ <h6 class="h6 fw-bold">Support</h6>
458
+ <a href="#" class="text-decoration-none text-muted">About us</a>
459
+ <a href="#" class="text-decoration-none text-muted">Find stories</a>
460
+ <a href="#" class="text-decoration-none text-muted">Categories</a>
461
+ <a href="#" class="text-decoration-none text-muted">Blogs</a>
462
+ </div>
463
+
464
+ <div class="col-lg-3 mt-3 mt-lg-0">
465
+
466
+ <h6 class="h6 fw-bold">Newsletter</h6>
467
+ <p class="text-muted">Stay in touch with latest updates about our products and offers</p>
468
+
469
+ <div class="input-group">
470
+ <input type="text" class="form-control" placeholder="Email" aria-label="Email"
471
+ aria-describedby="basic-addon2">
472
+ <div class="input-group-append">
473
+ <button class="btn btn-secondary" type="button">Join</button>
474
+ </div>
475
+ </div>
476
+ </div>
477
+
478
+
479
+
480
+
481
+
482
+ </div><!--row div-->
483
+
484
+
485
+
486
+ </div>
487
+ </div>
488
+
489
+
490
+
491
+
492
+
493
+
494
+
495
+ </body>
496
+
497
+ </html>
styles.css ADDED
@@ -0,0 +1,77 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ * {
2
+ padding: 0;
3
+ margin: 0;
4
+ font-family: arial;
5
+ scroll-behavior: smooth;
6
+ }
7
+
8
+ /* footer link */
9
+ .col-6>a {
10
+ display: block;
11
+ }
12
+
13
+ /* shop now btn */
14
+
15
+ #shop-btn{
16
+ background-color:#ff8100;
17
+ }
18
+
19
+ /* width of every cards on product section */
20
+ #card-width {
21
+ width: 18rem;
22
+ }
23
+
24
+
25
+ /* categories nav link */
26
+
27
+ .nav-item .nav-link {
28
+ font-size: 20px;
29
+ }
30
+
31
+
32
+
33
+
34
+
35
+
36
+
37
+
38
+ @media (max-width: 768.98px) {
39
+ #input-form {
40
+ width: 35%;
41
+ }
42
+ }
43
+
44
+
45
+
46
+ /* responsive blog post. modify the width of image in each breakpoints */
47
+
48
+ @media (min-width: 768px) {
49
+ .bg {
50
+ width: 350px;
51
+ }
52
+ }
53
+
54
+ @media (min-width: 992px) {
55
+ .bg {
56
+ width: 230px;
57
+
58
+ }
59
+ }
60
+
61
+ @media (min-width: 1200px) {
62
+ .bg {
63
+ width: 250px;
64
+ }
65
+ }
66
+
67
+ @media (max-width: 768px) {
68
+ .bg {
69
+ width: 250px;
70
+ }
71
+ }
72
+
73
+ @media (max-width: 578px) {
74
+ .bg {
75
+ width: 100%;
76
+ }
77
+ }