Bootstrap snippet: SNIPET JESUSD011

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.



<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"> <div class="em-background-box text-white content"> <div class="container-fluid"> <div class="text-center em-background-box-content"> <ul class="list-inline"> <li> <a href="#" class="tip" title="Add friend"> <i class="glyphicon glyphicon-plus line-icon-circle"></i> </a> </li> <li> <img class="img-circle img-em-border" src="http://bootdey.com/files/UsersPhotos/144126917050793038_55e805b237334.jpg?ref="> </li> <li> <a href="#" class="tip" title="Send message"> <i class="line-icon glyphicon glyphicon-comment line-icon-circle"></i> </a> </li> </ul> <h1 class="thin">JESUS ORLANDO DIAZ</h1> <h4> <i class="fa fa-map-marker"></i> <span class="thin">CUCUTA, COL</span> </h4> <div class="row"> <div class="col-md-10 col-md-offset-1"> <div class="semi-well-dk em-background-box-actions"> <div class="row"> <div class="col-md-7 push-bottom-sm"> <ul class="list-inline no-margin v-mid-row"> <li> <a href="#" class="tip" title="Option"> <img class="img-circle" src="http://bootdey.com/img/Content/icons/32/PNG/32/rocket.png"> </a> </li> <li> <a href="#" class="tip" title="Option"> <img class="img-circle" src="http://bootdey.com/img/Content/icons/32/PNG/32/packman.png"> </a> </li> <li> <a href="#" class="tip" title="Option"> <img class="img-circle" src="http://bootdey.com/img/Content/icons/32/PNG/32/cloud-up.png"> </a> </li> <li class="text-center"> <h5 class="base-header">Followers</h5> <h4 class="base-header major">4.884</h4> </li> </ul> </div> <div class="col-md-5"> <ul class="list-inline"> <li class="option"> <img class="img-circle" src="http://bootdey.com/img/Content/icons/32/PNG/32/clock.png"> </li> <li class="text-center"> <h5 class="base-header">Sales</h5> <h4 class="base-header major">$3.593</h4> </li> <li class="option"> <img class="img-circle" src="http://bootdey.com/img/Content/icons/32/PNG/32/photo.png"> </li> <li class="text-center"> <h5 class="base-header">Followers</h5> <h4 class="base-header major">+84</h4> </li> </ul> </div> </div> </div> </div> </div> </div> </div> </div>
.content{ background-image: url(http://statics.1wallpaper.net/thumbimg/20150529/solid-red-bright-shiny.jpg); } .list-inline .option{ width: 80px; height: 30px; } .major { font-weight: 600; } .base-header { margin-top: 0; margin-bottom: 0; line-height: inherit; } .em-background-box .em-background-box-actions { margin-top: 15px; min-height: 50px; } .semi-well-dk { background: rgba(0,0,0,0.3); color: #fff; } .semi-well-dk, .semi-well-lt { border-radius: 6px; padding: 20px; } .img-em-border { border: 8px solid rgba(255,255,255,0.3); } .img-circle { border-radius: 50%; } img { vertical-align: middle; } .line-icon-circle { border: 1px solid rgba(242,244,248,0.7); border-radius: 50%; display: inline-block; width: 32px; height: 32px; line-height: 32px; color: #fff; -webkit-transition: border-color 0.3s; -moz-transition: border-color 0.3s; -o-transition: border-color 0.3s; transition: border-color 0.3s; } .thin { font-weight: 300; } h1, .h1 { font-size: 33px; } .list-inline { margin-left: -5px; } .list-unstyled, .list-inline { padding-left: 0; list-style: none; } ul, ol { margin-top: 0; margin-bottom: 10px; } .em-background-box .em-background-box-content { position: relative; z-index: 2; } .container-fluid { margin-right: auto; margin-left: auto; padding-left: 10px; padding-right: 10px; } .navbar+.em-background-box { margin-top: -15px; margin-bottom: 15px; } .em-background-box { border-bottom: 4px solid #5bc0de; } .em-background-box { background-size: cover; background-position: center center; background-repeat: no-repeat; position: relative; padding-top: 50px; padding-bottom: 50px; } .text-white { color: white; }
jesusd011

SNIPET JESUSD011

jesusd011
  Sep 3rd 2015, 05:08
163 Views