├── images ├── cus1.jpg ├── cus2.jpg ├── cus3.jpg ├── img1.jpg ├── img2.jpg ├── img3.jpg ├── logo.png ├── banner-img.jpg └── customer-banner.jpg ├── script.js ├── main.css └── index.html /images/cus1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prabinmagar/hotel-gp-single-page-site/HEAD/images/cus1.jpg -------------------------------------------------------------------------------- /images/cus2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prabinmagar/hotel-gp-single-page-site/HEAD/images/cus2.jpg -------------------------------------------------------------------------------- /images/cus3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prabinmagar/hotel-gp-single-page-site/HEAD/images/cus3.jpg -------------------------------------------------------------------------------- /images/img1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prabinmagar/hotel-gp-single-page-site/HEAD/images/img1.jpg -------------------------------------------------------------------------------- /images/img2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prabinmagar/hotel-gp-single-page-site/HEAD/images/img2.jpg -------------------------------------------------------------------------------- /images/img3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prabinmagar/hotel-gp-single-page-site/HEAD/images/img3.jpg -------------------------------------------------------------------------------- /images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prabinmagar/hotel-gp-single-page-site/HEAD/images/logo.png -------------------------------------------------------------------------------- /images/banner-img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prabinmagar/hotel-gp-single-page-site/HEAD/images/banner-img.jpg -------------------------------------------------------------------------------- /images/customer-banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prabinmagar/hotel-gp-single-page-site/HEAD/images/customer-banner.jpg -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const navBtn = document.getElementById('nav-btn'); 2 | const cancelBtn = document.getElementById('cancel-btn'); 3 | const sideNav = document.getElementById('sidenav'); 4 | const modal = document.getElementById('modal'); 5 | 6 | navBtn.addEventListener("click", function(){ 7 | sideNav.classList.add('show'); 8 | modal.classList.add('showModal'); 9 | }); 10 | 11 | cancelBtn.addEventListener('click', function(){ 12 | sideNav.classList.remove('show'); 13 | modal.classList.remove('showModal'); 14 | }); 15 | 16 | window.addEventListener('click', function(event){ 17 | if(event.target === modal){ 18 | sideNav.classList.remove('show'); 19 | modal.classList.remove('showModal'); 20 | } 21 | }); -------------------------------------------------------------------------------- /main.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700;800;900&display=swap'); 2 | 3 | :root{ 4 | --transition: all 0.7s ease; 5 | --yellow: #f9d342; 6 | --dark: #292826; 7 | } 8 | *{ 9 | box-sizing: border-box; 10 | padding: 0; 11 | margin: 0; 12 | font-family: 'Playfair Display', serif; 13 | } 14 | html{ 15 | scroll-behavior: smooth; 16 | } 17 | body{ 18 | line-height: 1.6; 19 | } 20 | .btn{ 21 | font-size: 16px; 22 | text-transform: uppercase; 23 | font-weight: 600; 24 | border: none; 25 | border-radius: 5px; 26 | padding: 10px; 27 | width: 140px; 28 | display: block; 29 | margin: 15px auto; 30 | cursor: pointer; 31 | transition: var(--transition); 32 | } 33 | .btn:hover{ 34 | opacity: 0.85; 35 | } 36 | .flex{ 37 | display: flex; 38 | flex-direction: column; 39 | justify-content: center; 40 | align-items: center; 41 | } 42 | h1, h2, h3, h4, h5, h6{ 43 | padding: 8px 0; 44 | } 45 | img{ 46 | width: 100%; 47 | display: block; 48 | } 49 | @media(max-width: 500px){ 50 | body{ 51 | font-size: 14px; 52 | } 53 | } 54 | 55 | /* header */ 56 | .header{ 57 | background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2)), url("images/banner-img.jpg") center/cover no-repeat; 58 | min-height: 100vh; 59 | color: #fff; 60 | padding: 25px; 61 | display: flex; 62 | flex-direction: column; 63 | align-content: stretch; 64 | } 65 | .head-top{ 66 | display: flex; 67 | justify-content: space-between; 68 | align-items: center; 69 | } 70 | .head-top span{ 71 | cursor: pointer; 72 | letter-spacing: 2px; 73 | transition: var(--transition); 74 | } 75 | .head-top span:hover{ 76 | color: var(--yellow); 77 | } 78 | .head-bottom{ 79 | flex: 1; 80 | text-align: center; 81 | width: 80vw; 82 | margin: 0 auto; 83 | } 84 | .head-bottom h2{ 85 | padding: 22px 0; 86 | font-size: 45px; 87 | border-bottom: 1px solid #fff; 88 | } 89 | .head-bottom p{ 90 | opacity: 0.7; 91 | font-size: 20px; 92 | margin: 45px auto; 93 | width: 60vw; 94 | } 95 | .head-btn{ 96 | margin: 20px 0; 97 | font-size: 20px; 98 | font-weight: bold; 99 | border: 3px solid #fff; 100 | background: transparent; 101 | padding: 13px 20px; 102 | background: rgba(0, 0, 0, 0.3); 103 | color: #fff; 104 | cursor: pointer; 105 | transition: var(--transition); 106 | } 107 | .head-btn:hover{ 108 | background: transparent; 109 | } 110 | @media(max-width: 500px){ 111 | .head-btn{ 112 | font-size: 17px; 113 | } 114 | .head-bottom h2{ 115 | font-size: 28px; 116 | } 117 | .head-bottom p{ 118 | font-size: 17px; 119 | margin: 20px auto; 120 | } 121 | } 122 | 123 | /* side nav */ 124 | .sidenav{ 125 | background: var(--dark); 126 | color: #fff; 127 | position: fixed; 128 | top: 0; 129 | bottom: 0; 130 | right: -100%; 131 | width: 300px; 132 | padding: 20px; 133 | transition: var(--transition); 134 | z-index: 10; 135 | } 136 | 137 | /********/ 138 | .sidenav.show{ 139 | right: 0; 140 | } 141 | /*************/ 142 | .cancel-btn{ 143 | position: absolute; 144 | right: 25px; 145 | font-size: 22px; 146 | cursor: pointer; 147 | transition: var(--transition); 148 | } 149 | .cancel-btn:hover{ 150 | opacity: 0.7; 151 | } 152 | .navbar{ 153 | margin-top: 50px; 154 | list-style: none; 155 | padding: 12px; 156 | } 157 | .navbar li a{ 158 | color: #fff; 159 | text-transform: capitalize; 160 | text-decoration: none; 161 | padding: 15px 0; 162 | display: block; 163 | border-bottom: 0.5px solid rgba(249, 211, 66, 0.3); 164 | opacity: 0.8; 165 | letter-spacing: 1.5px; 166 | transition: var(--transition); 167 | } 168 | .navbar li a:hover{ 169 | padding-left: 12px; 170 | } 171 | .sign-up, .log-in{ 172 | background: var(--yellow); 173 | color: #fff; 174 | } 175 | @media(max-width: 400px){ 176 | .sidenav{ 177 | width: 100vw; 178 | } 179 | } 180 | 181 | /** title */ 182 | .title{ 183 | text-transform: uppercase; 184 | letter-spacing: 3px; 185 | font-size: 30px; 186 | color: var(--yellow); 187 | border-bottom: 5px solid var(--dark); 188 | width: 235px; 189 | margin: 15px 0; 190 | } 191 | 192 | .sec-width{ 193 | width: 85vw; 194 | margin: 0 auto!important; 195 | } 196 | 197 | /* service */ 198 | .services{ 199 | margin: 40px 0; 200 | } 201 | .service{ 202 | display: flex; 203 | margin: 30px 0; 204 | } 205 | .service-icon{ 206 | flex: 30%; 207 | align-self: flex-start; 208 | font-size: 48px; 209 | color: #252525; 210 | } 211 | .service-content{ 212 | padding-left: 20px; 213 | } 214 | .service-content h2{ 215 | opacity: 0.7; 216 | } 217 | .service-content button{ 218 | margin-left: 0; 219 | margin-right: 0; 220 | background: var(--yellow); 221 | color: #fff; 222 | } 223 | @media(min-width: 992px){ 224 | .services-container{ 225 | display: grid; 226 | grid-template-columns: repeat(2, 1fr); 227 | grid-column-gap: 30px; 228 | } 229 | .title h2{ 230 | font-size: 10px!important; 231 | } 232 | } 233 | @media(max-width: 500px){ 234 | .title h2{ 235 | font-size: 24px; 236 | } 237 | } 238 | 239 | /* booking form */ 240 | .book{ 241 | background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)), url("images/banner-img.jpg") center/cover no-repeat; 242 | color: #fff; 243 | padding: 40px 60px; 244 | } 245 | .book-form{ 246 | display: grid; 247 | } 248 | .form-item{ 249 | display: flex; 250 | flex-direction: column; 251 | justify-content: center; 252 | } 253 | .book-form input[type = "submit"]{ 254 | margin: 18px 0 0 0; 255 | background: var(--dark); 256 | color: #fff; 257 | border: 1px solid #fff; 258 | } 259 | .book-form label, .book-form input{ 260 | width: 100%; 261 | } 262 | .book-form label{ 263 | font-weight: 600; 264 | word-spacing: 5px; 265 | padding-bottom: 8px; 266 | } 267 | .book-form input:not(.btn){ 268 | margin: 4px 0 16px 0; 269 | padding: 12px 15px; 270 | border-radius: 5px; 271 | font-size: 17px; 272 | border: none; 273 | } 274 | .book-form input:focus{ 275 | outline: 0; 276 | box-shadow: 0 0 7px rgba(0, 0, 0, 0.4); 277 | } 278 | @media(min-width: 768px){ 279 | .book-form{ 280 | grid-template-columns: repeat(2, 1fr); 281 | grid-gap: 24px; 282 | } 283 | } 284 | @media(min-width: 1170px){ 285 | .book-form{ 286 | grid-template-columns: repeat(3, 1fr); 287 | } 288 | } 289 | @media(min-width: 1370px){ 290 | .book-form{ 291 | grid-template-columns: 2fr 2fr 1fr 1fr 1fr 2fr; 292 | } 293 | .book{ 294 | height: 40vh; 295 | display: grid; 296 | } 297 | } 298 | @media(max-width: 500px){ 299 | .book{ 300 | padding-left: 20px; 301 | padding-right: 20px; 302 | } 303 | } 304 | 305 | /* room */ 306 | 307 | .rooms{ 308 | margin: 40px 0; 309 | } 310 | .room{ 311 | margin: 45px 0; 312 | padding-bottom: 25px; 313 | background: var(--dark); 314 | color: #fff; 315 | } 316 | .room-text{ 317 | padding: 5px 20px; 318 | } 319 | .room-text h3{ 320 | font-size: 24px; 321 | } 322 | .room-text ul{ 323 | list-style-type: none; 324 | margin: 15px 0; 325 | } 326 | .room-text ul li{ 327 | padding: 7px 0; 328 | } 329 | .room-text ul li i{ 330 | color: var(--yellow); 331 | margin-right: 10px; 332 | } 333 | .rate{ 334 | opacity: 0.8; 335 | } 336 | .rate span{ 337 | font-size: 40px; 338 | font-weight: 900; 339 | color: var(--yellow); 340 | } 341 | .room-image{ 342 | overflow: hidden; 343 | } 344 | .room-image img{ 345 | transition: var(--transition); 346 | } 347 | .room-image:hover img{ 348 | transform: scale(1.1); 349 | } 350 | @media (min-width: 900px){ 351 | .rooms-container{ 352 | display: flex; 353 | flex-wrap: wrap; 354 | } 355 | .room{ 356 | flex: 0 0 calc(50% - 20px); 357 | margin: 10px; 358 | } 359 | } 360 | @media(min-width: 1370px){ 361 | .rooms-container{ 362 | flex-direction: column; 363 | } 364 | .room{ 365 | display: flex; 366 | padding-bottom: 0; 367 | margin: 5px 0; 368 | } 369 | .room-image{ 370 | flex: 1; 371 | } 372 | .room-image img{ 373 | height: 100%; 374 | } 375 | .room-text{ 376 | flex: 1; 377 | } 378 | .room:nth-child(even){ 379 | flex-direction: row-reverse; 380 | } 381 | } 382 | 383 | /* customers */ 384 | 385 | .customers{ 386 | margin-top: 40px; 387 | padding: 40px 0; 388 | background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("images/customer-banner.jpg") center/cover no-repeat fixed; 389 | } 390 | .customer{ 391 | background: #fff; 392 | padding: 35px; 393 | text-align: center; 394 | margin: 24px 0; 395 | box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.75); 396 | cursor: pointer; 397 | transition: var(--transition); 398 | } 399 | .rating{ 400 | margin: 10px 0; 401 | color: var(--yellow); 402 | } 403 | .customer h3{ 404 | font-size: 25px; 405 | } 406 | .customer p{ 407 | opacity: 0.7; 408 | line-height: 1.8; 409 | width: 60%; 410 | margin: 0 auto; 411 | } 412 | .customer img{ 413 | width: 170px; 414 | height: 170px; 415 | border-radius: 50%; 416 | margin: 25px auto; 417 | } 418 | .customer span{ 419 | font-weight: 700; 420 | opacity: 0.7; 421 | } 422 | .customer:hover{ 423 | transform: translateY(-18px); 424 | } 425 | @media(min-width: 992px){ 426 | .customers-container{ 427 | display: grid; 428 | grid-template-columns: repeat(2, 1fr); 429 | grid-gap: 30px; 430 | } 431 | } 432 | @media(min-width: 1370px){ 433 | .customers-container{ 434 | display: grid; 435 | grid-template-columns: repeat(3, 1fr); 436 | } 437 | } 438 | @media(max-width: 500px){ 439 | .customer p{ 440 | width: 100%; 441 | } 442 | .customer img{ 443 | width: 100px; 444 | height: 100px; 445 | } 446 | } 447 | 448 | /* footer */ 449 | .footer{ 450 | background: var(--dark); 451 | color: #fff; 452 | text-align: center; 453 | } 454 | .footer-container{ 455 | width: 85vw; 456 | margin: 0 auto; 457 | padding: 30px 0; 458 | } 459 | .footer-container p, .footer-container a, .footer-container span{ 460 | opacity: 0.8; 461 | } 462 | .footer a{ 463 | display: block; 464 | color: #fff; 465 | text-decoration: none; 466 | } 467 | .social-icons{ 468 | list-style: none; 469 | display: flex; 470 | justify-content: center; 471 | padding: 15px 0; 472 | } 473 | .social-icons li{ 474 | margin: 0 10px; 475 | width: 50px; 476 | height: 50px; 477 | background: #2e2e2e; 478 | border-radius: 50%; 479 | transition: var(--transition); 480 | cursor: pointer; 481 | } 482 | .social-icons li:hover{ 483 | background: #fff; 484 | color: #2e2e2e; 485 | } 486 | .contact-item span{ 487 | display: block; 488 | } 489 | @media(min-width: 900px){ 490 | .footer-container{ 491 | display: grid; 492 | grid-template-columns: repeat(2, 1fr); 493 | grid-gap: 20px; 494 | } 495 | } 496 | @media(min-width: 1170px){ 497 | .footer{ 498 | text-align: left; 499 | } 500 | .footer-container{ 501 | grid-template-columns: repeat(4, 1fr); 502 | } 503 | .footer-container div:nth-child(1) p{ 504 | padding-right: 20px; 505 | } 506 | .contact-item{ 507 | display: grid; 508 | grid-template-columns: 10% 90%; 509 | margin-bottom: 15px; 510 | align-items: center; 511 | } 512 | } 513 | 514 | .showModal{ 515 | position: fixed; 516 | background: transparent; 517 | top: 0; 518 | right: 0; 519 | bottom: 0; 520 | left: 0; 521 | z-index: 5; 522 | } -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | HOTEL GP 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 30 | 31 | 32 | 33 |
34 | 35 | 36 | 37 | 38 | 44 | 45 | 46 |
47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 |
55 |
56 |

