Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
[DGMD S-15] people page card

[DGMD S-15] people page card

Change this card to include a picture and information about yourself. When you are done, export it as a gist to your Github account and we will incorporate your card into the class website at dgmds15.github.io/people

Forked from shaunalynn's Pen [DGMD S-15] people page card.

A Pen by Sam Hagman on CodePen.

License.

<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css">
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
</head>
<!-- Replace Kanye's name with your own, and include your own information and links in the HTML below. You can change the icons by using Font Awesome icons here: http://fortawesome.github.io/Font-Awesome/ -->
<body id="people">
<div id='samhagman' class='person flip-container'>
<div class='flipper'>
<div class='front card'>
<h2 id='my_title'>Sam Hagman</h2>
<div class='headshot'></div>
<i class="fa fa-undo flip"></i>
</div>
<div class='back card'>
<ul>
<li><i class="fa fa-home"></i><a href='http://www.samhagman.com'>samhagman.com</a>
</li>
<li><i class="fa fa-github"></i><a href='https://github.com/samhagman'>samhagman</a>
</li>
<li><i class="fa fa-twitter"></i><a href='https://twitter.com/hagmansam'>@samhagman</a>
</li>
</ul>
<i class="fa fa-undo flip"></i>
</div>
</div>
</div>
</body>
</html>
// Add your Javascript effects here.
window.addEventListener('load', function() {
var myCard = document.querySelector('#samhagman');
var myHeadshot = document.querySelector('#samhagman .headshot');
myHeadshot.addEventListener('click', function() {
myCard.classList.toggle('flipped');
});
var undoButton = document.querySelector('#samhagman .fa-undo')
undoButton.onmouseover = function() {
undoButton.style.left = (Math.random() * 200) + 'px';
}
undoButton.onclick = function() {
alert('You clicked it! You got some fast fingers.');
}
var flipButtons = Array.prototype.slice.call(myCard.querySelectorAll('i.flip'));
flipButtons.forEach(function(button) {
button.addEventListener('click', function() {
myCard.classList.toggle('flipped');
});
});
document.getElementById("blackout").style.backgroundImage = 'url(http://stream1.gifsoup.com/view4/3555064/rick-roll-d-o.gif)';
});
/* Kanye West -- Replace with your name/ID and add CSS effects for your card here */
#samhagman .headshot {
background-image: url(https://pbs.twimg.com/profile_images/583452656540065793/7AFuFnyl.jpg);
}
#samhagman #my_title {
text-transform: none;
font-family: 'Roboto';
font-variant: normal;
font-size: 1.1em;
color: #000;
margin-top: 0.4em;
}
#samhagman .headshot {
cursor: pointer;
}
#samhagman .front {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#samhagman .front:hover {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
}
/*********************************
***Don't change below this line*** **********************************/
.person {
width: calc((70ex - 2*1em)/3);
height: calc((70ex - 2*1em)/3);
margin-right: 1em;
margin-bottom: 1em;
float: left;
}
.person:first-child,
.person:nth-child(3n+1) {
margin-left: 0;
}
.person:nth-child(3n) {
margin-right: 0;
}
#people h2 {
text-align: center;
text-transform: lowercase;
font-family: 'Inconsolata', serif;
font-variant: small-caps;
line-height: 1em;
font-size: 1.25em;
margin-bottom: 0.25em;
width: 100%;
margin: 0;
padding: 0;
}
.front,
.back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
margin-left: auto;
margin-right: auto;
box-shadow: 0 0 0.3em #000;
}
.card i.flip {
position: absolute;
top: 85%;
}
/**********************/
/* front of the cards */
.front.card {
background-color: #aaa;
z-index: 2;
transform: rotateY(0deg);
}
.person .headshot {
box-shadow: inset 0 0 0.625em #000;
width: 6.5em;
height: 6.5em;
background-size: cover;
margin-left: auto;
margin-right: auto;
position: relative;
top: 3.75%;
}
/*********************/
/* back of the cards */
.back.card {
background-color: #ccc;
transform: rotateY(180deg);
}
.back li {
list-style-type: none;
padding-left: 1ex;
}
.back li i.fa {
margin-right: 1ex;
}
#people .back {
padding: 0.25em;
}
#people .back ul {
padding-left: .2em;
}
#people .back li {
margin-bottom: 0.5em;
margin-left: 0;
line-height: 0.75em;
}
#people .back li a {
font-family: 'Inconsolata', monospace;
font-size: 0.875em;
}
/***********************************/
/* Flipping behavior for the cards */
i.flip {
cursor: pointer;
position: relative;
top: 5px;
left: calc((70ex - 2*1em)/3 - 4.25em);
}
.flip-container {
perspective: 1000;
}
.flip-container.flipped .flipper {
transform: rotateY(180deg);
}
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
width: 100%;
height: 100%;
}
html {
font-size: 1.375em;
}
body {
font-family: 'Latin Modern Roman', Georgia, 'Times New Roman', Times, serif;
color: #333;
}
h2 {
font-size: 1.5em;
margin-top: 1.25em;
margin-bottom: 0.375em;
color: #666;
}
a {
color: cadetblue;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.