-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
356 lines (356 loc) · 13.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
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
<!doctype html>
<html lang="en">
<head>
<!--All photos with author, copyright, license, etc can be found at https://unsplash.com/collections/8825126/used-in-horizon-photo-->
<meta charset="utf-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta
name="keywords"
content="photography, gallery, travel, photo, landscape, portrait, photo gallery, nature photo,">
<meta name="description" content="Explore the world through my photos">
<meta name="author" content="Rory Sheridan">
<!--Fontawesome CSS-->
<link rel="stylesheet" href="assets/libraries/fontawesome/css/all.min.css">
<!--favicon links from https://www.favicon-generator.org/-->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link
rel="apple-touch-icon"
sizes="57x57"
href="assets/favicon/apple-icon-57x57.png">
<link
rel="apple-touch-icon"
sizes="60x60"
href="assets/favicon/apple-icon-60x60.png">
<link
rel="apple-touch-icon"
sizes="72x72"
href="assets/favicon/apple-icon-72x72.png">
<link
rel="apple-touch-icon"
sizes="76x76"
href="assets/favicon/apple-icon-76x76.png">
<link
rel="apple-touch-icon"
sizes="114x114"
href="assets/favicon/apple-icon-114x114.png">
<link
rel="apple-touch-icon"
sizes="120x120"
href="assets/favicon/apple-icon-120x120.png">
<link
rel="apple-touch-icon"
sizes="144x144"
href="assets/favicon/apple-icon-144x144.png">
<link
rel="apple-touch-icon"
sizes="152x152"
href="assets/favicon/apple-icon-152x152.png">
<link
rel="apple-touch-icon"
sizes="180x180"
href="assets/favicon/apple-icon-180x180.png">
<link
rel="icon"
type="image/png"
sizes="192x192"
href="assets/favicon/android-icon-192x192.png">
<link
rel="icon"
type="image/png"
sizes="32x32"
href="assets/favicon/favicon-32x32.png">
<link
rel="icon"
type="image/png"
sizes="96x96"
href="assets/favicon/favicon-96x96.png">
<link
rel="icon"
type="image/png"
sizes="16x16"
href="assets/favicon/favicon-16x16.png">
<link rel="manifest" href="assets/favicon/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta
name="msapplication-TileImage"
content="assets/favicon/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<!--Main Stylesheet-->
<link rel="stylesheet" href="assets/css/main.css" type="text/css">
<title>Horizon Photography | Home</title>
<!-- EmailJS Script for contact / newsletter form -->
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script>
</head>
<body class="bg-dark">
<header class="sticky-top">
<!-- Sticky Navbar with collapsible hamburger menu for smaller screens-->
<nav
class="navbar navbar-expand-md navbar-dark bg-dark heading-font h3 w-100 mb-0 p-0">
<div class="container-fluid">
<!-- Classes used to remove Logo's display on medium and above devices for the collapsible menu-->
<a href="index.html" id="nav-link" class="d-md-none ps-3">
<h1 class="visually-hidden">Horizon Photography Home Page</h1>
<img
src="assets/images/logo.png"
alt="Brand Logo"
class="navlogo navbar-brand h-auto">
</a>
<button
class="navbar-toggler me-1"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapse-navbar"
aria-controls="collapse-navbar"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div
class="collapse navbar-collapse justify-content-center w-100 mb-2"
id="collapse-navbar">
<ul class="navbar-nav w-100 w-xl-75">
<li class="nav-item m-md-auto text-end">
<a
class="nav-link pe-2 mt-2 mb-3 py-0 p-md-0"
href="gallery.html"
>Gallery</a
>
</li>
<!-- Classes used to remove Logo's display on smaller devices for the collapsible menu-->
<li class="d-none d-md-block mx-md-3">
<a href="index.html">
<img
src="assets/images/logo.png"
alt="Brand Logo"
class="navlogo navbar-brand m-0 h-auto">
</a>
</li>
<li class="nav-item m-md-auto text-end">
<a class="nav-link mb-2 pe-2 py-0 p-md-0" href="contact.html"
>Contact</a
>
</li>
</ul>
</div>
</div>
</nav>
</header>
<main>
<section class="bg-dark text-white text-justify">
<div class="p-0 m-0">
<!-- data-image-full class us utilised with lazyLoad function for progressive loading-->
<div
class="container-fluid callout-container d-flex position-relative bg-dark card-image splash-image m-0 p-0"
style="background-image: url(assets/images/callout_tn.jpg)"
data-image-full="assets/images/callout.jpg">
<img
class="d-none"
src="assets/images/callout_tn.jpg"
alt="Young man sits on rock above a blue stream surrounded by mountains in Autumn">
<div
class="container-fluid position-absolute d-xl-flex justify-content-xl-center"
id="jumbo-text">
<div class="row w-xl-50">
<div class="col px-2">
<h2 class="h1 heading-font m-0 pt-2">Explore</h2>
<p class="lead mt-0 mb-2 ms-1">
Join us in our travels around the world. See the beauty
through our eyes.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- Small info section on photographer-->
<div
class="container-fluid bg-primary d-xl-flex justify-content-xl-center">
<div class="row w-xl-75">
<div class="col-md-4 d-flex p-3">
<img
src="assets/images/portrait1-300.jpg"
class="rounded-circle img-fluid m-auto d-block"
id="portrait"
alt="Photographer portrait">
</div>
<div class="col-md-8 my-auto">
<!-- Class used to position the header to the right on medium and larger screens-->
<div class="d-md-flex flex-row-reverse">
<h2 class="h1 heading-font pt-md-2">About</h2>
</div>
<p>
I am a travel photographer who loves to take pictures of things
from all angles, be it food, cars, people, places and projects.
I shot many outdoor projects across continents. I work with
locals and travellers, often split my time between daily living
and tourist sights. I want to become a travel blogger,
photographer and guide with my own personal style, developing a
knowledge of my subject matter. I love authentic travel to
absorb its richness and experience, its nooks and crannies. The
world is its own special place and I want to show this to
everyone. if you are interested in purchasing or licensing a
photo, please see my
<strong>
<a
class="text-decoration-underline"
target="_blank"
href="https://500px.com/horizonrecordblog"
>500px page</a
> </strong
>.
</p>
</div>
</div>
</div>
<!-- Animation created and used for impact "div-hover" class is the dark overlay, the id contains the background image -->
<div class="container-fluid bg-primary">
<div class="row overflow-hidden">
<div id="map-link" class="div-hover col bg-dark d-flex p-0">
<a
href="gallery.html"
id="gallery-link"
class="link-hover d-flex h-100 w-100">
<h2 class="text-center heading-font h1 m-auto">
Travel <br>
Gallery
</h2>
</a>
</div>
</div>
</div>
</section>
</main>
<!-- Three section footer-->
<footer
class="container-fluid mt-auto d-xxl-flex justify-content-xxl-center">
<div class="row pb-1 pb-md-3 w-xxl-75">
<!-- Newsletter sign up -->
<div class="col-sm-4 mt-3 text-xxl-center">
<h2 class="heading-font h4">Newsletter</h2>
<p class="mb-1">Sign up here!</p>
<!-- Fires function in sendMail.js, sending form to [email protected] -->
<form id="news-form" class="form-group justify-content-center mb-1">
<div class="row">
<div class="col">
<label for="news-email" class="visually-hidden">Email</label>
<input
type="email"
name="email"
placeholder="Email"
class="form-control clear"
id="news-email"
required>
</div>
<div class="col-auto">
<input
type="submit"
value="Join"
class="btn btn-primary text-white">
</div>
</div>
</form>
</div>
<!-- Social Link section -->
<!-- HTML layout from Resume Project: https://github.com/Ri-Dearg/resume-project/blob/master/index.html (Correct link to Code Institute)-->
<div class="col-sm-4 mt-3 text-xxl-center">
<h2 class="heading-font h4">Social</h2>
<p class="mb-1">Purchase photos on on my 500px profile.</p>
<ul class="list-inline h4">
<li class="list-inline-item">
<a target="_blank" href="https://500px.com/horizonrecordblog">
<i
class="fab fa-500px rounded-circle text-center p-2"
aria-hidden="true"></i>
<span class="visually-hidden text-dark">500px</span>
</a>
</li>
<li class="list-inline-item">
<a
target="_blank"
href="https://www.facebook.com/ridearg-411885722878522/">
<i
class="fab fa-facebook rounded-circle text-center p-2"
aria-hidden="true"></i>
<span class="visually-hidden text-dark">Facebook</span>
</a>
</li>
<li class="list-inline-item">
<a target="_blank" href="https://www.instagram.com/ri.dearg/">
<i
class="fab fa-instagram rounded-circle text-center p-2"
aria-hidden="true"></i>
<span class="visually-hidden text-dark">Instagram</span>
</a>
</li>
<li class="list-inline-item">
<a
target="_blank"
href="https://www.flickr.com/photos/horizon_photo/">
<i
class="fab fa-flickr rounded-circle text-center p-2"
aria-hidden="true"></i>
<span class="visually-hidden text-dark">Flickr</span>
</a>
</li>
</ul>
</div>
<!-- Links to contact page -->
<div class="col-sm-4 mt-3 text-xxl-center">
<h2 class="heading-font h4">Contact</h2>
<p class="mb-0">
Send me a message at the
<a href="contact.html" class="link-primary" id="footer-contact"
>Contact</a
>
page! I'd love to know what you think.
</p>
</div>
</div>
</footer>
<!-- Modal for contact / newsletter form popup, styled in main.css, content is set by sendMail.js, based on success or error-->
<div
class="modal fade"
id="email-modal"
tabindex="-1"
role="dialog"
aria-labelledby="email-modal"
aria-hidden="true">
<div class="modal-dialog modal-lg mt-5">
<div class="modal-content bg-dark text-white">
<div class="header-wrapper bg-primary d-flex">
<div class="modal-header bg-primary mx-auto p-0">
<!-- Heading is set by sendMail.js -->
<h3 class="h4 my-3 heading-font" id="email-modal-header">
Email Response Info
</h3>
</div>
</div>
<div class="modal-body text-center">
<!-- Content is set by sendMail.js -->
<p class="my-0" id="email-modal-body"></p>
</div>
<div class="modal-footer mx-auto">
<button
type="button"
class="btn btn-primary text-white"
data-bs-dismiss="modal">
Close
</button>
</div>
</div>
</div>
</div>
<!-- JavaScript -->
<!-- Bootstrap JavaScript -->
<script src="assets/libraries/bootstrap/bootstrap.bundle.min.js"></script>
<!-- Script for image loading blur -->
<script src="assets/js/imageLoadSwitch.js"></script>
<!-- Script for sending email -->
<script src="assets/js/sendMail.js"></script>
</body>
</html>