Skip to content

Instantly share code, notes, and snippets.

@Livin21
Created September 18, 2017 15:36
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save Livin21/5480aef32bd25dec8feb12fd9a6013bd to your computer and use it in GitHub Desktop.
<template>
<div class="hello">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<h1>{{ msg }}</h1>
<ul>
<li v-for="mem in members">
<p class="w3-card-2 w3-center">
<!-- profile image -->
<img class="round-profile-image" :src="mem.image"/><BR /><BR />
<!-- name -->
<span class="name">
{{ mem.name + ' ' + mem.surname }}
</span><BR />
<span class="secondary-text">
{{ mem.role + ' & ' + mem.title }} <BR />
{{ mem.city + ', ' + mem.country }}
</span>
<BR />
<span class="bio">
{{'\"' + mem.bio + '\"'}}
</span>
<BR /><BR />
<!-- links -->
<ul>
<li>
<a :href="mem.links.facebook.profile" target="_blank">
<img class="round-icon panin_animation_on_hover" :src="mem.links.facebook.icon"/>
</a>
</li>
<li>
<a :href="mem.links.github.profile" target="_blank">
<img class="round-icon panin_animation_on_hover" :src="mem.links.github.icon"/>
</a>
</li>
<li>
<a :href="mem.links.instagram.profile" target="_blank">
<img class="round-icon panin_animation_on_hover" :src="mem.links.instagram.icon"/>
</a>
</li>
<li>
<a :href="mem.links.twitter.profile" target="_blank">
<img class="round-icon panin_animation_on_hover" :src="mem.links.twitter.icon"/>
</a>
</li>
</ul>
<BR /><BR />
</p>
</li>
</ul>
</div>
</template>
<script>
import mems from '../assets/members.json'
export default {
name: 'founders',
data () {
return {
msg: 'Team',
members: mems
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
.name {
font-size: 15px;
font-weight: bold;
color: #333;
}
.secondary-text {
font-size: 12px;
color: #333;
}
.panin_animation_on_hover
{
display:inline-block;
border:0;
width:196px;
height:210px;
position: relative;
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1);
transition: all 200ms ease-in;
transform: scale(1);
}
.panin_animation_on_hover:hover
{
box-shadow: 0px 0px 150px #000000;
z-index: 2;
-webkit-transition: all 200ms ease-in;
-webkit-transform: scale(1.5);
-ms-transition: all 200ms ease-in;
-ms-transform: scale(1.5);
-moz-transition: all 200ms ease-in;
-moz-transform: scale(1.5);
transition: all 200ms ease-in;
transform: scale(1.5);
}
.bio {
font-size: 14px;
font-style: italic;
color: green;
padding: 10px;
}
.round-profile-image {
height: 250px;
width: 250px;
border-radius: 50%;
padding: 10px;
}
.round-icon {
height: 50px;
width: 50px;
border-radius: 50%;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment