691 lines
39 KiB
HTML
691 lines
39 KiB
HTML
<!doctype html>
|
||
<html class="no-js" lang="en">
|
||
<head>
|
||
<title>Crafto - The Multipurpose HTML5 Template</title>
|
||
<meta charset="utf-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||
<meta name="author" content="ThemeZaa">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
|
||
<meta name="description" content="Elevate your online presence with Crafto - a modern, versatile, multipurpose Bootstrap 5 responsive HTML5, SCSS template using highly creative 52+ ready demos.">
|
||
|
||
<link rel="shortcut icon" href="images/favicon.png">
|
||
<link rel="apple-touch-icon" href="images/apple-touch-icon-57x57.png">
|
||
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
|
||
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
|
||
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
|
||
<link rel="stylesheet" href="css/vendors.min.css" />
|
||
<link rel="stylesheet" href="css/icon.min.css" />
|
||
<link rel="stylesheet" href="css/style.min.css" />
|
||
<link rel="stylesheet" href="css/responsive.min.css" />
|
||
<link rel="stylesheet" href="demos/travel-agency/travel-agency.css" />
|
||
</head>
|
||
<body data-mobile-nav-style="classic">
|
||
|
||
<header class="header-with-topbar">
|
||
<div class="header-top-bar top-bar-light bg-white md-border-bottom border-color-transparent-dark-very-light disable-fixed">
|
||
<div class="container-fluid">
|
||
<div class="row h-45px align-items-center m-0">
|
||
<div class="col-xl-6 col-lg-8 justify-content-center justify-content-lg-start">
|
||
<div class="fs-15 text-dark-gray">We have a selection of over 50 tour programs! <a href="demo-travel-agency-destinations.html" class="text-base-color fw-500 text-decoration-line-bottom">Popular Destinations</a></div>
|
||
</div>
|
||
<div class="col-xl-6 col-lg-4 text-end d-none d-lg-flex">
|
||
<a href="tel:02228899900" class="widget fs-15 text-dark-gray text-dark-gray-hover"><i class="feather icon-feather-phone-call text-base-color"></i> 0222 8899900</a>
|
||
<div class="widget fs-15 ms-30px text-dark-gray d-none d-xl-inline-block"><i class="feather icon-feather-map-pin text-base-color"></i> Broadway, 24th Floor, San Francisco</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<nav class="navbar navbar-expand-lg header-transparent bg-transparent border-bottom border-color-transparent-white-light disable-fixed">
|
||
<div class="container-fluid">
|
||
<div class="col-auto col-lg-2 me-auto">
|
||
<a class="navbar-brand" href="demo-travel-agency.html">
|
||
<img src="images/demo-travel-agency-logo-white.png" data-at2x="images/demo-travel-agency-logo-white@2x.png" alt class="default-logo">
|
||
<img src="images/demo-travel-agency-logo-white.png" data-at2x="images/demo-travel-agency-logo-white@2x.png" alt class="alt-logo">
|
||
<img src="images/demo-travel-agency-logo-black.png" data-at2x="images/demo-travel-agency-logo-black@2x.png" alt class="mobile-logo">
|
||
</a>
|
||
</div>
|
||
<div class="col-auto col-lg-8 menu-order position-static">
|
||
<button class="navbar-toggler float-start" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-label="Toggle navigation">
|
||
<span class="navbar-toggler-line"></span>
|
||
<span class="navbar-toggler-line"></span>
|
||
<span class="navbar-toggler-line"></span>
|
||
<span class="navbar-toggler-line"></span>
|
||
</button>
|
||
<div class="collapse navbar-collapse justify-content-center" id="navbarNav">
|
||
<ul class="navbar-nav alt-font text-uppercase">
|
||
<li class="nav-item"><a href="demo-travel-agency.html" class="nav-link">Home</a></li>
|
||
<li class="nav-item"><a href="demo-travel-agency-about.html" class="nav-link">About</a></li>
|
||
<li class="nav-item dropdown dropdown-with-icon">
|
||
<a href="demo-travel-agency-destinations.html" class="nav-link">Destinations</a>
|
||
<i class="fa-solid fa-angle-down dropdown-toggle" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false"></i>
|
||
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
|
||
<li>
|
||
<a href="demo-travel-agency-tour-details-page.html#">
|
||
<img src="images/demo-travel-agency-home-07.jpg" alt>
|
||
<div class="submenu-icon-content">
|
||
India
|
||
<p>42 Destinations</p>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="demo-travel-agency-tour-details-page.html#">
|
||
<img src="images/demo-travel-agency-home-08.jpg" alt>
|
||
<div class="submenu-icon-content">
|
||
Poland
|
||
<p>36 Destinations</p>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="demo-travel-agency-tour-details-page.html#">
|
||
<img src="images/demo-travel-agency-home-09.jpg" alt>
|
||
<div class="submenu-icon-content">
|
||
Mexico
|
||
<p>22 Destinations</p>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="demo-travel-agency-tour-details-page.html#">
|
||
<img src="images/demo-travel-agency-home-13.jpg" alt>
|
||
<div class="submenu-icon-content">
|
||
Maldives
|
||
<p>28 Destinations</p>
|
||
</div>
|
||
</a>
|
||
</li>
|
||
<li>
|
||
<a href="demo-travel-agency-tour-details-page.html#" class="btn btn-dark-gray btn-round-edge btn-box-shadow align-self-center text-center text-white">tour packages</a>
|
||
</li>
|
||
</ul>
|
||
</li>
|
||
<li class="nav-item"><a href="demo-travel-agency-tours.html" class="nav-link">Tours</a></li>
|
||
<li class="nav-item"><a href="demo-travel-agency-reviews.html" class="nav-link">Reviews</a></li>
|
||
<li class="nav-item"><a href="demo-travel-agency-blog.html" class="nav-link">Blog</a></li>
|
||
<li class="nav-item"><a href="demo-travel-agency-contact.html" class="nav-link">Contact</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="col-auto col-lg-2 text-end">
|
||
<div class="header-icon">
|
||
<div class="header-search-icon icon">
|
||
<a href="demo-travel-agency-tour-details-page.html#" class="search-form-icon header-search-form"><i class="feather icon-feather-search"></i></a>
|
||
<div class="search-form-wrapper">
|
||
<button title="Close" type="button" class="search-close alt-font">×</button>
|
||
<form id="search-form" role="search" method="get" class="search-form text-left" action="search-result.html">
|
||
<div class="search-form-box">
|
||
<h2 class="text-dark-gray text-center mb-5 ls-minus-2px fw-600">What are you looking for?</h2>
|
||
<input class="search-input" id="search-form-input5e219ef164995" placeholder="Enter your keywords..." name="s" value type="text" autocomplete="off">
|
||
<button type="submit" class="search-button">
|
||
<i class="feather icon-feather-search" aria-hidden="true"></i>
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
<div class="header-push-button icon">
|
||
<div class="push-button">
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
<span></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
<div class="push-menu push-menu-style-1 p-35px bg-white">
|
||
<span class="close-menu text-white bg-dark-gray"><i class="fa-solid fa-xmark"></i></span>
|
||
<div class="text-center push-menu-wrapper text-dark-gray" data-scroll-options="{ "theme": "dark" }">
|
||
<div class="w-100">
|
||
<img src="images/demo-travel-agency-logo-black.png" data-at2x="images/demo-travel-agency-logo-black@2x.png" class="mb-20" alt />
|
||
<div class="d-inline-block align-middle bg-very-light-gray fw-600 text-dark-gray text-uppercase border-radius-22px ps-25px pe-25px fs-13 mb-15px">Explore the world</div>
|
||
<h3 class="fw-600 mb-0 alt-font ls-minus-1px lh-38">World's leading travel agency</h3>
|
||
</div>
|
||
<div class="row align-items-center justify-content-center mt-20 mb-20 row-cols-3 row-cols-md-3 gutter-very-small row-cols-sm-3 instagram-follow-api position-relative">
|
||
<div class="col instafeed-grid mb-10px">
|
||
<figure class="border-radius-0px"><a href="https://www.instagram.com" target="_blank"><img src="images/demo-travel-agency-instagram-01.jpg" class="insta-image" alt><span class="insta-icon"><i class="fa-brands fa-instagram"></i></span></a></figure>
|
||
</div>
|
||
<div class="col instafeed-grid mb-10px">
|
||
<figure class="border-radius-0px"><a href="https://www.instagram.com" target="_blank"><img src="images/demo-travel-agency-instagram-02.jpg" class="insta-image" alt><span class="insta-icon"><i class="fa-brands fa-instagram"></i></span></a></figure>
|
||
</div>
|
||
<div class="col instafeed-grid mb-10px">
|
||
<figure class="border-radius-0px"><a href="https://www.instagram.com" target="_blank"><img src="images/demo-travel-agency-instagram-03.jpg" class="insta-image" alt><span class="insta-icon"><i class="fa-brands fa-instagram"></i></span></a></figure>
|
||
</div>
|
||
<div class="col instafeed-grid">
|
||
<figure class="border-radius-0px"><a href="https://www.instagram.com" target="_blank"><img src="images/demo-travel-agency-instagram-04.jpg" class="insta-image" alt><span class="insta-icon"><i class="fa-brands fa-instagram"></i></span></a></figure>
|
||
</div>
|
||
<div class="col instafeed-grid">
|
||
<figure class="border-radius-0px"><a href="https://www.instagram.com" target="_blank"><img src="images/demo-travel-agency-instagram-05.jpg" class="insta-image" alt><span class="insta-icon"><i class="fa-brands fa-instagram"></i></span></a></figure>
|
||
</div>
|
||
<div class="col instafeed-grid">
|
||
<figure class="border-radius-0px"><a href="https://www.instagram.com" target="_blank"><img src="images/demo-travel-agency-instagram-06.jpg" class="insta-image" alt><span class="insta-icon"><i class="fa-brands fa-instagram"></i></span></a></figure>
|
||
</div>
|
||
</div>
|
||
<div class="col-12 text-center newsletter-style-02 position-relative mb-20">
|
||
<span class="fs-18 w-80 mx-auto text-extra-dark-gray lh-26 d-inline-block mb-25px">Get latest update for our trusted applications</span>
|
||
<form action="email-templates/subscribe-newsletter.php" method="post" class="position-relative w-100">
|
||
<input class="border-radius-5px bg-white w-100 form-control required" type="email" name="email" placeholder="Enter your email">
|
||
<input type="hidden" name="redirect" value>
|
||
<button class="btn submit" aria-label="submit"><i class="icon feather icon-feather-mail icon-small"></i></button>
|
||
<div class="form-results border-radius-4px pt-10px pb-10px ps-15px pe-15px fs-14 w-100 text-center position-absolute lh-24 d-none"></div>
|
||
</form>
|
||
</div>
|
||
<div class="col-12 text-center elements-social social-icon-style-01">
|
||
<ul class="small-icon dark mb-0">
|
||
<li><a class="facebook" href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-f"></i></a></li>
|
||
<li><a class="dribbble" href="http://www.dribbble.com" target="_blank"><i class="fa-brands fa-dribbble"></i></a></li>
|
||
<li><a class="twitter" href="https://www.twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i></a></li>
|
||
<li><a class="instagram" href="https://www.instagram.com" target="_blank"><i class="fa-brands fa-instagram"></i></a></li>
|
||
<li><a class="linkedin" href="http://www.linkedin.com" target="_blank"><i class="fa-brands fa-linkedin-in"></i></a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
|
||
<section class="page-title-button-style cover-background position-relative ipad-top-space-margin top-space-padding md-pt-20px" style="background-image: url('images/demo-travel-agency-tour-details-title-bg.jpg')">
|
||
<div class="opacity-light bg-bay-of-many-blue"></div>
|
||
<div class="container">
|
||
<div class="row align-items-center justify-content-center extra-small-screen">
|
||
<div class="col-lg-6 col-md-8 position-relative text-center page-title-extra-large" data-anime="{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
||
<h2 class="text-uppercase mb-10px alt-font text-white fw-500 bg-dark-gray border-radius-4px">Amazing tour</h2>
|
||
<h1 class="mb-0 text-white alt-font ls-minus-2px text-uppercase fw-600 text-shadow-double-large">Maldives islands</h1>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<section class="position-relative">
|
||
<div class="h-110px position-absolute w-100 h-100 left-0px right-0px top-minus-70px" style="background-image:url('images/demo-travel-agency-about-bg-02.png')"></div>
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-lg-8 md-mb-50px sm-mb-35px">
|
||
<div class="row align-items-center mb-25px">
|
||
<div class="col-sm-9">
|
||
<h3 class="alt-font text-dark-gray fw-600 mb-10px ls-minus-1px">Discover depth of beach</h3>
|
||
<ul class="p-0 m-0 list-style-02 d-block d-sm-flex">
|
||
<li class="text-dark-gray fw-500"><i class="bi bi-geo-alt icon-small me-5px"></i>Maldives, South Asia</li>
|
||
<li class="ms-20px xs-ms-0">
|
||
<div class="review-star-icon fs-18 me-5px">
|
||
<i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i><i class="bi bi-star-fill"></i>
|
||
</div>
|
||
<a href="demo-travel-agency-tour-details-page.html#reviews" class="text-dark-gray text-dark-gray-hover fw-500 d-inline-block section-link">16 Reviews</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="col-sm-3 text-sm-end xs-mt-10px">
|
||
<h4 class="text-dark-gray fw-600 mb-0">$1599</h4>
|
||
<span class="d-block lh-22">Per person</span>
|
||
</div>
|
||
</div>
|
||
<div class="row mb-50px xs-mb-40px">
|
||
<div class="col-12">
|
||
<ul class="p-0 list-style-02 d-flex flex-wrap border-top border-bottom border-color-extra-medium-gray pt-20px pb-20px mb-25px">
|
||
<li class="me-30px"><i class="bi bi-calendar-check text-base-color icon-extra-medium me-10px"></i> <span class="text-dark-gray fw-500">15 Days</span></li>
|
||
<li class="me-30px"><i class="bi bi-person-plus text-base-color icon-extra-medium me-10px"></i> <span class="text-dark-gray fw-500">12+ Age</span></li>
|
||
<li class="me-30px"><i class="bi bi-water text-base-color icon-extra-medium me-10px"></i> <span class="text-dark-gray fw-500">Beaches</span></li>
|
||
<li class="me-30px"><i class="bi bi-clouds text-base-color icon-extra-medium me-10px"></i> <span class="text-dark-gray fw-500">Air rides</span></li>
|
||
<li><i class="bi bi-sun text-base-color icon-extra-medium me-10px"></i><span class="text-dark-gray fw-500">City sightseeing</span></li>
|
||
</ul>
|
||
<p>Lorem ipsum is simply dummy text of the printing and typesetting industry. lorem ipsum has been the industry's standard dummy text ever since the, when an unknown rinter took galley of type and scrambled it to make a type specimen book. it has survived not only five centuries, but also the leap into electronic typesetting, emaining essentially unchanged.</p>
|
||
<img src="images/demo-travel-agency-tour-details-page-01.jpg" alt />
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<h5 class="alt-font text-dark-gray fw-600">Included / exclude</h5>
|
||
</div>
|
||
</div>
|
||
<div class="row row-cols-1 row-cols-md-2 mb-50px xs-mb-40px">
|
||
<div class="col">
|
||
<ul class="p-0 m-0 list-style-02 text-dark-gray sm-mb-20px">
|
||
<li class="border-bottom border-color-extra-medium-gray pb-10px mb-10px"><i class="bi bi-check-circle-fill fs-22 text-green me-10px"></i>Airport transfers</li>
|
||
<li class="border-bottom border-color-extra-medium-gray pb-10px mb-10px"><i class="bi bi-check-circle-fill fs-22 text-green me-10px"></i>Buffet breakfast</li>
|
||
<li class="border-bottom border-color-extra-medium-gray pb-10px mb-10px"><i class="bi bi-check-circle-fill fs-22 text-green me-10px"></i>Cruise dinner & music event</li>
|
||
<li class="border-bottom border-color-extra-medium-gray pb-10px mb-10px"><i class="bi bi-check-circle-fill fs-22 text-green me-10px"></i>Driver allowances</li>
|
||
<li><i class="bi bi-check-circle-fill fs-22 text-green me-10px"></i>Toll tax and state tax</li>
|
||
</ul>
|
||
</div>
|
||
<div class="col">
|
||
<ul class="p-0 m-0 list-style-02 text-dark-gray">
|
||
<li class="border-bottom border-color-extra-medium-gray pb-10px mb-10px"><i class="bi bi-x-circle-fill fs-22 text-red me-10px"></i>Superior accommodation</li>
|
||
<li class="border-bottom border-color-extra-medium-gray pb-10px mb-10px"><i class="bi bi-x-circle-fill fs-22 text-red me-10px"></i>Travel insurance</li>
|
||
<li class="border-bottom border-color-extra-medium-gray pb-10px mb-10px"><i class="bi bi-x-circle-fill fs-22 text-red me-10px"></i>Departure taxes</li>
|
||
<li class="border-bottom border-color-extra-medium-gray pb-10px mb-10px"><i class="bi bi-x-circle-fill fs-22 text-red me-10px"></i>Additional services</li>
|
||
<li><i class="bi bi-x-circle-fill fs-22 text-red me-10px"></i>Personal guide</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<h5 class="alt-font text-dark-gray fw-600">Photo gallery</h5>
|
||
</div>
|
||
</div>
|
||
<div class="row mb-50px xs-mb-40px">
|
||
<div class="col">
|
||
<ul class="image-gallery-style-01 gallery-wrapper grid grid-3col xxl-grid-3col xl-grid-3col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-medium" data-anime="{ "el": "childs", "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 200, "easing": "easeOutQuad" }">
|
||
<li class="grid-sizer"></li>
|
||
|
||
<li class="grid-item transition-inner-all">
|
||
<div class="gallery-box">
|
||
<a href="images/demo-travel-agency-tour-details-01.jpg" data-group="lightbox-gallery" title="Lightbox gallery image title">
|
||
<div class="position-relative gallery-image bg-dark-gray overflow-hidden">
|
||
<img src="images/demo-travel-agency-tour-details-01.jpg" alt />
|
||
<div class="d-flex align-items-center justify-content-center position-absolute top-0px left-0px w-100 h-100 gallery-hover move-bottom-top">
|
||
<div class="d-flex align-items-center justify-content-center w-50px h-50px rounded-circle bg-white">
|
||
<i class="feather icon-feather-search text-dark-gray icon-small"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</li>
|
||
|
||
|
||
<li class="grid-item transition-inner-all">
|
||
<div class="gallery-box">
|
||
<a href="images/demo-travel-agency-tour-details-02.jpg" data-group="lightbox-gallery" title="Lightbox gallery image title">
|
||
<div class="position-relative gallery-image bg-dark-gray overflow-hidden">
|
||
<img src="images/demo-travel-agency-tour-details-02.jpg" alt />
|
||
<div class="d-flex align-items-center justify-content-center position-absolute top-0px left-0px w-100 h-100 gallery-hover move-bottom-top">
|
||
<div class="d-flex align-items-center justify-content-center w-50px h-50px rounded-circle bg-white">
|
||
<i class="feather icon-feather-search text-dark-gray icon-small"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</li>
|
||
|
||
|
||
<li class="grid-item transition-inner-all">
|
||
<div class="gallery-box">
|
||
<a href="images/demo-travel-agency-tour-details-03.jpg" data-group="lightbox-gallery" title="Lightbox gallery image title">
|
||
<div class="position-relative gallery-image bg-dark-gray overflow-hidden">
|
||
<img src="images/demo-travel-agency-tour-details-03.jpg" alt />
|
||
<div class="d-flex align-items-center justify-content-center position-absolute top-0px left-0px w-100 h-100 gallery-hover move-bottom-top">
|
||
<div class="d-flex align-items-center justify-content-center w-50px h-50px rounded-circle bg-white">
|
||
<i class="feather icon-feather-search text-dark-gray icon-small"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</li>
|
||
|
||
|
||
<li class="grid-item transition-inner-all">
|
||
<div class="gallery-box">
|
||
<a href="images/demo-travel-agency-tour-details-04.jpg" data-group="lightbox-gallery" title="Lightbox gallery image title">
|
||
<div class="position-relative gallery-image bg-dark-gray overflow-hidden">
|
||
<img src="images/demo-travel-agency-tour-details-04.jpg" alt />
|
||
<div class="d-flex align-items-center justify-content-center position-absolute top-0px left-0px w-100 h-100 gallery-hover move-bottom-top">
|
||
<div class="d-flex align-items-center justify-content-center w-50px h-50px rounded-circle bg-white">
|
||
<i class="feather icon-feather-search text-dark-gray icon-small"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</li>
|
||
|
||
|
||
<li class="grid-item transition-inner-all">
|
||
<div class="gallery-box">
|
||
<a href="images/demo-travel-agency-tour-details-05.jpg" data-group="lightbox-gallery" title="Lightbox gallery image title">
|
||
<div class="position-relative gallery-image bg-dark-gray overflow-hidden">
|
||
<img src="images/demo-travel-agency-tour-details-05.jpg" alt />
|
||
<div class="d-flex align-items-center justify-content-center position-absolute top-0px left-0px w-100 h-100 gallery-hover move-bottom-top">
|
||
<div class="d-flex align-items-center justify-content-center w-50px h-50px rounded-circle bg-white">
|
||
<i class="feather icon-feather-search text-dark-gray icon-small"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</li>
|
||
|
||
|
||
<li class="grid-item transition-inner-all">
|
||
<div class="gallery-box">
|
||
<a href="images/demo-travel-agency-tour-details-06.jpg" data-group="lightbox-gallery" title="Lightbox gallery image title">
|
||
<div class="position-relative gallery-image bg-dark-gray overflow-hidden">
|
||
<img src="images/demo-travel-agency-tour-details-06.jpg" alt />
|
||
<div class="d-flex align-items-center justify-content-center position-absolute top-0px left-0px w-100 h-100 gallery-hover move-bottom-top">
|
||
<div class="d-flex align-items-center justify-content-center w-50px h-50px rounded-circle bg-white">
|
||
<i class="feather icon-feather-search text-dark-gray icon-small"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="row justify-content-center">
|
||
<div class="col-12">
|
||
<h5 class="alt-font text-dark-gray fw-600 sm-mb-15px">Itinerary</h5>
|
||
</div>
|
||
<div class="col-12">
|
||
<div class="accordion accordion-style-02" id="accordion-style-02" data-active-icon="icon-feather-chevron-down" data-inactive-icon="icon-feather-chevron-right">
|
||
|
||
<div class="accordion-item active-accordion">
|
||
<div class="accordion-header border-bottom border-color-extra-medium-gray">
|
||
<a href data-bs-toggle="collapse" data-bs-target="#accordion-style-02-01" aria-expanded="true" data-bs-parent="#accordion-style-02">
|
||
<div class="accordion-title d-flex align-items-center position-relative text-dark-gray mb-0">
|
||
<div class="col-auto bg-base-color lh-28 fw-600 text-white text-uppercase border-radius-30px ps-15px pe-15px fs-12 me-15px d-inline-block align-middle">Day 01</div>
|
||
<i class="feather icon-feather-chevron-down"></i><span class="fw-600 lh-normal">Welcome to maldives resort</span>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
<div id="accordion-style-02-01" class="accordion-collapse collapse show" data-bs-parent="#accordion-style-02">
|
||
<div class="accordion-body last-paragraph-no-margin border-bottom border-color-light-medium-gray">
|
||
<p>Lorem ipsum is simply dummy text of the printing typesetting industry. Industry's standard dummy text ever since the dummy. Lorem ipsum is simply dummy text of the printing.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="accordion-item">
|
||
<div class="accordion-header border-bottom border-color-extra-medium-gray">
|
||
<a href data-bs-toggle="collapse" data-bs-target="#accordion-style-02-02" aria-expanded="false" data-bs-parent="#accordion-style-02">
|
||
<div class="accordion-title d-flex align-items-center position-relative text-dark-gray mb-0">
|
||
<div class="col-auto bg-base-color lh-28 fw-600 text-white text-uppercase border-radius-30px ps-15px pe-15px fs-12 me-15px d-inline-block align-middle">Day 02</div>
|
||
<i class="feather icon-feather-chevron-right"></i><span class="fw-600 lh-normal">Exploring male island and water park</span>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
<div id="accordion-style-02-02" class="accordion-collapse collapse" data-bs-parent="#accordion-style-02">
|
||
<div class="accordion-body last-paragraph-no-margin border-bottom border-color-light-medium-gray">
|
||
<p>Lorem ipsum is simply dummy text of the printing typesetting industry. Industry's standard dummy text ever since the dummy. Lorem ipsum is simply dummy text of the printing.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="accordion-item">
|
||
<div class="accordion-header border-bottom border-color-extra-medium-gray">
|
||
<a href data-bs-toggle="collapse" data-bs-target="#accordion-style-02-03" aria-expanded="false" data-bs-parent="#accordion-style-02">
|
||
<div class="accordion-title d-flex align-items-center position-relative text-dark-gray mb-0">
|
||
<div class="col-auto bg-base-color lh-28 fw-600 text-white text-uppercase border-radius-30px ps-15px pe-15px fs-12 me-15px d-inline-block align-middle">Day 03</div>
|
||
<i class="feather icon-feather-chevron-right"></i><span class="fw-600 lh-normal">Visit baros island and rangali island</span>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
<div id="accordion-style-02-03" class="accordion-collapse collapse" data-bs-parent="#accordion-style-02">
|
||
<div class="accordion-body last-paragraph-no-margin border-bottom border-color-extra-medium-gray">
|
||
<p>Lorem ipsum is simply dummy text of the printing typesetting industry. Industry's standard dummy text ever since the dummy. Lorem ipsum is simply dummy text of the printing.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="accordion-item">
|
||
<div class="accordion-header border-bottom border-color-extra-medium-gray">
|
||
<a href data-bs-toggle="collapse" data-bs-target="#accordion-style-02-04" aria-expanded="false" data-bs-parent="#accordion-style-02">
|
||
<div class="accordion-title d-flex align-items-center position-relative text-dark-gray mb-0">
|
||
<div class="col-auto bg-base-color lh-28 fw-600 text-white text-uppercase border-radius-30px ps-15px pe-15px fs-12 me-15px d-inline-block align-middle">Day 04</div>
|
||
<i class="feather icon-feather-chevron-right"></i><span class="fw-600 lh-normal">Veligandu island and exploring five star resort</span>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
<div id="accordion-style-02-04" class="accordion-collapse collapse" data-bs-parent="#accordion-style-02">
|
||
<div class="accordion-body last-paragraph-no-margin border-bottom border-color-extra-medium-gray">
|
||
<p>Lorem ipsum is simply dummy text of the printing typesetting industry. Industry's standard dummy text ever since the dummy. Lorem ipsum is simply dummy text of the printing.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="accordion-item">
|
||
<div class="accordion-header border-bottom border-color-transparent">
|
||
<a href data-bs-toggle="collapse" data-bs-target="#accordion-style-02-05" aria-expanded="false" data-bs-parent="#accordion-style-02">
|
||
<div class="accordion-title d-flex align-items-center position-relative text-dark-gray mb-0">
|
||
<div class="col-auto bg-base-color lh-28 fw-600 text-white text-uppercase border-radius-30px ps-15px pe-15px fs-12 me-15px d-inline-block align-middle">Day 05</div>
|
||
<i class="feather icon-feather-chevron-right"></i><span class="fw-600 lh-normal">Huvahendhoo island tours and return</span>
|
||
</div>
|
||
</a>
|
||
</div>
|
||
<div id="accordion-style-02-05" class="accordion-collapse collapse" data-bs-parent="#accordion-style-02">
|
||
<div class="accordion-body last-paragraph-no-margin border-bottom border-color-transparent">
|
||
<p>Lorem ipsum is simply dummy text of the printing typesetting industry. Industry's standard dummy text ever since the dummy. Lorem ipsum is simply dummy text of the printing.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<aside class="col-xl-3 col-lg-4 offset-xl-1 lg-ps-50px md-ps-15px">
|
||
<div class="position-sticky top-70px">
|
||
<div class="bg-very-light-gray contact-form-style-03 position-relative overflow-hidden p-40px lg-p-30px mb-30px">
|
||
<h5 class="alt-font text-dark-gray fw-600 mb-10px text-center">Book this tour</h5>
|
||
<form action="email-templates/contact-form.php" method="post">
|
||
<div class="position-relative form-group mb-5px">
|
||
<span class="form-icon"><i class="bi bi-emoji-smile icon-small"></i></span>
|
||
<input class="ps-0 border-radius-0px border-color-transparent-dark-very-light bg-transparent form-control required" name="name" type="text" placeholder="Your name*" />
|
||
</div>
|
||
<div class="position-relative form-group mb-5px">
|
||
<span class="form-icon"><i class="bi bi-envelope icon-small"></i></span>
|
||
<input class="ps-0 border-radius-0px border-color-transparent-dark-very-light bg-transparent form-control required" type="email" name="email" placeholder="Your email*" />
|
||
</div>
|
||
<div class="position-relative form-group form-textarea mb-0">
|
||
<textarea class="ps-0 border-radius-0px border-bottom border-color-transparent-dark-very-light bg-transparent form-control" name="comment" placeholder="Your message" rows="2"></textarea>
|
||
<span class="form-icon"><i class="bi bi-chat-square-dots icon-small"></i></span>
|
||
<input type="hidden" name="redirect" value>
|
||
<button class="btn btn-medium btn-dark-gray btn-round-edge btn-box-shadow mt-25px w-100 submit" type="submit" aria-label="submit">Send message</button>
|
||
<div class="form-results mt-20px d-none"></div>
|
||
</div>
|
||
</form>
|
||
<img src="images/demo-travel-agency-tour-details-07.jpg" class="position-absolute top-0px right-0px" alt />
|
||
</div>
|
||
<a href="demo-travel-agency-tours.html"><img class="w-100" src="images/demo-travel-agency-tour-details-page-02.jpg" alt /></a>
|
||
</div>
|
||
</aside>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
|
||
<section id="reviews" class="position-relative bg-very-light-gray overlap-height cover-background" style="background-image: url('images/demo-travel-agency-home-bg-03.jpg');">
|
||
<div class="container">
|
||
<div class="row align-items-center justify-content-center mb-4" data-anime="{ "translateY": [0, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
||
<div class="col-lg-3 md-mb-20px text-center text-lg-start">
|
||
<span class="fw-500 text-base-color text-uppercase">Testimonials</span>
|
||
<h2 class="alt-font fw-600 text-dark-gray ls-minus-2px">Our happy traveller.</h2>
|
||
<div class="d-flex justify-content-center justify-content-lg-start">
|
||
|
||
<div class="slider-one-slide-prev-1 bg-white box-shadow-double-large swiper-button-prev slider-navigation-style-04"><i class="bi bi-arrow-left-short icon-very-medium"></i></div>
|
||
<div class="slider-one-slide-next-1 bg-white box-shadow-double-large swiper-button-next slider-navigation-style-04"><i class="bi bi-arrow-right-short icon-very-medium"></i></div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="col-xl-8 col-lg-9">
|
||
<div class="swiper position-relative magic-cursor" data-slider-options="{ "autoHeight": true, "loop": true, "allowTouchMove": true, "autoplay": { "delay": 30000000, "disableOnInteraction": false }, "navigation": { "nextEl": ".swiper-button-next", "prevEl": ".swiper-button-prev" }, "effect": "slide" }">
|
||
<div class="swiper-wrapper">
|
||
|
||
<div class="swiper-slide review-style-11">
|
||
<div class="row align-items-center">
|
||
<div class="col-md-5 text-center text-md-start sm-mb-15px">
|
||
<img src="images/demo-travel-agency-home-17.png" alt>
|
||
</div>
|
||
<div class="col-md-7 position-relative ps-16 sm-ps-15px text-center text-md-start">
|
||
<p class="fs-20 lh-28 text-dark-gray mb-20px">Our Africa travel specialist planned the most <span class="text-decoration-line-bottom fw-600">amazing trip</span> to kenya for us. We had an <span class="text-decoration-line-bottom fw-600">incredible time</span> and were able to capture so many awesome pictures.</p>
|
||
<div class="text-center bg-base-color text-white fs-15 border-radius-22px d-inline-block ps-20px pe-20px lh-36 ls-minus-1px">
|
||
<i class="bi bi-star-fill"></i>
|
||
<i class="bi bi-star-fill"></i>
|
||
<i class="bi bi-star-fill"></i>
|
||
<i class="bi bi-star-fill"></i>
|
||
<i class="bi bi-star-fill"></i>
|
||
</div>
|
||
<div class="position-absolute left-0px top-0px h-100 w-90px sm-w-100 border-end border-color-transparent-dark-very-light sm-position-relative sm-mt-10px sm-border-end-0">
|
||
<div class="vertical-title-center align-items-center justify-content-center sm-vertical-title-inherit">
|
||
<div class="title fs-20 alt-font text-base-color fw-600 text-uppercase">Alexander moore</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="swiper-slide review-style-11">
|
||
<div class="row align-items-center">
|
||
<div class="col-md-5 text-center text-md-start sm-mb-15px">
|
||
<img src="images/demo-travel-agency-home-15.png" alt>
|
||
</div>
|
||
<div class="col-md-7 position-relative ps-16 sm-ps-15px text-center text-md-start">
|
||
<p class="fs-20 lh-28 text-dark-gray mb-20px">Excellent travel company. We have already <span class="text-decoration-line-bottom fw-600">recommended</span> it to our family and friends. We are looking forward to our <span class="text-decoration-line-bottom fw-600">next trip.</span> Everything was very well organized.</p>
|
||
<div class="text-center bg-base-color text-white fs-15 border-radius-22px d-inline-block ps-20px pe-20px lh-36 ls-minus-1px">
|
||
<i class="bi bi-star-fill"></i>
|
||
<i class="bi bi-star-fill"></i>
|
||
<i class="bi bi-star-fill"></i>
|
||
<i class="bi bi-star-fill"></i>
|
||
<i class="bi bi-star-fill"></i>
|
||
</div>
|
||
<div class="position-absolute left-0px top-0px h-100 w-90px sm-w-100 border-end border-color-transparent-dark-very-light sm-position-relative sm-mt-10px sm-border-end-0">
|
||
<div class="vertical-title-center align-items-center justify-content-center sm-vertical-title-inherit">
|
||
<div class="title fs-20 alt-font text-base-color fw-600 text-uppercase">Matthew taylor</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="swiper-slide review-style-11">
|
||
<div class="row align-items-center">
|
||
<div class="col-md-5 text-center text-md-start sm-mb-15px">
|
||
<img src="images/demo-travel-agency-home-18.png" alt>
|
||
</div>
|
||
<div class="col-md-7 position-relative ps-16 sm-ps-15px text-center text-md-start">
|
||
<p class="fs-20 lh-28 text-dark-gray mb-20px">This itinerary was a perfect <span class="text-decoration-line-bottom fw-500">combination</span> of city sights, history and culture together with the peace of the <span class="text-decoration-line-bottom fw-500">amazon rainforest</span> and the adventure.</p>
|
||
<div class="text-center bg-base-color text-white fs-15 border-radius-22px d-inline-block ps-20px pe-20px lh-36 ls-minus-1px">
|
||
<i class="bi bi-star-fill"></i>
|
||
<i class="bi bi-star-fill"></i>
|
||
<i class="bi bi-star-fill"></i>
|
||
<i class="bi bi-star-fill"></i>
|
||
<i class="bi bi-star-fill"></i>
|
||
</div>
|
||
<div class="position-absolute left-0px top-0px h-100 w-90px sm-w-100 border-end border-color-transparent-dark-very-light sm-position-relative sm-mt-10px sm-border-end-0">
|
||
<div class="vertical-title-center align-items-center justify-content-center sm-vertical-title-inherit">
|
||
<div class="title fs-20 alt-font text-base-color fw-600 text-uppercase">Herman miller</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<footer class="bg-light-gray pb-40px">
|
||
<div class="container">
|
||
<div class="row mb-2 md-mb-4 overlap-section" data-anime="{ "el": "childs", "translateY": [-15, 0], "scale": [0.5, 1], "opacity": [0,1], "duration": 800, "delay": 300, "staggervalue": 300, "easing": "easeOutQuad" }">
|
||
<div class="col-12 text-center">
|
||
<img class="rounded-circle" src="images/demo-travel-agency-home-16.png" alt />
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row justify-content-center mb-6 md-mb-8 xs-mb-40px">
|
||
<div class="col-xl-6 col-lg-8 col-md-10 text-center last-paragraph-no-margin">
|
||
<h2 class="text-dark-gray alt-font fw-600 mb-40px mx-auto w-90 ls-minus-2px">Get the amazing travel offers into your inbox!</h2>
|
||
<div class="d-inline-block w-100 newsletter-style-03 position-relative mb-30px">
|
||
<form action="email-templates/subscribe-newsletter.php" method="post" class="position-relative w-100">
|
||
<input class="input-large bg-white border-color-transparent w-100 border-radius-100px box-shadow-extra-large form-control required" type="email" name="email" placeholder="Enter your email address" />
|
||
<input type="hidden" name="redirect" value>
|
||
<button class="btn btn-large text-dark-gray ls-0px left-icon submit fw-600" aria-label="submit"><i class="icon feather icon-feather-mail icon-small text-base-color"></i><span>Subscribe</span></button>
|
||
<div class="form-results border-radius-100px pt-10px pb-10px ps-15px pe-15px fs-16 mt-10px w-100 z-index-1 text-center position-absolute d-none"></div>
|
||
</form>
|
||
</div>
|
||
<p class="fs-16 lh-normal">We are committed to protecting your <a href="demo-travel-agency-tour-details-page.html#" class="text-decoration-line-bottom text-dark-gray text-dark-gray-hover">privacy policy.</a></p>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row align-items-center justify-content-center mb-40px g-0 row-cols-3 row-cols-md-6 row-cols-sm-3 instagram-follow-api position-relative">
|
||
<div class="col instafeed-grid">
|
||
<figure class="border-radius-0px"><a href="https://www.instagram.com" target="_blank"><img src="images/demo-travel-agency-instagram-01.jpg" class="insta-image" alt><span class="insta-icon"><i class="fa-brands fa-instagram"></i></span></a></figure>
|
||
</div>
|
||
<div class="col instafeed-grid">
|
||
<figure class="border-radius-0px"><a href="https://www.instagram.com" target="_blank"><img src="images/demo-travel-agency-instagram-02.jpg" class="insta-image" alt><span class="insta-icon"><i class="fa-brands fa-instagram"></i></span></a></figure>
|
||
</div>
|
||
<div class="col instafeed-grid">
|
||
<figure class="border-radius-0px"><a href="https://www.instagram.com" target="_blank"><img src="images/demo-travel-agency-instagram-03.jpg" class="insta-image" alt><span class="insta-icon"><i class="fa-brands fa-instagram"></i></span></a></figure>
|
||
</div>
|
||
<div class="col instafeed-grid">
|
||
<figure class="border-radius-0px"><a href="https://www.instagram.com" target="_blank"><img src="images/demo-travel-agency-instagram-04.jpg" class="insta-image" alt><span class="insta-icon"><i class="fa-brands fa-instagram"></i></span></a></figure>
|
||
</div>
|
||
<div class="col instafeed-grid">
|
||
<figure class="border-radius-0px"><a href="https://www.instagram.com" target="_blank"><img src="images/demo-travel-agency-instagram-05.jpg" class="insta-image" alt><span class="insta-icon"><i class="fa-brands fa-instagram"></i></span></a></figure>
|
||
</div>
|
||
<div class="col instafeed-grid">
|
||
<figure class="border-radius-0px"><a href="https://www.instagram.com" target="_blank"><img src="images/demo-travel-agency-instagram-06.jpg" class="insta-image" alt><span class="insta-icon"><i class="fa-brands fa-instagram"></i></span></a></figure>
|
||
</div>
|
||
<div class="absolute-middle-center z-index-1 w-auto">
|
||
<a href="https://www.instagram.com" target="_blank" class="btn btn-medium btn-switch-text btn-white btn-round-edge fw-600 ls-0px left-icon btn-box-shadow instagram-button">
|
||
<span>
|
||
<span><i class="fa-brands fa-instagram text-base-color fs-20"></i></span>
|
||
<span class="btn-double-text" data-text="crafto instagram">crafto instagram</span>
|
||
</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row align-items-center">
|
||
<div class="col-xl-3 col-sm-6 text-center text-sm-start last-paragraph-no-margin fs-15 text-dark-gray order-3 order-md-1">
|
||
<p>© Copyright 2024 <a href="index.html" target="_blank" class="text-dark-gray text-dark-gray-hover text-decoration-line-bottom fw-600">Crafto</a></p>
|
||
</div>
|
||
<div class="col-xl-6 text-center lg-mt-10px sm-mt-0 sm-mb-15px order-1 order-xl-2 order-md-3">
|
||
<ul class="footer-navbar">
|
||
<li class="nav-item"><a href="demo-travel-agency-about.html" class="nav-link">About</a></li>
|
||
<li class="nav-item"><a href="demo-travel-agency-destinations.html" class="nav-link">Destinations</a></li>
|
||
<li class="nav-item"><a href="demo-travel-agency-tours.html" class="nav-link">Tours</a></li>
|
||
<li class="nav-item"><a href="demo-travel-agency-reviews.html" class="nav-link">Reviews</a></li>
|
||
<li class="nav-item"><a href="demo-travel-agency-blog.html" class="nav-link">Blog</a></li>
|
||
<li class="nav-item"><a href="demo-travel-agency-contact.html" class="nav-link">Contact</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="col-xl-3 col-sm-6 position-relative text-center text-sm-end elements-social social-text-style-08 order-2 order-xl-3 xs-mb-10px">
|
||
<ul class="small-icon dark">
|
||
<li><a class="facebook" href="https://www.facebook.com/" target="_blank"><i class="fa-brands fa-facebook-f"></i></a></li>
|
||
<li><a class="dribbble" href="http://www.dribbble.com" target="_blank"><i class="fa-brands fa-dribbble"></i></a></li>
|
||
<li><a class="twitter" href="https://www.twitter.com" target="_blank"><i class="fa-brands fa-twitter"></i></a></li>
|
||
<li><a class="instagram" href="https://www.instagram.com" target="_blank"><i class="fa-brands fa-instagram"></i></a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
|
||
<div class="scroll-progress d-none d-xxl-block">
|
||
<a href="demo-travel-agency-tour-details-page.html#" class="scroll-top" aria-label="scroll">
|
||
<span class="scroll-text">Scroll</span><span class="scroll-line"><span class="scroll-point"></span></span>
|
||
</a>
|
||
</div>
|
||
|
||
|
||
<script type="text/javascript" src="js/jquery.js"></script>
|
||
<script type="text/javascript" src="js/vendors.min.js"></script>
|
||
<script type="text/javascript" src="js/main.js"></script>
|
||
</body>
|
||
</html> |