"one page"
Bootstrap 3.3.0 Snippet by ankur123

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <div class="container-fluid" style="background-color:#38afec;color:#fff;padding:10px;"> <a class="navbar-brand" href="#">WebSiteName</a> </div> <nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div> <div class="collapse navbar-collapse" id="myNavbar" style="padding: 5px;"> <ul class="nav navbar-nav"> <li><a href="#section1">Movies</a></li> <li><a href="#section2">Sports</a></li> <li><a href="#section3">Attraction</a></li> <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Events <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#section41">Section 4-1</a></li> <li><a href="#section42">Section 4-2</a></li> </ul> </li> </ul> </div> </div> </div> </nav> <div id="section1" class="container-fluid text-center"> <div class="row"> <div class="carousel slide" data-ride="carousel" data-interval="false" id="quote-carousel"> <!-- Bottom Carousel Indicators --> <ol class="carousel-indicators"> <li data-target="#quote-carousel" data-slide-to="0" class="active"></li> <li data-target="#quote-carousel" data-slide-to="1"></li> <li data-target="#quote-carousel" data-slide-to="2"></li> </ol> <!-- Carousel Slides / Quotes --> <div class="carousel-inner _quote"> <!-- Quote 1 --> <div class="item active"> <img class="img2 img-responsive" src="//placehold.it/1300x500/55EE55"> </div> <!-- Quote 2 --> <div class="item"> <img class="img2 img-responsive" src="//placehold.it/1300x500/CCFEFE"> </div> <!-- Quote 3 --> <div class="item"> <img class="img2 img-responsive" src="//placehold.it/1300x500/55EE88"> </div> </div> <!-- Carousel Buttons Next/Prev --> <a class="left carousel-control hidden-xs" href="#quote-carousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a> <a class="right carousel-control hidden-xs" href="#quote-carousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a> </div> </div> </div> <div id="section2" class="container-fluid text-center"> <div class="row"> <div class="col-sm-3"> <div class="category_cards"></div> </div> <div class="col-sm-3"> <div class="category_cards"></div> </div> <div class="col-sm-3"> <div class="category_cards"></div> </div> <div class="col-sm-3"> <div class="category_cards"></div> </div> </div> <div class="row"> <div class="col-sm-3"> <div class="category_cards"></div> </div> <div class="col-sm-3"> <div class="category_cards"></div> </div> <div class="col-sm-3"> <div class="category_cards"></div> </div> <div class="col-sm-3"> <div class="category_cards"></div> </div> </div> </div> <div id="section3" class="container-fluid text-center"> <div class="row"> <div class="col-sm-2 text-center"> <h2></h2> <a href="#" class="btn btn-info">View all</a> </div> <div class="col-sm-10"> <div class="carousel slide row" data-ride="carousel" data-type="multi" data-interval="false" id="Q_mv_carousel"> <div class="carousel-inner"> <div class="item active"> <div class="col-md-4 col-xs-12"> <div class="bg-default"> <a href="#"><img src="//placehold.it/1300x500/55EE55" class="img-responsive "></a> </div> </div> </div> <div class="item"> <div class="col-md-4 col-xs-12"> <div class="bg-default"> <a href="#"><img src="//placehold.it/1300x500/55EE55" class="img-responsive "></a> </div> </div> </div> <div class="item"> <div class="col-md-4 col-xs-12"> <div class="bg-default"> <a href="#"><img src="//placehold.it/1300x500/55EE55" class="img-responsive "></a> </div> </div> </div> <div class="item"> <div class="col-md-4 col-xs-12"> <div class="bg-default"> <a href="#"><img src="//placehold.it/1300x500/55EE55" class="img-responsive "></a> </div> </div> </div> <div class="item"> <div class="col-md-4 col-xs-12"> <div class="bg-default"> <a href="#"><img src="//placehold.it/1300x500/55EE55" class="img-responsive "></a> </div> </div> </div> <div class="item"> <div class="col-md-4 col-xs-12"> <div class="bg-default"> <a href="#"><img src="//placehold.it/1300x500/55EE55" class="img-responsive "></a> </div> </div> </div> </div> <a class="left carousel-control" href="#Q_mv_carousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left bg1"></i></a> <a class="right carousel-control" href="#Q_mv_carousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right bg1"></i></a> </div><!--carousel end--> </div> </div> </div> <div id="section4" class="container-fluid text-center"> <div class="row"> <div class="col-sm-2 text-center"> <h2></h2> <a href="#" class="btn btn-info">View all</a> </div> <div class="col-sm-10"> <div class="carousel slide row" data-ride="carousel" data-type="multi" data-interval="false" id="mplace_carousel"> <div class="carousel-inner"> <div class="item active"> <div class="col-md-4 col-xs-12"> <div class="bg-default"> <a href="#"><img src="//placehold.it/1300x500/55EE55" class="img-responsive "></a> </div> </div> </div> <div class="item"> <div class="col-md-4 col-xs-12"> <div class="bg-default"> <a href="#"><img src="//placehold.it/1300x500/55EE55" class="img-responsive "></a> </div> </div> </div> <div class="item"> <div class="col-md-4 col-xs-12"> <div class="bg-default"> <a href="#"><img src="//placehold.it/1300x500/55EE55" class="img-responsive "></a> </div> </div> </div> <div class="item"> <div class="col-md-4 col-xs-12"> <div class="bg-default"> <a href="#"><img src="//placehold.it/1300x500/55EE55" class="img-responsive "></a> </div> </div> </div> <div class="item"> <div class="col-md-4 col-xs-12"> <div class="bg-default"> <a href="#"><img src="//placehold.it/1300x500/55EE55" class="img-responsive "></a> </div> </div> </div> <div class="item"> <div class="col-md-4 col-xs-12"> <div class="bg-default"> <a href="#"><img src="//placehold.it/1300x500/55EE55" class="img-responsive "></a> </div> </div> </div> </div> <a class="left carousel-control" href="#mplace_carousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left bg1"></i></a> <a class="right carousel-control" href="#mplace_carousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right bg1"></i></a> </div><!--carousel end--> </div> </div> </div> <div id="section5" class="container-fluid text-center"> <div class="row"> <div class="col-sm-4 col-xs-6"><a title="Image 1" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350"></a></div> <div class=" col-sm-4 col-xs-6"><a title="Image 2" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350/2255EE"></a></div> <div class=" col-sm-4 col-xs-6"><a title="Image 3" href="#"><img class="thumbnail img-responsive" src="//placehold.it/600x350/449955/FFF"></a></div> </div> </div> <div id="section6" class="container-fluid text-center"> <div class="row"> <div class="header"> <div class="text-vertical-center col-sm-8"> <button type="button" class="btn btn-default btn-circle btn-xl"><i class="glyphicon glyphicon-ok"></i></button> <button type="button" class="btn btn-primary btn-circle btn-xl"><i class="glyphicon glyphicon-list"></i></button> <button type="button" class="btn btn-success btn-circle btn-xl"><i class="glyphicon glyphicon-link"></i></button> <button type="button" class="btn btn-info btn-circle btn-xl"><i class="glyphicon glyphicon-ok"></i></button> <button type="button" class="btn btn-warning btn-circle btn-xl"><i class="glyphicon glyphicon-remove"></i></button> </div> <div class="col-sm-4 text-vertical-center"> <h2>Offers Supplies & Electronics</h2> <p>Set up your office With your gadgets</p> <a href="#" class="btn btn-info">View more >></a> </div> </div> </div> </div> <div id="section7" class="container-fluid text-center"> <div class="row"> <div class="col-sm-12"> <div class="carousel slide row" data-ride="carousel" data-type="multi" data-interval="false" id="mplace_product_carousel"> <div class="carousel-inner"> <div class="item active"> <div class="col-md-4 col-xs-12"> <div class="bg-default"> <a href="#"><img src="//placehold.it/1300x500/55EE55" class="img-responsive "></a> </div> </div> </div> <div class="item"> <div class="col-md-4 col-xs-12"> <div class="bg-default"> <a href="#"><img src="//placehold.it/1300x500/55EE55" class="img-responsive "></a> </div> </div> </div> <div class="item"> <div class="col-md-4 col-xs-12"> <div class="bg-default"> <a href="#"><img src="//placehold.it/1300x500/55EE55" class="img-responsive "></a> </div> </div> </div> <div class="item"> <div class="col-md-4 col-xs-12"> <div class="bg-default"> <a href="#"><img src="//placehold.it/1300x500/55EE55" class="img-responsive "></a> </div> </div> </div> <div class="item"> <div class="col-md-4 col-xs-12"> <div class="bg-default"> <a href="#"><img src="//placehold.it/1300x500/55EE55" class="img-responsive "></a> </div> </div> </div> <div class="item"> <div class="col-md-4 col-xs-12"> <div class="bg-default"> <a href="#"><img src="//placehold.it/1300x500/55EE55" class="img-responsive "></a> </div> </div> </div> </div> <a class="left carousel-control" href="#mplace_product_carousel" data-slide="prev"><i class="glyphicon glyphicon-chevron-left bg1"></i></a> <a class="right carousel-control" href="#mplace_product_carousel" data-slide="next"><i class="glyphicon glyphicon-chevron-right bg1"></i></a> </div><!--carousel end--> </div> </div> </div> <div id="section8" class="container-fluid text-center"> <div class="row"> <div class="col-sm-6"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <div class="quote_1"><i class="fa fa-quote_1-left fa-4x"></i></div> <div class="carousel slide" id="fade-quote_1-carousel" data-ride="carousel" data-interval="3000"> <!-- Carousel indicators --> <ol class="carousel-indicators"> <li data-target="#fade-quote_1-carousel" data-slide-to="0"></li> <li data-target="#fade-quote_1-carousel" data-slide-to="1"></li> <li data-target="#fade-quote_1-carousel" data-slide-to="2" class="active"></li> <li data-target="#fade-quote_1-carousel" data-slide-to="3"></li> <li data-target="#fade-quote_1-carousel" data-slide-to="4"></li> <li data-target="#fade-quote_1-carousel" data-slide-to="5"></li> </ol> <!-- Carousel items --> <div class="carousel-inner"> <div class="item"> <div class="profile-circle" style="background-color: rgba(0,0,0,.2);"></div> <blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, veritatis nulla eum laudantium totam tempore optio doloremque laboriosam quas, quos eaque molestias odio aut eius animi. Impedit temporibus nisi accusamus.</p> </blockquote> </div> <div class="item"> <div class="profile-circle" style="background-color: rgba(77,5,51,.2);"></div> <blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, veritatis nulla eum laudantium totam tempore optio doloremque laboriosam quas, quos eaque molestias odio aut eius animi. Impedit temporibus nisi accusamus.</p> </blockquote> </div> <div class="active item"> <div class="profile-circle" style="background-color: rgba(145,169,216,.2);"></div> <blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, veritatis nulla eum laudantium totam tempore optio doloremque laboriosam quas, quos eaque molestias odio aut eius animi. Impedit temporibus nisi accusamus.</p> </blockquote> </div> <div class="item"> <div class="profile-circle" style="background-color: rgba(77,5,51,.2);"></div> <blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, veritatis nulla eum laudantium totam tempore optio doloremque laboriosam quas, quos eaque molestias odio aut eius animi. Impedit temporibus nisi accusamus.</p> </blockquote> </div> <div class="item"> <div class="profile-circle" style="background-color: rgba(77,5,51,.2);"></div> <blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, veritatis nulla eum laudantium totam tempore optio doloremque laboriosam quas, quos eaque molestias odio aut eius animi. Impedit temporibus nisi accusamus.</p> </blockquote> </div> <div class="item"> <div class="profile-circle" style="background-color: rgba(77,5,51,.2);"></div> <blockquote> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, veritatis nulla eum laudantium totam tempore optio doloremque laboriosam quas, quos eaque molestias odio aut eius animi. Impedit temporibus nisi accusamus.</p> </blockquote> </div> </div> </div> </div> </div> </div> <div class="col-sm-6 text-center"> <h3>Latest Events</h3> <div class="row"> <div class="col-md-9"> <h3> Carousel Product Cart Slider</h3> </div> <div class="col-md-3"> <!-- Controls --> <div class="controls pull-right"> <a class="left fa fa-chevron-left btn btn-success" href="#carousel-example" data-slide="prev"></a><a class="right fa fa-chevron-right btn btn-success" href="#carousel-example" data-slide="next"></a> </div> </div> </div> <div id="carousel-example" class="carousel slide" data-ride="carousel" data-interval="false"> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <div class="row"> <div class="col-sm-4"> <div class="col-item"> <div class="photo"> <img src="http://placehold.it/350x260" class="img-responsive" alt="a" /> </div> <div class="info"> <div class="row"> <div class="price"> <h5> Product Example</h5> </div> </div> </div> </div> </div> <div class="col-sm-4"> <div class="col-item"> <div class="photo"> <img src="http://placehold.it/350x260" class="img-responsive" alt="a" /> </div> <div class="info"> <div class="row"> <div class="price"> <h5> Product Example</h5> </div> </div> </div> </div> </div> <div class="col-sm-4"> <div class="col-item"> <div class="photo"> <img src="http://placehold.it/350x260" class="img-responsive" alt="a" /> </div> <div class="info"> <div class="row"> <div class="price"> <h5> Next Sample Product</h5> </div> </div> </div> </div> </div> </div> </div> <div class="item"> <div class="row"> <div class="col-sm-4"> <div class="col-item"> <div class="photo"> <img src="http://placehold.it/350x260" class="img-responsive" alt="a" /> </div> <div class="info"> <div class="row"> <div class="price"> <h5> Grouped Product</h5> </div> </div> </div> </div> </div> <div class="col-sm-4"> <div class="col-item"> <div class="photo"> <img src="http://placehold.it/350x260" class="img-responsive" alt="a" /> </div> <div class="info"> <div class="row"> <div class="price"> <h5> Product with Variants</h5> </div> </div> </div> </div> </div> <div class="col-sm-4"> <div class="col-item"> <div class="photo"> <img src="http://placehold.it/350x260" class="img-responsive" alt="a" /> </div> <div class="info"> <div class="row"> <div class="price"> <h5> Product with Variants</h5> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <div id="section9" class="container-fluid text-center"> <div class="row"> <div class="col-sm-4"></div> <div class="col-sm-4"></div> <div class="col-sm-4"></div> </div> </div>
body { background: #fff !important; font-size: 16px !important; font-size: 1.6rem !important; line-height: 1.1 !important; font-weight: normal !important; color: #333 !important; font-family: 'Varela Round', sans-serif !important; font-style: normal !important; font-weight: 300 !important; } h2 { font-weight: 700 !important; } .brand_name{ font-weight: 700 !important; font-size: 30px !important; color: #333 !important; } .navbar { margin-bottom: 0px !important; } .navbar-default { background-color: rgba(255,255,255,.95) !important; } .navbar-default .navbar-nav > li > a { font-size: 1.0em; } .navbar-brand.brand_name { color: #9192ff; } .navbar-brand { float: left; height: 50px; padding: 15px 15px; font-size: 30px; line-height: 20px; color: #fff; } .affix { top:0; width: 100%; z-index: 9999 !important; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; } .affix-top { position: static !important; top: -35px !important; } .affix + .container-fluid { padding-top: 70px; } .sitename { /*margin: 15px 0px;*/ } #section1 {height:auto;top: 50px; background: #eee;} #section2 {padding:20px 50px; height:auto;color: #000; background-color: #fff;} #section3 {padding:20px 50px; height:auto;background-color: #eee;} #section4 {padding:20px 50px;height:auto;/*color: #fff; /*background-color: #00bcd4;*/} #section5 {padding:0px;height:auto;/*color: #fff; /*background-color: #009688;*/} #section6 {padding:0px;height:auto;/*color: #fff; /*background-color: #009688;*/} #section7 {padding:50px;height:auto;/*color: #fff; /*background-color: #009688;*/} #section8 {padding:0px 50px;height:auto;color: #fff; background-color: #009688;} /*slider*/ /*quote*/ #quote-carousel { /*padding: 30px 10px;*/ } ._quote { height: auto !important; } /* Control buttons */ #quote-carousel .carousel-control { background: none; color: #222; font-size: 2.3em; text-shadow: none; } /* Previous button */ #quote-carousel .carousel-control.left { left: -12px; } /* Next button */ #quote-carousel .carousel-control.right { right: -12px !important; } /* Changes the position of the indicators */ #quote-carousel .carousel-indicators { right: 50%; top: auto; bottom: 0px; margin-right: -19px; } /* Changes the color of the indicators */ #quote-carousel .carousel-indicators li { background: #c0c0c0; } #quote-carousel .carousel-indicators .active { background: #333333; } #quote-carousel img { width: 100%; height: 230px; } /*section 2 */ .category_cards { width: 100%; height: 100px; background: #eee; margin: 10px 0px; } /*section4*/ .header { display: table; position: relative; width: 100%; height: 35%; background: url(img/1.jpg) no-repeat center center scroll; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; color: #fff; } .text-vertical-center { display: table-cell; text-align: center; vertical-align: middle; padding: 50px; } .btn-circle { width: 30px; height: 30px; text-align: center; padding: 6px 0; font-size: 12px; line-height: 1.428571429; border-radius: 15px; } .btn-circle.btn-xl { width: 70px; height: 70px; padding: 10px 16px; font-size: 24px; line-height: 1.33; border-radius: 35px; margin: 40px; } /*section 8*/ /*quote carosel*/ .quote_1 { color: rgba(0,0,0,.1); text-align: center; margin-bottom: 30px; } /*-------------------------------*/ /* Carousel Fade Transition */ /*-------------------------------*/ #fade-quote_1-carousel.carousel { padding-bottom: 60px; } #fade-quote_1-carousel.carousel .carousel-inner .item { opacity: 0; -webkit-transition-property: opacity; -ms-transition-property: opacity; transition-property: opacity; } #fade-quote_1-carousel.carousel .carousel-inner .active { opacity: 1; -webkit-transition-property: opacity; -ms-transition-property: opacity; transition-property: opacity; } #fade-quote_1-carousel.carousel .carousel-indicators { bottom: 10px; } #fade-quote_1-carousel.carousel .carousel-indicators > li { background-color: #e84a64; border: none; } #fade-quote_1-carousel blockquote { text-align: center; border: none; } #fade-quote_1-carousel .profile-circle { width: 100px; height: 100px; margin: 0 auto; border-radius: 100px; } /*top sellor slider*/ @import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css); .col-item { border: 2px solid #E1E1E1; border-radius: 5px; background: #FFF; } .col-item .photo img { margin: 0 auto; width: 100%; } .col-item .info { padding: 10px; border-radius: 0 0 5px 5px; margin-top: 1px; } .col-item:hover .info { background-color: #F5F5DC; } .col-item .price h5 { line-height: 20px; margin: 0; } .price-text-color { color: #219FD1; } .col-item .info { color: #777; } .col-item .rating { /*width: 50%;*/ float: left; font-size: 17px; text-align: right; line-height: 52px; margin-bottom: 10px; height: 52px; } .col-item { border-top: 1px solid #E1E1E1; } .clear-left { clear: left; } .col-item .separator p { line-height: 20px; margin-bottom: 0; margin-top: 10px; text-align: center; } .col-item .separator p i { margin-right: 5px; } .col-item .btn-add { width: 50%; float: left; } .col-item .btn-add { border-right: 1px solid #E1E1E1; } .col-item .btn-details { width: 50%; float: left; padding-left: 10px; } .controls { margin-top: 20px; } [data-slide="prev"] { margin-right: 10px; }
$(document).ready(function() { $('#list').click(function(event){event.preventDefault();$('#products .item').addClass('list-group-item');}); $('#grid').click(function(event){event.preventDefault();$('#products .item').removeClass('list-group-item');$('#products .item').addClass('grid-group-item');}); });

Related: See More


Questions / Comments: