-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
565 lines (528 loc) · 36.6 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
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
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<title>Sage and Happiness Recipes</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<header class="main-header">
<h1>Sage and Happiness Recipes</h1>
<p>Eating well in Indiana</p>
<div id="topnav">
<a class="nav" href="#appetizer">Appetizer</a>
<a class="nav" href="#main-course">Main Course</a>
<a class="nav" href="#side-dishes">Side Dishes</a>
<a class="nav" href="#desserts">Desserts</a>
</div>
</header>
<!-- MAIN -->
<main>
<!-- This section will have the Appetizers-->
<section>
<div class="main-layer">
<img class="resize" src="img/black-background-boiled-egg-boiled-eggs-824635.jpg" alt="Egg Halves on Toast" />
<a id="appetizer">
<h1>Appetizers</h1>
<p>The perfect starter to your meal</p>
</a>
<!--Subsection will show/hide the appetizer recipes-->
<button type="button" id="app-button" onclick="appClicker()">See Appetizer Recipes</button>
<div class="sub-section" id="app-showhide">
<!--Recipe 1-->
<article class="recipe">
<div class="img">
<img class="resize" src="img/Nacho_Layer_Holder.jpg" alt="Holder picture for Nacho Layer Salad">
</div>
<div class="description">
<h1>Nacho Layer Dip</h1>
<p>All of your favorite nacho toppings in a dippable form. The perfect appetizer for a pitch-in or cook-out. Vegetarian friendly with the right refried beans.</p>
</div>
<!-- Show/Hide ingredients and directions-->
<button type="button" id="nacho-recipe-button" onclick="nachoClicker()">Show Recipe</button>
<div class="container clearfix" id="nacho-recipe-showhide">
<div class="ingredients col">
<h2>Ingredients</h2>
<ul>
<li>1 (15 ounce) can spicy refried beans</li>
<li>1 cup sour cream</li>
<li>2/3 cup mayonnaise</li>
<li>1 (1 ounce) package taco seasoning mix</li>
<li>8 ounces salsa</li>
<li>2 cups shredded lettuce</li>
<li>1/2 cup diced red onion</li>
<li>2 cups shredded cheddar cheese</li>
<li>1 bunch green onions, chopped</li>
<li>2 cups tomatoes, chopped</li>
<li>3 tablespoons chopped fresh cilantro</li>
<li>Tortilla chips for serving</li>
</ul>
</div>
<div class="directions col">
<h2>Directions</h2>
<p>In a 13 x 9-inch glass serving dish, spread the refried beans. </p>
<p>Mix together the sour cream, mayonnaise and seasoning mix. Spread this on top of the beans.</p>
<p>Put on a layer of the salsa, then the shredded lettuce, then the red onion.</p>
<p>Mix together the shredded cheese, green onions, and chopped tomatoes. Sprinkle this on top.</p>
<p>Garnish with the chopped fresh cilantro.</p>
<p>Cover and chill for up to 12 hours. Serve with tortilla chips.</p>
</div>
</div>
</article>
<!-- Recipe 2 -->
<article class="recipe">
<div class="img">
<img class="resize" src="img/bright-cactuses-close-up-908299.jpg" alt="Cacti and Shrimp Artwork">
</div>
<div class="description">
<h1>Baked Stuffed Shrimp</h1>
<p>This recipe comes from my best friend's childhood home in Rhode Island. </p>
</div>
<!-- Show/Hide ingredients and directions-->
<button type="button" id="stuffed-shrimp-recipe-button" onclick="stuffedShrimpClicker()">Show Recipe</button>
<div class="container clearfix" id="stuffed-shrimp-recipe-showhide">
<div class="ingredients col">
<h2>Ingredients</h2>
<ul>
<li>1 sleeve Ritz crackers</li>
<li>1 can crab meat</li>
<li>2 teaspoon paprika</li>
<li>2 teaspoon garlic powder</li>
<li>2 teaspoon onion powder</li>
<li>2 teaspoon Italian seasoning</li>
<li>Mayonnaise</li>
<li>1 pound jumbo shrimp, tails on</li>
</ul>
</div>
<div class="directions col">
<h2>Directions</h2>
<p>Crush up crackers and pour into a medium bowl. Stir in spices, and mix thoroughly.</p>
<p>Open crab meat, and pour juices over cracker crumbs. Pick though meat, discarding any cartilage. Add meat to bowl.</p>
<p>Add mayo one spoonful at a time, until mixture just sticks together. Taste, and adjust seasoning as needed.</p>
<p>Line cookie sheet with aluminum foil.</p>
<p>Butterfly shrimp and place cut-side down on cookie sheet.</p>
<p>Top with ~1 tablespoon of crab mixture, and gently press tail into top of crab. Repeat with remaining shrimp.</p>
<p>Bake in 350 degree oven for 10 minutes, or until shrimp is cooked.</p>
</div>
</div>
</article>
<!--Recipe 3-->
<article class="recipe">
<div class="img">
<img class="resize" src="img/bulb-onion-close-up-food-47051.jpg" alt="Pile of Red Onions">
</div>
<div class="description">
<h1>Carmelized Red Onion and Goat Cheese Crostini</h1>
<p>Crusty bread, creamy cheese, melt-in-your-mouth caramelized onion. What's not to love?</p>
</div>
<!-- Show/Hide ingredients and directions-->
<button type="button" id="crostini-recipe-button" onclick="crostiniClicker()">Show Recipe</button>
<div class="container clearfix" id="crostini-recipe-showhide">
<div class="ingredients col">
<h2>Ingredients</h2>
<ul>
<li>4 tablespoons olive oil, divided</li>
<li>1 long loaf French bread, sliced into rounds</li>
<li>1 medium red onion, thinly sliced</li>
<li>1 (5 ounce) log spreadable goat cheese</li>
<li>2 tablespoons Balsamic vinegar</li>
<li>Salt and Pepper to taste</li>
<li>Fresh thyme sprigs for garnish</li>
</ul>
</div>
<div class="directions col">
<h2>Directions</h2>
<p>Heat 2 tablespoons olive oil over medium heat in a large skillet. Add red onion and sprinkle with salt and pepper.
Saute, stirring frequently, until caramelized. Be patient, as this can take a half hour. Add Balsamic vinegar,
and cook an additiona 5 minutes.</p>
<p>Preheat oven to 350 degrees. Place bread slices on a greased baking sheet, and brush both sides lightly with olive
oil. Bake for 15-20 minutes, turning halfway through the cooking time.</p>
<p>Let the crostinis cool for a few minutes, and then spread each one with a thin layer of goat cheese. Top with a
little dollop of the caramelized onion, and garnish with the fresh thyme if desired.</p>
</div>
</div>
</article>
</div>
</div>
</section>
<!-- This section will have the Main Courses-->
<section>
<div class="main-layer">
<img class="resize" src="img/dinner-dish-fish-36768.jpg" alt="Fish on a White Plate" />
<a id="main-course">
<h1>Main Courses</h1>
<p>The stars of the show</p>
</a>
<!--Subsection will show/hide the main course recipes-->
<button type="button" id="main-course-button" onclick="mainCourseClicker()">See Main Course Recipes</button>
<div class="sub-section" id="main-course-showhide">
<!--Recipe 4-->
<article class="recipe">
<div class="img">
<img class="resize" src="img/puppy-with-skateboard.jpg" alt="Puppy with Skateboard alt">
</div>
<div class="description">
<h1>Pork Loin with Marsala Sauce</h1>
<p>Tender roast pork with a Marsala cream sauce.</p>
</div>
<!-- Show/Hide ingredients and directions-->
<button type="button" id="pork-marsala-recipe-button" onclick="porkMarsalaClicker()">Show Recipe</button>
<div class="container clearfix" id="pork-marsala-recipe-showhide">
<div class="ingredients col">
<h2>Ingredients</h2>
<ul>
<li>4 pound pork loin</li>
<li>5 tablespoons Dijon mustard, divided</li>
<li>1 tsp dried rosemary</li>
<li>1 tablespoons vegetable oil</li>
<li>2 tablespoons butter</li>
<li>2 shallots, minced</li>
<li>1 cup Marsala wine</li>
<li>1 cup heavy cream</li>
</ul>
</div>
<div class="directions col">
<h2>Directions</h2>
<p>Preheat oven to 450 degrees. In an oven-safe pan on the stove, heat oil over medium-high heat.</p>
<p>Rub pork with 4 tablespoons mustard, and sprinkle with rosemary. Brown pork in pan, 5 minutes per side.
Slide pan into the oven, and roast for 10 minutes. Reduce heat to 350 degrees and continue cooking for
60 to 80 minutes, or until the internal temperature reaches 150 degrees. Let rest for 15 minutes before carving.</p>
<p>Meanwhile, melt butter in a saucepan over medium heat. Add shallots and cook until lightly brown, stirring often.
Add remaining tablespoon mustard, Marsala wine, and heavy cream. Cook, stirring often, until volume has reduced by half.</p>
<p>Slice pork, and serve with sauce.</p>
</div>
</div>
</article>
<!-- Recipe B -->
<article class="recipe">
<div class="img">
<img class="resize" src="img/aquatic-close-up-crab-248455.jpg" alt="Close up of aquatic creature alt">
</div>
<div class="description">
<h1>Thai Coconut Shrimp Curry</h1>
<p>Shrimp in a peanut coconut sauce.</p>
</div>
<!-- Show/Hide ingredients and directions-->
<button type="button" id="thai-coconut-shrimp-recipe-button" onclick="thaiCoconutShrimpClicker()">Show Recipe</button>
<div class="container clearfix" id="thai-coconut-shrimp-recipe-showhide">
<div class="ingredients col">
<h2>Ingredients</h2>
<ul>
<li>1 pound shrimp, peeled and deveined</li>
<li>4 tablespoons oil, divided</li>
<li>2 cloves garlic, minced</li>
<li>1/4 teaspoon salt</li>
<li>1/2 teaspoon red pepper flakes</li>
<li>1 onion, peeled and sliced thinly pole to pole</li>
<li>2 red or yellow bell peppers, thinly sliced</li>
<li>1 (14 oz) can coconut milk</li>
<li>4 tablespoons soy sauce</li>
<li>1/4 cup peanut butter</li>
<li>2 tablespoons lime juice</li>
<li>1 tablespoon brown sugar</li>
<li>2 teaspoons ground ginger</li>
<li>2 teaspoons dried basil</li>
<li>Cooked rice to serve</li>
</ul>
</div>
<div class="directions col">
<h2>Directions</h2>
<p>Place the shrimp in a bowl with 1 tablespoon of the oil, garlic, kosher salt and red chili flakes.
Toss to coat and let marinade for 10 minutes.</p>
<p>Heat a 12-inch skillet over medium high heat with 1 tablespoon of oil.
Add the onion and peppers and cook until softened, about 5 minutes. Transfer the peppers and onion to a bowl. </p>
<p>Add 1 tablespoon of oil and cook half of the shrimp for 2 minutes, then flip and cook for another 2 minutes
or until opaque. Transfer the shrimp to a plate. Add the remaining tablespoon of oil and cook the remaining
shrimp then add to the other shrimp.</p>
<p>In another bowl or 4 cup measuring cup mix the coconut milk, soy sauce, peanut butter, lime juice, brown sugar
and ground ginger and stir well. Transfer the cooked onion and peppers to the skillet and pour the coconut milk
mixture of the peppers. Bring to a boil then reduce to simmer and cook until reduced by half, about 5 minutes.
Add the shrimp to the skillet with the basil and toss to coat. </p>
<p>Serve over rice.</p>
</div>
</div>
</article>
<!--Recipe 6-->
<article class="recipe">
<div class="img">
<img class="resize" src="img/roast-chicken.jpg" alt="Roast Chicken alt">
</div>
<div class="description">
<h1>Savory Roast Chicken with Sauerkraut</h1>
<p>Stuffing the chicken cavity with sauerkraut leaves the chicken very moist.</p>
</div>
<!-- Show/Hide ingredients and directions-->
<button type="button" id="savory-chicken-recipe-button" onclick="savoryChickenClicker()">Show Recipe</button>
<div class="container clearfix" id="savory-chicken-recipe-showhide">
<div class="ingredients col">
<h2>Ingredients</h2>
<ul>
<li>4-5 pound chicken</li>
<li>2 teaspoon paprika</li>
<li>1 teaspoon salt</li>
<li>1 teaspoon cayenne pepper</li>
<li>1 teaspoon onion powder</li>
<li>1 teaspoon pepper</li>
<li>1 teaspoon thyme</li>
<li>1 can sourkraut</li>
</ul>
</div>
<div class="directions col">
<h2>Directions</h2>
<p>Preheat oven to 350 degrees.</p>
<p>In a small bowl, combine all the spices.</p>
<p>Rub the outside of the chicken with olive oil. Take sourkraut and stuff the chicken cavity.
Sprinkle the spice mixture over all parts of the chicken.</p>
<p>Place the chicken breast-side down in the pan, and cook for 20 minutes per pound,
until interior temperature reaches 155 degrees.</p>
</div>
</div>
</article>
</div>
</div>
</section>
<!-- This section will have the Side Dishes-->
<section>
<div class="main-layer">
<img class="resize" src="img/agriculture-basket-close-up-219794.jpg" alt="A basket of vegetables" />
<a id="side-dishes">
<h1>Side Dishes</h1>
<p>Eating your vegetables can be fun</p>
</a>
<!--Subsection will show/hide the side dishes recipes-->
<button type="button" id="side-dishes-button" onclick="sideDishesClicker()">See Side Dishes Recipes</button>
<div class="sub-section" id="side-dishes-showhide">
<!--Recipe 7-->
<article class="recipe">
<div class="img">
<img class="resize" src="img/cucumbers-food-gherkins-8694.jpg" alt="Three cucumbers alt">
</div>
<div class="description">
<h1>Indian Cucumber Salad</h1>
<p>This fresh tasting salad is excellent with curries.</p>
</div>
<!-- Show/Hide ingredients and directions-->
<button type="button" id="cucumber-salad-recipe-button" onclick="cucumberSaladClicker()">Show Recipe</button>
<div class="container clearfix" id="cucumber-salad-recipe-showhide">
<div class="ingredients col">
<h2>Ingredients</h2>
<ul>
<li>1/2 red onion, finely chopped</li>
<li>2 pinches salt</li>
<li>1 cucumber, finely chopped</li>
<li>juice from 1 lime</li>
<li>2 tsp finely chopped cilantro</li>
</ul>
</div>
<div class="directions col">
<h2>Directions</h2>
<p>Place red onion in a non-reactive bowl and toss with the salt. Allow to sit 5 minutes.
Rinse well and drain completely.</p>
<p>Add the cucumber, lime juice, cilantro. Stir to combine. Taste and adjust seasonings.</p>
</div>
</div>
</article>
<!-- Recipe 8 -->
<article class="recipe">
<div class="img">
<img class="resize" src="img/asparagus-cooking-food-545029.jpg" alt="Spears of Asparagus alt">
</div>
<div class="description">
<h1>Asparagus with Lemon and Goat Cheese</h1>
<p>The lemon compliments the ceamy goat cheese in this fresh spring salad. </p>
</div>
<!-- Show/Hide ingredients and directions-->
<button type="button" id="asparagus-lemon-recipe-button" onclick="asparagusLemonRecipeClicker()">Show Recipe</button>
<div class="container clearfix" id="asparagus-lemon-recipe-showhide">
<div class="ingredients col">
<h2>Ingredients</h2>
<ul>
<li>1 pound asparagus spears, trimmed</li>
<li>1 1/2 cup cherry tomatoes, halved</li>
<li>2 tablespoons finely chopped chives</li>
<li>2 tablespoons fresh lemon juice</li>
<li>2 teaspoons olive oil</li>
<li>1/2 teaspoon freshly ground black pepper</li>
<li>1/2 teaspoon Dijon mustard</li>
<li>1/4 teaspoon salt</li>
<li>2 ounces creamy goat cheese</li>
</ul>
</div>
<div class="directions col">
<h2>Directions</h2>
<p>Preheat oven to 350 degrees. Line a cookie sheet with aluminum foil.</p>
<p>Drizzle olive oil over asparagus spears, and roast for 18 minutes. </p>
<p>Remove from heat, and cut into one and half inch pieces. Combine asparagus and
tomatoes in a medium bowl.</p>
<p>Combine chives and next 5 ingredients (through salt), stirring with a
whisk. Drizzle over the asparagus mixture, tossing gently to coat.
Top with goat cheese.</p>
</div>
</div>
</article>
<!--Recipe 9-->
<article class="recipe">
<div class="img">
<img class="resize" src="img/agriculture-carrots-close-up-143133.jpg" alt="Bunch of carrots alt">
</div>
<div class="description">
<h1>Grilled Carrots marinated in Balsamic Vinegar</h1>
<p>These savory-sweet carrots will convert even the most ardent carrot haters.</p>
</div>
<!-- Show/Hide ingredients and directions-->
<button type="button" id="grilled-carrot-recipe-button" onclick="grilledCarrotRecipeClicker()">Show Recipe</button>
<div class="container clearfix" id="grilled-carrot-recipe-showhide">
<div class="ingredients col">
<h2>Ingredients</h2>
<ul>
<li>1 pound carrots, peeled and cut in half length-wise</li>
<li>3/4 cup Balsamic vinegar</li>
<li>1 teaspoon dried thyme</li>
<li>1/2 teaspoon dried red pepper flakes</li>
</ul>
</div>
<div class="directions col">
<h2>Directions</h2>
<p>In a ziplock bag, combine all ingredients. Zip and toss bag to coat carrots.
Marinade for at least 30 minutes, turning bag occasionally to
make sure all carrots are coated.</p>
<p>Preheat grill to high heat. Remove the carrots from the marinade and place on a grill pan. Grill until crisp-tender, about 6-10 minutes. </p>
</div>
</div>
</article>
</div>
</div>
</section>
<!-- This section will have the Desserts-->
<section>
<div class="main-layer">
<img class="resize" src="img/berries-blackberries-close-up-434295.jpg" alt="Blackberries on top of a smoothie" />
<a id="desserts">
<h1>Desserts</h1>
<p>What you are really craving</p>
</a>
<!--Subsection will show/hide the dessert recipes-->
<button type="button" id="dessert-button" onclick="dessertClicker()">See Dessert Recipes</button>
<div class="sub-section" id="dessert-showhide">
<!--Recipe X-->
<article class="recipe">
<div class="img">
<img class="resize" src="img/autumn-decoration-fall-511448.jpg" alt="Pumpkin in grass with autumn leaf alt">
</div>
<div class="description">
<h1>Pumpkin Spice Cupcakes</h1>
<p>You can almost taste autumn while eating these moist cupcakes.</p>
</div>
<!-- Show/Hide ingredients and directions-->
<button type="button" id="pumpkin-spice-recipe-button" onclick="pumpkinSpiceRecipeClicker()">Show Recipe</button>
<div class="container clearfix" id="pumpkin-spice-recipe-showhide">
<div class="ingredients col">
<h2>Ingredients</h2>
<ul>
<li>1/2 cup butter, softened</li>
<li>2 eggs</li>
<li>1 cup sugar</li>
<li>1 teaspoon vanilla extract</li>
<li>1 1/2 cup flour</li>
<li>1 teaspoon baking powder</li>
<li>1/4 teaspoon baking soda</li>
<li>1/2 teaspoon salt</li>
<li>2 teaspoon pumpkin pie spice</li>
<li>3/4 cup pumpkin puree</li>
<li>1/2 cup cinnamon baking chips</li>
</ul>
</div>
<div class="directions col">
<h2>Directions</h2>
<p>Preheat oven to 350. Line a muffin tin with 12 paper liners. Set pan aside.</p>
<p>In the bowl of an electric mixer, cream the butter and sugar until light and fluffy. Add the eggs one at a time,
scraping down the sides and beating well after each addition. Beat in the vanilla extract.</p>
<p>In a separate bowl, whisk together the flour, baking powder, salt and pumpkin pie spices.
With the mixer on low speed, alternately add the flour mixture and pumpkin puree, in three additions, beginning and ending with the flour mixture. </p>
<p>With a spatula, mix in the chopped cinnamon chips. Scrape down the sides of the bowl and mix again. </p>
<p>Evenly fill the muffin cups with the batter and bake for about 18-20 minutes or until a toothpick inserted in the center comes out clean.
Remove from the oven and allow to cool in the pan for 5 minutes. Transfer cupcakes to a wire rack and allow to cool completely.</p>
<p>Frost with Cinnamon Buttercream frosting.</p>
</div>
</div>
</article>
<!-- Recipe Y -->
<article class="recipe">
<div class="img">
<img class="resize" src="img/baked-baking-beautiful-306070.jpg" alt="Cupcakes with piped frosting alt">
</div>
<div class="description">
<h1>Cinnamon Buttercream Frosting</h1>
<p>The perfect frosting for Pumpkin Spice Cupcakes</p>
</div>
<!-- Show/Hide ingredients and directions-->
<button type="button" id="cinnamon-frosting-recipe-button" onclick="cinnamonFrostingRecipeClicker()">Show Recipe</button>
<div class="container clearfix" id="cinnamon-frosting-recipe-showhide">
<div class="ingredients col">
<h2>Ingredients</h2>
<ul>
<li>1/2 stick unsalted butter, softened</li>
<li>2 tablespoons ground cinnamon</li>
<li>1/8 teaspoon salt</li>
<li>1/8 teaspoon pure vanilla extract</li>
<li>4 tablespoons milk</li>
<li>1 1/2 cups confectioner's sugar</li>
</ul>
</div>
<div class="directions col">
<h2>Directions</h2>
<p>In a mixing bowl, beat butter until smooth. Add cinnamon, salt, vanilla, and 2 tablespoons milk. Beat to combine.</p>
<p>Add 1/2 cup confectioner's sugar, and beat on low, being careful not to let sugar go everywhere. When combined, add remaining sugar in 2 batches, mixing well in between.</p>
<p>Add additional milk as needed to form a smooth frosting.</p>
</div>
</div>
</article>
<!--Recipe Z-->
<article class="recipe">
<div class="img">
<img class="resize" src="img/blur-brown-brownie-683499.jpg" alt="Chocolate brownie topped with icecream alt">
</div>
<div class="description">
<h1>Grannie Lynott's World Famous Brownies</h1>
<p>This brownie recipe gained international fame when my uncle took them to friends in England.</p>
</div>
<!-- Show/Hide ingredients and directions-->
<button type="button" id="brownies-recipe-button" onclick="browniesRecipeClicker()">Show Recipe</button>
<div class="container clearfix" id="brownies-recipe-showhide">
<div class="ingredients col">
<h2>Ingredients</h2>
<ul>
<li>1 cup margarine, softened</li>
<li>4 squares bitter chocolate</li>
<li>2 cups sugar</li>
<li>4 well-beaten eggs</li>
<li>1 1/2 cup flour</li>
<li>1/2 teaspoon salt</li>
<li>1 teaspoon vanilla</li>
<li>1 cup nuts (optional)</li>
</ul>
</div>
<div class="directions col">
<h2>Directions</h2>
<p>Over low heat, melt margarine, sugar, and chocolate in a double boiler. Stir well until completely melted and dissolved.</p>
<p>Remove from heat. Working quickly, stir in vanilla and eggs. Add flour and salt, and nuts if desired.</p>
<p>Bake in 9" by 13" metal pan at 400 degrees, or glass pan at 375 degrees for 17-20 minutes, or until a toothpick comes out clean.</p>
</div>
</div>
</article>
</div>
</div>
</section>
</main>
<!-- FOOTER -->
<footer >
<div id="bottomnav">
<a class="b-nav" href="#appetizer">Appetizer</a>
<a class="b-nav" href="#main-course">Main Course</a>
<a class="b-nav" href="#side-dishes">Side Dishes</a>
<a class="b-nav" href="#desserts">Desserts</a>
</div>
</footer>
<script src="js/script.js"></script>
</body>
</html>