John Doe's Business Card

JADE
.container .card .front.side h1.logo John Doe .back.side h3.name John Doe div Front-end developer .info p span.property Email: | john@doe.com p span.property Twitter: | @johndoe p span.property Phone: | (123) 236-5881 p span.property Website: | johndoe.com
SCSS
* { box-sizing: border-box; } body { background-color: #BDC3C7; overflow: hidden; } .container { perspective: 800px; color: #fff; font-family: 'Open Sans'; text-transform: uppercase; letter-spacing: 4px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .card { width: 700px; height: 400px; background: #333; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); transform-style: preserve-3d; transition: 0.8s; } .side { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; transform: rotate(0deg) translateZ(1px); } .container:hover .card, .back { transform: rotateY(-180deg) translateZ(1px); } .front { line-height: 390px; text-align: center; } .logo { outline: 2px solid #F05D5E; display: inline-block; padding: 15px 40px; text-transform: uppercase; font-family: 'Roboto Condensed'; font-size: 1.4em; font-weight: normal; line-height: 32px; letter-spacing: 8px; } .back { background: #F05D5E; padding: 30px; } .name { color: #3B3B3B; margin-bottom: 6px; } p { margin:.8em 0; } .info { position: absolute; bottom: 30px; right: 30px; color: #3b3b3b; } .property { color: #fff; } // I made it responsive too :) @media (max-width:700px) { .card { transform:scale(.5); } .container:hover .card { transform: scale(.5) rotateY(-180deg) translateZ(1px); } }
JAVASCRIPT
Expand for more options Login