HTML code
This is the html code used to create this bootstrap snippet, You can copy and paste the following html code inside a page with bootstrap 3.3.7 included, to get the result that you can see in the preview selection
Download<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>business.com</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://daneden.github.io/animate.css/animate.min.css">
<script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav class="top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-target="#myNav" data-toggle="collapse">
<span class="fa fa-align-justify" style="color:#FFF"></span>
</button>
<a href="" class="navbar navbar-brand"><img src="http://www.netservicesindia.com/images/Logo/Logo-Designing-India-Golbal.jpg" style="width: 169px;margin-top: -16px;" class="img-responsive"></a>
</div>
<div class="collapse navbar-collapse" id="myNav">
<ul class="nav navbar-nav">
<li><a href="http://deepak646.blogspot.in" target="_blank">HOME</a></li>
<li><a href="http://deepak646.blogspot.in" target="_blank">ABOUT US</a></li>
<li><a href="http://deepak646.blogspot.in" target="_blank">SERVICES</a></li>
<li><a href="http://deepak646.blogspot.in" target="_blank">WORK</a></li>
<li><a href="http://deepak646.blogspot.in" target="_blank">BLOG</a></li>
<li><a href="http://deepak646.blogspot.in" target="_blank">CONTACT</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href=""><span class="fa fa-linkedin animated wow fadeInRight"></span></a></li>
<li><a href=""><span class="fa fa-twitter animated wow fadeInRight" data-wow-delay=".2s"></span></a></li>
<li><a href=""><span class="fa fa-facebook animated wow fadeInRight" data-wow-delay=".4s"></span></a></li>
<li><a href=""><span class="fa fa-google-plus animated wow fadeInRight" data-wow-delay=".6s"></span></a></li>
</ul>
</div>
</div>
</nav>
<!-----------------nav-------------------->
<!------------------banner------------------->
<div class="container-fluid ">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner banner" role="listbox">
<div class="item active">
<div class="col-sm-6 col-sm-offset-1 slide">
<h1>CLEAN AND RESPONSIVE DESIGN......!</h1>
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et hendrerit ligula, vel dictum massa. Suspendisse potenti.</h2>
<p> Donec posuere velit id diam aliquam, at imperdiet velit malesuada. Vestibulum vitae vehicula tellus. Nam quis orci tristique, molestie turpis vel, commodo neque. </p>
<button class="btn btn-primary">READ MORE</button>
<div class="clearfix"></div>
</div>
</div>
<div class="item">
<div class="col-sm-6 col-sm-offset-1 slide">
<h1>POPULAR AND RESPONSIVE DESIGN......!</h1>
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et hendrerit ligula, vel dictum massa. Suspendisse potenti.</h2>
<p> Donec posuere velit id diam aliquam, at imperdiet velit malesuada. Vestibulum vitae vehicula tellus. Nam quis orci tristique, molestie turpis vel, commodo neque. </p>
<button class="btn btn-primary">READ MORE</button>
<div class="clearfix"></div>
</div>
</div>
<div class="item">
<div class="col-sm-6 col-sm-offset-1 slide">
<h1>COLL AND RESPONSIVE DESIGN......!</h1>
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et hendrerit ligula, vel dictum massa. Suspendisse potenti.</h2>
<p> Donec posuere velit id diam aliquam, at imperdiet velit malesuada. Vestibulum vitae vehicula tellus. Nam quis orci tristique, molestie turpis vel, commodo neque. </p>
<button class="btn btn-primary">READ MORE</button>
<div class="clearfix"></div>
</div>
</div>
<div class="item">
<div class="col-sm-6 col-sm-offset-1 slide">
<h1>FLAXIBLE AND RESPONSIVE DESIGN......!</h1>
<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et hendrerit ligula, vel dictum massa. Suspendisse potenti.</h2>
<p> Donec posuere velit id diam aliquam, at imperdiet velit malesuada. Vestibulum vitae vehicula tellus. Nam quis orci tristique, molestie turpis vel, commodo neque. </p>
<button class="btn btn-primary">READ MORE</button>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="control-box">
<a data-slide="prev" href="#myCarousel" class="carousel-control left"><span class="fa fa-angle-double-left"></span></a>
<a data-slide="next" href="#myCarousel" class="carousel-control right"> <span class="fa fa-angle-double-right"></span></a>
</div><!-- /.control-box -->
</div>
</div><!------banner---->
<div class="container-fluid slider">
<div class="container">
<div class="col-sm-8 animated wow fadeInLeft" data-wow-delay=".3s">
<h1>Purchase a very clean,Responsive and Multi Purpose Design....!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec efficitur lorem in sem ullamcorper..........</p>
</div>
<div class="col-sm-4 animated wow fadeInRight" data-wow-delay=".8s"><button class="btn btn-primary">Purchase Now</button></div>
</div>
</div><!------slider----->
<div class="container-fluid">
<div class="container">
<div class="col-sm-6 about-left animated wow zoomIn" data-wow-delay=".2s">
<h1>Welcome to Our Site</h1>
<hr>
<img src="http://www.kirkepaynesolicitors.com.au/wp-content/uploads/sites/1155/2016/03/gold-coast-business-purchase-lawyer.jpg" class="img-responsive">
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque fermentum mi malesuada eleifend cursus. Suspendisse sit amet dapibus tellus, non facilisis justo. Ut neque erat, ullamcorper et massa vel, semper congue nisl. Ut et ante eleifend, tempor turpis in, eleifend nibh. Maecenas facilisis turpis ipsum, nec consequat justo porta eu. Nam fringilla ante pretium lobortis consectetur.</p>
<button class="btn btn-primary pull-right">READ MORE</button>
<div class="clearfix"></div>
</div><!------left---->
<div class="col-sm-6 about-right animated wow zoomIn" data-wow-delay=".6s">
<h1>Recent Blogs</h1>
<hr>
<div id="myCarousel1" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="col-sm-12">
<p>Lorem ipsum</p>
<img src="http://alkof.com/wp-content/uploads/2015/05/How-To-Promote-A-Small-Business-For-Free-e1431334991453.jpg" class="img-responsive">
<h2><span class="fa fa-calendar"></span> 25-8-2015 <span class="fa fa-comment"></span> No Comment</h2>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque fermentum mi malesuada eleifend cursus. Suspendisse sit amet dapibus tellus, non facilisis justo.<a href="">READ MORE</a></p>
</div>
</div>
<div class="item">
<div class="col-sm-12">
<p>Lorem ipsum</p>
<img src="http://www.dezineguide.com/wp-content/uploads/2011/05/Download-Free-Business-Card.jpg" class="img-responsive">
<h2><span class="fa fa-calendar"></span> 25-8-2015 <span class="fa fa-comment"></span> No Comment</h2>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque fermentum mi malesuada eleifend cursus. Suspendisse sit amet dapibus tellus, non facilisis justo.<a href="">READ MORE</a></p>
</div>
</div>
<div class="item">
<div class="col-sm-12">
<p>Lorem ipsum</p>
<img src="https://www.outvise.com/wp-content/uploads/2014/12/business-8-dic14-600x250.jpg" class="img-responsive">
<h2><span class="fa fa-calendar"></span> 25-8-2015 <span class="fa fa-comment"></span> No Comment</h2>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque fermentum mi malesuada eleifend cursus. Suspendisse sit amet dapibus tellus, non facilisis justo.<a href="">READ MORE</a></p>
</div>
</div>
<div class="item">
<div class="col-sm-12">
<p>Lorem ipsum</p>
<img src="https://www.smallfish.com.au/wp-content/uploads/2015/09/trades-business-marketing-part-1.jpg" class="img-responsive">
<h2><span class="fa fa-calendar"></span> 25-8-2015 <span class="fa fa-comment"></span> No Comment</h2>
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque fermentum mi malesuada eleifend cursus. Suspendisse sit amet dapibus tellus, non facilisis justo.<a href="">READ MORE</a></p>
</div>
</div>
</div>
<div class="control-box1">
<a data-slide="prev" href="#myCarousel1" class="carousel-control left"><span class="fa fa-angle-double-left"></span></a>
<a data-slide="next" href="#myCarousel1" class="carousel-control right"> <span class="fa fa-angle-double-right"></span></a>
</div><!-- /.control-box -->
</div>
<hr>
</div><!----right--->
</div>
</div><!--------about-------->
<div class="container-fluid testimonials animated wow zoomIn" data-wow-delay=".4s">
<div class="container">
<h1>Testimonials</h1>
<hr>
<div id="myCarousel2" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel2" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel2" data-slide-to="1"></li>
<li data-target="#myCarousel2" data-slide-to="2"></li>
<li data-target="#myCarousel2" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="col-sm-12">
<div class="circle col-sm-2"><img src="http://www.revlocal.com/Files/images/Portraits/jfalvo_200_(2).jpg" class="img-circle img-responsive"></div>
<h2>Name</h2>
<p>Pellentesque eros ipsum, tristique non ornare at, dapibus sed enim. Mauris aliquam maximus dictum. Curabitur metus ex, rhoncus ut imperdiet eu, ornare ac nisi. Maecenas dignissim a augue eget ultrices. Ut eget ipsum justo. Fusce interdum diam a lectus porta vestibulum eget quis magna.</p>
</div>
</div>
<div class="item">
<div class="col-sm-12">
<div class="circle col-sm-2"><img src="https://mainstreetbusinesscapital.com/wp-content/uploads/2016/03/main-street-business-capital-team-nic-stephens-200x200.jpg" class="img-circle img-responsive"></div>
<h2>Name</h2>
<p>Pellentesque eros ipsum, tristique non ornare at, dapibus sed enim. Mauris aliquam maximus dictum. Curabitur metus ex, rhoncus ut imperdiet eu, ornare ac nisi. Maecenas dignissim a augue eget ultrices. Ut eget ipsum justo. Fusce interdum diam a lectus porta vestibulum eget quis magna.</p>
</div>
</div>
<div class="item">
<div class="col-sm-12">
<div class="circle col-sm-2"><img src="http://static.contentres.com/media/images/fbcf0ffc-7d8d-4bc5-8fc5-47941624e72c.jpg" class="img-circle img-responsive"></div>
<h2>Name</h2>
<p>Pellentesque eros ipsum, tristique non ornare at, dapibus sed enim. Mauris aliquam maximus dictum. Curabitur metus ex, rhoncus ut imperdiet eu, ornare ac nisi. Maecenas dignissim a augue eget ultrices. Ut eget ipsum justo. Fusce interdum diam a lectus porta vestibulum eget quis magna.</p>
</div>
</div>
<div class="item">
<div class="col-sm-12">
<div class="circle col-sm-2"><img src="http://www.revlocal.com/Files/images/Portraits/bdavidson_200.jpg" class="img-circle img-responsive"></div>
<h2>Name</h2>
<p>Pellentesque eros ipsum, tristique non ornare at, dapibus sed enim. Mauris aliquam maximus dictum. Curabitur metus ex, rhoncus ut imperdiet eu, ornare ac nisi. Maecenas dignissim a augue eget ultrices. Ut eget ipsum justo. Fusce interdum diam a lectus porta vestibulum eget quis magna.</p>
</div>
</div>
</div>
</div>
</div>
</div><!-------------Testimonials---------->
<div class="container-fluid last">
<div class="container">
<h1>Follow Us</h1>
<a href=""><span class="foll fa fa-twitter animated wow zoomIn"></span></a>
<a href=""><span class="foll1 fa fa-facebook animated wow zoomIn" data-wow-delay=".1s"></span></a>
<a href=""><span class="foll2 fa fa-google-plus animated wow zoomIn" data-wow-delay=".2s"></span></a>
<a href=""><span class="foll3 fa fa-linkedin animated wow zoomIn" data-wow-delay=".3s"></span></a>
<a href=""><span class="foll4 fa fa-dribbble animated wow zoomIn" data-wow-delay=".4s"></span></a>
<a href=""><span class="foll5 fa fa-digg animated wow zoomIn" data-wow-delay=".5s"></span></a>
<a href=""><span class="foll6 fa fa-youtube animated wow zoomIn" data-wow-delay=".6s"></span></a>
<a href=""><span class="foll7 fa fa-lastfm animated wow zoomIn" data-wow-delay=".7s"></span></a>
<a href=""><span class="foll8 fa fa-delicious animated wow zoomIn" data-wow-delay=".8s"></span></a>
</div>
<div class="container-fluid last-inner">
<div class="container">
<div class="col-sm-3 last-1 animated wow zoomIn" data-wow-delay=".2s">
<h1>Usefull Links</h1>
<hr>
<p><span class="fa fa-angle-double-right"></span>Powerful Layout Builder</p>
<p><span class="fa fa-angle-double-right"></span>Useful Shortcodes</p>
<p><span class="fa fa-angle-double-right"></span>Easy Admin</p>
<p><span class="fa fa-angle-double-right"></span>Awesome Mega Menu</p>
<p><span class="fa fa-angle-double-right"></span>Fully Responsive</p>
<p><span class="fa fa-angle-double-right"></span>Built With LESS</p>
</div>
<div class="col-sm-3 last-1 animated wow zoomIn" data-wow-delay=".4s">
<h1>Popular Tags</h1>
<hr>
<button class="btn btn-primary pull-left">Bussiness Template</button>
<button class="btn btn-primary pull-left">Clean</button>
<button class="btn btn-primary pull-left">Cool</button>
<button class="btn btn-primary pull-left">Flaxible</button>
<button class="btn btn-primary pull-left">joomla</button>
<button class="btn btn-primary pull-left">K2</button>
<button class="btn btn-primary pull-left">Media</button>
<button class="btn btn-primary pull-left">Popular</button>
<button class="btn btn-primary pull-left">Profeessional</button>
<button class="btn btn-primary pull-left">Responsive Theme</button>
</div>
<div class="col-sm-3 last-1 animated wow zoomIn" data-wow-delay=".6s">
<div class="clearfix"></div>
<h1>Address</h1>
<hr>
<blockquote><p>Address: <small> 1110 evegree Lane
Los Angeles,CA 90017</small></p></blockquote>
<blockquote><p>Tel: <small> 2154 2852 524,2452 5533 155
</small></p></blockquote>
<blockquote><p>Email: <small>[email protected]</small></p></blockquote>
</div>
<div class="col-sm-3 last-1 animated wow zoomIn" data-wow-delay=".8s">
<h1>About Us</h1>
<hr>
<p>Pellentesque eros ipsum, tristique non ornare at, dapibus sed enim. Mauris aliquam maximus dictum. Curabitur metus ex, rhoncus ut imperdiet eu, ornare ac nisi.</p>
<button class="btn btn-primary pull-left" style="margin:10px 0 10px 0">READ MORE</button>
</div>
</div>
</div>
</div><!-----client--->
<div class="container-fluid footer">
<p>Copyright © 2015 Templates.All Rights Reserved</p>
</div><!--footer-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>CSS code
This is the css code used to create this bootstrap snippet, You can copy and paste the following css code inside a page with bootstrap 3.3.7 included, to get the result that you can see in the preview selection
Download@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700);
@import url(http://fonts.googleapis.com/css?family=Oswald:400,700);
hr{width:100%;background-color:#999;margin:5px 0px;}
/*nav*/
.top{background-color:#0d8ccf}
#myNav ul{margin:0px;padding:0px;}
#myNav ul li{display:inline;}
#myNav ul li a{text-align:center; text-decoration:none; list-style:none; color:#FFF; font-family: 'Open Sans', sans-serif; font-weight:400; line-height:3;}
#myNav ul li a:hover{ background-color:#000;}
/*nav*/
/*banner*/
.control-box {text-align:center;width: 100%; }
.carousel-control{background-color:#000;color:#F00;border:0px;border-radius: 0px;display: inline-block;font-size:30px;opacity: 0.5;position: static; width:50px; position:absolute;height:50px; top:40%; bottom:50%;}
.carousel-inner img{width:100%;}
.control-box span{padding:10px 10px 10px 10px;}
.banner{background-image:url(http://www.gmento.com/assets/images/category_images/static/business2.jpg); background-repeat:no-repeat; background-position:center; background-size:100% 100%; background-size:cover; border-bottom:3px solid #FFF; border-top:2px solid #FFF;}
.slide h2{font-family: 'Open Sans', sans-serif; font-size:14px;color:#000; text-align:left; padding:15px; font-weight:400; background-color:#FFF; margin-bottom:20px;}
.slide p{font-family: 'Open Sans', sans-serif; font-size:14px;color:#000; text-align:left; padding:15px; font-weight:400; margin-bottom:20px;}
.slide h1{font-family: 'Oswald', sans-serif; color:#FFF; margin:0px;text-align:left; padding:30px; margin:70px 0 20px 0; background-color:#0f8bd1;}
.slide button{border:none;border-radius:0px;padding:15px 25px; font-family: 'Oswald', sans-serif; font-size:14px; margin-bottom:50px;}
/*banner*/
/*slider*/
.slider{background-color:#0f8bd1}
.slider h1{font-family: 'Oswald', sans-serif; color:#FFF; margin:0px;text-align:left; padding:30px 0px 0px 30px; font-size:20px;}
.slider p{font-family: 'Open Sans', sans-serif; font-size:14px;color:#FFF; text-align:left; padding:30px 0px 30px 30px; font-weight:400;}
.slider button{border:none;border-radius:0px;padding:20px 30px; font-family: 'Oswald', sans-serif; font-size:14px; margin:40px 0 30px 30px;}
/*slider*/
/*about*/
.about{background-color:#0f8bd1;}
.about img{width:100%;}
.about-left h1{font-family: 'Oswald', sans-serif; color:#000; margin:0px; text-align:left; padding:30px 0px 0px 0px; font-size:25px;}
.about-left p{font-family: 'Open Sans', sans-serif; font-size:13px;color:#333; text-align:justify; padding:10px 0px 10px 0px; font-weight:400;}
.about-left button{border:none;border-radius:0px;padding:15px 35px; font-family: 'Oswald', sans-serif; font-size:14px; margin:5px 0 10px 0px;}
.about-right h2{font-family: 'Open Sans', sans-serif; color:#000; margin:0px; text-align:left; padding:10px 0px 5px 0px; font-size:14px;}
.about-right h1{font-family: 'Oswald', sans-serif; color:#000; margin:0px; text-align:left; padding:30px 0px 0px 0px; font-size:25px;}
.about-right p{font-family: 'Open Sans', sans-serif; font-size:13px;color:#333; text-align:justify; font-weight:400;}
.control-box1{text-align:center;width:100%; }
.carousel-control1{background-color:#000;color:#F00;border:0px;border-radius: 0px;display:inline-block;font-size:30px;opacity: 0.5;position: static; width:50px; position:absolute;height:50px; top:40%; bottom:50%;}
.carousel-inner1 img{width:100%;}
.control-box1 span{padding:10px 10px 10px 10px;}
/*about*/
/*Testimonials*/
.testimonials{}
.circle{width:200px; height:200px;}
.testimonials h1{font-family: 'Oswald', sans-serif; color:#000; margin:0px; text-align:left; padding:10px 0px 0px 0px; font-size:25px;}
.testimonials h2{font-family: 'Open Sans', sans-serif; color:#000; margin:0px; text-align:left; padding:40px 0px 5px 10px; font-size:16px;}
.testimonials p{font-family: 'Open Sans', sans-serif; font-size:14px;color:#666; text-align:left; padding:10px 0px 5px 10px; font-weight:400; margin-bottom:50px;}
/*Testimonials*/
/*client*/
.last{background-color:#0d8ccf; text-align:center;}
.last h1{font-family: 'Oswald', sans-serif; color:#FFF; margin:0px; text-align:center; padding:30px 0px 0px 0px; font-size:30px;}
.last span{color:#FFF; padding:20px 25px; font-size:36px; margin-bottom:30px; margin-top:20px;}
.last a span:hover{background-color:#ffde00; color:#666;}
.foll{background-color:#07a6dc;}
.foll1{background-color:#2d5094}
.foll2{background-color:#ed2215}
.foll3{background-color:#00a8dc}
.foll4{background-color:#ff732e}
.foll5{background-color:#ba68b5}
.foll6{background-color:#ff1d1c}
.foll7{background-color:#ff3f35}
.foll8{background-color:#c3d200}
.last-inner{background-color:#4d4d4d;}
.last-inner h1{font-family: 'Open Sans', sans-serif; color:#FFF; margin:0px; text-align:left; padding:20px 0px 0px 0px; font-size:25px;}
.last-inner p{font-family: 'Open Sans', sans-serif; font-size:14px;color:#b9b8b4; text-align:left; padding:5px 0px 0px 0px; font-weight:400; margin:0px;}
.last-inner p span{font-size:14px;color:#FFF; text-align:left; padding:0px 5px 0 0px;margin:0px;}
.last-inner button{border:none;border-radius:0px;padding:10px 10px; font-family: 'Open Sans', sans-serif; font-size:14px; margin:2px;}
.last-inner blockquote{border:none; margin-top:0px; padding:0px;}
.last-inner small{ color:#FFF; margin-top:0px; font-size:13px;}
.last-1{margin-bottom:30px; margin-top:30px;}
/*client*/
.footer{background-color:#000;}
.footer p{font-family: 'Open Sans', sans-serif; font-size:15px; color:#FFF; text-align:center; padding:30px 0px 10px 0px; }
/************************************************************************************about-page******************************************************************************/
.about-main{}
.about-main img{width:100%; margin-top:10px;}
.about-main h2{font-family: 'Open Sans', sans-serif; color:#0d8ccf; margin:0px; text-align:left; padding:10px 0px 5px 0px; font-size:16px; line-height:20px;}
.about-main h1{font-family: 'Oswald', sans-serif; color:#000; margin:0px; text-align:left; padding:30px 0px 0px 0px; font-size:25px;}
.about-main p{font-family: 'Open Sans', sans-serif; font-size:13px;color:#333; text-align:justify; font-weight:400;padding:0px 0px 0px 0px;}
.about-main span{font-size:40px; text-align:center; color:#000; padding:10px; background-color:#CCC;}
/*team*/
.team{text-align:center;}
.team h1{font-family: 'Oswald', sans-serif; color:#000; margin:0px; text-align:left; padding:30px 0px 0px 0px; font-size:25px;}
.team-inner{margin-bottom:30px; margin-top:20px;}
.team-inner img{width:100%; }
.team-inner h2{font-family: 'Open Sans', sans-serif; color:#0d8ccf; margin:0px; text-align:left; padding:10px 0px 5px 0px; font-size:16px; line-height:20px;}
.team-inner p{font-family: 'Open Sans', sans-serif; font-size:13px;color:#333; text-align:left; font-weight:400;padding:0px 0px 0px 0px;}
.team-inner span{font-size:20px; color:#999; text-align:center; padding:10px 15px; border:1px solid #CCC; margin:1px;}
.team-inner span:hover{background-color:#0d8ccf; color:#FFF;}
.control-box4{text-align:right; width:100%; }
.carousel-control4{background-color:#000; color:#F00; border:0px;border-radius: 0px;display: inline-block;font-size:30px;opacity: 0.5;position: static; width:50px;height:50px; }
.carousel-inner4 img{width:100%;}
.control-box4 span{padding:10px 10px 10px 10px; text-align:center; margin-right:5px;}
/*team*/
/***************************************************about*******************************************/
/****************************services********************************************/
.services{text-align:center;}
.services h1{font-family: 'Oswald', sans-serif; color:#000; margin:0px; text-align:left; padding:30px 0px 0px 0px; font-size:25px;}
.services-inner{background-color:#0d8ccf; margin:10px 0px; border:10px solid #FFF;}
.services-inner h2{font-family:'Open Sans', sans-serif; color:#E2E2E2; margin:0px; text-align:left; padding:10px 0px 5px 0px; font-size:16px; line-height:20px;}
.services-inner span{font-size:100px; padding:20px; text-align:center; color:#CCC;}
.services-inner p{font-family: 'Open Sans', sans-serif; font-size:13px;color:#FFF; text-align:left; font-weight:400;}
.services-inner button{border:none;border-radius:0px;padding:10px; font-family: 'Open Sans', sans-serif; font-size:14px; margin-bottom:30px;}
/****************************services********************************************/
/****************************blog********************************************/
.blog{}
.blog h1{font-family: 'Oswald', sans-serif; color:#000; margin:0px; text-align:left; padding:30px 0px 0px 0px; font-size:25px;}
.blog-left h2{font-family:'Open Sans', sans-serif; color:#333; margin:0px; text-align:left; font-size:14px; font-weight:600;padding:5px 0px;margin-bottom:10px}
.blog-left span{padding:10px 10px; font-family:'Open Sans', sans-serif; color:#333; font-size:12px; text-align:center; background-color:#CCC;}
.blog-left img{width:100%; padding:10px 0px;}
.blog-left p{font-family: 'Open Sans', sans-serif; font-size:13px;color:#666; text-align:left; font-weight:400;}
.blog-left button{border:none;border-radius:0px;padding:10px; font-family: 'Open Sans', sans-serif; font-size:14px; float:left; margin-bottom:30px;}
.btn-group button{border:none;border-radius:0px;padding:10px 20px; font-family: 'Open Sans', sans-serif; font-size:14px; float:left; margin:0 10px 50px 10px;}
.blog-right h1{font-family: 'Oswald', sans-serif; color:#000; margin:0px; text-align:left; padding:30px 0px 0px 0px; font-size:25px;}
.blog-right h2{font-family:'Open Sans', sans-serif; color:#333; margin:0px; text-align:left; font-size:14px; font-weight:600;padding:5px 0px;margin:10px 0px;}
.blog-right a{text-decoration:none;list-style:none;}
.blog-right h2 span{margin-right:5px; color:#F00;}
/****************************blog********************************************/
/****************************work********************************************/
.work{}
.work h1{font-family: 'Oswald', sans-serif; color:#000; margin:0px; text-align:left; padding:30px 0px 0px 0px; font-size:25px;}
.work p{font-family: 'Open Sans', sans-serif; font-size:14px;color:#666; text-align:left; font-weight:400; margin-bottom:20px;}
#filters{margin:1%;padding:0;list-style:none;font-family:'Open Sans', sans-serif; font-size:16px; font-weight:600; text-align:center;}
#filters li {float:left;}
#filters li span {display: block;padding: 10px 30px;text-decoration: none;color: #666;cursor: pointer;text-transform: uppercase;}
#filters li span.active {background:#0d8ccf;color:#fff;}
.portfolio{background-color:#333; border:10px solid #FFF;}
.portfolio{padding:0px;}
#portfoliolist .portfolio {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box;display:none;float:left;overflow:hidden;}
.portfolio-wrapper {overflow:hidden;position: relative !important;cursor:pointer;}
.portfolio-wrapper h2{font-family:'Open Sans', sans-serif; color:#FFF; margin:0px; text-align:left; font-size:14px; font-weight:600;padding:5px 0px;}
.portfolio-wrapper p{font-family: 'Open Sans', sans-serif; font-size:13px;color:#FFF; text-align:left; font-weight:400;}
.portfolio-wrapper button{border:none;border-radius:0px;padding:10px; font-family: 'Open Sans', sans-serif; font-size:14px; margin-bottom:30px;}
/****************************work********************************************/
/****************************contact********************************************/
.contact{}
.contact h1{font-family: 'Oswald', sans-serif; color:#000; margin:0px; text-align:left; padding:30px 0px 0px 0px; font-size:25px;}
.contact p{font-family: 'Open Sans', sans-serif; font-size:14px;color:#666; text-align:left; font-weight:400; margin-bottom:20px;}
.contact-left{ margin-top:10px;}
.contact-left h1{font-family: 'Oswald', sans-serif; color:#000; margin:0px; text-align:left; padding:30px 0px 20px 0px; font-size:25px;}
.form-control{font-family: 'Open Sans', sans-serif; font-size:14px;}
.contact-left button{border:none;border-radius:0px;padding:20px 30px; font-family: 'Open Sans', sans-serif; font-size:14px; margin-bottom:30px;}
.contact-right{}
.contact-right h1{font-family: 'Oswald', sans-serif; color:#000; margin:0px; text-align:left; padding:30px 0px 20px 0px; font-size:25px;}
.contact-right p{font-family: 'Open Sans', sans-serif; font-size:14px;color:#666; text-align:left; font-weight:400; margin-bottom:5px;}
.container-fluid{padding:0px !important;}
.carousel-indicators li {
display: inline-block;
width: 10px!important;
height: 10px!important;
margin: 1px!important;
text-indent: -999px;
cursor: pointer;
background-color: #000 \9!important;
background-color: rgba(0,0,0,0)!important;
border: 2px solid #44a5da!important;
border-radius: 10px !important;
}
/****************************contact********************************************/Javascript/Jquery code
This is the javascript code used to create this bootstrap snippet, You can copy and paste the following javascript code inside a page with bootstrap 3.3.7 included, to get the result that you can see in the preview selection
Download
$(document).ready(function(){
//fancybox.js init
$('.fancybox').fancybox({
openEffect : 'none',
closeEffect : 'none',
prevEffect : 'none',
nextEffect : 'none',
arrows : false,
helpers : {
media : {},
buttons : {}
}
});
//wow.js init
wow = new WOW(
{
animateClass: 'animated',
mobile: false,
offset: 100
}
);
wow.init();
});
About this bootstrap example/template
This example/template, BusinessThemeBootstrapDesign, was published on Sep 4th 2017, 11:18 by HARUN PEHLIVAN and it is free.
We hope you will enjoy this awesome snippet and stay tuned for the latest updates, bootdey snippets are already used in thousands of blogs, websites and projects. We believe it will save your precious time and gives trendy look to your next web project.
We always try to offer the best beautiful and responsive source of Bootstrap code examples and components.
This code example currectly have 1.0K views, Using this bootstrap snippet you have the following benefits:
Bootstrap 3.3.7
<link rel='stylesheet' href='https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<script src='https://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
This code example is based on bootstrap 3.3.7 and the grid system of this framework
Responsive
Based on bootstrap framework makes all the layouts perfectly responsive for all devices
Crossbrowser compatibility
Tested on all major browsers, it works smoothly on all of them
Jquery plugins
Great built-in plugins with jquery framework, you can easy to change all declarations
semantic html 5
Built on html / css3 the code quality is really amazing
Simple Integration
This code example can be simply integrated on existing sites and new ones too, all you need to do is copy the code and start working