Bootstrap snippet: cover profile detail

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: profile,user,social network,cover



<div class="row row-broken bootstrap snippets"> <div class="col-xs-12 cover"> <h6 class="cover-name text-light">Profile Detail</h6> <img src="http://lorempixel.com/900/320/nature/8/" class="cover-img" alt="image"> <div class="cover-inside cover-blackout text-c text-light"> <img class="cover-avatar size-md img-round" src="http://bootdey.com/img/Content/avatar/avatar1.png" alt="profile"> <div class="field name font-weight-700">Katya Angintiew</div> <br> <div class="field place">Riviera State 32/106</div> <div class="help-block-1 text-c hidden-xs"> <div class="user-icon f-l"> <div id="bar"><canvas width="64" height="19" style="display: inline-block; width: 64px; height: 19px; vertical-align: top;"></canvas></div> <b>190</b> Posts </div> <div class="user-icon"> <div id="line"><canvas width="120" height="19" style="display: inline-block; width: 120px; height: 19px; vertical-align: top;"></canvas></div> <b>50</b> Following </div> <div class="user-icon f-r"> <div id="pie"><canvas width="19" height="19" style="display: inline-block; width: 19px; height: 19px; vertical-align: top;"></canvas></div> <b>250</b> Followers </div> </div> <div class="help-block-1 hidden-xs"> <button type="button" class="btn btn-success f-l">Follow</button> <button type="button" class="btn btn-warning f-r">Send Message</button> </div> </div> </div> </div> <script src="http://91.234.35.26/iwiki-admin/v1.0.0/admin/js/jquery.sparkline.min.js"></script>
body{ margin-top:20px; } .row-broken > div[class*='col-'] { padding-top: 0; padding-left: 0; } .cover { position: relative; overflow: hidden; height: 500px; } .row-broken > div[class*='col-']:last-child { padding-right: 0; } .cover-name { position: absolute; z-index: 2; top: 20px; left: 20px; } .text-light { color: #ffffff; } .cover-img { display: block; min-height: 100%; margin: 0 auto; } .cover-blackout { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.5); z-index: 1; } .text-c { text-align: center; } .cover-avatar.size-md { width: 130px; height: 130px; margin: 90px auto 0; } .cover-inside * { line-height: 2; } .cover-avatar { display: block; } .img-round { border-radius: 50%; } .cover-inside .field { font-size: 16px; display: inline-block; } .cover-inside * { line-height: 2; } .font-weight-700 { font-weight: 700; } .cover-inside .place { padding: 0 0 0 20px; background: url("http://91.234.35.26/iwiki-admin/v1.0.0/admin/img/icon-52.png") 0 50% no-repeat; } .cover-inside .field { font-size: 16px; display: inline-block; } .cover .help-block-1 { width: 50%; margin: 12px auto 0; overflow: hidden; } .cover .user-icon { display: inline-block; padding: 35px 0 0; font-size: 16px; line-height: 20px; } .f-l { float: left; } .f-r { float: right; } .btn-success { background-color: #46be8a; } .btn { min-width: 180px; font-size: 26px; line-height: 48px; font-weight: normal; color: #ffffff; padding: 0 24px; -webkit-transition: background false false, 0.25s false false, cubic-bezier(0.4, 1, 0.3, 1) false false; -moz-transition: background false false false, 0.25s false false false, cubic-bezier(0.4, 1, 0.3, 1) false false false; -o-transition: background false false false, 0.25s false false false, cubic-bezier(0.4, 1, 0.3, 1) false false false; transition: background, 0.25s, cubic-bezier(0.4, 1, 0.3, 1); } .btn { display: inline-block; margin-bottom: 0; text-align: center; vertical-align: middle; touch-action: manipulation; cursor: pointer; background-image: none; white-space: nowrap; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border: none; } button { outline: none; }
$(function(){ $("#bar").sparkline([12, 32, 9, 11, 14, 24, 19, 6, 8, 13, 22, 12, 32], { barColor: "#42b382", negBarColor: "#e4ad06", type: 'bar' }); $("#pie").sparkline([4, 6, 4], { type: 'pie', sliceColors: ["#ffc107", "#63A8EB", "#E9585B"] }); $("#line").sparkline([5, 6, 7, 9, 9, 5, 3, 2, 2, 4, 6, 7, 5, 6, 7, 9, 9, 5, 3, 2, 2, 4, 6, 7], { type: 'line', spotColor: "#fff", minSpotColor: "#fff", maxSpotColor: "#fff", spotRadius: 4, lineWidth: 3, lineColor: "#fff", fillColor: "transparent", highlightSpotColor: '#E9585B', highlightLineColor: '#E9585B', defaultPixelsPerValue: 5 }); })
Dey-Dey

cover profile detail

Dey-Dey
  Mar 16th, 07:21
1.6K Views