<section class="c-tabs container mb-5">
<div class="row tab-container">
<div class="col-12 text-center mb-3 mb-lg-4">
<h2 class="text text-size-2 text-size-lg-3-5 text-color-primary text-w-bold m-0">Hoteles Cubacan</h2>
</div>
<div class="col-12 d-flex flex-wrap mb-5">
<button class="btn btn-solid position-relative btn-solid-grade-1 tab active p-3 text text-color-white col-6">
<i class="icon ml-2 fa fa-cup"></i>
<span class="text text-color-white text-size-lg-1-5 text-w-bold text-uppercase">
<img src="../../../img/icon_copa.png" alt="" class="img img-auto img-w-1-5 mr-1"> Mas populares</span>
</button>
<button class="btn btn-solid position-relative btn-solid-eight tab p-3 text text-color-white col-6">
<i class="icon ml-2 fa fa-cup"></i>
<span class="text text-color-white text-size-lg-1-5 text-w-bold text-uppercase">
<img src="../../../img/icon_diamante.png" alt="" class="img img-auto img-w-1-5 mr-1"> Mas populares</span>
</button>
</div>
<div class="col-12 px-0 tab-panes">
<div class="tab-pane flex flex-wrap active">
<div class="card thumb col-12 col-md-6 col-lg-4 col-xl-3 position-relative px-3 mb-5 align-self-end">
<div class="pb-3 wrapper overflow-hidden">
<div class="images w-100 mb-2 overflow-hidden">
<img src="../../../img/dummy.png" alt="Guardalavaca" class="img img-auto img-w img-h-250">
</div>
<div class="captions w-100 px-2">
<h3 class="text text-color-primary text-size-1-5 text-size-lg-1-3 text-w-bold mb-0">Brisas del Caribe</h3>
<div class="d-flex flex-wrap w-100 mb-2">
<button class="btn btn-reset">
<img src="../../../img/star_active.png" alt="" class="img img-auto img-w">
</button>
<button class="btn btn-reset">
<img src="../../../img/star_active.png" alt="" class="img img-auto img-w">
</button>
<button class="btn btn-reset">
<img src="../../../img/star_active.png" alt="" class="img img-auto img-w">
</button>
<button class="btn btn-reset">
<img src="../../../img/star_active.png" alt="" class="img img-auto img-w">
</button>
<button class="btn btn-reset p-1">
<img src="../../../img/star.png" alt="" class="img img-auto img-w">
</button>
</div>
<div class="w-100 mb-2 d-flex align-items-center">
<img src="../../../img/icon_hotel.png" alt="" class="img img-auto mr-1">
<p class="text text-uppercase mb-0">Hotel Brisas</p>
</div>
<div class="w-100 mb-3 d-flex align-itemsntent-center">
<img src="../../../img/icon_flag.png" alt="" class="img img-auto mr-1">
<p class="text text-uppercase mb-0">Varadero</p>
</div>
<div class="action">
<button class="btn btn-round btn-round-mix text text-color-white px-5 px-lg-2 py-2 w-100 text-size-lg-1-2">Seleccionar</button>
</div>
</div>
</div>
<div class="c-flag position position-absolute position-z-2">
<img src="../../../img/flag.png" alt="flag-background" class="img img-auto">
<p class="value text text-color-white m-0 text-center text-size-0-8 text-lh-100 position-absolute">Desde<span class="d-block text text-size-1-5 text-color-white text-family-primary text-w-bold">41,00€</span></p>
</div>
</div>
<div class="card thumb col-12 col-md-6 col-lg-4 col-xl-3 position-relative px-3 mb-5 align-self-end">
<div class="pb-3 wrapper overflow-hidden">
<div class="images w-100 mb-2 overflow-hidden">
<img src="../../../img/dummy.png" alt="Guardalavaca" class="img img-auto img-w img-h-250">
</div>
<div class="captions w-100 px-2">
<h3 class="text text-color-primary text-size-1-5 text-size-lg-1-3 text-w-bold mb-0">Brisas del Caribe</h3>
<div class="d-flex flex-wrap w-100 mb-2">
<button class="btn btn-reset">
<img src="../../../img/star_active.png" alt="" class="img img-auto img-w">
</button>
<button class="btn btn-reset">
<img src="../../../img/star_active.png" alt="" class="img img-auto img-w">
</button>
<button class="btn btn-reset">
<img src="../../../img/star_active.png" alt="" class="img img-auto img-w">
</button>
<button class="btn btn-reset">
<img src="../../../img/star_active.png" alt="" class="img img-auto img-w">
</button>
<button class="btn btn-reset p-1">
<img src="../../../img/star.png" alt="" class="img img-auto img-w">
</button>
</div>
<div class="w-100 mb-2 d-flex align-items-center">
<img src="../../../img/icon_hotel.png" alt="" class="img img-auto mr-1">
<p class="text text-uppercase mb-0">Hotel Brisas</p>
</div>
<div class="w-100 mb-3 d-flex align-itemsntent-center">
<img src="../../../img/icon_flag.png" alt="" class="img img-auto mr-1">
<p class="text text-uppercase mb-0">Varadero</p>
</div>
<div class="action">
<button class="btn btn-round btn-round-mix text text-color-white px-5 px-lg-2 py-2 w-100 text-size-lg-1-2">Seleccionar</button>
</div>
</div>
</div>
<div class="c-flag position position-absolute position-z-2">
<img src="../../../img/flag.png" alt="flag-background" class="img img-auto">
<p class="value text text-color-white m-0 text-center text-size-0-8 text-lh-100 position-absolute">Desde<span class="d-block text text-size-1-5 text-color-white text-family-primary text-w-bold">41,00€</span></p>
</div>
</div>
<div class="card thumb col-12 col-md-6 col-lg-4 col-xl-3 position-relative px-3 mb-5 align-self-end">
<div class="pb-3 wrapper overflow-hidden">
<div class="images w-100 mb-2 overflow-hidden">
<img src="../../../img/dummy.png" alt="Guardalavaca" class="img img-auto img-w img-h-250">
</div>
<div class="captions w-100 px-2">
<h3 class="text text-color-primary text-size-1-5 text-size-lg-1-3 text-w-bold mb-0">Brisas del Caribe</h3>
<div class="d-flex flex-wrap w-100 mb-2">
<button class="btn btn-reset">
<img src="../../../img/star_active.png" alt="" class="img img-auto img-w">
</button>
<button class="btn btn-reset">
<img src="../../../img/star_active.png" alt="" class="img img-auto img-w">
</button>
<button class="btn btn-reset">
<img src="../../../img/star_active.png" alt="" class="img img-auto img-w">
</button>
<button class="btn btn-reset">
<img src="../../../img/star_active.png" alt="" class="img img-auto img-w">
</button>
<button class="btn btn-reset p-1">
<img src="../../../img/star.png" alt="" class="img img-auto img-w">
</button>
</div>
<div class="w-100 mb-2 d-flex align-items-center">
<img src="../../../img/icon_hotel.png" alt="" class="img img-auto mr-1">
<p class="text text-uppercase mb-0">Hotel Brisas</p>
</div>
<div class="w-100 mb-3 d-flex align-itemsntent-center">
<img src="../../../img/icon_flag.png" alt="" class="img img-auto mr-1">
<p class="text text-uppercase mb-0">Varadero</p>
</div>
<div class="action">
<button class="btn btn-round btn-round-mix text text-color-white px-5 px-lg-2 py-2 w-100 text-size-lg-1-2">Seleccionar</button>
</div>
</div>
</div>
<div class="c-flag position position-absolute position-z-2">
<img src="../../../img/flag.png" alt="flag-background" class="img img-auto">
<p class="value text text-color-white m-0 text-center text-size-0-8 text-lh-100 position-absolute">Desde<span class="d-block text text-size-1-5 text-color-white text-family-primary text-w-bold">41,00€</span></p>
</div>
</div>
</div>
<div class="tab-pane flex flex-wrap">
<div class="card thumb col-12 col-md-6 col-lg-4 col-xl-3 position-relative px-3 mb-5 align-self-end">
<div class="pb-3 wrapper overflow-hidden">
<div class="images w-100 mb-2 overflow-hidden">
<img src="../../../img/dummy.png" alt="Guardalavaca" class="img img-auto img-w img-h-250">
</div>
<div class="captions w-100 px-2">
<h3 class="text text-color-primary text-size-1-5 text-size-lg-1-3 text-w-bold mb-0">Brisas del Caribe</h3>
<div class="d-flex flex-wrap w-100 mb-2">
<button class="btn btn-reset">
<img src="../../../img/star_active.png" alt="" class="img img-auto img-w">
</button>
<button class="btn btn-reset">
<img src="../../../img/star_active.png" alt="" class="img img-auto img-w">
</button>
<button class="btn btn-reset">
<img src="../../../img/star_active.png" alt="" class="img img-auto img-w">
</button>
<button class="btn btn-reset">
<img src="../../../img/star_active.png" alt="" class="img img-auto img-w">
</button>
<button class="btn btn-reset p-1">
<img src="../../../img/star.png" alt="" class="img img-auto img-w">
</button>
</div>
<div class="w-100 mb-2 d-flex align-items-center">
<img src="../../../img/icon_hotel.png" alt="" class="img img-auto mr-1">
<p class="text text-uppercase mb-0">Hotel Brisas</p>
</div>
<div class="w-100 mb-3 d-flex align-itemsntent-center">
<img src="../../../img/icon_flag.png" alt="" class="img img-auto mr-1">
<p class="text text-uppercase mb-0">Varadero</p>
</div>
<div class="action">
<button class="btn btn-round btn-round-mix text text-color-white px-5 px-lg-2 py-2 w-100 text-size-lg-1-2">Seleccionar</button>
</div>
</div>
</div>
<div class="c-flag position position-absolute position-z-2">
<img src="../../../img/flag.png" alt="flag-background" class="img img-auto">
<p class="value text text-color-white m-0 text-center text-size-0-8 text-lh-100 position-absolute">Desde<span class="d-block text text-size-1-5 text-color-white text-family-primary text-w-bold">41,00€</span></p>
</div>
</div>
<div class="card thumb col-12 col-md-6 col-lg-4 col-xl-3 position-relative px-3 mb-5 align-self-end">
<div class="pb-3 wrapper overflow-hidden">
<div class="images w-100 mb-2 overflow-hidden">
<img src="../../../img/dummy.png" alt="Guardalavaca" class="img img-auto img-w img-h-250">
</div>
<div class="captions w-100 px-2">
<h3 class="text text-color-primary text-size-1-5 text-size-lg-1-3 text-w-bold mb-0">Brisas del Caribe</h3>
<div class="d-flex flex-wrap w-100 mb-2">
<button class="btn btn-reset">
<img src="../../../img/star_active.png" alt="" class="img img-auto img-w">
</button>
<button class="btn btn-reset">
<img src="../../../img/star_active.png" alt="" class="img img-auto img-w">
</button>
<button class="btn btn-reset">
<img src="../../../img/star_active.png" alt="" class="img img-auto img-w">
</button>
<button class="btn btn-reset">
<img src="../../../img/star_active.png" alt="" class="img img-auto img-w">
</button>
<button class="btn btn-reset p-1">
<img src="../../../img/star.png" alt="" class="img img-auto img-w">
</button>
</div>
<div class="w-100 mb-2 d-flex align-items-center">
<img src="../../../img/icon_hotel.png" alt="" class="img img-auto mr-1">
<p class="text text-uppercase mb-0">Hotel Brisas</p>
</div>
<div class="w-100 mb-3 d-flex align-itemsntent-center">
<img src="../../../img/icon_flag.png" alt="" class="img img-auto mr-1">
<p class="text text-uppercase mb-0">Varadero</p>
</div>
<div class="action">
<button class="btn btn-round btn-round-mix text text-color-white px-5 px-lg-2 py-2 w-100 text-size-lg-1-2">Seleccionar</button>
</div>
</div>
</div>
<div class="c-flag position position-absolute position-z-2">
<img src="../../../img/flag.png" alt="flag-background" class="img img-auto">
<p class="value text text-color-white m-0 text-center text-size-0-8 text-lh-100 position-absolute">Desde<span class="d-block text text-size-1-5 text-color-white text-family-primary text-w-bold">41,00€</span></p>
</div>
</div>
<div class="card thumb col-12 col-md-6 col-lg-4 col-xl-3 position-relative px-3 mb-5 align-self-end">
<div class="pb-3 wrapper overflow-hidden">
<div class="images w-100 mb-2 overflow-hidden">
<img src="../../../img/dummy.png" alt="Guardalavaca" class="img img-auto img-w img-h-250">
</div>
<div class="captions w-100 px-2">
<h3 class="text text-color-primary text-size-1-5 text-size-lg-1-3 text-w-bold mb-0">Brisas del Caribe</h3>
<div class="d-flex flex-wrap w-100 mb-2">
<button class="btn btn-reset">
<img src="../../../img/star_active.png" alt="" class="img img-auto img-w">
</button>
<button class="btn btn-reset">
<img src="../../../img/star_active.png" alt="" class="img img-auto img-w">
</button>
<button class="btn btn-reset">
<img src="../../../img/star_active.png" alt="" class="img img-auto img-w">
</button>
<button class="btn btn-reset">
<img src="../../../img/star_active.png" alt="" class="img img-auto img-w">
</button>
<button class="btn btn-reset p-1">
<img src="../../../img/star.png" alt="" class="img img-auto img-w">
</button>
</div>
<div class="w-100 mb-2 d-flex align-items-center">
<img src="../../../img/icon_hotel.png" alt="" class="img img-auto mr-1">
<p class="text text-uppercase mb-0">Hotel Brisas</p>
</div>
<div class="w-100 mb-3 d-flex align-itemsntent-center">
<img src="../../../img/icon_flag.png" alt="" class="img img-auto mr-1">
<p class="text text-uppercase mb-0">Varadero</p>
</div>
<div class="action">
<button class="btn btn-round btn-round-mix text text-color-white px-5 px-lg-2 py-2 w-100 text-size-lg-1-2">Seleccionar</button>
</div>
</div>
</div>
<div class="c-flag position position-absolute position-z-2">
<img src="../../../img/flag.png" alt="flag-background" class="img img-auto">
<p class="value text text-color-white m-0 text-center text-size-0-8 text-lh-100 position-absolute">Desde<span class="d-block text text-size-1-5 text-color-white text-family-primary text-w-bold">41,00€</span></p>
</div>
</div>
<div class="card thumb col-12 col-md-6 col-lg-4 col-xl-3 position-relative px-3 mb-5 align-self-end">
<div class="pb-3 wrapper overflow-hidden">
<div class="images w-100 mb-2 overflow-hidden">
<img src="../../../img/dummy.png" alt="Guardalavaca" class="img img-auto img-w img-h-250">
</div>
<div class="captions w-100 px-2">
<h3 class="text text-color-primary text-size-1-5 text-size-lg-1-3 text-w-bold mb-0">Brisas del Caribe</h3>
<div class="d-flex flex-wrap w-100 mb-2">
<button class="btn btn-reset">
<img src="../../../img/star_active.png" alt="" class="img img-auto img-w">
</button>
<button class="btn btn-reset">
<img src="../../../img/star_active.png" alt="" class="img img-auto img-w">
</button>
<button class="btn btn-reset">
<img src="../../../img/star_active.png" alt="" class="img img-auto img-w">
</button>
<button class="btn btn-reset">
<img src="../../../img/star_active.png" alt="" class="img img-auto img-w">
</button>
<button class="btn btn-reset p-1">
<img src="../../../img/star.png" alt="" class="img img-auto img-w">
</button>
</div>
<div class="w-100 mb-2 d-flex align-items-center">
<img src="../../../img/icon_hotel.png" alt="" class="img img-auto mr-1">
<p class="text text-uppercase mb-0">Hotel Brisas</p>
</div>
<div class="w-100 mb-3 d-flex align-itemsntent-center">
<img src="../../../img/icon_flag.png" alt="" class="img img-auto mr-1">
<p class="text text-uppercase mb-0">Varadero</p>
</div>
<div class="action">
<button class="btn btn-round btn-round-mix text text-color-white px-5 px-lg-2 py-2 w-100 text-size-lg-1-2">Seleccionar</button>
</div>
</div>
</div>
<div class="c-flag position position-absolute position-z-2">
<img src="../../../img/flag.png" alt="flag-background" class="img img-auto">
<p class="value text text-color-white m-0 text-center text-size-0-8 text-lh-100 position-absolute">Desde<span class="d-block text text-size-1-5 text-color-white text-family-primary text-w-bold">41,00€</span></p>
</div>
</div>
<div class="card thumb col-12 col-md-6 col-lg-4 col-xl-3 position-relative px-3 mb-5 align-self-end">
<div class="pb-3 wrapper overflow-hidden">
<div class="images w-100 mb-2 overflow-hidden">
<img src="../../../img/dummy.png" alt="Guardalavaca" class="img img-auto img-w img-h-250">
</div>
<div class="captions w-100 px-2">
<h3 class="text text-color-primary text-size-1-5 text-size-lg-1-3 text-w-bold mb-0">Brisas del Caribe</h3>
<div class="d-flex flex-wrap w-100 mb-2">
<button class="btn btn-reset">
<img src="../../../img/star_active.png" alt="" class="img img-auto img-w">
</button>
<button class="btn btn-reset">
<img src="../../../img/star_active.png" alt="" class="img img-auto img-w">
</button>
<button class="btn btn-reset">
<img src="../../../img/star_active.png" alt="" class="img img-auto img-w">
</button>
<button class="btn btn-reset">
<img src="../../../img/star_active.png" alt="" class="img img-auto img-w">
</button>
<button class="btn btn-reset p-1">
<img src="../../../img/star.png" alt="" class="img img-auto img-w">
</button>
</div>
<div class="w-100 mb-2 d-flex align-items-center">
<img src="../../../img/icon_hotel.png" alt="" class="img img-auto mr-1">
<p class="text text-uppercase mb-0">Hotel Brisas</p>
</div>
<div class="w-100 mb-3 d-flex align-itemsntent-center">
<img src="../../../img/icon_flag.png" alt="" class="img img-auto mr-1">
<p class="text text-uppercase mb-0">Varadero</p>
</div>
<div class="action">
<button class="btn btn-round btn-round-mix text text-color-white px-5 px-lg-2 py-2 w-100 text-size-lg-1-2">Seleccionar</button>
</div>
</div>
</div>
<div class="c-flag position position-absolute position-z-2">
<img src="../../../img/flag.png" alt="flag-background" class="img img-auto">
<p class="value text text-color-white m-0 text-center text-size-0-8 text-lh-100 position-absolute">Desde<span class="d-block text text-size-1-5 text-color-white text-family-primary text-w-bold">41,00€</span></p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="c-tabs container mb-5">
<div class="row tab-container">
<div class="col-12 text-center mb-3 mb-lg-4">
<h2 class="text text-size-2 text-size-lg-3-5 text-color-primary text-w-bold m-0">Hoteles Cubacan</h2>
</div>
<div class="col-12 d-flex flex-wrap mb-5">
<button class="btn btn-solid position-relative btn-solid-grade-1 tab active p-3 text text-color-white col-6">
<i class="icon ml-2 fa fa-cup"></i>
<span class="text text-color-white text-size-lg-1-5 text-w-bold text-uppercase">
<img src="../../../img/icon_copa.png" alt="" class="img img-auto img-w-1-5 mr-1"> Mas populares</span>
</button>
<button class="btn btn-solid position-relative btn-solid-eight tab p-3 text text-color-white col-6">
<i class="icon ml-2 fa fa-cup"></i>
<span class="text text-color-white text-size-lg-1-5 text-w-bold text-uppercase">
<img src="../../../img/icon_diamante.png" alt="" class="img img-auto img-w-1-5 mr-1"> Mas populares</span>
</button>
</div>
<div class="col-12 px-0 tab-panes">
<div class="tab-pane flex flex-wrap active">
{{> @b-hoteles }}
{{> @b-hoteles }}
{{> @b-hoteles }}
</div>
<div class="tab-pane flex flex-wrap">
{{> @b-hoteles }}
{{> @b-hoteles }}
{{> @b-hoteles }}
{{> @b-hoteles }}
{{> @b-hoteles }}
</div>
</div>
</div>
</section>
/* No context defined. */
// tabs
.c-tabs {
.tab {
&-pane {
display: none;
&.active {
display: block;
&.flex {
display: flex;
flex-wrap: wrap;
}
}
}
}
}
export function tabs() {
//commonjs
var tabs = require('tabs');
//or directly include the script and 'tabs' will be global
// make it tabbable!
if(document.querySelector('.tab-container')) {
var container = document.querySelector('.tab-container')
tabs(container);
}
}
No notes defined.