-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
150 lines (124 loc) · 7.07 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Wonder Ceylon - Your Gateway to the Soul of Sri Lanka</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300;0,600;1,300&display=swap');
</style>
<link rel="stylesheet" href="styles_main.css">
<script src="navbar.js"></script>
<script src="index.js"></script>
</head>
<body>
<!--Common navigation bar throughout the site-->
<div id="navbar">
<img src="web_logo_main.png" alt="Wonder Ceylon Logo" id="siteLogo">
<div id="paths">
<a href="index.html" class="active">Home</a>
<a href="#">Store</a>
<a href="gallery.html">Explore</a>
<a href="quiz.html">Quiz</a>
<a href="comments.html">Feedback</a>
<a href="sitemap.html">Pathfinder</a>
<a href="about.html">Meet the Team</a>
</div>
</div>
<!--Clouds move on hover | Initiated from : https://codepen.io/trixie13/pen/GNJqBJ -->
<div class="mountain" onmousemove="moveClouds()">
<div id="cloud1" class="cloud">
<img src="cloud_fog_by_moonglowlilly-d5tk3l7.png" alt="cloud">
</div>
<div id="cloud2" class="cloud">
<img src="cloud_fog_by_moonglowlilly-d5tk3l7.png" alt="cloud">
</div>
<div id="cloud3" class="cloud"><img src="cloud_PNG16.png" alt="cloud"></div>
<div id="cloud4" class="cloud">
<img src="cloud_PNG16.png" alt="cloud"></div>
</div>
<!--Main Picture of Sigiriya-->
<div class="container1">
<img src="UK_SriLanka_LK_Header.jpg" alt="Sigiriya" id="UK_SriLanka_LK_Header">
</div>
<!--Top button group for navigate to various levels of the page-->
<div class="btn-group" >
<button class="nameTag" style="background-color:#00a8ff;">Jump to > </button>
<a href="#row">Wonder Ceylon</a>
<a href="#card">Top Destinations</a>
</div>
<!--1st Card with blue background-->
<div class="headerText">
<h5>As the clouds gracefully drifted,</h5>
<h3 style="color: white;">"Do we journey to <span style="color:#fed330;">every corner</span> of the country?"</h3>
<p style="color: white;">immersing ourselves in its diverse landscapes and cultures, <br>
seeking to understand its essence.</p>
</div>
<!--Automatic moving clouds-->
<div style="display: inline-block; width: 233%;">
<img src="sky-clouds.gif" alt="cloudgif" id="cloud5">
<img src="web_logo.png" alt="web_logo" id="logo">
<img src="sky-clouds.gif" alt="cloudgif" id="cloud6">
</div>
<!--1st Card with yellow background-->
<div class="webSiteDescriptionText" id="row">
<h2 style="font-size: 40px;">'Wonder Ceylon' ? 🤔</h2>
<p style="font-size: 30px;">'Wonder Ceylon' is <strong>an innovative cloud-based knowledge-sharing platform,</strong>
designed to immensely benefit prospective visitors to Sri Lanka by providing valuable insights,
travel tips and comprehensive information about the country's captivating destinations and
unique cultural experiences.</p>
</div>
<!--Country side Train Scenery picture-->
<div style="display: inline-block; width: 233%;">
<img src="TransportTrainsprofilepageheader.jpg" alt="train_during_aTeaState">
</div>
<!--Top Destinations part-->
<!-- New Badge initiated from https://www.w3schools.com/howto/howto_css_badge.asp-->
<!-- Card implementation from https://www.w3schools.com/howto/howto_css_profile_card.asp-->
<div class="cardsDescriptionText">
<h1 style="font-size: 40px; text-align: center;">Top Destinations for this Season <span class="newbadge">New</span></h1>
</div>
<div class="destinationCards" id="card">
<!--Card 1-->
<div class="destination1Card">
<img src="arugam-bay-guide-things-to-do-elephant-rock.jpg" alt="Arugambay" style="width:100%; height: 200px;" >
<h1>Arugambay</h1>
<p class="destination1title">known locally as "Arugam Kudah"</p>
<p>Arugam Bay is situated on the Indian Ocean in the dry zone of Sri Lanka's southeast coast,
and a historic settlement of the ancient Batticaloa Territory.</p>
<p><button class="destination1Button" onclick="window.location.href='Arugambay.html'">Explore More..</button></p>
<!-- Opening a new page in the same tab code initiated from https://teamtreehouse.com/community/how-to-blur-the-entire-page-except-the-form-once-user-clicks-into-an-input-select-or-textarea-field-->
</div>
<!--Card 2-->
<div class="destination1Card">
<img src="Adamspeak.jpg" alt="AdamsPeak" style="width:100%; height: 200px;" >
<h1>Adam's Peak</h1>
<p class="destination1title">known locally as "Sripada"</p>
<p>Adam's Peak is a 2,243 m tall conical sacred mountain located in central Sri Lanka.
The Sri Pada, a 1.8 m rock formation near the summit
whose name is also used for the mountain itself.</p>
<p><button class="destination1Button" onclick="window.location.href='adamsPeak.html'">Explore More..</button></p>
</div>
<!--Card 3-->
<div class="destination1Card">
<img src="EllaCover.jpg" alt="Ella" style="width:100%; height: 200px;" >
<h1>Ella</h1>
<p class="destination1title">A small town in Badulla District.</p>
<p>It is approximately 200 kilometres east of Colombo and is
situated at an elevation of 1,041 metres above sea level. The area has a rich bio-diversity,
dense with numerous varieties of flora and fauna. </p>
<p><button class="destination1Button" onclick="window.location.href='student4.html'">Explore More..</button></p>
</div>
</div>
<!--Bottom button group -->
<div class="btn-group" >
<a href="#top">🔝 Back to Top</a>
<a href="pageeditor_student2.html">👨💻 Meet the Editor</a>
</div>
<!--The Footer section common every page of the site-->
<div class="footerPrimary" id="footerPrimary">
<p class="footer_text">🏝️🌴✨😍<br>
Dive into our website,<br>
emabark on a virtual journey through this enchanting paradise island before your upcoming visit <br>
to discover the wonders that await you! <br></p>
</div>
</body>
</html>