-
Notifications
You must be signed in to change notification settings - Fork 1
/
frontpage.html
221 lines (154 loc) · 6.93 KB
/
frontpage.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sand Castle</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<link rel="stylesheet" type="text/css" href="CSS/frntpage.css">
<script src="https://kit.fontawesome.com/6d1c5bc3da.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- <section id="load">
<div class="loader"></div>
</section> -->
<!-- navbar -->
<header id="header">
<a href="#" class="logo"><img src="images/logo.png"></a>
<ul>
<li><a href="" >Lobby</a></li>
<li><a href="#a" >About Us</a></li>
<li><a href="#footer" >Contact Us</a></li>
<li><a href="login.html" >Log In</a></li>
</ul>
</header>
<!-- Parallax Section -->
<section class="main">
<img src="images/sky.png" id="sky">
<img src="images/mountains1.png" id="mountains1">
<h2 id="text"><span>It's Time For A New</span><br>Adventure</h2>
<img src="images/mountains.png" id="mountains">
<img src="images/sea.png" id="sea">
<img src="images/boat.png" id="boat">
<a href="#VR-link" id="btn">Xplore</a>
<img src="images/sand.png" id="sand">
<img src="images/tree.png" id="tree">
<img src="images/chair.png" id="chai">
</section>
<!-- The Content Section Can be written frm here: -->
<section class="sec" id="a">
<div >
<h2 data-aos="fade-right" >About Website</h2>
<p data-aos="fade-right" >Welcome to Sand Castle! We know it has been a hard time for us to venture out during this pandemic. Our inspiration is to create a fun website that could help you view beaches with the help of sky box images. We've tried to bring beaches to you virtually. All you have to do is select the beach you want to view and Voilà. <br><br> you have it. Sand Castle helps you gain live experience with the help of 3D view. We've used super cool tools to embed this onto our website. You can contact us anytime you want to if you have any queries. We hope you like it! Sit back and enjoy the view. You can still have fun this summer! </p>
<!-- <a data-aos="fade-left" href="" id="btx">Xplore</a> -->
</div>
<img data-aos="fade-left" src="https://pub-static.haozhaopian.net/assets/projects/pages/5a2c8f40-ac58-11e9-b764-9766c97d6b63_688c3d4f-8ba7-4e47-bbbb-05699ba955ac_thumb.jpg" alt="">
</section>
<section id="VR-link">
<h1 class="heading">Watch The Beaches From Your House Through the Next Gen <span>Virtual Reality</span> Created by Our Executives</h1>
<div class="small-small-container">
<div class="box">
<span></span>
<!-- <div class="s">1</div> -->
<div class="content1">
<a href=""><img src="images/labadi.jpeg" alt="">
<h3>Labadi - Neighborhood in<br> Accra, Ghana</h3></a>
</div>
</div>
<div class="box">
<!-- <div class="s">2</div> -->
<span></span>
<div class="content1">
<a href=""><img src="images/marina.jpeg" alt="">
<h3>Marina - Dubai</h3></a>
</div>
</div>
<div class="box">
<!-- <div class="s">3</div> -->
<span></span>
<div class="content1">
<a href=""><img src="images/larnaca.jpeg" alt="">
<h3>larnaca - Cyprus</h3></a>
</div>
</div>
<div class="box">
<!-- <div class="s">4</div> -->
<span></span>
<div class="content1">
<a href=""><img src="images/sheerness.jpg" alt="">
<h3>sheerness - England</h3></a>
</div>
</div>
<div class="box">
<!-- <div class="s">5</div> -->
<span></span>
<div class="content1">
<a href=""><img src="images/tenerife.jpg" alt="">
<h3>tenerife - Spain</h3></a>
</div>
</div>
</div>
</section>
<footer class="footer-area" id="footer">
<div class="footer-wave-box">
<div class="footer-wave footer-animation"></div>
</div>
<div class="foot1">
<div class="footer">
<div class="single-footer ab1" data-aos="fade-right" >
<h4>about us</h4>
<p>Our inspiration is to create a fun website that could help you view beaches with the help of sky box images. We've tried to bring beaches to you virtually.</p>
<div class="footer-social" data-aos="fade-right">
<a href=""><i class="fab fa-facebook-f"></i></a>
<a href=""><i class="fab fa-twitter"></i></a>
<a href=""><i class="fab fa-instagram"></i></a>
<a href=""><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
<div class="single-footer" data-aos="fade-left">
<h4>main menu</h4>
<ul>
<li><a href="frontpage.html"><i class="fas fa-chevron-right"></i>Lobby</a></li>
<li><a href="#a"><i class="fas fa-chevron-right"></i>About Us</a></li>
<li><a href="login.thml"><i class="fas fa-chevron-right"></i>Log In</a></li>
<!-- <li><a href=""><i class="fas fa-chevron-right"></i> contact us</a></li> -->
</ul>
</div>
<div class="single-footer" data-aos="fade-right">
<h4>quick links</h4>
<ul>
<li><a href=""><i class="fas fa-chevron-right"></i> privacy policy</a></li>
<li><a href=""><i class="fas fa-chevron-right"></i> terms & conditions</a></li>
<li><a href=""><i class="fas fa-chevron-right"></i> disclaimer</a></li>
</ul>
</div>
<div class="single-footer" data-aos="fade-left">
<h4>contact us</h4>
<ul>
<li><a href=""><i class="fas fa-mobile-alt"></i> +XX XXX XXX</a></li>
<li><a href=""><i class="far fa-envelope"></i> [email protected]</a></li>
</ul>
</div>
</div>
<div class="copy">
<hr>
<p>© 2021 all rights reserved Sand Castle | An Error404 <Product></Product></p>
</div>
</div>
</footer>
<!-- These Two divisions are for scrollbar...I need this to be in the end of the whole page so please write the code above these......do not change any code after this comment
-->
<div id="pbar"></div>
<div id="spath"></div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init({offset: 350,
duration: 500
});
</script>
<script type="text/javascript" src="JS/frntpage.js"></script>
</body>
</html>