<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>
