-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
145 lines (130 loc) · 7.6 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
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Edible Forest Forays</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes"/>
<meta name="description" content="Edible Forest Forays, offering mushroom foraging and cooking classes for small, private groups in Colorado and California.">
<link rel="stylesheet" href="assets/css/main.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
<script defer src="https://kit.fontawesome.com/c70c69bd1d.js" crossorigin="anonymous"></script>
</head>
<body class="is-preload landing">
<div id="page-wrapper">
<!-- Header -->
<header id="header">
<h1 id="logo"><a href="index.html"><img class="logo" src="images/logo.svg" alt="Edible Forest Forays logo"></a></h1>
<nav id="nav">
<ul>
<li><a href="bookings.html" class="button primary">Book a Class</a></li>
<li><a href="#four" class="button primary">Get Updates</a></li>
</ul>
</nav>
</header>
<!-- Banner -->
<section id="banner">
<div class="content">
<header>
<h2>Let's wander into the woods...</h2>
<p>and see what we can find.</p>
</header>
<span class="image"><img srcset="images/home-small.jpg 150w, images/home-medium.jpg 300w, images/home-large.jpg 600w" src="images/home-medium.jpg" alt="A white woman's hands holding candy cap mushrooms"/></span>
</div>
<a href="#one" class="goto-next scrolly">Next</a>
</section>
<!-- One -->
<section id="one" class="spotlight style1 bottom">
<span class="image fit main"><img srcset="images/about-small.jpg 500w, images/about-medium.jpg 1000w, images/about-large.jpg 1600w" src="images/about-medium.jpg" alt="A white man with a beard, wearing a backpack and holding an orange mushroom in the woods" loading="lazy"/></span>
<div class="content">
<div class="container">
<div class="row">
<div class="col-4 col-12-medium">
<header>
<h2>My name is Ben,</h2>
<p> and I'm fascinated by fungi.</p>
</header>
</div>
<div class="col-4 col-12-medium">
<p>Nearly a decade ago, my wife surprised me with a guided mushroom foray for my birthday. We came home with baskets full of burn morels - and I was instantly hooked. From that day forward, I wanted to learn everything I could about mushrooms, and the conditions that make them thrive.</p>
</div>
<div class="col-4 col-12-medium">
<p>In the years since, I've spent every spare minute delving into the mysteries of mycology, and wandering the forests of the American West, acquainting myself with their incredible diversity of fungi. It's become my life's work - and it would be a privilege to share it with you.</p>
</div>
</div>
</div>
</div>
<a href="#two" class="goto-next scrolly">Next</a>
</section>
<!-- Two -->
<section id="two" class="spotlight style2 right">
<span class="image fit main"><img srcset="images/forays-small.jpg 500w, images/forays-medium.jpg 1000w, images/forays-large.jpg 1600w" src="images/forays-medium.jpg" alt="An Asian man holding a brown mushroom and a white man using a book to identify the mushroom" loading="lazy"/></span>
<div class="content">
<header>
<h2>Private mushroom forays</h2>
</header>
<p>There's nothing I love more than introducing people to the joys of foraging. Mushroom forays are part meditation, part treasure hunt. The practice of patiently, quietly studying the forest floor calms our frayed nerves, while the incredible satisfaction of finding what we're looking for engenders childlike glee.</p>
<p>Half-day private forays for groups of up to six are available for $450. We can focus on a mushroom of your choice (season permitting), or we can simply wander together and discover the countless species of fungi all around us.</p>
<p>You'll walk away with the confidence to locate and safely identify edible mushrooms on your own.</p>
<ul class="actions">
<li><a href="bookings.html" class="button">Book It</a></li>
</ul>
</div>
<a href="#three" class="goto-next scrolly">Next</a>
</section>
<!-- Three -->
<section id="three" class="spotlight style3 left">
<span class="image fit main bottom"><img srcset="images/cooking-small.jpg 500w, images/cooking-medium.jpg 1000w, images/cooking-large.jpg 1600w" src="images/cooking-medium.jpg" alt="A basket of chanterelle mushrooms" loading="lazy"/></span>
<div class="content">
<header>
<h2>Private mushroom cooking classes</h2>
</header>
<p>Optionally, at the conclusion of our foray, we can reconvene in my kitchen with my good friend and expert chef Mark. He'll provide an overview of how to clean, cook, and preserve the various species of mushrooms we've collected. And he'll guide us in preparing a three-course meal with our bounty.</p>
<p>The culinary experience is available for an additional $450. All ingredients will be provided, along with beer and wine. You'll leave with new skills and three delicious mushroom recipes to recreate at home.</p>
<ul class="actions">
<li><a href="bookings.html" class="button">Book It</a></li>
</ul>
</div>
<a href="#four" class="goto-next scrolly">Next</a>
</section>
<!-- Four -->
<section id="four" class="wrapper style2 special fade">
<div class="container">
<header>
<h2>Fall in love with fungi</h2>
<p>Sign up to receive weekly foraging tips and condition reports</p>
</header>
<form method="post" action="#" class="cta">
<div class="row gtr-uniform gtr-50">
<div class="col-8 col-12-xsmall"><input type="email" name="email" id="email" placeholder="Your Email Address" /></div>
<div class="col-4 col-12-xsmall"><input type="submit" value="Subscribe" class="fit primary" /></div>
</div>
</form>
</div>
</section>
<!-- Footer -->
<footer id="footer">
<ul class="icons">
<li><a href="https://www.instagram.com/edibleforestforays/" class="icon brands alt fa-instagram"><span class="visually-hidden">Instagram</span></a></li>
<li><a href="https://www.facebook.com/edibleforestforays/" class="icon brands alt fa-facebook-f"><span class="visually-hidden">Facebook</span></a></li>
<li><a href="https://www.twitter.com/edibleforestforays/" class="icon brands alt fa-twitter"><span class="visually-hidden">Twitter</span></a></li>
<li><a href="https://www.linkedin.com/edibleforestforays/" class="icon brands alt fa-linkedin-in"><span class="visually-hidden">LinkedIn</span></a></li>
<li><a href="mailto:[email protected]" class="icon solid alt fa-envelope"><span class="visually-hidden">Email</span></a></li>
</ul>
<ul class="copyright">
<li>© Edible Forest Forays</li>
<li>Built by: <a href="https://www.ashleighcodes.com/">Ashleigh Halverstadt</a></li>
<li>Design by: HTML5 UP</li>
</ul>
</footer>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/jquery.dropotron.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/browser.min.js"></script>
<script src="assets/js/breakpoints.min.js"></script>
<script src="assets/js/util.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>