forked from ITSchool-Web-Heroines/Proiect-JS
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathlearn.html
More file actions
536 lines (536 loc) · 22.5 KB
/
learn.html
File metadata and controls
536 lines (536 loc) · 22.5 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
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
<!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>LEARN</title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" href="./style-all.scss" />
<link rel="stylesheet" href="./style/style-learn.scss" />
</head>
<body id="top">
<div id="preloader"></div>
<div class="banner-box">
<p class="banner-text">FREE SHIPPING ON ORDERS OVER 50$</p>
<button type="button" class="btn-close">x</button>
</div>
<nav class="navbar">
<a href="./index.html" style="text-decoration: none">
<img
src="./ICON/LW.png"
alt="CAIMAC COFFEE"
class="nav-branding logo"
/>
</a>
<a href="#" class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<ul class="nav-menu">
<li class="nav-item">
<a href="./index.html" class="nav-link">HOME</a>
</li>
<li class="nav-item">
<a href="./learn.html" class="nav-link">LEARN</a>
</li>
<li class="nav-item">
<a href="./shop.html" class="nav-link">SHOP</a>
</li>
<li class="nav-item">
<a href="./contact.html" class="nav-link">CONTACT</a>
</li>
<li class="nav-item">
<div class="counter"></div>
<a href="./cart.html">
<img src="./ICON/SW.png" alt="Shopping Cart" class="shop-logo" />
</a>
</li>
</ul>
</nav>
<main>
<section class="subtitle-box">
<video
class="subtitle-video"
src="IMG/LEARN/video.mp4"
autoplay
loop
muted
playsinline
></video>
</section>
<section class="source-section">
<p class="source-title">
Our selection of coffee beans is the first step in creating the
unmistakable flavor of Caimac Coffee.
</p>
<p class="source-text">
From the best coffee-growing regions in the world, we chose the finest
highland beans. Sometimes referred to as the coffee belt, the
equatorial region, has the ideal growing conditions. From 23 degrees
north to 25 degrees south of the equator, only tropical and
subtropical climates are suitable for the cultivation of coffee. This
region's coffee-growing areas come together to form a mythical "coffee
belt" that stretches around the entire planet.
</p>
<img class="map" src="IMG/LEARN/map.png" alt="COffee Belt Map" />
</section>
<div class="divider-learn">■</div>
<section class="about-section">
<p class="about-title">COMPONENTS OF TASTE</p>
<div class="about-heading-box">
<div class="aroma about-heading active">
<a href="#" class="about-subtitle">Aroma</a>
<img class="about-img" src="ICON/STW.png" alt="Coffee Stain" />
</div>
<div class="body about-heading">
<a href="#" class="about-subtitle">Body</a>
<img class="about-img" src="ICON/STW.png" alt="Coffee Stain" />
</div>
<div class="acidity about-heading">
<a href="#" class="about-subtitle">Acidity</a>
<img class="about-img" src="ICON/STW.png" alt="Coffee Stain" />
</div>
<div class="sweet about-heading">
<a href="#" class="about-subtitle">Sweet</a>
<img class="about-img" src="ICON/STW.png" alt="Coffee Stain" />
</div>
<div class="bitter about-heading">
<a href="#" class="about-subtitle">Bitter</a>
<img class="about-img" src="ICON/STW.png" alt="Coffee Stain" />
</div>
<div class="after about-heading">
<a href="#" class="about-subtitle">After</a>
<img class="about-img" src="ICON/STW.png" alt="Coffee Stain" />
</div>
</div>
<div class="about-heading-textbox">
<div class="about-text active">
<p>
Over 800 different flavors and smells can be found in each coffee
bean. Contrary to how our mouths experience flavor, our nostrils
enable us to distinguish between an incredible range of scents
(bitter, salty, sour, sweet, umami).
</p>
<p>
One of the most frequent mistakes people make while trying to
develop their taste is ignoring the aroma of coffee. Since smell
and taste are closely intertwined, almost all of the complex and
intriguing flavors found in coffee are connected to the scent of
the cup.
</p>
<p>
One of the most difficult, yet most rewarding, steps you can take
to improve your coffee tasting is to take the time to enjoy the
complexities of coffee aroma.
</p>
</div>
<div class="about-text">
<p>
Coffee's body is simple to imagine, but maybe not so simple to
see. The tool you use to evaluate your body is your palate, or
roof of your mouth. And when attempting to depict the body, milk
is a useful analogy.
</p>
<p>
The taste of skim milk is milder than that of whole milk. Coffee
with a heavy body will therefore feel heavier than coffee with a
light body. Variety, roasting, and brewing techniques are
important.
</p>
<p>
A coffee cupper views the coffee's body as a measure of its
intensity in terms of weight, the sense of richness that the
freshly brewed coffee imparts, and its heft. Although this is
often regarded as a good thing, some people find the "grit" or
"oilyness" of some coffees to be unpleasant and really prefer
smooth, filtered coffees.
</p>
</div>
<div class="about-text">
<p>
It only takes three words to explain this frequently misunderstood
coffee attribute. Imagine something that is bright, clear, and
clean. Coffee's acidity is comparable to that of a fine, dry wine.
It is quite gratifying. Without acidity, coffee usually tastes
flat and tasteless.
</p>
<p>
As you may expect, coffees from various growing climates or plant
species will have varying levels of acidity. When you can identify
the snappy, sharp, wine-like undertone that is the hallmark of a
superb coffee. You will find out that there is a high or
well-defined acidity present.
</p>
<p>
Acidity genuinely describes the fruity and tangy characteristics
of coffee. Delicate acidity in coffee is seen as a favorable
attribute and an indicator of great quality. It adds complexity,
brightness, and freshness to the beans.
</p>
</div>
<div class="about-text">
<p>
One of the key criteria used to assess any coffee is sweetness,
which can significantly raise a mediocre cup of coffee to a
terrific one. Sweetness is a moderate, smooth coffee flavor
sensation that is free of any harsh tastes or flavor flaws.
</p>
<p>
This sweet quality is frequently described as a pleasant or fruity
flavor that mostly manifests at the tip of the tongue.
Professionals use the term "sweet" to express the strength of the
coffee's sugary characteristics.
</p>
<p>
Even the most acidic cup of coffee can benefit from the addition
of sweetness, which makes it luscious and pleasant. The sweetness
of the coffee also allows the other elements of the cup to shine
through and creates an easy finish for the taster.
</p>
</div>
<div class="about-text">
<p>
Bitterness is a dominant flavor sensation, sometimes described as
a twinge or aftertaste, that is largely felt on the soft palate in
the back of the tongue and is caused by a mixture of quinine,
caffeine, and other alkaloids.
</p>
<p>
One of the four fundamental tastes, along with tartaric acid,
sugar, sodium chloride, and bitterness (quinine), is tasted in the
back of the mouth. In some cases, bitterness in coffee is desired,
especially in dark roast espresso.
</p>
<p>
Coffee beans of the Robusta variety are often bitterer than
Arabica coffee beans. A well-balanced bitterness in coffee may
increase the fullness of its flavor and produce an appealing
taste.
</p>
</div>
<div class="about-text">
<p>
Just as significant as the first flavor is the coffee's finish or
aftertaste. While the first sip of coffee gives the drinker a
chance to form an initial opinion of the cup and prepares the
mouth for subsequent tastes, the finish is what really sticks with
us since it lingers even after the last sip.
</p>
<p>
With possible undertones of caramel, fruitiness, smokiness,
roastiness, and other flavors, aftertastes might range from
chocolaty to carbony, turpeny to spicy.
</p>
<p>
The perfect cup of coffee should have a crisp, clear finish that
stays faithful to the fundamental tastes generated by its
attributes. A well-balanced coffee is one in which no single
flavor characteristic dominates or overpowers the others.
</p>
</div>
</div>
</section>
<div class="divider-learn">■</div>
<section class="roast-section">
<p class="roast-title">WHICH IS WHICH?</p>
<div class="roast-subtitle-box">
<p class="roast-subtitle">The darker, the espresso.</p>
<p class="roast-subtitle">The shorter, the filter coffee.</p>
</div>
<p class="roast-text">
It is only through roasting that the beans acquire the typical brown
color associated with coffee. Within the first few minutes, fruit
acids are formed, which are increasingly reduced according to the
roasting time. This means that the longer the coffee bean is roasted,
the less acidic the end product. Longer roasting intensifies both the
color and the taste of the beans. Longer roasting of the coffee
results in more intense color and flavor in the beans, giving espresso
its signature bittersweet flavor.
</p>
</section>
<section class="roast-types-box">
<div class="types-text-box">
<div class="type-box active">
<p class="roast-title">Light Roast</p>
<p class="roast-text">
A light roast can be closer to your taste if you don't like really
strong coffee. Compared to other roasts, light roast coffee beans
are roasted for the shortest period of time. White coffee beans
would be the lightest roast. Due to the coffee's lighter brown
color and lack of surface oil, cinnamon roast is occasionally used
to define it. A shorter roasting period also results in a higher
acidity and caffeine concentration, but a mild fragrance. A thin,
moderate cup of coffee results from this, having a delicious and
fragrant flavor.
</p>
</div>
<div class="type-box">
<p class="roast-title">Medium Roast</p>
<p class="roast-text">
Medium brown in color, with a balance of acidity, flavor and
aroma, medium roast coffee has a richer texture than light roast.
It also does not have the oily finish found in darker roasts. With
a medium roast, the nutty, chocolaty flavors of the beans come out
better. Medium roasts are considered to have a balanced flavor.
The acidity and body of a medium roast can vary, but are usually
somewhere in the middle. They have slightly more body than a light
roast and less acidity.
</p>
</div>
<div class="type-box">
<p class="roast-title">Medium Dark Roast</p>
<p class="roast-text">
If you want to upgrade your coffee in terms of body and flavor,
medium-dark roasted coffee beans offer a strong body and rich
aroma with a slightly bittersweet aftertaste. With a medium-dark
roast, you can enjoy flavors like bittersweet dark chocolate and
dark roasted almonds. Medium-dark roast lovers are usually fans of
the French Press, espresso and aeropress brewing methods. If you
use a French press, grind the coffee coarsely so it doesn't become
too bitter from over-extraction.
</p>
</div>
<div class="type-box">
<p class="roast-title">Dark Roast</p>
<p class="roast-text">
Dark roasts are characterized by a particularly strong body and a
heavy mouthfeel, which is preferred by many coffee lovers. The
long roasting time brings out the oil of the bean, which can be
seen in the brew, and creates a strong, sometimes bitter flavor.
Dark roasts have a sweeter flavor because the sugar in the coffee
beans has time to caramelize. The longer roasting process helps
the coffee develop a richer flavor and full body, often resulting
in a buttery finish. They also have the lowest acidity of all
coffee roasts. Dark roasts have the lowest caffeine content
because they are roasted the longest.
</p>
</div>
</div>
<div class="types-img-box">
<img
class="roast-img active"
src="./IMG/LEARN/LR.png"
alt="Coffee Beans"
tabindex="0"
/>
<img
class="roast-img"
src="./IMG/LEARN/MR.png"
alt="Coffee Beans"
tabindex="0"
/>
<img
class="roast-img"
src="./IMG/LEARN/MDR.png"
alt="Coffee Beans"
tabindex="0"
/>
<img
class="roast-img"
src="./IMG/LEARN/DR.png"
alt="Coffee Beans"
tabindex="0"
/>
</div>
</section>
<a href="#game-box" class="divider-learn">■</a>
<section class="game-box" id="game-box">
<p class="roast-title">Don't know what blend to chose?</p>
<p class="game-select">Let's see if we can figure you out.</p>
<div class="blend-game">
<p class="game-select">
Please select which words describe you best:
</p>
<select class="blend-select" id="blend-game">
<option value="search">Make a choice</option>
<option value="antigua">lively and spicy, but subtle</option>
<option value="brazil">unique, generous and plesant</option>
<option value="decaf">sweet and energetic, day and night</option>
<option value="ethiopia">sensational, careful and fruity</option>
<option value="french">elegant, intense and complex</option>
<option value="house">unmatched, vital and memorable</option>
<option value="treat">complex, satisfyng and gratifying</option>
<option value="uganda">fine, effervescent and sweet</option>
<option value="vanilla">warm, pure and deligthful</option>
</select>
<div class="result-box">
<div class="active">
<img
class="game-result search"
src="./ICON/search.png"
alt="Coffee Search"
/>
<div class="game-outcome">
<p>
Life is too short to drink bad coffee. So, orchestrate your
mornings with a tune of coffee made just for you.
</p>
</div>
</div>
<div>
<img
class="game-result antigua"
src="./IMG/SHOP/CLOSEUP/CU-A.png"
alt="Coffee Blend"
/>
<div class="game-outcome">
<p>Your ideal blend is:</p>
<p class="blend-title">antigua blend</p>
<p>It's a match made in coffee!</p>
</div>
</div>
<div>
<img
class="game-result brazil"
src="./IMG/SHOP/CLOSEUP/CU-B.png"
alt="Coffee Blend"
/>
<div class="game-outcome">
<p>Your ideal blend is:</p>
<p class="blend-title">brazil blend</p>
<p>It's a match made in coffee!</p>
</div>
</div>
<div>
<img
class="game-result decaf"
src="./IMG/SHOP/CLOSEUP/CU-D.png"
alt="Coffee Blend"
/>
<div class="game-outcome">
<p>Your ideal blend is:</p>
<p class="blend-title">decaf blend</p>
<p>It's a match made in coffee!</p>
</div>
</div>
<div>
<img
class="game-result ethiopia"
src="./IMG/SHOP/CLOSEUP/CU-E.png"
alt="Coffee Blend"
/>
<div class="game-outcome">
<p>Your ideal blend is:</p>
<p class="blend-title">ethiopia blend</p>
<p>It's a match made in coffee!</p>
</div>
</div>
<div>
<img
class="game-result french"
src="./IMG/SHOP/CLOSEUP/CU-F.png"
alt="Coffee Blend"
/>
<div class="game-outcome">
<p>Your ideal blend is:</p>
<p class="blend-title">french blend</p>
<p>It's a match made in coffee!</p>
</div>
</div>
<div>
<img
class="game-result home"
src="./IMG/SHOP/CLOSEUP/CU-H.png"
alt="Coffee Blend"
/>
<div class="game-outcome">
<p>Your ideal blend is:</p>
<p class="blend-title">house blend</p>
<p>It's a match made in coffee!</p>
</div>
</div>
<div>
<img
class="game-result treat"
src="./IMG/SHOP/CLOSEUP/CU-T.png"
alt="Coffee Blend"
/>
<div class="game-outcome">
<p>Your ideal blend is:</p>
<p class="blend-title">treat blend</p>
<p>It's a match made in coffee!</p>
</div>
</div>
<div>
<img
class="game-result uganda"
src="./IMG/SHOP/CLOSEUP/CU-U.png"
alt="Coffee Blend"
/>
<div class="game-outcome">
<p>Your ideal blend is:</p>
<p class="blend-title">uganda blend</p>
<p>It's a match made in coffee!</p>
</div>
</div>
<div>
<img
class="game-result vanilla"
src="./IMG/SHOP/CLOSEUP/CU-V.png"
alt="Coffee Blend"
/>
<div class="game-outcome">
<p>Your ideal blend is:</p>
<p class="blend-title">vanilla blend</p>
<p>It's a match made in coffee!</p>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="footer-box">
<section class="footer-logo-box">
<img src="./ICON/PLW.png" alt="Caimac Logo" class="footer-PL" />
<img src="./ICON/LW.png" alt="CAIMAC COFFEE" class="footer-WL" />
</section>
<form
name="Newsletter Footer"
class="footer-newsletter"
method="POST"
data-netlify="true"
action="/success/"
>
<label for="newsEmail" class="footer-item">
SIGN UP FOR OUR DELICIOUS NEWSLETTER
</label>
<input
name="Email"
class="input-email"
type="email"
id="newsEmail"
placeholder="GET THE LATEST FROM CAIMAC COFFEE"
required
/>
<button class="content-button btn-news" type="submit">SUBSCRIBE</button>
</form>
<div class="divider one">■</div>
<section class="footer-menu-box">
<a href="./index.html" class="footer-item">HOME</a>
<a href="./learn.html" class="footer-item">LEARN</a>
<a href="./shop.html" class="footer-item">SHOP</a>
<a href="./contact.html" class="footer-item">CONTACT</a>
</section>
<div class="divider two">■</div>
<section class="footer-policy-box">
<a href="#" class="footer-item">PRIVACY POLICY</a>
<a href="#" class="footer-item">TERMS OF SALE</a>
<a href="#" class="footer-item">TERMS OF USE</a>
</section>
<div class="divider three">■</div>
<p class="copyright footer-item">© CAIMAC COFFEE 2022</p>
</footer>
<nav class="back-top empty">
<a class="back-top-btn" href="#top">
<img class="back-top-img" src="./ICON/AW.png" alt="GO UP" />
</a>
</nav>
<script src="./javascript/all.js" type="module"></script>
<script src="./javascript/banner.js" type="module"></script>
<script src="./javascript/learn.js" type="module"></script>
<script src="./javascript/bagItem.js" type="module"></script>
<script src="./javascript/game.js" type="module"></script>
</body>
</html>