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 dgmd.github.io/people
Forked from shaunalynn's Pen [DGMD E-15] people page card.
A Pen by Laura Guillen on CodePen.
| <html> | |
| <head> | |
| <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.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='tylermachado' class='person flip-container'> | |
| <div class='flipper'> | |
| <div class='front card'> | |
| <h2>Tyler Machado</h2> | |
| <div class='circle'><img src="http://i328.photobucket.com/albums/l355/laura-guillen/record-needle_zpsdy1a8ari.png"></div> | |
| <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.tylermachado.com/'>Portfolio</a> | |
| </li> | |
| <li><i class="fa fa-github"></i><a href='https://github.com/tylermachado'>tylermachado</a> | |
| </li> | |
| <li><i class="fa fa-twitter"></i><a href='https://twitter.com/tylermachado/'>@tylermachado</a> | |
| </li> | |
| <li><i class="fa fa-instagram"></i><a href='http://instagram.com/tylermachado'>tylermachado</a> | |
| </li> | |
| <li><i class="fa fa-beer"></i><a href='http://parlorsportsbar.com/#!/'>Parlor Sports</a> | |
| </li> | |
| </ul> | |
| <i class="fa fa-undo flip"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
| // Add your Javascript effects here. | |
| // Grab our inner div and store it in a variable `inner` | |
| var inner = document.querySelector('.headshot'); | |
| // Grab our circle div and store it in a variable `circle` | |
| var circle = document.querySelector('.circle'); | |
| // Add an eventListener (https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener) to `inner` | |
| inner.addEventListener('mouseover', function() { | |
| // so that when a mouseover event is triggered on it (i.e. when someone mouses over it) | |
| circle.style.display = 'block'; // We set `circle`'s display to block, showing it | |
| }); | |
| // And then when we mouseout (https://developer.mozilla.org/en-US/docs/Web/Events/mouseout) | |
| inner.addEventListener('mouseout', function() { | |
| // Set the circle's display attribute back to `none` so that it is hidden | |
| circle.style.display = 'none'; | |
| }); | |
| window.addEventListener('load', function() { | |
| var myCard = document.querySelector('#tylermachado'); | |
| var flipButtons = Array.prototype.slice.call(myCard.querySelectorAll('i.flip')); | |
| flipButtons.forEach(function(button) { | |
| button.addEventListener('click', function() { | |
| myCard.classList.toggle('flipped'); | |
| }); | |
| }); | |
| }); |
| /* Kanye West -- Replace with your name/ID and add CSS effects for your card here */ | |
| #tylermachado .headshot { | |
| background-image: url(http://i328.photobucket.com/albums/l355/laura-guillen/tyler-portrait_zpszw8qwcff.jpg); | |
| } | |
| .person .headshot:hover { | |
| transition: 1s; | |
| top:47px; | |
| width: 2.7em; | |
| height:2.7em; | |
| border-radius: calc(500px/2); | |
| border: 7px solid white; | |
| -webkit-animation-name: rotate; | |
| -webkit-animation-duration: 1s; | |
| -webkit-animation-iteration-count:infinite; | |
| -webkit-animation-timing-function: linear; | |
| -moz-animation-name: rotate; | |
| -moz-animation-duration: 1s; | |
| -moz-animation-iteration-count: infinite; | |
| -moz-animation-timing-function: linear; | |
| animation-name: rotate; | |
| animation-duration: 1s; | |
| animation-iteration-count: infinite; | |
| animation-timing-function: linear; | |
| } | |
| @-webkit-keyframes rotate { | |
| from {-webkit-transform: rotate(0deg);} | |
| to {-webkit-transform: rotate(360deg);} | |
| } | |
| @-moz-keyframes rotate { | |
| from {-moz-transform: rotate(0deg);} | |
| to {-moz-transform: rotate(360deg);} | |
| } | |
| @keyframes rotate { | |
| from {transform: rotate(0deg);} | |
| to {transform: rotate(360deg);} | |
| } | |
| .circle img { | |
| position: absolute; | |
| left: 78px; | |
| top:-50px; | |
| width:70%; | |
| height:auto; | |
| z-index: 1 | |
| } | |
| .circle { | |
| display: none; | |
| position: absolute; | |
| background-color: #2c2c2c; | |
| top: 40px; | |
| left: 31px; | |
| height: 70%; | |
| width: 70%; | |
| margin-left: auto; | |
| margin-right: auto; | |
| box-shadow: | |
| 0 0 0 10px hsl(0, 5%, 25%), | |
| 0 0 0 15px hsl(0, 5%, 20%), | |
| 0 0 0 20px hsl(0, 5%, 10%), | |
| 0 0 0 25px hsl(0, 5%, 5%), | |
| 0 0 0 30px hsl(0, 5%, 0%); | |
| border-radius: calc(500px/2); | |
| } | |
| /********************************* | |
| ***Don't change below this line*** **********************************/ | |
| html { | |
| font-size: 1.375em; | |
| } | |
| @font-face { | |
| font-family: 'Latin Modern Roman'; | |
| src: url('https://s3.amazonaws.com/dgmde15githubio/lmroman10-regular-webfont.eot'); | |
| src: url('https://s3.amazonaws.com/dgmde15githubio/lmroman10-regular-webfont.eot?#iefix') format('embedded-opentype'), url('https://s3.amazonaws.com/dgmde15githubio/lmroman10-regular-webfont.woff') format('woff'), url('https://s3.amazonaws.com/dgmde15githubio/lmroman10-regular-webfont.ttf') format('truetype'), url('https://s3.amazonaws.com/dgmde15githubio/lmroman10-regular-webfont.svg#latin_modern_roman10_regular') format('svg'); | |
| font-weight: normal; | |
| font-style: normal; | |
| } | |
| body { | |
| font-family: 'Latin Modern Roman', Georgia, 'Times New Roman', Times, serif; | |
| color: #333; | |
| } | |
| .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: 'Latin Modern Roman', Georgia, 'Times New Roman', Times, 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.5em #000; | |
| border-radius: 0.5em; | |
| } | |
| .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 ul { | |
| padding:0; | |
| } | |
| .back li { | |
| list-style-type: none; | |
| padding-left: 1ex; | |
| } | |
| .back li i.fa { | |
| margin-right: 1ex; | |
| } | |
| #people .back { | |
| padding: 0.25em; | |
| } | |
| #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%; | |
| } |