-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathrecipes.html
288 lines (279 loc) · 14.5 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Monate Recipes</title>
<!-- Bootstrap CSS-->
<link rel="stylesheet" href="bootstrap-5.2.0-dist/css/bootstrap-grid.min.css">
<link rel="stylesheet" href="bootstrap-5.2.0-dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="index.html">Monate Recipes</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="recipes.html">Recipes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="saveforlater.html">Saved Items</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
<main>
<div class="row">
<h2>Try out these delicious recipes.</h2><br>
</div>
<div class="row slide" id="Recp1">
<div class="row">
<h3>Boerewors Stew with Harissa, Potatoes and Baked Beans</h3>
</div>
<div class="accord" >
<h4>Ingridients <div class="like like-no"></div> </h4>
<div>
<ul>
<li>2 tablespoons olive oil</li>
<li>600g boerewors (uncut) </li>
<li>1 onion, chopped into chunks </li>
<li>1 green bell pepper, chopped into chunks</li>
<li>1 teaspoon bbq spice</li>
<li>1 tsp paprika</li>
<li>1 tsp chili flakes</li>
<li>140g Spicy Harissa</li>
<li>2 medium potatoes cut into chunks</li>
<li>1 can baked beans </li>
<li>1 can baked beans </li>
<li>Salt and pepper to taste</li>
<li>Cooked rice</li>
</ul>
</div>
<h4>Instructions</h4>
<div>
<p>
Add olive oil into a heavy bottom based frying pan, heat and add the wors uncut (long) make it into a pinwheel, and fry on each side until brown on high heat. This will just brown the wors not cook it all the way through, but it should be cooked halfway, about 4 minutes on each side. Remove the wors from the frying pan and set aside on a plate.
</p>
<p>
Reduce the heat to a medium. Than using the same pan add onion and green pepper to the juices and oils accumulated from the wors. Cook until the vegetables are just soft not brown about 3 minutes.
</p>
<p>
Add the bbq spice, paprika in and add the potatoes. Toss and cook for about 3 minutes.
</p>
<p>
Using a sharp knife or a kitchen scissor cut the wors into smaller pieces and add it back into the pan toss and mix it, add Harissa, beans and the water. Season with salt and pepper.
</p>
<p>
Get the pan into a boil and once it starts to boil reduce the heat to low and simmer for 15-20 minutes or until the potatoes are cooked and the sauce has thickened. Serve with cooked rice and enjoy.
</p>
</div>
<h4>Credits</h4>
<div>
<a href="https://www.facebook.com/permalink.php?story_fbid=386517949584459&id=100046787719112" target="_blank">Dinner at matloha's</a>
</div>
<h4>The Dish</h4>
<div>
<img width="200" height="250" src="images/BoereworsStew.jpg" class="img-thumbnail" alt="Boerewors Stew with Harissa, Potatoes and Baked Beans">
</div>
</div>
<div class="row mb-3" style="width: 80%; display: none;">
<label for="inputCommentR1" class="col-sm-2 col-form-label">Comment: </label>
<button type="button" class="btn btn-light btn-show-hide" style="width: 20%; padding: 2px;">Show/Hide</button>
<div class="col-sm-10">
<textarea class="form-control" id="inputCommentR1" ></textarea>
</div>
</div>
</div>
<div class="row slide" id="Recp2">
<div class="row">
<h3>Chicken Mayo</h3>
</div>
<div class="accord" >
<h4>Ingridients <div class="like like-no"></div> </h4>
<div>
<ul>
<li>Paprika</li>
<li>Barbecue spice</li>
<li>Steak & chops spice</li>
<li>3 lettuce leaves</li>
<li>Pepperdews</li>
<li>Mayonnaise</li>
<li>Avocado</li>
</ul>
</div>
<h4>Instructions</h4>
<div>
<p>
Season the chicken breats using paprika, barbecue spice, and steak & chops spice.
</p>
<p>
Heat a bit of olive oil in a pan and cook, browning all sides until the breasts are done. While the chicken is cooking, wash & finely chop 3 lettuce leaves. This is a great way to ensure your loved ones have their greens if they don't like them. Chop the lettuce leaves and transfer to a mixing bowl. Mix well.
</p>
<p>
Finely chop a bit ½tsp of pepperdews & add to the lettuce.
</p>
<p>
Transfer the meat to a chopping board and roughly chop. Add it to the mixing bow and Add +-3l2 heaped tablespoons of mayonnaise.
</p>
<p>
Butter one side of the slices. Butter one side of the slices. Then add the chicken mixture. Add the avo, randomly sliced. Add the avo, randomly sliced. Add the avo, randomly sliced. Then cut as you wish and serve.
</p>
</div>
<h4>Credits</h4>
<div>
<a href="https://www.facebook.com/permalink.php?story_fbid=250435686879175&id=100057382362765" target="_blank">Cooking with Maphindi.</a>
</div>
<h4>The Dish</h4>
<div>
<img width="200" height="250" src="images/ChickenMayo.jpg" class="img-thumbnail" alt="Chicken Mayo">
</div>
</div>
<div class="row mb-3" style="width: 80%; display: none;">
<label for="inputCommentR2" class="col-sm-2 col-form-label">Comment</label>
<button type="button" class="btn btn-light btn-show-hide" style="width: 20%; padding: 2px;">Show/Hide</button>
<div class="col-sm-10">
<textarea class="form-control" id="inputCommentR2" ></textarea>
</div>
</div>
</div>
<div class="row slide" id="Recp3">
<div class="row">
<h3>Roast Beef</h3>
</div>
<div class="accord" >
<h4>Ingridients <div class="like like-no"></div> </h4>
<div>
<ul>
<li>1.5 kg topside of beef</li>
<li>1.5 kg topside of beef</li>
<li>2 carrots</li>
<li>2 sticks celery</li>
<li>1 bulb of garlic</li>
<li>1 bunch of mixed fresh herbs , such as thyme, rosemary, bay, sage</li>
<li>olive oil</li>
</ul>
</div>
<h4>Instructions</h4>
<div>
<p>
Remove the beef from the fridge 30 minutes before you want to cook it, to let it come up to room temperature.
</p>
<p>
Preheat the oven to 240°C/475°F/ gas 9.
</p>
<p>
Wash and roughly chop the vegetables - there's no need to peel them. Break the garlic bulb into cloves, leaving them unpeeled.
</p>
<p>
Pile all the veg, garlic and herbs into the middle of a large roasting tray and drizzle with oil.
</p>
<p>
Drizzle the beef with oil and season well with sea salt and black pepper, then rub all over the meat. Place the beef on top of the vegetables.
</p>
<p>
Place the tray in the oven, then turn the heat down immediately to 200°C/400°F/gas 6 and cook for 1 hour for medium beef. If you prefer it medium-rare, take it out 5 to 10 minutes earlier. For well done, leave it in for another 10 to 15 minutes.
</p>
<p>
If you're doing roast potatoes and veggies, this is the time to crack on with them - get them into the oven for the last 45 minutes of cooking.
</p>
<p>
Baste the beef halfway through cooking and if the veg look dry, add a splash of water to the tray to stop them from burning.
</p>
<p>
When the beef is cooked to your liking, take the tray out of the oven and transfer the beef to a board to rest for 15 minutes or so. Cover it with a layer of tin foil and a tea towel and leave aside while you make your gravy, horseradish sauce and Yorkshire puddings.
</p>
</div>
<h4>Credits</h4>
<div>
<a href="https://www.jamieoliver.com/recipes/beef-recipes/perfect-roast-beef/" target="_blank">Jamie Oliver</a>
</div>
<h4>The Dish</h4>
<div>
<img width="200" height="250" src="images/RoastBeef.png" class="img-thumbnail" alt="Roast Beef"> <br><br>
<iframe width="200" height="250" src="https://www.youtube.com/embed/rApdDLwp_gM" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="row mb-3" style="width: 80%; display: none;">
<label for="inputCommentR3" class="col-sm-2 col-form-label">Comment</label>
<button type="button" class="btn btn-light btn-show-hide" style="width: 20%; padding: 2px;">Show/Hide</button>
<div class="col-sm-10">
<textarea class="form-control" id="inputCommentR3" ></textarea>
</div>
</div>
</div>
<br>
<div class="row">
<h6>Would you like to recive a notification when a new delicious recipe is added? Fill in your details below for a delicious time:</h6>
</div>
<div class="row" style="width: 80%;">
<div class="card card-form">
<div class="card-body">
<form>
<div class="row mb-3">
<label for="inputName3" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputName3">
</div>
</div>
<div class="row mb-3">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3">
</div>
</div>
<div class="row mb-3">
<label for="inputTel3" class="col-sm-2 col-form-label">Contact number</label>
<div class="col-sm-10">
<input type="tel" class="form-control" id="inputTel3">
</div>
</div>
<fieldset class="row mb-3">
<legend class="col-form-label col-sm-2 pt-0">Preferred method of contact</legend>
<div class="col-sm-10">
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
<label class="form-check-label" for="gridRadios1">
Email
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
<label class="form-check-label" for="gridRadios2">
Telephone
</label>
</div>
</div>
</fieldset>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</div>
</div>
<br><br>
</main>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<script src="bootstrap-5.2.0-dist/js/bootstrap.min.js" ></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<!--Including jQuery -->
<script type='text/javascript' src="js/sharedcode.js"></script>
<script type='text/javascript' src="js/recipes.js"></script>
</body>
</html>