├── README.md ├── assets ├── css │ └── style.css ├── images │ ├── about-banner.png │ ├── author-avatar.png │ ├── blog-2.jpg │ ├── blog-3.jpg │ ├── destination-1.jpg │ ├── destination-2.jpg │ ├── destination-3.jpg │ ├── destination-4.jpg │ ├── destination-5.jpg │ ├── footer-bg.png │ ├── hero-banner.png │ ├── hero-bg-bottom.png │ ├── hero-bg-top.png │ ├── popular-1.jpg │ ├── popular-2.jpg │ ├── popular-3.jpg │ ├── shape-1.png │ ├── shape-2.png │ └── shape-3.png └── js │ └── script.js ├── favicon.svg ├── index.html ├── index.txt ├── readme-images └── desktop.png └── style-guide.md /README.md: -------------------------------------------------------------------------------- 1 |
2 | 3 | ![GitHub repo size](https://img.shields.io/github/repo-size/codewithsadee/tourest) 4 | ![GitHub stars](https://img.shields.io/github/stars/codewithsadee/tourest?style=social) 5 | ![GitHub forks](https://img.shields.io/github/forks/codewithsadee/tourest?style=social) 6 | [![Twitter Follow](https://img.shields.io/twitter/follow/codewithsadee_?style=social)](https://twitter.com/intent/follow?screen_name=codewithsadee_) 7 | [![YouTube Video Views](https://img.shields.io/youtube/views/9ts7JnruWg4?style=social)](https://youtu.be/9ts7JnruWg4) 8 | 9 |
10 |
11 | 12 |

Tourest - Travel website

13 | 14 | Tourest is fully responsive travel website,
Responsive for all devices, built using HTML, CSS, and JavaScript. 15 | 16 | ➥ Live Demo 17 | 18 |
19 | 20 |
21 | 22 | ### Demo Screeshots 23 | 24 | ![Tourest Desktop Demo](./readme-images/desktop.png "Desktop Demo") 25 | 26 | ### Prerequisites 27 | 28 | Before you begin, ensure you have met the following requirements: 29 | 30 | * [Git](https://git-scm.com/downloads "Download Git") must be installed on your operating system. 31 | 32 | ### Run Locally 33 | 34 | To run **Tourest** locally, run this command on your git bash: 35 | 36 | Linux and macOS: 37 | 38 | ```bash 39 | sudo git clone https://github.com/codewithsadee/tourest.git 40 | ``` 41 | 42 | Windows: 43 | 44 | ```bash 45 | git clone https://github.com/codewithsadee/tourest.git 46 | ``` 47 | 48 | ### Contact 49 | 50 | If you want to contact with me you can reach me at [Twitter](https://www.twitter.com/codewithsadee). 51 | 52 | ### License 53 | 54 | This project is **free to use** and does not contains any license. 55 | -------------------------------------------------------------------------------- /assets/css/style.css: -------------------------------------------------------------------------------- 1 | /*-----------------------------------*\ 2 | #style.css 3 | \*-----------------------------------*/ 4 | 5 | /** 6 | * copyright 2022 codewithsadee 7 | */ 8 | 9 | 10 | 11 | 12 | 13 | /*-----------------------------------*\ 14 | #CUSTOM PROPERTY 15 | \*-----------------------------------*/ 16 | 17 | :root { 18 | 19 | /** 20 | * colors 21 | */ 22 | 23 | --battleship-gray: hsl(0, 0%, 53%); 24 | --viridian-green: hsl(180, 98%, 31%); 25 | --silver-chalice: hsl(0, 0%, 69%); 26 | --mikado-yellow: hsl(47, 98%, 50%); 27 | --granite-gray: hsl(0, 0%, 40%); 28 | --independence: hsl(219, 20%, 32%); 29 | --spanish-gray: hsl(0, 0%, 61%); 30 | --oxford-blue: hsl(222, 46%, 17%); 31 | --black-coral: hsl(223, 8%, 44%); 32 | --eerie-black: hsl(210, 11%, 15%); 33 | --light-gray: hsl(0, 0%, 80%); 34 | --white-2: hsl(0, 0%, 98%); 35 | --white-1: hsl(0, 0%, 100%); 36 | --black: hsl(0, 0%, 0%); 37 | --jet: hsl(0, 0%, 20%); 38 | 39 | /** 40 | * typography 41 | */ 42 | 43 | --ff-abril-fatface: 'Abril Fatface', cursive; 44 | --ff-comforter-brush: 'Comforter Brush', cursive; 45 | --ff-heebo: 'Heebo', sans-serif; 46 | 47 | --fs-1: 3.4rem; 48 | --fs-2: 3.2rem; 49 | --fs-3: 3rem; 50 | --fs-4: 2.4rem; 51 | --fs-5: 1.8rem; 52 | --fs-6: 1.7rem; 53 | --fs-7: 1.4rem; 54 | --fs-8: 1.2rem; 55 | 56 | --fw-400: 400; 57 | --fw-500: 500; 58 | --fw-600: 600; 59 | --fw-700: 700; 60 | 61 | /** 62 | * border radius 63 | */ 64 | 65 | --radius-6: 6px; 66 | 67 | /** 68 | * spacing 69 | */ 70 | 71 | --section-padding: 40px; 72 | 73 | /** 74 | * transition 75 | */ 76 | 77 | --transition-1: 0.15s ease; 78 | --transition-2: 0.35s ease; 79 | --cubic-out: cubic-bezier(0.33, 0.85, 0.56, 1.02); 80 | 81 | } 82 | 83 | 84 | 85 | 86 | 87 | /*-----------------------------------*\ 88 | #RESET 89 | \*-----------------------------------*/ 90 | 91 | *, 92 | *::before, 93 | *::after { 94 | margin: 0; 95 | padding: 0; 96 | box-sizing: border-box; 97 | } 98 | 99 | li { list-style: none; } 100 | 101 | a { text-decoration: none; } 102 | 103 | a, 104 | img, 105 | span, 106 | input, 107 | button, 108 | ion-icon { display: block; } 109 | 110 | input, 111 | button { 112 | border: none; 113 | background: none; 114 | font: inherit; 115 | } 116 | 117 | button { cursor: pointer; } 118 | 119 | input { width: 100%; } 120 | 121 | img { height: auto; } 122 | 123 | address { font-style: normal; } 124 | 125 | :focus-visible { outline-offset: 5px; } 126 | 127 | html { 128 | font-family: var(--ff-heebo); 129 | font-size: 10px; 130 | scroll-behavior: smooth; 131 | } 132 | 133 | body { 134 | background: var(--white-1); 135 | font-size: 1.6rem; 136 | } 137 | 138 | ::-webkit-scrollbar { width: 10px; } 139 | 140 | ::-webkit-scrollbar-track { background: hsl(0, 0%, 95%); } 141 | 142 | ::-webkit-scrollbar-thumb { background: hsl(0, 0%, 80%); } 143 | 144 | ::-webkit-scrollbar-thumb:hover { background: hsl(0, 0%, 70%); } 145 | 146 | 147 | 148 | 149 | 150 | /*-----------------------------------*\ 151 | #REUSED STYLE 152 | \*-----------------------------------*/ 153 | 154 | .container { padding-inline: 15px; } 155 | 156 | .btn { 157 | background: var(--background, var(--white-1)); 158 | color: var(--color, var(--viridian-green)); 159 | font-weight: var(--fw-700); 160 | width: max-content; 161 | padding: 10px 25px; 162 | border: 2px solid var(--border-color, var(--white-1)); 163 | border-radius: var(--radius-6); 164 | } 165 | 166 | .btn-secondary:is(:hover, :focus) { 167 | --background: transparent; 168 | --color: var(--white-1); 169 | } 170 | 171 | .btn-primary { 172 | --background: var(--viridian-green); 173 | --color: var(--white-1); 174 | --border-color: var(--viridian-green); 175 | } 176 | 177 | .btn-primary:is(:hover, :focus) { 178 | --background: transparent; 179 | --color: var(--viridian-green); 180 | } 181 | 182 | .btn-outline { 183 | --color: var(--oxford-blue); 184 | --border-color: var(--silver-chalice); 185 | } 186 | 187 | .btn-outline:is(:hover, :focus) { 188 | --color: var(--viridian-green); 189 | --border-color: var(--viridian-green); 190 | } 191 | 192 | .section { padding-block: var(--section-padding); } 193 | 194 | .section-subtitle { 195 | font-family: var(--ff-comforter-brush); 196 | color: var(--mikado-yellow); 197 | font-size: var(--fs-3); 198 | } 199 | 200 | .w-100 { width: 100%; } 201 | 202 | .h2 { 203 | color: var(--jet); 204 | font-size: var(--fs-3); 205 | font-weight: var(--fw-500); 206 | } 207 | 208 | .h3 { 209 | font-size: var(--fs-4); 210 | font-weight: var(--fw-400); 211 | } 212 | 213 | .section-title { font-family: var(--ff-abril-fatface); } 214 | 215 | .img-cover { 216 | width: 100%; 217 | height: 100%; 218 | object-fit: cover; 219 | } 220 | 221 | .card-banner { background: var(--silver-chalice); } 222 | 223 | :is(.popular, .blog) .section-subtitle { 224 | text-align: center; 225 | margin-bottom: 10px; 226 | } 227 | 228 | :is(.popular, .blog) .section-title { 229 | text-align: center; 230 | margin-bottom: 50px; 231 | } 232 | 233 | .popular-list, 234 | .blog-list { 235 | display: grid; 236 | gap: 30px; 237 | } 238 | 239 | .popular-card, 240 | .blog-card { 241 | box-shadow: 0 10px 30px hsla(0, 0%, 0%, 0.1); 242 | border-radius: var(--radius-6); 243 | overflow: hidden; 244 | } 245 | 246 | :is(.popular, .blog) .card-banner { position: relative; } 247 | 248 | .card-badge { 249 | position: absolute; 250 | top: 10px; 251 | left: 10px; 252 | background: var(--mikado-yellow); 253 | color: var(--white-1); 254 | padding: 14px 10px; 255 | border-radius: var(--radius-6); 256 | } 257 | 258 | .card-badge ion-icon { 259 | --ionicon-stroke-width: 60px; 260 | font-size: 20px; 261 | margin-inline: auto; 262 | } 263 | 264 | .card-badge time { font-weight: var(--fw-700); } 265 | 266 | :is(.popular, .blog) .card-content { padding: 30px 15px; } 267 | 268 | .card-wrapper { 269 | display: flex; 270 | justify-content: flex-start; 271 | align-items: center; 272 | gap: 20px; 273 | } 274 | 275 | :is(.popular, .blog) .card-title { 276 | color: var(--granite-gray); 277 | font-size: var(--fs-5); 278 | margin-block: 20px; 279 | } 280 | 281 | :is(.popular, .blog) .card-title > a { color: inherit; } 282 | 283 | :is(.popular, .blog) .card-title > a:is(:hover, :focus) { color: var(--viridian-green); } 284 | 285 | 286 | 287 | 288 | 289 | /*-----------------------------------*\ 290 | #HEADER 291 | \*-----------------------------------*/ 292 | 293 | .header { 294 | background: var(--viridian-green); 295 | padding-block: 20px; 296 | height: 88px; 297 | overflow: hidden; 298 | transition: 0.25s var(--cubic-out); 299 | } 300 | 301 | .header.active { 302 | height: 425px; 303 | transition-duration: 0.35s; 304 | } 305 | 306 | .header .container { 307 | display: flex; 308 | flex-wrap: wrap; 309 | justify-content: space-between; 310 | align-items: center; 311 | } 312 | 313 | .logo { 314 | color: var(--white-1); 315 | font-size: var(--fs-2); 316 | font-weight: var(--fw-600); 317 | } 318 | 319 | .nav-toggle-btn.active .open, 320 | .nav-toggle-btn .close { display: none; } 321 | 322 | .nav-toggle-btn .open, 323 | .nav-toggle-btn.active .close { display: block; } 324 | 325 | .nav-toggle-btn ion-icon { 326 | color: var(--white-1); 327 | font-size: 35px; 328 | --ionicon-stroke-width: 40px; 329 | } 330 | 331 | .navbar { 332 | width: 100%; 333 | padding: 20px 10px; 334 | opacity: 0; 335 | visibility: hidden; 336 | transition: var(--transition-1); 337 | } 338 | 339 | .header.active .navbar { 340 | opacity: 1; 341 | visibility: visible; 342 | } 343 | 344 | .navbar-list { margin-bottom: 15px; } 345 | 346 | .navbar-link { 347 | color: var(--white-1); 348 | font-size: var(--fs-5); 349 | font-weight: var(--fw-500); 350 | padding-block: 10px 0; 351 | border-bottom: 2px solid transparent; 352 | width: max-content; 353 | } 354 | 355 | .navbar-link:is(:hover, :focus) { border-color: var(--white-1); } 356 | 357 | 358 | 359 | 360 | 361 | /*-----------------------------------*\ 362 | #HERO 363 | \*-----------------------------------*/ 364 | 365 | .shape { display: none; } 366 | 367 | .hero { 368 | background-repeat: no-repeat, no-repeat; 369 | background-position: bottom left, top right; 370 | } 371 | 372 | .hero-content { margin-bottom: 50px; } 373 | 374 | .hero .section-subtitle { margin-bottom: 15px; } 375 | 376 | .hero-title { 377 | color: var(--oxford-blue); 378 | font-size: var(--fs-1); 379 | font-family: var(--ff-abril-fatface); 380 | font-weight: var(--fw-500); 381 | line-height: 1.2; 382 | max-width: 11ch; 383 | margin-bottom: 15px; 384 | } 385 | 386 | .hero-text { 387 | color: var(--black-coral); 388 | font-size: var(--fs-7); 389 | line-height: 1.7; 390 | margin-bottom: 15px; 391 | } 392 | 393 | .btn-group { 394 | display: flex; 395 | flex-wrap: wrap; 396 | gap: 15px; 397 | } 398 | 399 | 400 | 401 | 402 | 403 | /*-----------------------------------*\ 404 | #DESTINATION 405 | \*-----------------------------------*/ 406 | 407 | .destination .section-subtitle { 408 | text-align: center; 409 | margin-bottom: 15px; 410 | } 411 | 412 | .destination .section-title { 413 | text-align: center; 414 | margin-bottom: 60px; 415 | } 416 | 417 | .destination-list { 418 | display: flex; 419 | flex-wrap: wrap; 420 | gap: 30px; 421 | } 422 | 423 | .destination-card { 424 | position: relative; 425 | border-radius: var(--radius-6); 426 | overflow: hidden; 427 | } 428 | 429 | .destination-card::after { 430 | content: ""; 431 | position: absolute; 432 | inset: 0; 433 | background: linear-gradient(hsla(222, 46%, 17%, 0), hsla(222, 46%, 17%, 0.7)); 434 | } 435 | 436 | .destination-card img { transition: var(--transition-2); } 437 | 438 | .destination-card:is(:hover, :focus) img { transform: scale(1.1); } 439 | 440 | .destination-card .card-content { 441 | position: absolute; 442 | bottom: 0; 443 | left: 0; 444 | width: 100%; 445 | padding: 30px; 446 | z-index: 1; 447 | } 448 | 449 | .destination-card .card-subtitle { 450 | color: var(--mikado-yellow); 451 | font-family: var(--ff-comforter-brush); 452 | font-size: var(--fs-5); 453 | } 454 | 455 | .destination-card .card-title { 456 | color: var(--white-1); 457 | font-family: var(--ff-abril-fatface); 458 | } 459 | 460 | 461 | 462 | 463 | 464 | /*-----------------------------------*\ 465 | #POPULAR 466 | \*-----------------------------------*/ 467 | 468 | .popular-card :is(.card-price, .card-rating) { 469 | color: var(--white-1); 470 | font-size: var(--fs-8); 471 | padding: 5px 8px; 472 | border-radius: var(--radius-6); 473 | } 474 | 475 | .popular-card .card-price { background: var(--viridian-green); } 476 | 477 | .popular-card .card-rating { 478 | background: var(--mikado-yellow); 479 | display: flex; 480 | align-items: center; 481 | gap: 2px; 482 | } 483 | 484 | .popular-card .card-rating ion-icon { font-size: 17px; } 485 | 486 | .popular-card .card-rating data { margin-left: 4px; } 487 | 488 | .popular-card .card-location { color: var(--spanish-gray); } 489 | 490 | 491 | 492 | 493 | 494 | /*-----------------------------------*\ 495 | #ABOUT 496 | \*-----------------------------------*/ 497 | 498 | .about-content { margin-bottom: 50px; } 499 | 500 | .about .section-subtitle { margin-bottom: 10px; } 501 | 502 | .about .section-title { margin-bottom: 20px; } 503 | 504 | .about-text, 505 | .about-item-text { 506 | color: var(--battleship-gray); 507 | font-size: var(--fs-6); 508 | line-height: 1.7; 509 | } 510 | 511 | .about-text { margin-bottom: 30px; } 512 | 513 | .about-list { 514 | display: grid; 515 | gap: 20px; 516 | margin-bottom: 40px; 517 | } 518 | 519 | .about-item { 520 | display: flex; 521 | align-items: flex-start; 522 | gap: 15px; 523 | } 524 | 525 | .about-item-icon { 526 | background: var(--viridian-green); 527 | color: var(--white-1); 528 | font-size: 26px; 529 | padding: 16px; 530 | border-radius: 50%; 531 | margin-top: 5px; 532 | } 533 | 534 | .about-item-title { 535 | color: var(--granite-gray); 536 | font-weight: var(--fw-600); 537 | margin-bottom: 5px; 538 | } 539 | 540 | 541 | 542 | 543 | 544 | /*-----------------------------------*\ 545 | #BLOG 546 | \*-----------------------------------*/ 547 | 548 | .blog { padding-bottom: 100px; } 549 | 550 | .blog-card .author-wrapper { 551 | display: flex; 552 | align-items: center; 553 | gap: 15px; 554 | } 555 | 556 | .blog-card .card-wrapper { 557 | color: var(--spanish-gray); 558 | font-size: var(--fs-8); 559 | justify-content: space-between; 560 | } 561 | 562 | .author-name { 563 | color: var(--granite-gray); 564 | font-weight: var(--fw-500); 565 | } 566 | 567 | .btn-link { 568 | color: var(--viridian-green); 569 | font-weight: var(--fw-700); 570 | display: flex; 571 | justify-content: flex-end; 572 | align-items: center; 573 | gap: 5px; 574 | } 575 | 576 | .btn-link ion-icon { font-size: 20px; } 577 | 578 | .btn-link:is(:hover, :focus) { color: var(--oxford-blue); } 579 | 580 | 581 | 582 | 583 | 584 | /*-----------------------------------*\ 585 | #FOOTER 586 | \*-----------------------------------*/ 587 | 588 | .footer { 589 | background-color: var(--oxford-blue); 590 | background-repeat: no-repeat; 591 | background-size: cover; 592 | background-position: center; 593 | color: var(--light-gray); 594 | padding-block: 60px; 595 | } 596 | 597 | .footer a:not(.logo) { color: inherit; } 598 | 599 | .footer-top { 600 | display: grid; 601 | gap: 30px; 602 | margin-bottom: 40px; 603 | } 604 | 605 | .footer-list-title { 606 | color: var(--white-1); 607 | font-size: var(--fs-4); 608 | font-weight: var(--fw-600); 609 | margin-bottom: 15px; 610 | } 611 | 612 | .footer-link { 613 | font-size: var(--fs-7); 614 | padding-block: 5px; 615 | } 616 | 617 | .footer .footer-link:is(:hover, :focus) { color: var(--white-1); } 618 | 619 | .newsletter-text { 620 | font-size: var(--fs-7); 621 | margin-bottom: 30px; 622 | line-height: 1.7; 623 | } 624 | 625 | .newsletter-form { position: relative; } 626 | 627 | .newsletter-input { 628 | background: var(--white-1); 629 | border-radius: var(--radius-6); 630 | padding: 24px; 631 | color: var(--eerie-black); 632 | } 633 | 634 | .newsletter-input:focus { 635 | outline: none; 636 | box-shadow: 0 0 0 5px hsla(216, 98%, 52%, 0.25); 637 | } 638 | 639 | .newsletter-form .btn-primary { 640 | position: absolute; 641 | top: 0; 642 | right: 0; 643 | bottom: 0; 644 | } 645 | 646 | .newsletter-form .btn-primary:is(:hover, :focus) { 647 | --background: var(--viridian-green); 648 | --color: var(--white-1); 649 | } 650 | 651 | .footer-bottom .logo { 652 | text-align: center; 653 | margin-bottom: 20px; 654 | } 655 | 656 | .copyright { 657 | text-align: center; 658 | margin-bottom: 20px; 659 | font-size: var(--fs-7); 660 | } 661 | 662 | .copyright-link { 663 | display: inline-block; 664 | text-decoration: underline; 665 | } 666 | 667 | .copyright-link:is(:hover, :focus) { text-decoration: none; } 668 | 669 | .social-list { 670 | display: flex; 671 | justify-content: center; 672 | align-items: center; 673 | gap: 10px; 674 | } 675 | 676 | .social-link { 677 | font-size: 17px; 678 | background: var(--independence); 679 | padding: 10px; 680 | border-radius: 50%; 681 | } 682 | 683 | .social-link:is(:hover, :focus) { background: var(--viridian-green); } 684 | 685 | 686 | 687 | 688 | 689 | /*-----------------------------------*\ 690 | #GO TO TOP 691 | \*-----------------------------------*/ 692 | 693 | .go-top { 694 | position: fixed; 695 | bottom: 0; 696 | right: 15px; 697 | background: var(--viridian-green); 698 | color: var(--white-1); 699 | font-size: 20px; 700 | padding: 10px; 701 | border-radius: var(--radius-6); 702 | visibility: hidden; 703 | opacity: 0; 704 | transition: var(--transition-1); 705 | } 706 | 707 | .go-top.active { 708 | visibility: visible; 709 | opacity: 1; 710 | transform: translateY(-15px); 711 | } 712 | 713 | .go-top:is(:hover, :focus) { transform: translateY(-25px); } 714 | 715 | 716 | 717 | 718 | 719 | /*-----------------------------------*\ 720 | #RESPONSIVE 721 | \*-----------------------------------*/ 722 | 723 | /** 724 | * responsive for larger than 575px screen 725 | */ 726 | 727 | @media (min-width: 575px) { 728 | 729 | /** 730 | * CUSTOM PROPERTY 731 | */ 732 | 733 | :root { 734 | 735 | /** 736 | * typography 737 | */ 738 | 739 | --fs-1: 5rem; 740 | --fs-3: 4rem; 741 | --fs-8: 1.4rem; 742 | 743 | } 744 | 745 | 746 | 747 | /** 748 | * HERO 749 | */ 750 | 751 | .hero-text { --fs-7: 1.8rem; } 752 | 753 | 754 | 755 | /** 756 | * FOOTER 757 | */ 758 | 759 | .footer-top { grid-template-columns: 1fr 1fr; } 760 | 761 | } 762 | 763 | 764 | 765 | 766 | 767 | /** 768 | * responsive for larger than 768px screen 769 | */ 770 | 771 | @media (min-width: 768px) { 772 | 773 | /** 774 | * REUSED STYLE 775 | */ 776 | 777 | .container { 778 | max-width: 750px; 779 | margin-inline: auto; 780 | } 781 | 782 | .popular-list, 783 | .blog-list { grid-template-columns: 1fr 1fr; } 784 | 785 | 786 | 787 | /** 788 | * HERO 789 | */ 790 | 791 | .hero { 792 | min-height: 550px; 793 | display: grid; 794 | place-items: center; 795 | } 796 | 797 | .hero .container { 798 | display: flex; 799 | align-items: center; 800 | gap: 40px; 801 | } 802 | 803 | 804 | 805 | /** 806 | * DESTINATION 807 | */ 808 | 809 | .destination-list > li { width: calc(33.33% - 20px); } 810 | 811 | .destination-list .w-50 { width: calc(50% - 20px); } 812 | 813 | 814 | 815 | /** 816 | * FOOTER 817 | */ 818 | 819 | .footer { --fs-7: 1.6rem; } 820 | 821 | .footer-bottom { 822 | display: flex; 823 | align-items: center; 824 | justify-content: space-between; 825 | } 826 | 827 | .footer-bottom .logo, 828 | .copyright { margin-bottom: 0; } 829 | 830 | } 831 | 832 | 833 | 834 | 835 | 836 | /** 837 | * responsive for larger than 992px screen 838 | */ 839 | 840 | @media (min-width: 992px) { 841 | 842 | /** 843 | * CUSTOM PROPERTY 844 | */ 845 | 846 | :root { 847 | 848 | /** 849 | * typography 850 | */ 851 | 852 | --fs-2: 3.5rem; 853 | --fs-3: 4.4rem; 854 | 855 | /** 856 | * spacing 857 | */ 858 | 859 | --section-padding: 60px; 860 | 861 | } 862 | 863 | 864 | 865 | /** 866 | * REUSED STYLE 867 | */ 868 | 869 | .container { max-width: 980px; } 870 | 871 | .popular-list, 872 | .blog-list { grid-template-columns: repeat(3, 1fr); } 873 | 874 | 875 | 876 | /** 877 | * HEADER 878 | */ 879 | 880 | .nav-toggle-btn { display: none; } 881 | 882 | .header, 883 | .header.active { height: unset; } 884 | 885 | .navbar { 886 | all: unset; 887 | display: flex; 888 | align-items: center; 889 | flex-grow: 1; 890 | } 891 | 892 | .navbar-list { 893 | margin-bottom: 0; 894 | margin-inline: auto; 895 | display: flex; 896 | align-items: center; 897 | gap: 30px; 898 | } 899 | 900 | .navbar-link { 901 | font-weight: var(--fw-700); 902 | margin-bottom: 8px; 903 | } 904 | 905 | 906 | 907 | /** 908 | * HERO 909 | */ 910 | 911 | .hero { 912 | position: relative; 913 | min-height: 680px; 914 | } 915 | 916 | .hero-title, 917 | .hero-text { margin-bottom: 35px; } 918 | 919 | .shape { 920 | display: block; 921 | position: absolute; 922 | animation: rotate 8s linear infinite; 923 | } 924 | 925 | .shape-1 { 926 | top: 60px; 927 | left: 47%; 928 | } 929 | 930 | .shape-2 { 931 | top: 20%; 932 | right: 50px; 933 | animation-delay: 0.25s; 934 | } 935 | 936 | .shape-3 { 937 | left: 40%; 938 | bottom: 20%; 939 | animation-delay: 0.5s; 940 | } 941 | 942 | @keyframes rotate { 943 | 0% { transform: rotate(0); } 944 | 100% { transform: rotate(1turn); } 945 | } 946 | 947 | 948 | 949 | /** 950 | * DESTINATION 951 | */ 952 | 953 | .destination { 954 | --fs-4: 3.2rem; 955 | --fs-5: 2.6rem; 956 | } 957 | 958 | 959 | 960 | /** 961 | * ABOUT 962 | */ 963 | 964 | .about .container { 965 | display: grid; 966 | grid-template-columns: 0.8fr 1fr; 967 | align-items: center; 968 | gap: 30px; 969 | } 970 | 971 | .about-content { margin-bottom: 0; } 972 | 973 | 974 | 975 | /** 976 | * FOOTER 977 | */ 978 | 979 | .footer-top { grid-template-columns: 1fr 1fr 1fr 2fr; } 980 | 981 | } 982 | 983 | 984 | 985 | 986 | 987 | /** 988 | * responsive for larger than 1200px screen 989 | */ 990 | 991 | @media (min-width: 1200px) { 992 | 993 | /** 994 | * CUSTOM PROPERTY 995 | */ 996 | 997 | :root { 998 | 999 | /** 1000 | * typography 1001 | */ 1002 | 1003 | --fs-1: 6rem; 1004 | 1005 | } 1006 | 1007 | 1008 | 1009 | /** 1010 | * REUSED STYLE 1011 | */ 1012 | 1013 | .container { max-width: 1150px; } 1014 | 1015 | :is(.popular, .blog) .card-content { padding: 30px; } 1016 | 1017 | 1018 | 1019 | /** 1020 | * HEADER 1021 | */ 1022 | 1023 | .navbar-list { gap: 50px; } 1024 | 1025 | 1026 | 1027 | /** 1028 | * ABOUT 1029 | */ 1030 | 1031 | .about .container { grid-template-columns: 0.7fr 1fr; } 1032 | 1033 | } -------------------------------------------------------------------------------- /assets/images/about-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/tourest/be09efc84a9dc30d0031f66f1b8c7b4b8e1f8702/assets/images/about-banner.png -------------------------------------------------------------------------------- /assets/images/author-avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/tourest/be09efc84a9dc30d0031f66f1b8c7b4b8e1f8702/assets/images/author-avatar.png -------------------------------------------------------------------------------- /assets/images/blog-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/tourest/be09efc84a9dc30d0031f66f1b8c7b4b8e1f8702/assets/images/blog-2.jpg -------------------------------------------------------------------------------- /assets/images/blog-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/tourest/be09efc84a9dc30d0031f66f1b8c7b4b8e1f8702/assets/images/blog-3.jpg -------------------------------------------------------------------------------- /assets/images/destination-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/tourest/be09efc84a9dc30d0031f66f1b8c7b4b8e1f8702/assets/images/destination-1.jpg -------------------------------------------------------------------------------- /assets/images/destination-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/tourest/be09efc84a9dc30d0031f66f1b8c7b4b8e1f8702/assets/images/destination-2.jpg -------------------------------------------------------------------------------- /assets/images/destination-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/tourest/be09efc84a9dc30d0031f66f1b8c7b4b8e1f8702/assets/images/destination-3.jpg -------------------------------------------------------------------------------- /assets/images/destination-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/tourest/be09efc84a9dc30d0031f66f1b8c7b4b8e1f8702/assets/images/destination-4.jpg -------------------------------------------------------------------------------- /assets/images/destination-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/tourest/be09efc84a9dc30d0031f66f1b8c7b4b8e1f8702/assets/images/destination-5.jpg -------------------------------------------------------------------------------- /assets/images/footer-bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/tourest/be09efc84a9dc30d0031f66f1b8c7b4b8e1f8702/assets/images/footer-bg.png -------------------------------------------------------------------------------- /assets/images/hero-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/tourest/be09efc84a9dc30d0031f66f1b8c7b4b8e1f8702/assets/images/hero-banner.png -------------------------------------------------------------------------------- /assets/images/hero-bg-bottom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/tourest/be09efc84a9dc30d0031f66f1b8c7b4b8e1f8702/assets/images/hero-bg-bottom.png -------------------------------------------------------------------------------- /assets/images/hero-bg-top.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/tourest/be09efc84a9dc30d0031f66f1b8c7b4b8e1f8702/assets/images/hero-bg-top.png -------------------------------------------------------------------------------- /assets/images/popular-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/tourest/be09efc84a9dc30d0031f66f1b8c7b4b8e1f8702/assets/images/popular-1.jpg -------------------------------------------------------------------------------- /assets/images/popular-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/tourest/be09efc84a9dc30d0031f66f1b8c7b4b8e1f8702/assets/images/popular-2.jpg -------------------------------------------------------------------------------- /assets/images/popular-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/tourest/be09efc84a9dc30d0031f66f1b8c7b4b8e1f8702/assets/images/popular-3.jpg -------------------------------------------------------------------------------- /assets/images/shape-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/tourest/be09efc84a9dc30d0031f66f1b8c7b4b8e1f8702/assets/images/shape-1.png -------------------------------------------------------------------------------- /assets/images/shape-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/tourest/be09efc84a9dc30d0031f66f1b8c7b4b8e1f8702/assets/images/shape-2.png -------------------------------------------------------------------------------- /assets/images/shape-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/tourest/be09efc84a9dc30d0031f66f1b8c7b4b8e1f8702/assets/images/shape-3.png -------------------------------------------------------------------------------- /assets/js/script.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | /** 4 | * navbar toggle 5 | */ 6 | 7 | const navToggleBtn = document.querySelector("[data-nav-toggle-btn]"); 8 | const header = document.querySelector("[data-header]"); 9 | 10 | navToggleBtn.addEventListener("click", function () { 11 | this.classList.toggle("active"); 12 | header.classList.toggle("active"); 13 | }); 14 | 15 | 16 | 17 | /** 18 | * show go top btn when scroll window to 500px 19 | */ 20 | 21 | const goTopBtn = document.querySelector("[data-go-top]"); 22 | 23 | window.addEventListener("scroll", function () { 24 | window.scrollY >= 500 ? goTopBtn.classList.add("active") 25 | : goTopBtn.classList.remove("active"); 26 | }); -------------------------------------------------------------------------------- /favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Tourest - Explore the World 9 | 10 | 13 | 14 | 15 | 18 | 19 | 20 | 23 | 24 | 25 | 28 | 29 | 30 | 31 | 32 | 33 | 36 | 37 |
38 |
39 | 40 | 41 |

Tourest

42 | 43 | 44 | 48 | 49 | 82 | 83 |
84 |
85 | 86 | 87 | 88 | 89 | 90 |
91 |
92 | 93 | 96 | 97 |
99 |
100 | 101 | Vector Shape 102 | 103 | Vector Shape 104 | 105 | Vector Shape 106 | 107 |
108 | 109 |

Explore Your Travel

110 | 111 |

Trusted Travel Agency

112 | 113 |

114 | I travel not to go anywhere, but to go. I travel for travel's sake the great affair is to move. 115 |

116 | 117 |
118 | Contact Us 119 | 120 | Learn More 121 |
122 | 123 |
124 | 125 |
126 | hero banner 128 |
129 | 130 |
131 |
132 | 133 | 134 | 135 | 136 | 137 | 140 | 141 |
142 |
143 | 144 |

Destinations

145 | 146 |

Choose Your Place

147 | 148 | 236 | 237 |
238 |
239 | 240 | 241 | 242 | 243 | 244 | 247 | 248 |
249 |
250 | 251 |

Featured Tours

252 | 253 |

Most Popular Tours

254 | 255 | 387 | 388 |
389 |
390 | 391 | 392 | 393 | 394 | 395 | 398 | 399 |
400 |
401 | 402 |
403 | 404 |

About Us

405 | 406 |

Explore all tour of the world with us.

407 | 408 |

409 | Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or 410 | randomised words 411 | which don't look even slightly believable. 412 |

413 | 414 |
    415 | 416 |
  • 417 | 418 |
    419 | 420 |
    421 | 422 |
    423 |

    Tour guide

    424 | 425 |

    426 | Lorem Ipsum available, but the majority have suffered alteration in some. 427 |

    428 |
    429 | 430 |
    • 431 | 432 |
  • 433 | 434 |
    435 | 436 |
    437 | 438 |
    439 |

    Friendly price

    440 | 441 |

    442 | Lorem Ipsum available, but the majority have suffered alteration in some. 443 |

    444 |
    445 | 446 |
    • 447 | 448 |
  • 449 | 450 |
    451 | 452 |
    453 | 454 |
    455 |

    Reliable tour

    456 | 457 |

    458 | Lorem Ipsum available, but the majority have suffered alteration in some. 459 |

    460 |
    461 | 462 |
    • 463 | 464 |
465 | 466 | Booking Now 467 | 468 |
469 | 470 |
471 | 472 |
473 | 474 |
475 |
476 | 477 | 478 | 479 | 480 | 481 | 484 | 485 |
486 |
487 | 488 |

From The Blog Post

489 | 490 |

Latest News & Articles

491 | 492 | 660 | 661 |
662 |
663 | 664 |
665 |
666 | 667 | 668 | 669 | 670 | 671 | 674 | 675 | 828 | 829 | 830 | 831 | 832 | 833 | 836 | 837 | 838 | 839 | 840 | 841 | 842 | 843 | 844 | 845 | 848 | 849 | 850 | 853 | 854 | 855 | 856 | 857 | 858 | -------------------------------------------------------------------------------- /index.txt: -------------------------------------------------------------------------------- 1 | Tourest - Explore the World 2 | 3 | 4 | 5 | #.......... HEADER ..........# 6 | 7 | Tourest 8 | 9 | aria-label = Toggle Menu 10 | 11 | 12 | 13 | Home 14 | About Us 15 | Tours 16 | Destinations 17 | Blog 18 | Contact Us 19 | 20 | Booking Now 21 | 22 | 23 | 24 | #.......... HERO ..........# 25 | 26 | alt = Vector Shape 27 | 28 | Explore Your Travel 29 | 30 | Trusted Travel Agency 31 | 32 | I travel not to go anywhere, but to go. I travel for travel's sake the great affair is to move. 33 | 34 | Contact Us 35 | Learn More 36 | 37 | alt = hero banner 38 | 39 | 40 | 41 | #.......... DESTINATION ..........# 42 | 43 | Destinations 44 | 45 | Choose Your Place 46 | 47 | alt = Malé, Maldives 48 | Malé 49 | Maldives 50 | 51 | alt = Bangkok, Thailand 52 | Bangkok 53 | Thailand 54 | 55 | alt = Kuala Lumpur, Malaysia 56 | Kuala Lumpur 57 | Malaysia 58 | 59 | alt = Kathmandu, Nepal 60 | Kathmandu 61 | Nepal 62 | 63 | alt = Jakarta, Indonesia 64 | Jakarta 65 | Indonesia 66 | 67 | 68 | 69 | #.......... POPULAR ..........# 70 | 71 | Featured Tours 72 | 73 | Most Popular Tours 74 | 75 | alt = Kuala Lumpur, Malaysia 76 | 77 | 78 | 12 Days 79 | 80 | From $50.00 81 | 82 | 83 | 84 | (2) 85 | 86 | A good traveler has no fixed plans and is not intent on arriving. 87 | Kuala Lumpur, Malaysia 88 | 89 | 90 | 91 | #.......... ABOUT ..........# 92 | 93 | About Us 94 | 95 | Explore all tour of the world with us. 96 | 97 | Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. 98 | 99 | 100 | 101 | 102 | Tour guide 103 | 104 | Lorem Ipsum available, but the majority have suffered alteration in some. 105 | 106 | 107 | Friendly price 108 | 109 | 110 | Reliable tour 111 | 112 | Booking Now 113 | 114 | alt = About banner 115 | 116 | 117 | 118 | #.......... BLOG ..........# 119 | 120 | From The Blog Post 121 | 122 | Latest News & Articles 123 | 124 | alt = A good traveler has no fixed plans and is not intent on arriving. 125 | 126 | 127 | 04 Dec 128 | 129 | alt = Jony bristow 130 | 131 | Jony bristow 132 | Admin 133 | 134 | 10:30 AM 135 | 136 | A good traveler has no fixed plans and is not intent on arriving. 137 | 138 | Read More 139 | 140 | 141 | 142 | 143 | #.......... FOOTER ..........# 144 | 145 | Top destination 146 | 147 | Indonesia, Jakarta 148 | Maldives, Malé 149 | Australia, Canberra 150 | Thailand, Bangkok 151 | Morocco, Rabat 152 | 153 | Categories 154 | 155 | Travel 156 | Lifestyle 157 | Fashion 158 | Education 159 | Food & Drink 160 | 161 | Quick links 162 | 163 | About 164 | Contact 165 | Tours 166 | Booking 167 | Terms & Conditions 168 | 169 | Get a newsletter 170 | 171 | For the latest deals and tips, travel no further than your inbox 172 | 173 | placeholder = Email address 174 | 175 | Subscribe 176 | 177 | Tourest 178 | 179 | © 2022 codewithsadee. All Rights Reserved 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | #.......... GO TO TOP ..........# 190 | 191 | aria-label = Go To Top 192 | 193 | -------------------------------------------------------------------------------- /readme-images/desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/codewithsadee/tourest/be09efc84a9dc30d0031f66f1b8c7b4b8e1f8702/readme-images/desktop.png -------------------------------------------------------------------------------- /style-guide.md: -------------------------------------------------------------------------------- 1 | # Essential Stuff 2 | 3 | ## Html import links 4 | 5 | Google font 6 | 7 | ``` html 8 | 9 | 10 | 13 | ``` 14 | 15 | Ionicon 16 | 17 | ``` html 18 | 19 | 20 | ``` 21 | 22 | --- 23 | 24 | ## Colors 25 | 26 | ``` css 27 | --battleship-gray: hsl(0, 0%, 53%); 28 | --viridian-green: hsl(180, 98%, 31%); 29 | --silver-chalice: hsl(0, 0%, 69%); 30 | --mikado-yellow: hsl(47, 98%, 50%); 31 | --granite-gray: hsl(0, 0%, 40%); 32 | --independence: hsl(219, 20%, 32%); 33 | --spanish-gray: hsl(0, 0%, 61%); 34 | --oxford-blue: hsl(222, 46%, 17%); 35 | --black-coral: hsl(223, 8%, 44%); 36 | --eerie-black: hsl(210, 11%, 15%); 37 | --light-gray: hsl(0, 0%, 80%); 38 | --white-2: hsl(0, 0%, 98%); 39 | --white-1: hsl(0, 0%, 100%); 40 | --black: hsl(0, 0%, 0%); 41 | --jet: hsl(0, 0%, 20%); 42 | ``` 43 | 44 | ## Typography 45 | 46 | ``` css 47 | --ff-abril-fatface: 'Abril Fatface', cursive; 48 | --ff-comforter-brush: 'Comforter Brush', cursive; 49 | --ff-heebo: 'Heebo', sans-serif; 50 | 51 | --fs-1: 3.4rem; 52 | --fs-2: 3.2rem; 53 | --fs-3: 3rem; 54 | --fs-4: 2.4rem; 55 | --fs-5: 1.8rem; 56 | --fs-6: 1.7rem; 57 | --fs-7: 1.4rem; 58 | --fs-8: 1.2rem; 59 | 60 | --fw-400: 400; 61 | --fw-500: 500; 62 | --fw-600: 600; 63 | --fw-700: 700; 64 | ``` 65 | 66 | ## Border Radius 67 | 68 | ``` css 69 | --radius-6: 6px; 70 | ``` 71 | 72 | ## Spacing 73 | 74 | ``` css 75 | --section-padding: 40px; 76 | ``` 77 | 78 | ## Transition 79 | 80 | ``` css 81 | --transition-1: 0.15s ease; 82 | --transition-2: 0.35s ease; 83 | --cubic-out: cubic-bezier(0.33, 0.85, 0.56, 1.02); 84 | ``` 85 | --------------------------------------------------------------------------------