-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathshopping.html
74 lines (73 loc) · 3.57 KB
/
shopping.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
<!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>shopping</title>
<link rel="stylesheet" href="./mdb-ui-kit/css/mdb.min.css" />
<link
rel="stylesheet"
href="./fontawesome-free-5.15.4-web/fontawesome-free-5.15.4-web/css/all.min.css"
/>
<link rel="stylesheet" href="./swiper/swiper-bundle.min.css" />
<link rel="stylesheet" href="./css/main.css" />
</head>
<body>
<section class="vh-100 gradient-custom-2">
<div class="container py-5 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-md-10 col-lg-8 col-xl-6">
<div class="card card-stepper" style="border-radius: 16px;">
<div class="card-header p-4">
<div class="d-flex justify-content-between align-items-center">
<div>
<p class="text-muted mb-2"> Order ID <span class="fw-bold text-body">1382</span></p>
<p class="text-muted mb-0"> Place On <span class="fw-bold text-body">29,March 2023,TEHRAN</span> </p>
</div>
<div>
<h6 class="mb-0"><a href="#" class="text-danger">View Details</a> </h6>
</div>
</div>
</div>
<div class="card-body p-4">
<div class="d-flex flex-row mb-4 pb-2">
<div class="flex-fill">
<h5 class="bold">LEGO Hufflepuff™ House Banner </h5>
<p class="text-muted"> Qt: 1 item</p>
<h4 class="mb-3"> $ 299.99 </h4>
<p class="text-muted">Tracking Status on: <span class="text-body">8:30pm, Today</span></p>
</div>
<div>
<img class="align-self-center img-fluid"
src="./images/21339.webp" width="250">
</div>
</div>
<ul id="progressbar-1" class="mx-0 mt-0 mb-5 px-0 pt-0 pb-4 text-warning">
<li class="step0 active " id="step1"><span
style="margin-left: 22px; margin-top: 12px;">PLACED</span></li>
<li class="step0 active text-center" id="step2"><span>SHIPPED</span></li>
<li class="step0 text-muted text-end" id="step3"><span
style="margin-right: 22px;">DELIVERED</span></li>
</ul>
</div>
<div class="card-footer p-4">
<div class="d-flex justify-content-between">
<h5 class="fw-normal mb-0"><a href="#!" class="text-info">Track</a></h5>
<div class="border-start h-100"></div>
<h5 class="fw-normal mb-0 text-d"><a href="#!" class="text-danger"data-mdb-toggle="tooltip" title="Are you sure ?">Cancel</a></h5>
<div class="border-start h-100"></div>
<h5 class="fw-normal mb-0"><a href="#!" class="text-info">Pre-pay</a></h5>
<div class="border-start h-100"></div>
<h5 class="fw-normal mb-0"><a href="#!" class="text-muted"><i class="fas fa-ellipsis-v"></i></a>
</h5>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="./mdb-ui-kit/js/mdb.min.js"></script>
</body>
</html>