-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
393 lines (363 loc) · 21.6 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
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
<!-- Declared the doctype as well as the language in the HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Explore the Middle East</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css" type="text/css" />
<link rel="stylesheet" href="assets/css/style.css" type="text/css" />
<!-- Script for the cdn to connect to emailJS -->
<script src="https://cdn.jsdelivr.net/npm/emailjs-com@2/dist/email.min.js"></script>
<script>
(function() {
emailjs.init("user_9UPvI1Hs4JHGtyozwple6");
})();
</script>
</head>
<body>
<!--Navigation bar which would direct the user to different areas of the site while making the current link active-->
<nav class="navbar navbar-expand-md navbar-light sticky-top">
<a class="navbar-brand">Explore The Middle East</a>
<!--The hamburger icon which would activate once the web browser gets to a specific size-->
<button class="navbar-toggler" data-toggle="collapse" data-target="#collapse_target">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="collapse_target">
<ul class="navbar-main navbar-nav">
<li class="nav-item">
<a class="nav-link active" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="country.html">Country</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="modal" data-target="#contact-modal">Contact Us</a>
</li>
</ul>
</div>
</nav>
<!--Assisted with the bootstrap code for the 'carousel-fade' class from
https://getbootstrap.com/docs/4.5/components/carousel/#crossfade
Making sure the width of each image would be stretched the width of the page as in the CSS,
it would only take 95% of vertical height due to the navigation bar taking 5% of it.-->
<header>
<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel">
<!-- Indicators under each caption -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
<li data-target="#myCarousel" data-slide-to="4"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<!--image taken from https://pixabay.com/photos/beirut-raouch%C3%A9-lebanon-sea-5172850/ -->
<img src="assets/img/carousel/beirut-hp.jpg" class="d-block w100" alt="Beirut">
<div class="carousel-caption">
<h3>Lebanon</h3>
<p>Beirut</p>
</div>
</div>
<div class="carousel-item">
<!--image taken from https://pixabay.com/photos/archaeological-city-petra-jordan-2595597/ -->
<img src="assets/img/carousel/jordan-hp.jpg" class="d-block w100" alt="Amman">
<div class="carousel-caption">
<h3>Jordan</h3>
<p>Amman</p>
</div>
</div>
<div class="carousel-item">
<!--image taken from https://pixabay.com/photos/burj-al-arab-dubai-sunset-emirates-5809639/ -->
<img src="assets/img/carousel/uae-hp.jpg" class="d-block w100" alt="Dubai">
<div class="carousel-caption">
<h3>UAE</h3>
<p>Dubai</p>
</div>
</div>
<div class="carousel-item">
<!--image taken from https://pixabay.com/photos/istanbul-cami-turkey-travel-sunset-2430072/ -->
<img src="assets/img/carousel/turkey-hp.jpg" class="d-block w100" alt="Istanbul">
<div class="carousel-caption">
<h3>Turkey</h3>
<p>Istanbul</p>
</div>
</div>
<div class="carousel-item">
<!--image taken from https://pixabay.com/photos/landscape-pyramids-desert-sand-5584652/ -->
<img src="assets/img/carousel/egypt-hp.jpg" class="d-block w100" alt="Cairo">
<div class="carousel-caption">
<h3>Egypt</h3>
<p>Cairo</p>
</div>
</div>
<!-- Left and Right controls for the carousel -->
<a href="#myCarousel" class="carousel-control-prev" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a href="#myCarousel" class="carousel-control-next" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</header>
<main>
<div class="description col-12">
<h1 class="homepage-title">The Wonders of the Middle East</h1>
<p>The Middle East holds hidden beauties that have gone untouched for so many years and under-appreciated.
It is not just the weather that can be enjoyed, but it is also the culture that makes the Middle East what it
is today. Hover over the pictures to see what they are about and to find out more.</p>
</div>
<div class="gallary">
<div class="row main-body">
<div class="col-lg-4 col-md-6 col-xs-12">
<div class="flip-card">
<div class="flip-card-in">
<div class="flip-front">
<!-- image taken from https://pixabay.com/photos/dubai-tower-arab-khalifa-burj-1420494/ -->
<img class="card-img" src="assets/img/card/khalifa-dubai-card.jpg" alt="Khalifa - dubai">
</div>
<div class="flip-back">
<h1>Dubai</h1>
<h4>Burj Khalifa</h4>
<p>Height of 829.8 m and is known to be the tallest structure and building in the world</p>
<form action="https://en.wikipedia.org/wiki/Burj_Khalifa" target="_blank">
<button type="submit" class="btn btn-primary btn-card">More Info!</button>
</form>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-xs-12">
<div class="flip-card">
<div class="flip-card-in">
<div class="flip-front">
<!-- image taken from https://pixabay.com/photos/tram-taksim-square-city-taksim-3420867/ -->
<img class="card-img" src="assets/img/card/taksim-square-turk-card.jpg" alt="taksim square - turkey">
</div>
<div class="flip-back">
<h1>Turkey</h1>
<h4>Taksim Square</h4>
<p>The heart of modern Istanbul where it is famed for its resturants, shopes and hotels.</p>
<form action="https://en.wikipedia.org/wiki/Taksim_Square" target="_blank">
<button type="submit" class="btn btn-primary btn-card">More Info!</button>
</form>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-xs-12">
<div class="flip-card">
<div class="flip-card-in">
<div class="flip-front">
<!-- image taken from https://pixabay.com/photos/sphinx-egypt-ancient-egyptian-2499773/ -->
<img class="card-img" src="assets/img/card/sphinx-egypt-card.jpg" alt="sphinx - egypt">
</div>
<div class="flip-back">
<h1>Egypt</h1>
<h4>Sphinx of Giza</h4>
<p>The largest and most famous Great Spinx of Giza facing directly from West to East</p>
<form action="https://en.wikipedia.org/wiki/Great_Sphinx_of_Giza" target="_blank">
<button type="submit" class="btn btn-primary btn-card">More Info!</button>
</form>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-xs-12">
<div class="flip-card">
<div class="flip-card-in">
<div class="flip-front">
<!-- image taken from https://pixabay.com/photos/sphinx-egypt-ancient-egyptian-2499773/ -->
<img class="card-img" src="assets/img/card/madonna-christen-lebanon.card.jpg" alt="madonna - lebanon">
</div>
<div class="flip-back">
<h1>Lebanon</h1>
<h4>Our Lady of Lebanon</h4>
<p>The shrine where Christians and Muslims gather</p>
<form action="https://en.wikipedia.org/wiki/Our_Lady_of_Lebanon#:~:text=The%20Statue%20of%20Our%20Lady,of%20Our%20Lady%20of%20Lebanon." target="_blank">
<button type="submit" class="btn btn-primary btn-card">More Info!</button>
</form>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-xs-12">
<div class="flip-card">
<div class="flip-card-in">
<div class="flip-front">
<!-- image taken from https://pixabay.com/photos/dead-sea-swim-mud-pack-summer-1259507/ -->
<img class="card-img" src="assets/img/card/dead-sea-jordan-card.jpg" alt="dead sea - jordan">
</div>
<div class="flip-back">
<h1>Jordan</h1>
<h4>Dead Sea</h4>
<p>The sea of salt. It is of the world's saltiest bodies of water.</p>
<form action="https://en.wikipedia.org/wiki/Dead_Sea" target="_blank">
<button type="submit" class="btn btn-primary btn-card">More Info!</button>
</form>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-xs-12">
<div class="flip-card">
<div class="flip-card-in">
<div class="flip-front">
<!-- image taken from https://pixabay.com/photos/atlantis-the-palm-dubai-atlantis-5509820/ -->
<img class="card-img" src="assets/img/card/atlantis-dubai-card.jpg" alt="atlantis - dubai">
</div>
<div class="flip-back">
<h1>Dubai</h1>
<h4>Atlantis, The Palm Dubai</h4>
<p>The first resort to be built on an Island of sand.</p>
<form action="https://en.wikipedia.org/wiki/Atlantis_The_Palm,_Dubai" target="_blank">
<button type="submit" class="btn btn-primary btn-card">More Info!</button>
</form>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-xs-12">
<div class="flip-card">
<div class="flip-card-in">
<div class="flip-front">
<!-- image taken from https://pixabay.com/photos/coffee-pot-coffee-traditional-4506001/ -->
<img class="card-img" src="assets/img/card/turkish-coffee-card.jpg" alt="turkish coffee - turkey">
</div>
<div class="flip-back">
<h1>Turkey</h1>
<h4>Turkish Coffee</h4>
<p>A method of brewing very finely ground coffee.</p>
<form action="https://en.wikipedia.org/wiki/Turkish_coffee" target="_blank">
<button type="submit" class="btn btn-primary btn-card">More Info!</button>
</form>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-xs-12">
<div class="flip-card">
<div class="flip-card-in">
<div class="flip-front">
<!-- image taken from https://pixabay.com/photos/temple-of-hercules-historic-site-4331371/ -->
<img class="card-img" src="assets/img/card/temple-of-hercules-jordan-card.jpg" alt="temple of hercules - jordan">
</div>
<div class="flip-back">
<h1>Jordan</h1>
<h4>Temple of Hercules</h4>
<p>Most significant roman structure in Amman.</p>
<form action="https://en.wikipedia.org/wiki/Temple_of_Hercules_(Amman)" target="_blank">
<button type="submit" class="btn btn-primary btn-card">More Info!</button>
</form>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-xs-12 last-card">
<div class="flip-card">
<div class="flip-card-in">
<div class="flip-front">
<!-- image taken from https://pixabay.com/photos/cairo-egypt-camel-egyptian-desert-1051378/ -->
<img class="card-img" src="assets/img/card/pyramid-cairo-card.jpg" alt="pyramid - cario">
</div>
<div class="flip-back">
<h1>Egypt</h1>
<h4>Egyption Pyramids</h4>
<p>One of the seven original wonders of the ancient world.</p>
<form action="https://en.wikipedia.org/wiki/Egyptian_pyramids" target="_blank">
<button type="submit" class="btn btn-primary btn-card">More Info!</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
<!-- Contact Me section as it is built within a modal feature. This has been utilised from bootstrap however modified to make it work for my needs.
This is being called from the navigation bar. -->
<div class="modal fade" id="contact-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<!-- The content for the Contact Me modal form -->
<div class="modal-content">
<div class="modal-header">
<h1 class="contact-title">Contact Me</h1>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!-- The body of the contact form where the user would fill out and have it sent to me. -->
<div class="contact-body">
<div class="row bg-color-contact">
<div class="contact-headers">
<h3 class="contact-heading">Is there a country in the Middle East you would like to know more about?</h3>
<h5>Please let me know.</h5>
</div>
<!-- The Modal form which displays the fields of entry ensuring all is required before sending to the site admin -->
<div class="center-form">
<form id="contactForm">
<input type="text" name="fullname" class="form-control" id="from_fullname" placeholder="Full Name" required />
<input type="text" name="useremail" class="form-control" id="from_useremail" placeholder="Email" required />
<input type="text" name="country_request" class="form-control" id="country_requested" placeholder="Country in Question?" required />
<input type="text" name="question_asked" class="form-control" id="question_asked" placeholder="Question?" required />
<!-- Buttons used to close the modal as well as the submit functionality which would activate the sendEmail.js file -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" id="send-modal-button">Send</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<footer>
<div class="footer-section">
<div class="row col-12">
<!--Quick links which would redirect you to different parts of the site-->
<div class="col-lg-4 col-md-3 quicklinks">
<h4>Quick Links</h4>
<div class="row">
<div class="col col-12">
<a href="index.html">Home</a>
</div>
<div class="col col-12">
<a href="country.html">Country</a>
</div>
<div class="col col-12">
<a data-toggle="modal" data-target="#contact-modal">Contact Us</a>
</div>
</div>
</div>
<!-- Utilising font awesome for the icons to link users to my social media links -->
<div class="col-lg-4 col-md-6 social-media">
<h4>Social Media</h4>
<div class="social-logos">
<a href="https://www.facebook.com/" target="_blank"><i class="fab fa-facebook"></i></a>
<a href="https://www.instagram.com/" target="_blank"><i class="fab fa-instagram"></i></a>
<a href="https://twitter.com/" target="_blank"><i class="fab fa-twitter"></i></a>
<a href="https://www.linkedin.com/" target="_blank"><i class="fab fa-linkedin"></i></a>
</div>
</div>
<!--Contact information displayed in the footer as alternative methods to reach out-->
<div class="col-lg-4 col-md-3 contact-us">
<h4>Contact Info</h4>
<p>Phone Number: +440000000000<br>
Monday - Friday<br>
09:00 - 17:00</p>
</div>
</div>
</div>
</footer>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js" integrity="sha384-LtrjvnR4Twt/qOuYxE721u19sVFLVSA4hf/rRt6PrZTmiPltdZcI7q7PXQBYTKyf" crossorigin="anonymous"></script>
<script src="assets/js/sendEmail.js"></script>
</body>
</html>