No notes defined.
<div>
<header class="relative z-10">
<div class="header fixed right-0 left-0">
<div class="relative text-white mx-auto" style="max-width: 2000px;">
<div class="bg-gradient-to-b from-black to-transparent opacity-70 absolute inset-0"></div>
<div class="flex relative">
<div class="w-1/6 flex flex-col sm:flex-row sm:justify-start sm:items-start" x-data="{ open: false }">
<div class="m-2 sm:m-4 md:m-6 lg:m-8">
<button class="flex flex-col items-center opacity-75 hover:opacity-100" @click="open = true">
<svg class="w-12 h-12 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path d="M9 4v1H5v22h22V5h-4V4h-2v1H11V4zM7 7h2v1h2V7h10v1h2V7h2v2H7zm0 4h18v14H7zm6 2v2h2v-2zm4 0v2h2v-2zm4 0v2h2v-2zM9 17v2h2v-2zm4 0v2h2v-2zm4 0v2h2v-2zm4 0v2h2v-2zM9 21v2h2v-2zm4 0v2h2v-2zm4 0v2h2v-2z"></path>
</svg>
<p class="uppercase text-xs pt-1">Book</p>
</button>
<div class="absolute top-0 left-0 z-20 bg-gray-800 p-2 sm:w-72 sm:ml-6 sm:mt-6" style="background: hsl(284, 51%, 22%)" x-cloak x-show="open" @click.away="open = false" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform scale-90 -translate-y-6 -translate-x-6" x-transition:enter-end="opacity-100 transform scale-100" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-end="opacity-0 transform scale-90 -translate-y-6 -translate-x-6">
<button @click="open = false" class="absolute group top-0 right-0" aria-label="Close">
<svg class="h-6 w-6 m-2 fill-current text-gray-500 group-hover:text-gray-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
<path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
</svg>
</button>
</div>
</div>
</div>
<div class="w-2/3 text-center">
<a href="" class="relative inline-block mx-auto bg-gradient-to-b from-gray-100 via-gray-100 hover:from-white hover:via-white">
<img class="relative pb-6" src="/dist/images/mountaineerlodge_logo.png" srcset="/dist/images/mountaineerlodge_logo.png 1x, /dist/images/[email protected] 2x" width="300" height="130" alt=" logo">
</a>
</div>
<div class="w-1/6 flex flex-col sm:flex-row sm:justify-end sm:items-start">
<button class="toggle-button flex flex-col items-center m-2 sm:m-4 md:m-6 lg:m-8 opacity-75 hover:opacity-100">
<svg class="w-12 h-12 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path d="M4 7v2h24V7zm0 8v2h24v-2zm0 8v2h24v-2z"></path>
</svg>
<p class="uppercase text-xs pt-1">Menu</p>
</button>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/ScrollTrigger.min.js"></script>
<script>
const showAnim = gsap.from('.header', {
yPercent: -100,
paused: true,
duration: 0.2
}).progress(1);
ScrollTrigger.create({
start: "top top",
end: 99999,
onUpdate: (self) => {
console.log(self.direction);
self.direction === -1 ? showAnim.play() : showAnim.reverse()
}
});
</script>
</header>
<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>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css">
<div class="bg-cyan">
<form id="booking-widget" class="max-w-5xl mx-auto px-4" action='https://secure.webrez.com/hotel/1120' method='get' target="_blank" rel="noopener">
<div class="flex flex-wrap content-between py-4 -mx-2">
<div class="w-full sm:w-1/2 md:flex-1 mb-4 px-2">
<label class="block uppercase tracking-wide text-gray-200 text-xs font-bold mb-2" for="ArrivalDate">
Arrival
</label>
<div class="relative">
<input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id="ArrivalDate" name="arrival" type="text" placeholder="Arrival Date" autocomplete="off" readonly="">
<input type="hidden" id="date_from" name="date_from">
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-brown-500">
<svg class="h-4 w-5 fill-current text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M17 3h-1v2h-3V3H7v2H4V3H3c-1.101 0-2 .9-2 2v12c0 1.1.899 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 14H3V9h14v8zM6.5 1h-2v3.5h2V1zm9 0h-2v3.5h2V1z"></path>
</svg>
</div>
</div>
</div>
<div class="w-full sm:w-1/2 md:flex-1 mb-4 px-2">
<label class="block uppercase tracking-wide text-gray-200 text-xs font-bold mb-2" for="DepartureDate">
Departure
</label>
<div class="relative">
<input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id="DepartureDate" name="departure" type="text" placeholder="Departure Date" autocomplete="off" readonly="">
<input type="hidden" id="date_to" name="date_to">
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-brown-500">
<svg class="h-4 w-5 fill-current text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M17 3h-1v2h-3V3H7v2H4V3H3c-1.101 0-2 .9-2 2v12c0 1.1.899 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 14H3V9h14v8zM6.5 1h-2v3.5h2V1zm9 0h-2v3.5h2V1z"></path>
</svg>
</div>
</div>
</div>
<div class="w-full sm:w-1/2 md:w-40 mb-4 px-2">
<label class="block uppercase tracking-wide text-gray-200 text-xs font-bold mb-2" for="adults">
Adults
</label>
<div class="relative text-gray-500">
<select id="num_adults" class="block appearance-none w-full bg-gray-100 border border-gray-200 text-gray-700 py-3 px-4 pr-8 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" name="num_adults">
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-brown-700">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path>
</svg>
</div>
</div>
</div>
<div class="w-full sm:w-1/2 md:w-40 mb-4 px-2">
<label class="block uppercase tracking-wide text-gray-200 text-xs font-bold mb-2" for="adults">
Children
</label>
<div class="relative text-gray-500">
<select id="num_children" class="block appearance-none w-full bg-gray-100 border border-gray-200 text-gray-700 py-3 px-4 pr-8 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" name="num_children">
<option value="0" selected="selected">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-brown-700">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path>
</svg>
</div>
</div>
</div>
<div class="w-full md:flex-1 mb-4 px-2 flex flex-col justify-end">
<button type="submit" class="block py-2.5 px-3.5 text-white uppercase border border-white hover:bg-gray-900 focus:bg-gray-800 focus:outline-none focus:shadow-outline" onclick="ga('send','event','Outgoing','Booking System')">
Check Availability
</button>
</div>
</div>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.9.4/dayjs.min.js" integrity="sha512-XZSHSEFj4QeE0G4pwy4tToyAhF2VXoEcF9CP0t1PSZMP2XHhEEB9PjM9knsdzcEKbi6GRMazdt8tJadz0JTKIQ==" crossOrigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>
<script src="../raw/mtl-booking-widget-webrez/booking-widget-webrez.js"></script>
<div class="flex flex-col sm:flex-row">
<div class="w-full sm:w-1/2 flex flex-col justify-center p-2">
<div class="border px-12 py-20">
<h2 class="font-mtl-heading text-4xl uppercase text-cyan">
Ready for Your Lake Louise Adventure?
</h2>
<p class="mt-4 text-gray-600 text-lg">
Mountaineer Lodge is the place to stay in Lake Louise for mountain adventurers and relaxation artists.
</p>
<p class="mt-6">
<a class="inline-block py-2.5 px-3.5 text-cyan uppercase border border-cyan 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 class="w-full sm:w-1/2 relative">
<img class="sm:absolute sm:inset-0 object-cover h-full w-full" src="/dist/images/temp/lake-louise-winter.jpg" alt="">
</div>
</div>
<div class="relative bg-gray-100 py-8">
<div class="relative max-w-5xl mx-auto px-4">
<div class="mt-2 flex items-start">
<div class="flex-shrink-0 ">
<div class="w-16 h-16 rounded-full bg-purple-200 ring-1 ring-gray-600 border-2 border-gray-200 overflow-hidden shadow-md mr-4">
<img class="object-cover" src="/dist/images/temp/flipto-profile-u3.png" alt="" style="width:76px; height: 76px;">
</div>
</div>
<div>
<p class="text-lg sm:text-xl mb-4 text-gray-600">
"My family and I enjoyed our vacation very very much. Thanks to your warm and super friendly staff, to the nice and spacious rooms. I enjoyed everything about your hotel!"
</p>
<div class="flex flex-col lg:flex-row">
<p class="text-sm mb-4 text-cyan mr-12">
Josie, one of our recent guests, has just unleashed a wave of complimentary welcome amenities.<br>
Unlock one now.
</p>
<div class="mt-2 lg:mt-4 mb-6">
<a class="px-6 py-3 text-sm text-white uppercase whitespace-nowrap cursor-pointer bg-cyan hover:bg-black">
Unlock Now
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="relative bg-gray-300 py-12">
<div class="absolute inset-0 bg-top grayscale opacity-50" style="background: url('/dist/images/temp/Lake-Louise-Winter-Large.jpeg')"></div>
<div class="absolute inset-0 bg-gray-300 opacity-50"></div>
<div class="relative max-w-5xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-4 px-4">
<div class="border border-white p-1">
<a href="" class="flex flex-col items-center px-2 py-4 bg-white h-full">
<svg class="fill-current h-10 w-10 text-gray-200" viewBox="0 0 20 19" xmlns="http://www.w3.org/2000/svg">
<g fill-rule="evenodd" fill="none">
<path d="M-2-3h24v24H-2Z" />
<path fill="currentColor" d="M5 5a2 2 0 0 1-2-2c0-1.11.89-2 2-2a2 2 0 1 1 0 4Zm4.15 4H20v8c0 1.1-.9 2-2 2H2c-1.1 0-2-.9-2-2V9h3v-.75C3 7.01 4.01 6 5.25 6h.03c.34 0 .67.09.96.23.26.12.5.29.69.5l1.4 1.55c.23.26.51.5.82.72ZM5 17v-6H3v6h2Zm4 0v-6H7v6h2Zm4 0v-6h-2v6h2Zm4 0v-6h-2v6h2ZM15.42 4.21l-.07-.06c-1.03-1.01-1.5-2.36-1.3-3.72l.06-.43H16l-.09.59c-.15.79.1 1.58.67 2.2l.07.07c1.03 1 1.51 2.35 1.3 3.71l-.06.43h-1.91l.11-.59c.15-.79-.1-1.58-.67-2.2Zm-4-.001-.07-.06c-1.03-1.01-1.5-2.36-1.3-3.72l.06-.43H12l-.09.59c-.15.79.1 1.58.67 2.2l.07.07c1.03 1 1.51 2.35 1.3 3.71l-.06.43h-1.91l.11-.59c.15-.79-.1-1.58-.67-2.2Z" />
</g>
</svg>
<h2 class="mt-2 text-red-700 font-bold tracking-wider uppercase">
Heading
</h2>
</a>
</div>
<div class="border border-white p-1">
<a href="" class="flex flex-col items-center px-2 py-4 bg-white h-full">
<svg class="fill-current h-10 w-10 text-gray-200" viewBox="0 0 20 19" xmlns="http://www.w3.org/2000/svg">
<g fill-rule="evenodd" fill="none">
<path d="M-2-3h24v24H-2Z" />
<path fill="currentColor" d="M5 5a2 2 0 0 1-2-2c0-1.11.89-2 2-2a2 2 0 1 1 0 4Zm4.15 4H20v8c0 1.1-.9 2-2 2H2c-1.1 0-2-.9-2-2V9h3v-.75C3 7.01 4.01 6 5.25 6h.03c.34 0 .67.09.96.23.26.12.5.29.69.5l1.4 1.55c.23.26.51.5.82.72ZM5 17v-6H3v6h2Zm4 0v-6H7v6h2Zm4 0v-6h-2v6h2Zm4 0v-6h-2v6h2ZM15.42 4.21l-.07-.06c-1.03-1.01-1.5-2.36-1.3-3.72l.06-.43H16l-.09.59c-.15.79.1 1.58.67 2.2l.07.07c1.03 1 1.51 2.35 1.3 3.71l-.06.43h-1.91l.11-.59c.15-.79-.1-1.58-.67-2.2Zm-4-.001-.07-.06c-1.03-1.01-1.5-2.36-1.3-3.72l.06-.43H12l-.09.59c-.15.79.1 1.58.67 2.2l.07.07c1.03 1 1.51 2.35 1.3 3.71l-.06.43h-1.91l.11-.59c.15-.79-.1-1.58-.67-2.2Z" />
</g>
</svg>
<h2 class="mt-2 text-red-700 font-bold tracking-wider uppercase">
Heading
</h2>
</a>
</div>
<div class="border border-white p-1">
<a href="" class="flex flex-col items-center px-2 py-4 bg-white h-full">
<svg class="fill-current h-10 w-10 text-gray-200" viewBox="0 0 20 19" xmlns="http://www.w3.org/2000/svg">
<g fill-rule="evenodd" fill="none">
<path d="M-2-3h24v24H-2Z" />
<path fill="currentColor" d="M5 5a2 2 0 0 1-2-2c0-1.11.89-2 2-2a2 2 0 1 1 0 4Zm4.15 4H20v8c0 1.1-.9 2-2 2H2c-1.1 0-2-.9-2-2V9h3v-.75C3 7.01 4.01 6 5.25 6h.03c.34 0 .67.09.96.23.26.12.5.29.69.5l1.4 1.55c.23.26.51.5.82.72ZM5 17v-6H3v6h2Zm4 0v-6H7v6h2Zm4 0v-6h-2v6h2Zm4 0v-6h-2v6h2ZM15.42 4.21l-.07-.06c-1.03-1.01-1.5-2.36-1.3-3.72l.06-.43H16l-.09.59c-.15.79.1 1.58.67 2.2l.07.07c1.03 1 1.51 2.35 1.3 3.71l-.06.43h-1.91l.11-.59c.15-.79-.1-1.58-.67-2.2Zm-4-.001-.07-.06c-1.03-1.01-1.5-2.36-1.3-3.72l.06-.43H12l-.09.59c-.15.79.1 1.58.67 2.2l.07.07c1.03 1 1.51 2.35 1.3 3.71l-.06.43h-1.91l.11-.59c.15-.79-.1-1.58-.67-2.2Z" />
</g>
</svg>
<h2 class="mt-2 text-red-700 font-bold tracking-wider uppercase">
Heading
</h2>
</a>
</div>
<div class="border border-white p-1">
<a href="" class="flex flex-col items-center px-2 py-4 bg-white h-full">
<svg class="fill-current h-10 w-10 text-gray-200" viewBox="0 0 20 19" xmlns="http://www.w3.org/2000/svg">
<g fill-rule="evenodd" fill="none">
<path d="M-2-3h24v24H-2Z" />
<path fill="currentColor" d="M5 5a2 2 0 0 1-2-2c0-1.11.89-2 2-2a2 2 0 1 1 0 4Zm4.15 4H20v8c0 1.1-.9 2-2 2H2c-1.1 0-2-.9-2-2V9h3v-.75C3 7.01 4.01 6 5.25 6h.03c.34 0 .67.09.96.23.26.12.5.29.69.5l1.4 1.55c.23.26.51.5.82.72ZM5 17v-6H3v6h2Zm4 0v-6H7v6h2Zm4 0v-6h-2v6h2Zm4 0v-6h-2v6h2ZM15.42 4.21l-.07-.06c-1.03-1.01-1.5-2.36-1.3-3.72l.06-.43H16l-.09.59c-.15.79.1 1.58.67 2.2l.07.07c1.03 1 1.51 2.35 1.3 3.71l-.06.43h-1.91l.11-.59c.15-.79-.1-1.58-.67-2.2Zm-4-.001-.07-.06c-1.03-1.01-1.5-2.36-1.3-3.72l.06-.43H12l-.09.59c-.15.79.1 1.58.67 2.2l.07.07c1.03 1 1.51 2.35 1.3 3.71l-.06.43h-1.91l.11-.59c.15-.79-.1-1.58-.67-2.2Z" />
</g>
</svg>
<h2 class="mt-2 text-red-700 font-bold tracking-wider uppercase">
Heading
</h2>
</a>
</div>
</div>
</div>
<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 py-20 px-4">
<h2 class="font-mtl-heading text-4xl sm:text-5xl text-red-600 uppercase text-center">
Comfy Rooms & Fireplace Suites
</h2>
<p class="max-w-2xl mx-auto mt-4 text-center text-gray-500">
Nothing says comfy like; sleep-inducing pillow-top mattresses, a convenient mini-fridge, microwave, and in-room
coffee station, as well as super-fast fiber optic Wifi.
</p>
<div class="mt-12 mx-auto flex flex-col max-w-6xl mx-auto md:grid sm:grid-cols-3 gap-x-8 gap-y-8">
<div class="">
<a class="group" href="">
<div class="flex flex-row sm:flex-col h-full bg-white shadow hover:shadow-lg rounded overflow-hidden shadow-lg group-hover:shadow-xl transform duration-200 group-hover:scale-105">
<div class="sm:aspect-w-4 sm:aspect-h-3">
<img class="w-48 h-full sm:w-full sm:h-full object-center object-cover" src="/dist/images/temp/Mountaineer-Suite-Living-Room.jpg" alt="Random Image">
</div>
<h3 class="flex-grow flex w-full items-center sm:justify-center sm:text-center px-4 my-6 text-xl tracking-wider text-red-600 uppercase">
Mountaineer Suite
</h3>
<div class="flex-none justify-center hidden mt-0 mb-10 sm:flex">
<div class="inline-block px-6 py-3 mx-auto text-sm text-cyan uppercase border border-cyan group-hover:bg-cyan group-hover:text-white">
View Details
</div>
</div>
</div>
</a>
</div>
<div class="">
<a class="group" href="">
<div class="flex flex-row sm:flex-col h-full bg-white shadow hover:shadow-lg rounded overflow-hidden shadow-lg group-hover:shadow-xl transform duration-200 group-hover:scale-105">
<div class="sm:aspect-w-4 sm:aspect-h-3">
<img class="w-48 h-full sm:w-full sm:h-full object-center object-cover" src="/dist/images/temp/Queen-Explorer-LR.jpg" alt="Random Image">
</div>
<h3 class="flex-grow flex w-full items-center sm:justify-center sm:text-center px-4 my-6 text-xl tracking-wider text-red-600 uppercase">
Queen Explorer Suite
</h3>
<div class="flex-none justify-center hidden mt-0 mb-10 sm:flex">
<div class="inline-block px-6 py-3 mx-auto text-sm text-cyan uppercase border border-cyan group-hover:bg-cyan group-hover:text-white">
View Details
</div>
</div>
</div>
</a>
</div>
<div class="">
<a class="group" href="">
<div class="flex flex-row sm:flex-col h-full bg-white shadow hover:shadow-lg rounded overflow-hidden shadow-lg group-hover:shadow-xl transform duration-200 group-hover:scale-105">
<div class="sm:aspect-w-4 sm:aspect-h-3">
<img class="w-48 h-full sm:w-full sm:h-full object-center object-cover" src="/dist/images/temp/KEX.jpg" alt="Random Image">
</div>
<h3 class="flex-grow flex w-full items-center sm:justify-center sm:text-center px-4 my-6 text-xl tracking-wider text-red-600 uppercase">
King Explorer Suite
</h3>
<div class="flex-none justify-center hidden mt-0 mb-10 sm:flex">
<div class="inline-block px-6 py-3 mx-auto text-sm text-cyan uppercase border border-cyan group-hover:bg-cyan group-hover:text-white">
View Details
</div>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="bg-cyan py-12">
<h2 class="font-mtl-heading text-4xl sm:text-5xl text-white uppercase text-center">
Discover Mountaineer Lodge
</h2>
<div class="relative flex flex-col mt-12 mb-12" data-slideout-ignore>
<ul id="discover-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 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 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="discover-slider" class="relative flex flex-wrap">
<div class="max-w-md">
<a href="" class="group">
<div class="relative">
<div class="relative">
<img class="h-full w-full object-center object-cover" src="/dist/images/temp/Carmella_MRI_June-3-Large.f1637891328.jpg" alt="Random Image">
</div>
<div class="absolute inset-0 bg-black opacity-30 group-hover:opacity-10 transition transform"></div>
<div class="absolute inset-0 flex justify-center items-center border border-white m-1">
<h3 class="text-xl sm:text-2xl text-white uppercase">
Special Offers
</h3>
</div>
</div>
</a>
</div>
<div class="max-w-md">
<a href="" class="group">
<div class="relative">
<div class="relative">
<img class="h-full w-full object-center object-cover" src="/dist/images/temp/Mountaineer_LakeLouise-20-Large.jpg" alt="Random Image">
</div>
<div class="absolute inset-0 bg-black opacity-30 group-hover:opacity-10 transition transform"></div>
<div class="absolute inset-0 flex justify-center items-center border border-white m-1">
<h3 class="text-xl sm:text-2xl text-white uppercase">
Hotel Amenities
</h3>
</div>
</div>
</a>
</div>
<div class="max-w-md">
<a href="" class="group">
<div class="relative">
<div class="relative">
<img class="h-full w-full object-center object-cover" src="/dist/images/temp/Mountaineer_LakeLouise-10-Large.jpg" alt="Random Image">
</div>
<div class="absolute inset-0 bg-black opacity-30 group-hover:opacity-10 transition transform"></div>
<div class="absolute inset-0 flex justify-center items-center border border-white m-1">
<h3 class="text-xl sm:text-2xl text-white uppercase">
Breakfast
</h3>
</div>
</div>
</a>
</div>
<div class="max-w-md">
<a href="" class="group">
<div class="relative">
<div class="relative">
<img class="h-full w-full object-center object-cover" src="/dist/images/temp/Lake-Louise-Ski-Resort.jpg" alt="Random Image">
</div>
<div class="absolute inset-0 bg-black opacity-30 group-hover:opacity-10 transition transform"></div>
<div class="absolute inset-0 flex justify-center items-center border border-white m-1">
<h3 class="text-xl sm:text-2xl text-white uppercase">
Winter Activities
</h3>
</div>
</div>
</a>
</div>
<div class="max-w-md">
<a href="" class="group">
<div class="relative">
<div class="relative">
<img class="h-full w-full object-center object-cover" src="/dist/images/temp/For-the-Family.jpg" alt="Random Image">
</div>
<div class="absolute inset-0 bg-black opacity-30 group-hover:opacity-10 transition transform"></div>
<div class="absolute inset-0 flex justify-center items-center border border-white m-1">
<h3 class="text-xl sm:text-2xl text-white uppercase">
Visit Lake Louise
</h3>
</div>
</div>
</a>
</div>
<div class="max-w-md">
<a href="" class="group">
<div class="relative">
<div class="relative">
<img class="h-full w-full object-center object-cover" src="/dist/images/temp/Carmella_MRI_June-10-XL.f1637891336.jpg" alt="Random Image">
</div>
<div class="absolute inset-0 bg-black opacity-30 group-hover:opacity-10 transition transform"></div>
<div class="absolute inset-0 flex justify-center items-center border border-white m-1">
<h3 class="text-xl sm:text-2xl text-white uppercase">
Check Rates & Dates
</h3>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
<script>
const discoverSliderContainer = document.querySelector('#discover-slider');
if (discoverSliderContainer) {
var discoverSlider = tns({
container: '#discover-slider',
loop: false,
items: 1,
responsive: {
640: {
items: 2
},
800: {
items: 3
},
},
slideBy: 1,
edgePadding: 50,
gutter: 20,
nav: false,
autoplay: false,
// speed: 400,
autoplayButtonOutput: false,
mouseDrag: true,
controlsContainer: "#discover-controls",
mode: "carousel",
});
}
</script>
<div class="max-w-6xl mx-auto text-center px-4 py-12">
<h2 class="mt-12 font-mtl-heading text-4xl sm:text-5xl text-cyan uppercase text-center">
Stories from our Recent Guests
</h2>
<div class="max-w-2xl mx-auto mt-2">
<p class="mb-12 text-lg">
Explore Mountaineer Lodge from the perspective of our guests and show some love for your favorite moment.
</p>
</div>
<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">
<img class="lazyload absolute h-full w-full object-cover" src="/dist/images/temp/stories-screenshot.jpg" width="1280" height="585" alt="img" loading="lazy" />
</div>
</div>
<div class="relative">
<div class="absolute inset-0 bg-red-600 opacity-70"></div>
<div class="relative px-12 py-8 flex flex-col lg:flex-row items-center justify-between">
<div class="">
<p class="text-lg sm:text-xl text-white uppercase">
Lake Louise + Icefields parkway + Jasper
</p>
<p class="mt-3 text-4xl sm:text-5xl md:text-6xl font-heading text-white uppercase">
= Awesome Road Trip
</p>
<p class="mt-2 text-white">
Book your stay at Mount Robson Inn, our sister property in Jasper and save...
</p>
</div>
<div class="block pt-10 mb-6 md:mt-0">
<a href="" class="px-5 py-4 bg-cyan text-white uppercase whitespace-nowrap">
Start Planning
</a>
</div>
</div>
</div>
<footer>
<div class="bg-gray-100">
<div class="container mx-auto">
<div class="flex flex-row flex-wrap px-4 py-12">
<div class="w-full mb-8 sm:w-1/2 lg:w-1/3 sm:mb-6">
<h5 class="mb-2 text-xl text-teal-600 uppercase font-mtl-heading tracking-wide text-cyan">
Mountaineer Lodge
</h5>
<div class="text-sm">
<a class="text-gray-600" href="https://goo.gl/maps/rVteLz7bH1z" tabindex="0" title="View on Google Maps" target="_blank" rel="noopener" data-events="resize">
<p class="inline-block mb-2 leading-relaxed">
101 Village Road, Lake Louise, Alberta Canada
</p>
</a>
</div>
<ul class="mt-2 text-sm text-teal-600 contact-links text-gray-600">
<li title="Call Toll Free" class="pb-1 hover:text-teal-800">
<a onclick="ga('send','event',' Contact Info','Click - Toll Free','1-855-556-8473')" class="no-link" href="tel:+18555568473" rel="nofollow">1-855-556-8473</a>
</li>
<li title="Call Local Number" class="pb-1 hover:text-teal-600">
<a onclick="ga('send','event',' Contact Info','Click - Local Phone','403-522-3844')" class="no-link" href="tel:+14035223844" rel="nofollow">403-522-3844</a>
</li>
<li title="Send an Email" class="pb-1 hover:text-teal-600">
<noscript>info [at] mountaineerlodge.com</noscript>
<span id="sproutencodeemail-61ad21d3ea6271.44575281-1"><a onclick="ga('send','event',' Contact Info','Click - Email','[email protected]')" class="no-link" href="mailto:[email protected]">[email protected]</a></span>
<script type="text/javascript">
var sproutencodeemailRot13String = "<n bapyvpx=\"tn('fraq','rirag',' Pbagnpg Vasb','Pyvpx - Rznvy','[email protected]')\" pynff=\"ab-yvax\" uers='znvygb:[email protected]'>[email protected]</n>";
var sproutencodeemailRot13 = sproutencodeemailRot13String.replace(/[a-zA-Z]/g, function(c) {
return String.fromCharCode((c <= "Z" ? 90 : 122) >= (c = c.charCodeAt(0) + 13) ? c : c - 26);
});
document.getElementById("sproutencodeemail-61ad21d3ea6271.44575281-1").innerHTML =
sproutencodeemailRot13;
</script>
</li>
</ul>
<div class="mt-4">
<ul class="flex text-cyan gap-x-2">
<li>
<a onclick="ga('send','event','Social Page','Click - Facebook','Mountaineer Lodge')" href="https://www.facebook.com/MountaineerLodge" tabindex="5" title="Find us on Facebook">
<svg class="w-8 h-8 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path d="M448 80v352c0 26.5-21.5 48-48 48h-85.3V302.8h60.6l8.7-67.6h-69.3V192c0-19.6 5.4-32.9 33.5-32.9H384V98.7c-6.2-.8-27.4-2.7-52.2-2.7-51.6 0-87 31.5-87 89.4v49.9H184v67.6h60.9V480H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48z"></path>
</svg>
</a>
</li>
<li>
<a onclick="ga('send','event','Social Page','Click - Twitter','Mountaineer Lodge')" href="https://twitter.com/MountaineerLdge" tabindex="6" title="Find us on Twitter">
<svg class="w-8 h-8 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-48.9 158.8c.2 2.8.2 5.7.2 8.5 0 86.7-66 186.6-186.6 186.6-37.2 0-71.7-10.8-100.7-29.4 5.3.6 10.4.8 15.8.8 30.7 0 58.9-10.4 81.4-28-28.8-.6-53-19.5-61.3-45.5 10.1 1.5 19.2 1.5 29.6-1.2-30-6.1-52.5-32.5-52.5-64.4v-.8c8.7 4.9 18.9 7.9 29.6 8.3a65.447 65.447 0 01-29.2-54.6c0-12.2 3.2-23.4 8.9-33.1 32.3 39.8 80.8 65.8 135.2 68.6-9.3-44.5 24-80.6 64-80.6 18.9 0 35.9 7.9 47.9 20.7 14.8-2.8 29-8.3 41.6-15.8-4.9 15.2-15.2 28-28.8 36.1 13.2-1.4 26-5.1 37.8-10.2-8.9 13.1-20.1 24.7-32.9 34z"></path>
</svg>
</a>
</li>
<li>
<a onclick="ga('send','event','Social Page','Click - YouTube','Mountaineer Lodge')" href="https://www.youtube.com/channel/UCESK69fapCwh1ACAeVHYdmg" tabindex="7" title="See us on YouTube">
<svg class="w-8 h-8 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path d="M186.8 202.1l95.2 54.1-95.2 54.1V202.1zM448 80v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48zm-42 176.3s0-59.6-7.6-88.2c-4.2-15.8-16.5-28.2-32.2-32.4C337.9 128 224 128 224 128s-113.9 0-142.2 7.7c-15.7 4.2-28 16.6-32.2 32.4-7.6 28.5-7.6 88.2-7.6 88.2s0 59.6 7.6 88.2c4.2 15.8 16.5 27.7 32.2 31.9C110.1 384 224 384 224 384s113.9 0 142.2-7.7c15.7-4.2 28-16.1 32.2-31.9 7.6-28.5 7.6-88.1 7.6-88.1z"></path>
</svg>
</a>
</li>
<li>
<a onclick="ga('send','event','Social Page','Click - TripAdvisor','Mountaineer Lodge')" href="https://www.tripadvisor.ca/Hotel_Review-g154912-d184166-Reviews-Mountaineer_Lodge-Lake_Louise_Banff_National_Park_Alberta.html" tabindex="8" title="Find us on TripAdvisor">
<svg class="w-8 h-8 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path d="M166.4 280.521c0 13.236-10.73 23.966-23.966 23.966s-23.966-10.73-23.966-23.966 10.73-23.966 23.966-23.966 23.966 10.729 23.966 23.966zm264.962-23.956c-13.23 0-23.956 10.725-23.956 23.956 0 13.23 10.725 23.956 23.956 23.956 13.23 0 23.956-10.725 23.956-23.956-.001-13.231-10.726-23.956-23.956-23.956zm89.388 139.49c-62.667 49.104-153.276 38.109-202.379-24.559l-30.979 46.325-30.683-45.939c-48.277 60.39-135.622 71.891-197.885 26.055-64.058-47.158-77.759-137.316-30.601-201.374A186.762 186.762 0 000 139.416l90.286-.05a358.48 358.48 0 01197.065-54.03 350.382 350.382 0 01192.181 53.349l96.218.074a185.713 185.713 0 00-28.352 57.649c46.793 62.747 34.964 151.37-26.648 199.647zM259.366 281.761c-.007-63.557-51.535-115.075-115.092-115.068C80.717 166.7 29.2 218.228 29.206 281.785c.007 63.557 51.535 115.075 115.092 115.068 63.513-.075 114.984-51.539 115.068-115.052v-.04zm28.591-10.455c5.433-73.44 65.51-130.884 139.12-133.022a339.146 339.146 0 00-139.727-27.812 356.31 356.31 0 00-140.164 27.253c74.344 1.582 135.299 59.424 140.771 133.581zm251.706-28.767c-21.992-59.634-88.162-90.148-147.795-68.157-59.634 21.992-90.148 88.162-68.157 147.795v.032c22.038 59.607 88.198 90.091 147.827 68.113 59.615-22.004 90.113-88.162 68.125-147.783zm-326.039 37.975v.115c-.057 39.328-31.986 71.163-71.314 71.106-39.328-.057-71.163-31.986-71.106-71.314.057-39.328 31.986-71.163 71.314-71.106 39.259.116 71.042 31.94 71.106 71.199zm-24.512 0v-.084c-.051-25.784-20.994-46.645-46.778-46.594-25.784.051-46.645 20.994-46.594 46.777.051 25.784 20.994 46.645 46.777 46.594 25.726-.113 46.537-20.968 46.595-46.693zm313.423 0v.048c-.02 39.328-31.918 71.194-71.247 71.173s-71.194-31.918-71.173-71.247c.02-39.328 31.918-71.194 71.247-71.173 39.29.066 71.121 31.909 71.173 71.199zm-24.504-.008c-.009-25.784-20.918-46.679-46.702-46.67-25.784.009-46.679 20.918-46.67 46.702.009 25.784 20.918 46.678 46.702 46.67 25.765-.046 46.636-20.928 46.67-46.693v-.009z"></path>
</svg>
</a>
</li>
<li>
<a onclick="ga('send','event','Social Page','Click - Instagram','Mountaineer Lodge')" href="https://www.instagram.com/mountaineerlodge/" tabindex="10" title="Find us on Instagram">
<svg class="w-8 h-8 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"></path>
</svg>
</a>
</li>
</ul>
</div>
</div>
<div class="w-full pr-8 mb-12 sm:w-1/2 lg:w-1/3 sm:mb-6">
<h5 class="mb-2 text-xl text-teal-600 uppercase font-mtl-heading tracking-wide text-cyan">
Love Deals?
</h5>
<p class="pb-4 mb-2 text-sm text-gray-600">
Receive the latest info on deals, promos & more directly to your inbox.
</p>
<a class="px-4 py-2 mt-2 text-sm text-cyan border border-cyan hover:bg-cyan hover:text-white uppercase cursor-pointer" href="" target="_blank" rel="noopener">
Click here to sign up
</a>
</div>
<div class="w-full sm:w-full lg:w-1/3">
<h5 class="mb-2 text-xl text-teal-600 uppercase font-mtl-heading tracking-wide text-cyan">
You were made for adventure
</h5>
<p class="mb-4 text-sm text-gray-600">
Travel the Icefields Parkway to our sister hotel in Jasper, Mount Robson Inn.
</p>
<div class="flex items-center gap-x-4">
<a class="text-gray-800" href="https://icefieldsparkway.com/" title="The Icefields Parkway" target="_blank" rel="noopener">
<img src="/dist/images/ipw_logo.png" srcset="/dist/images/ipw_logo.png 1x, /dist/images/[email protected] 2x" alt="The Icefields Parkway logo">
</a>
<a class="text-gray-800" href="https://mountrobsoninn.com/" title="Mount Robson Inn, Jasper" target="_blank" rel="noopener">
<img src="/dist/images/mri_logo.png" srcset="/dist/images/mri_logo.png 1x, /dist/images/[email protected] 2x" alt="Mount Robson Inn logo">
</a>
</div>
</div>
</div>
</div>
</div>
<ul class="flex flex-wrap justify-center mx-2 py-4 gap-x-2 md:gap-x-6 text-gray-400">
<li><a href="">© 2021 Mountaineer Lodge</a></li>
<li><a href="">Sitemap</a></li>
<li><a href="">Privacy Policy</a></li>
<li><a href="">Credits</a></li>
</ul>
</footer>
</div>
<div>
<header class="relative z-10">
{{> @mtl-nav-titlebar }}
</header>
{{> @mtl-homepage-hero }}
{{render '@mtl-booking-widget-webrez' }}
<script src="{{ path '/components/raw/mtl-booking-widget-webrez/booking-widget-webrez.js' }}"></script>
{{render '@mtl-single-feature-split-left-light' }}
{{> @mtl-homepage-flipto-unlock-block }}
{{> @mtl-homepage-features-buttons }}
{{render '@mtl-homepage-feature-carousel' }}
{{render '@mtl-homepage-rooms' }}
{{render '@mtl-homepage-discover-carousel' }}
{{> @mtl-homepage-stories }}
{{> @mtl-cta-sister-property-promo }}
<footer>
{{> @mtl-footer }}
{{> @mtl-copyright }}
</footer>
</div>
/* No context defined. */