-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcheesesauce.html
249 lines (221 loc) · 8.08 KB
/
cheesesauce.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="description"
content="My delicious & simple cheese sauce is quick and easy to make and can be used in a variety
of recipes"
/>
<!-- *********************FACEBOOK START******************** -->
<!-- facebook meta tags to ensure correct image / page is shared START-->
<!-- set the URL that you want Facebook to point to in this tag -->
<meta
property="og:url"
content="https://www.nuttyskitchen.co.uk/cheesesauce.html"
/>
<meta property="og:type" content="article" />
<meta property="og:title" content="Delicious Simple Cheese Sauce" />
<!-- set a very short description of the page in this tag -->
<meta
property="og:description"
content="My delicious & simple cheese sauce is quick and easy to make"
/>
<!-- set the image that you want Facebook to display in this tag-->
<meta
property="og:image"
content="https://www.nuttyskitchen.co.uk/images/cheesesauce/650x366/cheese-sauce-in-pan.jpg"
/>
<!-- facebook meta tags to ensure correct image / page is shared END-->
<!-- *********************FACEBOOK END********************* -->
<title>Cheese Sauce | Nutty's Kitchen</title>
<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=Poppins&display=swap"
rel="stylesheet"
/>
<!-- styles -->
<link rel="stylesheet" href="./styles/tabs-nav.css" />
<!-- <link rel="stylesheet" href="./styles/tabs-nav-minified.css" /> -->
</head>
<body>
<nav class="nav-main">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/recipepage.html">Recipes</a></li>
<li><a href="/contact-form.html">Contact Us</a></li>
</ul>
</nav>
<!-- RECIPE PAGE NAVIGATION -->
<div id="nav-container" class="nav-container"></div>
<!-- RECIPE PAGE NAVIGATION -->
<section>
<header class="title">
<div class="title-wrap">
<img
width="60"
height="32"
src="./images/logo-left.svg"
alt="logo left"
title="nuttys kitchen logo left"
/>
<h1>Cheese Sauce</h1>
<img
width="60"
height="32"
src="./images/logo-right.svg"
alt="logo right"
title="nuttys kitchen logo right"
/>
</div>
<img
src="./images/nuttys-kitchen-logo.svg"
alt="nuttys kitchen logo"
width="160"
height="40"
title="nuttys kitchen logo"
class="logo-main"
/>
<p>
My cheese sauce is quick and easy to make and can be used in a variety
of recipes, so bookmark this page for a quick reference in the future!
</p>
<ul>
<li>Lasagne</li>
<li>Pasta Bakes</li>
<li>Cauliflower Cheese</li>
</ul>
<div class="spacer"></div>
<p>
Click the <b>Method</b> tab below to see a step by step guide with
pictures.
</p>
</header>
<!-- class about-center = set columns -->
<!-- class section-center = set width -->
<div class="about-center section-center">
<article class="about-img">
<img
src="./images/cheesesauce/650x366/cheese-sauce-in-pan.jpg"
alt="cheese sauce in a pan"
/>
</article>
<article class="about">
<!-- buttons container -->
<div class="btn-container">
<!-- class active = show content -->
<button class="tab-btn active" data-id="ingredients">
ingredients
</button>
<button
title="Click this tab to read the recipe method and see pictures of how to make this dish"
class="tab-btn"
data-id="method"
>
method
</button>
</div>
<!-- about content -->
<article class="about-content">
<!-- single item -->
<div class="content active" id="ingredients">
<h2>ingredients</h2>
<p>Here's what you need :-)</p>
<!-- Ingredients List Goes Below Here!!! -->
<h2>serves 2 - 4</h2>
<ul>
<li>50g butter</li>
<li>50g flour</li>
<li>Pinch of Salt & black pepper</li>
<li>1 tsp Dijon mustard</li>
<li>1 tsp English mustard powder</li>
<li>1 tsp onion powder</li>
<li>1 OXO vegetable stock cube</li>
<li>150g extra mature (No. 6 strength) cheddar cheese</li>
<li>1 pint of whole or semi-skimmed milk</li>
</ul>
<!-- Ingredients List Goes Above Here!!! -->
</div>
<!-- end of single item -->
<!-- single item -->
<div class="content" id="method">
<h2>method</h2>
<p>
This cheese sauce can be used for loads of dishes, just add
extra milk to make it thinner
</p>
<!-- Method List Goes Below Here!!! -->
<ol>
<li>Melt the butter in a small - med pan</li>
<li>Add all the flour</li>
<li>Add the onion powder with the English & Dijon mustard</li>
<li>Stir with a whisk or spoon to make a roux</li>
</ol>
<div class="spacer"></div>
<div class="card_image">
<figcaption>make the roux</figcaption>
<img
src="./images/cheesesauce/650x366/roux-in-pan.jpg"
alt="roux in pan"
/>
</div>
<div class="spacer"></div>
<ol start="5">
<li>Add a little milk at a time while whisking</li>
</ol>
<div class="spacer"></div>
<p>
Don't worry about the lumps, keep stirring and whisking as you
add the milk, and they will melt into the sauce
</p>
<ol start="6">
<li>Stir continuously to form a thick white sauce</li>
</ol>
<div class="spacer"></div>
<div class="card_image">
<figcaption>white sauce</figcaption>
<img
src="./images/cheesesauce/650x366/white-sauce-in-pan.jpg"
alt="white sauce in pan"
/>
</div>
<div class="spacer"></div>
<ol start="7">
<li>When thickened, it should coat the back of a spoon</li>
<li>Turn the heat off</li>
<li>Add the cheese</li>
</ol>
<div class="spacer"></div>
<div class="card_image">
<figcaption>grated cheese</figcaption>
<img
src="./images/cheesesauce/650x366/grated-cheese-02.jpg"
alt="grated cheese"
/>
</div>
<div class="spacer"></div>
<ol start="10">
<li>Stir until the cheese has melted</li>
</ol>
<div class="spacer"></div>
<div class="card_image_round">
<figcaption>cheese sauce</figcaption>
<img
src="./images/cheesesauce/650x366/cheese-sauce-in-pan.jpg"
alt="cheese sauce in pan"
/>
</div>
<!-- Method List Goes Above Here!!! -->
</div>
<!-- end of single item -->
</article>
</article>
</div>
</section>
<!-- javascript -->
<!-- <script type="module" src="./src/tabs.js"></script> -->
<script src="./src/app.js"></script>
</body>
</html>