├── assets ├── about.jpg ├── logo.png ├── explore.jpg ├── header.jpg ├── room-1.jpg ├── room-2.jpg ├── room-3.jpg ├── service.jpg ├── twitter.png ├── youtube.png ├── facebook.png └── instagram.png ├── README.md ├── main.js ├── index.html └── styles.css /assets/about.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/RayalPark_25-12-23/HEAD/assets/about.jpg -------------------------------------------------------------------------------- /assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/RayalPark_25-12-23/HEAD/assets/logo.png -------------------------------------------------------------------------------- /assets/explore.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/RayalPark_25-12-23/HEAD/assets/explore.jpg -------------------------------------------------------------------------------- /assets/header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/RayalPark_25-12-23/HEAD/assets/header.jpg -------------------------------------------------------------------------------- /assets/room-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/RayalPark_25-12-23/HEAD/assets/room-1.jpg -------------------------------------------------------------------------------- /assets/room-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/RayalPark_25-12-23/HEAD/assets/room-2.jpg -------------------------------------------------------------------------------- /assets/room-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/RayalPark_25-12-23/HEAD/assets/room-3.jpg -------------------------------------------------------------------------------- /assets/service.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/RayalPark_25-12-23/HEAD/assets/service.jpg -------------------------------------------------------------------------------- /assets/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/RayalPark_25-12-23/HEAD/assets/twitter.png -------------------------------------------------------------------------------- /assets/youtube.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/RayalPark_25-12-23/HEAD/assets/youtube.png -------------------------------------------------------------------------------- /assets/facebook.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/RayalPark_25-12-23/HEAD/assets/facebook.png -------------------------------------------------------------------------------- /assets/instagram.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDesignMastery/RayalPark_25-12-23/HEAD/assets/instagram.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # RayalPark_25-12-23 2 | Unlock the secrets to creating a stunning hotel website with this step-by-step tutorial 3 | -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | const menuBtn = document.getElementById("menu-btn"); 2 | const navLinks = document.getElementById("nav-links"); 3 | const menuBtnIcon = menuBtn.querySelector("i"); 4 | 5 | menuBtn.addEventListener("click", () => { 6 | navLinks.classList.toggle("open"); 7 | 8 | const isOpen = navLinks.classList.contains("open"); 9 | menuBtnIcon.setAttribute("class", isOpen ? "ri-close-line" : "ri-menu-line"); 10 | }); 11 | 12 | navLinks.addEventListener("click", () => { 13 | navLinks.classList.remove("open"); 14 | menuBtnIcon.setAttribute("class", "ri-menu-line"); 15 | }); 16 | 17 | const scrollRevealOption = { 18 | distance: "50px", 19 | origin: "bottom", 20 | duration: 1000, 21 | }; 22 | 23 | // header container 24 | ScrollReveal().reveal(".header__container p", { 25 | ...scrollRevealOption, 26 | }); 27 | 28 | ScrollReveal().reveal(".header__container h1", { 29 | ...scrollRevealOption, 30 | delay: 500, 31 | }); 32 | 33 | // about container 34 | ScrollReveal().reveal(".about__image img", { 35 | ...scrollRevealOption, 36 | origin: "left", 37 | }); 38 | 39 | ScrollReveal().reveal(".about__content .section__subheader", { 40 | ...scrollRevealOption, 41 | delay: 500, 42 | }); 43 | 44 | ScrollReveal().reveal(".about__content .section__header", { 45 | ...scrollRevealOption, 46 | delay: 1000, 47 | }); 48 | 49 | ScrollReveal().reveal(".about__content .section__description", { 50 | ...scrollRevealOption, 51 | delay: 1500, 52 | }); 53 | 54 | ScrollReveal().reveal(".about__btn", { 55 | ...scrollRevealOption, 56 | delay: 2000, 57 | }); 58 | 59 | // room container 60 | ScrollReveal().reveal(".room__card", { 61 | ...scrollRevealOption, 62 | interval: 500, 63 | }); 64 | 65 | // service container 66 | ScrollReveal().reveal(".service__list li", { 67 | ...scrollRevealOption, 68 | interval: 500, 69 | origin: "right", 70 | }); 71 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 11 | Web Design Mastery | Rayal Park 12 | 13 | 14 |
15 | 33 |
34 |

Simple - Unique - Friendly

35 |

