BusinessThemeBootstrapDesign

This bootstrap snippet called "BusinessThemeBootstrapDesign" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab

<!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>infoasd@45155gmail.com</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>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview

@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********************************************/
                                    

This is the JS code for this bootstrap snippet

Copy, paste, change, customize and run the following JS code to get a result Like the one shown in the preview


$(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();

});
 

Information about this bootstrap snippet

Creator: HARUN PEHLIVAN

Bootstrap version: 3.3.7

Created: Sep 4th 2017, 11:18

Views: 54