services

57 |
58 |
59 | 60 |
61 |
62 | 63 | 64 | 65 |
66 |
67 |

Food Service/ Food Runner

68 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias blanditiis tempore officia accusamus asperiores. Illum maxime eligendi necessitatibus laudantium iste nisi pariatur doloremque ut illo similique voluptatum enim distinctio perferendis, ad ipsam aspernatur omnis rem autem ex, reiciendis corporis suscipit!

69 | 70 |
71 |
72 | 73 | 74 |
75 |
76 | 77 | 78 | 79 |
80 |
81 |

Refreshment

82 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias blanditiis tempore officia accusamus asperiores. Illum maxime eligendi necessitatibus laudantium iste nisi pariatur doloremque ut illo similique voluptatum enim distinctio perferendis, ad ipsam aspernatur omnis rem autem ex, reiciendis corporis suscipit!

83 | 84 |
85 |
86 | 87 | 88 |
89 |
90 | 91 | 92 | 93 |
94 |
95 |

Housekeeping

96 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias blanditiis tempore officia accusamus asperiores. Illum maxime eligendi necessitatibus laudantium iste nisi pariatur doloremque ut illo similique voluptatum enim distinctio perferendis, ad ipsam aspernatur omnis rem autem ex, reiciendis corporis suscipit!

