<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Daily UI #6 - Profile</title>
<link href='//cdn.jsdelivr.net/devicons/1.8.0/css/devicons.min.css' rel='stylesheet'><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<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>Kartik Agarwal</h1>
<h3>Software Developer</h3>
<p class="bio">Hey! I'm Kartik, I'm an engineer and developer.</p>
</div>
</div>
</div>
<div class="badgescard"> <span class="devicons devicons-nodejs"></span><span class="devicons devicons-python"> </span><span class="devicons devicons-html5"></span><span class="devicons devicons-javascript_badge"></span><span class="devicons devicons-css3"></span><span class="devicons devicons-github"></span><span class="devicons devicons-heroku"></span></div>
</div>
<!-- partial -->
<script src="./script.js"></script>
</body>
</html>
@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;
}
}