generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
490 lines (466 loc) · 34.3 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
<!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="Information on developing responsible fire lighting skills for Bushcraft">
<meta name="keywords" content="survival, bushcraft, firelighting, batoning, feather-sticks, fire,
kindling, birch-bark, camp-fire, heat, camp-cooking, water-purification">
<link rel="stylesheet" href="assets/css/style.css">
<title>Enjoy Fire</title>
</head>
<body>
<nav class="bar navbar">
<div class="navbar-container">
<a href="index.html" aria-label="This link takes you to the top of the Enjoy Fire page">
<h1 class="logo">
<i class="fa-solid fa-fire-flame-curved"></i>
Enjoy Fire!
</h1>
</a>
<!-- code copied from https://codepen.io/alvarotrigo/pen/XWejzjR modified slightly-->
<label id="dummy-checkbox-label" for="dummy-checkbox">This is a dummy lable to make the hamburger menu work</label>
<input type="checkbox" name="checkbox" id="dummy-checkbox">
<div class="hamburger-lines">
<span class="line line1"></span>
<span class="line line2"></span>
<span class="line line3"></span>
</div>
<!-- end of copied code -->
<ul class="main-menu-items" aria-labelledby="mm-lightfire mm-tools mm-responsible-fire-lighting mm-stay-in-touch">
<li >
<a id="mm-lightfire" href="#lightfire">Light a Fire!</a>
</li>
<li>
<a id="mm-tools" href="#tools">Tools</a>
</li>
<li>
<a id="mm-responsible-fire-lighting" href="#responsible-fire-lighting">Responsible Fire Lighting</a>
</li>
<li>
<a id="mm-stay-in-touch" href="#stay-in-touch">Stay In Touch</a>
</li>
</ul>
</div>
</nav>
<!-- Enjoy Fire! section-->
<section class="section-wrapper">
<h1>Enjoy Fire!</h1>
<div class="section-content-outer-wrapper" id="enjoy-fire-content-wrapper">
<div id="enjoy-fire-items-left" aria-labelledby="ef-lightfire ef-tools ef-responsible-fire-lighting ef-stay-in-touch">
<!-- These divs signpost a progressive reveal of Enjoy Fire! contents and allow for indevidal positioning-->
<!-- On Hover Popups not yet implemented: use links instead in this version release -->
<div id="ef-lightfire" class="enjoy-fire-items">
<a href="#lightfire" >
<h2 class="call-to-action">
<span><i class="fa-solid fa-fire"></i></span>
Light a Fire!
</h2>
</a>
<p>Some tips on lighting a sustainable fire</p>
</div>
<div id="ef-tools" class="enjoy-fire-items">
<a href="#tools">
<h2 class="call-to-action">
<span><i class="fa-solid fa-screwdriver-wrench"></i></span>
Tools for Fire Lighting
</h2>
</a>
<p>Basic tools for fire lighting</p>
</div>
</div>
<div id="hero-image-wrapper">
<img id="hero-img" src="assets/images/hero.jpg" alt="two women chatting round a camp fire">
</div>
<div id="enjoy-fire-items-right">
<div id="ef-responsible-fire-lighting" class="enjoy-fire-items">
<a href="#responsible-fire-lighting">
<h2 class="call-to-action">
<span><i class="fa-solid fa-seedling"></i></span>
Responsible Fire Lighting
</h2>
</a>
<p>Taking care of the environment whilst enjoying fire</p>
</div>
<div id="ef-stay-in-touch" class="enjoy-fire-items">
<a href="#stay-in-touch">
<h2 class="call-to-action">
<span><i class="fa-solid fa-users-between-lines"></i></span>
Stay in Touch
</h2>
</a>
<p>Send us your contact information</p>
</div>
</div>
</div>
</section>
<!-- Light a Fire! section-->
<section id="lightfire" class="section-wrapper">
<h1>Light a Fire!</h1>
<div id="lightfire-content-wrapper">
<!-- Aside containing links to Article sections: List of Contents -->
<aside id="lightfire-aside">
<h2>Contents</h2>
<div id="lightfire-aside-inner">
<ul aria-labelledby="introduction area-prep gather-materials prep-matherials choose-fire-lay ign-stbl sust-fire extinguish">
<li>
<div class="call-to-action">
<a id="introduction" class="lf-aside-cta" href="#intro-section">
Introduction
</a>
</div>
</li>
<li>
<div class="call-to-action">
<a id="area-prep" class="lf-aside-cta" href="#area-prep-section">
Area Preparation
</a>
</div>
</li>
<li>
<div class="call-to-action">
<a id="gather-materials" class="lf-aside-cta" href="#gather-materials-section">
Gathering Materials
</a>
</div>
</li>
<li>
<div class="call-to-action">
<a id="prep-matherials" class="lf-aside-cta" href="#prep-materials-section">
Preparation of Materials
</a>
</div>
</li>
<li>
<div class="call-to-action">
<a id="choose-fire-lay" class="lf-aside-cta" href="#fire-lay-section">
Choosing a Fire Lay
</a>
</div>
</li>
<li>
<div class="call-to-action">
<a id="ign-stbl" class="lf-aside-cta" href="#ignition-section">
From Ignition to Sustainable Fire
</a>
</div>
</li>
<li>
<div class="call-to-action">
<a id="sust-fire" class="lf-aside-cta" href="#sustained-fire-section">
A Sustained Fire
</a>
</div>
</li>
<li>
<div class="call-to-action">
<a id="extinguish" class="lf-aside-cta" href="#extinguishing-section">
Extinguishing the Fire and making sure to ‘Leave No Trace’
</a>
</div>
</li>
</ul>
</div>
<figure class= "lightfire-fig" id="aside-fire-img-fig">
<img class="lightfire-img" src="assets/images/aside-fire.jpg" alt="Bushcrafted fire in woods">
<figcaption>Bushcrafted fire in woods [photo: pexels/Snejina Nikolova/4316833]</figcaption>
</figure>
</aside>
<!-- Artice on Tips on Fire Lighting -->
<article id="lightfire-article">
<h2>Tips on Fire Lighting</h2>
<section>
<h3 class="navbar-offset"><span id="intro-section"></span>Introduction</h3>
<div aria-describedby="essential-bushcraft">
<p>Fire lighting is one of the key survival skills in Bushcraft. Other skills include being able to find or make a shelter for protection from the elements, being able to purify water for drinking, and providing food.</p>
<p>Bushcraft in general and fire lighting in particular are large subjects and fire lighting can be very challenging and involved under certain circumstances. Here are some basic tips on how to light a fire in dry conditions, using basic tools and materials.</p>
<p id="essential-bushcraft">You can find a more in-depth discussion of fire lighting and bushcraft in Ray Mears' book
<a href="https://www.raymears.com/Bushcraft_Product/164-Ray-Mears-Essential-Bushcraft-Signed-Copy/
" target="_blank" rel="noopener"><span>‘Essential Bushcraft’.</span></a>
</p>
</div>
</section>
<section>
<h3 class="navbar-offset"><span id="area-prep-section"></span>Area Preparation</h3>
<div>
<p>Choose the site of your fire carefully. You will want to be able to leave no trace after your fire, and prevent setting the surrounding area on fire.</p>
<p>Clear away any ground debris at the fire site so you light your fire on bare earth. If your site is on grass, cut a section of turf out and set it aside. You can replace this after extinguishing your fire.</p>
<p>Keep you fire well away from any combustable materials near by, especially in dry forests or woodland. Do not light a fire on peat: this can burn underground for weeks after you have extinguished your fire, and cause wild fires later.</p>
<p>Lighting a fire next to a river, lake or seashore allows for water to wash away any traces of your fire.</p>
</div>
</section>
<section>
<h3 class="navbar-offset"><span id="gather-materials-section"></span>Gathering Materials</h3>
<figure class= "lightfire-fig" id="gather-materials-img">
<img class="lightfire-img" src="assets/images/gather-firewood.jpg" alt="Girl carrying firewood with birchbark">
<figcaption>Girl carrying firewood with birchbark [photo: pexels/Tatiana Syrikova/3849955]</figcaption>
</figure>
<h4>Wood</h4>
<p>Wood which has been lying on the ground will be damp and it will be very hard to use it as fuel so gather your wood from off the ground. Often dead wood can be found hanging in branches. Trees which have died but are still standing (dead-standing trees) provide excellent wood. Often dead branches which are wet on the outside can be split to provide dry combustible fuel on the inside.
Green or living wood should not normally be burnt.
</p>
<p>Gather two handfuls of fine twigs, no thicker than match sticks and about two hand spans long for initial fuel. Gather a variety of thickness of twigs and branches from match stick thickness to thumb thickness. This wood will be used to get your fire to a sustainable state,
Gather sufficient main fuel ( thumb thickness or thicker ) for your purposes.
</p>
<h4>Ignition and Kindling</h4>
<p>Gather some birch bark from the outside of the bark from a silver birch tree. This contains resin which acts as an accelerant for fire lighting and will be used to receive a spark and kindle the initial flame.
</p>
</section>
<section>
<h3 class="navbar-offset"><span id="prep-materials-section"></span>Preparation of Materials</h3>
<figure class= "lightfire-fig" id="prep-materials-img">
<img class="lightfire-img" src="assets/images/batoning.jpg" alt="Splitting wood by batoning">
<figcaption>Splitting wood by batoning [photo Thomas Xavier: <a href="https://morethanjustsurviving.com/batoning/" target="_blank" rel="noopener" aria-label="link to Thomas Xavier site The Complete Guide to Batoning">The Complete Guide to Batoning</a>]</figcaption>
</figure>
<p>Good preparation is essential to successful fire lighting. </p>
<h4>Size Ordering</h4>
<p>Order your materials by thickness.
Set aside a couple of wide lengths of birch bark to create bark dust for ignition, and also tear up thin strips of birch bark to catch the fire from the birch bark dust.
Sort the rest of the wood by thickness, from the kindling twigs ( two handfuls ) up to main fuel.</p>
<h4>Splitting and cutting wood</h4>
<P>Longer lengths of wood can be snapped, broken or sawn to a useful lengths.
Thicker pieces of wood can be split into thumb size thickness by batoning. The technique of batoning involves using a heavier length of wood to strike or batten the bush knife. Steady one end of the wood to be split on a firm surface, and place the middle of the blade on the other end of the wood. Initially, storage the middle of the blade with the batten. Once the blade has sunk into the wood a little, strike the blade at the tip until the wood is split. Continue splitting the wood until the desired thickness is reached.</P>
<h4>Feather sticks</h4>
<p>Feather sticks are used as kindling once an initial flame is created from a spark. They can be used instead of the two handfuls of fine twigs, and can even be ignited from a spark if no birch bark is available. They are made by carving multiple fine shavings from a finger-thick length of wood. The shavings remain attached to the stick and are densely bunched together.</p>
<h4>Birchbark dust</h4>
<p>When you are ready to ignite your fire, it is time to prepare your birch bark dust. To do this, take one of the wider pieces of birch bark and with the blade of the bush knife, scrape the outer side of the bark to create a fine dust. You will need a pile about the size of a thumb nail. Protect this from being blown away!</p>
</section>
<section>
<h3 class="navbar-offset"><span id="fire-lay-section"></span>Choosing a Fire Lay</h3>
<figure class= "lightfire-fig" id="fire-lay-img">
<img class="lightfire-img" src="assets/images/log-cabin-lay.jpg" alt="Firewood arranged in the Log Cabin Lay">
<figcaption>Firewood arranged in the Log Cabin Lay[photo: Connor Fitzgerald : <a href="https://www.cabinlife.com/articles/the-5-best-campfire-lays-and-how-to-build-them" target="_blank" rel="noopener" aria-label="link to Cabinlife .com The 5 Best Camfire Lays and How to Build Them">The 5 Best Campfire Lays and How to Build Them</a>]</figcaption>
</figure>
<p>There are many ways to build a fire or create a Fire Lay, depending on the use for the fire.
One of the early goals in most fire lays is to create a bed of hot embers, which can be used as a source of heat for cooking and boiling water, but also to maintain a sustainable fire. From a bed of embers, a fresh fire can be quickly built up simple by adding more fuel.</p>
<h4>Base Layer</h4>
<p>Lay three or four thumb size pieces of wood to create a platform for the fire. This keeps the initial fire off the ground, insulating it from the cold ground and keeping the kindling dry. It also provides early fuel to contribute to a bed of embers.</p>
<h4>Ignition Area</h4>
<p>It is often easier to ignite your fire a little away from main fire area. You give yourself freedom of movement without disturbing your fire lay.</p>
<h4>Kindling Layer</h4>
<p>This is your two handfuls of fine twigs, one placed over the top of and at right angles to the other over your ignited birch bark or feather sticks. Adding more feather sticks also provides excellent kindling.</p>
<h4>Log Cabin Lay</h4>
<p>The Log Cabin Lay is a great way to build an initial fire because it quickly creates a good bed of embers.
These can be used for cooking, or to form the basis of a different fire lay. Lay one layer of sticks in one direction over the fire, then another layer at right angles to the first. Continue building up layers until you have four or five layers.</p>
</section>
<section>
<h3 class="navbar-offset"><span id="ignition-section"></span>From Ignition to Sustainable Fire</h3>
<figure class= "lightfire-fig" id="ignition-img">
<img class="lightfire-img" src="assets/images/ignition.jpg" alt="a man igniting a feather stick with a fire stick">
<figcaption>A man igniting a feather stick with a fire stick [photo: pexels/lumn/167708]</figcaption>
</figure>
<p>Everything is prepared. Your wood is sorted and easily accessible. Your fire platform is set with some strips of birch bark or a couple of feather sticks on top. A small way away from the main fire area, use the Fire Stick tool to introduce a spark to the birch bark dust or feather stick. To do this, you hold the fire stick scraper still and firmly whilst you pull the fire stick steadily away from your ignition dust. Sparks are thrown into the dust or the feather stick causing ignition.</p>
<p>Once you have ignition, introduce a strip of birch bark or a feather stick, and use these to transfer the fire to your main area and ignite your fire base kindling.
Now add your two handfuls of fine twigs or more feather sticks as described.
Once the flames reach through the top of the kindling, progressively add thicker tricks and sticks, always allowing the fire to reach the top of the last laid wood. Once you have added wood up to thumb thickness you can add some of your main fuel (thumb thickness and above).
</p>
<p>At this point you have a sustainable fire. The fire has a bed of embers and is not going to go out unpredictably. You can add more fuel as and when you want to depending on your purpose, and you can leave it without fear of it going out.</p>
</section>
<section>
<h3 class="navbar-offset"><span id="sustained-fire-section"></span>A Sustained Fire</h3>
<p>A sustained fire can be used for a wide variety of purposes including to keep warm, to cook, to sterilise utensils, to purify water, to create char-cloth or to signal.
It is a good idea to have sufficient fuel for the duration of your fire close at hand. Some of this can be pre-prepared, and some can be gathered from nearby material as your fire progresses.
</p>
</section>
<section>
<h3 class="navbar-offset"><span id="extinguishing-section"></span>From Extinguishing to making sure to ‘Leave No Trace’</h3>
<p>It is good safety practice to have water near by to extinguish your fire if you need to. When you are ready, pour water on your fire to put it out. You can also simple let the fire burn itself out.
Carefully test the embers and ground with your hand to make sure there is no heat.
You can now gather all the ashes and embers and scatter them over a wide area.
Then pour water into the ground where the fire was to make sure there is no residual underground smouldering.</p>
<p>Replace any ground cover debris which was removed when you first began to prepare your fire area. If you set aside an area of turf, replace this now and water it.
Your fire area should not be detectable now. You will leave no trace. Remember: “Take only Memories, Leave only Footprints”.</p>
</section>
</article>
</div>
</section>
<!-- Tools for Fire Lighting section-->
<section id="tools" class="section-wrapper">
<h1>Tools for Fire Lighting</h1>
<div class="tools-wrapper-outer">
<!-- Bush Knife Container-->
<div class="tools-wrapper-inner">
<figure class="tools">
<img class="tools" src="assets/images/bushknife.jpg" alt="Morakniv Companion Heavy Duty MG Knife">
<figcaption>Morakniv Companion Heavy Duty MG Knife [Ray Mears Bushcraft]</figcaption>
</figure>
<h2 class="tools">Bush Knife</h2>
<p class="tools">A Bush Knife is the one essential piece of equipment for survival. Most materials needed for survival and bushcraft can be fashioned using the bush knife.</p>
<a class="tools call-to-action" href="https://www.raymears.com/Bushcraft_Product/952-Morakniv-Companion-Heavy-Duty-MG-Knife/" target="_blank" rel="noopener"
aria-label="Visit the Ray Mears Bushcraft Shop to find out more about the Morkniv Companion Heavy Duty MG Knife (opens in a new tab)">
Buy a Knife
</a>
</div>
<!-- Fire Stick Container-->
<div class="tools-wrapper-inner">
<figure class="tools">
<img class="tools" src="assets/images/fire-stick.jpg" alt="Ray Mears Fire Stick">
<figcaption>Ray Mears Fire Stick [Ray Mears Bushcraft]</figcaption>
</figure>
<h2 class="tools" >Fire Stick</h2>
<p class="tools" >A fire stick will create high temperature sparks for ignition, even when wet. Whilst not essential, it makes ignition much easier and more reliable than other more primative methods.</p>
<a class="tools call-to-action" href="https://www.raymears.com/Bushcraft_Product/76-Ray-Mears-Fire-Stick/" target="_blank" rel="noopener">
Buy a Fire Stick
</a>
</div>
<!-- Saw Container-->
<div class="tools-wrapper-inner">
<figure class="tools">
<img class="tools" src="assets/images/saw.jpg" alt="Bahco Laplander Folding Saw">
<figcaption>Bahco Laplander Folding Saw [Ray Mears Bushcraft]</figcaption>
</figure>
<h2 class="tools" >Saw</h2>
<p class="tools">The saw is a convenience. The time and effort saved in preparing materials for fire lighting easily justify its place in the bushcraft tool kit.</p>
<a class="tools call-to-action" href="https://www.raymears.com/Bushcraft_Product/73-Bahco-Laplander-Folding-Saw/" target="_blank" rel="noopener">
Buy a Saw
</a>
</div>
</div>
</section>
<!-- Responsible Fire Lighting section-->
<section id="responsible-fire-lighting" class="section-wrapper">
<h1>Responsible Fire Lighting</h1>
<div class="section-content-outer-wrapper" id="responsible-fire-lighting-content-outer">
<div class="section-content-left" id="responsible-content-left">
<div class="items-group">
<h2>The Country Code</h2>
<p>Here is a summery of the UK Countryside code. This advice, when followed, will serve to protect our countryside and promote our enjoyment of it.</p>
<a class="call-to-action" href="https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&ved=2ahUKEwjB-fLTkar3AhXzQUEAHbOfDYoQFnoECAoQAQ&url=https%3A%2F%2Fassets.publishing.service.gov.uk%2Fgovernment%2Fuploads%2Fsystem%2Fuploads%2Fattachment_data%2Ffile%2F1052574%2FCountryside_Code_A5.pdf&usg=AOvVaw2sW2vn5hh0QyZ0f99t-CNX" target="_blank" rel="noopener">
Find out more about the County Code
</a>
</div>
<div class="items-group">
<h2>Fire Lighting and UK Law</h2>
<p>The law varies around the UK regarding fire lighting. In Scotland, under certain conditions, wild camp fires are permitted, whilst in England, wild camp fires are generally forbidden. Local bye-laws may apply. Here you can research the relevant legislation.</p>
<a class="call-to-action" href="https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=&ved=2ahUKEwjB-fLTkar3AhXzQUEAHbOfDYoQFnoECBIQAQ&url=https%3A%2F%2Fwww.gov.uk%2Fgovernment%2Fpublications%2Fthe-countryside-code&usg=AOvVaw1jz1E_ak8HCMTbVmLuRKzh" target="_blank" rel="noopener">
Find out more about Fire Lighting and UK Law
</a>
</div>
<div class="items-group">
<h2>Ray Mears Essential Bushcraft</h2>
<p>Ray Mears' popular book on Bushcraft is an excellent resource for developing an understanding responsible enjoyment of the countryside.</p>
<a class="call-to-action" href="https://www.raymears.com/Bushcraft_Product/164-Ray-Mears-Essential-Bushcraft-Signed-Copy/" target="_blank" rel="noopener">
Find out more about Bushcraft
</a>
</div>
</div>
<div class="section-content-right" id="responsible-content-right">
<figure class="section-content-right-figure">
<img class="section-content-right-img" id="responsible-img" src="assets/images/desert-fire.jpg" alt="Friends responsibly enjoying a camp fire in the desert">
<figcaption class="text-right">Friends responsibly enjoying a camp fire in the desert [photo: pexels/Tomaas Malik/1703314]</figcaption>
</figure>
<!-- Memories Text -->
<div id="memories">
<h2>Take only Memories</h2>
<h2>Leave only Footprints</h2>
<h2><cite>- Chief Seattle</cite></h2>
</div>
</div>
</div>
</section>
<!-- Stay In Touch section-->
<section id="stay-in-touch" class="section-wrapper">
<h1>Stay In Touch</h1>
<div class="section-content-outer-wrapper" id="stayintouch-content-outer-wrapper">
<!-- Stay in touch form wrapper -->
<div id="form-outer" class="section-content-left">
<h2>Tell us about your Bushcraft Interests</h2>
<!--
This is a dummy form:
form attribute "method" is ommited: a method of "post" would send data to a server;
form attribute "action" directs the user to respose.html to simulate interaction with a server.
-->
<form action="response.html" id="form">
<fieldset class="items-group" id="my-details">
<legend>
My detais:
</legend>
<div>
<label for="first-name">First Name</label>
<input class="input-background-colour" id="first-name" type="text" name="fname" placeholder="First Name" required>
</div>
<div>
<label for="last-name">Last Name</label>
<input class="input-background-colour" id="last-name" type="text" name="lname" placeholder="Last Name" required>
</div>
<div>
<label for="email">Email</label>
<input class="input-background-colour" id="email" type="email" name="email" placeholder="Email" required>
</div>
</fieldset>
<fieldset class="items-group" id="interests">
<legend>
I am interested in:
</legend>
<div>
<input id="shelter" type="checkbox" name="shelter" >
<label for="shelter">Shelter</label>
</div>
<div>
<input id="fire" type="checkbox" name="fire" >
<label for="fire">Fire</label>
</div>
<div>
<input id="food" type="checkbox" name="food" >
<label for="food">Food</label>
</div>
<div>
<input id="water-purification" type="checkbox" name="water-purification" >
<label for="water-purification">Water Purification</label>
</div>
</fieldset>
<fieldset class="items-group" id="tell-me">
<legend>
Tell me about...
</legend>
<div >
<input id="meetups" type="checkbox" name="meetups" >
<label for="meetups">I would like to know about your upcoming meet-ups</label>
</div>
<div>
<input id="newsletter" type="checkbox" name="newsletter" >
<label for="newsletter">I would like to recieve your monthly News Letter</label>
</div>
</fieldset>
<div>
<input class="items-group button call-to-action" id="submit" type="submit" value="Stay In Touch!">
</div>
</form>
</div>
<!-- Stay in touch image -->
<div class="section-content-right" id="stay-in-touch-img-wrapper">
<figure class="section-content-right-figure">
<img class="section-content-right-img" id="stay-in-touch-img" src="assets/images/stay-in-touch.jpg" alt="Friends heating up marshmallows round a fire">
<figcaption class="text-right">Friends heating up marshmallows round a fire.[photo:pexels Ivan Samkov 9630140]</figcaption>
</figure>
</div>
</div>
</section>
<!-- footer copied from Love Running Project: Code Institute and modified slightly-->
<footer id="footer" class="bar">
<ul class="social-networks">
<li>
<a href="https://facebook.com" target="_blank" rel="noopener"
aria-label="Visit our Facebook page (opens in a new tab)">
<i class="fa-brands fa-facebook"></i>
</a>
</li>
<li>
<a href="https://twitter.com" target="_blank" rel="noopener"
aria-label="Visit our Twitter page (opens in a new tab)">
<i class="fa-brands fa-twitter-square"></i>
</a>
</li>
<li>
<a href="https://instagram.com" target="_blank" rel="noopener"
aria-label="Visit our Instagram page (opens in a new tab)">
<i class="fa-brands fa-instagram-square"></i>
</a>
</li>
</ul>
</footer>
<!-- fontawesome script -->
<script src="https://kit.fontawesome.com/7299876a46.js" crossorigin="anonymous"></script>
</body>
</html>