"card"
Bootstrap 3.0.0 Snippet by maccc

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/lmenus/pen/KrEqpG?depth=everything&order=popularity&page=5&q=card&show_forks=false" /> <link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,500" rel="stylesheet"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'> <style class="cp-pen-styles">/*------------------* * Global variables * *------------------*/ /*------------* * CSS Styles * *------------*/ *, *:before, *:after { box-sizing: border-box; margin: 0; padding: 0; } body { -webkit-box-align: center; -ms-flex-align: center; align-items: center; background: -webkit-linear-gradient(315deg, #404040, #333); background: linear-gradient(135deg, #404040, #333); background-color: #333; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-height: 100vh; padding: 24px; } body::-webkit-scrollbar { display: none; } a { color: inherit; text-decoration: none; } a:hover { text-decoration: underline; } .card { color: #d4cd96; font-family: 'Fira Sans', sans-serif; height: 100%; left: 0; position: absolute; top: 0; -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; width: 100%; -webkit-tap-highlight-color: transparent; -webkit-transition: -webkit-transform 0.6s cubic-bezier(0.49, 0.23, 0.58, 0.49); transition: -webkit-transform 0.6s cubic-bezier(0.49, 0.23, 0.58, 0.49); transition: transform 0.6s cubic-bezier(0.49, 0.23, 0.58, 0.49); transition: transform 0.6s cubic-bezier(0.49, 0.23, 0.58, 0.49), -webkit-transform 0.6s cubic-bezier(0.49, 0.23, 0.58, 0.49); } .card.flipped { -webkit-transform: translateX(-100%) rotateY(-180deg); transform: translateX(-100%) rotateY(-180deg); } .card-front, .card-back { -webkit-backface-visibility: hidden; backface-visibility: hidden; background: -webkit-repeating-linear-gradient(315deg, rgba(0, 0, 0, 0.3), transparent 1px, rgba(0, 0, 0, 0.3) 2px); background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.3), transparent 1px, rgba(0, 0, 0, 0.3) 2px); background-size: 3px 3px; background-color: #302f34; border-radius: 1px; box-shadow: 0px -6px 8px 0px rgba(0, 0, 0, 0.1), 0px 6px 8px 0px rgba(0, 0, 0, 0.1), 6px 0px 8px 0px rgba(0, 0, 0, 0.1), -6px 0px 8px 0px rgba(0, 0, 0, 0.1); cursor: pointer; height: 100%; left: 0; padding: 5%; position: absolute; top: 0; width: 100%; } .card-back { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } .card-back .layer { background: -webkit-repeating-linear-gradient(315deg, rgba(76, 71, 31, 0.3), transparent 1px, rgba(76, 71, 31, 0.3) 2px); background: repeating-linear-gradient(135deg, rgba(76, 71, 31, 0.3), transparent 1px, rgba(76, 71, 31, 0.3) 2px); background-size: 3px 3px; background-color: #d4cd96; color: #302f34; height: 100%; position: relative; width: 100%; } .card-back .layer:after { background: -webkit-linear-gradient(315deg, rgba(0, 0, 0, 0.2), transparent); background: linear-gradient(135deg, rgba(0, 0, 0, 0.2), transparent); content: ''; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; } .card-back .layer .top, .card-back .layer .bottom { left: 8%; position: absolute; z-index: 1; } .card-back .layer .top { top: 12%; } .card-back .layer .bottom { bottom: 12%; } .card-back .layer h2, .card-back .layer h3, .card-back .layer h4 { font-weight: 400; margin: 2px 0; } .card-back .layer h2 { font-size: 18px; font-weight: 500; text-transform: uppercase; } .card-back .layer h3 { font-size: 16px; } .card-back .layer h4 { font-size: 16px; font-style: italic; } .card-front .layer { -webkit-backface-visibility: hidden; backface-visibility: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; height: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: relative; width: 100%; } .card-front .layer h1 { font-size: 32px; font-weight: 400; letter-spacing: -2px; margin: 0 auto; padding: 6px 18px 4px; text-align: center; } .card-front .layer .corner { -webkit-backface-visibility: hidden; backface-visibility: hidden; border-right: 2px solid #d4cd96; border-top: 2px solid #d4cd96; height: 12px; position: absolute; width: 12px; } .card-front .layer .corner:nth-of-type(1) { right: 0; top: 0; } .card-front .layer .corner:nth-of-type(2) { left: 0; top: 0; -webkit-transform: rotateZ(-90deg); transform: rotateZ(-90deg); } .card-front .layer .corner:nth-of-type(3) { bottom: 0; left: 0; -webkit-transform: rotateZ(180deg); transform: rotateZ(180deg); } .card-front .layer .corner:nth-of-type(4) { bottom: 0; right: 0; -webkit-transform: rotateZ(90deg); transform: rotateZ(90deg); } .card-wrapper { height: 271.76471px; max-width: 420px; -webkit-perspective: 600px; perspective: 600px; position: relative; width: 100%; -webkit-transition: -webkit-transform 1s; transition: -webkit-transform 1s; transition: transform 1s; transition: transform 1s, -webkit-transform 1s; } </style></head><body> <div class='card-wrapper'> <div class='card' data-toggle-class='flipped'> <div class='card-front'> <div class='layer'> <h1>Lubos</h1> <div class='corner'></div> <div class='corner'></div> <div class='corner'></div> <div class='corner'></div> </div> </div> <div class='card-back'> <div class='layer'> <div class='top'> <h2>Chief Idea Officer</h2> </div> <div class='bottom'> <h3> Phone: <a href='tel:+44 7542 20 33 83'>+44 7542 20 33 83</a> </h3> <h3> Email: <a href='mailto:lmenus@lmen.us'>lmenus@lmen.us</a> </h3> <h3> Twitter: <a href='https://www.twitter.com/lmenus' target='_blank'>lmenus</a> </h3> <h3> Web: <a href='https://www.lmen.us' target='_blank'>lmen.us</a> </h3> </div> </div> </div> </div> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script> <script >;(function () { let card = document.getElementsByClassName('card')[0], moved = 0, interval; if (!card) return; card.addEventListener('click', function (event) { clearInterval(interval); card.style.transform = ''; // Do not flip the card if the user is trying to // tap a link. if (event.target.nodeName === 'A') { return; } let cName = card.getAttribute('data-toggle-class'); let toggled = card.classList.contains(cName); card.classList[toggled ? 'remove' : 'add'](cName); }); interval = setInterval(function () { moved = moved ? 0 : 10; card.style.transform = 'translateY(' + moved + 'px)'; }, 1500); })(); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: