forked from lindseypaluso/hikeandforageapp
-
Notifications
You must be signed in to change notification settings - Fork 0
/
plants.html
309 lines (275 loc) · 17.6 KB
/
plants.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link href="https://fonts.googleapis.com/css?family=Poiret+One&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Spartan&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" media="screen" href="style.css">
<link href='https://api.mapbox.com/mapbox-gl-js/v1.9.1/mapbox-gl.css' rel='stylesheet'>
<title>Eat Wild!</title>
</head>
<body>
<div class="container-fluid p-0">
<nav
class="navbar navbar-expand-sm navbar-expand-lg col-12 navbar-light bg-white shadow p-0" id="navlinks">
<a class="logo-link" href="index.html"><img class="logo mt-3 ml-4" src="images/h&f-logo5.png"></a>
<div class="nav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-white text-shadow" href="plants.html"><i class="fa fa-leaf pr-2"></i>plants</a>
</li>
<li class="nav-item">
<a class="nav-link text-white text-shadow" href="contact.html"><i
class="fa fa-envelope pr-2"></i>contact</a>
</li>
<li class="nav-item">
<a class="nav-link text-white text-shadow" href="about.html"><i
class="fa fa-tree pr-2"></i>about</a>
</li>
</ul>
</div>
</nav>
<div class="page-header plant-header-box">Local Plants</div>
</div>
<!-- Plant Page Header -->
<!-- <div class="container-fluid p-0 plant-space">
<div class=row>
<div class="col-lg-12">
<div class="page-header-box">Local Plants</div>
</div>
</div> -->
<!-- Plant Cards Row 1 -->
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-"></div>
<div class="col-lg-2 col-md-2 col-sm- my-auto">
<div class="plant-card border-0 p-0" style="margin-top:60px;" data-toggle="modal" data-target="#myModalJuneberry">
<img class="card-img plant-modal rounded-0 img-fluid p-0" src="images/juneberry.jpg">
<div class="plant-card-title">Juneberries</div>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm- my-auto">
<div class="plant-card border-0 p-0" style="margin-top:60px;" data-toggle="modal" data-target="#myModalWhiteSage">
<img class="card-img plant-modal rounded-0 img-fluid p-0" src="images/whitesage.jpg">
<div class="plant-card-title">White Sage</div>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm- my-auto">
<div class="plant-card border-0 p-0" style="margin-top:60px;" data-toggle="modal" data-target="#myModalInkyCap">
<img class="card-img plant-modal rounded-0 img-fluid p-0" src="images/inkycapmushroom.jpeg">
<div class="plant-card-title" style="font-size:14px;">Inky Cap Mushrooms</div>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm- my-auto">
<div class="plant-card border-0 p-0" style="margin-top:60px;" data-toggle="modal" data-target="#myModalElderberry">
<img class="card-img plant-modal rounded-0 img-fluid p-0" src="images/elderberryflowers.jpeg">
<div class="plant-card-title" style="padding:10px 0px 10px 0px;">Elderberry Flowers</div>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-5"></div>
</div>
<!-- Plant Cards Row 2 -->
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-5"></div>
<div class="col-lg-2 col-md-2 col-sm-5 my-auto">
<div class="plant-card border-0 p-0" data-toggle="modal" data-target="#myModalWildSpinach">
<img class="card-img plant-modal rounded-0 img-fluid p-0" src="images/wildspinach.jpeg">
<div class="plant-card-title">Wild Spinach</div>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-5 my-auto">
<div class="plant-card border-0 p-0" data-toggle="modal" data-target="#myModalCattail">
<img class="card-img plant-modal rounded-0 img-fluid p-0" src="images/cattails.jpeg">
<div class="plant-card-title">Cattails</div>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-5 my-auto">
<div class="plant-card border-0 p-0" data-toggle="modal" data-target="#myModalMulberry">
<img class="card-img plant-modal rounded-0 img-fluid p-0" src="images/whitemulberry.jpeg">
<div class="plant-card-title">White Mulberry</div>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-5 my-auto">
<div class="plant-card border-0 p-0" data-toggle="modal" data-target="#myModalPineNuts">
<img class="card-img plant-modal rounded-0 img-fluid p-0" src="images/pinenuts.jpeg">
<div class="plant-card-title">Pine Nuts</div>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-5"></div>
</div>
</div>
<!-- MODALS -->
<!-- Juneberry Modal -->
<div id="myModalJuneberry" class="modal fade" role="dialog">
<div class="modal-dialog modal-dialog-centered modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="col-12 modal-title text-center">Juneberries</h4>
</div>
<div class="modal-body">
<img src="images/juneberry.jpg" class="modal-img" alt="juneberry">
<p class="modal-text text-center">Juneberry is a type of deciduous shrub or small tree that belongs to the family of roses. It originates from North America. Juneberry can be found in wet areas, usually near the rivers and streams. It grows on the moist, well-drained, acidic soil, exposed to direct sun or in the partial shade.</p>
<a class="modal-recipe-link text-center" href="https://www.allrecipes.com/recipe/78138/saskatoon-serviceberry-rhubarb-pie/?internalSource=hub%20recipe&referringContentType=Search&clickId=cardslot%203">Juneberry & Rhubarb Pie Recipe</a>
</div>
<div class="modal-footer">
<button type="button" class="btn" id="modal-button" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- White Sage Modal -->
<div id="myModalWhiteSage" class="modal fade" role="dialog">
<div class="modal-dialog modal-dialog-centered modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="col-12 modal-title text-center">White Sage</h4>
</div>
<div class="modal-body">
<img src="images/whitesage.jpg" width="200px" style="margin: 15px;" class="modal-img" alt="wildsage">
<p class="modal-text text-center">White sage is an important and sacred plant for Native Americans. This plant provides both food and medicine for the Kumeyaay. The seeds of the white sage can be toasted, ground up and used as a main ingredient for a meal called pinole. The young stalk of white sage is also peeled and eaten.</p>
<a class="modal-recipe-link text-center" href="https://www.allrecipes.com/recipe/222149/brie-and-sage-stuffed-chicken/?internalSource=hub%20recipe&referringContentType=Search">Brie & White Sage Stuffed Chicken Recipe</a>
</div>
<div class="modal-footer">
<button type="button" class="btn" id="modal-button" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Inky Cap Mushrooms Modal -->
<div id="myModalInkyCap" class="modal fade" role="dialog">
<div class="modal-dialog modal-dialog-centered modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="col-12 modal-title text-center">Inky Cap Mushrooms</h4>
</div>
<div class="modal-body">
<img src="images/inkycapmushroom.jpeg" width="200px" style="margin: 15px;" class="modal-img" alt="inkycaps">
<p class="modal-text text-center">Inky caps are a group of mushrooms that have an unusual method of distributing their spores. Members of the group digest their own cap. The gills are located on the undersurface of the cap and bear the reproductive spores. As autodigestion takes place, the cap and gills change into a black, gooey liquid.</p>
<a class="modal-recipe-link text-center" href="https://www.allrecipes.com/recipe/13096/cream-of-mushroom-soup-i/?internalSource=hub%20recipe&referringContentType=Search">Cream of Mushroom Soup Recipe</a>
</div>
<div class="modal-footer">
<button type="button" class="btn" id="modal-button" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Elderberry Flowers Modal -->
<div id="myModalElderberry" class="modal fade" role="dialog">
<div class="modal-dialog modal-dialog-centered modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="col-12 modal-title text-center">Elderberry Flowers</h4>
</div>
<div class="modal-body">
<img src="images/elderberryflowers.jpeg" width="200px" style="margin: 15px;" class="modal-img" alt="elderberry">
<p class="modal-text text-center">Elderberry produces pinnate leaves, composed of 5 to 7 oppositely arranged leaflets. Leaves are green colored and serrated on the edges. Elderberry develops ivory white flowers arranged in multi-branched, flat inflorescence called corymbs. Elderberry blooms during the spring and summer.</p>
<a class="modal-recipe-link text-center" href="https://www.allrecipes.com/recipe/245779/peach-elderberry-coffee-cake/?internalSource=hub%20recipe&referringContentType=Search">Peach & Elderberry Coffee Cake Recipe</a>
</div>
<div class="modal-footer">
<button type="button" class="btn" id="modal-button" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Wild Spinach Modal -->
<div id="myModalWildSpinach" class="modal fade" role="dialog">
<div class="modal-dialog modal-dialog-centered modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="col-12 modal-title text-center">Wild Spinach</h4>
</div>
<div class="modal-body">
<img src="images/wildspinach.jpeg" width="200px" style="margin: 15px;" class="modal-img" alt="wildspinach">
<p class="modal-text text-center">High in vitamin C and rich in riboflavin, one cup of cooked wild spinach provides an excellent source of vitamin A, folate, magnesium, potassium, vitamins E, B6, and thiamine. Wild spinach actually contains substantially more nutrients than cultivated spinach.</p>
<a class="modal-recipe-link text-center" href="https://www.allrecipes.com/recipe/14276/strawberry-spinach-salad-i/?internalSource=hub%20recipe&referringContentType=Search&clickId=cardslot%202">Strawberry Spinach Salad Recipe</a>
</div>
<div class="modal-footer">
<button type="button" class="btn" id="modal-button" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Cattail Modal -->
<div id="myModalCattail" class="modal fade" role="dialog">
<div class="modal-dialog modal-dialog-centered modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="col-12 modal-title text-center">Cattails</h4>
</div>
<div class="modal-body">
<img src="images/cattails.jpeg" width="200px" style="margin: 15px;" class="modal-img" alt="cattail">
<p class="modal-text text-center">Cattail shoots are great to forage in large quantities. You really don't need to worry about collecting too much. They are extremely prolific, not only by seed, but they also spread by rhizomes (which are edible year round, but are much more difficult to collect).</p>
</div>
<div class="modal-footer">
<button type="button" class="btn" id="modal-button" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- White Mulberry Modal -->
<div id="myModalMulberry" class="modal fade" role="dialog">
<div class="modal-dialog modal-dialog-centered modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"></button>
<h4 class="col-12 modal-title text-center">White Mulberry</h4>
</div>
<div class="modal-body">
<img src="images/whitemulberry.jpeg" width="200px" style="margin: 15px;" class="modal-img" alt="mulberry">
<p class="modal-text text-center">White mulberry is the largest type of mulberry. Mulberry has oval leaves with irregularly lobed or toothed edges. Bright green color of the leaves changes into yellow during the autumn. Leaves are alternately arranged on the branches.</p>
<a class="modal-recipe-link text-center" href="https://www.allrecipes.com/recipe/18516/mulberry-muffins/?internalSource=hub%20recipe&referringContentType=Search&clickId=cardslot%208">White Mulberry Muffin Recipe</a>
</div>
<div class="modal-footer">
<button type="button" class="btn" id="modal-button" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Pine Nuts Modal -->
<div id="myModalPineNuts" class="modal fade" role="dialog">
<div class="modal-dialog modal-dialog-centered modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="col-12 modal-title text-center">Pine Nuts</h4>
</div>
<div class="modal-body">
<img src="images/pinenuts.jpeg" width="200px" style="margin: 15px;" class="modal-img" alt="pinenuts">
<p class="modal-text text-center">Pine nuts, also called piñón, pinoli, or pignoli, are the edible seeds of pines. About 20 species of pine produce seeds large enough to be worth harvesting; in other pines, the seeds are also edible, but are too small to be of notable value as a human food.</p>
<a class="modal-recipe-link text-center" href="https://www.allrecipes.com/recipe/239171/joes-hummus-with-pine-nuts/?internalSource=hub%20recipe&referringContentType=Search&clickId=cardslot%207">Pine Nut Hummus Recipe</a>
</div>
<div class="modal-footer">
<button type="button" class="btn" id="modal-button" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<footer class="container-fluid text-center border-0 rounded-0 pl-0 pr-0 pt-4 pb-4 shadow">
<a href=""><i class="fa fa-facebook-official p-1"></i></a>
<a href=""><i class="fa fa-instagram p-1"></i></a>
<a href=""><i class="fa fa-pinterest p-1"></i></a>
<a href="https://github.com/lindseypaluso/project1"><i class="fa fa-git p-1"></i></a>
</footer>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
</body>
</html>