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.
| <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"> | |
| <canvas onmousedown="showCoords(event)" width="300px" height="300px"></canvas> | |
| <div id='adriennedebigare' class='person flip-container'> | |
| <div class='flipper'> | |
| <div class='front card'> | |
| <h2>Adrienne Debigare</h2> | |
| <div class='headshot'></div> | |
| <i class="fa fa-info-circle flip"></i> | |
| </div> | |
| <div class='back card'> | |
| <ul> | |
| <li><i class="fa fa-home"></i><a href='http://www.adriennedebigare.com/'>adriennedebigare.com</a> | |
| </li> | |
| <li><i class="fa fa-github"></i><a href='https://github.com/adebigare'>adebigare</a> | |
| </li> | |
| <li><i class="fa fa-twitter"></i><a href='https://twitter.com/adebigare'>@adebigare</a> | |
| </li> | |
| <li><i class="fa fa-envelope"></i><a href='mailto:adebigare@gmail.com'>adebigare@gmail.com</a> | |
| </li> | |
| </ul> | |
| <i class="fa fa-undo flip"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
| // Add your Javascript effects here. | |
| function showCoords (evt) { | |
| alert ( | |
| "clientX value:" + evt.clientX + "\n" + | |
| "clientY value:" + evt.clientY + "\n" | |
| ) | |
| } | |
| window.addEventListener('load', function() { | |
| var myCard = document.querySelector('#adriennedebigare'); | |
| 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 */ | |
| #adriennedebigare .headshot { | |
| background-image: url(https://github.com/adebigare/adebigare.github.io/blob/master/img/AdrienneDebigareHeadshot.png?raw=true); | |
| } | |
| #adriennedebigare, .headshot { | |
| -webkit-transition: opacity 1s ease, width 1s ease, height 1s ease; | |
| transition: opacity 1s ease, width 1s ease, height 1s ease; | |
| } | |
| .person .headshot:hover { | |
| opacity: 0.5; | |
| width: 8.5em; | |
| height: 8.5em; | |
| } | |
| #adriennedebigare:hover { | |
| width: calc((55ex - 2*1em)/2); | |
| height: calc((55ex - 2*1em)/2); | |
| } | |
| /********************************* | |
| ***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: '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 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; | |
| } |