No notes defined.
<div class="bg-gray-50">
<div class="relative flex flex-col" data-slideout-ignore>
<ul id="intro-controls" class="z-50 controls text-white m-0 p-0 flex items-center justify-between focus:outline-none z-10" aria-label="Carousel Navigation" tabindex="0">
<li class="prev absolute left-0 top-0 bottom-0 flex items-center text-cyan sm:text-white sm:py-1 hover:bg-black hover:bg-opacity-50 focus:outline-none cursor-pointer" data-controls="prev" aria-controls="customize" tabindex="-1">
<svg class="fill-current mt-1 w-10 sm:w-16 h-10 sm:h-16" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 30 8 16 20 2" />
</svg>
</li>
<li class="next absolute right-0 top-0 bottom-0 flex items-center text-cyan sm:text-white sm:py-1 hover:bg-black hover:bg-opacity-50 focus:outline-none cursor-pointer" data-controls="next" aria-controls="customize" tabindex="-1">
<svg class="fill-current mt-1 w-10 sm:w-16 h-10 sm:h-16" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m12 30 12-14L12 2" />
</svg>
</li>
</ul>
<div id="intro-slider" class="flex h-full z-20">
<div class="flex-grow px-10 sm:px-0">
<div class="flex flex-col sm:flex-row h-full w-full">
<div class="w-full sm:w-1/3 md:w-1/2 relative">
<img class="sm:absolute sm:inset-0 object-cover h-full w-full" src="/dist/images/temp/MountaineerLodge_DEC-8-Large.jpeg" alt="">
</div>
<div class="w-full sm:w-2/3 md:w-1/2 flex flex-col justify-center p-2 bg-cyan h-full">
<div class="border px-8 py-8 sm:py-20 flex flex-col justify-center flex-grow">
<h2 class="font-mtl-heading text-2xl sm:text-3xl md:text-4xl uppercase text-white">
Incredible Location In Downtown Lake Louise
</h2>
<p class="mt-4 text-lg text-white">
Discover all of Lake Louise's unparalleled adventures from the doorstep of the Mountaineer Lodge.
</p>
<p class="mt-6">
<a class="inline-block py-2.5 px-3.5 text-white uppercase border border-white hover:bg-gray-900 hover:text-white focus:bg-gray-800 focus:outline-none focus:shadow-outline" href="">
Our Location
</a>
</p>
</div>
</div>
</div>
</div>
<div class="flex-grow px-10 sm:px-0">
<div class="flex flex-col sm:flex-row h-full w-full">
<div class="w-full sm:w-1/3 md:w-1/2 relative">
<img class="sm:absolute sm:inset-0 object-cover h-full w-full" src="/dist/images/temp/MountaineerLodge_DEC-8-Large.jpeg" alt="">
</div>
<div class="w-full sm:w-2/3 md:w-1/2 flex flex-col justify-center p-2 bg-cyan h-full">
<div class="border px-8 py-8 sm:py-20 flex flex-col justify-center flex-grow">
<h2 class="font-mtl-heading text-2xl sm:text-3xl md:text-4xl uppercase text-white">
Free Breakfast
</h2>
<p class="mt-4 text-lg text-white">
The Mountaineer Lodge is one of the only hotels in Lake Louise where a continental breakfast is included in your stay.
</p>
<p class="mt-6">
<a class="inline-block py-2.5 px-3.5 text-white uppercase border border-white hover:bg-gray-900 hover:text-white focus:bg-gray-800 focus:outline-none focus:shadow-outline" href="">
Learn More
</a>
</p>
</div>
</div>
</div>
</div>
<div class="flex-grow px-10 sm:px-0">
<div class="flex flex-col sm:flex-row h-full w-full">
<div class="w-full sm:w-1/3 md:w-1/2 relative">
<img class="sm:absolute sm:inset-0 object-cover h-full w-full" src="/dist/images/temp/MountaineerLodge_DEC-8-Large.jpeg" alt="">
</div>
<div class="w-full sm:w-2/3 md:w-1/2 flex flex-col justify-center p-2 bg-cyan h-full">
<div class="border px-8 py-8 sm:py-20 flex flex-col justify-center flex-grow">
<h2 class="font-mtl-heading text-2xl sm:text-3xl md:text-4xl uppercase text-white">
Soaking And Relaxation
</h2>
<p class="mt-4 text-lg text-white">
The hot tubs are the perfect spot for an apres-adventure soak.
</p>
<p class="mt-6">
<a class="inline-block py-2.5 px-3.5 text-white uppercase border border-white hover:bg-gray-900 hover:text-white focus:bg-gray-800 focus:outline-none focus:shadow-outline" href="">
Tour the Hotel
</a>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
const introSliderContainer = document.querySelector('#intro-slider');
if (introSliderContainer) {
var discoverSlider = tns({
container: '#intro-slider',
loop: false,
items: 1,
slideBy: 1,
nav: false,
autoplay: false,
// speed: 400,
autoplayButtonOutput: false,
mouseDrag: true,
controlsContainer: "#intro-controls",
mode: "carousel",
autoHeight: false,
});
}
</script>
</div>
<div class="bg-gray-50">
<div class="relative flex flex-col" data-slideout-ignore>
{{> @mtl-carousel-controls }}
<div id="intro-slider" class="flex h-full z-20">
{{#each items }}
<div class="flex-grow px-10 sm:px-0">
{{> @mtl-single-feature-split-right-dark }}
</div>
{{/each}}
</div>
</div>
<script>
const introSliderContainer = document.querySelector('#intro-slider');
if (introSliderContainer) {
var discoverSlider = tns({
container: '#intro-slider',
loop: false,
items: 1,
slideBy: 1,
nav: false,
autoplay: false,
// speed: 400,
autoplayButtonOutput: false,
mouseDrag: true,
controlsContainer: "#intro-controls",
mode: "carousel",
autoHeight: false,
});
}
</script>
</div>
{
"controls": "intro-controls",
"controls-color": "text-cyan sm:text-white",
"items": [
{
"heading": "Incredible Location In Downtown Lake Louise",
"image": "https://picsum.photos/id/10/400/300",
"text": "Discover all of Lake Louise's unparalleled adventures from the doorstep of the Mountaineer Lodge.",
"buttonText": "Our Location"
},
{
"heading": "Free Breakfast",
"image": "https://picsum.photos/id/10/400/300",
"text": "The Mountaineer Lodge is one of the only hotels in Lake Louise where a continental breakfast is included in your stay.",
"buttonText": "Learn More"
},
{
"heading": "Soaking And Relaxation",
"image": "https://picsum.photos/id/10/400/300",
"text": "The hot tubs are the perfect spot for an apres-adventure soak.",
"buttonText": "Tour the Hotel"
}
]
}