<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/Sicontis/pen/LbvGWZ?depth=everything&order=popularity&page=39&q=vue+js&show_forks=false" />
<style class="cp-pen-styles">@import url('https://fonts.googleapis.com/css?family=Cormorant+Garamond');
body {
font-family: "Helvetica Neue", sans-serif;
display: flex;
justify-content: center;
background-color: #161616;
}
h2, p {
color: rgba(255, 255, 255, .8);
}
h2 {
font-weight: 200;
}
#app {
width: 80vw;
}
header {
padding: 50px 0 20px 0;
display: flex;
flex-direction: column;
align-items: center;
}
header h1 {
width: 480px;
margin: 0;
text-align: center;
color: #CFB195;
font-weight: 100;
font-size: 4em;
letter-spacing: 10px;
font-family: 'Cormorant Garamond', serif;
border: 2px solid #CFB195;
border-radius: 5px;
}
header .subtitle {
color: #CFB195;
font-family: 'Cormorant Garamond', serif;
letter-spacing: 3px;
font-size: 14px;
display: flex;
align-items: center;
background-color: #191515;
padding: 5px;
margin-top: -10px;
}
header .subtitle img {
height: 12px;
padding: 0 10px;
}
section {
padding: 0 0 40px 0;
display: flex;
justify-content: center;
}
section h2 {
color: #CFB195;
font-family: 'Cormorant Garamond', serif;
font-size: 2em;
letter-spacing: 8px;
}
.wrapper {
display: flex;
height: 100vh;
border: 5px solid #CFB195;
}
.wrapper a {
position: relative;
flex: 1;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transition: flex 1s;
}
.wrapper a:hover {
flex: 3;
}
.wrapper .overlay-outer {
display: flex;
justify-content: center;
align-items: center;
padding: 0 10px;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
transition: background-color: .4s;
}
.wrapper a:hover .overlay-outer {
background-color: rgba(0, 0, 0, .5);
}
.wrapper .overlay-inner * {
visibility: hidden;
opacity: 0;
transform-style: preserve-3d;
}
.wrapper .overlay-outer h2 {
transform: translate3d(0, -60px, 0);
}
.wrapper .overlay-outer div.info {
transform: translate3d(0, 60px, 0);
}
.wrapper a:hover .overlay-inner * {
opacity: 1;
visibility: visible;
transform: none;
transition: all .5s .5s;
}
.wrapper .info {
font-size: 14px;
line-height: 1.7em;
padding: 0 5px;
}
.wrapper .info strong {
font-size: 16px;
}
.wrapper .character {
background-color: #000000;
}
@media screen and (max-width: 700px) {
.wrapper {
flex-direction: column;
}
.wrapper a:hover {
flex: 1;
}
.wrapper a:hover .overlay-outer {
background-color: transparent;
}
.wrapper .overlay-outer h2,
.wrapper .overlay-outer div.info {
opacity: 1;
visibility: visible;
transform: none;
}
}
footer {
padding: 30px 0;
display: flex;
justify-content: center;
}
footer h4 {
font-size: 14px;
color: rgba(255, 255, 255, .8);
font-weight: normal;
text-align: center;
line-height: 1.8em;
}
footer h4 a {
text-decoration: none;
color: #CFB195;
}</style></head><body>
<div id="app">
<header>
<h1>ROGUE ONE</h1>
<div class="subtitle">
<div>A</div>
<img src="http://fontmeme.com/permalink/161222/01d7b8fac54fa48e3f2694ca834bf429.png" />
<div>STORY</div>
</div>
</header>
<section>
<h2>THE REBELS</h2>
</section>
<div class="wrapper">
<a href="" v-for="item in characters" class="character" :style="{ 'background-image': 'url(' + item.image + ')' }">
<div class="overlay-outer">
<div class="overlay-inner">
<h2>{{ item.name }}</h2>
<div class="info">
<p>Played by: <strong>{{ item.actor }}</strong></p>
<p>{{ item.bio }}</p>
</div>
</div>
</div>
</a>
</div>
<footer>
<h4>All images and info is sourced from <a href="http://www.starwars.com">Star Wars.com</a><br>
<a href="https://webdesign.tutsplus.com/tutorials/how-to-build-a-striped-layout-with-flexbox--cms-27272">Slider navigation</a> tutorial by <strong>George Martsoukos</strong></h4>
</footer>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://unpkg.com/vue@2.1.6/dist/vue.js'></script>
<script >new Vue({
// ELEMENT
el: '#app',
// DATA
data: {
characters: [
{
name: 'Jyn Erso',
actor: 'Felicity Jones',
bio: 'Putting behind a checkered past by lending her skills to a greater cause, Jyn Erso is impetuous, defiant, and eager to bring the battle to the Empire. Used to operating alone, she finds higher purpose by taking on a desperate mission for the Rebel Alliance.',
image: 'http://img.lum.dolimg.com/v1/images/jyn-erso_ccf70c46.jpeg?region=349%2C0%2C1165%2C654&width=768'
},
{
name: 'Cassian Andor',
actor: 'Diego Luna',
bio: 'An accomplished Alliance Intelligence officer with combat field experience, Captain Cassian Andor commands respect from his Rebel troops with his ability to keep a cool head under fire and complete his missions with minimal resources.',
image: 'http://img.lum.dolimg.com/v1/images/cassian-andor-main_216e7233.jpeg?region=0%2C0%2C1560%2C878&width=768'
},
{
name: 'K-2S0',
actor: 'Alan Tudyk',
bio: 'A reprogrammed Imperial security droid now loyal to the Alliance, K-2SO is an alarming sight standing within a secret Rebel base. The pragmatic droid is an effective insertion agent, as he can blend in perfectly at Imperial installations and outposts.',
image: 'http://img.lum.dolimg.com/v1/images/k-2s0-main-b_73a8fed8.jpeg?region=0%2C0%2C1560%2C878&width=768'
},
{
name: 'Chirrut Imwe',
actor: 'Donnie Yen',
bio: 'Deeply spiritual, Chirrut Îmwe believes all living things are connected through the Force. His sightless eyes do not prevent him from being a highly skilled warrior. Though he lacks Force abilities, this warrior monk has rigorously honed his body through intense physical and mental discipline.',
image: 'http://img.lum.dolimg.com/v1/images/chirrut-imwe_5ed7457a.jpeg?region=395%2C0%2C1165%2C654&width=768'
},
{
name: 'Baze Malbus',
actor: 'Jiang Wen',
bio: 'The harsh reality of his Imperial-occupied home world has hardened Baze Malbus into a pragmatic soldier and a crack shot with his heavy repeater cannon. Baze has a bravado that provides a marked contrast to the spiritual centeredness of his best friend and moral compass, Chirrut Îmwe.',
image: 'http://img.lum.dolimg.com/v1/images/baze-malbus_467fe1ea.jpeg?region=199%2C0%2C1163%2C654&width=768'
},
{
name: 'Bodhi Rook',
actor: 'Riz Ahmed',
bio: 'A former Imperial pilot, Bodhi has strong piloting and technical skills that he will put to use for the Rebellion. Ever practical, but highly anxious, Bodhi must gather his courage to bring the battle to the Empire.',
image: 'http://img.lum.dolimg.com/v1/images/bodhi-rook_1d3c1b58.jpeg?region=0%2C160%2C1560%2C880&width=768'
}
]
}
});
//# sourceURL=pen.js
</script>
</body></html>
