-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
318 lines (293 loc) · 16.8 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
<!DOCTYPE html>
<html lang="en">
<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="sources/styles.css">
<link rel="stylesheet" href="sources/bootstrap.min.css">
<script src="https://use.fontawesome.com/6175e31c6a.js" defer></script>
<script src="sources/script.js" defer></script>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="sources/bootstrap.min.css">
<!--google fonts-->
<link href="https://fonts.googleapis.com/css?family=Anton|Cabin|Lato|Fjala+One|Montserrat|Roboto&display=swap" rel="stylesheet">
<!--font awesome-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-Fo3rlrZj/k7ujTnHg4CGR2D7kSs0v4LLanw2qksYuRlEzO+tcaEPQogQ0KaoGN26/zrn20ImR1DfuLWnOo7aBA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!---owl carousal-->
<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" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Bootstrap core CSS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/js/bootstrap.min.js" integrity="sha512-UR25UO94eTnCVwjbXozyeVd6ZqpaAE9naiEUBK/A+QDbfSTQFhPGj5lOR6d8tsgbBk84Ggb5A3EkjsOgPRPcKA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="sources/script.js"></script>
<title>Hostel Booking</title>
</head>
<body>
<!--Navbar section start-->
<nav class="nav-bar">
<div class="nav-title">
<img class="nav-logo" src="./sources/images/beaconlogo.jpg">
<h1><strong>BEACON HOSTELS</strong></h1>
</div>
<ul class="nav-links">
<li class="link-prop"><a href="#">List Your Property</a></li>
<li><a href="#"><i class="fa fa-mobile"></i> APP</a></li>
<li><a href="#">Check-in-Extras</a></li>
<li><a href="#">Log In</a></li>
<li><a class="link-help" href="#">Help <i class="fa fa-caret-down"></i></a>
<div class="help-dropdown">
<ul>
<li><a href="#">Help Center</a></li>
<li><a href="#">How It Works</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</li>
</ul>
</nav>
<!--Navbar section end-->
<!---owl-carousel image slider stars here-->
<div class="owl-carousel owl-theme">
<div class="slide slide-1">
<div class="slide-content">
<h1>WELCOME TO THE BEACON HOSTELS</h1>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas commodi atque, aliquid nulla voluptate
tempore porro molestias impedit eaque quia hic expedita consequuntur totam ullam maxime ut reprehenderit a fuga.</p>
<button href="#" class="btn"><strong>Book Now</strong></button>
</div>
</div>
<div class="slide slide-2">
<div class="slide-content">
<h1>THE ONLY PLACE TO QUICK ACCOMODATION AT COMPUS</h1>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptates dolor eum ducimus itaque sapiente quo cumque non? Tempore repudiandae,
neque dolorum consequatur maxime, accusantium nobis accusamus minima, iste porro incidunt!</p>
<button class="btn"><strong>Subscribe</strong></button>
</div>
</div>
<div class="slide slide-3">
<div class="slide-content">
<h1>THE BEAUTY OF THE BEACON HOSTELS</h1>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Voluptatibus nesciunt fuga debitis optio provident veritatis facere magnam cumque earum
obcaecati! Perspiciatis unde repudiandae aut dolore. Ullam ex mollitia sapiente incidunt!</p>
<button class="btn"><strong>Comment</strong></button>
</div>
</div>
</div>
<!--owl carousel ends here-->
<!-- Popular hostels start ----- -->
<div class="all">
<div class="pop-hostels">
<h1>POPULAR HOSTELS</h1>
</div>
<div class="pop">
<div class='popular'>
<div class='pic'>
<img src="sources/images/double.jpg" style="width: 100%; " alt="" srcset="">
<div class='pricing'>
<p>Lucias Hostel<br>Price : Ush ( <span>450,000 ~ 500,000</span> )</p>
</div>
</div>
<div class='pic'>
<img src="sources/images/h1.jpg" style="width: 100%;height:80%; " alt="" srcset="">
<div class='pricing'>
<p>Maisha Hostel<br>Price : Ush (450,000 ~ 500,000)</p>
</div>
</div>
<div class='pic'>
<img src="sources/images/h2.jpg" style="width: 100%;height:80%; " alt="" srcset="">
<div class='pricing'>
<p>Glorianta Hostel<br>Price : Ush (450,000 ~ 500,000)</p>
</div>
</div>
<div class='pic'>
<img src="sources/images/h3.jpg" style="width: 100%;height:80%; " alt="" srcset="">
<div class='pricing'>
<p>Somalia Hostel<br>Price : Ush (450,000 ~ 500,000)</p>
</div>
</div>
<div class='pic'>
<img src="sources/images/single.jpg" style="width: 100%;height:80%; " alt="" srcset="">
<div class='pricing'>
<p>Emirates Hostel<br>Price : Ush (450,000 ~ 500,000)</p>
</div>
</div>
<div class='pic'>
<img src="sources/images/somalia.jpg" style="width: 100%;height:80%; " alt="" srcset="">
<div class='pricing'>
<p>Pilipo Rentals<br>Price : Ush (450,000 ~ 500,000)</p>
</div>
</div>
<div class='pic'>
<img src="sources/images/double.jpg" style="width: 100%;height:80%; " alt="" srcset="">
<div class='pricing'>
<p>God's Mercy<br>Price : Ush (450,000 ~ 500,000)</p>
</div>
</div>
<div class='pic'>
<img src="sources/images/single.jpg" style="width: 100%;height:80%; " alt="" srcset="">
<div class='pricing'>
<p>Eliz Hostel<br>Price : Ush (450,000 ~ 500,000)</p>
</div>
</div>
</div>
<div class="but-ton">
<a href="more-hostel.html"><button id='ton' type="button">VIEW MORE HOSTELS</button></a>
</div>
</div>
</div>
<!-- Popular hostels end ------ -->
<!-- about us section Start-->
<section class="about-section">
<h1>We help students book their perfect room</h1>
<div class="about-container1">
<div class="about-item">
<div class="about-img-container">
<img src="./sources/images/pngaaa.com-3178779.png" alt="">
</div>
<span class="about-head">Perfect Home Guarantee</span>
<span class="about-desc">Select the best student accomodation, providing safe and cozy living experience</span>
</div>
<div class="about-item">
<div class="about-img-container">
<img src="./sources/images/pngaaa.com-3178779.png" alt="">
</div>
<span class="about-head">Price Match Promise</span>
<span class="about-desc">Find a low price and we'll match it</span>
<span class="about-desc" style="text-decoration: underline; cursor: pointer;">Terms & Conditions</span>
</div>
<div class="about-item">
<div class="about-img-container">
<img src="./sources/images/pngaaa.com-3178779.png" alt="">
</div>
<span class="about-head">24-hour Service of Expert Booking Team</span>
<span class="about-desc">Get expert advice and service around the clock from our multi-lingual team</span>
</div>
</div>
<div class="about-container2">
<h1>How we help you find your ideal student room...</h1>
<div class="container2-items">
<div class="about-item2">
<div class="about-item2-ico">
<i class="fa fa-bed" aria-hidden="true"></i>
</div>
<div class="about-desc">
<span class="about-head">Over 1 million beds</span>
<span class="about-desc">Book your perfect room among thousands of student properties.</span>
</div>
</div>
<div class="about-item2">
<div class="about-item2-ico">
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
</div>
<div class="about-desc">
<span class="about-head">34 universities</span>
<span class="about-desc">Find the best choice of student accommodation close to your university.</span>
</div>
</div>
<div class="about-item2">
<div class="about-item2-ico">
<i class="fa fa-building-o" aria-hidden="true"></i>
</div>
<div class="about-desc">
<span class="about-head">Over 20 districts</span>
<span class="about-desc">Explore student life in Uganda with our unique neighbourhood guides.</span>
</div>
</div>
</div>
</div>
<div class="about-container3">
<p>BeaconHostel.com is the largest marketplace for student accommodation in the Uganda, listing more than 1 million beds in over 20 districts countrywide. We offer a wide range of rooms in purpose-built student accommodation (PBSA). These are properties that were built specifically for students and are managed by well-known and trusted student accommodation providers. Whether you’re looking for a shared flat or a private studio, you can find your ideal student home on BeaconHostel.com. Our easy-to-use filters let you find a room for your specific needs and budget. With the map function you can see which housing options are close to your university, or in a part of town you'd like to live in.</p>
<p>Booking a room on BeaconHostel.com is very easy. Check out the options in the University you'll be studying in, and choose your favourite accommodation. You can then ask for more information on it, and wait for one of our helpful booking consultants to contact you. If you don’t want to wait, you can of course always contact us as well. Just give us a call or send us a message through live chat.</p>
t need any more information and are ready to book your accommodation, click the 'book now' button on the property page and fill in your details. We’ll get your tenancy contract sorted and ready for you to sign. Once you’ve signed your contract and paid your deposit to the landlord, your booking is complete and secured.</p>
<button class="btn-about">Learn About Beaconhostel.com <i class="fa fa-long-arrow-right" style="color: white;" aria-hidden="true"></i></button>
</div>
</section>
<!-- about us section End-->
<!-- footer section -->
<!-- footer section -->
<section class="footer">
<div class="text-box">
<br><h4>Talk to our friendly team of experts</h4>
<p>Touring and Visiting are the best thing to do in everyone's lesuire time. <br>This shows that you love your body. Please don't disappoint us.</p>
<a href="" class="hero-btn">Visit us to know more about us</a>
</div>
<div class="container">
<div class="row">
<!-- <div class="col-md-3">
<h3>Sign up to our newsletter</h3>
<p>form</p>
</div> -->
<div class="col-md-2 row1">
<h3>Terms And Conditions</h3>
<p>Privacy and Policy</p>
<p>Terms of use </p>
<p>Return policy</p>
<p>Delivery Policy</p>
</div>
<div class="col-md-2 row1" >
<h3>Partnership</h3>
<p>Become A Partner </p>
<p>Partner Login </p>
<p>List Your Property</p>
</div>
<div class="col-md-2 row1">
<h3>Resources</h3>
<p>Help Center</p>
<p>Booking Guides</p>
<p>Contact Us</p>
</div>
<div class="col-md-3 row1">
<h3>Sign up to our newsletter</h3>
<form>
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="Your Email">
<div class="input-group-prepend">
<button class="btn " style="color: WHITE; background-color: #80490a; margin-top: 3px;" type="button">Send</button>
</div>
</div>
</form>
<div class="icons-brands">
<a href=""><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a href=""><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href=""><i class="fa fa-linkedin" aria-hidden="true"></i></a>
<a href=""><i class="fa fa-instagram" aria-hidden="true"></i></a>
</div>
</div>
</div>
<hr>
<br style="height: 0;">
<ul>
<li class="footer-link"><p>Cookies</p></li>
<li class="footer-link"><p>Privacy</p></li>
<li class="footer-link"><p>Terms</p></li>
<li class="footer-link"><p>Sitemap</p></li>
<li class="footer-link"><p > Copyright © All Rights Reserved. Liracampushostel2022</p></li>
</ul>
</div>
</section>
<!-- End of footer section -->
<!--custom jquery links-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!--custom javascrip for the owl carousel-->
<script>
$(document).ready(function(){
$(".owl-carousel").owlCarousel({
items: 1,
loop: true,
nav: true,
dots: true,
autoplay: true,
autoplaySpeed: 1000,
rewind: true,
});
});
</script>
<!--end of custom javascript-->
</body>
</html>