-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhotel.html
211 lines (172 loc) · 8.31 KB
/
hotel.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hotel management</title>
<!-------------------------------------------------------------------------------------------------->
<link href="vendor/bootstrap4/css/bootstrap.min.css" rel="stylesheet">
<link href="hotel.css" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width ,initial-scale=1">
<script src="vendor/jquery/jquery-3.3.1.min.js"></script>
<script src="vendor/bootstrap4/js/bootstrap.js"></script>
<script src="vendor/bootstrap4/js/bootstrap.min.js"></script>
<script src="js/fontawsome-all.js"></script>
<link href="https://fonts.googleapis.com/css?family=Mr+Dafoe" rel="stylesheet">
<!----------------magnific popup----------------->
<link rel="stylesheet" href="vendor/mgnafic%2520popup/magnific-popup.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
</head>
<body>
<!---- social icons----->
<div class="container-fluid info p-3" id="top-icons" style="background-color: white">
<div class="row">
<div class="col d-flex justify-content-between align-items-baseline flex-wrap">
<div class="info-icons p-2">
<a href="#" class="mr-2 primary-color"><i class="fab fa-facebook fa-2x"></i></a>
<a href="#" class="mr-2 primary-color"><i class="fab fa-instagram fa-2x"></i></a>
<a href="#" class="mr-2 primary-color"><i class="fab fa-twitter fa-2x"></i></a>
<a href="#" class="mr-2 primary-color"><i class="fab fa-yelp fa-2x"></i></a>
</div>
</div>
<h2 class="primary-color p-2 text-capitalize"> <strong>Simply the best, located behind Kenyatta University</strong> </h2>
</div> </div>
<!------end of social icons---->
<!----start of header section--->
<header id="header">
<div class="container">
<div class="row height-90 align-items-center justify-content-center "><div class="col">
<div class="banner text-center">
<h1 class="display-1 text-capitaliz w-50 mx-auto">
<small>Mombasa Resort</small><strong class="primary-color">Groups</strong>
</h1>
<a href="booking.html" class="btn main-btn mombasa-btn my-4 text-capitalize"> <h2>Book online</h2></a>
</div>
</div></div>
</div>
<a href="" class="btn header-link primary-color"><i class="fas fa-arrow-down"></i> </a>
</header>
<!------end of header section------->
<!---jquery--->
<script src="vendor/mgnafic%2520popup/jquery.magnific-popup.js"></script>
<script src="vendor/jquery/jquery-3.3.1.min.js"></script>
<!----bostrap js--->
<script src="vendor/bootstrap4/js/bootstrap.bundle.min.js"></script>
<!----ripple--->
<script src="vendor/jquery/jquery.ripples-min.js"></script>
<!-----js--->
<script src="vendor/jquery/script.js"></script>
<!-----------the end of jquery------>
<!------links on different meals--->
<div class="space" ></div>
<div class="container"><div class="row food"><div class="col-sm-12 col-xs-12 col-md-4 col-lg-4 col-lg-4">
<a href="#" class="meal" > <img src="images/images/cupcakes-690040_960_720.jpg" height="250px" width="250px" ></a>
<h2 class="heading" > Breakfast</h2>
</div>
<div class="col-sm-12 col-xs-12 col-md-4 col-lg-4 col-lg-4">
<a href="#" class="meal"> <img src="images/images/casserole-dish-2776735_960_720.jpg" height="250px" width="250px"></a>
<h2 class="heading" > Lunch</h2>
</div>
<div class="col-sm-12 col-xs-12 col-md-4 col-lg-4 col-lg-4">
<a href="#" class="meal"> <img src="images/images/pancakes-2291908_960_720.jpg" height="250px" width="250px"></a>
<h2 class="heading" > Dinner</h2>
</div>
</div></div>
<!-------end of meal links----->
<!--------short info----->
<br>
<br>
<div clas="info_row col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-10">
<div class="health tips col-xs-12 col-sm-12 col-md-9 col-lg-9 col-xl-10" >
<p class="health tips" > <strong><h2 > Health Tips </h2></strong> </p> </div>
<div class="descriptive"> <p >
<ol type="1"><h5>
<li>. Maximize with nutrient-packed foods
Give your body the nutrients it needs by eating a variety of nutrient-packed food, including whole grains, lean protein, fruits and vegetables, and low-fat or fat-free dairy. Eat less food high in solid fats, added sugars, and sodium (salt).
</li>
<br>
<li>
. Energize with grains
Your body’s quickest energy source comes from foods such as bread, pasta, oatmeal, cereals, and tortillas. Be sure to make at least half of your grain food choices whole-grain foods like whole-wheat bread or pasta and brown rice.
</li> <br> <li>
. Power up with protein
Protein is essential for building and repairing muscle. Choose lean or low-fat cuts of beef or pork, and skinless chicken or turkey. Get your protein from seafood twice a week. Quality protein sources come from plant based foods, too.
</li> <br> <li>
.Mix it up with plant protein foods
Variety is great! Choose beans and peas (kidney, pinto, black, or white beans; split peas; chickpeas; hummus), soy products (tofu, tempeh, veggie burgers), and unsalted nuts and seeds.
</li> <br> <li>
.Vary your fruits and vegetables
Get the nutrients your body needs by eating a variety of colors, in various ways. Try blue, red, or black berries; red and yellow peppers; and dark greens like spinach and kale. Choose fresh, frozen, low-sodium canned, dried, or 100 percent juice options.
</li>
</h5>
</ol>
</div>
</div>
<!-------acccomodation rooms------------------------------------------------------------------------------------>
<div class="space" ></div>
<div class="container" ><div class="row rooms"><div class="col-sm-12 col-xs-12 col-md-4 col-lg-4 col-lg-4">
<a href="#" class="meal" > <img src="images/images/hotel%20room1.jpg" height="250px" width="250px" ></a>
<h2 class="heading" > </h2>
<div class="description" style="align-content: center">
<p><strong>single Room</strong> </p>
<p>from $ 50</p>
<p>single bed</p>
<p> 15m<sup>2</sup></p></div>
<div class="info-icons p-2">
<i class="fas fa-phone fa-2x"></i>
<i class="fas fa-bath fa-2x"></i>
<i class="fas fa-wifi fa-2x"></i>
</div>
</div>
<div class="col-sm-12 col-xs-12 col-md-4 col-lg-4 col-lg-4">
<a href="#" class="rooms"> <img src="images/images/hotel%20room%202.jpg" height="250px" width="250px"></a>
<h2 class="heading" > </h2>
<div class="description" style="align-content: center">
<p><strong>Double Room</strong> </p>
<p>from $ 100</p>
<p>Queen-size bed</p>
<p> 25m<sup>2</sup></p></div>
<div class="info-icons p-2">
<i class="fas fa-phone fa-2x"></i>
<i class="fas fa-tv fa-2x"></i>
<i class="fas fa-bath fa-2x"></i>
<i class="fas fa-wifi fa-2x"></i>
</div>
</div>
<div class="col-sm-12 col-xs-12 col-md-4 col-lg-4 col-lg-4" style="align-content: center">
<a href="#" class="rooms"> <img src="images/images/hotel_room.jpg" height="250px" width="250px"></a>
<h2 class="heading" > </h2>
<div class="description" style="text-align: center">
<p><strong>Duplex Room</strong> </p>
<p>from $ 200</p>
<p>king-size bed</p>
<p>40 m<sup>2</sup></p></div>
<div class="info-icons p-2">
<i class="fas fa-phone fa-2x"></i>
<i class="fas fa-tv fa-2x"></i>
<i class="fas fa-bath fa-2x"></i>
<i class="fas fa-wifi fa-2x"></i>
<i class="fas fa-wine-glass fa-2x"></i>
<i class="fas fa-utensils fa-2x"></i>
</div>
</div>
</div></div>
<div class="get-in touch container-fluid" style="background-color: red; height: 400px;">
<div class="row" style="text-align: center;">
<div class="col-md-12" style="margin-top: 100px;">
<div class="text" style="align-content: center">
<h3>Lets Get in Touch</h3>
<h4>Having any query.Feel free to ask</h4>
</div>
</div>
</div>
<div class="row" style="text-align: center;margin-top: 70px;">
<div class="col-md-6">
<i class="fas fa-phone fa-2x"></i><p> 0798230245</p>
</div>
<div class="col-md-6">
<i class="fas fa-envelope-open-text fa-2x"></i><p> [email protected]</p>
</div>
</div>
</div>
</body>
</html>