Bootstrap snippet: Profile options

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: user,profile,image,bootstrap,snippet,3.2.0,options



<link href="http://getbootstrap.com/examples/jumbotron-narrow/jumbotron-narrow.css" rel="stylesheet"> <link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css"> <div class="container bootstrap snippet"> <div class="jumbotron"> <img src="http://bootdey.com/img/Content/user_6.jpg" class="img-circle img-thumbnail img-user" alt=""> <div class="content"> <ul class="brands brands-inline hidden-xs"> <li><a href="#"><i class="fa fa-facebook"></i></a></li> <li><a href="#"><i class="fa fa-twitter"></i></a></li> </ul> <h2 class="name">El Grone's</h2> <ul class="brands brands-inline hidden-xs"> <li><a href="#"><i class="fa fa-google-plus"></i></a></li> <li><a href="#"><i class="fa fa-linkedin"></i></a></li> </ul> </div> <!-- Slideshow start --> <div class="carousel slide vertical" data-ride="carousel"> <div class="carousel-inner"> <!-- Slideshow item 1 active --> <div class="item next left"><h3>I <i class="fa fa-heart"></i> webdesign</h3></div> <!-- Slideshow item 2 --> <div class="item"><h3>Creative coder <i class="fa fa-code icon"></i></h3></div> <!-- Slideshow item 3 --> <div class="item active left"><h3><i class="fa fa-trophy"></i> Awesome designer</h3></div> </div> </div> <!-- Slideshow end --> <div class="row"> <a href="#" class="btn btn-info btn-lg text-success" > <i class="glyphicon glyphicon-share"></i> Option one </a> <a href="#" class="btn btn-info btn-lg text-success" > <i class="glyphicon glyphicon-check"></i>Option two </a> </di> </div> </div>
body { background: #2E95EF; background-image: -moz-radial-gradient(center 45deg,circle cover, #9BD1FF, #2E95EF); background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%,800, from(#9BD1FF), to(#2E95EF)); padding-top: 15%; } .img-user{ width:300px; height:300px; } .name{ text-shadow: 1px 1px 0 #888; color: #FFFFFF; font-family: 'Montserrat'; } .jumbotron { margin: 0; background: #2E95EF; background-image: -moz-radial-gradient(center 45deg,circle cover, #9BD1FF, #2E95EF); background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%,800, from(#9BD1FF), to(#2E95EF)); } .jumbotron img { margin: 0 auto 0 auto; max-height: 350px; margin-bottom: 15px; } .brands li:hover{ background:#FFFFFF; } .brands li:hover .fa{ color:#000000; } .brands { list-style: none; padding-left: 0; } .brands { display: inline; } .brands-inline li { display: inline-block; margin-right: 5px; } .brands li { margin: 0 0 8px; } .brands li a { background-color: transparent; color: #FFFFFF; border-top: 3px solid #16A085; } .brands li a { text-align: center; display: inline-block; font-size: 20px; padding-top: 11px; width: 50px; height: 50px; } .content h2 { display: inline; padding: 0 15px 0 15px; font-size: 78px; } .vertical .carousel-inner { height: 100%; } .carousel-inner { margin-bottom: 15px; } .jumbotron .btn { margin-right: 15px; }
Dey-Dey

Profile options

Dey-Dey
  Aug 22nd 2014, 08:45
2.9K Views