<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 ---------->
<div class="content">
<div class="card">
<div class="firstinfo"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/mrvanz/128.jpg"/>
<div class="profileinfo">
<h1>Francesco Moustache</h1>
<h3>Python Ninja</h3>
<p class="bio">Lived all my life on the top of mount Fuji, learning the way to be a Ninja Dev.</p>
</div>
</div>
</div>
<div class="badgescard"> <span class="devicons devicons-django"></span><span class="devicons devicons-python"> </span><span class="devicons devicons-codepen"></span><span class="devicons devicons-javascript_badge"></span><span class="devicons devicons-gulp"></span><span class="devicons devicons-angular"></span><span class="devicons devicons-sass"> </span></div>
</div>
@import "https://fonts.googleapis.com/css?family=Open+Sans:300,400";
body, .badgescard, .firstinfo {
display: flex;
justify-content: center;
align-items: center;
}
html {
height: 100%;
}
body {
font-family: 'Open Sans', sans-serif;
width: 100%;
min-height: 100%;
background: #009688;
font-size: 16px;
overflow: hidden;
}
*, *:before, *:after {
box-sizing: border-box;
}
.content {
position: relative;
animation: animatop 0.9s cubic-bezier(0.425, 1.14, 0.47, 1.125) forwards;
}
.card {
width: 500px;
min-height: 100px;
padding: 20px;
border-radius: 3px;
background-color: white;
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
position: relative;
overflow: hidden;
}
.card:after {
content: '';
display: block;
width: 190px;
height: 300px;
background: cadetblue;
position: absolute;
animation: rotatemagic 0.75s cubic-bezier(0.425, 1.04, 0.47, 1.105) 1s both;
}
.badgescard {
padding: 10px 20px;
border-radius: 3px;
background-color: #ECECEC;
width: 480px;
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2);
position: absolute;
z-index: -1;
left: 10px;
bottom: 10px;
animation: animainfos 0.5s cubic-bezier(0.425, 1.04, 0.47, 1.105) 0.75s forwards;
}
.badgescard span {
font-size: 1.6em;
margin: 0px 6px;
opacity: 0.6;
}
.firstinfo {
flex-direction: row;
z-index: 2;
position: relative;
}
.firstinfo img {
border-radius: 50%;
width: 120px;
height: 120px;
}
.firstinfo .profileinfo {
padding: 0px 20px;
}
.firstinfo .profileinfo h1 {
font-size: 1.8em;
}
.firstinfo .profileinfo h3 {
font-size: 1.2em;
color: #009688;
font-style: italic;
}
.firstinfo .profileinfo p.bio {
padding: 10px 0px;
color: #5A5A5A;
line-height: 1.2;
font-style: initial;
}
@keyframes animatop {
0% {
opacity: 0;
bottom: -500px;
}
100% {
opacity: 1;
bottom: 0px;
}
}
@keyframes animainfos {
0% {
bottom: 10px;
}
100% {
bottom: -42px;
}
}
@keyframes rotatemagic {
0% {
opacity: 0;
transform: rotate(0deg);
top: -24px;
left: -253px;
}
100% {
transform: rotate(-30deg);
top: -24px;
left: -78px;
}
}
