Add Code for Class
<section class="banner"><div id="bannerSlider" class="carousel carousel-fade slide" data-ride="carousel">
<div class="carousel-inner">
<div class="item active" style="background-image:url(images/banner.jpg);">
<div class="carousel-caption">
<div class="container">
<div class="col-md-12">
<div class="content">
<h1>Complete Inbound Leads </h1>
<h2>from product evaluation sites </h2>
<div class="btn-green"><a href="#">Know more</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="item" style="background-image:url(images/banner2.jpg);">
<div class="carousel-caption">
<div class="container">
<div class="col-md-12">
<div class="content">
<h1>Capture & translate </h1>
<h2>augment inbound leads</h2>
</div>
</div>
</div>
</div>
</div>
<div class="item" style="background-image:url(images/banner3.jpg);">
<div class="carousel-caption">
<div class="container">
<div class="col-md-12">
<div class="content">
<h1>B2B Marketers Generate</h1>
<h2> are incomplete or duplicates</h2>
<div class="btn-green"><a href="#">Know more</a></div>
</div>
</div>
</div>
</div>
</div>
</div>
<ol class="carousel-indicators">
<li data-target="#bannerSlider" data-slide-to="0" class="active"></li>
<li data-target="#bannerSlider" data-slide-to="1"></li>
<li data-target="#bannerSlider" data-slide-to="2"></li>
</ol>
</div>
</section>
Add CSS
.banner {
position: relative;
text-align: center;
color: #fff;
min-height: 300px;
background:#000;
}
.banner .container {
position: absolute;
width: 100%;
top: 49%;
}
.banner .carousel-fade .carousel-inner .item {
opacity: 0;
-webkit-transition-property: opacity;
-moz-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
background-attachment:fixed;
}
.banner .carousel-fade .carousel-inner .active {
opacity: 1;
}
.banner .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right {
left: 0;
opacity: 0;
z-index: 1;
}
.banner .carousel-fade .carousel-inner .next.left, .carousel-fade .carousel-inner .prev.right {
opacity: 1;
}
.banner .carousel-fade .carousel-control {
z-index: 2;
}
.banner .carousel-caption {
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.banner .carousel-inner > .item {
background-size: cover;
background-position: center;
min-height: 500px;
}
.banner .carousel-indicators {
bottom: 4%;
}
.banner .carousel-indicators li {
display: inline-block;
width: 12px;
height: 12px;
margin: 3px;
text-indent: -999px;
cursor: pointer;
background-color: #fff;
border: 1px solid #fff;
opacity:.3;
border-radius: 10px;
}
.banner .carousel-indicators .active {
width: 12px;
height: 12px;
margin: 3px;
background: none;
opacity:1;
border: 2px solid #99cc00;
}
@media (min-width: 320px) and (max-width:767px) {
.banner .carousel-indicators {
top: 600px;
}
}
@media (max-width: 320px) {
.banner .carousel-fade .carousel-inner .item {
background-attachment:scroll;
}
}
Responsive Menu
http://www.cssscript.com/demo/pure-css-mobile-compatible-responsive-dropdown-menu/
http://www.w3schools.com/howto/howto_js_topnav.asp
No comments:
Post a Comment