97 | 98 |
99 |
100 | 101 | 102 |
103 |
104 | 105 | 106 | 107 |
108 |
109 |

Room Security

110 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias blanditiis tempore officia accusamus asperiores. Illum maxime eligendi necessitatibus laudantium iste nisi pariatur doloremque ut illo similique voluptatum enim distinctio perferendis, ad ipsam aspernatur omnis rem autem ex, reiciendis corporis suscipit!

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 |

rooms

149 |
150 |
151 | 152 |
153 |
154 | room image 155 |
156 |
157 |

Luxury Rooms

158 |
    159 |
  • 160 | 161 | Lorem ipsum dolor sit amet. 162 |
  • 163 |
  • 164 | 165 | Lorem ipsum dolor sit amet. 166 |
  • 167 |
  • 168 | 169 | Lorem ipsum dolor sit amet. 170 |
  • 171 |
172 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus exercitationem repellendus maxime ullam tempore architecto provident unde expedita quam beatae, dolore eligendi molestias sint tenetur incidunt voluptas. Unde corporis qui iusto vitae. Aut nesciunt id iste, cum esse commodi nemo?

173 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla corporis quasi officiis cumque, fugiat nostrum sunt, tempora animi dicta laborum beatae ratione doloremque. Delectus odio sit eius labore, atque quo?

