<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/felipekm/pen/zvrJbV?depth=everything&order=popularity&page=73&q=pack&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'><script src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script><link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>
<style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Roboto:400,300);
html {
height: 100%;
}
body {
height: 100%;
}
button:focus {
outline: none;
}
button:hover {
opacity: .8;
}
.fa {
font-size: 18px;
color: white;
font-width: light;
}
#container {
width: 330px;
height: 420px;
max-width: 330px;
background: white;
position: relative;
top: 50%;
left: 50%;
overflow: hidden;
box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.25);
transform: translate3d(-50%, -50%, 0);
}
h2 {
padding: 20px;
color: white;
background: #3E4FB2;
font-weight: 300;
text-align: center;
font-size: 18px;
font-family: 'Roboto', sans-serif;
}
.detail {
color: #777;
padding: 20px;
line-height: 1.2;
font-family: 'Roboto', sans-serif;
height:30px;
border-bottom: dotted 1px silver;
}
.img-wrapper {
padding: 0;
position: relative;
}
.img-wrapper:after {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(62, 79, 178, .25);
width: 100%;
}
.img-wrapper img {
width: 100%;
height: 150px;
-o-object-fit: cover;
object-fit: cover;
margin: 0;
display: block;
position: relative;
}
.button-wrapper {
width: 50px;
height: 100%;
position: absolute;
top: -190px;
right: 20px;
bottom: 20px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
button {
width: 50px;
height: 50px;
border: none;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
z-index: 9;
position: relative;
}
.main-button {
background: #3E4FB2;
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end;
}
.ripple {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
border-radius: 50%;
z-index: -9;
background: transparent;
-webkit-transform: scale(.5);
-ms-transform: scale(.5);
transform: scale(.5);
-webkit-transition: .3s all ease;
transition: .3s all ease;
opacity: 1;
}
.rippling {
-webkit-animation: .3s rippling 1;
animation: .3s rippling 1;
-moz-animation: .3s rippling 1;
}
@-webkit-keyframes rippling {
25% {
-webkit-transform: scale(1.5);
transform: scale(1.5);
opacity: 1;
}
100% {
-webkit-transform: scale(2);
transform: scale(2);
opacity: 0;
}
}
@-moz-keyframes rippling {
25% {
-moz-transform: scale(1.5);
transform: scale(1.5);
opacity: 1;
}
100% {
-moz-transform: scale(2);
transform: scale(2);
opacity: 0;
}
}
@keyframes rippling {
25% {
transform: scale(1.5);
opacity: 1;
}
100% {
transform: scale(2);
opacity: 0;
}
}
.layer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 50px;
height: 50px;
background: white;
border-radius: 50%;
z-index: -99;
pointer-events: none;
}
.button-wrapper.clicked {
transform: translateX(-300px);
right: 0;
bottom: 0;
transition: .3s all ease .6s;
}
.button-wrapper.clicked .main-button {
opacity: 0;
-webkit-transition: .3s all ease .3s;
transition: .3s all ease .3s;
}
.button-wrapper.clicked .layer {
-webkit-transform: scale(100);
-ms-transform: scale(100);
transform: scale(100);
-webkit-transition: 2.25s all ease .9s;
transition: 2.25s all ease .9s;
}
.layered-content {
border-top: solid 40px rgba(62, 79, 178, .25);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
opacity: 0;
}
.layered-content.active {
opacity: 1;
}
.close-button {
background: yellow;
position: absolute;
right: 20px;
top: 20px;
color: #ff2670;
}
.layered-content.active .close-button {
-webkit-animation: .5s bounceIn;
animation: .5s bounceIn;
}
.layered-content .content img {
width: 80px;
-webkit-shape-outside: 80px;
shape-outside: 80px;
border-radius: 50%;
display: block;
margin: 0 auto 15px;
padding: 10px;
box-sizing: border-box;
background: white;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
-webkit-transition: .3s all ease;
transition: .3s all ease;
}
.content p {
color: white;
font-weight: 300;
text-align: center;
line-height: 1.5;
font-family: 'Roboto', sans-serif;
}
.content p a {
font-size: 12px;
background: white;
padding: 2.5px 5px;
color: #ff2670;
;
text-decoration: none;
border-radius: 50px;
display: inline-block;
margin-left: 1.5px;
}
.content img,
.content p {
opacity: 0;
position: relative;
top: -7.5px;
}
.layered-content.active .content img {
opacity: 1;
top: 0;
-webkit-transition: .5s all ease .5s;
transition: .5s all ease .5s;
}
.layered-content.active .content p {
opacity: 1;
top: 0;
-webkit-transition: .5s all ease 1s;
transition: .5s all ease 1s;
}</style></head><body>
<main id="container">
<h2>Aplicações Contratadas</h2>
<!-- IMAGE -->
<div class="img-wrapper">
<img src="data:image/jpeg;base64,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" alt="Just Background">
</div>
<!-- CARD FRONT CONTENT -->
<div>
<p class="detail">
<span style="float: left">Sistema Integra</span>
<span style="float: right; color: blue; margin-top:8px;">Ativo</span>
<span style="position: relative; clear:left; float:left; font-size:8pt;">5 usuários</span>
</p>
<p class="detail">
<span style="float: left">CMS</span>
<span style="float: right; color: red; margin-top:8px;">Inativo</span>
<span style="position: relative; clear:left; float:left; font-size:8pt;">1 usuário</span>
</p>
<p class="detail">
<span style="float: left">Accounts</span>
<span style="float: right; color: red; margin-top:8px;">Inativo</span>
<span style="position: relative; clear:left; float:left; font-size:8pt;">3 usuários</span>
</p>
</div>
<!-- BUTTON -->
<div class="button-wrapper">
<div class="layer"></div>
<button class="main-button fa fa-rocket">
<div class="ripple"></div>
</button>
</div>
<!-- CONTENT INSIDE -->
<div class="layered-content">
<button class="close-button fa fa-times"></button>
<div class="content">
</div>
</div>
</main>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='https://codepen.io/fbrz/pen/9a3e4ee2ef6dfd479ad33a2c85146fc1.js'></script>
<script >(function() {
'use strict';
var $mainButton = $(".main-button"),
$closeButton = $(".close-button"),
$buttonWrapper = $(".button-wrapper"),
$ripple = $(".ripple"),
$layer = $(".layered-content");
$mainButton.on("click", function() {
$ripple.addClass("rippling");
$buttonWrapper.addClass("clicked").delay(1500).queue(function() {
$layer.addClass("active");
});
});
$closeButton.on("click", function() {
$buttonWrapper.removeClass("clicked");
$ripple.removeClass("rippling");
$layer.removeClass("active");
});
})();
//# sourceURL=pen.js
</script>
</body></html>
