Design credit goes to this Dribbble [https://dribbble.com/shots/1566489-Profile] from Vikas1307
A Pen by Chris Hutchinson on CodePen.
header.hero | |
h1 Profile Card with animations | |
p Design credit goes to | |
a(href="https://dribbble.com/shots/1566489-Profile", target="_blank") this Dribbble | |
| from Vikas1307 | |
section.profile | |
header.user | |
aside.loves | |
a(href="#") | |
i(class="fa fa-heart") | |
span.count 255 | |
img(src="http://www.lorempixel.com/200/200/people") | |
h1 First Last | |
p Actor | |
a.button(href="#") | |
i(class="fa fa-plus") | |
Follow | |
ul.menu | |
li.menu-item.active | |
i(class="fa fa-user") | |
a(href="#") Profile | |
li.menu-item | |
i(class="fa fa-clock-o") | |
a(href="#") Timeline | |
li.menu-item | |
i(class="fa fa-headphones") | |
a(href="#") Podcast |
Design credit goes to this Dribbble [https://dribbble.com/shots/1566489-Profile] from Vikas1307
A Pen by Chris Hutchinson on CodePen.
*, *:before, *:after{ box-sizing: border-box; } | |
body{ | |
font-size: 14px; font-weight: 400; font-family: 'Open Sans', sans-serif; | |
background: #e3e5e7; | |
margin: 50px; | |
} | |
h1, h2, h3, h4, h5, h6, p{ margin: 0; padding: 0; } | |
h1, h2, h3, h4, h5, h6{ font-weight: 600; } | |
a{ | |
text-decoration: none; | |
color: #ff7659; | |
&.button{ | |
display: inline-block; | |
background: #23f3ac; color: #FFF; padding: 5px 18px; | |
border-radius: 15px; font-size: 0.7em; | |
font-weight: 600; | |
transition: transform 0.2s cubic-bezier(.63,.15,.03,1.32), background 0.2s linear; | |
transform: scale(1.0); | |
&:hover{ | |
background: darken(#23f3ac, 10%); | |
transform: scale(1.06); | |
} | |
} | |
} | |
header.hero{ | |
margin: 0 0 40px 0; | |
} | |
@keyframes scale-in{ | |
0%{ | |
transform: scale(0.2); | |
} | |
100%{ | |
transform: scale(1); | |
} | |
} | |
section.profile{ | |
animation: scale-in 0.3s cubic-bezier(.63,.15,.03,1.52) forwards; | |
padding: 2px; background: #FFF; box-shadow: 4px 2px 20px #888; | |
width: 220px; margin: 0 auto; overflow: hidden; | |
header.user{ | |
text-align: center; height: 210px; | |
img{ | |
border-radius: 50%; margin: 15px 0 2px; height: 100px; width: 100px; | |
filter: none; | |
transition: all 0.2s cubic-bezier(.63,.15,.03,1); | |
&:hover{ | |
filter: brightness(90%); | |
} | |
} | |
h1{ font-size: 1.1em; } | |
p{ font-size: 0.7em; color: #b0b0b0; margin: 0 0 10px; } | |
aside.loves{ | |
float: left; | |
width: 45px; height: 100%; | |
background: #f6f6f6; | |
padding: 10px 0; | |
i.fa-heart{ | |
font-size: 1.3em; | |
color: #ff7659; padding: 6px; | |
border-radius: 50%; background: #FFF; | |
margin: 0 0 2px; | |
cursor: pointer; | |
transition: all 0.2s cubic-bezier(.63,.15,.03,1.52); | |
&:hover{ | |
color: darken(#ff7659, 14%); | |
background: #f6f6f6; | |
transform: scale(1.05); | |
} | |
} | |
span.count{ | |
display: inline; margin: 0 0 20px; | |
font-size: 0.6em; | |
background: #FFF; border-radius: 10px; | |
padding: 1px 5px; | |
} | |
} | |
} | |
ul.menu{ | |
margin: 0; padding: 0; list-style-type: none; | |
li.menu-item{ | |
height: 45px; background: #f6f6f6; | |
transition: all 0.2s cubic-bezier(.63,.15,.03,1.22); | |
i.fa{ | |
float: left; width: 45px; height: 100%; text-align: center; background: #efefef; padding: 14px 0; | |
color: #d2d2d2; font-size: 1.1em; | |
} | |
a{ | |
display: block; | |
font-size: 0.8em; color: #b2b2b2; | |
padding: 14px 15px 14px 60px; | |
} | |
&.active{ | |
background: #f3f3f3; | |
a{ color: #787878; } | |
i.fa{ background: #f0f0f0; color: #787878; } | |
} | |
&:hover{ | |
margin-left: -45px; | |
i.fa{ | |
border-right: 2px solid #ff7659; | |
} | |
} | |
&:nth-of-type(2n){ | |
background: #FFF; | |
i.fa{ | |
background: #f6f6f6; | |
} | |
} | |
} | |
} | |
} |
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" /> | |
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" /> |