-
Notifications
You must be signed in to change notification settings - Fork 13
/
Copy pathindex.html
228 lines (215 loc) · 10.4 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
<title>Learn about desserts</title>
</head>
<body
class="bg-repeat object-contain bg-opacity-20 bg-[url('https://ideasparalaclase.com/wp-content/uploads/2017/08/Black-and-white-Polka-Dot-Seamless-Pattern-Paint-Stain-Abstract-600x600.jpeg')]"
>
<header
class="bg-opacity-95 min-h-1/3 bg-blue-100 flex flex-col justify-evenly items-center flex-col-reverse md:flex-row p-6 gap-6 md:gap-12"
>
<div class="flex flex-col gap-4 md:ml-6">
<h1 class="text-6xl md:text-left text-center">What's for dessert?</h1>
<p class="italic">
Take a fun tour of the history of some sweet treats, and learn a bit
about basic web accessibility guidelines, too! Check out the README in
the
<a
href="https://github.com/novellac/a11ylearn"
class="underline text-fuchsia-800 hover:no-underline"
>Github repository</a
>
to get started.
</p>
</div>
<img
class="object-cover w-1/2 rounded-full"
src="https://upload.wikimedia.org/wikipedia/commons/5/56/Chocolate_cupcakes.jpg"
alt="Several chocolate frosted cupcakes with rainbow sprinkles. One cupcake has a big bite in it."
/>
</header>
<main class="max-w-[60em] px-12 pb-6 mx-auto bg-white">
<section class="m-12">
<h2 class="text-4xl border-b-4 mb-4 border-pink-400">
History of desserts
</h2>
<p class="italic mb-4">
Dessert foods have a rich history, spanning from ancient civilizations
to modern times. From the ancient Egyptians' honey and fruit
concoctions, to the intricate pastries of France and gelato
innovations in Italy, desserts have evolved over time, reflecting
cultural preferences and culinary techniques from around the globe.
</p>
<h3 class="text-2xl mb-4 mt-6 border-b-2 border-pink-200">
Cakes throughout the ages
</h3>
<p>
The history of cakes dates back to ancient Egypt, where
honey-sweetened breads and desserts were baked. As civilizations grew,
so did the variety of cakes across the globe. Asia introduced rice
cakes, while Middle Eastern cultures pioneered the art of
pastry-making, adding fragrant spices and dried fruits. In Africa,
millet and sorghum-based cakes were popular, while Latin America
showcased their unique take on cakes, like the iconic tres leches.
Today, cakes have become a universal indulgence, reflecting the
diverse culinary traditions and flavors of people worldwide.
</p>
<h3 class="text-2xl mb-4 mt-6 border-b-2 border-pink-200">
Cookies since time began
</h3>
<p>
Cookies have a rich and diverse history across the globe. In North
America, Dutch and British immigrants popularized cookies in the 17th
and 18th centuries. Europe witnessed the rise of buttery delights
during the Middle Ages, with the Dutch serving as pioneers of modern
cookie baking techniques. Africa introduced yam and cassava-based
cookies, blending local ingredients with traditional methods. Asia
embraced cookies with variety, from Indian "Nankhatai" to Chinese
almond cookies. South American traditions brought indigenous
ingredients like cocoa, corn, and sweet potatoes into cookie recipes,
while the Middle East contributed flavors like dates and pistachios.
Throughout centuries, cookie recipes traveled the world, evolving into
the beloved treats we enjoy today.
</p>
</section>
<section class="m-12">
<h2 class="text-4xl border-b-4 mb-4 border-pink-400">
Types of desserts
</h2>
<p class="italic mb-4">
Desserts come in various forms and flavors, ranging from sweet to
savory. Whether it's a classic apple pie or a creamy cheesecake,
desserts are irresistible delights that are enjoyed by people of all
ages across the world. Some of the most popular types of desserts
include cakes and cookies.
</p>
<h3 class="text-2xl mb-4 mt-6 border-b-2 border-pink-200">Cakes</h3>
<p>
Cakes have long been a beloved dessert for their ability to bring
people together and create lasting memories. From celebratory
occasions like birthdays and weddings to simple gatherings with
friends, cakes are often at the center of these joyous events. People
love cakes for their wide variety of flavors, textures, and decadent
frostings.
</p>
<p>
In order from most popular to least popular, CherryOnTech did a poll
and found that the following cakes were the most popular:
</p>
<ol class="list-decimal list-inside my-4">
<li>Chocolate</li>
<li>Red velvet</li>
<li>Banana</li>
<li>Vanilla</li>
<li>Pistachio</li>
</ol>
<h3 class="text-2xl mb-4 mt-6 border-b-2 border-pink-200">Cookies</h3>
<p>
On the other hand, cookies hold a special place in the hearts of
people for different reasons. The allure of cookies stems from their
irresistible aroma that fills the air while baking. The comforting and
nostalgic scent brings forth childhood memories, reminding us of
family gatherings and cozy afternoons.
</p>
<p>
Are you hungry for cookies and want them fast? Try some at a few of
these popular grocery outlets:
</p>
<ul class="list-disc list-inside">
<li>
<a
class="underline text-fuchsia-800 hover:no-underline"
href="https://example.com/aldi"
>Aldi</a
>
</li>
<li>
<a
class="underline text-fuchsia-800 hover:no-underline"
href="https://example.com/carrefour"
>Carrefour</a
>
</li>
<li>
<a
class="underline text-fuchsia-800 hover:no-underline"
href="https://example.com/kroger"
>Kroger</a
>
</li>
</ul>
</section>
<section class="m-12">
<h2 class="text-4xl border-b-4 mb-4 border-pink-400">
Gallery of dessert disasters
</h2>
<p class="italic mb-4">
Dessert doesn't always go sweetly! Check out these hilarious mishaps,
and then maybe even try to make some of your own!
</p>
<ul class="flex justify-evenly gap-4 flex-wrap">
<li class="shadow-pink-200 shadow-md rounded-3xl md:basis-1/4 grow">
<img
class="rounded-t-3xl h-40 w-full object-contain bg-black"
src="https://tscpl.org/wp-content/uploads/2015/04/cookiehero.png.png"
alt="Side by side images of an attempt at making Sesame Street's Cookie Monster-themed cupcakes. On the left, a neatly frosted blue cookie monster cupcake has a cookie in his mouth and two white gooly eyes. On the right, melted blue icing drips over the side of a sunken cupcake, with googly eyes sadly staring at the camera."
/>
<div class="p-4 flex flex-col gap-2">
<h3 class="text-2xl">Help, I'm melting!</h3>
<a
class="underline text-fuchsia-800 hover:no-underline"
href="https://www.pbs.org/food/recipes/cookie-monster-cupcakes/"
>Cookie monster cupcake recipe</a
>
</div>
</li>
<li class="shadow-pink-200 shadow-md rounded-3xl md:basis-1/4 grow">
<img
class="rounded-t-3xl h-40 w-full object-contain bg-black"
src="https://www.wayofcats.com/blog/wp-content/uploads/2009/10/ifixedit.jpg"
alt="Staring in concentration, a cat paws at a tray of unbaked chocolate chip cookies. Two speech bubbles appear from the cat's mouth. The first reads, 'This one was missing the kitteh hair, but I have fixed it for you.' The second reads, 'You may bake them now...'"
/>
<div class="p-4 flex flex-col gap-2">
<h3 class="text-2xl">This can't be hygenic</h3>
<a
class="underline text-fuchsia-800 hover:no-underline"
href="https://www.yummly.com/recipe/The-BEST-Chocolate-Chip-Cookies-2639812?prm-v1"
>Chocolate chip cookie recipe</a
>
</div>
</li>
<li class="shadow-pink-200 shadow-md rounded-3xl md:basis-1/4 grow">
<img
class="rounded-t-3xl h-40 w-full object-contain bg-black"
src="https://lvphotoblog.com/wp-content/uploads/2021/01/baking-fail.jpg"
alt="Side by side images of an attempt to make sweet pull-apart buns in the shape of a ring of decorated teddy bears. On the left, two hands present a plate of neatly decorated teddies in a ring, each with neatly frosted faces and paws. On the right, a many bulbous nodes of dough have baked to form a cobblestone-like ring around a metal cone. A few of the bulbs have roughly drawn faces, and most of the look like they are in states of disinterest or shock."
/>
<div class="p-4 flex flex-col gap-2">
<h3 class="text-2xl">Oh, bother.</h3>
<a
class="underline text-fuchsia-800 hover:no-underline"
href="https://www.notonthehighstreet.com/honeywellbakes/product/teddy-bear-bun-baking-kit?referredBy=search"
>Pull-apart sweet buns recipe</a
>
</div>
</li>
</ul>
</section>
</main>
<footer class="p-12 mt-20 bg-blue-100">
This is a learning page, and there will always be parts that can be
corrected, curated, or expanded as we learn more about design, web
development and accessibility. Check out the
<a
href="./mistakes.html"
class="underline text-fuchsia-800 hover:no-underline"
>mistakes page</a
>
to look for errors you can fix!
</footer>
</body>
</html>