519 lines
25 KiB
HTML
519 lines
25 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/hotel-and-resort/hotel-and-resort.css" />
|
|||
|
|
</head>
|
|||
|
|
<body class="overflow-x-hidden" data-mobile-nav-style="classic">
|
|||
|
|
|
|||
|
|
<header>
|
|||
|
|
<nav class="navbar navbar-expand-lg header-light bg-white center-logo header-reverse">
|
|||
|
|
<div class="container-fluid">
|
|||
|
|
<div class="col-auto col-xl-2 col-lg-1 menu-logo">
|
|||
|
|
<div class="d-none d-xl-block">
|
|||
|
|
<div class="widget-text fw-600"><i class="bi bi-telephone-outbound text-base-color me-10px"></i><a href="tel:1800222000">1 800 222 000</a></div>
|
|||
|
|
</div>
|
|||
|
|
<a class="navbar-brand" href="demo-hotel-and-resort.html">
|
|||
|
|
<img src="images/demo-hotel-and-resort-logo.png" data-at2x="images/demo-hotel-and-resort-logo@2x.png" alt class="default-logo">
|
|||
|
|
<img src="images/demo-hotel-and-resort-logo.png" data-at2x="images/demo-hotel-and-resort-logo@2x.png" alt class="alt-logo">
|
|||
|
|
<img src="images/demo-hotel-and-resort-logo.png" data-at2x="images/demo-hotel-and-resort-logo@2x.png" alt class="mobile-logo">
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-auto col-xl-8 col-lg-10 menu-order">
|
|||
|
|
<button class="navbar-toggler float-end" 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-between" id="navbarNav">
|
|||
|
|
<ul class="navbar-nav navbar-left justify-content-end">
|
|||
|
|
<li class="nav-item"><a href="demo-hotel-and-resort.html" class="nav-link">Home</a></li>
|
|||
|
|
<li class="nav-item"><a href="demo-hotel-and-resort-about-us.html" class="nav-link">About us</a></li>
|
|||
|
|
<li class="nav-item dropdown dropdown-with-icon"><a href="demo-hotel-and-resort-rooms.html" class="nav-link">Rooms</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-hotel-and-resort-room-details.html">
|
|||
|
|
<div class="submenu-icon-content">
|
|||
|
|
<span>Superior room</span>
|
|||
|
|
<p>Just starting from $199</p>
|
|||
|
|
</div>
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="demo-hotel-and-resort-room-details.html">
|
|||
|
|
<div class="submenu-icon-content">
|
|||
|
|
<span>Deluxe room</span>
|
|||
|
|
<p>Just starting from $249</p>
|
|||
|
|
</div>
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="demo-hotel-and-resort-room-details.html">
|
|||
|
|
<div class="submenu-icon-content">
|
|||
|
|
<span>Signature room</span>
|
|||
|
|
<p>Just starting from $300</p>
|
|||
|
|
</div>
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
<li>
|
|||
|
|
<a href="demo-hotel-and-resort-room-details.html">
|
|||
|
|
<div class="submenu-icon-content">
|
|||
|
|
<span>Luxury suite room</span>
|
|||
|
|
<p>Just starting from $350</p>
|
|||
|
|
</div>
|
|||
|
|
</a>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
</li>
|
|||
|
|
</ul>
|
|||
|
|
<ul class="navbar-nav navbar-right justify-content-start">
|
|||
|
|
<li class="nav-item"><a href="demo-hotel-and-resort-amenities.html" class="nav-link">Amenities</a></li>
|
|||
|
|
<li class="nav-item"><a href="demo-hotel-and-resort-bistro.html" class="nav-link">Bistro</a></li>
|
|||
|
|
<li class="nav-item"><a href="demo-hotel-and-resort-contact.html" class="nav-link">Contact</a></li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-auto col-xl-2 col-lg-1 text-end">
|
|||
|
|
<div class="d-none d-xl-flex align-items-center widget-text fw-600"><i class="bi bi-calendar-check text-base-color me-10px"></i><a href="demo-hotel-and-resort-contact.html">Book your stay</a></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</nav>
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<section class="page-title-separate-breadcrumbs cover-background border-top border-4 border-color-base-color top-space-margin magic-cursor round-cursor" style="background-image: url('images/demo-hotel-and-resort-room-details-title-bg.jpg')">
|
|||
|
|
<div class="opacity-full bg-gradient-dark-transparent"></div>
|
|||
|
|
<div class="container position-relative">
|
|||
|
|
<div class="row align-items-start align-items-lg-end justify-content-end flex-column flex-lg-row extra-small-screen" data-anime="{ "el": "childs", "translateY": [15, 0], "opacity": [0,1], "duration": 400, "delay": 0, "staggervalue": 200, "easing": "easeOutQuad" }">
|
|||
|
|
<div class="col-xxl-7 col-lg-6 col-md-10 position-relative page-title-large md-mb-10px xs-mb-5px">
|
|||
|
|
<h1 class="text-white alt-font fw-500 ls-minus-2px mb-0">Superior room</h1>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xxl-5 col-lg-6 col-md-10 last-paragraph-no-margin">
|
|||
|
|
<p class="fs-20 text-white opacity-7 md-w-80 sm-w-100">We are happy to offer our guests a truly fabulous experience of a relaxing and memorable.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<section class="bg-very-light-gray pt-40px pb-40px">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="row row-cols-1 row-cols-md-5 row-cols-sm-3 justify-content-center" data-anime="{ "el": "childs", "translateX": [50, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|||
|
|
|
|||
|
|
<div class="col border-end sm-border-end-0 border-color-transparent-base-color icon-with-text-style-03 sm-mb-40px">
|
|||
|
|
<div class="feature-box">
|
|||
|
|
<div class="feature-box-icon">
|
|||
|
|
<i class="line-icon-King-2 icon-large text-base-color mb-10px"></i>
|
|||
|
|
</div>
|
|||
|
|
<div class="feature-box-content last-paragraph-no-margin">
|
|||
|
|
<span class="text-dark-gray fw-500 md-lh-24 d-block">Executive chef</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="col border-end sm-border-end-0 border-color-transparent-base-color icon-with-text-style-03 sm-mb-40px">
|
|||
|
|
<div class="feature-box">
|
|||
|
|
<div class="feature-box-icon">
|
|||
|
|
<i class="line-icon-Car-Wheel icon-large text-base-color mb-10px"></i>
|
|||
|
|
</div>
|
|||
|
|
<div class="feature-box-content last-paragraph-no-margin">
|
|||
|
|
<span class="text-dark-gray fw-500 md-lh-24 d-block">Leading security</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="col border-end sm-border-end-0 border-color-transparent-base-color icon-with-text-style-03 sm-mb-40px">
|
|||
|
|
<div class="feature-box">
|
|||
|
|
<div class="feature-box-icon">
|
|||
|
|
<i class="line-icon-Juice icon-large text-base-color mb-10px"></i>
|
|||
|
|
</div>
|
|||
|
|
<div class="feature-box-content last-paragraph-no-margin">
|
|||
|
|
<span class="text-dark-gray fw-500 md-lh-24 d-block">Welcome drink</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="col border-end sm-border-end-0 border-color-transparent-base-color icon-with-text-style-03 xs-mb-40px">
|
|||
|
|
<div class="feature-box">
|
|||
|
|
<div class="feature-box-icon">
|
|||
|
|
<i class="line-icon-Swimming icon-large text-base-color mb-10px"></i>
|
|||
|
|
</div>
|
|||
|
|
<div class="feature-box-content last-paragraph-no-margin">
|
|||
|
|
<span class="text-dark-gray fw-500 md-lh-24 d-block">Swimming pool</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="col icon-with-text-style-03">
|
|||
|
|
<div class="feature-box">
|
|||
|
|
<div class="feature-box-icon">
|
|||
|
|
<i class="line-icon-Car-3 icon-large text-base-color mb-10px"></i>
|
|||
|
|
</div>
|
|||
|
|
<div class="feature-box-content last-paragraph-no-margin">
|
|||
|
|
<span class="text-dark-gray fw-500 md-lh-24 d-block">Transport facility</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<section class="background-position-center background-repeat position-relative pb-0 overflow-hidden" style="background-image: url('images/vertical-center-line-bg.svg')">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="row align-items-center mb-50px" data-anime="{ "el": "childs", "translateX": [-50, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|||
|
|
<div class="col-lg-5 last-paragraph-no-margin md-mb-20px">
|
|||
|
|
<h3 class="text-dark-gray alt-font ls-minus-1px mb-0">Superior room</h3>
|
|||
|
|
<p class="ls-05px">Enjoy your most glorious moments</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-lg-3 col-sm-6 xs-mb-30px">
|
|||
|
|
<div class="d-flex align-items-center">
|
|||
|
|
<div class="col-auto text-center"><h2 class="text-dark-gray mb-0 fw-700">4.8</h2></div>
|
|||
|
|
<div class="col ps-20px">
|
|||
|
|
<div class="review-star-icon lh-20 fs-18">
|
|||
|
|
<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>
|
|||
|
|
<span class="d-block text-dark-gray fw-500">Review by Google</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col text-start text-sm-end">
|
|||
|
|
<h3 class="text-dark-gray fw-700 d-inline-block align-middle mb-5px mt-5px"><span class="fs-20 fw-500 align-middle">Per night</span> $199</h3>
|
|||
|
|
<a href="demo-hotel-and-resort-contact.html" class="btn btn-large btn-switch-text btn-base-color btn-box-shadow btn-round-edge ms-25px xs-ms-15px">
|
|||
|
|
<span>
|
|||
|
|
<span class="btn-double-text" data-text="Book your stay">Book your stay</span>
|
|||
|
|
</span>
|
|||
|
|
</a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="h-2px bg-dark-gray mb-50px" data-anime="{ "translateX": [0, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }"></div>
|
|||
|
|
<div class="row row-cols-1 row-cols-lg-2 align-items-center mb-8 xs-mb-14">
|
|||
|
|
<div class="col last-paragraph-no-margin" data-anime="{ "translateX": [50, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|||
|
|
<span class="text-dark-gray fs-26 alt-font d-block mb-10px">Room overview</span>
|
|||
|
|
<p class="w-90 md-w-100 md-mb-30px">The superior rooms pay tribute to fashion and craftsmanship. The rooms are approximately with views of rue alger and jardin des uileries. The selection and pairing of materials has been carefully chosen to give you a cool experience.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="col">
|
|||
|
|
<span class="text-dark-gray fs-26 alt-font d-block mb-15px">Amenities and comforts</span>
|
|||
|
|
<div class="row row-cols-1 row-cols-md-2">
|
|||
|
|
<div class="col">
|
|||
|
|
<div class="row row-cols-1 justify-content-center" data-anime="{"el": "childs", "translateX": [50, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|||
|
|
|
|||
|
|
<div class="col icon-with-text-style-08 mb-10px">
|
|||
|
|
<div class="feature-box feature-box-left-icon-middle overflow-hidden">
|
|||
|
|
<div class="feature-box-icon feature-box-icon-rounded bg-very-light-gray w-35px h-35px rounded-circle me-15px">
|
|||
|
|
<i class="fa-solid fa-check fs-15 text-base-color"></i>
|
|||
|
|
</div>
|
|||
|
|
<div class="feature-box-content last-paragraph-no-margin">
|
|||
|
|
<p>40 inch sony TV</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="col icon-with-text-style-08 mb-10px">
|
|||
|
|
<div class="feature-box feature-box-left-icon-middle overflow-hidden">
|
|||
|
|
<div class="feature-box-icon feature-box-icon-rounded bg-very-light-gray w-35px h-35px rounded-circle me-15px">
|
|||
|
|
<i class="fa-solid fa-check fs-15 text-base-color"></i>
|
|||
|
|
</div>
|
|||
|
|
<div class="feature-box-content last-paragraph-no-margin">
|
|||
|
|
<p>Wireless internet</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="col icon-with-text-style-08 sm-mb-10px">
|
|||
|
|
<div class="feature-box feature-box-left-icon-middle overflow-hidden">
|
|||
|
|
<div class="feature-box-icon feature-box-icon-rounded bg-very-light-gray w-35px h-35px rounded-circle me-15px">
|
|||
|
|
<i class="fa-solid fa-check fs-15 text-base-color"></i>
|
|||
|
|
</div>
|
|||
|
|
<div class="feature-box-content last-paragraph-no-margin">
|
|||
|
|
<p>Bluetooth player</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="col">
|
|||
|
|
<div class="row row-cols-1 justify-content-center" data-anime="{"el": "childs", "translateX": [50, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|||
|
|
|
|||
|
|
<div class="col icon-with-text-style-08 mb-10px">
|
|||
|
|
<div class="feature-box feature-box-left-icon-middle overflow-hidden">
|
|||
|
|
<div class="feature-box-icon feature-box-icon-rounded bg-very-light-gray w-35px h-35px rounded-circle me-15px">
|
|||
|
|
<i class="fa-solid fa-check fs-15 text-base-color"></i>
|
|||
|
|
</div>
|
|||
|
|
<div class="feature-box-content last-paragraph-no-margin">
|
|||
|
|
<p>Use of smartphone</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="col icon-with-text-style-08 mb-10px">
|
|||
|
|
<div class="feature-box feature-box-left-icon-middle overflow-hidden">
|
|||
|
|
<div class="feature-box-icon feature-box-icon-rounded bg-very-light-gray w-35px h-35px rounded-circle me-15px">
|
|||
|
|
<i class="fa-solid fa-check fs-15 text-base-color"></i>
|
|||
|
|
</div>
|
|||
|
|
<div class="feature-box-content last-paragraph-no-margin">
|
|||
|
|
<p>Luggage storage</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="col icon-with-text-style-08">
|
|||
|
|
<div class="feature-box feature-box-left-icon-middle overflow-hidden">
|
|||
|
|
<div class="feature-box-icon feature-box-icon-rounded bg-very-light-gray w-35px h-35px rounded-circle me-15px">
|
|||
|
|
<i class="fa-solid fa-check fs-15 text-base-color"></i>
|
|||
|
|
</div>
|
|||
|
|
<div class="feature-box-content last-paragraph-no-margin">
|
|||
|
|
<p>Beautiful nature</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row align-items-center">
|
|||
|
|
<div class="col-12" data-anime="{ "translateX": [150, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }">
|
|||
|
|
<div class="outside-box-right-40 sm-outside-box-right-0">
|
|||
|
|
<div class="swiper magic-cursor" data-slider-options="{ "slidesPerView": 1, "spaceBetween": 30, "loop": true, "pagination": { "el": ".slider-three-slide-pagination", "clickable": true, "dynamicBullets": true }, "autoplay": { "delay": 3000, "disableOnInteraction": false }, "navigation": { "nextEl": ".slider-three-slide-next", "prevEl": ".slider-three-slide-prev" }, "keyboard": { "enabled": true, "onlyInViewport": true }, "breakpoints": { "992": { "slidesPerView": 3 }, "768": { "slidesPerView": 2 }, "320": { "slidesPerView": 1 } }, "effect": "slide" }">
|
|||
|
|
<div class="swiper-wrapper">
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<img src="images/demo-hotel-and-resort-rooms-09.jpg" class="w-100 border-radius-6px" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<img src="images/demo-hotel-and-resort-rooms-06.jpg" class="w-100 border-radius-6px" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<img src="images/demo-hotel-and-resort-rooms-03.jpg" class="w-100 border-radius-6px" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<img src="images/demo-hotel-and-resort-rooms-04.jpg" class="w-100 border-radius-6px" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<img src="images/demo-hotel-and-resort-rooms-06.jpg" class="w-100 border-radius-6px" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<img src="images/demo-hotel-and-resort-rooms-03.jpg" class="w-100 border-radius-6px" alt />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<section class="background-position-center background-repeat z-index-1 position-relative" style="background-image: url('images/vertical-center-line-bg.svg')">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="row overlap-section mb-50px">
|
|||
|
|
<div class="col-12 text-center">
|
|||
|
|
<img src="images/demo-hotel-and-resort-room-details-01.png" alt />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row justify-content-center mb-5 xs-mb-7">
|
|||
|
|
<div class="col-md-8 text-center" data-anime="{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|||
|
|
<h2 class="alt-font mb-5px text-dark-gray ls-minus-2px">Exclusive ratings</h2>
|
|||
|
|
<span class="d-inline-block">Enjoy in resorts and awesome facilities</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="row row-cols-1 row-cols-xl-2 row-cols-lg-2 row-cols-md-1 position-relative justify-content-center mb-5" data-anime="{ "el": "childs", "perspective": [800, 1200], "scale": [1.1, 1], "rotateX": [50, 0], "opacity": [0,1], "duration": 900, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }">
|
|||
|
|
|
|||
|
|
<div class="col review-style-05 md-mb-30px">
|
|||
|
|
<div class="border-radius-6px bg-white box-shadow-quadruple-large border border-color-extra-medium-gray last-paragraph-no-margin">
|
|||
|
|
<div class="d-flex align-items-center ps-45px pe-45px pt-30px pb-30px lg-p-25px">
|
|||
|
|
<img class="rounded-circle w-120px xs-w-80px me-25px" src="images/avtar-27.jpg" alt />
|
|||
|
|
<p>We are happy to offer our guests truly fabulous experience of relaxing, balanced, and memorable vacation.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="border-top border-color-extra-medium-gray pt-15px pb-15px ps-45px pe-45px lg-ps-25px lg-pe-25px text-center text-sm-start">
|
|||
|
|
<span class="alt-font fw-500 text-dark-gray d-inline-block xs-fs-17">Herman Miller, ThemeZaa</span>
|
|||
|
|
<div class="review-star-icon float-sm-end float-none fs-19">
|
|||
|
|
<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>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="col review-style-05">
|
|||
|
|
<div class="border-radius-6px bg-white box-shadow-quadruple-large border border-color-extra-medium-gray last-paragraph-no-margin">
|
|||
|
|
<div class="d-flex align-items-center ps-45px pe-45px pt-30px pb-30px lg-p-25px">
|
|||
|
|
<img class="rounded-circle w-120px xs-w-80px me-25px" src="images/avtar-29.jpg" alt />
|
|||
|
|
<p>What a great experience! I have visited one of the resorts with my friends and we had a great time! Highly recommended.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="border-top border-color-extra-medium-gray pt-15px pb-15px ps-45px pe-45px lg-ps-25px lg-pe-25px text-center text-sm-start">
|
|||
|
|
<span class="alt-font fw-500 text-dark-gray d-inline-block xs-fs-17">Matthew Taylor, ThemeZaa</span>
|
|||
|
|
<div class="review-star-icon float-sm-end float-none fs-19">
|
|||
|
|
<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>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
<div class="row row-cols-1 row-cols-md-4 row-cols-sm-2 text-center justify-content-center clients-style-05 mb-5 sm-mb-7" data-anime="{ "el": "childs", "opacity": [0,1], "duration": 500, "delay": 0, "staggervalue": 200, "easing": "easeOutQuad" }">
|
|||
|
|
|
|||
|
|
<div class="col sm-mb-30px">
|
|||
|
|
<div class="client-box">
|
|||
|
|
<a href="demo-hotel-and-resort-room-details.html#"><img src="images/demo-hotel-and-resort-client-01.svg" class="h-55px" alt /></a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="col sm-mb-30px">
|
|||
|
|
<div class="client-box">
|
|||
|
|
<a href="demo-hotel-and-resort-room-details.html#"><img src="images/demo-hotel-and-resort-client-02.svg" class="h-55px" alt /></a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="col xs-mb-30px">
|
|||
|
|
<div class="client-box">
|
|||
|
|
<a href="demo-hotel-and-resort-room-details.html#"><img src="images/demo-hotel-and-resort-client-03.svg" class="h-55px" alt /></a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="col">
|
|||
|
|
<div class="client-box">
|
|||
|
|
<a href="demo-hotel-and-resort-room-details.html#"><img src="images/demo-hotel-and-resort-client-04.svg" class="h-55px" alt /></a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<footer class="bg-very-light-gray pb-50px sm-pt-20px xs-pb-30px background-repeat background-position-center sm-background-image-none" style="background-image: url('images/vertical-center-line-bg-dark.svg')">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="row overlap-section">
|
|||
|
|
<div class="col-12 text-center">
|
|||
|
|
<img class="rounded-circle" src="images/demo-hotel-and-resort-15.png" alt />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="row justify-content-center mb-4">
|
|||
|
|
<div class="col-xl-6 col-lg-8 col-md-10 text-center">
|
|||
|
|
<h3 class="text-dark-gray alt-font ls-minus-2px fw-400 mb-40px xs-mb-30px w-80 xs-w-100 mx-auto">Get the amazing offers into your inbox!</h3>
|
|||
|
|
<div class="d-inline-block w-100 newsletter-style-03 position-relative mb-20px">
|
|||
|
|
<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 text-uppercase fw-700" 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 text-center position-absolute d-none"></div>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
<p class="fs-16">We are committed to protecting your <a href="demo-hotel-and-resort-room-details.html#" class="text-decoration-line-bottom text-dark-gray">privacy policy.</a></p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="row row-cols-3 row-cols-lg-5 row-cols-sm-3 align-items-center justify-content-center mb-4 md-mb-50px xs-mb-40px instagram-follow-api position-relative">
|
|||
|
|
<div class="col instafeed-grid md-mb-30px xs-mb-15px">
|
|||
|
|
<figure class="border-radius-0px"><a href="https://www.instagram.com" target="_blank"><img src="images/demo-hotel-and-resort-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 md-mb-30px xs-mb-15px">
|
|||
|
|
<figure class="border-radius-0px"><a href="https://www.instagram.com" target="_blank"><img src="images/demo-hotel-and-resort-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 md-mb-30px xs-mb-15px">
|
|||
|
|
<figure class="border-radius-0px"><a href="https://www.instagram.com" target="_blank"><img src="images/demo-hotel-and-resort-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-hotel-and-resort-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-hotel-and-resort-instagram-05.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-large btn-switch-text btn-white btn-rounded left-icon btn-box-shadow instagram-button">
|
|||
|
|
<span>
|
|||
|
|
<span><i class="fa-brands fa-instagram text-base-color"></i></span>
|
|||
|
|
<span class="btn-double-text" data-text="Follow crafto">Follow crafto</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 order-3 order-md-1">
|
|||
|
|
<p>© Copyright 2024 <a href="index.html" target="_blank" class="text-decoration-line-bottom text-dark-gray fw-500">Crafto</a></p>
|
|||
|
|
</div>
|
|||
|
|
<div class="col-xl-6 text-center lg-mt-10px sm-mt-0 sm-mb-10px order-1 order-xl-2 order-md-3">
|
|||
|
|
<ul class="footer-navbar fs-17 fw-600">
|
|||
|
|
<li class="nav-item active"><a href="demo-hotel-and-resort.html" class="nav-link">Home</a></li>
|
|||
|
|
<li class="nav-item"><a href="demo-hotel-and-resort-about-us.html" class="nav-link">About us</a></li>
|
|||
|
|
<li class="nav-item"><a href="demo-hotel-and-resort-rooms.html" class="nav-link">Rooms</a></li>
|
|||
|
|
<li class="nav-item"><a href="demo-hotel-and-resort-amenities.html" class="nav-link">Amenities</a></li>
|
|||
|
|
<li class="nav-item"><a href="demo-hotel-and-resort-bistro.html" class="nav-link">Bistro</a></li>
|
|||
|
|
<li class="nav-item"><a href="demo-hotel-and-resort-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-01 order-2 order-xl-3 xs-mb-10px">
|
|||
|
|
<ul class="fs-16 dark fw-600">
|
|||
|
|
<li><a class="facebook" href="https://www.facebook.com/" target="_blank">Fb.</a> </li>
|
|||
|
|
<li><a class="dribbble" href="http://www.dribbble.com" target="_blank">Dr.</a></li>
|
|||
|
|
<li><a class="twitter" href="https://www.twitter.com" target="_blank">Tw.</a></li>
|
|||
|
|
<li><a class="behance" href="http://www.behance.com/" target="_blank">Be.</a> </li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</footer>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<div class="scroll-progress d-none d-xxl-block">
|
|||
|
|
<a href="demo-hotel-and-resort-room-details.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>
|