"Flat user profile UI"
Bootstrap 3.2.0 Snippet by svkrec

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ----------> <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"> <div class="container"> <div class="row"> <div class="col-md-offset-2 col-md-8 col-lg-offset-3 col-lg-6"> <div class="well profile"> <div class="col-sm-12"> <div class="col-xs-12 col-sm-8"> <h2>Nicole Pearson</h2> <p>VP, JP Morgan, New York </p> </div> <div class="col-xs-12 col-sm-4 text-center"> <figure> <img src="http://www.localcrimenews.com/wp-content/uploads/2013/07/default-user-icon-profile.png" alt="" class="img-circle img-responsive"> </figure> </div> </div> <div> <div class="panel-heading"> <ul class="nav nav-tabs"> <li class="active"><a href="#tab1primary" data-toggle="tab">Personal</a></li> <li><a href="#tab2primary" data-toggle="tab">Professional</a></li> <li><a href="#tab3primary" data-toggle="tab">Insights</a></li> <li><a href="#tab4primary" data-toggle="tab">Infosys Context</a></li> </ul> </div> <div class="panel-body"> <div class="tab-content"> <div class="tab-pane fade in active" id="tab1primary"> <p><strong>Hobbies: </strong> Travelling </p> <p><strong>Educational Qualifications: </strong> MBA, Harvard, 2001 </p> <p><strong>Personal Connections: </strong> Geographical Distribution </p> <p><strong>Social Activity: </strong> Social Network Distribution </p> </div> <div class="tab-pane fade" id="tab2primary"> <p><strong>Professional Interests: </strong> Management </p> <p><strong>Work Experience: </strong> JP Morgan Bank, Manager, 3 years | Bank of America, Trainee, 4 years </p> <p><strong>Skills Endorsed: </strong> Financial Management, Business Analysis </p> <p><strong>Publications: </strong> BankTech Paper </p> <p><strong>Awards: </strong> Best Employee at JP Morgan, 2014 </p> <p><strong>Professional Network: </strong> Company wise And Role wise Distribution </p> </div> <div class="tab-pane fade" id="tab3primary"> <p><strong>Recently Talking About: </strong> Basel III, BigData, ApplePay </p> </div> <div class="tab-pane fade" id="tab4primary"> <p><strong>Past Deals: </strong> Deal2, 2011, CFGContact2 | Deal1, 2008, CFGContact1 </p> </div> </div> </div> </div> </div> </div> </div> </div> </div>
@import url(http://fonts.googleapis.com/css?family=Lato:400,700); body { font-family: 'Lato', 'sans-serif'; } .profile { min-height: 355px; display: inline-block; } figcaption.ratings { margin-top:20px; } figcaption.ratings a { color:#f1c40f; font-size:11px; } figcaption.ratings a:hover { color:#f39c12; text-decoration:none; } .divider { border-top:1px solid rgba(0,0,0,0.1); } .emphasis { border-top: 4px solid transparent; } .emphasis:hover { border-top: 4px solid #1abc9c; } .emphasis h2 { margin-bottom:0; } span.tags { background: #1abc9c; border-radius: 2px; color: #f5f5f5; font-weight: bold; padding: 2px 4px; } .dropdown-menu { background-color: #34495e; box-shadow: none; -webkit-box-shadow: none; width: 250px; margin-left: -125px; left: 50%; } .dropdown-menu .divider { background:none; } .dropdown-menu>li>a { color:#f5f5f5; } .dropup .dropdown-menu { margin-bottom:10px; } .dropup .dropdown-menu:before { content: ""; border-top: 10px solid #34495e; border-right: 10px solid transparent; border-left: 10px solid transparent; position: absolute; bottom: -10px; left: 50%; margin-left: -10px; z-index: 10; }

Related: See More


Questions / Comments: