-
Notifications
You must be signed in to change notification settings - Fork 13
/
Copy pathmistakes.html
228 lines (215 loc) · 9.25 KB
/
mistakes.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>
<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>
<style>
a:focus {
outline: none;
}
</style>
</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">
<p class="text-6xl md:text-left text-center">What's for dessert?</p>
<p class="italic text-slate-400">
This page has several mistakes which could impact both its
accessibility and usability! 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"
/>
</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 text-slate-400">
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 text-slate-400">
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>
<div class="flex flex-col my-4">
<p>1. Chocolate</p>
<p>2. Red velvet</p>
<p>3. Banana</p>
<p>4. Vanilla</p>
<p>5. Pistachio</p>
</div>
<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 text-slate-400">
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"
/>
<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 text-right mt-4"
href="https://www.pbs.org/food/recipes/cookie-monster-cupcakes/"
>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"
/>
<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 text-right mt-4"
href="https://www.yummly.com/recipe/The-BEST-Chocolate-Chip-Cookies-2639812?prm-v1"
>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"
/>
<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 text-right mt-4"
href="https://www.notonthehighstreet.com/honeywellbakes/product/teddy-bear-bun-baking-kit?referredBy=search"
>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="./index.html"
class="underline text-fuchsia-800 hover:no-underline"
>index page</a
>
to see the page without the errors!
</footer>
</body>
</html>