-
Notifications
You must be signed in to change notification settings - Fork 0
/
about.php
150 lines (134 loc) · 5.5 KB
/
about.php
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>
<head>
<title>Hotel Booking Website - About Us</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@1,200&family=Poppins:ital,wght@0,400;0,500;1,400&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Merienda:wght@400;700&family=Nunito:ital,wght@1,200&family=Poppins:ital,wght@0,400;0,500;1,400&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"
/>
<link rel="stylesheet" type="text/css" href="css/common.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<style>
.box{
border-top-color: var(--teal) !important;
}
</style>
</head>
<body>
<?php require('inc/header.php'); ?>
<div class="my-5 px-4">
<h2 class="fw-bold h-font text-center">ABOUT US</h2>
<div class="h-line bg-dark"></div>
<p class="text-center mt-3">
Variety and Choice: These websites strive to offer a diverse selection of hotels,
ranging from budget accommodations to luxury resorts, in various locations around
the world. By providing a wide range of options, they cater to different traveler preferences,
budgets, and trip requirements.
</p>
</div>
<div class="container">
<div class="row justify-content-between align-items-center">
<div class="col-lg-6 col-md-5 mb-4 order-lg-1 order-md-1 order-2">
<h3 class="mb-3">Why We?</h3>
<p>
Accessibility and Convenience: Hotel booking websites aim to make the process of searching
and booking hotels as easy and accessible as possible. They provide users with a centralized
platform where they can browse through a wide range of hotels, view detailed information such
as room types, amenities, and prices, and make reservations with just a few clicks.
</p>
</div>
<div class="col-lg-6 col-md-5 mb-4 order-lg-1 order-md-1 order-2">
<h3 class="mb-4"></h3>
<p>
Price Comparison: One of the key advantages of hotel booking websites is the ability to compare
prices across different hotels. These platforms aggregate information from multiple sources,
allowing users to compare rates and find the best deals available. This transparency enables travelers
to make informed decisions and potentially save money on their hotel bookings..
</p>
</div>
</div>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-lg-3 col-md-6 mb-4 px-4">
<div class="bg-white rounded shadow p-4 border-top border-4 text-center box">
<img src="images/about/hotel.svg" width="70px">
<h4 class="mt-3">100+ ROOMS</h4>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4 px-4">
<div class="bg-white rounded shadow p-4 border-top border-4 text-center box">
<img src="images/about/customers.svg" width="70px">
<h4 class="mt-3">200+ CUSTOMERS</h4>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4 px-4">
<div class="bg-white rounded shadow p-4 border-top border-4 text-center box">
<img src="images/about/rating.svg" width="70px">
<h4 class="mt-3">150+ REVIEWS</h4>
</div>
</div>
<div class="col-lg-3 col-md-6 mb-4 px-4">
<div class="bg-white rounded shadow p-4 border-top border-4 text-center box">
<img src="images/about/staff.svg" width="70px">
<h4 class="mt-3">200+ STAFFS</h4>
</div>
</div>
</div>
</div>
<h3 class="my-5 fw-bold h-font text-center">MANAGEMENT TEAM</h3>
<div class="container px-4">
<div class="swiper mySwiper">
<div class="swiper-wrapper mb-5">
<div class="swiper-slide bg-white text-center overflow-hidden rounded">
<img src="images/about/img1.avif" class="w-100">
<h5 class="mt-2">Gona Adnan Abdulqadir</h5>
</div>
<div class="swiper-slide bg-white text-center overflow-hidden rounded">
</div>
<div class="swiper-slide bg-white text-center overflow-hidden rounded">
<img src="images/about/img2.avif" class="w-100">
<h5 class="mt-2">Maryam Chawshin Hassan</h5>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<?php require('inc/footer.php'); ?>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper", {
spaceBetween: 40,
pagination: {
el: ".swiper-pagination",
},
breakpoints: {
320: {
slidesPerView: 1,
},
640: {
slidesPerView: 1,
},
768: {
slidesPerView: 3,
},
1024: {
slidesPerView: 3,
},
}
});
</script>
</body>
</html>