-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
479 lines (379 loc) · 26.1 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
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
<!DOCTYPE html>
<html>
<head>
<!-- Website Title & Description for Search Engine purposes -->
<title>Pegasus Apartments</title>
<meta name="description" charset="UTF-8" content="">
<meta name="description" content="Pegasus Studios in Stalis in Crete: apartments stalis, crete apartments, family run hotel crete, family holidays stalida, hotels stalis, apts crete"/>
<meta name="keywords" content="Pegasus Studios in Stalis in Crete: apartments stalis, crete apartments, family run hotel crete, family holidays stalida, hotels stalis, apts crete"/>
<!-- Mobile viewport optimized -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Favicon -->
<link rel="icon" href="favicon.ico" type="image/x-icon"/>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
<!--Custom CSS-->
<link rel="stylesheet" type="text/css" href="includes/css/styles.css">
<!-- Include Modernizr in the head, before any other Javascript -->
<script src="js/modernizr.js"></script>
</head>
<body>
<div class="container" id="main">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-target=".navbar-responsive-collapse" data-toggle="collapse" type="button">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html"><img src="images/pegasus_logo.png" alt="Pegasus Studios"></a>
</div><!--end of navbar-header-->
<div class="navbar-collapse collapse navbar-responsive-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active current">
<a id="home" href="index.html">Home</a>
</li>
<li><a id="facil" href="facilities.html">Facilities</a></li>
<li><a id="photo" href=photo_gallery.html>Photo Gallery</a></li>
<li><a id="contact" href="#myModal" role="button" data-toggle="modal" data-backdrop="static">Contact Us</a></li>
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" id="closeContact" data-dismiss="modal">×</button>
<h4 class="modal-title">Contact Us</h4>
</div><!--end of modal-header-->
<div class="modal-body">
<h4 class="modal-title">Let Us Know What You Think</h4>
<p>Whether you are having questions or complaints, or even if you have suggestions,
please let us know!</p>
<h4>Telephone Numbers</h4>
<p>Pegasus Studios: +302897031647<br>
Mobile: +306973019736</p>
<h4>Email</h4>
<p>pegasus.apts@hotmail.com</p>
<hr>
<p><small class="text-muted">Please fill in the form and send it to us. We 'll get back at you as soon as possible</small></p>
<form class="form-horizontal">
<div class="form-group">
<label class="col-lg-2 control-label" for="inputName">Name</label>
<div class="col-lg-10">
<input class="form-control" id="inputName" name="inputName" placeholder="Name" type="text">
</div><!--end of form-group Name-->
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="inputEmail">Email</label>
<div class="col-lg-10">
<input class="form-control" id="inputEmail" name="inputEmail" placeholder="Email" type="email">
</div><!--end of form-group Email-->
</div>
<div class="form-group">
<label class="col-lg-2 control-label" for="inputMessage">Message</label>
<div class="col-lg-10">
<textarea class="form-control" id="inputMessage" name="inputMessage" placeholder="Message" rows="3"></textarea>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-default btn-primary" type="submit" id="send_button">Send</button>
</div>
</form>
</div><!--end of modal-body-->
<!--<div class="modal-footer">-->
<!--<button class="btn btn-default btn-primary" type="button">Send</button>-->
<!--</div>-->
<!--modal2-->
<div class="modal fade" id="myModal2">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
</div><!--end of modal-header-->
<div class="modal-body" id="myModal2-body">
</div><!--end of modal-body-->
</div>
</div>
</div><!--end of myModal2-->
<!--modal2-->
</div><!--end of modal-content-->
</div><!--end of modal-dialog-->
</div><!--end of modal-->
</ul><!--end of nav-->
</div><!--end of nav-collapse-->
</div><!--end of container-->
</nav><!--end of navbar-->
<div class="carousel slide" id="myCarousel" data-ride="carousel">
<!--Indicators-->
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#myCarousel"></li>
<li data-slide-to="1" data-target="#myCarousel"></li>
<li data-slide-to="2" data-target="#myCarousel"></li>
</ol>
<!--Wrapper for the slide-->
<div class="carousel-inner" role="listbox">
<div class="item active" id="slide1">
<div class="carousel-caption">
<h4>Komic 2014</h4>
<p>Finally creating my uncle's website for his apartments!!!</p>
</div><!--end of carousel-caption-->
</div><!--end of item-->
<div class="item" id="slide2">
<div class="carousel-caption">
<h4>Stalis Crete</h4>
<p>A wonderfull place to spend your vacations!!!</p>
</div><!--end of carousel-caption-->
</div><!--end of item-->
<div class="item" id="slide3">
<div class="carousel-caption">
<h4>Hospitality</h4>
<p>Let us take care of you and show you the best things in the area!!!</p>
</div><!--end of carousel-caption-->
</div><!--end of item-->
</div><!--end of carousel-inner-->
<a class="left carousel-control" data-slide="prev" href="#myCarousel" role="button"><span class="icon-prev"></span></a>
<a class="right carousel-control" data-slide="next" href="#myCarousel" role="button"><span class="icon-next"></span></a>
</div><!--end of carousel-->
<div class="row" id="bigCallout">
<div class="col-lg-12">
<div id="successAlert" class="alert alert-success fade in">
<button type="button" class="close" data-dismiss="alert">×</button>
<h4>Success!</h4>
<p>Great! This is created by clicking on the primary button. You can close it by clicking the x
button on the right corner.</p>
</div><!--end alert-->
<!--visible only on small devices-->
<div class="well well-sm visible-xs">
<a href="tel:+306977335435" class="btn btn-lg btn-block btn-default" ><span class="glyphicon glyphicon-phone"></span> Call Us!</a>
</div><!-- end small-well-->
<!--<div class="well mywell">-->
<!--<!–<div class="page-header">-->
<!--<h1>Book a room! <small>Subheader text here for further details.</small></h1>-->
<!--</div>–><!– end of page-header–>-->
<!--<div class="col-lg-12">-->
<!--<form>-->
<!--<b><span style="color:#FFF">Reservations</span></b>-->
<!--<input id="datetimepicker" type="text" placeholder=" Arrival">-->
<!--<input type="number" placeholder=" Adults">-->
<!--<input type="number" placeholder=" Children">-->
<!--<input type="number" placeholder=" nights">-->
<!--<a href="" id="myAlert" class="btn btn-lg btn-primary">Check availability</a>-->
<!--</form>-->
<!--</div>-->
<!--<!–<p class="lead">Here goes some really good text that will keep visitor's interest. It's very important-->
<!--so you can convice him to dig deeper into your website!</p>–>-->
<!--<!–<a href="" class="btn btn-lg btn-link">A Big Button for fun</a>–>-->
<!--</div><!–end of well–>-->
</div><!--end of col-12-->
</div><!--end of bigCallout-->
<div class="row" id="welcome">
<h1 class="header">Welcome to Pegasus Studios!</h1>
<!--<p id="welcomeText" class="visible-sm visible-md visible-lg">Welcome to the Pegasus studios website. The Pegasus are family run apartments which have been in Stalis for many-->
<!--years. .</p>-->
<hr>
</div>
<div class="row" id="moreInfo">
<div class="col-sm-6">
<h3>Weather and Location!</h3>
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Find Us</a> </li>
<li><a href="#tab2" data-toggle="tab">Weather</a> </li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<h4><span class="glyphicon glyphicon-map-marker"></span> Our Location <small>right next to the beach!</small></h4>
<div class='maps'>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2586.579422623451!2d25.433876!3d35.292415!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x149a64f3d89b3fb7%3A0xb271ad4a272a52c0!2sPegasus+Studios!5e1!3m2!1sel!2sgr!4v1426363397321&maptype=satellite" width="100%" height="200" frameborder="0" style="border:0"></iframe>
</div>
<p>Situated just 20 metres from Stalis' large sandy beach and clear blue sea, From Stalis it's easy to visit the neighbouring
towns of Malia and Herssonisos – either by bus, car or foot. Lovers of traditional life and architecture will
discover images of Cretan life all over the island of Crete - whatever your interests, remember that Stalis is
within easy reach of most of the islands attractions and its best beaches</p>
</div><!--end of tab-pane-->
<div class="tab-pane" id="tab2">
<h4>A Left Floated Picture <small><a target="blank" class="weather" style="display:inline; text-decoration: none;" href="http://www.weather.gr/en/">weather forecast by weather.gr</a>
</small></h4>
<!--<img src="http://www.placehold.it/140" alt="placehold" class="thumbnail pull-left">-->
<iframe class="weather" scrolling="no" frameborder="0" allowtransparency="true" src="http://www.weather.gr/en/widgets/weather_w3.aspx?p=15686" style="width: 300px; height: 183px"></iframe>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut doloribus excepturi omnis quo sequi?
Adipisci dolore inventore iusto modi neque optio pariatur praesentium quae, tempore tenetur? Aperiam nostrum possimus sunt.</p>
</div><!--end of tab-pane-->
</div><!--end of tab-content-->
</div><!--end of tab-->
<hr>
<div id="TA_selfserveprop258" class="TA_selfserveprop">
<ul id="R6Uo20J" class="TA_links AnB2ae1">
<li id="RNzKeDMBc" class="TLptTm">
<a target="_blank" href="http://www.tripadvisor.co.uk/"><img src="http://www.tripadvisor.co.uk/img/cdsi/img2/branding/150_logo-11900-2.png" alt="TripAdvisor"/></a>
</li>
</ul>
</div>
<script src="http://www.jscache.com/wejs?wtype=selfserveprop&uniq=258&locationId=5984497&lang=en_UK&rating=true&nreviews=4&writereviewlink=true&popIdx=true&iswide=true&border=true&display_version=2"></script>
<div class="travelrepublic">
<a href="https://www.travelrepublic.co.uk/hotels/greece/crete/stalis/pegasus-studios.html" target="_blank"><img src="images/travelrepublic.jpg"></a>
</div>
</div><!--end of col-sm-6-->
<div class="col-sm-6">
<h3>Info about the Area</h3>
<img src="images/Stalis.jpg" alt="Mochos Square Picture" style="border-style: solid; float: right; width: 98%; height: 130px; margin-right:10px;margin-left:10px;margin-bottom:10px;">
<p>Pegasus is ideal for seaside holidays. You'll find everything you need in Stalis for shopping and fun. If you choose to go further afield there
are lots of car hire rentals to offer reasonably priced vehicles or if you prefer organised trips there are lots
of local travel agents. Stalis has something for everyone, Cretan tavernas that serve traditional greek food and
a busy nightlife with plenty of bars and clubs, all of which are close on hand to the Pegasus Studios. There are
also plenty of mini-markets close by for any little thing you need.</p>
<h4>Places you can Visit</h4>
<div id="listImage" class="list-group">
<a href="https://www.google.gr/search?q=mochos&espv=2&biw=1366&bih=657&site=webhp&source=lnms&tbm=isch&sa=X&ei=n7QaVcXJBszfaI-zgeAK&ved=0CAYQ_AUoAQ#tbm=isch&q=%CE%BC%CE%BF%CF%87%CE%BF%CF%82&spell=1" target="_blank" class="list-group-item">
<h4 class="list-group-item-heading">Mochos</h4>
<img class="img-responsive" src="images/mochos_square_250.jpg" alt="Mochos Square Picture">
<p class="list-group-item-text">
Visit the village of Mochos where almost all of Stalis’ citizens come from. The village is built high up on the mountain,
behind Stalis (South). As the road unravels up the mountainside, the views of Stalis, Malia and the Cretan Sea are spectacular.
In the village’s pretty square there are numerous taverns where one can try traditional Cretan flavours. During the
summer months, a Cretan night is held in the square once per week, offering live music and traditional dancing.
</p>
</a>
<a href="https://www.google.gr/search?q=mochos&espv=2&biw=1366&bih=657&site=webhp&source=lnms&tbm=isch&sa=X&ei=n7QaVcXJBszfaI-zgeAK&ved=0CAYQ_AUoAQ#tbm=isch&q=%CE%BA%CF%81%CE%AC%CF%83%CE%B9+%CE%B7%CF%81%CE%B1%CE%BA%CE%BB%CE%B5%CE%AF%CE%BF%CF%85" target="_blank" class="list-group-item">
<h4 class="list-group-item-heading">Krasi</h4>
<img src="images/krassi_250.jpg" alt="Mochos Square Picture">
<p class="list-group-item-text">
Another beautiful village, approximately a 20 minute drive from Stalis, is Krasi. ‘Megali Vrysi’ (large tap) is situated at the
highest point of the village, a source of abundant water which irrigates a large area full of fruit and walnut trees. If the
weather is too hot for you in Stalis, you can certainly cool off there, sitting in the shade of the huge plane tree next to the
running water. The plane tree lends its shade to the entire square where, during the summer months, all of the village’s social
gatherings are held.
</p>
</a>
<a href="https://www.google.gr/search?q=mochos&espv=2&biw=1366&bih=657&site=webhp&source=lnms&tbm=isch&sa=X&ei=n7QaVcXJBszfaI-zgeAK&ved=0CAYQ_AUoAQ#tbm=isch&q=lasithi" target="_blank" class="list-group-item">
<h4 class="list-group-item-heading">Lasithi plateau</h4>
<img src="images/lasithi_250.jpg" alt="Mochos Square Picture">
<p class="list-group-item-text">
The idyllic Lasithi Plateau is located approximately 25km South of Malia. It is situated in a calm and fertile area, surrounded by
the wild Dikti mountains. All of the 18 picturesque villages in Lasithi are built on the mountainsides, connected by a circular
23km road and therefore allowing the plain to be left free for cultivation. This beautiful circular route is ideal for cycling as
there are no large hills and en route one can see all of the plateau’s sights. The Psychro cave, in the village of Psychro, is
considered the most important attraction. It is known as Dikteon Andron and held great worshipping importance in ancient times as
myth supports that Zeus, God of Gods, was born there.
</p>
</a>
</div>
</div><!--end of col-sm-6-->
</div><!--end of info-->
<hr>
<div class="row" id="moreCourses">
<div class="col-lg-12">
<h3 class="myfont">Traditional Corner</h3>
<div class="col-lg-6">
<div class="thumbnail">
<div class="carousel slide" id="portegoCarousel" data-ride="carousel">
<!--Indicators-->
<ol class="carousel-indicators">
<li class="active" data-slide-to="0" data-target="#portegoCarousel"></li>
<li data-slide-to="1" data-target="#portegoCarousel"></li>
<li data-slide-to="2" data-target="#portegoCarousel"></li>
</ol>
<!--Wrapper for the slide-->
<div class="carousel-inner" role="listbox">
<div class="item active" id="portego1">
<!--end of carousel-caption-->
</div><!--end of item-->
<div class="item" id="portego2">
<!--end of carousel-caption-->
</div><!--end of item-->
<div class="item" id="portego3">
<!--end of carousel-caption-->
</div><!--end of item-->
</div><!--end of carousel-inner-->
</div><!--end of carousel-->
<div class="caption">
<h3><strong>Portego Restaurant</strong></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, dicta dolor esse impedit incidunt molestiae nisi nulla tempora! Commodi consequuntur dolor et in labore molestias natus quaerat repellendus saepe soluta.</p>
<p><a href="https://www.google.gr" class="btn btn-default btn-primary btn-sm" target="_blank">Make a reservation</a>
<a href="https://www.facebook.com/portego.mochos" class="btn btn-link btn-sm" target="_blank">Facebook Page</a>
</p>
</div><!--end of caption-->
</div><!--end of thumbnail row-->
</div><!--end of col-lg-6-->
<div class="col-lg-6">
<div class="thumbnail">
<div id="something_else">
</div>
<div class="caption">
<h3><strong>Local Products</strong></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, dicta dolor esse impedit incidunt molestiae nisi nulla tempora! Commodi consequuntur dolor et in labore molestias natus quaerat repellendus saepe soluta.</p>
<p><a href="https://www.google.gr" class="btn btn-default btn-primary btn-sm" target="_blank">
Check it out
</a>
<a href="https://www.google.gr" class="btn btn-link btn-sm" target="_blank">
Check it out
</a>
</p>
</div><!--end of caption-->
</div><!--end thumbnail-->
</div><!--end of col-6 2-->
</div><!--end col-12-->
</div><!--end of moreCourses-->
</div><!-- end of container-->
<footer>
<div class="container">
<div class="row">
<div class="col-sm-2">
<h6>Copyright © 2015 Komic</h6>
</div><!--end col-sm-2-->
<div class="col-sm-4">
<h6>About Us</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores excepturi fugit illum, mollitia quidem sunt temporibus vero. Aliquam enim illum laudantium nihil nulla officiis quia reprehenderit? Illum numquam placeat porro?
</p>
</div><!--end col-sm-4-->
<div class="col-sm-2">
<h6>Navigation</h6>
<ul class="list-unstyled">
<li><a href="index.html">Home</a></li>
<li><a href="facilities.html">Facilities</a></li>
<li><a href="photo_gallery.html">Photo Gallery</a></li>
<li><a id="contact" href="#myModal" role="button" data-toggle="modal" data-backdrop="static">Contact Us</a></li>
</ul>
</div><!--end col-sm-2-->
<div class="col-sm-2">
<h6>Follow Us</h6>
<ul class="list-unstyled">
<li><a href="https://www.facebook.com/pegasusbar.stalis?fref=ts" target="_blank"><img src="images/fb_logo.png" alt="Facebook Logo">Facebook</a></li>
</ul>
</div><!--end col-sm-2-->
<div class="col-sm-2">
<h6>Coded with <span class="glyphicon glyphicon-heart"></span> by Komic</h6>
</div><!--end col-sm-2-->
</div><!--end row-->
</div><!--end of container-->
</footer><!--end footer-->
<!-- All Javascript at the bottom of the page for faster page loading -->
<!-- First try for the online version of jQuery-->
<script src="http://code.jquery.com/jquery.js"></script>
<!-- If no online access, fallback to our hardcoded version of jQuery -->
<script>window.jQuery || document.write('<script src="js/jquery-1.8.2.min.js"><\/script>')</script>
<!-- Jquery Mobile for swipe -->
<script src="js/jquery.mobile.custom.min.js"></script>
<!-- Swipe -->
<script>
$(document).ready(function() {
$("#myCarousel, #portegoCarousel").swiperight(function() {
$(this).carousel('prev');
});
$("#myCarousel, #portegoCarousel").swipeleft(function() {
$(this).carousel('next');
});
});
</script>
<!-- Bootstrap JS -->
<script src="js/bootstrap.min.js"></script>
<!-- Custom JS -->
<script src="js/script.js"></script>
<script src="js/contact.js"></script>
<!-- JS for choosing id datetimepicker -->
<script src="js/dtp.js"></script>
<!--datetimepicker_plugin-->
<link rel="stylesheet" type="text/css" href="includes/css/jquery.datetimepicker.css"/>
<script src="js/jquery.datetimepicker.js"></script>
</body>
</html>