generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
287 lines (287 loc) · 15.7 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="assets/css/style.css" type="text/css">
<!-- Resource: Add favicon to website https://favicon.io/tutorials/how-to-add-a-favicon-to-a-website-png-format/ -->
<link rel="icon" type="img/png" href="assets/img/favicon-32x32.png">
<title>The Leafy Bean | Coffee Shop</title>
</head>
<body>
<!-- Start header -->
<header class="container">
<!-- Resource: Bootstrap code for navbar https://getbootstrap.com/docs/4.0/components/navbar/ -->
<!-- Resource: Collapse navbar after cliking nav item https://stackoverflow.com/questions/16680543/hide-twitter-bootstrap-nav-collapse-on-click/23926645 -->
<nav class="navbar-custom navbar fixed-top navbar-expand-lg navbar-light bg-white" data-toggle="collapse" data-target=".navbar-collapse.show">
<a class="navbar-brand" href="index.html">
<img src="assets/img/logo.png" class="logo" alt="The Leafy Bean logo">
</a>
<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 hamburger-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav ml-auto">
<!-- Resource: How to create jumplinks https://stackoverflow.com/questions/34125917/how-to-make-anchor-links-jump-to-content-when-using-bootstrap-tabs -->
<a class="nav-item nav-link" href="#coffee-to-go-nav-link">Coffee to Go</a>
<a class="nav-item nav-link" href="#bean-points-nav-link">Bean Points</a>
<a class="nav-item nav-link" href="#about-nav-link">About</a>
<a class="nav-item nav-link" href="#find-us-nav-link">Find Us</a>
<a class="nav-item nav-link" href="#contact-nav-link">Contact</a>
</div>
</div>
</nav>
</header>
<!-- Start hero image -->
<!-- Resource: Image sourced from Chevanon Photography on Pexels https://www.pexels.com/photo/close-up-of-hand-holding-cappuccino-302901/ -->
<section class="hero-image container-fluid">
<div class="container">
<div class="row">
<div class="hero-text col-xs-12 col-sm-6 col-md-6 col-lg-4">
<h1 id="hero-h1">The Leafy Bean</h1>
<!-- Coffee to Go nav link -->
<div id="coffee-to-go-nav-link"></div>
<br>
<h2 id="hero-h2">Discover the finest coffee in the heart of Blackrock</h2>
<br>
<a class="btn btn-light" id="hero-button" href="#find-us-nav-link" role="button">Visit Us</a>
</div>
</div>
</div>
</section>
<!-- Start 'Coffee to Go' section -->
<!-- Background colour box around 'Coffee to Go' and 'Four Icons'sections -->
<div class="background-colour custom-section">
<section>
<div class="container">
<h2>Coffee to Go</h2>
<div class="row">
<div class="col-12 col-sm-6">
<p>
We're delighted to launch our new 'Coffee to Go' service in
Blackrock. We have our full range of coffees available for takeaway,
including our most popular Leafy Bean Signature Caramel Macchiato!
</p>
</div>
<div class="col-12 col-sm-6">
<p>
Our takeaway coffees are still being prepared by our expert baristas,
using only the highest quality coffee beans. So your takeaway coffee
will taste just as delicious as those in-store.
</p>
</div>
</div>
</div>
</section>
<!-- Start Four Icons section -->
<!-- Resource: https://getbootstrap.com/docs/4.5/layout/grid/#stacked-to-horizontal -->
<div>
<div class="container">
<div class="row">
<div class="col-6 col-lg-3 four-icons zoom">
<span class="fa fa-coffee my-icon" aria-hidden="true"></span>
<p>
<strong>Top Quality<br>Coffee Beans</strong>
</p>
</div>
<div class="col-6 col-lg-3 four-icons zoom">
<span class="fa fa-user my-icon" aria-hidden="true"></span>
<p>
<strong>Experienced<br>Baristas</strong>
</p>
</div>
<div class="col-6 col-lg-3 four-icons zoom">
<span class="fa fa-envira my-icon" aria-hidden="true"></span>
<p>
<strong>We Accept<br>Reusable Cups</strong>
</p>
</div>
<div class="col-6 col-lg-3 four-icons zoom">
<span class="fa fa-map-marker my-icon" aria-hidden="true"></span>
<!-- Bean Points nav link -->
<div id="bean-points-nav-link"></div>
<p>
<strong>Located in<br>Blackrock Village</strong>
</p>
</div>
</div>
</div>
</div>
<!-- End background colour box around 'Coffee to Go' and 'Four Icons'sections -->
</div>
<!-- Start 'Bean Points' section -->
<div class="custom-section">
<div class="container">
<div class="row bean-points-parent">
<div class="col-12 col-md-6 bean-points-image">
<!-- Resource: Coffee beans image from Mockup Graphics on Unsplash https://unsplash.com/s/photos/coffee-beans -->
<img src="assets/img/coffee-beans-cropped.jpg" class="img-fluid" alt="Coffee beans">
</div>
<article class="col-12 col-md-6 bean-points-text">
<h2>Bean Points</h2>
<p>
Your loyalty means a lot to us and we'd like to thank you through our Bean Points system.
</p>
<p>
For every coffee you buy, we'll give you back 2 Bean Points. Once you've collected 12 Bean Points (or 6 coffees), we'll reward you with a <strong>free coffee</strong> of your choosing. It's easy to get started:
</p>
<ol>
<li>Collect a Bean Points loyalty card on your next visit</li>
<li>Get your loyalty card stamped after each coffee purchase</li>
<li>Watch your Bean Points add up</li>
<li>Collect your free coffee once you've reached 12 points</li>
</ol>
</article>
</div>
</div>
</div>
<!-- Start 'About' section -->
<div id="about-nav-link"></div> <!-- About nav link -->
<div class="custom-section background-colour">
<div class="container">
<div class="row">
<article class="col-12 col-sm-6">
<h2>About</h2>
<p>
The Leafy Bean is a lively independent coffee shop located in the heart of Blackrock village, Dublin. We're passsionate about coffee which you'll see from our expert baristas to our high quality coffee beans.
</p>
<p>
We've spent many years perfecting our coffees by sampling and sourcing only the finest coffee beans to ensure each coffee we provide you with is of exceptional quality.
</p>
<p>
We recently launched our 'Coffee to Go' service so we can continue to provide our customers with their favourite coffee during the COVID-19 pandemic.
</p>
</article>
<div class="col-6 col-sm-3 about-column">
<!-- Resource: Image sourced from Porapak Apichodilok on Pexels https://www.pexels.com/photo/adult-barista-beverage-cafe-373639/ -->
<img src="assets/img/coffee-shop-1.jpg" class="img-fluid" alt="Waiter holding coffee in hands">
<!-- Resource: Image sourced from Jez Timms on Unsplash https://unsplash.com/photos/NZMfceSGoQY -->
<img src="assets/img/coffee-shop-2.jpg" class="img-fluid" alt="Coffee and pastries on wooden table">
</div>
<div class="col-6 col-sm-3 about-column">
<!-- Resource: Image sourced from Nathan Dumlao on Unsplash https://unsplash.com/photos/6VhPY27jdps -->
<img src="assets/img/coffee-shop-3.jpg" class="img-fluid" alt="Three hands holding coffee cups together">
<!-- Resource: Image sourced from Jessy Smith on Unsplash https://unsplash.com/photos/oKM4WFAoKmI -->
<img src="assets/img/coffee-shop-4.jpg" class="img-fluid" alt="Coffee machine">
</div>
</div>
<!-- Find Us nav link -->
<div id="find-us-nav-link"></div>
</div>
</div>
<!-- Start 'Opening Hours'/ 'Find Us' sections -->
<section class="custom-section">
<div class="container">
<div class="row opening-hours-parent">
<div class="col-12 col-md-6 opening-hours-map">
<div>
<!-- Resource: https://www.maps.ie/create-google-map/, https://www.youtube.com/watch?v=3posLKQrhfU -->
<iframe src="https://maps.google.com/maps?width=100%25&height=600&hl=en&q=Main%20Street,%20Blackrock,%20Dublin+(The%20Leafy%20Bean)&t=&z=14&ie=UTF8&iwloc=B&output=embed"></iframe>
</div>
</div>
<div class="col-12 col-md-6 opening-hours">
<h2>Opening Hours</h2>
<p>
<span class="fa fa-clock-o fontawesome-icons" aria-hidden="true"></span>
<strong>Monday - Friday:</strong> 9.00am - 18.00pm
</p>
<p><strong class="opening-hours-text">Saturday:</strong> 9.00am - 17.00pm</p>
<p><strong>Sunday:</strong> 9.00am - 16.00pm</p>
<h2>Find Us</h2>
<p>
<span class="fa fa-map-marker fontawesome-icons"></span>
<strong>The Leafy Bean</strong>
</p>
<p>Main Street</p>
<p>Blackrock</p>
<p>Dublin</p>
<!-- Contact nav link-->
<div id="contact-nav-link"></div>
</div>
</div>
</div>
</section>
<!-- Contact section -->
<section class="custom-section form-section">
<div class="container">
<div class="row">
<div class="col-12">
<h2>Contact</h2>
<!-- Resource: Icons sourced from https://fontawesome.bootstrapcheatsheets.com/# -->
<span class="fa fa-phone fontawesome-icons" aria-hidden="true"></span>
<span class="contact-number">(01) 123 4567</span>
<span class="fa fa-envelope fontawesome-icons" aria-hidden="true"></span>
<span class="contact-email"><a href="mailto:support@theleafybean.ie">support@theleafybean.ie</a></span>
</div>
</div>
<br>
<!-- Resource: Form code sourced from https://getbootstrap.com/docs/4.0/components/forms/ -->
<form>
<div class="row contact-form-text">
<div class="col-12 col-sm-6">
<label for="form-message" class="contact-form-text">Your Name</label>
<input type="text" id="your-name" class="form-control" required>
</div>
<div class="col-12 col-sm-6">
<label for="form-message" class="contact-form-text">Your Email</label>
<input type="email" class="form-control" id="email" required>
</div>
<br>
<div class="col-12">
<label for="form-message" class="contact-form-text">How can we help you?</label>
<textarea class="form-control" id="form-message" rows="3" required></textarea>
</div>
<div class="col-12">
<button type="submit" class="btn btn-light float-right" id="contact-btn-form">Submit</button>
</div>
</div>
</form>
</div>
</section>
<!-- Footer -->
<footer class="footer custom-section">
<div class="container">
<div class="row">
<div class="col-12 col-md-6 contact-footer">
<h5>Contact:</h5>
<span class="fa fa-phone fontawesome-icons" aria-hidden="true"></span>
<span class="contact-number">(01) 123 4567</span>
<br>
<span class="fa fa-envelope fontawesome-icons" aria-hidden="true"></span>
<span class="contact-email" id="footer-email">
<a href="mailto:support@theleafybean.ie">support@theleafybean.ie</a>
<br>
</span>
<span class="fa fa-map-marker fontawesome-icons"></span>
<span>
<strong>The Leafy Bean</strong>
</span>
<div class="address">Main Street<br>
Blackrock
<br>
Dublin
</div>
</div>
<div class="col-12 col-md-6 follow-us">
<h5>Follow us:</h5>
<a href="https://www.facebook.com" target="_blank">
<span class="fa fa-facebook-square social-icon"></span>
</a>
<a href="https://www.instagram.com" target="_blank">
<span class="fa fa-instagram social-icon"></span>
</a>
<br>
<a href="index.html">
<img src="assets/img/logo-white.png" class="logo-footer" alt="The Leafy Bean logo">
</a>
</div>
</div>
</div>
</footer>
<!-- Resource: JS script https://getbootstrap.com/docs/4.5/getting-started/introduction/-->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>