-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
377 lines (362 loc) · 14.9 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta content="width-device-width, initial-scale=1.0" name="viewport">
<script src="js/ZeroCoolPepperCo.js"></script>
<link href="css/pepperStyles.css" rel="stylesheet">
<script src="https://kit.fontawesome.com/901c1ab579.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<!--<link href="./bootstrap.css" rel="stylesheet" />-->
</head>
<body>
<header>
<div class="banner">
<div class="headline" id="headline">
<h1>Zero Cool Pepper Company</h1>
<img src="images/logo.jpg" alt="logo">
</div>
</div>
</header>
<!--'Hamburger Menu'-->
<div class="top-nav">
<a href="#menu" class="active">Menu</a>
<div id="myLinks">
<a href="#home"><i class="fas fa-home"></i>Home</a>
<a href="#about"><i class="fas fa-info-circle"></i>About</a>
<a href="#peppers"><i class="fas fa-pepper-hot"></i>Peppers</a>
<a href="#salsas"><i class="fab fa-hotjar"></i>Salsas</a>
<a href="#jellies"><i class="fas fa-utensil-spoon"></i>Jellies</a>
<a href="#hotsauces"><i class="fas fa-wine-bottle"></i>Hot Sauces</a>
<a href="#contact"><i class="far fa-address-book"></i>Contact</a>
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div class="main">
<img src="images/banner.jpg" alt="peppers_banner_image">
<img src="images/peppercologo.jpeg" alt="logo">
<img src="images/pepperjelly3.jpg" alt="pepperjelly_image">
<img src="images/salsa1.jpg" alt="salsa_image">
</div>
<!--Home Section-->
<div class="about">
<h2 id="about">About</h2>
<br>
<article>
<h3>A little about myself:</h3>
<p>Hello, My name is Ely and i've enjoyed peppers/spicy food for as long as I can remember. Homegrown
peppers
can provide a burst of flavor along with some heat.
</p>
<p> you want to eat well without sacrificing flavor? Hot peppers are not only delicious, they have
unexpected
health benefits as well! Central and South America were using hot peppers for centuries before Columbus
brought them to Europe. The indigenous people of this area used the hot pepper for their culinary and
medical uses. Modern research is uncovering even more benefits today.</p>
<p> special nutrient in hot peppers can improve your health. This nutrient is called capsaicin. It
provides
the heat in hot peppers and hot sauce. There are unexpected health benefits of capsaicin that
researchers
are still identifying.</p>
<br>
<h3>What nutrients are in hot sauce?</h3>
<p>Hot sauce contains vitamin A, folate, magnesium and potassium. It may be a shock to you that hot sauce
is
rich in nutrients. But keep in mind that the hot peppers used to make hot sauce are as rich in nutrients
as
most vegetables are.</p>
Peppers have significant amounts of vitamin A and vitamin C. The average pepper contains more than
77,000
units of vitamin A, which is about fifteen times the minimum daily requirement. It also contains about
160
milligrams of vitamin C. That’s four times the minimum daily requirement of vitamin C.
</p>
</article>
</div>
<!--Pepper Section-->
<div class="flex-container-peppers">
<fieldset>
<h2 id="peppers">Peppers</h2>
<article>
<h3>Sugar Rush Peach Peppers</h3>
<p>Sugar Rush Peach is a rare Peach colored Capsicum bacattum pepper variety from Wales, UK.
The Sugar Rush pepper is a very sweet pepper with citrus tones. However it does have some heat to it,
close to habanero!
It might be the only Peach colored Aji type we have ever seen.</p>
<p>Similar to Aji Amarillo but much sweeter and that’s why it’s called Sugar Rush! A Wales chile grower
named Chris was growing a red Aji type called Sugar Rush that most likely had originated from South
America.
He then started getting Peach colored peppers he found were sweeter so he stabilized the Peach variety!
</p>
</article>
<!--Image Carousel-->
<h2 style="text-align: center;">Slideshow Gallery</h2>
<div class="container">
<!--full width images with number text-->
<div class="mySlides">
<div class="numbertext">
1/6
</div><img src="images/sugar-rush-peach-full.jpg" alt="PeachPepperPic">
</div>
<div class="mySlides">
<div class="numbertext2">
2/6
</div><img src="images/srp2.jpg" alt="PeachPepperPic">
</div>
<div class="mySlides">
<div class="numbertext3">
3/6
</div><img src="images/srp3.webp" alt="PeachPepperPic">
</div>
<div class="mySlides">
<div class="numbertext4">
4/6
</div><img src="images/srp4.jpg" alt="PeachPepperPic">
</div>
<div class="mySlides">
<div class="numbertext5">
5/6
</div><img src="images/srp5.jpg" alt="PeachPepperPic">
</div>
<div class="mySlides">
<div class="numbertext6">
6/6
</div><img src="images/sugar-rush-peach-last.jpg" alt="PeachPepperPic">
</div>
<!--Next and previous buttons-->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<!--Image Text-->
<div class="captionContainer">
<p id="caption"></p>
</div>
<!--Thumbnail Images-->
<div class="row">
<div class="column"><img class="demo cursor" onclick="currentSlide(1)" alt="Seedlings"
src="images/all-plant-start.jpg"></div>
<div class="column"><img class="demo cursor" onclick="currentSlide(2)" alt="Sprouts"
src="images/srp2.jpg"></div>
<div class="column"><img class="demo cursor" onclick="currentSlide(3)" alt="Inside Pod"
src="images/srp3.webp"></div>
<div class="column"><img class="demo cursor" onclick="currentSlide(4)" alt="Full Length"
src="images/srp4.jpg"></div>
<div class="column"><img class="demo cursor" onclick="currentSlide(5)" alt="SRP Shapes"
src="images/srp5.jpg"></div>
<div class="column"><img class="demo cursor" onclick="currentSlide(6)" alt="Final Product"
src="images/sugar-rush-peach-last.jpg"></div>
</div>
</div>
<article>
<h3>Aji Lemon Drop Peppers</h3>
<p>Also know as Aji Lemon and Hot Lemon Drop. It has a heat level much lower than average Habanero peppers
but is still hot.
The Aji Lemon Drop chile has a nice citrus flavor and is used in seasonings and sauces in traditional
Peru cooking.
In Peru the aji Lemon Drop is also called Kellu Uchu. The Lemon Drop peppers ripen from green to bright
yellow and look like tiny bananas.
Plants can grow to about 3 feet tall and are very productive.
</p>
</article>
<!--Thumbnail Images-->
<div class="row">
<div class="column"><img alt="Seedlings" class="demo cursor" onclick="currentSlide(1)"
src="images/aji-lemon.jpg"></div>
<div class="column"><img alt="Sprouts" class="demo cursor" onclick="currentSlide(2)"
src="images/aji_lemon2.jpg"></div>
<div class="column"><img alt="Inside Pod" class="demo cursor" onclick="currentSlide(3)"
src="images/aji_lemon3.jpg"></div>
<div class="column"><img alt="Full Length" class="demo cursor" onclick="currentSlide(4)"
src="images/aji-lemon4.jpg"></div>
<div class="column"><img alt="SRP Shapes" class="demo cursor" onclick="currentSlide(5)"
src="images/aji_lemon5.jpg"></div>
</div>
</fieldset>
</div>
<!--Salsas Section-->
<section>
<div class="salsas">
<h2 id="salsas">Salsas</h2>
<article>
<h3>Why Homemade Salsa?</h3>
At its most basic, salsa is simply chopped tomatoes, chiles, onions, and cilantro, flavored with salt
and brightened with a squeeze of lime juice.
But the beauty of salsa is its versatility and adaptability. <br>
</article>
<!--Image Carousel-->
<div class="container">
<!--full width images with number text-->
<div class="mySlides">
<div class="numbertext">
1/4
</div><img alt="Salsapic1" src="images/salsa1.jpg">
</div>
<div class="mySlides">
<div class="numbertext2">
2/4
</div><img alt="Salsapic2" src="images/salsa2.jpg">
</div>
<div class="mySlides">
<div class="numbertext3">
3/4
</div><img alt="Salsapic3" src="images/salsa3.jpg">
</div>
<div class="mySlides">
<div class="numbertext4">
4/4
</div><img alt="Salsapic4" src="images/salsa5.jpg" >
</div>
<br>
<!--Thumbnail Images-->
<div class="row">
<div class="column"><img alt="Seedlings" class="demo cursor" onclick="currentSlide(1)"
src="images/salsa1.jpg"></div>
<div class="column"><img alt="Sprouts" class="demo cursor" onclick="currentSlide(2)"
src="images/salsa2.jpg"></div>
<div class="column"><img alt="Sprouts" class="demo cursor" onclick="currentSlide(3)"
src="images/salsa3.jpg"></div>
<div class="column"><img alt="Sprouts" class="demo cursor" onclick="currentSlide(4)"
src="images/salsa5.jpg"></div>
</div>
</div>
</div>
</section>
<!--Jellies Section-->
<section>
<div class="jellies">
<h2 id="jellies">Jellies</h2>
<article>
<h3>Did you know hot pepper jelly can be good for you?</h3>
<p>What is hot pepper jelly good for?
Hot Pepper Jelly makes an excellent glaze for pork tenderloin, grilled pork chops and ham.
Glaze pork chops while grilling, baste a ham with hot pepper jelly while cooking or serve warm as a
sauce on the side.
Salmon will never be the same.</p>
</article>
<!--Image Carousel-->
<div class="container">
<!--full width images with number text-->
<div class="mySlides">
<div class="numbertext">
1/4
</div><img alt="PeachPepperPic" src="images/pepperjelly1.jpg">
</div>
<div class="mySlides">
<div class="numbertext2">
2/4
</div><img alt="PeachPepperPic" src="images/hot-pepper-jelly-2.jpg">
</div>
<div class="mySlides">
<div class="numbertext3">
3/4
</div><img alt="PeachPepperPic" src="images/pepperjelly3.jpg">
</div>
<div class="mySlides">
<div class="numbertext4">
4/4
</div><img alt="PeachPepperPic" src="images/Habanero-Pepper-Jelly.jpg">
</div>
<!--Thumbnail Images-->
<div class="row">
<div class="column"><img alt="Seedlings" class="demo cursor" onclick="currentSlide(1)"
src="images/pepperjelly1.jpg"></div>
<div class="column"><img alt="Sprouts" class="demo cursor" onclick="currentSlide(2)"
src="images/hot-pepper-jelly-2.jpg"></div>
<div class="column"><img alt="Sprouts" class="demo cursor" onclick="currentSlide(3)"
src="images/pepperjelly3.jpg"></div>
<div class="column"><img alt="Sprouts" class="demo cursor" onclick="currentSlide(4)"
src="images/Habanero-Pepper-Jelly.jpg"></div>
</div>
</div>
</div>
</section>
<!--Hot Sauce Section-->
<section>
<div class="hotsauces">
<h2 id="hotsauces">Hot Sauces</h2>
<article>
<h3>It makes you happy</h3>
<p>Hot sauce fiends love the burn because that joy is real. Your brain responds to the fact that it believes you are on fire by releasing endorphins, similar to a runner’s high, to tell you that it’s got this, and that repairs are underway.
<h3>It boosts your circulation</h3>
<p>Hot sauce acts as a general stimulant, increasingly blood flow to the stomach, elevating your heart rate, and generally adding zing to every system in your body.
This is why Sriracha-covered wings don’t spell naptime -- you just ate the food equivalent of a run around the block.</p>
<h3>It makes you live longer</h3>
<p>While the burn itself, however dramatic, lasts no more than 15 minutes, numerous studies show that the mega dose of vitamin C in capsaicin and perhaps, maybe, all of the above, lead to generally increased lifespans among hot sauce lovers (we’re talking dousing your food in hot sauce four times a week). Which is all to say… pass that bottle of mouth magma.
</p>
</article>
<!--Image Carousel-->
<h3 class="featuredsauces"><span style="color: #4c0080;">Zero Cool Featured Hot Sauces</span></h3>
<div class="container">
<!--full width images with number text-->
<div><span style="color: #4c0080">Sunset Peach</span></div>
<br>
<div class="mySlides">
<div class="numbertext">
1/2
</div><img alt="SunsetPeachmain" src="images/hotsaucesrp.jpeg">
</div>
<div class="mySlides">
<div class="numbertext2">
2/2
</div><img alt="SunsetPeachbottles" src="images/bottles.jpg">
</div>
<br>
<!--Thumbnail Images-->
<div class="row">
<div class="column"><img alt="Seedlings" class="demo cursor" onclick="currentSlide(1)"
src="images/hotsaucesrp.jpeg"></div>
<div class="column"><img alt="Sprouts" class="demo cursor" onclick="currentSlide(2)"
src="images/bottles.jpg"></div>
</div>
</div>
<div class="sparkplug">
<div><span style="color: #4c0080">Spark Plug</span></div>
<br>
<!--Thumbnail Images-->
<div class="row">
<div class="column"><img alt="Seedlings" class="demo cursor" onclick="currentSlide(1)"
src="images/hotsaucesrp.jpeg"></div>
<div class="column"><img alt="Sprouts" class="demo cursor" onclick="currentSlide(2)"
src="images/bottles.jpg"></div>
</div>
</div>
</div>
</section>
<!--Contact Section-->
<div class="flex-container-contact">
<h2 id="contact">Contact</h2>
<address>
<strong>Phone:</strong> <a>502-836-4594</a>
<strong>Mailing Address:</strong> <a>123 Sesame St. Anywhere USA</a>
<strong>Email:</strong> <a href="mailto:[email protected]">[email protected]</a>
</address>
<!--Contact message form-->
<div class="questionnaire">
<form name="contactForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
<h2>Submit a question or comment</h2>
<fieldset>
<legend>Contact</legend> <label for="name">Name:</label> <input id="name" name="user_name" type="text">
</fieldset>
<br>
<fieldset>
<legend>Email</legend> <label for="email">Email:</label> <input id="email" name="user_email" type="email">
</fieldset>
<br>
<fieldset>
<legend>Request/Message</legend> <label for="message">Message</label>
<textarea id="message" name="user_message"></textarea>
</fieldset><button type="submit">Submit</button>
</div>
</form>
</div>
<!-- Back to the top button -->
<button onclick="topFunction()" id="backToTopBtn" title="Back To The Top">Top</button>
<footer class="footer">
<div class="copyright">
©Copyright 2020. All rights Reserved.
</div>
</footer>
</body>
</html>