generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathgallery.html
135 lines (132 loc) · 7.95 KB
/
gallery.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/style.css">
<title>Foraging Cardiff | Guided Forging Walks in the Heart of Cardiff</title>
</head>
<body>
<!-------------------------------------Navbar-->
<!---Navbar structure taken from bootsrap documentation URL:https://getbootstrap.com/docs/4.2/components/navbar/-->
<header>
<nav class="navbar navbar-light navbar-expand-sm">
<a class="navbar-brand mr-auto" href="home.html">
<img src="../milestone-project-1/assets/images/logo.jpg" width="100" height="100" alt="Logo">
</a>
<ul class="navbar-nav col-auto navbar-font">
<li class="nav-item">
<a class="nav-link" href="home.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="gallery.html">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</nav>
</header>
<!-----------------------------------------Page Header-->
<section>
<div class="jumbotron jumbotron-fluid jumbotron-header no-gutters no-gutters-gallery">
<div class="container">
<h1 class="display-4 jumbotron-text">Gallery</h1>
</div>
</div>
</section>
<!------------------------------------------Gallery-->
<section>
<span><h2 class="tagline">Commonly Foraged Plants <i class="fab fa-pagelines"></i></h2></span>
<div class="row no-gutters no-gutters-gallery">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 card-padding">
<!-------Card code taken from bootsrap documentation URL:https://getbootstrap.com/docs/4.2/components/card/-->
<div class="card mx-auto" style="width: 20rem;">
<img src="../milestone-project-1/assets/images/plantain.jpg" class="card-img-top" alt="Broadleaf Plantain">
<div class="card-body text-center">
<h5 class="card-title">Broadleaf Plantain</h5>
<p class="card-text">Found in parks and fields. The leaves decrease inflammation and the seeds promote digestive health. Use the leaves next time you get a nettle sting!</p>
<a href="https://www.wildfooduk.com/edible-wild-plants/greater-plantain/" target="_blank" class="btn btn-outline-success">Find out more</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 card-padding">
<!-------Card code taken from bootsrap documentation URL:https://getbootstrap.com/docs/4.2/components/card/-->
<div class="card mx-auto" style="width: 20rem;">
<img src="../milestone-project-1/assets/images/blackberry.jpg" class="card-img-top" alt="Blackberry fruit">
<div class="card-body text-center">
<h5 class="card-title">Blackberry</h5>
<p class="card-text">Delicious and easy to forage! The berries ripen in late summer and can be eaten raw, or used in cooking and making conserves.</p>
<a href="https://en.wikipedia.org/wiki/Blackberry#:~:text=Blackberries%20are%20perennial%20plants%20which,from%20the%20perennial%20root%20system.&text=The%20University%20of%20Arkansas%20has,or%20everbearing)%20red%20raspberries%20do." target="_blank" class="btn btn-outline-success">Find out more</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 card-padding">
<!-------Card code taken from bootsrap documentation URL:https://getbootstrap.com/docs/4.2/components/card/-->
<div class="card mx-auto" style="width: 20rem;">
<img src="../milestone-project-1/assets/images/meadowsweet.jpg" class="card-img-top" alt="Meadowsweet">
<div class="card-body text-center">
<h5 class="card-title">Meadowsweet</h5>
<p class="card-text">Found in fields and marshes. The honey, vanilla, and almond scent of this plant can be used to flavour foods in cooking.</p>
<a href="https://www.wildlifetrusts.org/wildlife-explorer/wildflowers/meadowsweet" target="_blank" class="btn btn-outline-success">Find out more</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 card-padding">
<!-------Card code taken from bootsrap documentation URL:https://getbootstrap.com/docs/4.2/components/card/-->
<div class="card mx-auto" style="width: 20rem;">
<img src="../milestone-project-1/assets/images/wild-garlic.jpg" class="card-img-top" alt="Wild Garlic">
<div class="card-body text-center">
<h5 class="card-title">Wild Garlic</h5>
<p class="card-text">This plant blooms in Spring - you'll smell it before you see it! Use in fresh salads, or to flavour your cooking.</p>
<a href="https://www.countryfile.com/how-to/food-recipes/wild-garlic-guide-where-to-find-how-to-cook-it-and-recipe-ideas/" target="_blank" class="btn btn-outline-success">Find out more</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 card-padding">
<!-------Card code taken from bootsrap documentation URL:https://getbootstrap.com/docs/4.2/components/card/-->
<div class="card mx-auto" style="width: 20rem;">
<img src="../milestone-project-1/assets/images/sloe.jpg" class="card-img-top" alt="Sloe Berry">
<div class="card-body text-center">
<h5 class="card-title">Sloe Berry</h5>
<p class="card-text">These can be found in heathland in Autumn time. Pair the berries with plenty of sugar to infuse gin.</p>
<a href="https://www.woodlandtrust.org.uk/blog/2020/09/sloe-gin-recipe/" target="_blank" class="btn btn-outline-success">Find out more</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4 card-padding">
<!-------Card code taken from bootsrap documentation URL:https://getbootstrap.com/docs/4.2/components/card/-->
<div class="card mx-auto" style="width: 20rem;">
<img src="../milestone-project-1/assets/images/magnolia.jpg" class="card-img-top" alt="Magnolia petals">
<div class="card-body text-center">
<h5 class="card-title">Magnolia</h5>
<p class="card-text">Stay away from the berries, but you can eat the petals! Use to flavour your cooking for a sweet ginger taste.</p>
<a href="https://en.wikipedia.org/wiki/Magnolia" target="_blank" class="btn btn-outline-success">Find out more</a>
</div>
</div>
</div>
</div>
<span><h2 class="tagline">Never munch on a hunch!</h2></span>
<span><h3 id="warning">Only eat something if you're <strong>100%</strong> certain what it is</h3></span>
</section>
<!-----------------------------------------Footer-->
<footer>
<div class="container container-fluid">
<div class="row">
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 footer-text">
Foraging Cardiff <i>guided foraging walks in the heart of Cardiff</i>
</div>
<ul class="list-inline col-xl-6 col-lg-6 col-md-6 col-sm-12 socials">
<span>Follow us:</span>
<li class="list-inline-item"><a href="https://www.facebook.com" target="_blank"><i class="fab fa-facebook"></i></a></li>
<li class="list-inline-item"><a href="https://www.twitter.com" target="_blank"><i class="fab fa-twitter"></i></a></li>
<li class="list-inline-item"><a href="https://www.instagram.com" target="_blank"><i class="fab fa-instagram"></i></a></li>
</ul>
</div>
</div>
</footer>
</body>
</html>