generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
179 lines (179 loc) · 11 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CDN, resource: https://www.bootstrapcdn.com/ -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<!-- Font Awesome CDN, resource: https://www.bootstrapcdn.com/fontawesome/ -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- Leaftlet CSS, resource: https://leafletjs.com/examples/quick-start/ -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
crossorigin=""/>
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<link rel="icon" type="img/png" href="assets/img/igd-favicon.png">
<title>Irish Gold Distillers | Whiskey Distilleries</title>
</head>
<body>
<!-- Start Header -->
<header>
<!-- Resource: Navbar code sourced from Bootstrap and custom styling added - https://getbootstrap.com/docs/4.0/components/navbar/ -->
<nav class="navbarCustom navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="index.html">
<img src="assets/img/igd-logo-white.png" class="d-inline-block align-top logo" alt="Irish Gold Distillers logo">
</a>
<!-- Hamburger button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ml-auto">
<a class="navItem nav-link" href="index.html">Home</a>
<a class="navItem nav-link" href="#discoverDistilleries">
Discover Distilleries
<span class="sr-only">(current)</span>
</a>
<a class="navItem nav-link" href="#history">History</a>
</div>
</div>
</nav>
</header>
<!-- Start Hero Image -->
<section class="hero-image container-fluid">
<div class="hero-text">
<h1>Irish Gold Distillers</h1>
<h2>The Home of Ireland's Whiskey Distilleries</h2>
<a href="#discoverDistilleries" class="btn hero-button">Discover Distilleries</a>
</div>
</section>
<!-- Start Tab Section -->
<section class="distillerySection container" id="discoverDistilleries">
<h2>Discover Distilleries</h2>
<!-- Resource: Tab code sourced from W3schools and custom styling added - https://www.w3schools.com/howto/howto_js_tabs.asp -->
<div class="tab">
<!-- Resource: Icons - https://fontawesome.bootstrapcheatsheets.com/# -->
<!-- Resource: invalidateSize() to display map fully in tab - https://stackoverflow.com/questions/36246815/data-toggle-tab-does-not-download-leaflet-map/36257493#36257493 -->
<button class="tablinks mapTab col-xs-12" onclick="openSearch(event, 'mapView'); map.invalidateSize()">
<i class="fa fa-map"></i>
Map View
</button>
<button class="tablinks col-xs-12" id="defaultOpen" onclick="openSearch(event, 'gridView')">
<i class="fa fa-map-marker"></i>
Grid View
</button>
</div>
<!-- Start Map View Tab -->
<div id="mapView" class="tabcontent">
<h3>Map View</h3>
<p>
<strong>Click</strong> on the interactive map to explore the whiskey distilleries across Ireland:
</p>
<br>
<!-- Leaflet map goes here-->
<div id="map"></div>
</div>
<!-- Start Grid View Tab -->
<div id="gridView" class="tabcontent">
<h3>Grid View</h3>
<p>Search for whiskey distilleries in Ireland using the filter menu below:</p>
<br>
<div class="dropdown">
<!-- Resource: Icon sourced from Font Awesome https://fontawesome.bootstrapcheatsheets.com -->
<!-- Resource: Hover button - https://www.w3schools.com/howto/howto_css_dropdown.asp -->
<button id="hoverButton">
Filter By County
<i class="fa fa-sort-desc"></i>
</button>
<div class="dropdownContent" id="filterCounties"></div>
</div>
<div class="displayResults">
Displaying results for:
<span id="results">Kerry</span>
</div>
<div>
<div class="row">
<!-- Display dataset in grid format here -->
<div id="gridContent"></div>
</div>
</div>
</div>
</section>
<!-- Start History Section -->
<section class="historySection" id="history">
<div class="container">
<h2>History of Ireland's Whiskey Distilleries</h2>
<!-- Resource: Content sourced from Drinks Ireland - https://www.drinksireland.ie/Sectors/DI/DI.nsf/vPagesWhiskey/Industry_in_Ireland~the-irish-whiskey-industry!OpenDocument -->
<p>
Ireland is the home of whiskey! Whiskey has been distilled in Ireland since the 6th century, it has deep roots in Ireland and is one of the oldest spirit drinks in Europe. Industry investment and consequent production grew rapidly in the late 18th century. At its height in the mid-19th century 88 licenced distilleries, producing more than 12m 9-litre cases annually, made Irish Whiskey the largest global spirits category of the time. However a combination of events led to the industry's demise and by the mid-1980s only two Irish whiskey distilleries remained, both owned by Irish Distillers. Scotch, Bourbon, and Canadian whiskey had all surged and left Irish volumes far behind at about 1% of global sales.
</p>
<p>
The late 1980s marked the beginning of Irish Whiskey’s comeback. In 1988, Irish Distillers (IDL) became a member of Group Pernod Ricard, which provided massive distribution opportunities for Jameson, and the other IDL Irish whiskey brands, through its well-established global sales network. In 1987, Cooley Distillery was established and was the first independent distillery to begin distilling Irish Whiskey in over 100 years. However, in 2010, there were still only four distilleries in Ireland in operation producing and selling Irish Whiskey. However, by Decembers 2019 the number of operational whiskey distilleries in Ireland had increased to 32, demonstrating the scale of Ireland's Whiskey Renaissance. The growth in distilleries has been matched by explosion in global sales, rising from c. 6 million cases (72 million bottles) in in 2010 to 12 million cases (144 million bottles) in January 2020. Exports of Irish whiskey were worth over €1 billion to the all-island economy in 2020.
</p>
</div>
</section>
<!-- Start Image Section -->
<div class="imageSection">
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 imageOne">
<!-- Resource: Photo by Dylan de Jonge on Unsplash https://unsplash.com/photos/pe9T4ROjpzQ -->
<img src="assets/img/whiskey-pour.jpg" alt="Hand holding whiskey bottle and pouring into glass" class="img-fluid">
</div>
<div class="col-xs-12 col-md-6">
<!-- Resource: Photo by Josh Collesano on Unsplash https://unsplash.com/photos/coTTvjild6U -->
<img src="assets/img/whiskey-casks.jpg" alt="Whiskey casks stacked" class="img-fluid">
</div>
</div>
</div>
</div>
<!-- Start Footer -->
<footer class="footer">
<div class="container">
<div class="row">
<div class="contact col-xs-12 col-md-8">
<p><strong>Contact Us</strong></p>
<!-- Resource: Icons in footer sourced from Font Awesome https://fontawesome.bootstrapcheatsheets.com/ -->
<p><i class="fa fa-phone-square"></i>(01) 123 4567</p>
<p class="enquiries"><strong>General Enquiries</strong></p>
<p>
<a href="mailto:info@irishgolddistillers.com"><i class="fa fa-envelope"></i> info@irishgolddistillers.com</a>
</p>
</div>
<div class="cols-xs-12 col-md-4">
<p>
<strong>Links</strong>
</p>
<ul class="footer-links">
<li>
<a href="#discoverDistilleries">Discover Distilleries</a>
</li>
<li>
<a href="#history">History</a>
</li>
</ul>
<a href="index.html"><img src="assets/img/igd-logo-white.png" alt="Irish Gold Distillers logo"></a>
</div>
</div>
</div>
</footer>
<!-- Scripts -->
<!-- Bootstrap JavaScript scripts - https://getbootstrap.com/docs/4.4/getting-started/introduction/ -->
<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>
<!-- Leaflet Script - https://leafletjs.com/examples/quick-start/ -->
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin="">
</script>
<!-- JQuery Script - https://code.jquery.com/ -->
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous">
</script>
<!-- Own script files -->
<script src="assets/js/dataset.js"></script>
<script src="assets/js/leaflet.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>