Make Yourself At Home
In Our Hotel.

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 | about 71 |
72 |
73 |

ABOUT US

74 |

The Best Holidays Start Here!

75 |

76 | With a focus on quality accommodations, personalized experiences, and 77 | seamless booking, our platform is dedicated to ensuring that every 78 | traveler embarks on their dream holiday with confidence and 79 | excitement. 80 |

81 |
82 | 83 |
84 |
85 |
86 | 87 |
88 |

OUR LIVING ROOM

89 |

The Most Memorable Rest Time Starts Here.

90 |
91 |
92 |
93 | room 94 |
95 | 96 | 97 | 98 |
99 |
100 |
101 |

Deluxe Ocean View

102 |

103 | Bask in luxury with breathtaking ocean views from your private 104 | suite. 105 |

106 |
Starting from $299/night
107 | 108 |
109 |
110 |
111 |
112 | room 113 |
114 | 115 | 116 | 117 |
118 |
119 |
120 |

Executive Cityscape Room

121 |

122 | Experience urban elegance and modern comfort in the heart of the 123 | city. 124 |

125 |
Starting from $199/night
126 | 127 |
128 |
129 |
130 |
131 | room 132 |
133 | 134 | 135 | 136 |
137 |
138 |
139 |

Family Garden Retreat

140 |

141 | Spacious and inviting, perfect for creating cherished memories 142 | with loved ones. 143 |

144 |
Starting from $249/night
145 | 146 |
147 |
148 |
149 |
150 | 151 |
152 |
153 |
154 |

SERVICES

155 |

Strive Only For The Best.

156 |
    157 |
  • 158 | 159 | High Class Security 160 |
    • 161 |
  • 162 | 163 | 24 Hours Room Service 164 |
    • 165 |
  • 166 | 167 | Conference Room 168 |
    • 169 |
  • 170 | 171 | Tourist Guide Support 172 |
    • 173 |
174 |
175 |
176 |
177 | 178 | 194 | 195 |
196 |

EXPLORE

197 |

What's New Today.

198 |
199 |
200 |

10th MAR 2023

201 |

A New Menu Is Available In Our Hotel.

