<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/klesht/pen/VeaRZR?limit=all&page=31&q=comment" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Lato:400,300'>
<style class="cp-pen-styles">/* =================================
Base Styles
==================================== */
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
font-family: 'Lato', sans-serif;
color: #3a3a3a;
}
img {
max-width: 100%;
height: auto;
vertical-align: bottom;
}
a {
text-decoration: none;
}
.container {
margin: 0 auto;
width: 90%;
max-width: 1170px;
}
.button {
background: none;
height: 50px;
border-radius: 3px;
letter-spacing: 1px;
-webkit-transition: background 0.4s;
-moz-transition: background 0.4s;
transition: background 0.4s;
}
/* ---- Header ---- */
#main-header {
background: #fff;
padding: 0.85em 0;
}
#main-header .container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
#main-header .logo, #main-header nav a {
padding: 10px;
}
@media (min-width: 500px) {
#main-header .logo, #main-header nav a {
padding: 10px 15px;
}
}
#main-header .logo {
font-size: 1.35em;
color: #28415E;
}
#main-header nav a {
font-size: 0.65em;
text-transform: uppercase;
color: #517fb5;
}
@media (min-width: 500px) {
#main-header nav a {
font-size: 0.95em;
}
}
/* ---- Intro ---- */
#intro {
background: #EEEBE4;
display: flex;
justify-content: center;
align-items: center;
padding: 4em 0;
}
#intro .cta {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #28415E;
}
#intro .cta .splash {
display: none;
}
@media (min-width: 500px) {
#intro .cta .splash {
display: block;
width: 200px;
}
}
#intro .cta img {
margin-bottom: 1em;
}
#intro .cta h1, #intro .cta p, #intro .cta .button {
text-align: center;
}
#intro .cta h1 {
margin: 0;
}
#intro .cta p {
margin-bottom: 1.5em;
}
#intro .cta .button {
display: flex;
align-items: center;
padding: 10px 30px;
box-shadow: inset 0 0 0 2px #B79D55;
color: #28415E;
}
#intro .cta .button:hover, #intro .cta .button:focus {
background: #B79D55;
color: #fff;
}
/* ---- Tours ---- */
#tours {
padding-top: 4em;
}
#tours h2 {
margin: 0;
text-align: center;
}
#tours form {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-around;
margin: 0 auto;
padding: 4em 0;
max-width: 600px;
}
@media (min-width: 500px) {
#tours form {
flex-direction: row;
}
}
#tours form input, #tours form button {
margin: 0 1em;
padding: 10px;
height: 50px;
outline: 0;
}
#tours form input {
background-color: #fff;
margin-bottom: 1em;
border: 1px solid #ddd;
border-radius: 3px;
color: #494f4f;
-webkit-transition: border-color 0.4s;
-moz-transition: border-color 0.4s;
transition: border-color 0.4s;
}
#tours form input:focus {
border-color: #879090;
}
@media (min-width: 500px) {
#tours form input {
flex: 3;
margin-bottom: 0;
}
}
#tours form .button {
border: 0;
box-shadow: inset 0 0 0 2px #879090;
color: #494f4f;
}
#tours form .button:hover, #tours form .button:focus {
background: #879090;
color: #fff;
}
@media (min-width: 500px) {
#tours form .button {
flex: 100px;
}
}
#tours ul, #tours ul li, #tours ul li div {
display: flex;
}
#tours ul {
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
}
#tours ul li {
background: rgba(0, 0, 0, 0.35);
position: relative;
flex-direction: column;
cursor: pointer;
-webkit-transition: background 0.4s;
-moz-transition: background 0.4s;
transition: background 0.4s;
}
#tours ul li:hover {
background: transparent;
}
@media (min-width: 500px) {
#tours ul li {
flex: 50%;
}
}
@media (min-width: 800px) {
#tours ul li {
flex: 25%;
}
}
#tours ul li div {
position: absolute;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 1em;
width: 100%;
height: 100%;
text-align: center;
color: #fff;
}
#tours ul li div h3, #tours ul li div h4 {
margin: 0;
}
#tours ul li div h3 {
margin-bottom: 0.35em;
font-size: 1em;
font-weight: 400;
letter-spacing: 2px;
text-transform: uppercase;
}
#tours ul li div h4 {
font-weight: 300;
letter-spacing: 1px;
}
#tours ul li img {
position: relative;
z-index: -1;
}
/* ---- Pricing ---- */
#pricing {
display: flex;
flex-direction: column;
padding: 4em 0;
}
#pricing article {
background: #edf4f7;
display: flex;
flex-direction: column;
flex: 1;
margin: 0 0.85em 1em;
padding: 1em;
border-radius: 3px;
}
#pricing article:last-child {
margin-bottom: 0;
}
#pricing article h3 {
color: #28415E;
}
#pricing article p {
margin: 0 0 1em;
font-size: 0.95em;
line-height: 24px;
font-weight: 400;
}
#pricing article p:last-of-type {
margin-bottom: 3em;
}
#pricing article .button {
display: flex;
align-items: center;
align-self: center;
margin-top: auto;
padding: 10px 30px;
box-shadow: inset 0 0 0 2px #375a82;
color: #28415E;
}
#pricing article .button:hover, #pricing article .button:focus {
background: #375a82;
color: #fff;
}
@media (min-width: 800px) {
#pricing {
flex-direction: row;
}
#pricing article {
margin-bottom: 0;
}
}
/* ---- Footer ---- */
#main-footer {
background: #d9e4ea;
flex: 1;
padding: 2em 0;
text-align: center;
}
</style></head><body>
<header id='main-header'>
<div class='container'>
<a class='logo' href='#'>Guided Tours</a>
<nav>
<a href='#'>Tours</a>
<a href='#'>Pricing</a>
</nav>
</div>
</header>
<div id='intro'>
<div class='cta container'>
<img alt='Splash' class='splash' src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/adventure-splash.svg'>
<h1>Explore and Discover</h1>
<p>Delectus illum corporis laundantium illo repudiandae et doloemque.</p>
<a class='button' href='#'>
<span>Start your adventure</span>
</a>
</div>
</div>
<div id='tours'>
<div class='container'>
<h2>Where would you like to go?</h2>
<form action='#'>
<input id='location' placeholder='Location' type='text'>
<button class='button' type='submit'>Get Moving</button>
</form>
</div>
<ul>
<li>
<div>
<h3>Denali</h3>
<h4>Alaska</h4>
</div>
<!-- Image by Maureen [CC-BY-2.0 (http://creativecommons.org/licenses/by/2.0)], via Flickr, https://www.flickr.com/photos/amerune/9374725724 -->
<img alt='Denali, Alaska' src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/denali_alaska.jpg'>
</li>
<li>
<div>
<h3>Mirror Lake</h3>
<h4>California</h4>
</div>
<!-- Image By chensiyuan (chensiyuan) [GFDL (http://www.gnu.org/copyleft/fdl.html) or CC BY-SA 4.0-3.0-2.5-2.0-1.0 (http://creativecommons.org/licenses/by-sa/4.0-3.0-2.5-2.0-1.0)], via Wikimedia Commons, https://upload.wikimedia.org/wikipedia/commons/7/70/Yosemite_national_park_mirror_lake_2010u.JPG -->
<img alt='Mirror Lake, California' src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/mirror-lake_california.jpg'>
</li>
<li>
<div>
<h3>Antelope Canyon</h3>
<h4>Arizona</h4>
</div>
<!-- Image By Moyan Brenn [CC-BY-2.0 (http://creativecommons.org/licenses/by/2.0)], via Flickr, https://www.flickr.com/photos/aigle_dore/5951674773 -->
<img alt='Antelope Canyon, Arizona' src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/antelope-canyon_arizona.jpg'>
</li>
<li>
<div>
<h3>Key West</h3>
<h4>Florida</h4>
</div>
<!-- Image By Ricymar Photography [CC-BY-2.0 (http://creativecommons.org/licenses/by/2.0)], via Flickr, https://www.flickr.com/photos/ricardo_mangual/5749480168 -->
<img alt='Key West, Florida' src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/key-west_florida.jpg'>
</li>
<li>
<div>
<h3>Saint Mary Lake</h3>
<h4>Montana</h4>
</div>
<!-- Image By Ricymar Photography [CC-BY-2.0 (http://creativecommons.org/licenses/by/2.0)], via Flickr, https://www.flickr.com/photos/ricardo_mangual/5749480168 -->
<img alt='Saint Mary Lake, Montana' src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/saint-mary-lake_montana.jpg'>
</li>
<li>
<div>
<h3>Moab</h3>
<h4>Utah</h4>
</div>
<!-- Image By Gridge [GFDL (http://www.gnu.org/copyleft/fdl.html) or CC BY-SA 4.0-3.0-2.5-2.0-1.0 (http://creativecommons.org/licenses/by-sa/4.0-3.0-2.5-2.0-1.0)], via Wikimedia Commons, https://upload.wikimedia.org/wikipedia/commons/0/06/Delicatearch1.jpg -->
<img alt='Moab, Utah' src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/moab_utah.jpg'>
</li>
<li>
<div>
<h3>Waipio Valley</h3>
<h4>Hawaii</h4>
</div>
<!-- Image By Paul Bica [CC-BY-2.0 (http://creativecommons.org/licenses/by/2.0)], via Flickr, https://www.flickr.com/photos/dexxus/5652914929 -->
<img alt='Waipio Valley, Hawaii' src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/waipio-valley_hawaii.jpg'>
</li>
<li>
<div>
<h3>Carlsbad Caverns</h3>
<h4>New Mexico</h4>
</div>
<!-- Image By Guinther [GFDL (http://www.gnu.org/copyleft/fdl.html) or CC-BY-SA-3.0 (http://creativecommons.org/licenses/by-sa/3.0/)], via Wikimedia Commons, https://upload.wikimedia.org/wikipedia/commons/d/dd/Carlsbad_Interior_Formations.jpg -->
<img alt='Carlsbad Caverns, New Mexico' src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/203277/carlsbad-caverns_new-mexico.jpg'>
</li>
</ul>
</div>
<div class='container' id='pricing'>
<article>
<h3>Tier 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius adipisci, sed libero. Iste asperiores suscipit, consequatur debitis animi impedit numquam facilis iusto porro labore dolorem, maxime magni incidunt. Delectus, est!</p>
<p>Possimus deserunt nisi perferendis, consequuntur odio et aperiam, est, dicta dolor itaque sunt laborum, magni qui optio illum dolore laudantium similique harum. Eveniet quis, libero eligendi delectus repellendus repudiandae ipsum.</p>
<a class='button' href='#'>
<span>Learn More</span>
</a>
</article>
<article>
<h3>Tier 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius adipisci, sed libero. Iste asperiores suscipit, consequatur debitis animi impedit numquam facilis iusto porro labore dolorem, maxime magni incidunt. Delectus, est!</p>
<p>Possimus deserunt nisi perferendis, consequuntur odio et aperiam, est, dicta dolor itaque sunt laborum, magni qui optio illum dolore laudantium similique harum. Eveniet quis, libero eligendi delectus repellendus repudiandae ipsum.</p>
<a class='button' href='#'>
<span>Learn More</span>
</a>
</article>
<article>
<h3>Tier 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius adipisci, sed libero. Iste asperiores suscipit, consequatur debitis animi impedit numquam facilis iusto porro labore dolorem, maxime magni incidunt. Delectus, est!</p>
<p>Possimus deserunt nisi perferendis, consequuntur odio et aperiam, est, dicta dolor itaque sunt laborum, magni qui optio illum dolore laudantium similique harum. Eveniet quis, libero eligendi delectus repellendus repudiandae ipsum.</p>
<a class='button' href='#'>
<span>Learn More</span>
</a>
</article>
</div>
<div id='main-footer'>
<p>© 2016</p>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script >$('.cta a').click(function() {
$('html,body').animate({
scrollTop: $('#tours').offset().top
}, 500);
return false;
});
$('#tours li').on('click', function() {
$('#location').val($('img', this).attr('alt'));
});
//# sourceURL=pen.js
</script>
</body></html>
