"mobile"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<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 ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/RRoberts/pen/jrLRBg?depth=everything&order=popularity&page=36&q=card&show_forks=false" /> <link href="https://fonts.googleapis.com/css?family=Arimo:400,700" rel="stylesheet"> <script src="https://use.fontawesome.com/f56e4513c5.js"></script> <style class="cp-pen-styles">html, body{ width: 100%; height: 100%; margin: 0; padding: 0; background-color: #ddd; font-family: 'Arimo', sans-serif; } .title{ text-align: center; color: #2c3e50; } /* CONTAINERS */ .container {max-width: 940px; width: 100%; margin: 0 auto; } .twelve { width: 100%; } .eleven { width: 91.53%; } .ten { width: 83.06%; } .nine { width: 74.6%; } .eight { width: 66.13%; } .seven { width: 57.66%; } .six { width: 49.2%; } .five { width: 40.73%; } .four { width: 32.26%;} .three { width: 23.8%; } .two { width: 15.33%; } .one{ width: 6.866%;} /* COLUMNS */ .col { display: block; float:left; margin: 1% 0 1% 1.6%; } .col:first-of-type { margin-left: 0; } /* CLEARFIX */ .cf:before, .cf:after { content: " "; display: table; } .cf:after { clear: both; } .cf { *zoom: 1; } /* PROFILES */ .card{ max-width: 100%; height: 400px; background-color: #fff; font-family: 'Arimo', sans-serif; font-size: 14px; } /* CARD ! */ #card1{ text-align: center; color: #2c3e50; padding: 15px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #card1 .image-wrapper{ width: 100px; height: 100px; margin: 20px auto; border-radius: 100%; background-image: url("https://static.pexels.com/photos/7096/people-woman-coffee-meeting.jpg"); background-size: cover; background-repeat: no-repeat; } #card1 .info .four{ text-align: center; border-right: 1px solid #2c3e50; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #card1 .info .four:last-of-type{ border-right: none; } #card1 .info .four .number{ display: block; font-size: 20px; padding: 3px 0; font-weight: 700; } #card1 .options{ margin-top: 30px; text-align: left; } #card1 .options ul{ list-style-type: none; padding: 0; margin: 0; } #card1 .options ul .icon{ display: inline-block; width: 30px; height: 30px; background-color: #3498db; border-radius: 100%; margin-right: 8px; vertical-align: middle; color: #fff; line-height: 30px; text-align: center; } #card1 .options ul li{ margin: 12px 0; } /* CARD 2 */ #card2{ overflow: hidden; color: #2c3e50; } #card2 a{ color: #2c3e50; } #card2 .wrapper{ padding: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #card2 .header{ width: 100%; height: 100px; position: relative; background-color: #3498db; } #card2 .header:after{ content: ''; background: inherit; bottom: 0; display: block; height: inherit; position: absolute; left: 0; right: 0; transform: skewY(-8deg); -webkit-transform: skewY(-8deg); transform-origin: 100%; } #card2 .image-wrapper{ width: 100px; height: 100px; border-radius: 100%; background-image: url("https://static.pexels.com/photos/7097/people-coffee-tea-meeting.jpg"); background-size: cover; background-repeat: no-repeat; position: absolute; z-index: 5; top: 130px; left: 50%; margin-left: -50px; } #card2 .name{ margin-top: 70px; text-align: center; } #card2 .social .four{ text-align: center; } #card2 .info{ margin: 30px 0; text-align: center; } /* CARD 3 */ #card3{ color: #2c3e50; } #card3 .header{ width: 100%; height: 180px; background-image: url("https://static.pexels.com/photos/9692/pexels-photo.jpeg"); background-size: cover; background-repeat: no-repeat; } #card3 .wrapper{ padding: 0px 15px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #card3 .name{ font-weight: 400; } #card3 .info{ margin: 20px 0; text-align: center; } #card3 .info .number{ background-color: #3498db; color: #fff; border-radius: 100%; width: 70px; height: 70px; line-height: 70px; text-align: center; margin: 0 auto; font-size: 20px; } </style></head><body> <div class="container"> <h1 class="title">User Profile Cards</h1> <div class="row cf"> <div id="card1" class="card four col"> <div class="image-wrapper"></div> <h3 class="name">Amy Smith</h3> <div class="info cf"> <div class="four col"><span class="number">100</span>Posts</div> <div class="four col"><span class="number">28</span>Tasks</div> <div class="four col"><span class="number">179</span>Likes</div> </div> <div class="options"> <ul> <li><span class="icon"><i class="fa fa-plus" aria-hidden="true"></i></span>Add to team</li> <li><span class="icon"><i class="fa fa-envelope" aria-hidden="true"></i></span>Send a message</li> </ul> </div> </div> <div id="card2" class="card four col"> <div class="header"></div> <div class="wrapper"> <div class="image-wrapper"></div> <h3 class="name">Jack Smith</h3> <div class="social cf"> <div class="four col"> <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a> </div> <div class="four col"> <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a> </div> <div class="four col"> <a href="#"><i class="fa fa-linkedin" aria-hidden="true"></i></a> </div> </div> <div class="info"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem aspernatur, mollitia suscipit perspiciatis minima reprehenderit quasi consectetur.</p> </div> </div> </div> <div id="card3" class="card four col"> <div class="header"></div> <div class="wrapper"> <h2 class="name">John Smith</h2> </div> <div class="info cf"> <div class="four col"> <div class="number">17</div> </div> <div class="four col"> <div class="number">239</div> </div> <div class="four col"> <div class="number">8</div> </div> </div> </div> </div> </div> </body></html>

Questions / Comments: