-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
125 lines (125 loc) · 12.1 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
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>
<link rel="stylesheet" type="text/css" href="./styles.css" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<title>Personal recipes</title>
</head>
<body>
<script src="script.js"></script>
<section id="home" class="home margin-0">
<div class="display-flex-column-centre background-colour-white">
<h1 class="text-bold text-blue-dark text-size-7rem margin-top-0 padding-1rem"><em>Hungry?</em></h1>
<div class="padding-1rem display-flex-column-centre">
<h2 class="text-blue-dark">Bibimbap</h2>
<p class="height-6rem-width-30rem text-blue-dark text-align-centre">Bibimbap simply translates to “mixed rice with meat and assorted vegetables“. You can make endless variations to this dish depending on your preference and dietary requirements.</p>
</div>
</div>
</section>
<nav class="text-size-28px text-white text-bold">
<a href="#home">Home</a>
<a href="#breakfast">Breakfast</a>
<a href="#lunch">Lunch</a>
<a href="#dinner">Dinner</a>
<a href="#recipe-submission">Add a recipe</a>
</nav>
<section id="breakfast" aria_labelledby="breakfast">
<h1>Breakfast</h1>
<div class="recipe-card-container">
<div class="recipe-box-with-border">
<img class="food-picture" alt="shakshuka" src="assets/shakshuka.png">
<h2 class="title">Shakshuka</h2>
<button id="shakshuka-down-button" class="image-button" onClick="showRecipeDescription('shakshuka')"><img src="assets/icons/arrow-down-secondary-accent.png" alt="Click to view description"></button>
<button id="shakshuka-up-button" class="image-button" onClick="hideRecipeDescription('shakshuka')" style="display:none"><img src="assets/icons/arrow-up-secondary-accent.png" alt="Click to hide description"></button>
<p id="shakshuka" class="recipe-description" style="display:none">Want a breakfast that'll fuel you for the day? These chorizo baked eggs are spicy, warming, and the perfect weekend breakfast.</p>
</div>
<div class="recipe-box-with-border">
<img class="food-picture" alt="beakfast noodles" src="assets/breakfast-noodles.png">
<h2 class="title">Breakfast Noodles</h2>
<button id="breakfast-noodles-down-button" class="image-button" onClick="showRecipeDescription('breakfast-noodles')"><img src="assets/icons/arrow-down-secondary-accent.png" alt="Click to view description"></button>
<button id="breakfast-noodles-up-button" class="image-button" onClick="hideRecipeDescription('breakfast-noodles')" style="display:none"><img src="assets/icons/arrow-up-secondary-accent.png" alt="Click to hide description"></button>
<p id="breakfast-noodles" class="recipe-description" style="display:none">Picture a fry-up on top of a bowl of instant noodles, and you’ll get an idea of what this is all about. A cup of tea is optional, but highly recommended.</p>
</div>
<div class="recipe-box-with-border">
<img class="food-picture" alt="croque madame croissants" src="assets/croque-madame-croissants.png">
<h2 class="title">Croque Madame Croissants</h2>
<button id="croque-madame-croissants-down-button" class="image-button" onClick="showRecipeDescription('croque-madame-croissants')"><img src="assets/icons/arrow-down-secondary-accent.png" alt="Click to view description"></button>
<button id="croque-madame-croissants-up-button" class="image-button" onClick="hideRecipeDescription('croque-madame-croissants')" style="display:none"><img src="assets/icons/arrow-up-secondary-accent.png" alt="Click to hide description"></button>
<p id="croque-madame-croissants" class="recipe-description" style="display:none">The ooziest, cheesiest, most fabulous way to start the day. Cheese and ham and mustardy bechamel all loaded into Pret All-Butter Croissants. A total delight.</p>
</div>
<div class="recipe-box-with-border">
<img class="food-picture" alt="peaches and cream crepes" src="assets/peaches-and-cream-crepes.png">
<h2 class="title">Peaches and Cream Crepes</h2>
<button id="peaches-and-cream-crepes-down-button" class="image-button" onClick="showRecipeDescription('peaches-and-cream-crepes')"><img src="assets/icons/arrow-down-secondary-accent.png" alt="Click to view description"></button>
<button id="peaches-and-cream-crepes-up-button" class="image-button" onClick="hideRecipeDescription('peaches-and-cream-crepes')" style="display:none"><img src="assets/icons/arrow-up-secondary-accent.png" alt="Click to hide description"></button>
<p id="peaches-and-cream-crepes" class="recipe-description" style="display:none">Peaches and cream are one of my favourite dessert combinations. Caramelizing peaches makes them extra sweet and slightly crisp, all smothered in almond cream.</p>
</div>
</div>
</section>
<section id="lunch" aria_labelledby="lunch">
<h1>Lunch</h1>
<div class="recipe-card-container">
<div class="recipe-box-with-border text-white">
<img class="food-picture" alt="Pomegranate Pork Belly With Tomato Ginger Salad" src="assets/pomegranatepork-belly.png">
<h2 class="title">Pomegranate Pork Belly & Tomato Ginger Salad</h2>
<button id="pomegranatepork-belly-down-button" class="image-button" onClick="showRecipeDescription('pomegranatepork-belly')"><img src="assets/icons/arrow-down-secondary-accent.png" alt="Click to view description"></button>
<button id="pomegranatepork-belly-up-button" class="image-button" onClick="hideRecipeDescription('pomegranatepork-belly')" style="display:none"><img src="assets/icons/arrow-up-secondary-accent.png" alt="Click to hide description"></button>
<p id="pomegranatepork-belly" class="recipe-description" style="display:none">A vibrant, juicy, sticky, porky number that's absolutely perfect for a summery lunch. You are going to love it.</p>
</div>
<div class="recipe-box-with-border text-white">
<img class="food-picture" alt="Za'atar Aubergine and Bulgur Wheat" src="assets/zaatar-aubergine.png">
<h2 class="title">Za'atar Aubergine and Bulgur Wheat</h2>
<button id="zaatar-aubergine-down-button" class="image-button" onClick="showRecipeDescription('zaatar-aubergine')"><img src="assets/icons/arrow-down-secondary-accent.png" alt="Click to view description"></button>
<button id="zaatar-aubergine-up-button" class="image-button" onClick="hideRecipeDescription('zaatar-aubergine')" style="display:none"><img src="assets/icons/arrow-up-secondary-accent.png" alt="Click to hide description"></button>
<p id="zaatar-aubergine" class="recipe-description" style="display:none">Juicy aubergine coated in crispy za'atar on a bed of fresh bulgar wheat. This is going to be your new favourite lunch.</p>
</div>
<div class="recipe-box-with-border text-white">
<img class="food-picture" alt="Crispy Chilli And Mint Pork" src="assets/crispy-chilli-mint-pork.png">
<h2 class="title">Crispy Chilli And Mint Pork</h2>
<button id="crispy-chilli-mint-pork-down-button" class="image-button" onClick="showRecipeDescription('crispy-chilli-mint-pork')"><img src="assets/icons/arrow-down-secondary-accent.png" alt="Click to view description"></button>
<button id="crispy-chilli-mint-pork-up-button" class="image-button" onClick="hideRecipeDescription('crispy-chilli-mint-pork')" style="display:none"><img src="assets/icons/arrow-up-secondary-accent.png" alt="Click to hide description"></button>
<p id="crispy-chilli-mint-pork" class="recipe-description" style="display:none">A quick simple lunch, packed with juicy crispy pork and fresh mint. Don’t forget the crispy egg, its what brings this meal to life.</p>
</div>
</div>
</section>
<section id="dinner" aria_labelledby="dinner">
<h1 class="text-white">Dinner</h1>
<div class="recipe-card-container">
<div class="recipe-box-with-border text-white">
<img class="food-picture" alt="Slow-cooked lamb pilau with cucumber raita" src="assets/lamb-pilau.png">
<h2 class="title">Slow-Cooked Lamb Pilau With Raita</h2>
<button id="lamb-pilau-raita-down-button" class="image-button" onClick="showRecipeDescription('lamb-pilau-raita')"><img src="assets/icons/arrow-down-secondary-accent.png" alt="Click to view description"></button>
<button id="lamb-pilau-raita-up-button" class="image-button" onClick="hideRecipeDescription('lamb-pilau-raita')" style="display:none"><img src="assets/icons/arrow-up-secondary-accent.png" alt="Click to hide description"></button>
<p id="lamb-pilau-raita" class="recipe-description" style="display:none">Have a little patience and you'll be sorely rewarded with this fall-apart lamb pilau. An ideal recipe for Ramadan or any time of the year.</p>
</div>
<div class="recipe-box-with-border text-white">
<img class="food-picture" alt="Smoked Aubergine and Nduja Lasagne" src="assets/aubergine-nduja-lasagne.png">
<h2 class="title">Smoked Aubergine & Nduja Lasagne</h2>
<button id="aubergine-nduja-lasagne-down-button" class="image-button" onClick="showRecipeDescription('aubergine-nduja-lasagne')"><img src="assets/icons/arrow-down-secondary-accent.png" alt="Click to view description"></button>
<button id="aubergine-nduja-lasagne-button" class="image-button" onClick="hideRecipeDescription('aubergine-nduja-lasagne')" style="display:none"><img src="assets/icons/arrow-up-secondary-accent.png" alt="Click to hide description"></button>
<p id="aubergine-nduja-lasagne" class="recipe-description" style="display:none">This right here will be the most epic lasagne you've ever made. Layers of 'nduja and aubergine ragù, topped with a cheesy béchamel and sprinkled with Parm.</p>
</div>
<div class="recipe-box-with-border text-white">
<img class="food-picture" alt="Halloumi Peanut Curry" src="assets/halloumi-peanut-curry.png">
<h2 class="title">Halloumi Peanut Curry</h2>
<button id="halloumi-peanut-curry-down-button" class="image-button" onClick="showRecipeDescription('halloumi-peanut-curry')"><img src="assets/icons/arrow-down-secondary-accent.png" alt="Click to view description"></button>
<button id="halloumi-peanut-curry-up-button" class="image-button" onClick="hideRecipeDescription('halloumi-peanut-curry')" style="display:none"><img src="assets/icons/arrow-up-secondary-accent.png" alt="Click to hide description"></button>
<p id="halloumi-peanut-curry" class="recipe-description" style="display:none">Peanut butter and halloumi might not be the first ingredients that come to mind for a curry but this creamy spicy curry is a wonder. Make it for dinner tonight.</p>
</div>
<div class="recipe-box-with-border text-white">
<img class="food-picture" alt="Halloumi Peanut Curry" src="assets/sweet-potato-chickpea-curry.png">
<h2 class="title">Sweet Potato and Chickpea Curry</h2>
<button id="sweet-potato-chickpea-curry-down-button" class="image-button" onClick="showRecipeDescription('sweet-potato-chickpea-curry')"><img src="assets/icons/arrow-down-secondary-accent.png" alt="Click to view description"></button>
<button id="sweet-potato-chickpea-curry-up-button" class="image-button" onClick="hideRecipeDescription('sweet-potato-chickpea-curry')" style="display:none"><img src="assets/icons/arrow-up-secondary-accent.png" alt="Click to hide description"></button>
<p id="sweet-potato-chickpea-curry" class="recipe-description" style="display:none">Riaz Phillips cooked us up a hearty dinner packed with veg and warming spices. An ideal mid-week dinner.</p>
</div>
</div>
</section>
</body>
</html>