174 |

175 | $99.00 / Per Night 176 |

177 | 178 |
179 |
180 | 181 | 182 |
183 |
184 | room image 185 |
186 |
187 |

Luxury Rooms

188 |
    189 |
  • 190 | 191 | Lorem ipsum dolor sit amet. 192 |
  • 193 |
  • 194 | 195 | Lorem ipsum dolor sit amet. 196 |
  • 197 |
  • 198 | 199 | Lorem ipsum dolor sit amet. 200 |
  • 201 |
202 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus exercitationem repellendus maxime ullam tempore architecto provident unde expedita quam beatae, dolore eligendi molestias sint tenetur incidunt voluptas. Unde corporis qui iusto vitae. Aut nesciunt id iste, cum esse commodi nemo?

203 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla corporis quasi officiis cumque, fugiat nostrum sunt, tempora animi dicta laborum beatae ratione doloremque. Delectus odio sit eius labore, atque quo?

204 |

205 | $99.00 / Per Night 206 |

207 | 208 |
209 |
210 | 211 | 212 |
213 |
214 | room image 215 |
216 |
217 |

Luxury Rooms

218 |
    219 |
  • 220 | 221 | Lorem ipsum dolor sit amet. 222 |
  • 223 |
  • 224 | 225 | Lorem ipsum dolor sit amet. 226 |
  • 227 |
  • 228 | 229 | Lorem ipsum dolor sit amet. 230 |
  • 231 |
