generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
256 lines (231 loc) · 12.9 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
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<link rel="stylesheet" href="./assets/css/style.css">
<meta name="Description"
content="Lost in Thailand brings you the information you need when thinking of visiting Thailand. We provide you with the best knwolegde and locations to truly maximimise your stay and get the best experience possible, get in touch with our staff today!">
<meta name="keywords"
content="Thailand, Holiday, Temples, Temples in thailand, Beaches, Beaches in thailand, Activities in thailand, Elephants, Elephant Sanctuary, Tigers, Tiger Sanctuary, Bungee jumping Thailand, Krabi, Krabi beach, Emerald Buddah, Thailand tour">
<title>Lost In Thailand | A Tour Guide</title>
</head>
<body>
<!-- Navbar -->
<nav class="navbar fixed-top navbar-dark navbar-expand-md p-md-3" id="navbarScroll">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
<span></span>
<span></span>
</button>
<div>
<a href="#" class="navbar-brand">LiT</a>
</div>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link text-white" href="#">Home</a>
</li>
<li class="nav-item"><a class="nav-link text-white" href="#my-about">About</a>
</li>
<li class="nav-item"><a class="nav-link text-white" href="#places">Places</a>
</li>
<li class="nav-item"><a class="nav-link text-white" href="#myform">Contact</a>
</li>
</ul>
</div>
</nav>
<!-- hero image -->
<div class="banner-image fader align-items-center justify-content-center d-flex w-100 vh-100 d-flex">
<div class="content text-center">
<h1 class="title text-white text-center text-uppercase">Lost In Thailand</h1>
</div>
</div>
<!-- home/about section -->
<div id="my-about" class="container text-center mb-5 p-3 about">
<h1>About</h1>
<hr>
<p>Here at Lost In Thailand we aim to bring you an insight to those who are thinking of visiting Thailand or are
there already but lost. We bring you advice
and recommendations based on actual personal visits to t he country. We try to bring you our opinion on the
best places to visit and the best acitivites to do
whilst you are on your trip. Once you have viewed the best places to visit you can then use our contact services to
get in touch with us to discuss your trip. We recommend a mixture
of city and beach breaks so you can get the best out of Thailand.
</p>
<hr>
</div>
<hr>
<!--
--- Places Section --- -->
<div id="places" class=" container text-center p-3 places">
<h1>Places</h1>
<p>
Below we have three sections and our insight into each category. Feel free to browse our number one most
recommended place to visit. You can also use our map where you are be able to see additional locations and
also find out more informaton on each one.
</p>
</div>
<section class="container">
<div class="catagory-option row">
<div class="options temples col-md col-sm-12" onclick="showInfo(0, 'info')">
<h2>Temples</h2>
</div>
<div class="options beaches col-md col-sm-12">
<div onclick="showInfo(1)">
<h2>Beaches</h2>
</div>
</div>
<div class="options activities col-md col-sm-12">
<div onclick="showInfo(2)">
<h2>Activities</h2>
</div>
</div>
</div>
<div class="container">
<div class="info row">
<div class="info-img col-md col-12">
<img src="assets/images/truth.jpeg" alt="An image of the Sanctuary of Truth in Pattaya Thailand">
</div>
<div class="col-lg col-sm-12 info-text">
<h2>The Sanctuary of Truth</h2>
<p> There are thousands of temples across Thailand, however to visit every single one in one trip
would be impossible. We have provided our most recommended temples to visit to get the best
experience. Here we show you the number one must see place which is The Sanctuary of Truth. This
is based on our opinion and on personal experience. The Sanctuary as can be seen in the photo
below is completely covered in carved wooden sculptures which are all done by hand on site. The
wood is continuously replenished as it weathers and wears over time. It is a beautiful site to
see from the outside but internally it is even more rewarding. The temple houses what seems to
be an endless supply of detail which you cannot get enough of. This is not a place you can walk
in and out of within 5 minutes. The place is mesmerising and enters as our most recommended
temple to visit.
</p>
</div>
</div>
<div class="info hide row">
<div class="info-img col-md col-12 ">
<img src="assets/images/beach.jpeg" alt="An image of Ao Nang Beach in Krabi Thailand">
</div>
<div class="col-lg col-sm-12 info-text">
<h2>Bamboo Island Beach</h2>
<p>Thailand is famous for it's beaches and which have featured in many films such as 'The Beach' with Leonardo Dicaprio.
Situated in between Krabi and the Phi Phi Islands, Bamboo Island is only accessible by boat.
However this hidden gem is worth the trip. The island is very simple and does not have any
restaurants or cafes, this is the place to go if you want a taste of paradise. The island is
almost untouched which means the water is crystal clear, the sand is silky smooth. This magical
place has entered our number one spot in the top beaches to visit for its beauty and simplicity!
</p>
</div>
</div>
<div class="info hide row">
<div class="info-img col-md-6 col-12">
<img src="assets/images/elephant.jpeg" alt="An image of a mother elephant and a baby elephant eating">
</div>
<div class="col-lg col-sm-12 info-text">
<h2>Elephant Sanctuary</h2>
<p>
There are many activities to do in Thailand, with many of them being offered on the coast from
Bungee jumping, jetsking, parasailing and many more. However this is not our most recommended
activity to do whilst in Thailand. The Elephant Sanctuary in Phuket which houses rescued
elephants is one the most humbling and jaw dropping experiences. You have the oppertunity to
interact with elephants here and takes pictures, feed them and bathe them. This experience is
life changing and one you will never forget, we recommend this as a must when in Thailand!
</p>
</div>
</div>
<!-- --- maps section --- -->
</div>
<div id="map" class="">
</div>
</section>
<!-- contact Section -->
<hr>
<div class="contact-bg d-flex">
<div class="container mb-2">
<div class="row">
<div class="col-md-6 col-sm-12 contact-info">
<h2 class="text-center mt-5">Do you need more information?</h2>
<p class="text-left">Please feel free to complete the form below if you need more information.
Or if you
would like to get
in
touch for to prepare a travel recomendation package.
</p>
<div class="contact-details">
<div><i class="far fa-address-book"></i>Unit 1, Trafalgar Road, London</div>
<div><i class="far fa-envelope"></i>[email protected]</div>
<div><i class="fas fa-phone-alt"></i>08547 303 202</div>
<div><i class="far fa-clock"></i>Monday - Friday 9am - 5pm</div>
</div>
</div>
<form class="col-md-6 col-sm-12 my-form" id="myform" onsubmit="return sendEmail(this);">
<div class="row">
<div class="col-12 form-title">
<h3 class="text-center mt-2 text-white">Contact Us</h3>
</div>
</div>
<hr class="text-white">
<div class="row">
<label for="inputFname" class="my-label col-md-6 col-sm-10">First Name</label>
<input type="text" id="inputFname" class="form-control my-text col-md-10" required="">
</div>
<div class="row">
<label for="inputLname" class="my-label col-md-6 col-sm-10">Last Name</label>
<input type="text" id="inputLname" class="form-control my-text col-md-10" required="">
</div>
<div class="row">
<label for="email" class="my-label col-md-6 col-sm-10">Email</label>
<input type="email" id="email" class="form-control my-text col-md-10" required="">
</div>
<div class="row">
<label for="inputPhone" class="my-label col-md-6 col-sm-10">Contact Number</label>
<input type="text" id="inputPhone" class="form-control my-text col-md-10" required="">
</div>
<div class="form-input row">
<label for="messageArea" class="my-label col-md-10 col-sm-10">Please write your
message</label>
<textarea class="my-text col-md-10" id="messageArea" placeholder="Your Message"></textarea>
<button type="submit" class="btn btn-send align-itmes-center">Send</button>
</div>
</form>
<div id="mymodal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<h3>Thank you for your request. We will get back to you as soon as possible.</h3>
</div>
</div>
</div>
</div>
</div>
<!-- --- footer section --- -->
<footer class="my-footer">
<div class="footer-message">
<p>
Follow us on our social media to see the latest information and images.
</p>
</div>
<div class="social">
<ul class="list-inline">
<li class="list-inline-item"><a href="https://www.facebook.com" target="_blank"><i
class="fab fa-facebook"></i></a></li>
<li class="list-inline-item"><a href="https://www.instagram.com" target="_blank"><i
class="fab fa-instagram"></i></a></li>
<li class="list-inline-item"><a href="https://www.twitter.com" target="_blank"><i
class="fab fa-twitter"></i></a></li>
</ul>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/emailjs-com@3/dist/email.min.js"></script>
<script src="./assets/js/sendEmail.js"></script>
<script src="./assets/js/script.js"></script>
<script src="./assets/js/map.js"></script>
<script async
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyARDndQGGN7LYCVgb922GH8l2j8Ck3YvUw&callback=initMap">
</script>
</body>
</html>