-
Notifications
You must be signed in to change notification settings - Fork 0
/
recipes.html
128 lines (115 loc) · 4.99 KB
/
recipes.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Recipes</title>
</head>
<body>
<header>
<a href = "#main">Skip to Main Content</a>
<nav>
<ul>
<li><a href = "index.html">Home</a></li>
<li><a href = "pets.html">Pets</a></li>
<li><a href = "recipes.html">Recipes</a></li>
<li><a href = "travel.html">Travel</a></li>
</ul>
</nav>
<h1>Recipes</h1>
</header>
<main id = "main">
<!-- First Recipe -->
<div>
<h2>BLAT Sandwich</h2>
<ul>
<li>Origin: America</li>
<li>Source: Yiran Zheng</li>
<li>Category: Main</li>
</ul>
<img src="images/blat/blat_main.png" width = "400" alt="Image of BLAT sandwich">
<p>A BLAT sandwich is a delicious twist on the classic BLT, featuring crispy bacon, fresh lettuce, ripe tomatoes, and creamy avocado, all sandwiched between slices of bread for a satisfying blend of flavors and textures.</p>
<h3>Recipe Ingredients</h3>
<ul>
<li>Avocado</li>
<li>Bacon</li>
<li>Lettuce</li>
<li>Tomato</li>
<li>Bread</li>
<li>Mayo</li>
</ul>
<h3>Recipe Steps</h3>
<ul>
<li>Toasted bread slice spread with mayo</li>
<li>Put sliced acovado, bacons, sliced tomatoes, lettuce on one spread of bread</li>
<li>Put the other slice of bread at the top</li>
</ul>
<h3>Additional Food Images</h3>
<img src="images/blat/ingredients.jpg" width = "200" alt = "Ingredients of BLAT sandwich">
<img src="images/blat/blat_2.jpg" width = "200" alt = "A BLAT sandwich is placed on a dish.">
<img src="images/blat/blat_3.jpg" width = "200" alt = "A BLAT sandwich is made with multigrain bread.">
</div>
<!-- Second Recipe -->
<div>
<h2>Guacamole</h2>
<ul>
<li>Origin: Mexico</li>
<li>Source: Yiran Zheng</li>
<li>Category: Appetizer</li>
</ul>
<img src="images/guacamole/guacamole.jpg" width = "400" alt="Image of guacamole">
<p>Guacamole is a Mexican dip made from mashed avocados, tomatoes, onions, cilantro, lime juice, and chili pepper, creating a creamy, zesty, and versatile condiment often enjoyed with tortilla chips, tacos, and more.</p>
<h3>Recipe Ingredients</h3>
<ul>
<li>Avocado</li>
<li>Lime</li>
<li>Salt</li>
<li>Onion</li>
<li>Tomato</li>
<li>Cilantro</li>
</ul>
<h3>Recipe Steps</h3>
<ul>
<li>Slice three ripe avocados in half</li>
<li>Scoop them into a mixing bowl</li>
<li>Use a fork to gently mash them</li>
<li>Add the onions, tomatoes, cilantro, jalapeno pepper, garlic, lime juice and salt and stir everything together.</li>
</ul>
<h3>Additional Food Images</h3>
<img src="images/guacamole/avocado_chips.jpg" width = "200" alt = "Chips and guacamole">
<img src="images/guacamole/taco.jpg" width = "200" alt = "Guacamole in taco">
<img src="images/guacamole/guacamole_2.jpg" width = "200" alt = "Guacamole in a bowl">
</div>
<!-- Third Recipe -->
<div>
<h2>Chinese Jiaozi</h2>
<ul>
<li>Origin: China</li>
<li>Source: flour, pork, and cabbage</li>
<li>Category: Main Dish</li>
</ul>
<img src="images/jiaozi/jiaozi.jpeg" width = "400" alt="Image of jiaozi">
<p>Chinese dumplings (Jiaozi, 饺子) are stuffed parcels made of unleavened dough and savory fillings consisting of minced ingredients like meat, egg, tofu, or vegetables. They can be boiled, pan-fried or steamed.</p>
<h3>Recipe Ingredients</h3>
<ul>
<li>Flour</li>
<li>Water</li>
<li>Pork</li>
<li>Cabbage</li>
</ul>
<h3>Recipe Steps</h3>
<ul>
<li>Dough</li>
<li>Filling</li>
<li>Folding</li>
<li>Cooking</li>
<li>Dipping sauces</li>
</ul>
<h3>Additional Food Images</h3>
<img src="images/jiaozi/jiaozi2.jpeg" width = "200" alt = "Three dishes of Jiaozi">
<img src="images/jiaozi/jiaozi3.jpeg" width = "200" alt = "Steamed jiaozi">
<img src="images/jiaozi/jiaozi4.jpeg" width = "200" alt = "Making jiaozi">
</div>
</main>
</body>
</html>