Bootstrap framework snippet Profile header with carousel

This bootstrap framework snippet "Profile header with carousel" was 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,cover photo


<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'> <div class="col-md-12"> <header id="header"> <div class="slider"> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="500"> <div class="carousel-inner" role="listbox"> <div class="item active"> <img src="https://placehold.it/1200x400/FF4500/ffffff&text=Bootdey.com"> </div> <div class="item"> <img src="https://placehold.it/1200x400/00bcd4/ffffff&text=Bootdey.com"> </div> <div class="item"> <img src="https://placehold.it/1200x400/20B2AA/ffffff&text=Bootdey.com"> </div> </div> <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="fa fa-angle-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="fa fa-angle-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div> <nav class="navbar navbar-default"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#mainNav"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"><img class="img-responsive" src="https://bootdey.com/img/Content/avatar/avatar1.png"></a> <span class="site-name"><b>Dey-Dey</b> Bejarano</span> <span class="site-description">Developer by passion</span> </div> <div class="collapse navbar-collapse" id="mainNav"> <ul class="nav main-menu navbar-nav"> <li><a href="#"><i class="fa fa-home"></i> Profile</a></li> <li><a href="#">About</a></li> <li><a href="#">Friends</a></li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="#"><i class="fa fa-facebook"></i></a></li> <li><a href="#"><i class="fa fa-twitter"></i></a></li> <li><a href="#"><i class="fa fa-google-plus"></i></a></li> </ul> </div> </nav> </header> </div>
@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,400,700); body { background: #e9eaed; } h1, h2, h3, h4, h5, h6 { font-family: 'Open Sans Condensed', sans-serif, sans-serif; } .container {} .wrapper {} #header { border: 1px solid #ddd; margin-bottom: 20px; } .navbar { border-radius: 0; margin-bottom: 0; border: none; font-family: 'Open Sans Condensed', sans-serif, sans-serif; } .navbar > li >a {} .navbar-header {} .navbar-brand { width: 160px; height: 160px; float: left; padding: 0; margin-top: -130px; overflow: hidden; border: 3px solid #eee; margin-left: 15px; background: #333; text-align: center; line-height: 160px; color: #fff !important; font-size: 2em; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .site-name { color: #fff; font-size: 2.4em; float: left; margin-top: -75px !important; margin-left: 15px; font-family: 'Open Sans Condensed', sans-serif, sans-serif; } .site-description { color: #fff; font-size: 1.3em; float: left; margin-top: -30px !important; margin-left: 15px; } .main-menu { position: absolute; left: 190px; } .slider, .carousel { max-height: 360px; overflow: hidden; } .carousel-control .fa-angle-left, .carousel-control .fa-angle-right { position: absolute; top: 50%; font-size: 2em; z-index: 5; display: inline-block; } .carousel-control { background-color: transparent; background-image: none !important; } .carousel-control:hover, .carousel-control:focus { color: #fff; text-decoration: none; background-color: transparent !important; background-image: none !important; outline: 0; } @media (max-width: 768px) { .navbar-brand { max-width: 100px; max-height: 100px; float: left; margin-top: -65px; margin-left: 15px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .navbar { border-radius: 0; margin-bottom: 0; border: none; } .main-menu { left: 0; position: relative; } } @media (max-width: 490px) { .site-name { color: #fff; font-size: 1.5em; float: left; line-height: 20px; margin-top: -100px !important; margin-left: 125px; } .site-description { color: #fff; font-size: 1.3em; float: left; margin-top: -80px !important; margin-left: 125px; } }

Creator of this snippet

Dey Dey

Bootstrap version: 3.3.7

Created: Jun 25th, 23:38

Views: 1.3K