<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');});
});
