-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
195 lines (177 loc) · 8.43 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Product Preview" />
<meta
name="keywords"
content="Frontend Mentor, Product Preview , nehal, Responsive Designs"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./images/favicon-32x32.png"
/>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin />
<link
rel="preload"
as="style"
onload="this.rel='stylesheet'"
href="https://fonts.googleapis.com/css2?family=Fraunces:wght@700&family=Montserrat:wght@500;700&display=swap"
/>
<!-- Linking CSS stylesheet -->
<link rel="stylesheet" href="/src/output.min.css" />
<title>Product Preview</title>
</head>
<body
class="bg-no-repeat bg-cover flex justify-center items-center min-h-screen p-3"
>
<main
class="flex flex-col rounded-b-2xl rounded-t-2xl max-w-[45rem] md:flex-row md:rounded-r-2xl md:rounded-l-2xl"
>
<!-- IMAGE -->
<div
class="image cursor-[url('/assets/images/cursor.svg'),_pointer] blur-[0.1rem] flex rounded-t-2xl md:rounded-tr-none md:rounded-l-2xl overflow-hidden"
>
<picture>
<source
media="(min-width: 48rem)"
srcset="/assets/images/perfume_desk.webp"
/>
<img
class="max-w-[24rem] min-h-[24rem] hover:scale-110 opacity-90 rounded-t-2xl md:rounded-tr-none md:rounded-l-2xl transition-all ease-in-out duration-500 hover:opacity-100"
src="/assets/images/perfume_mob.webp"
alt="Greek God Perfume bottle"
/>
</picture>
</div>
<!-- ABOUT -->
<div
class="about p-clamp rounded-b-2xl bg-[rgba(255, 255, 255, .07)] backdrop-blur-lg md:rounded-b-none md:rounded-r-2xl"
>
<!-- Lazy Loading -->
<div
class="loading__page animate-pulse flex space-x-4 min-w-[16.9rem]"
>
<div class="flex-1 space-y-6 py-1">
<div class="grid grid-cols-2 gap-4">
<div
class="h-2 w-full bg-[var(--loadLine)] rounded col-span-1"
></div>
</div>
<div class="h-2 w-full bg-[var(--loadLine)] rounded"></div>
<div class="space-y-3">
<div class="grid grid-cols-2">
<div
class="h-2 w-full bg-[var(--loadLine)] rounded col-span-1"
></div>
</div>
</div>
<div class="grid gap-6 pb-8 pt-6">
<div
class="h-2 w-full bg-[var(--loadLine)] rounded col-span-1"
></div>
<div
class="h-2 w-full bg-[var(--loadLine)] rounded col-span-1"
></div>
<div
class="h-2 w-full bg-[var(--loadLine)] rounded col-span-1"
></div>
</div>
<div class="grid grid-cols-3 gap-6 pb-[1.36rem]">
<div
class="h-2 w-full bg-[var(--loadLine)] rounded col-span-1"
></div>
<div
class="h-2 w-full bg-[var(--loadLine)] rounded col-span-1"
></div>
</div>
<div class="h-2 w-full bg-[var(--loadLine)] rounded"></div>
</div>
</div>
<!-- Main Content -->
<div
class="main__content hidden transition-[width] ease-in-out duration-1000"
>
<div class="pb-4 inline-flex items-center gap-2">
<p class="sr-only">Perfume Purchase Card</p>
<svg
class="inline-flex"
width="1em"
height="1em"
viewBox="0 0 512 512"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M96 32V128H224V32C224 14.3 209.7 0 192 0H128C110.3 0 96 14.3 96 32ZM96 160C43 160 0 203 0 256V464C0 490.5 21.5 512 48 512H272C298.5 512 320 490.5 320 464V256C320 203 277 160 224 160H96ZM160 256C181.217 256 201.566 264.429 216.569 279.431C231.571 294.434 240 314.783 240 336C240 357.217 231.571 377.566 216.569 392.569C201.566 407.571 181.217 416 160 416C138.783 416 118.434 407.571 103.431 392.569C88.4285 377.566 80 357.217 80 336C80 314.783 88.4285 294.434 103.431 279.431C118.434 264.429 138.783 256 160 256ZM384 48C384 46.6 383 45 381.8 44.4L352 32L339.6 2.2C339 1 337.4 0 336 0C334.6 0 333 1 332.4 2.2L320 32L290.2 44.4C289 45 288 46.6 288 48C288 49.4 289 51 290.2 51.6L320 64L332.4 93.8C333 95 334.6 96 336 96C337.4 96 339 95 339.6 93.8L352 64L381.8 51.6C383 51 384 49.4 384 48ZM460.4 93.8C461 95 462.6 96 464 96C465.4 96 467 95 467.6 93.8L480 64L509.8 51.6C511 51 512 49.4 512 48C512 46.6 511 45 509.8 44.4L480 32L467.6 2.2C467 1 465.4 0 464 0C462.6 0 461 1 460.4 2.2L448 32L418.2 44.4C417 45 416 46.6 416 48C416 49.4 417 51 418.2 51.6L448 64L460.4 93.8ZM467.6 194.2C467 193 465.4 192 464 192C462.6 192 461 193 460.4 194.2L448 224L418.2 236.4C417 237 416 238.6 416 240C416 241.4 417 243 418.2 243.6L448 256L460.4 285.8C461 287 462.6 288 464 288C465.4 288 467 287 467.6 285.8L480 256L509.8 243.6C511 243 512 241.4 512 240C512 238.6 511 237 509.8 236.4L480 224L467.6 194.2ZM448 144C448 142.6 447 141 445.8 140.4L416 128L403.6 98.2C403 97 401.4 96 400 96C398.6 96 397 97 396.4 98.2L384 128L354.2 140.4C353 141 352 142.6 352 144C352 145.4 353 147 354.2 147.6L384 160L396.4 189.8C397 191 398.6 192 400 192C401.4 192 403 191 403.6 189.8L416 160L445.8 147.6C447 147 448 145.4 448 144Z"
fill="var(--lightBrown)"
/>
</svg>
<p
class="inline-flex text-sm tracking-[0.25rem] font-montserrat uppercase text-[var(--lightBrown)]"
>
perfume
</p>
</div>
<h1 class="font-fraunces text-clamp-2 pb-4 text-navy">
Greek God Eau De Parfum
</h1>
<p class="text-base text-[var(--lightBrown)] pb-6">
Keep your body refresh all the day. <br />Try our brand new
<em>Greek God Perfume</em> which is made purely with nature.
</p>
<div class="pricing">
<div class="mrp__perfume flex items-center gap-5 pb-[1.12rem]">
<span
class="discount-mrp text-clamp-2 text-[var(--veryLightBrown)] font-fraunces text-argo-dark-blue bg-reed"
>
$149.99
</span>
<s
class="mrp text-clamp-3 text-[var(--veryLightBrown)] font-montserrat"
>
$169.99
</s>
</div>
<button
type="submit"
class="button h-[40px] bg-gradient-to-r from-red-950 to-orange-900 flex items-center justify-center gap-2 rounded-lg py-2 w-full opacity-80 hover:opacity-100 active:scale-95 transition-all ease-in-out"
>
<span class="sr-only">Button for adding perfume to the cart</span>
<svg width="15" height="16" xmlns="http://www.w3.org/2000/svg">
<path
d="M14.383 10.388a2.397 2.397 0 0 0-1.518-2.222l1.494-5.593a.8.8 0 0 0-.144-.695.8.8 0 0 0-.631-.28H2.637L2.373.591A.8.8 0 0 0 1.598 0H0v1.598h.983l1.982 7.4a.8.8 0 0 0 .799.59h8.222a.8.8 0 0 1 0 1.599H1.598a.8.8 0 1 0 0 1.598h.943a2.397 2.397 0 1 0 4.507 0h1.885a2.397 2.397 0 1 0 4.331-.376 2.397 2.397 0 0 0 1.12-2.021ZM11.26 7.99H4.395L3.068 3.196h9.477L11.26 7.991Zm-6.465 6.392a.8.8 0 1 1 0-1.598.8.8 0 0 1 0 1.598Zm6.393 0a.8.8 0 1 1 0-1.598.8.8 0 0 1 0 1.598Z"
fill="#FFF"
/>
</svg>
<span class="text-white font-semibold">Add to Cart</span>
</button>
</div>
</div>
</div>
</main>
<!-- JS Part -->
<script>
const mainContent = document.querySelector(".main__content"),
loadingPage = document.querySelector(".loading__page"),
image = document.querySelector(".image"),
beep = new Audio("/assets/audio/beep.mp3"),
button = document.querySelector("button");
function visible() {
mainContent.classList.toggle("hidden");
loadingPage.classList.toggle("hidden");
image.classList.remove("blur-[0.1rem]");
}
setTimeout(() => {
visible();
}, "1500");
button.addEventListener("click", () => {
beep.play();
});
</script>
</body>
</html>