No notes defined.
<div class="relative" style="background: rgb(2,0,36); background: linear-gradient(180deg, rgba(2,0,36,0) 0%, rgba(0,0,0,0.5) 100%, rgba(0,212,255,1) 100%);">
<div class="relative aspect-w-2 aspect-h-2 sm:aspect-w-3 sm:aspect-h-2 md:aspect-w-16 md:aspect-h-9 ie-min-600">
<picture>
<source media="(max-width: 640px)" srcset='/dist/images/temp/OutdoorBuilding7.f1637871638.jpg'>
<source media="(max-width: 999px)" srcset='/dist/images/temp/OutdoorBuilding7.f1637871638.jpg'>
<source media="(min-width: 1000px)" srcset='/dist/images/temp/OutdoorBuilding7.f1637871638.jpg'>
<img class="absolute object-cover w-full h-full" src='/dist/images/temp/OutdoorBuilding7.f1637871638.jpg' alt="alt text" loading="eager">
</picture>
<div class="absolute inset-0 bg-black opacity-20"></div>
</div>
<div class="absolute inset-0 flex flex-col items-center justify-center slide-up" style="background: rgb(0,0,0,0.1);">
<div class="pt-12 max-w-4xl mx-auto text-center text-white leading-tight tracking-wide">
<p class="font-mtl-heading uppercase mb-4 text-5xl px-2 leading-10">
Your Lake Louise Hotel Getaway
</p>
<p class="mb-4 sm:mb-8 text-lg sm:text-xl md:text-2xl uppercase">
Great Location. Great Rates. Great Service.
</p>
<button x-data @click="$dispatch('togglevideo')" class="group mt-6 flex text-white text-sm justify-center items-center mx-auto">
<svg class="fill-current text-white h-6 w-6 transform group-hover:scale-110 transition duration-300 opacity-75 group-hover:opacity-100 transition duration-300" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M12,22c5.514,0,10-4.486,10-10c0-5.514-4.486-10-10-10S2,6.486,2,12C2,17.514,6.486,22,12,22z M10,7l6,5l-6,5V7z"></path>
</svg>
<span class="uppercase pl-2">Watch Full Video</span>
</button>
</div>
</div>
</div>
<div x-data="modalVideo()" @keydown.escape.window="showModal = false" x-init="$watch('showModal', toggleOverflow)">
<div x-show="showModal" x-cloak x-on:togglevideo.window="showModal = !showModal" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform" x-transition:enter-end="opacity-100 transform" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 transform" x-transition:leave-end="opacity-0 transform" class="fixed inset-0 bg-black z-50 flex justify-center items-center bg-opacity-90">
<button @click="showModal = false" class="absolute top-0 right-0 flex flex-col items-center m-2 sm:m-4 md:m-6 lg:m-8 opacity-75 hover:opacity-100 text-white" aria-label="Close" tabindex="-1">
<svg class="w-12 h-12 fill-current" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
<path d="M6.57 6.57c-5.205 5.205-5.205 13.643 0 18.849 5.205 5.2 13.643 5.2 18.849 0 5.2-5.21 5.2-13.65 0-18.849-5.21-5.21-13.65-5.205-18.849 0zm18.094 18.094c-4.79 4.78-12.56 4.78-17.341 0-4.79-4.79-4.79-12.56 0-17.341 4.78-4.79 12.56-4.79 17.341 0 4.78 4.78 4.78 12.56 0 17.341z" />
<path d="M10.722 9.96l-.76.75 5.27 5.27-5.253 5.253.75.75 5.253-5.253 5.253 5.253.75-.76-5.253-5.253 5.27-5.28-.76-.76-5.28 5.27z" />
</svg>
</button>
<div class="">
<p class="text-white">
full video here
</p>
</div>
</div>
</div>
<script>
function modalVideo() {
return {
showModal: false
}
}
</script>
<div class="relative"
style="background: rgb(2,0,36); background: linear-gradient(180deg, rgba(2,0,36,0) 0%, rgba(0,0,0,0.5) 100%, rgba(0,212,255,1) 100%);"
>
<div class="relative aspect-w-2 aspect-h-2 sm:aspect-w-3 sm:aspect-h-2 md:aspect-w-16 md:aspect-h-9 ie-min-600">
{{> @mtl-image-hero }}
{{!-- <video class="object-cover w-full h-full" src="/images/swr/swr-540p.mp4" autoplay loop muted></video>--}}
<div class="absolute inset-0 bg-black opacity-20"></div>
</div>
<div class="absolute inset-0 flex flex-col items-center justify-center slide-up"
style="background: rgb(0,0,0,0.1);">
<div class="pt-12 max-w-4xl mx-auto text-center text-white leading-tight tracking-wide">
<p class="font-mtl-heading uppercase mb-4 text-5xl px-2 leading-10">
Your Lake Louise Hotel Getaway
</p>
<p class="mb-4 sm:mb-8 text-lg sm:text-xl md:text-2xl uppercase">
Great Location. Great Rates. Great Service.
</p>
<button x-data @click="$dispatch('togglevideo')"
class="group mt-6 flex text-white text-sm justify-center items-center mx-auto">
<svg class="fill-current text-white h-6 w-6 transform group-hover:scale-110 transition duration-300 opacity-75 group-hover:opacity-100 transition duration-300"
xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M12,22c5.514,0,10-4.486,10-10c0-5.514-4.486-10-10-10S2,6.486,2,12C2,17.514,6.486,22,12,22z M10,7l6,5l-6,5V7z"></path>
</svg>
<span class="uppercase pl-2">Watch Full Video</span>
</button>
</div>
</div>
</div>
{{!-- Video Modal --}}
<div x-data="modalVideo()" @keydown.escape.window="showModal = false" x-init="$watch('showModal', toggleOverflow)">
<div x-show="showModal" x-cloak x-on:togglevideo.window="showModal = !showModal"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 transform"
x-transition:enter-end="opacity-100 transform"
x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100 transform"
x-transition:leave-end="opacity-0 transform"
class="fixed inset-0 bg-black z-50 flex justify-center items-center bg-opacity-90"
>
{{> @swr-modal-close-button }}
<div class="">
<p class="text-white">
full video here
</p>
</div>
</div>
</div>
<script>
function modalVideo() {
return {
showModal: false
}
}
</script>
/* No context defined. */