-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
175 lines (170 loc) · 10.8 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
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
</head>
<body>
<nav class="navbar">
<svg xmlns="http://www.w3.org/2000/svg" width="53" height="58" viewBox="0 0 53 58" fill="none">
<path d="M17.4265 6.95688C18.1896 6.95688 18.9224 7.08649 19.6041 7.32489C20.9125 4.75799 23.5805 3 26.6592 3C29.7379 3 32.4059 4.75799 33.7143 7.32489C34.396 7.08649 35.1288 6.95688 35.8919 6.95688C39.1214 6.95688 41.8086 9.27815 42.3763 12.3432C45.4413 12.9108 47.7626 15.5981 47.7626 18.8275V23.6637H5.55579C5.46928 23.2376 5.55581 19.2792 5.55581 18.8275C5.55581 15.5981 7.87708 12.9108 10.9421 12.3432C11.5098 9.27815 14.197 6.95688 17.4265 6.95688Z" stroke="#EFEFEF" stroke-width="4.39654" />
<path d="M53 28.7039C53 25.8906 50.8211 23.6074 48.1304 23.6074H5.11112C2.42308 23.6074 0.241516 25.8879 0.241516 28.7039V34.6508C0.241516 45.0038 4.63805 50.7225 12.5518 50.7225V53.5165C12.5518 54.6148 12.9687 55.6682 13.7108 56.4448C14.4528 57.2215 15.4593 57.6578 16.5087 57.6578H36.7328C37.7822 57.6578 38.7887 57.2215 39.5307 56.4448C40.2728 55.6682 40.6897 54.6148 40.6897 53.5165V50.7225C49.0431 50.7225 53 45.694 53 34.6508V28.7039Z" fill="#EFEFEF" />
</svg>
<ul>
<li><a href="#intro">Intro</a></li>
<li><a href="#origins">Origins</a></li>
<li><a href="#recipe">How to</a></li>
<li><a href="#showcase">Showcase</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
<header>
<h1 id="title">Farofa</h1>
<h2 id="subtitle">Celebrating the <br> irresistible <span class="green-bg">brazilian</span> crunch</h2>
<img id="left-stickers" src="./leftstickers.svg" alt="4 stickers at the left side of the page. A cute emoji with one eye closed and his tongue out, a star, a pair of cutlery and a red farofa bowl">
<svg id="down-arrow" xmlns="http://www.w3.org/2000/svg" width="80" height="97" viewBox="0 0 80 97" fill="none">
<rect x="0.98938" y="0.184021" width="78.0212" height="96" rx="35" fill="#F05A2B" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M37.1334 75.6829L17.9364 42.2889L28.6695 36.9224L34.3348 48.2528L40 59.5833L45.6652 48.2528L51.3304 36.9224L62.0636 42.2889L42.8666 75.6829H37.1334Z" fill="#EFEFEF" />
<path d="M34.3348 48.2528L40 59.5833L45.6652 48.2528H34.3348Z" fill="#EFEFEF" />
<path d="M34.3348 48.2528H45.6652L48.1652 20.6851L32.1334 20.6851L34.3348 48.2528Z" fill="#EFEFEF" />
</svg>
<img id="right-stickers" src="./rightstickers.svg" alt=" 3 stickers at the right side of the page. A blue farofa bowl, the Brazilian flag and a heart">
</header>
<main id="main">
<section id="intro">
<h3 class="section-heading">Introduction</h3>
<div class="flex">
<div class="tribute-info">
<p>Welcome to the crunchiest brazilian accompaniment to main meals, in which every bite is a celebration of flavor and texture!</p>
<p>Farofa isn't just a dish; it's a symbol of <strong>tradition, creativity, and community</strong>. From its humble beginnings to its modern-day interpretations, this tasty side has become a vital part of Brazilian culture.</p>
</div>
<a href="https://www.casalcozinha.com.br/receitas/farofa-crocante/" target="_blank" id="img-1">
<img src="./farofa-1.png" alt="Crunchy farofa with onions and decorative leaves">
</a>
</div>
</section>
<section id="origins">
<div id="origins-pt1">
<h3 class="section-heading">Origins</h3>
<div class="flex">
<figure class="captioned-img">
<a href="https://blog.cicloorganico.com.br/so/alimentacao/beneficios-da-mandioca-e-como-consumir-2/" target="_blank">
<img src="./img-2.png" alt="Cassavas in a basket, cut in half, showing the contrast betweent its brown skin and white flesh">
<figcaption id="img-caption">Cassava, the primary ingredient of Farofa</figcaption>
</a>
</figure>
<div class="tribute-info">
<p>Indigenous tribes across Brazil cultivated and consumed cassava, also known as <em>manioc</em> or <em>yuca</em>, long before the arrival of European colonizers. Cassava provided sustenance and versatility, offering a reliable source of carbohydrates in various forms.</p>
<p>Farofa likely emerged as a creative way to make the most of cassava flour, especially in regions where it was abundant. Early versions of farofa were simple mixtures of toasted cassava flour, often seasoned with salt or other available ingredients. Over time, as culinary influences intermingled (as Brazil has always been a incredibly culturally rich country), farofa evolved into a more elaborate and flavorful dish.</p>
<div id="origin-imgs">
<figure class="captioned-img">
<a href="https://stock.adobe.com/br/images/coarse-ground-cassava-flour-a-staple-energetic-food/457875516?asset_id=457875520" target="_blank">
<img src="" alt="Coarse cassava flour accompanied by cassavas cut in half">
<figcaption id="img-caption">Plain coarse cassava flour</figcaption>
</a>
</figure>
<figure class="captioned-img">
<a href="https://stock.adobe.com/br/images/cassava-flour-in-the-bowl/483504501?prev_url=detail" target="_blank">
<img src="" alt="Thin cassava flour accompanied by cassavas cut in half and decorative leaves">
<figcaption id="img-caption">Plain thin cassava flour</figcaption>
</a>
</figure>
</div>
</div>
</div>
</div>
<div id="origins-pt2">
<div class="tribute-info">
<p>During the colonial period, enslaved Africans brought to Brazil contributed to the development of Farofa by introducing new spices, techniques, and ingredients. The addition of ingredients like onions, garlic, bacon, and meats added depth and richness to Farofa, transforming it into a beloved accompaniment to meals across social classes.</p>
<p>Farofa's popularity continued to soar throughout Brazil's history, adapting to regional preferences and cultural influences along the way. In the northeastern states of Brazil, for example, Farofa might include ingredients like dried shrimp or coconut, reflecting the coastal flavors of the region. In the southern states, Farofa might be more savory, featuring ingredients like sausage or beef jerky.</p>
</div>
<a>
<img src="" alt="Brazil's map, with its five different regions highlighted in different colors. A pin is on the northenmost state, with text that reads " i'm from over here!"">
</a>
</div>
</section>
<section id="recipe">
<h3 class="section-heading">My mum's farofa recipe</h3>
<div class="recipe-text">
<div class="recipe-intro">
<p>
This is a recipe that tastes like my childhood. No other sound takes me back to my childhood as hearing my mother crushing the garlic at the kitchen pestle!
</p>
<p>
A pretty standard farofa recipe, but packed with flavor and love!
</p>
</div>
<ul class="recipe-ingredients">
<li>1kg of thin cassava flour</li>
<li>1/2 a cup of vegetable oil</li>
<li>1 pepperoni, chopped into cubes <span class="optional">(optional)</span></li>
<li>2 white onions, finely chopped</li>
<li>1 garlic clove, crushed</li>
<li>1 teaspoon of salt</li>
<li>1/2 teaspoon of colorau</li>
</ul>
<ol class="recipe-steps">
<li>Heat up the oil in a large, deep pot. Medium heat.</li>
<li>When the oil gets hot, add in the onions and sauté them until they’re fried up and see-through.</li>
<li>Add in the garlic and the salt.</li>
<li>As the garlic is sautéed, add in the colorau.</li>
<li>Add in the flour.</li>
<li>Turn down the heat to low.</li>
<li>Stir it non stop for 1-2 minutes. Do not leave your farofa be, as it can burn easily. <strong>Keep stirring!</strong></li>
<li>As you make sure it is well mixed, turn off the heat.</li>
<li><strong>Do not</strong> cover your farofa until it’s completely cooled.</li>
<li>After cooled down, put it in a container for storage. Enjoy with any and every meal!</li>
</ol>
</div>
<img src="" alt="Homemade farofa on a blue bowl with decorative basil leaves on top of it. A tag reads " Me and mum made this together " and a smiley sticker with a speech balloon that reads " Soooo yummy! "">
</section>
</main>
<section id="showcase">
<h3 class="showcase-heading">Feast your eyes on these!</h3>
<div>
<a href="https://prontolight.com/wp-content/uploads/2020/08/AV.-11-Thumb-416x416.png" target="_blank">
<img src="" alt="">
</a>
<a href="https://claudia.abril.com.br/wp-content/uploads/2020/02/farofa-colorida-castelo.jpg?quality=85" target="_blank">
<img src="" alt="">
</a>
<a href="https://receitinhas.com.br/wp-content/uploads/2022/09/5828e8713647bf157099e7ab3b01fb95_farofa-rapida-com-farinha-de-milho-receitas-nestle_1200_600-1024x512.jpg" target="_blank">
<img src="" alt="">
</a>
<a href="https://www.sabornamesa.com.br/media/k2/items/cache/30af13a51cac937c28d30b84e498213a_XL.jpg" target="_blank">
<img src="" alt="">
</a>
<a href="https://img.band.uol.com.br/image/2023/03/16/farofa-de-alho-16152.jpg" target="_blank">
<img src="" alt="">
</a>
<a href="https://i0.wp.com/www.taosimples.com/wp-content/uploads/2022/10/farofadealho-5-jpg.webp?w=1200&ssl=1" target="_blank">
<img src="" alt="">
</a>
</div>
</section>
<footer>
<div class="thanks">
<h1 class="end">Thanks!</h1>
<a id="tribute-link" href="https://pt.wikipedia.org/wiki/Farofa" target="_blank">Learn more about farofa here</a>
</div>
<div id="about">
<img alt="A picture of the page's creator" src="">
<div class="me-text">
<h3>Hey, I'm <span class="green-ul">Kyria!</span></h3>
<p>
This is a personal project made for the completion of the Web Development Bootcamp at Bad Website Club.
</p>
<p>
Currently studying Graphic, UI & UX Design at 17 years old, I aspire to become a FullStack Designer: I'm passionate about creating experiences through design, development, art and code.
</p>
<p>Find me at: </p>
<img src="" alt="Instagram icon">
<img src="" alt="LinkedIn Icon">
<img src="" alt="GitHub icon">
<p>Or at my <a href="" target="_blank">personal website!</a></p>
</div>
</div>
</footer>
</body>
</html>