<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 ---------->
<!-- Warming Up -->
<link href='http://fonts.googleapis.com/css?family=Buenard:700' rel='stylesheet' type='text/css'>
<script src="http://pupunzi.com/mb.components/mb.YTPlayer/demo/inc/jquery.mb.YTPlayer.js"></script>
<div id="navbar-main">
<!-- Fixed navbar -->
<div class="navbar navbar-white navbar-fixed-top navver">
<div class="container">
<div class="navbar-header">
<img src="https://www.drycleaningconnection.com/wp-content/themes/DryCC/img/png/logo.png" height="30" />
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#home" class="smoothScroll">Home</a></li>
<li> <a href="#about" class="smoothScroll"> About</a></li>
<li> <a href="#services" class="smoothScroll"> Services</a></li>
<li> <a href="#team" class="smoothScroll"> Team</a></li>
<li> <a href="#portfolio" class="smoothScroll"> Portfolio</a></li>
<li> <a href="#blog" class="smoothScroll"> Blog</a></li>
<li> <a href="#contact" class="smoothScroll"> Contact</a></li>
</div><!--/.nav-collapse -->
</div>
</div>
<!--Video Section-->
<section class="content-section video-section">
<div class="pattern-overlay">
<a id="bgndVideo" class="player" data-property="{videoURL:'https://www.youtube.com/watch?v=4D5Mn2QJVso',containment:'.video-section', quality:'large', autoPlay:true, mute:true, opacity:1}">bg</a>
<div class="container">
</div>
</div>
</section>
<!--Video Section Ends Here-->
<!-- ==== GREYWRAP ==== -->
<div id="greywrap">
<div class="row">
<div class="col-md-12"><h2>Clients</h2></div>
</div>
<div class="row">
<div class="col-lg-3 callout">
<img src="http://www.newnancowetachamber.org/logoimages/CowetaChamberLogo/CowetaChamberLogo.png" class="img-grayscale" style="max-width:200px;"/>
</div><!-- col-lg-4 -->
<div class="col-lg-3 callout">
<img src="http://www.subway.com/core/images/topNavBar/subway-logo.png" class="img-grayscale" style="max-width:200px;"/>
</div><!-- col-lg-4 -->
<div class="col-lg-3 callout">
<img src="http://www.newnancowetachamber.org/logoimages/CowetaChamberLogo/CowetaChamberLogo.png" class="img-grayscale" style="max-width:200px;"/>
</div><!-- col-lg-4 -->
<div class="col-lg-3 callout">
<img src="http://www.newnancowetachamber.org/logoimages/CowetaChamberLogo/CowetaChamberLogo.png" class="img-grayscale" style="max-width:200px;"/>
</div><!-- col-lg-4 -->
</div><!-- row -->
</div><!-- greywrap -->
<!-- carousel -->
<div class='row'>
<div class='col-md-offset-1 col-md-10'>
<div class="carousel slide" data-ride="carousel" 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 1 -->
<div class="item active">
<blockquote>
<div class="row">
<div class="col-sm-3 text-center">
<img class="img-circle" src="https://s3.amazonaws.com/uifaces/faces/twitter/kolage/128.jpg" style="width: 100px;height:100px;">
</div>
<div class="col-sm-9">
<p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit!</p>
<small>Someone famous</small>
</div>
</div>
</blockquote>
</div>
<!-- Quote 2 -->
<div class="item">
<blockquote>
<div class="row">
<div class="col-sm-3 text-center">
<img class="img-circle" src="https://s3.amazonaws.com/uifaces/faces/twitter/mijustin/128.jpg" style="width: 100px;height:100px;">
</div>
<div class="col-sm-9">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam auctor nec lacus ut tempor. Mauris.</p>
<small>Someone famous</small>
</div>
</div>
</blockquote>
</div>
<!-- Quote 3 -->
<div class="item">
<blockquote>
<div class="row">
<div class="col-sm-3 text-center">
<img class="img-circle" src="https://s3.amazonaws.com/uifaces/faces/twitter/keizgoesboom/128.jpg" style="width: 100px;height:100px;">
</div>
<div class="col-sm-9">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rutrum elit in arcu blandit, eget pretium nisl accumsan. Sed ultricies commodo tortor, eu pretium mauris.</p>
<small>Someone famous</small>
</div>
</div>
</blockquote>
</div>
</div>
<!-- Carousel Buttons Next/Prev -->
<a data-slide="prev" href="#quote-carousel" class="left carousel-control"><i class="fa fa-chevron-left"></i></a>
<a data-slide="next" href="#quote-carousel" class="right carousel-control"><i class="fa fa-chevron-right"></i></a>
</div>
</div>
</div>
<!--next block-->
<div class="about">Hello</div>
.video-section .pattern-overlay {
/*background-color: rgba(71, 71, 71, 0.59);*/
padding: 110px 0 32px;
min-height: 496px;
/* Incase of overlay problems just increase the min-height*/
}
.video-section h1, .video-section h3{
text-align:center;
color:#fff;
}
.video-section h1{
font-size:110px;
font-family: 'Buenard', serif;
font-weight:bold;
text-transform: uppercase;
margin: 40px auto 0px;
text-shadow: 1px 1px 1px #000;
-webkit-text-shadow: 1px 1px 1px #000;
-moz-text-shadow: 1px 1px 1px #000;
}
.video-section h3{
font-size: 25px;
font-weight:lighter;
margin: 0px auto 15px;
}
.video-section .buttonBar{display:none;}
.player {font-size: 1px;}
/* carousel */
#quote-carousel
{
padding: 0 10px 30px 10px;
margin-top: 30px;
}
/* Control buttons */
#quote-carousel .carousel-control
{
background: none;
color: #222;
font-size: 2.3em;
text-shadow: none;
margin-top: 30px;
}
/* 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: 250px;
height: 100px
}
/* End carousel */
.item blockquote {
border-left: none;
margin: 0;
}
.item blockquote img {
margin-bottom: 10px;
}
.item blockquote p:before {
content: "\f10d";
font-family: 'Fontawesome';
float: left;
margin-right: 10px;
}
/**
MEDIA QUERIES
*/
/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
#quote-carousel
{
margin-bottom: 0;
padding: 0 40px 30px 40px;
}
}
/* Small devices (tablets, up to 768px) */
@media (max-width: 768px) {
/* Make the indicators larger for easier clicking with fingers/thumb on mobile */
#quote-carousel .carousel-indicators {
bottom: -20px !important;
}
#quote-carousel .carousel-indicators li {
display: inline-block;
margin: 0px 5px;
width: 15px;
height: 15px;
}
#quote-carousel .carousel-indicators li.active {
margin: 0px 5px;
width: 20px;
height: 20px;
}
}
/*graywrap*/
#greywrap {
/*background: #f5f5f5;*/
/*background:#FC8C3F;*/
background:#0456A0;
margin-top: 0px;
padding-top: 40px;
border-bottom: 1px solid #ddd;
/*text-align: center;*/
color:#FFF;
}
#greywrap .callout {
margin-bottom: 20px;
}
#greywrap p {
margin-left: 30px;
margin-right: 30px;
letter-spacing: 1px;
padding-top: 15px;
padding-bottom: 15px;
}
#greywrap .icon {
font-size: 60px;
line-height: 30px;
margin-bottom: 10px;
}
/*custom*/
.navbar-white{
background-color: #FFF;
}
.img-grayscale{
-webkit-filter: grayscale(100%);
}
.quotes{
}
.about{
border-top: 1px solid #ddd;
background:#FC8C3F;
}
.navver{
background:#0456A0;
}
$(document).ready(function () {
$(".player").mb_YTPlayer();
$('#quote-carousel').carousel({
pause: true,
interval: 4000,
});
});
