HTML
<!--https://dribbble.com/shots/2210153-Day-057-Twitter-Profile-->
<div class="container">
<div class="card-profile">
<div class="card-profile_visual"></div>
<div class="card-profile_user-infos">
<span class="infos_name">Darth Vader</span>
<span class="infos_nick">@darthvader</span>
</div>
<div class="card-profile_user-stats">
<div class="stats-holder">
<div class="user-stats">
<strong>Tweets</strong>
<span>1,922</span>
</div>
<div class="user-stats">
<strong>Following</strong>
<span>6,135</span>
</div>
<div class="user-stats">
<strong>Followers</strong>
<span>471K</span>
</div>
</div>
</div>
</div>
</div>
SCSS
@font-face {
font-family: "ProximaNova-Regular";
src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/64/ProximaNova-Regular.eot");
src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/64/ProximaNova-Regular.eot?#iefix") format("embedded-opentype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/64/ProximaNova-Regular.woff") format("woff"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/64/ProximaNova-Regular.ttf") format("truetype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/64/ProximaNova-Regular.svg#rocketdesign-font") format("svg");
font-weight: normal;
font-style: normal;
}
$gradient: #F96B4C, #F23182;
$radius: 10px;
$visual-height: 68%;
$datas-height: calc(100% - #{$visual-height} + 2px);
:root {
font-size: 16px;
}
* {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
float: left;
}
body {
background: #F0EFED;
background-image: linear-gradient(to bottom, #E5E4E5, #C2C1C2);
font-family: 'ProximaNova-Regular', Helvetica neue, sans-serif;
}
.container {
max-width: 350px;
width: 100%;
height: 100%;
position: relative;
margin: auto;
}
.card-profile {
float: left;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 530px;
background: #fff;
border-radius: $radius;
z-index: 1;
box-shadow: 0 0 5px rgba(black, 0.1);
&:after {
content: '';
display: block;
position: absolute;
width: 100%;
height: 100px;
bottom: 0;
box-shadow: 0 36px 64px -34px rgba(black, 1),
0 16px 14px -14px rgba(black, 0.6),
0 22px 18px -18px rgba(black, 0.4),
0 22px 38px -18px rgba(black, 1);
transform: scaleX(0.7) scaleY(1.3) translateY(-15%);
z-index: -1;
opacity: 0.25;
}
&_visual {
height: $visual-height;
overflow: hidden;
position: relative;
background: linear-gradient(to bottom, darken(#545559, 10%), saturate(darken(#3A4A7B, 2%), 20%),saturate(darken(#3A4A7B, 15%), 20%));
border-top-left-radius: $radius;
border-top-right-radius: $radius;
&:before,
&:after {
display: block;
content: '';
width: 100%;
height: 100%;
position: absolute;
z-index: 0;
background: url(http://static.boredpanda.com/blog/wp-content/uploads/2015/11/the-daily-life-of-darth-vader-is-my-latest-365-day-photo-project-33__880.jpg) no-repeat center center/cover;
opacity: 0.5;
mix-blend-mode: lighten;
}
&:before {
filter: grayscale(100%);
}
&:after {
z-index: 2;
mix-blend-mode: lighten;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAAElBMVEUAAABUUlRERkRMSkxMTkxEQkT490VOAAAAAXRSTlMAQObYZgAAAoxJREFUOI0dlImR5DAIRRXDbgaAEwCcAOAEZE/+qczTdFf1JQH/otd4SJWWf5+m7GjR28Z0TZW38pLjj1aWJl9eWaGfaCq/y4y012hPhqySnnbXe7Q6ulK6nZeV5bpjhyo9xLj7apvFSk3zSXEmtEZmNngYbhWhkmKne7XalnDrYcZMNwMlwuQuj/ezS2dJmpjEFwLe7T7zWE0zo22icr4dNZnfOLUp72rNcA8vcx3Y8r3MZpYOPSAC6mfSGRQBD1sZyFPd9b0mohN70CQTSa6+Ik15RifUaCjWq6zp2/9T697e5VsRKGUl4I4WnWpOxVAI7FoMEsrp2gLUCgH9J84B8o1Sgrb+0auEdrpocIQzU94mHBmMuliIlFemt0s8w3mUe0ssLnaecjllDunTW20d33ZxkUOoSIJbrWxZiHjdhV190e5AzjwONn4ASvTCC5CcKfywuFMBe1QpYjG0x38nJYAcR26k54o8YiXqeC7Hcth54lfwSPlHOBfOE9F0rGguJsr1V+GroafdEC+3qK2HX8Qsf0lWEwX0J29Pkh2lmFB33wKZBB8Rlhpj5AVBd6mTMYBC4cZzKNb6SygJJ3dnNIqkHnuwVgvaoCFcomyI6c+QEvxq0tKEiQCe9QoS18kaKFMl7wqEqJ2A6XkQMejE1dEcu7G/g1JRmHMOkjGIvqXHErayVgdJIIJsGBw1LzaijlFdExOIInKEOZ/oReBCsDlepSPBvRCAj/n10gfjFIml8rVSUDz2ISKeDxmFuviLVSzJOCqxtXToeJpNJr9Pnij+LQ4A/cgXDyuATWyPkrJ1En1cvPk3sB8VfMLIvwO5CKu+uC1OFNLvvoe0h97ieKNjsUkc/zQ6V/0CAoboTZwdKY4AAAAASUVORK5CYII=);
opacity: 1;
}
}
&_user-infos {
position: absolute;
z-index: 3;
left: 0;
right: 0;
margin: auto;
top: calc(#{$visual-height} - 100px);
color: #fff;
text-align: center;
.infos_name,
.infos_nick {
display: block;
clear: both;
padding: .5em 0;
padding-top: 0;
position: absolute;
width: 100%;
text-align: center;
font-size: 18px;
top: 8px;
font-weight: 800;
}
.infos_nick {
top: 32px;
font-size: 14px;
font-weight: 300;
}
}
&_user-stats {
background: #fff;
width: 100%;
height: $datas-height;
border-bottom-left-radius: $radius;
border-bottom-right-radius: $radius;
.stats-holder {
position: absolute;
width: 100%;
top: calc( 70% + 4em );
display: flex;
}
.user-stats {
flex: 1;
text-align: center;
strong {
display: block;
float: left;
clear: both;
width: 100%;
color: #B3B1B2;
font-size: 14px;
font-weight: 500;
letter-spacing: -0.2px;
}
span {
font-size: 26px;
color: #5E5E5E;
padding: .18em 0;
display: inline-block;
}
}
}
}
