<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/sdras/pen/owaWwd?depth=everything&order=popularity&page=43&q=vue&show_forks=false" />
<link href="https://fonts.googleapis.com/css?family=NTR" rel="stylesheet">
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
<style class="cp-pen-styles">body {
width: 100vw;
height: 100vh;
font-family: 'NTR', sans-serif;
background: #eee;
}
h1 {
text-align: center;
}
.location-contain {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.place {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
width: 280px;
height: 320px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
background: white;
border: 1px solid #ddd;
padding: 20px 20px;
margin: 10px;
}
.place h2 {
margin: 0;
text-align: center;
}
.place img {
margin: 10px;
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
}
</style></head><body>
<div id="app">
<h1>Your Upcoming Destinations</h2>
<div class="location-contain">
<div class="locations" v-for="location in locations">
<place :img="location.img" :desc="location.desc">
<h2>{{ location.name }}</h2>
</place>
</div>
</div>
</div>
<script type="text/x-template" id="place">
<div class="place">
<img :src="img" width="235" height="300"/>
<slot></slot>
<p>{{ desc }}</p>
</div>
</script>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js'></script>
<script >'use strict';
Vue.component("place", {
props: ['img', 'desc'],
template: "#place"
});
new Vue({
el: "#app",
data: function data() {
return {
locations: [{
name: 'moscow',
img: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/moscow.svg',
desc: 'Moscow is the capital and most populous city of Russia, with 13.2 million residents within the city limits and 17.8 million within the urban area. Moscow has the status of a Russian federal city.'
}, {
name: 'paris',
img: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/paris1.svg',
desc: 'Paris is the capital and most populous city of France. By the 17th century, Paris was one of Europe\'s major centres of finance, commerce, fashion, science, and the arts, and it retains that position still today.'
}, {
name: 'rome',
img: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/rome.svg',
desc: 'Rome\'s history spans more than 2,500 years. While Roman mythology dates the founding of Rome at around 753 BC, the site has been inhabited for much longer, making it one of the oldest continuously occupied sites in Europe.'
}, {
name: 'paris',
img: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/paris2.svg',
desc: 'Paris is the capital and most populous city of France. By the 17th century, Paris was one of Europe\'s major centres of finance, commerce, fashion, science, and the arts, and it retains that position still today.'
}]
};
}
});
//# sourceURL=pen.js
</script>
</body></html>
