Landing

Complete landing pages with all the bells and whistles.


<div class="has-bg-grey-100 p-x-27 p-y-30">
<div class="box bg-size-cover" style="height: 446px;
background-image: url('/images/play/hero/hero-1.png');
background-position: bottom;
box-shadow:inset 0 0 0 2000px rgba(0, 0, 0, .4);">
<div class="flex justify-content-center">
<img class="m-r-20" style="height:30px;" src="/images/play/hero/logo.png" alt="" />
<div class="tabs is-secondary is-white" style="min-width: auto;">
<ul>
<li class="is-active"><a class="is-white">Visit</a></li>
<li><a class="is-white">Activities</a></li>
<li><a class="is-white">Learn</a></li>
<li><a class="is-white">Donate</a></li>
</ul>
</div>
</div>
<div class="flex justify-content-center align-content-center p-t-43 flex-column">
<h5 class="is-white" style="text-align: center"> FOR THE ADVENTURERS </h5>
<h1 class="is-white m-t-10" style="text-align: center"> More than a mountain. Are you ready? </h1>
<p class="is-white m-t-30" style="text-align: center"> Denali is six million acres of wild land, bisected by one ribbon of road culminating in North America's tallest peak. </p>
<div class="flex justify-content-center m-t-30">
<button class="button is-solid m-r-10">Book your trip</button>
<button class="button is-outline is-inverse m-r-10">Learn more</button>
</div>
</div>
</div>
<div>
<div class="has-bg-white p-0" >
<div class="flex tablet-down-flex-column p-x-28 p-y-60">
<div class=" p-r-46 p-b-10" >
<span class="chips is-small has-bg-brand-500 is-bold is-white m-t-22">Essentials</span>
<h2 class="m-t-18">Eating & Sleeping</h2>
<p class="m-t-9">Located next to the Denali Visitor Center, the Morino Grill is the only sit-down restaurant in the park. Snacks can be purchased at the Wilderness Access Center.</p>
</div>
<div class="p-r-46 p-b-10" >
<span class="chips is-small has-bg-brand-500 is-bold is-white m-t-22">Planning</span>
<h2 class="m-t-18">Places to go</h2>
<p class="m-t-9">6 million acres of wild lands. A single, 92-mile long road traveling into the park. The places to go for adventure, solitude and recreation are nearly endless.</p>
</div>
<div class="p-b-10">
<span class="chips is-small has-bg-brand-500 is-bold is-white m-t-22">Activities</span>
<h2 class="m-t-18">Mountaineering</h2>
<p class="m-t-9">Ready to test your mountaineering and wilderness skills on North America's highest peak? Or maybe you are eyeing the vertical rock and ice walls of the Ruth Gorge. </p>
</div>
</div>
</div>
<hr class="m-0"/>
<div class="has-bg-grey-100">
<div class="flex justify-content-center align-content-center p-t-50 flex-column">
<div class="box has-bg-brand-100 flex align-items-center justify-content-center m-0 m-auto br-6 h-6 w-6"><i class="d-icon d-book is-default"></i></div>
<h1 class="m-t-22" style="text-align: center">Writer’s Corner </h1>
<p class="m-t-16 m-b-20" style="text-align: center"> From nuggets on Denali’s storied history to present day climbing tips and trips check out our writer’s corner article for interesting reads.</p>
</div>
<div class="row">
<div class="col-1-2 sm-col-1-1 xs-col-1-1 p-10">
<div class="box">
<img src="/images/play/content-cards/2-column-cards/blog-2-1.png" alt="">
<p class="m-t-20"> PARK HISTORY </p>
<h4 class="m-t-6" style="text-overflow: ellipsis;"> “Rigging” History: Denali’s Origin Story as told by climbers</h4>
<footer class="m-t-20">
<div class="flex m-t-20">
<img class="w-7 h-7 m-r-10 br-circle" src="/images/play/download.jpeg" alt="" />
<div>
<p>By <span class="link"> George Vancouver </span> </p>
<p> Aug 20, 2021 </p>
</div>
</div>
</footer>
</div>
</div>
<div class="col-1-2 sm-col-1-1 xs-col-1-1 p-10">
<div class="box">
<img src="/images/play/content-cards/2-column-cards/blog-2-2.png" alt="">
<p class="m-t-20"> PARK HISTORY </p>
<h4 class="m-t-6" style="text-overflow: ellipsis;"> Back in Time: A Watch and an Early Denali Resident</h4>
<footer class="m-t-20">
<div class="flex m-t-20">
<img class="w-7 h-7 m-r-10 br-circle " src="/images/play/download.jpeg" alt="" />
<div>
<p>By <span class="link"> George Vancouver </span> </p>
<p> Aug 20, 2021 </p>
</div>
</div>
</footer>
</div>
</div>
</div>
</div>
</div>
<div class="box p-x-90 p-y-40 m-0 m-auto has-bg-brand-500 m-t-40 br-14">
<h4 class="is-white m-b-10" style="opacity: .8;">FOR THE ADVENTURERS</h4>
<div class="row">
<h1 class="col-2-3 is-white">
More than a mountain.
Are you ready?
</h1>
<div>
<button class="button is-solid m-r-10">Book your trip</button>
<button class="button is-outline is-inverse m-r-10">Learn more</button>
</div>
</div>
</div>
</div>