-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathmake.html
More file actions
164 lines (161 loc) · 7.99 KB
/
make.html
File metadata and controls
164 lines (161 loc) · 7.99 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Why you should be choosing popcorn as a snack">
<meta name="keywords" content="Popcorn, Snack, Health eating">
<link rel="stylesheet" href="assets/css/style.css" type="text/css">
<link rel="icon" type="image/x-icon" href="favicon.ico?v=2" />
<title>How to make popcorn - Why Choose Popcorn?</title>
</head>
<body>
<!-- Sticky Nav bar-->
<div class="fix-nav">
<div>
<nav class="sticky-menu menus menu-font">
<ul>
<li class="animation-line-sticky"><a href="index.html">Home</a></li>
<li class="animation-line-sticky"><a href="make.html" class="active">Make</a></li>
<li class="animation-line-sticky"><a href="gallery.html">Gallery</a></li>
<li class="animation-line-sticky"><a href="contact.html">Contact Us</a></li>
</ul>
</nav>
</div>
</div>
<!-- Collapsible Nav bar -->
<div class="fix-nav">
<div>
<nav class="collapsible-menu menus menu-font">
<input type="checkbox" id="menu">
<label for="menu">Menu</label>
<div class="menu-content">
<ul>
<li class="animation-line-collapsible"><a href="index.html">Home</a></li>
<li class="active"><a href="make.html">Make</a></li>
<li class="animation-line-collapsible"><a href="gallery.html">Gallery</a></li>
<li class="animation-line-collapsible"><a href="contact.html">Contact Us</a></li>
</ul>
</div>
</nav>
</div>
</div>
<div class="page-container">
<header style="margin:65px 0 2vw;" class="non-main">
<h1>How to make popcorn</h1>
<p>Learn to make tasty popcorn in just 6 easy steps!</p>
</header>
<div id="make-layout">
<img src="assets/images/popcorn-jug.webp" alt="A small jug of popcorn with syrup being poured over them." style="width:60%;">
<div>
<div class="tip">
<strong>Tip:</strong> <span></span>
</div>
<section id="ingredients">
<div>
<h2>Ingredients</h2>
<ul>
<li onclick="stk_ingredient(this.id)" id="ingredient_1">
3 Tbsp Coconut Oil
</li>
<li onclick="stk_ingredient(this.id)" id="ingredient_2">
1/3 Cup of high-quality popcorn kernels
</li>
<li onclick="stk_ingredient(this.id)" id="ingredient_3">
1 Tbsp of butter
</li>
<li onclick="stk_ingredient(this.id)" id="ingredient_4">
Salt to taste
</li>
</ul>
</div>
</section>
<div id="instructions">
<section>
<div onclick="stk(this.id)" id="step_1">
<h2 id="step_1_a">Step 1</h2>
<p id="step_1_b">Heat the oil in a 3-quart saucepan on medium high heat. If you are using coconut oil, allow all of the solid oil to melt.</p>
</div>
</section>
<section>
<div onclick="stk(this.id)" id="step_2">
<h2 id="step_2_a">Step 2</h2>
<p id="step_2_b">Put 3 or 4 popcorn kernels into the oil and cover the pan.</p>
</div>
</section>
<section>
<div onclick="stk(this.id)" id="step_3">
<h2 id="step_3_a">Step 3</h2>
<p id="step_3_b">When the kernels pop, add the rest of the 1/3 cup of popcorn kernels in an even layer. Cover, remove from heat and count 30 seconds. (Count out loud; it's fun to do with kids.) This method first heats the oil to the right temperature, then waiting 30 seconds brings all of the other kernels to a near-popping temperature so that when they are put back on the heat, they all pop at about the same time.</p>
</div>
</section>
<section>
<div onclick="stk(this.id)" id="step_4">
<h2 id="step_4_a">Step 4</h2>
<p id="step_4_b">Return the pan to the heat. The popcorn should begin popping soon, and all at once. Once the popping starts in earnest, gently shake the pan by moving it back and forth over the burner. Try to keep the lid slightly ajar to let the steam from the popcorn release (the popcorn will be drier and crisper). Once the popping slows to several seconds between pops, remove the pan from the heat, remove the lid, and dump the popcorn immediately into a wide bowl. With this technique, nearly all of the kernels pop, and nothing burns.</p>
</div>
</section>
<section>
<div onclick="stk(this.id)" id="step_5">
<h2 id="step_5_a">Step 5</h2>
<p id="step_5_b">If you are adding butter, you can easily melt it by placing the butter in the now empty, but hot pan. Note that if you let the butter get just a little bit brown, it will add an even more intense, buttery flavour to the butter and to your popcorn. (Here's more info on how to brown butter.) Just drizzle the melted butter over the popcorn and toss to distribute.</p>
</div>
</section>
<section>
<div onclick="stk(this.id)" id="step_6">
<h2 id="step_6_a">Step 6</h2>
<p id="step_6_b">Add salt to taste.</p>
</div>
</section>
</div>
</div>
</div>
<div style="display:flex; justify-content:center; margin: 1vw;">
<img src="assets/images/popcorn-bowl.webp" alt="A bowl of fresh popcorn." style="display:flex; justify-content:center; margin: 1vw; max-width:90%; max-height: 600px;">
</div>
</div>
<div class="back-to-top">
<a href="#top" class="dark-bg-text animation-line-sticky">Jump to top of page <i class="fa-solid fa-angle-up"></i></a>
</div>
<footer>
<div class="footer-contact">
<p><strong>Why Choose Popcorn</strong></p>
<address>
Kernal Lane, Poptown, PO9 C00<br>
<a class="animation-line-sticky" href="mailto:donotemail@whychoosepopcorn.com">DoNotEmail@WhyChoosePopcorn.com</a>
</address>
</div>
<ul>
<li><a href="https://www.linkedin.com/in/warwickhart/" target="_blank" rel="noopener noreferrer" aria-label="Link to Warwick Hart's LinkedIn profile (opens in new tab)" class="dark-bg-text animation-line-sticky">Connect with me on LinkedIn <i class="fa-brands fa-linkedin"></i></a></li>
<li><a href="https://github.com/BobWritesCode" target="_blank" rel="noopener noreferrer" aria-label="Link to Warwick Hart's GitHub profile (opens in new tab)" class="dark-bg-text animation-line-sticky">See all my projects at GitHub <i class="fa-brands fa-github"></i></a></li>
</ul>
<hr>
<div>
Copyright © 2022 Why Choose Popcorn
</div>
</footer>
<script>
function stk(element_id){
let element=document.getElementById(element_id+"_a");
let elementb=document.getElementById(element_id+"_b");
if (element.style.textDecoration=="line-through") {
element.style.textDecoration="";
elementb.style.textDecoration="";
} else {
element.style.textDecoration="line-through"
elementb.style.textDecoration="line-through"
}
}
function stk_ingredient(element_id){
let element=document.getElementById(element_id);
if (element.style.textDecoration=="line-through") {
element.style.textDecoration="";
} else {
element.style.textDecoration="line-through"
}
}
</script>
<script src="https://kit.fontawesome.com/3f3c2144d6.js" crossorigin="anonymous"></script>
</body>
</html>