-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
339 lines (338 loc) · 18.1 KB
/
index.html
File metadata and controls
339 lines (338 loc) · 18.1 KB
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
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link
rel="icon"
type="image/svg+xml"
href="https://www.graza.co/cdn/shop/t/38/assets/favicon-32x32.static_small.png?v=97222300656985941251682500131"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>“Drizzle” & “Sizzle”</title>
</head>
<body class="bg-lightBackground flex justify-center items-center">
<div
class="flex flex-col justify-between lg:grid lg:grid-cols-2 lg:grid-rows-1 h-full w-full"
>
<div class="left-side w-full min-h-[100vh] overflow-x-hidden">
<div class="absolute z-10 mt-4 max-lg:w-full lg:w-1/2">
<div class="flex pl-8 w-full justify-center lg:block">
<svg
class="w-[132px] lg:w-[200px]"
viewBox="0 0 132 36"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M130.33 35.701H122.795C121.718 35.701 121.422 34.5052 122.176 33.4837C122.579 32.8609 123.306 31.7398 123.306 29.9709C123.306 27.6042 121.314 26.0346 117.063 26.0346C112.353 26.0346 110.039 27.5045 110.039 29.9211C110.039 31.6651 111.061 32.537 111.976 33.3841C113.349 34.6547 112.703 35.701 111.68 35.701H69.2418C67.8694 35.701 67.6541 34.4803 68.4345 33.4339C69.2418 32.2879 70.3721 31.5903 70.3721 29.8215C70.3721 27.4048 68.273 26.0346 64.1826 26.0346C59.7692 26.0346 57.2126 27.4547 57.2126 29.8713C57.2126 31.391 57.8316 32.8609 58.5851 33.5585C59.6077 34.6048 59.1502 35.701 58.3698 35.701H46.529C43.8648 35.701 43.1382 33.9073 43.1382 33.0851V27.3052C43.1382 23.4685 40.5279 20.3294 36.4374 20.3294H34.0692V24.3156C34.0692 27.928 34.8497 30.4194 35.4417 32.6616C35.8992 34.3806 34.7689 35.701 32.8852 35.701H22.6321C19.4566 35.701 18.73 33.3343 18.0841 33.3343C17.0615 33.3343 17.3575 36 11.2219 36C4.03664 35.9751 0 30.818 0 19.2581C0 6.55225 4.60177 0 13.0518 0C17.1961 0 18.9991 2.36678 20.0756 2.36678C21.2058 2.36678 21.152 0.099654 23.1972 0.099654C24.4889 0.099654 24.7311 1.6692 24.166 3.5128C23.4394 5.7301 22.8474 7.59862 22.6859 10.9121C22.5783 12.4817 22.2284 13.1045 21.5018 13.1045C18.8915 13.1045 19.349 5.70519 13.2671 5.70519C7.72344 5.70519 5.1669 11.5848 5.1669 19.1336C5.1669 26.0097 7.61579 30.3197 12.2445 30.3197C16.604 30.3197 18.434 27.8035 18.434 25.0131C18.434 22.6962 17.0077 21.5502 13.9668 20.8028C11.5179 20.1799 12.0292 17.1156 14.1282 17.1156H24.3275C25.7538 17.1156 26.4804 20.0554 24.2737 20.8526C22.7397 21.4754 22.0131 23.4187 22.0131 26.2588C22.0131 29.946 23.251 31.8893 25.3501 31.8893C27.2339 31.8893 28.2296 30.9426 28.9831 27.1557C30.0057 22.4221 29.6558 14.4498 29.602 8.89412C29.5482 6.32803 28.8216 3.91142 28.2834 3.16401C27.2069 1.54464 27.7721 0.174394 29.5213 0.174394H37.6753C45.0489 0.174394 49.4085 3.96125 49.4085 10.2145C49.4085 14.0512 46.9596 17.3149 42.9498 18.7848C46.9327 20.5785 48.332 23.2443 48.7895 26.8817C49.247 30.5689 49.9736 31.5156 50.8886 31.5156C51.6959 31.5156 52.261 30.3696 53.1491 26.6325C53.9295 23.4934 57.0512 11.1862 57.5087 8.6699C57.9661 6.15363 57.6163 3.88651 57.105 2.31696C56.7013 0.99654 57.0512 0.124567 58.2891 0.124567H69.5109C70.8296 0.124567 71.0987 1.22076 70.8296 2.26713C70.5605 3.26367 70.2644 4.63391 70.2644 6.8263C70.2644 10.3391 74.5164 24.9882 75.2699 27.5543C76.4001 31.117 77.0191 32.4374 78.0955 32.4374C79.5756 32.4374 79.7371 31.2166 82.2936 26.2339C83.8814 23.1446 88.5908 15.1972 89.9363 13.0547C91.5779 10.3889 92.6543 8.96886 92.6543 7.42422C92.6543 6.15363 91.7393 5.33149 89.4788 5.33149C86.5994 5.33149 85.1731 6.60208 84.5541 7.99723C83.989 9.21799 84.0966 10.3142 84.1505 12.9799C84.2043 14.7737 82.7242 16.3433 81.0826 16.3433C78.9836 16.3433 77.961 14.7737 77.961 13.4533C77.961 10.937 80.356 11.0367 80.356 8.79446C80.356 6.70173 79.7371 4.11073 78.3108 2.16747C77.6918 1.37024 78.2032 0.174394 80.1138 0.174394H99.7857C102.45 0.174394 102.907 2.31695 101.32 4.4346C97.875 9.0436 93.7846 16.1439 89.129 24.0664C87.8911 26.1592 87.4336 27.2554 87.4336 28.7003C87.4336 30.0706 88.6177 31.391 91.9277 31.391C93.8115 31.391 95.2647 30.1702 95.9644 29.1239C96.9332 27.8035 96.8793 25.6111 96.8793 23.3439C96.8793 20.2048 98.4133 18.7349 100.458 18.7349C101.939 18.7349 103.365 19.582 103.365 21.6249C103.365 22.7211 103.15 23.3439 101.939 24.8138C101.077 25.8104 100.755 26.9066 100.862 28.4263C101.131 31.3163 101.723 32.4125 102.719 32.4125C104.253 32.4125 104.468 31.2166 105.222 28.2768C106.406 23.7176 109.258 12.7308 110.039 9.74118C110.819 6.75156 111.115 4.11073 110.146 2.19239C109.581 1.14602 110.146 0.149481 111.331 0.149481H123.064C124.14 0.149481 124.651 1.09619 124.194 2.36678C123.575 4.08581 123.575 6.35294 124.086 9.56678C124.598 12.8305 126.858 21.7495 127.935 26.0595C128.957 30.0955 129.926 31.4657 131.379 32.9855C132.59 34.3308 131.917 35.701 130.33 35.701ZM37.0294 16.7419C41.389 16.7419 43.7841 14.2754 43.7841 10.5882C43.7841 7.39931 41.8465 5.03253 38.5634 5.03253C35.6032 5.03253 34.0961 6.6519 34.0961 9.81592V16.7419H37.0294ZM67.8963 21.9488C65.1244 8.09689 65.0706 6.30311 63.752 6.30311C62.4603 6.30311 62.4334 8.02214 59.5001 21.9488H67.8963ZM121.126 21.9488C118.3 8.04706 118.247 6.25329 116.928 6.25329C115.636 6.25329 115.636 7.97232 112.73 21.9488H121.126Z"
fill="#3c422e"
></path>
</svg>
</div>
</div>
<div class="flex w-full h-full">
<div class="slider-item">
<img
src="https://www.graza.co/cdn/shop/files/graza-pdp-duo-header-3_2x_caa7f912-38b3-4e36-b928-ed6c036abfc7_1440x.jpg?v=1698551972"
alt=""
/>
</div>
<div class="slider-item">
<img
src="https://www.graza.co/cdn/shop/products/graza-pdp-sizzle-header-3_2x_98f6ef49-281f-4095-b8bb-3045391401fe_1440x.jpg?v=1698551972"
alt=""
/>
</div>
<div class="slider-item">
<img
src="https://www.graza.co/cdn/shop/products/graza-pdp-drizzle-header-3_2x_569477b7-acf0-4950-93a4-c263d6893aa4_1440x.jpg?v=1698551972"
alt=""
/>
</div>
<div class="slider-item">
<img
src="https://www.graza.co/cdn/shop/products/graza-home-drizzle-in-use_2x_91b89a03-a404-434d-ae48-fb97e37406ab_1440x.jpg?v=1698551972"
alt=""
/>
</div>
<div class="slider-item">
<img
src="https://www.graza.co/cdn/shop/products/graza-pdp-duo-header-2_2x_7673c33b-ecf4-43d9-b053-4261454c4f3c_1440x.jpg?v=1698551972"
alt=""
/>
</div>
<div class="slider-item">
<img
src="https://www.graza.co/cdn/shop/products/graza-home-sizzle-in-usecopy_2x_47ab5af6-0732-4835-96ba-9853798e5b9d_1440x.jpg?v=1698551972"
alt=""
/>
</div>
</div>
<div
class="slide-button-holder hidden absolute lg:flex lg:flex-col bottom-10 left-6 gap-2"
>
<div class="slider-button">
<img
src="https://www.graza.co/cdn/shop/files/graza-pdp-duo-header-3_2x_caa7f912-38b3-4e36-b928-ed6c036abfc7_60x60.jpg?v=1698551972"
alt=""
/>
</div>
<div class="slider-button">
<img
src="https://www.graza.co/cdn/shop/products/graza-pdp-sizzle-header-3_2x_98f6ef49-281f-4095-b8bb-3045391401fe_60x60.jpg?v=1698551972"
alt=""
/>
</div>
<div class="slider-button">
<img
src="https://www.graza.co/cdn/shop/products/graza-pdp-drizzle-header-3_2x_569477b7-acf0-4950-93a4-c263d6893aa4_60x60.jpg?v=1698551972"
alt=""
/>
</div>
<div class="slider-button">
<img
src="https://www.graza.co/cdn/shop/products/graza-home-drizzle-in-use_2x_91b89a03-a404-434d-ae48-fb97e37406ab_60x60.jpg?v=1698551972"
alt=""
/>
</div>
<div class="slider-button">
<img
src="https://www.graza.co/cdn/shop/products/graza-pdp-duo-header-2_2x_7673c33b-ecf4-43d9-b053-4261454c4f3c_60x60.jpg?v=1698551972"
alt=""
/>
</div>
<div class="slider-button">
<img
src="https://www.graza.co/cdn/shop/products/graza-home-sizzle-in-usecopy_2x_47ab5af6-0732-4835-96ba-9853798e5b9d_120x120.jpg?v=1698551972"
alt=""
/>
</div>
</div>
</div>
<div
class="lg:hidden flex w-full gap-2 justify-center text-xl mt-2 text-black"
>
<div
class="slide-button-small w-2.5 h-2.5 border-black rounded-full border-[1px]"
></div>
<div
class="slide-button-small w-2.5 h-2.5 border-black rounded-full border-[1px]"
></div>
<div
class="slide-button-small w-2.5 h-2.5 border-black rounded-full border-[1px]"
></div>
<div
class="slide-button-small w-2.5 h-2.5 border-black rounded-full border-[1px]"
></div>
<div
class="slide-button-small w-2.5 h-2.5 border-black rounded-full border-[1px]"
></div>
<div
class="slide-button-small w-2.5 h-2.5 border-black rounded-full border-[1px]"
></div>
</div>
<div
class="right-side w-full min-h-[1000px] flex-col items-center bg-lightBackground text-darkGrey flex justify-center py-4"
>
<div
class="flex flex-col basis-0 font-heading max-lg:mt-24 text-4xl md:text-6xl"
>
<h1>“Drizzle” & “Sizzle”</h1>
<h1 class="heading-underline relative">Extra Virgin Olive Oil</h1>
</div>
<div class="font-bodyFont py-2 basis-0">★★★★★ 885 Reviews</div>
<div
class="basis-0 flex flex-col bg-highlight font-bodyFont p-4 rounded-3xl border-black border-[1px] mt-2 w-5/6 xl:w-2/3"
>
<p class="text-lg">Quantity</p>
<div class="grid grid-cols-4 grid-rows-1 gap-2 mt-1">
<div
class="cursor-pointer quantity-button flex flex-col items-center px-1 border-[1px] border-black rounded-xl justify-center"
>
<p class="text-2xl">1</p>
<p>Set</p>
<p class="text-[0.6rem] text-greyText text-center">+10% off</p>
</div>
<div
class="cursor-pointer quantity-button flex flex-col items-center px-1 border-[1px] border-black rounded-xl justify-center"
>
<p class="text-2xl">2</p>
<p>Sets</p>
<p class="text-[0.6rem] text-greyText text-center">
Free Shipping!
</p>
<p class="text-[0.6rem] text-greyText text-center">+14% off</p>
</div>
<div
class="cursor-pointer quantity-button flex flex-col items-center px-1 border-[1px] border-black rounded-xl justify-center"
>
<p class="text-2xl">3</p>
<p>Sets</p>
<p class="text-[0.6rem] text-greyText text-center">
Free Shipping!
</p>
<p class="text-[0.6rem] text-greyText text-center">+15% off</p>
</div>
<div
class="cursor-pointer quantity-button flex flex-col items-center px-1 border-[1px] border-black rounded-xl justify-center"
>
<p class="text-2xl">6</p>
<p>Sets</p>
<p class="text-[0.6rem] text-greyText text-center">
Free Shipping!
</p>
<p class="text-[0.6rem] text-greyText text-center">+17% off</p>
</div>
</div>
<div class="mt-3 py-4 border-dotted border-y-[1px] border-black">
<div
class="flex justify-between check-container cursor-pointer items-center"
>
<div class="flex items-center">
<div
class="checkbox w-5 h-5 border-black border-[1px] rounded-full mr-2"
></div>
<div>One Time Purchase</div>
</div>
<div>
<span class="line-through text-greyText text-sm pr-1">$74</span
><span class="text-sm">$69</span>
</div>
</div>
</div>
<div
class="py-4 flex flex-col gap-2 border-dotted border-b-[1px] border-black"
>
<div
class="flex justify-between check-container cursor-pointer items-center"
>
<div class="flex items-center">
<div
class="checkbox w-5 h-5 border-black border-[1px] rounded-full mr-2"
></div>
<div>Subscribe & Save</div>
</div>
<div>
<span class="line-through text-greyText text-sm pr-1">$74</span
><span class="text-sm">$64.17</span>
</div>
</div>
<div
class="drop-down rounded-full cursor-pointer hover:bg-[#f6e6d9] flex flex-col border-black w-full border-[1px] px-4 py-1"
>
<div>Frequency:Every 1 Month</div>
</div>
</div>
<div class="relative mt-5">
<div
class="cursor-pointer subscribe-button hover:translate-x-0 hover:translate-y-0 translate-x-[-2px] translate-y-[-2px] z-10 relative flex justify-center bg-buttonGreen w-full rounded-full border-[1px] border-black py-1 text-md"
>
Subscribe - $33.30
</div>
<div
class="absolute flex overflow-hidden w-full h-full rounded-full left-0 top-0"
>
<img
class="object-cover w-[200px] h-full"
src="https://www.publicdomainpictures.net/pictures/20000/velka/checkerboard-pattern.jpg"
alt=""
/>
<img
class="object-cover w-[200px] h-full"
src="https://www.publicdomainpictures.net/pictures/20000/velka/checkerboard-pattern.jpg"
alt=""
/>
<img
class="object-cover w-[200px] h-full"
src="https://www.publicdomainpictures.net/pictures/20000/velka/checkerboard-pattern.jpg"
alt=""
/>
<img
class="object-cover w-[200px] h-full"
src="https://www.publicdomainpictures.net/pictures/20000/velka/checkerboard-pattern.jpg"
alt=""
/>
</div>
</div>
<div
class="flex w-full justify-center mt-2 text-sm font-bodyFontLight skip-text"
>
Skip or Cancel Anytime
</div>
</div>
<div class="basis-0 flex flex-col w-5/6 xl:w-2/3 mt-6 font-bodyFont">
<div class="flex w-full uppercase">
<div
class="accordion-button flex-1 py-1 items-center text-center rounded-t-xl border-black border-[1px] text-sm lg:text-lg"
>
Description
</div>
<div
class="accordion-button flex-1 py-1 items-center text-center rounded-t-xl border-black border-[1px] text-sm lg:text-lg"
>
Harvest
</div>
<div
class="accordion-button flex-1 py-1 items-center text-center rounded-t-xl border-black border-[1px] text-sm lg:text-lg"
>
Use Cases
</div>
</div>
<div
class="font-bodyFontLight w-full border-x-[1px] border-b-[1px] p-4 flex flex-col gap-3 border-black rounded-b-xl"
>
<div id="Description" class="accordion-item">
<p><strong>Drizzle: 500ML</strong><br /></p>
<p>
Extra Virgin finishing oil made from olives that are picked
early, when flavor is bold and antioxidants are highest. Made
for eating, never heating.
</p>
<p>
<strong>Sizzle: 750ML<br /></strong>Extra Virgin cooking oil
made from mature, mid-season olives that yield a more mellow
flavor. Use it every day, in every way.<br />
</p>
<p>
*<strong
>Heads up! Multiple sets of Drizzle & Sizzle ship in the
same box! To order individually packaged Gift Sets,</strong
> <span style="text-decoration: underline"
><strong
><a
title="Gift Graza"
href="https://www.graza.co/products/gift-set-drizzle-sizzle"
>CLICK HERE!</a
></strong
></span
><strong> </strong><strong>🎁</strong>
</p>
</div>
<div id="Harvest" class="accordion-item">
<strong>Drizzle:</strong><br />
Harvested in October, before the olives have ripened fully. Picked
by hand because young olives need a firm yank to loosen up.
<br /><br />
<strong>Sizzle:</strong><br />
Harvested in November and December, when the olives are more
mature. They’re pretty laid back by this point, so it only takes a
few shakes to get them off the branch.
</div>
<div id="Use-Case" class="accordion-item">
<strong>Drizzle:</strong><br />
A little Drizzle goes a long way! Use it on and around things like
ice cream, pesto, popcorn, salads, sandwiches or even directly on
your tongue (we won’t tell).
<br /><br />
<strong>Sizzle:</strong><br />
If you would put it in or on top of an oven, use sizzle. Chicken
Cutlets, Sheet Pan Veggies, Fried Rice, or even Chocolate Chip
Cookies! You name it, Sizzle sizzles it.
</div>
</div>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>