232 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus exercitationem repellendus maxime ullam tempore architecto provident unde expedita quam beatae, dolore eligendi molestias sint tenetur incidunt voluptas. Unde corporis qui iusto vitae. Aut nesciunt id iste, cum esse commodi nemo?

233 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla corporis quasi officiis cumque, fugiat nostrum sunt, tempora animi dicta laborum beatae ratione doloremque. Delectus odio sit eius labore, atque quo?

234 |

235 | $99.00 / Per Night 236 |

237 | 238 |
239 |
240 | 241 |
242 |
243 | 244 | 245 |
246 |
247 |
248 |

customers

249 |
250 |
251 | 252 |
253 |
254 | 255 | 256 | 257 | 258 | 259 |
260 |

We Loved it

261 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat beatae veritatis provident eveniet praesentium veniam cum iusto distinctio esse, vero est autem, eius optio cupiditate?

262 | customer image 263 | Customer Name, Country 264 |
265 | 266 | 267 |
268 |
269 | 270 | 271 | 272 | 273 | 274 |
275 |

Comfortable Living

276 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat beatae veritatis provident eveniet praesentium veniam cum iusto distinctio esse, vero est autem, eius optio cupiditate?

277 | customer image 278 | Customer Name, Country 279 |
280 | 281 | 282 |
283 |
284 | 285 | 286 | 287 | 288 | 289 |
290 |

Nice Place

291 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat beatae veritatis provident eveniet praesentium veniam cum iusto distinctio esse, vero est autem, eius optio cupiditate?

292 | customer image 293 | Customer Name, Country 294 |
295 | 296 |
297 |
298 |
299 | 300 | 301 | 302 | 365 | 366 | 367 | 368 | 369 | --------------------------------------------------------------------------------