-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathcontact.html
370 lines (370 loc) · 14.1 KB
/
contact.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
357
358
359
360
361
362
363
364
365
366
367
368
369
370
<!doctype html>
<html lang="en" class="h-100">
<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">
<!--Page Stylesheet-->
<title>Horizon Photography | Contact</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="min-vh-100 d-flex flex-column 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">
<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>
<!--Div used to keep the footer at the bottom of the page, as the page content does not fill the page on some devices-->
<main class="my-auto">
<section class="container-fluid bg-dark text-white text-justify p-0">
<h1 class="d-none">Contact me</h1>
<article class="row p-0 m-0 h-100">
<div
class="col-12 p-3 bg-primary d-xxl-flex justify-content-xxl-center">
<div class="row w-100 w-xxl-50 mx-0 my-4 p-0">
<div class="col-12 pb-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-12">
<p class="text-center px-2">
I'm always seeking new experiences, perspectives and
opportunities. If you want to share something with me, please
go ahead. I'm open to discussion. Please comment, share, or
re-post my work. Feedback is always welcome!
</p>
</div>
</div>
</div>
<div class="col-12 p-0">
<div class="row p-1 mx-auto my-5">
<div class="col-12 text-center">
<h2 class="heading-font h3">Contact me</h2>
</div>
<div class="col-12 text-center">
<!-- Fires function in sendMail.js, sending form to [email protected] -->
<form id="contact-form">
<div class="row contact-row mx-auto">
<div class="col col-12 col-sm p-1">
<label for="name" class="visually-hidden">Name</label>
<input
type="text"
maxlength="100"
name="name"
id="name"
placeholder="Name"
class="form-control clear"
required>
</div>
<div class="col-12 col-sm mt-2 mt-sm-0 p-1">
<label for="number" class="visually-hidden"
>Number (Optional)</label
>
<input
type="tel"
name="number"
id="number"
placeholder="Number (Optional)"
class="form-control clear">
</div>
</div>
<div class="row contact-row mx-auto">
<div class="col mt-2 p-1">
<label for="contact-email" class="visually-hidden"
>Email</label
>
<input
type="email"
name="email"
id="contact-email"
placeholder="Email"
class="form-control clear"
required>
</div>
</div>
<div class="row contact-row mx-auto">
<div class="col mt-2 p-1">
<label for="cmessage" class="visually-hidden"
>Send me a message.</label
>
<textarea
name="message"
maxlength="1200"
placeholder="Send me a message."
class="form-control clear"
id="cmessage"
required></textarea>
</div>
</div>
<div class="row contact-row mx-auto">
<div class="col my-2 p-1">
<input
type="submit"
class="btn btn-primary text-white"
value="Send">
</div>
</div>
</form>
</div>
</div>
</div>
</article>
</section>
</main>
<!--Separate container for the footer to keep it pushed down to the bottom of the page as the page content is too short to fill many viewports-->
<!-- 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 sending email -->
<script src="assets/js/sendMail.js"></script>
</body>
</html>