a user Profile.
A Pen by Genaro Colusso on CodePen.
a user Profile.
A Pen by Genaro Colusso on CodePen.
.content | |
.card | |
.firstinfo | |
img(src="https://s3.amazonaws.com/uifaces/faces/twitter/mrvanz/128.jpg") | |
.profileinfo | |
h1 Francesco Moustache | |
h3 Python Ninja | |
p.bio | |
| Lived all my life on the top of mount Fuji, learning the way to be a Ninja Dev. | |
.badgescard | |
span.devicons.devicons-django | |
span.devicons.devicons-python | |
span.devicons.devicons-codepen | |
span.devicons.devicons-javascript_badge | |
span.devicons.devicons-gulp | |
span.devicons.devicons-angular | |
span.devicons.devicons-sass | |
// Create a profile UI. |
@import 'https://fonts.googleapis.com/css?family=Open+Sans:300,400'; | |
%reset { margin: 0; padding: 0; } | |
%flex { display: flex; justify-content: center; align-items: center; } | |
@mixin animated($timein: null, $delay: null) { | |
transition: all $timein ease-in-out; | |
transition-delay: $delay; | |
} | |
@mixin dimensions($width: null, $height: null) { width: $width; min-height: $height; } | |
$maincolor: #009688; | |
html{height: 100%;} | |
body{ | |
@extend %flex; | |
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.140, 0.470, 1.125) forwards ; | |
} | |
.card{ | |
@include dimensions( 500px, 100px); | |
padding: 20px; | |
border-radius: 3px; | |
background-color: white; | |
box-shadow: 0px 10px 20px rgba(0,0,0,0.2); | |
position: relative; | |
overflow: hidden; | |
&:after { | |
content: ''; | |
display: block; | |
width: 190px; | |
height: 300px; | |
background: cadetblue; | |
position: absolute; | |
animation: rotatemagic 0.75s cubic-bezier(0.425, 1.040, 0.470, 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; | |
@extend %flex; | |
animation: animainfos 0.5s cubic-bezier(0.425, 1.040, 0.470, 1.105) 0.75s forwards; | |
span { | |
font-size: 1.6em; | |
margin: 0px 6px; | |
opacity: 0.6; | |
} | |
} | |
.firstinfo{ | |
@extend %flex; | |
flex-direction: row; | |
z-index:2; | |
position: relative; | |
img{ | |
border-radius: 50%; | |
width: 120px; | |
height: 120px; | |
} | |
.profileinfo{ | |
padding: 0px 20px; | |
h1{ font-size: 1.8em;} | |
h3{ font-size: 1.2em; | |
color: $maincolor; | |
font-style: italic; | |
} | |
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; | |
} | |
} |