-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
145 lines (144 loc) · 4.41 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
<!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" />
<!-- Tailwindcss and Fonts -->
<link rel="stylesheet" href="stylesheets/tailwind.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Space+Grotesk&display=swap"
rel="stylesheet"
/>
<!-- Custom styling -->
<style>
body {
font-family: "Space Grotesk", sans-serif;
}
.selected {
border: 1px solid purple;
}
</style>
<title>Cart | iazadur</title>
</head>
<body>
<main>
<div class="container mx-auto px-4 md:px-2">
<div class="grid grid-cols-2">
<!-- Image -->
<div class="p-5 border rounded border-gray-200 m-5">
<div class="h-96 w-full">
<img
src="images/1.jpg"
id="art"
class="w-full rounded h-full object-cover"
alt=""
/>
</div>
</div>
<!-- Options -->
<div class="mt-10 max-w-lg mx-auto">
<span id="desc" class="text-lg text-gray-700"
>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum
beatae laboriosam, commodi quis tempore necessitatibus.
Voluptatibus minima aut non doloremque?
</span>
<p class="text-2xl font-medium"><span class="text-2xl font-medium pb-2" id="price">750</span>$</p>
<div class="pt-10">
<button
class="
p-5
border border-gray-200
shadow
hover:shadow-lg
rounded
"
id="free"
>
Free Shipping - 5$
</button>
<button
id="express"
class="
p-5
border border-gray-200
shadow
hover:shadow-lg
rounded
"
>
Express Shipping - 30$
</button>
</div>
<div class="flex justify-between items-center mt-40">
<div
class="
p-5
my-2
border
cursor-pointer
hover:border-purple-600 hover:shadow-lg
rounded
"
id="first"
>
<img src="images/1.jpg" class="w-20 h-20" alt="" />
</div>
<div
class="
p-5
my-2
border
cursor-pointer
hover:border-purple-600
rounded
"
id="second"
>
<img src="images/2.jpg" class="w-20 h-20" alt="" />
</div>
<div
class="
p-5
my-2
border
cursor-pointer
hover:border-purple-600
rounded
"
id="third"
>
<img src="images/3.jpg" class="w-20 h-20" alt="" />
</div>
</div>
<div class="text-2xl py-2">
Shipping Charge: <span id="shipping">0</span>$
</div>
<div class="text-2xl py-2">Total: <span id="total">750</span>$</div>
<button
class="
px-4
py-2
text-xl
border border-purple-200
mt-6
shadow
rounded
hover:shadow-xl
"
>
Buy Now
</button>
</div>
</div>
</div>
</main>
<footer class="my-12 bg-black text-white py-2">
<p class="text-center font-bold">© 2021 <a href="https://www.linkedin.com/in/iamazadur/" target="_blank" class="text-decoration-none text-blue-400" rel="noopener noreferrer">iazadur</a></p>
</footer>
<!-- Custom js -->
<script src="js/main.js"></script>
</body>
</html>