"thumbnail"
Bootstrap 3.0.0 Snippet by evarevirus

<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 ----------> <!--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">Emma Watson</span> <span class="infos_nick">@EmWatson</span> <a href="#"></a> </div> <div class="card-profile_user-stats"> <div class="stats-holder"> <div class="user-stats"> <strong>Tweets</strong> <span>1,337</span> </div> <div class="user-stats"> <strong>Following</strong> <span>561</span> </div> <div class="user-stats"> <strong>Followers</strong> <span>718</span> </div> </div> </div> </div> </div>
@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; } :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: -webkit-linear-gradient(top, #E5E4E5, #C2C1C2); 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%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; height: 530px; background: #fff; border-radius: 10px; z-index: 1; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); } .card-profile:after { content: ''; display: block; position: absolute; width: 100%; height: 100px; bottom: 0; box-shadow: 0 36px 64px -34px black, 0 16px 14px -14px rgba(0, 0, 0, 0.6), 0 22px 18px -18px rgba(0, 0, 0, 0.4), 0 22px 38px -18px black; -webkit-transform: scaleX(0.7) scaleY(1.3) translateY(-15%); transform: scaleX(0.7) scaleY(1.3) translateY(-15%); z-index: -1; opacity: 0.25; } .card-profile_visual { height: 68%; overflow: hidden; position: relative; background: -webkit-linear-gradient(top, #3b3c3f, #263d85, #172551); background: linear-gradient(to bottom, #3b3c3f, #263d85, #172551); border-top-left-radius: 10px; border-top-right-radius: 10px; } .card-profile_visual:before, .card-profile_visual:after { display: block; content: ''; width: 100%; height: 100%; position: absolute; z-index: 0; background: url(https://s-media-cache-ak0.pinimg.com/236x/c5/86/e6/c586e6afd87ee357bbab52df241480ac.jpg) no-repeat center center/cover; opacity: 0.5; mix-blend-mode: lighten; } .card-profile_visual:before { -webkit-filter: grayscale(100%); filter: grayscale(100%); } .card-profile_visual: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; } .card-profile_user-infos { position: absolute; z-index: 3; left: 0; right: 0; margin: auto; top: calc(68% - 100px); color: #fff; text-align: center; } .card-profile_user-infos a { width: 64px; height: 64px; position: absolute; left: 0; right: 0; margin: auto; background-color: #F96B4C; background-image: -webkit-linear-gradient(#F96B4C, #F23182); background-image: linear-gradient(#F96B4C, #F23182); display: block; clear: both; margin: auto; border-radius: 100%; top: calc(500% + 66px); box-shadow: 0 2px 0 #D42D78, 0 3px 10px rgba(243, 49, 128, 0.15), 0 0px 10px rgba(243, 49, 128, 0.15), 0 0px 4px rgba(0, 0, 0, 0.35), 0 5px 20px rgba(243, 49, 128, 0.25), 0 15px 40px rgba(243, 49, 128, 0.75), inset 0 0 15px rgba(255, 255, 255, 0.05); overflow: hidden; } .card-profile_user-infos a:after { content: ''; font-style: normal; position: absolute; width: 100%; height: 100%; display: block; background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/64/icon-add-f.svg"); background-repeat: no-repeat; background-size: 30%; background-position: center center; left: 0; top: 0; } .card-profile_user-infos .infos_name, .card-profile_user-infos .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; } .card-profile_user-infos .infos_nick { top: 32px; font-size: 14px; font-weight: 300; } .card-profile_user-stats { background: #fff; float: left; width: 100%; height: calc(100% - 68% + 2px); border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; } .card-profile_user-stats .stats-holder { position: absolute; width: 100%; top: calc( 70% + 4em ); display: -webkit-box; display: -ms-flexbox; display: flex; } .card-profile_user-stats .user-stats { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; text-align: center; } .card-profile_user-stats .user-stats strong { display: block; float: left; clear: both; width: 100%; color: #B3B1B2; font-size: 14px; font-weight: 500; letter-spacing: -0.2px; } .card-profile_user-stats .user-stats span { font-size: 26px; color: #5E5E5E; padding: .18em 0; display: inline-block; }

Related: See More


Questions / Comments: