<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 lang='en' 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/mtorosian/pen/awVMEj?depth=everything&order=popularity&page=26&q=route&show_forks=false" />
<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=Playfair+Display:700|Roboto'><link rel='stylesheet prefetch' href='https://npmcdn.com/flickity@2/dist/flickity.css'><link rel='stylesheet prefetch' href='//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css'>
<style class="cp-pen-styles">html {
box-sizing: border-box;
color: #645164;
font-family: "Roboto", "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
font-size: 100%;
font-weight: 400;
line-height: 1.5;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
background-color: #6f496e;
background: linear-gradient(to bottom, #6f496e 1%, #d77f6b 100%);
padding: 2.5em 0;
min-height: 100vh;
}
h1, h2 {
font-family: "Playfair Display", Georgia, Times, "Times New Roman";
font-weight: 700;
margin: 0 0 0.35em;
}
p {
font-size: 0.875em;
margin: 0 0 1.375em;
}
button {
background: none;
border: none;
-webkit-appearance: none;
}
.container {
box-shadow: 5px 9px 40px rgba(0, 0, 0, 0.3);
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.destination {
display: flex;
width: 100%;
min-height: 784px;
}
.destination-locale,
.destination-details {
padding: 2.5em 0 2.5em 3.3333333333%;
width: 47.5%;
}
.destination-locale {
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/25776/thumb-1920-595688.jpg");
background-position: top;
background-repeat: no-repeat;
background-size: cover;
}
.destination-locale header {
display: flex;
}
.destination-card {
padding-top: 0.5625em;
padding-right: 1.25em;
}
.destination-number,
.destination-country {
color: rgba(255, 255, 255, 0.4);
display: block;
}
.destination-number {
font-size: 2em;
font-weight: 700;
line-height: 1;
text-align: right;
}
.destination-country {
font-size: 0.75em;
line-height: 1;
text-transform: uppercase;
transform: rotate(-90deg);
transform-origin: bottom right;
}
.destination-title {
border-left: 1px solid rgba(255, 255, 255, 0.4);
padding-bottom: 0.5625em;
padding-left: 1.25em;
}
.destination-title h1 {
color: #ffffff;
line-height: 1;
font-size: 3.75em;
}
.destination-title .meta {
color: #e9dddd;
display: block;
font-size: 0.75em;
}
.destination-details {
background: #ffffff;
display: flex;
flex-direction: column;
position: relative;
}
.destination-details h2 {
color: #6f496e;
font-size: 1.875em;
}
.video {
border: 10px solid #ffffff;
border-radius: 50%;
display: block;
width: 110px;
height: 110px;
position: absolute;
bottom: 60px;
left: -55px;
}
.video img {
border-radius: 50%;
display: block;
width: 100%;
height: auto;
}
.video svg {
display: block;
width: 42px;
height: 42px;
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%);
margin-left: -21px;
}
.gutter {
display: flex;
flex-grow: 1;
flex-direction: column;
padding-right: 7.4074074074%;
padding-left: 3.75em;
position: relative;
}
.gutter:before {
content: '';
display: block;
width: 50px;
position: absolute;
top: 5px;
left: 0;
border-top: 1px solid #6f496e;
}
.nav {
background-color: #d77f6b;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 2.5em 0;
width: 5%;
}
.nav .toggle,
.nav .next {
display: block;
margin-left: auto;
margin-right: auto;
position: relative;
}
.nav .toggle svg,
.nav .next svg {
position: absolute;
top: 0;
left: 0;
}
.nav .toggle,
.nav .toggle svg {
width: 28px;
height: 20px;
}
.nav .next {
position: relative;
top: -8px;
}
.nav .next,
.nav .next svg {
width: 20px;
height: 13px;
}
.options {
display: flex;
justify-content: space-between;
list-style-type: none;
margin-top: auto;
margin-bottom: 0;
padding: 0;
}
.options .like,
.options .like svg {
width: 20px;
height: 18px;
}
.options .share {
margin-left: 0.625em;
}
.options .share,
.options .share svg {
width: 21px;
height: 18px;
}
.options .more {
color: #d77f6b;
font-size: 0.75em;
text-decoration: none;
text-transform: uppercase;
}
.options .more:before {
content: '';
border-bottom: 1px solid #d77f6b;
display: inline-block;
margin-right: 6px;
width: 40px;
}
.carousel {
margin-right: -11.2962962963%;
padding: 3.25em 0 1.875em 3.75em;
}
.carousel-cell {
background: #fafafa;
margin-left: 10px;
width: 35%;
}
.carousel-cell img {
display: block;
width: 100%;
height: auto;
}
/*
Rating Stars credit goes to: https://codepen.io/jamesbarnett/pen/vlpkh
*/
fieldset, label {
margin: 0;
padding: 0;
}
.rating {
border: none;
margin-right: auto;
margin-top: -1px;
position: relative;
z-index: 1;
}
.rating > input {
display: none;
}
.rating > label:before {
margin: 3px;
font-size: 1em;
font-family: FontAwesome;
display: inline-block;
content: "\f005";
}
.rating > .half:before {
content: "\f089";
position: absolute;
}
.rating > label {
color: #c5a7c3;
float: right;
}
/***** CSS Magic to Highlight Stars on Hover *****/
.rating > input:checked ~ label,
.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label {
color: #6f496e;
}
/* hover previous stars in list */
.rating > input:checked + label:hover,
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label,
.rating > input:checked ~ label:hover ~ label {
color: #6f496e;
}
</style></head><body>
<svg xmlns="http://www.w3.org/2000/svg" style="display:none;">
<defs>
<symbol viewBox="0 0 65.6 45.8" id="nav-trigger">
<path fill="#ffffff" d="M27.7 45.8H4.9c-2.7 0-4.9-2.2-4.9-4.9S2.2 36 4.9 36h22.8c2.7 0 4.9 2.2 4.9 4.9 0 2.6-2.2 4.9-4.9 4.9zM60.7 27.9H4.9C2.2 27.9 0 25.7 0 23c0-2.8 2.2-5 4.9-5h55.7c2.7 0 4.9 2.2 4.9 4.9.1 2.8-2.1 5-4.8 5zM60.7 9.9H4.9C2.2 9.9 0 7.7 0 4.9 0 2.2 2.2 0 4.9 0h55.7c2.7 0 4.9 2.2 4.9 4.9.1 2.8-2.1 5-4.8 5z"/>
</symbol>
<symbol viewBox="0 0 20.1 13.1" id="next">
<path fill="#ffffff" d="M18.6 8.1H1.4C.6 8.1 0 7.4 0 6.7v-.2C0 5.7.6 5 1.4 5h17.2c.8 0 1.4.7 1.4 1.5v.2c0 .7-.6 1.4-1.4 1.4z"/>
<path fill="#ffffff" d="M17.8 7.9L9.9 2.8c-.7-.4-.9-1.3-.4-2l.1-.2c.4-.7 1.3-.9 2-.4l7.9 5.1c.7.4.9 1.3.4 2l-.1.2c-.4.6-1.3.8-2 .4z"/>
<path fill="#ffffff" d="M11.5 12.9l7.9-5.1c.7-.4.9-1.3.4-2l-.1-.2c-.4-.7-1.3-.9-2-.4l-7.9 5.1c-.7.4-.9 1.3-.4 2l.1.2c.4.6 1.3.8 2 .4z"/>
</symbol>
<symbol viewBox="0 0 42 42" id="play">
<g>
<circle opacity="0.8" fill="#ffffff" cx="21" cy="21" r="21"/>
<path fill="#442d44" d="M26.1 21l-8 5V16"/>
</g>
</symbol>
<symbol viewBox="0 0 20 18" id="heart">
<path fill="#442d44" d="M14.4 0C12.6 0 11 .9 10 2.3 9 .9 7.4 0 5.6 0 2.5 0 0 2.5 0 5.6 0 10 10 18 10 18s10-8 10-12.4C20 2.5 17.5 0 14.4 0z"/>
</symbol>
<symbol viewBox="0 0 384 320.1" id="share">
<path fill="#442d44" d="M288 281.9H38.4V102.2h57.5S110 82.5 138.6 64H19.2C8.6 64 0 72.5 0 83.1V301c0 10.5 8.6 19.1 19.2 19.1h288c10.6 0 19.2-8.5 19.2-19.1V192L288 223.4v58.5zM256 128v63.9l128-95.5L256 0v59.7C101.2 59.7 96 224 96 224c43.8-71.5 76-96 160-96z"/>
</symbol>
</defs>
</svg>
<div class="container">
<article class="destination">
<div class="destination-locale">
<header>
<div class="destination-card">
<span class="destination-number">02</span>
<span class="destination-country">Italy</span>
</div>
<div class="destination-title">
<h1>Tre Cime di Lavaredo</h1>
<span class="meta">
Elevation: 2999 M • First Recorded Ascent: 1869
</span>
</div>
</header>
</div>
<div class="destination-details">
<fieldset class="rating">
<input type="radio" id="star5" name="rating" value="5" /><label class = "full" for="star5" title="Awesome - 5 stars"></label>
<input type="radio" id="star4half" name="rating" value="4 and a half" /><label class="half" for="star4half" title="Pretty good - 4.5 stars"></label>
<input type="radio" id="star4" name="rating" value="4" /><label class = "full" for="star4" title="Pretty good - 4 stars"></label>
<input type="radio" id="star3half" name="rating" value="3 and a half" /><label class="half" for="star3half" title="Meh - 3.5 stars"></label>
<input type="radio" id="star3" name="rating" value="3" /><label class = "full" for="star3" title="Meh - 3 stars"></label>
<input type="radio" id="star2half" name="rating" value="2 and a half" /><label class="half" for="star2half" title="Kinda bad - 2.5 stars"></label>
<input type="radio" id="star2" name="rating" value="2" /><label class = "full" for="star2" title="Kinda bad - 2 stars"></label>
<input type="radio" id="star1half" name="rating" value="1 and a half" /><label class="half" for="star1half" title="Meh - 1.5 stars"></label>
<input type="radio" id="star1" name="rating" value="1" /><label class = "full" for="star1" title="Sucks big time - 1 star"></label>
<input type="radio" id="starhalf" name="rating" value="half" /><label class="half" for="starhalf" title="Sucks big time - 0.5 stars"></label>
</fieldset>
<div class="carousel">
<div class="carousel-cell"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/25776/1.jpg" alt=""></div>
<div class="carousel-cell"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/25776/2.jpg" alt=""></div>
<div class="carousel-cell"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/25776/3.jpg" alt=""></div>
<div class="carousel-cell"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/25776/4.jpg" alt=""></div>
<div class="carousel-cell"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/25776/5.jpg" alt=""></div>
</div>
<h2>Tourism</h2>
<div class="gutter">
<p>Numerous routes lead from the surrounding communities to and around the peaks. The most common route is from Paternkofel/Monte Paterno to the alpine hut Auronzo at 2,333 m (7,654 ft), over Paternsattel (Patern Pass) to the alpine hut Dreizinnenhütte/Locatelli at 2,405 m (7,890 ft), and then to the peaks. There are a number of other routes as well. Since the front line between Italy and Austria during World War I ran through these mountains, there are a number of fortifications, man-made caves, and commemorative plaques in the area. Nearby communities include Auronzo di Cadore (in the province of Belluno, region of Veneto), Toblach/Dobbiaco, Sexten/Sesto, and the Puster Valley (in the province of Bolzano, region of Trentino-Alto Adige/Südtirol). The area has also staged many finishes in Giro d'Italia.</p>
<ul class="options">
<li><a href="#" class="more">View All Routes</a></li>
<li>
<a href="#" class="like"><svg title="Like"><use xlink:href="#heart"></use></svg></a>
<a href="#" class="share"><svg title="share"><use xlink:href="#share"></use></svg></a>
</li>
</ul>
</div>
<a href="#" class="video"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/25776/tre-cime-video.jpg" alt=""> <svg title="Play video"><use xlink:href="#play"></use></a>
</div>
<div class="nav nav--nested">
<button class="toggle"><svg title="Toggle navigation"><use xlink:href="#nav-trigger"></use></svg></button>
<button class="next"><svg title="Next"><use xlink:href="#next"></use></svg></button>
</div>
</article>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script><script src='https://npmcdn.com/flickity@2/dist/flickity.pkgd.js'></script>
<script >/* Design Credit to: https://dribbble.com/shots/3553133-Mountains/attachments/790356 */
$(document).ready(function() {
$('.carousel').flickity({
wrapAround: false,
freeScroll: true,
contain: true,
prevNextButtons: false,
pageDots: false
});
})
//# sourceURL=pen.js
</script>
</body></html>