202 | 203 |
204 |
205 |
206 | 207 | 256 | 257 | 258 | 259 | 260 | 261 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap"); 2 | 3 | :root { 4 | --primary-color: #e82574; 5 | --primary-color-dark: #bc1c5c; 6 | --text-dark: #0c0a09; 7 | --text-light: #78716c; 8 | --white: #ffffff; 9 | --max-width: 1200px; 10 | } 11 | 12 | * { 13 | padding: 0; 14 | margin: 0; 15 | box-sizing: border-box; 16 | } 17 | 18 | .section__container { 19 | max-width: var(--max-width); 20 | margin: auto; 21 | padding: 5rem 1rem; 22 | } 23 | 24 | .section__subheader { 25 | margin-bottom: 0.5rem; 26 | position: relative; 27 | font-weight: 500; 28 | letter-spacing: 2px; 29 | color: var(--text-dark); 30 | } 31 | 32 | .section__subheader::after { 33 | position: absolute; 34 | content: ""; 35 | top: 50%; 36 | transform: translate(1rem, -50%); 37 | height: 2px; 38 | width: 4rem; 39 | background-color: var(--primary-color); 40 | } 41 | 42 | .section__header { 43 | max-width: 600px; 44 | margin-bottom: 1rem; 45 | font-size: 2.5rem; 46 | font-weight: 600; 47 | line-height: 3rem; 48 | color: var(--text-dark); 49 | } 50 | 51 | .section__description { 52 | max-width: 600px; 53 | margin-bottom: 1rem; 54 | color: var(--text-light); 55 | } 56 | 57 | .btn { 58 | padding: 0.75rem 1.5rem; 59 | outline: none; 60 | border: none; 61 | font-size: 1rem; 62 | font-weight: 500; 63 | color: var(--white); 64 | background-color: var(--primary-color); 65 | border-radius: 5px; 66 | cursor: pointer; 67 | transition: 0.3s; 68 | } 69 | 70 | .btn:hover { 71 | background-color: var(--primary-color-dark); 72 | } 73 | 74 | img { 75 | width: 100%; 76 | display: flex; 77 | } 78 | 79 | a { 80 | text-decoration: none; 81 | } 82 | 83 | .logo { 84 | max-width: 120px; 85 | } 86 | 87 | html, 88 | body { 89 | scroll-behavior: smooth; 90 | } 91 | 92 | body { 93 | font-family: "Poppins", sans-serif; 94 | } 95 | 96 | .header { 97 | background-image: url("assets/header.jpg"); 98 | background-position: center center; 99 | background-size: cover; 100 | background-repeat: no-repeat; 101 | } 102 | 103 | nav { 104 | position: fixed; 105 | isolation: isolate; 106 | top: 0; 107 | width: 100%; 108 | max-width: var(--max-width); 109 | margin: auto; 110 | z-index: 9; 111 | } 112 | 113 | .nav__bar { 114 | padding: 1rem; 115 | display: flex; 116 | align-items: center; 117 | justify-content: space-between; 118 | gap: 2rem; 119 | background-color: var(--primary-color); 120 | } 121 | 122 | .nav__menu__btn { 123 | font-size: 1.5rem; 124 | color: var(--white); 125 | cursor: pointer; 126 | } 127 | 128 | .nav__links { 129 | list-style: none; 130 | position: absolute; 131 | width: 100%; 132 | padding: 2rem; 133 | display: flex; 134 | align-items: center; 135 | flex-direction: column; 136 | gap: 2rem; 137 | background-color: rgba(188, 28, 92, 0.9); 138 | transform: translateY(-100%); 139 | transition: 0.5s; 140 | z-index: -1; 141 | } 142 | 143 | .nav__links.open { 144 | transform: translateY(0); 145 | } 146 | 147 | .nav__links a { 148 | position: relative; 149 | isolation: isolate; 150 | padding-bottom: 8px; 151 | color: var(--white); 152 | transition: 0.3s; 153 | } 154 | 155 | .nav__btn { 156 | display: none; 157 | } 158 | 159 | .header__container { 160 | padding-block: 10rem 15rem; 161 | } 162 | 163 | .header__container p { 164 | margin-bottom: 1rem; 165 | font-size: 1.2rem; 166 | color: var(--white); 167 | text-align: center; 168 | opacity: 0.6; 169 | } 170 | 171 | .header__container h1 { 172 | font-size: 4rem; 173 | font-weight: 500; 174 | line-height: 4.5rem; 175 | color: var(--white); 176 | text-align: center; 177 | } 178 | 179 | .header__container h1 span { 180 | color: var(--primary-color); 181 | } 182 | 183 | .booking__container { 184 | padding-block: 0; 185 | } 186 | 187 | .booking__form { 188 | padding: 2rem; 189 | display: flex; 190 | gap: 1rem; 191 | align-items: center; 192 | justify-content: center; 193 | flex-wrap: wrap; 194 | background-color: var(--white); 195 | border-radius: 10px; 196 | transform: translateY(-50%); 197 | box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1); 198 | } 199 | 200 | .input__group { 201 | flex: 1 1 220px; 202 | display: flex; 203 | align-items: center; 204 | justify-content: center; 205 | gap: 1rem; 206 | } 207 | 208 | .input__group span { 209 | font-size: 1.75rem; 210 | color: var(--primary-color); 211 | } 212 | 213 | .input__group label { 214 | font-weight: 500; 215 | color: var(--text-dark); 216 | } 217 | 218 | .input__group input { 219 | display: block; 220 | width: 100%; 221 | max-width: 150px; 222 | padding-block: 5px; 223 | color: var(--text-dark); 224 | font-size: 0.9rem; 225 | outline: none; 226 | border: none; 227 | } 228 | 229 | .input__group input::placeholder { 230 | color: var(--text-light); 231 | } 232 | 233 | .about__container { 234 | overflow: hidden; 235 | display: grid; 236 | gap: 2rem; 237 | } 238 | 239 | .about__image img { 240 | max-width: 450px; 241 | margin: auto; 242 | border-radius: 5px; 243 | } 244 | 245 | .room__grid { 246 | margin-top: 4rem; 247 | display: grid; 248 | gap: 1rem; 249 | } 250 | 251 | .room__card { 252 | overflow: hidden; 253 | border-radius: 10px; 254 | box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1); 255 | } 256 | 257 | .room__card__image { 258 | position: relative; 259 | isolation: isolate; 260 | } 261 | 262 | .room__card__icons { 263 | position: absolute; 264 | right: 1rem; 265 | bottom: 1rem; 266 | width: 100%; 267 | display: flex; 268 | align-items: center; 269 | justify-content: flex-end; 270 | flex-wrap: wrap; 271 | gap: 1rem; 272 | z-index: 1; 273 | } 274 | 275 | .room__card__icons span { 276 | display: inline-block; 277 | padding: 2px 8px; 278 | font-size: 1.5rem; 279 | background-color: var(--white); 280 | border-radius: 100%; 281 | box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); 282 | cursor: pointer; 283 | } 284 | 285 | .room__card__icons span:nth-child(1) { 286 | color: #f472b6; 287 | } 288 | 289 | .room__card__icons span:nth-child(2) { 290 | color: #c084fc; 291 | } 292 | 293 | .room__card__icons span:nth-child(3) { 294 | color: #60a5fa; 295 | } 296 | 297 | .room__card__details { 298 | padding: 1rem; 299 | } 300 | 301 | .room__card h4 { 302 | margin-bottom: 0.5rem; 303 | font-size: 1.2rem; 304 | font-weight: 500; 305 | color: var(--text-dark); 306 | } 307 | 308 | .room__card p { 309 | margin-bottom: 0.5rem; 310 | color: var(--text-light); 311 | } 312 | 313 | .room__card h5 { 314 | margin-bottom: 1rem; 315 | font-size: 1rem; 316 | font-weight: 500; 317 | color: var(--text-light); 318 | } 319 | 320 | .room__card h5 span { 321 | font-size: 1.1rem; 322 | color: var(--text-dark); 323 | } 324 | 325 | .service { 326 | background-image: url("assets/service.jpg"); 327 | background-position: center center; 328 | background-size: cover; 329 | background-repeat: no-repeat; 330 | } 331 | 332 | .service__container { 333 | padding-block: 0; 334 | display: grid; 335 | 336 | grid-template-columns: repeat(2, 1fr); 337 | } 338 | 339 | .service__content { 340 | grid-column: 1/3; 341 | padding: 2rem 4rem; 342 | background-color: var(--white); 343 | } 344 | 345 | .service__list { 346 | list-style: none; 347 | margin-top: 2rem; 348 | display: grid; 349 | gap: 2rem; 350 | } 351 | 352 | .service__list li { 353 | display: flex; 354 | align-items: center; 355 | gap: 1rem; 356 | font-size: 1.2rem; 357 | font-weight: 500; 358 | color: var(--text-dark); 359 | } 360 | 361 | .service__list span { 362 | padding: 5px 12px; 363 | font-size: 1.75rem; 364 | color: var(--text-dark); 365 | background-color: var(--text-light); 366 | border-radius: 100%; 367 | } 368 | 369 | .service__list li:nth-child(1) span { 370 | color: #60a5fa; 371 | background-color: #dbeafe; 372 | } 373 | 374 | .service__list li:nth-child(2) span { 375 | color: #f472b6; 376 | background-color: #fce7f3; 377 | } 378 | 379 | .service__list li:nth-child(3) span { 380 | color: #c084fc; 381 | background-color: #f3e8ff; 382 | } 383 | 384 | .service__list li:nth-child(4) span { 385 | color: #fb7185; 386 | background-color: #ffe4e6; 387 | } 388 | 389 | .banner__content { 390 | padding: 2rem; 391 | display: flex; 392 | gap: 2rem; 393 | align-items: center; 394 | justify-content: space-evenly; 395 | flex-wrap: wrap; 396 | border-radius: 10px; 397 | box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1); 398 | } 399 | 400 | .banner__card { 401 | text-align: center; 402 | flex: 1 1 180px; 403 | } 404 | 405 | .banner__card h4 { 406 | font-size: 2rem; 407 | font-weight: 600; 408 | color: var(--text-dark); 409 | } 410 | 411 | .banner__card p { 412 | color: var(--text-light); 413 | } 414 | 415 | .explore :is(.section__subheader, .section__header) { 416 | text-align: center; 417 | margin-inline: auto; 418 | } 419 | 420 | .explore__bg { 421 | margin-top: 4rem; 422 | padding-block: 3rem; 423 | display: grid; 424 | grid-template-columns: 425 | minmax(1rem, 1fr) 426 | minmax(0, var(--max-width)) 427 | minmax(1rem, 1fr); 428 | background-image: url("assets/explore.jpg"); 429 | background-position: center center; 430 | background-size: cover; 431 | background-repeat: no-repeat; 432 | } 433 | 434 | .explore__content { 435 | grid-column: 2/3; 436 | max-width: 400px; 437 | padding: 2rem; 438 | background-color: var(--white); 439 | border-radius: 5px; 440 | box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); 441 | } 442 | 443 | .explore__content p { 444 | margin-bottom: 0.5rem; 445 | } 446 | 447 | .explore__content h4 { 448 | margin-bottom: 1rem; 449 | font-size: 1.2rem; 450 | font-weight: 600; 451 | line-height: 1.5rem; 452 | color: var(--text-dark); 453 | } 454 | 455 | .explore__content .btn { 456 | color: var(--primary-color); 457 | background-color: var(--white); 458 | border: 1px solid var(--primary-color); 459 | } 460 | 461 | .explore__content .btn:hover { 462 | color: var(--white); 463 | background-color: var(--primary-color); 464 | } 465 | 466 | .footer { 467 | background-color: var(--text-dark); 468 | } 469 | 470 | .footer__container { 471 | display: grid; 472 | gap: 4rem 2rem; 473 | } 474 | 475 | .footer__col .section__description { 476 | margin-block: 2rem; 477 | } 478 | 479 | .footer__col h4 { 480 | margin-bottom: 2rem; 481 | font-size: 1.2rem; 482 | font-weight: 500; 483 | color: var(--white); 484 | } 485 | 486 | .footer__links { 487 | list-style: none; 488 | display: grid; 489 | gap: 1rem; 490 | } 491 | 492 | .footer__links a { 493 | color: var(--text-light); 494 | transition: 0.3s; 495 | } 496 | 497 | .footer__links a:hover { 498 | color: var(--white); 499 | } 500 | 501 | .footer__socials { 502 | margin-top: 2rem; 503 | display: flex; 504 | align-items: center; 505 | gap: 1rem; 506 | flex-wrap: wrap; 507 | } 508 | 509 | .footer__socials img { 510 | max-width: 25px; 511 | opacity: 0.8; 512 | transition: 0.3s; 513 | } 514 | 515 | .footer__socials img:hover { 516 | opacity: 1; 517 | } 518 | 519 | .footer__bar { 520 | padding: 1rem; 521 | font-size: 0.9rem; 522 | color: var(--text-light); 523 | text-align: center; 524 | } 525 | 526 | @media (width > 576px) { 527 | .room__grid { 528 | grid-template-columns: repeat(2, 1fr); 529 | } 530 | 531 | .footer__container { 532 | grid-template-columns: repeat(2, 1fr); 533 | } 534 | } 535 | 536 | @media (width > 768px) { 537 | nav { 538 | padding: 2rem 1rem; 539 | position: static; 540 | display: flex; 541 | align-items: center; 542 | justify-content: space-between; 543 | } 544 | 545 | .nav__bar { 546 | padding: 0; 547 | background-color: transparent; 548 | } 549 | 550 | .nav__menu__btn { 551 | display: none; 552 | } 553 | 554 | .nav__links { 555 | padding: 0; 556 | width: unset; 557 | position: static; 558 | transform: none; 559 | flex-direction: row; 560 | background-color: transparent; 561 | } 562 | 563 | .nav__btn { 564 | display: block; 565 | } 566 | 567 | .nav__links a::after { 568 | position: absolute; 569 | content: ""; 570 | left: 0; 571 | bottom: 0; 572 | height: 2px; 573 | width: 0; 574 | background-color: var(--primary-color); 575 | transition: 0.3s; 576 | transform-origin: left; 577 | } 578 | 579 | .nav__links a:hover::after { 580 | width: 100%; 581 | } 582 | 583 | .about__container { 584 | grid-template-columns: repeat(2, 1fr); 585 | align-items: center; 586 | } 587 | 588 | .room__grid { 589 | grid-template-columns: repeat(3, 1fr); 590 | } 591 | 592 | .service__content { 593 | grid-column: 2/3; 594 | } 595 | 596 | .footer__container { 597 | grid-template-columns: repeat(4, 1fr); 598 | } 599 | } 600 | 601 | @media (width > 1024px) { 602 | .room__grid { 603 | gap: 2rem; 604 | } 605 | } 606 | --------------------------------------------------------------------------------