mixing of j-query all effects use nd navigation used in bootstrap




For supporting file is use in online link below :-



<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css"/>

 <link rel="stylesheet" type="text/css" href=" https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/css/bootstrap.css"/>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.0/js/bootstrap.min.js"></script>


For css or js download  file link below :-






Html :-



<div class="sub_header">
<div class="container">
<div class="cont-client">
<ul>

<li><a href="">support@yourdomain.com</a></li>
<li><a href="">+1-0123-456-789</a></li>


</ul>
</div>


<ul class="socail">

<li><a href=""></a> </li>
<li><a href=""></a> </li>
<li><a href=""></a> </li>
<li><a href=""></a> </li>
<li><a href=""></a> </li>
<li><a href=""></a> </li>
<li><a href=""></a> </li>
</ul>

</div>
</div>

<div class="clearfix"></div>

<div class="container">
<!-- search box code START here-->
   <div class="outer-serch">
 <div class="clr"></div>
<form class="search-form">
<input type="search" class="form-control"  placeholder="Search …" class="search-field">
</form>
</div>

   <!-- search box code END here-->
<div class="clr"></div>

<nav class="navbar navbar-default">

  <div class="container-fluid animated">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#"><img src="img/logo.jpg"/></a>
    </div>
  <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

<div class="search"> <i class="fa fa-search" aria-hidden="true"></i></div>

<ul class="nav navbar-nav navbar-right">
<li><a href="#">Home </a></li>


<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Courses <i class="fa fa-angle-down" aria-hidden="true"></i></a>
<ul class="dropdown-menu">
<li><a href="#">Courses 1</a></li>
<li><a href="#">Courses 2</a></li>
<li><a href="#">Courses 3</a></li>
<li><a href="#">Courses 4</a></li>
</ul>
</li>
<li><a href="#">Our Staff</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Pages <i class="fa fa-angle-down" aria-hidden="true"></i></a>
<ul class="dropdown-menu">
<li><a href="#">Pages 1</a></li>
<li><a href="#">Pages 2</a></li>
<li><a href="#">Pages 3</a></li>
<li><a href="#">Pages 4</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Gallery <i class="fa fa-angle-down" aria-hidden="true"></i></a>
<ul class="dropdown-menu">
<li><a href="#">Gallery 1</a></li>
<li><a href="#">Gallery 2</a></li>
<li><a href="#">Gallery 3</a></li>
<li><a href="#">Gallery 4</a></li>
</ul>
</li>

<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Contact Us <i class="fa fa-angle-down" aria-hidden="true"></i></a>
<ul class="dropdown-menu">
<li><a href="#">Contact Us 1</a></li>
<li><a href="#">Contact Us 2</a></li>
<li><a href="#">Contact Us 3</a></li>
<li><a href="#">Contact Us 4</a></li>
</ul>
</li>
</ul>

    </div>
    <!-- /.navbar-collapse -->
  </div>

  <!-- /.container-fluid -->

</nav>

</div>

 <div class="clearfix"></div>



  <!--Main Slider-->
    <section class="main-slider" data-start-height="800" data-slide-overlay="yes">
     
        <div class="tp-banner-container">
            <div class="tp-banner">
                <ul>
                    <li data-transition="fade" data-slotamount="1" data-masterspeed="1000" data-thumb="img/Blog-03.jpg"  data-saveperformance="off"  data-title="Awesome Title Here">
                    <img src="img/Blog-03.jpg"  alt=""  data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat"> 
                    
                    <div class="tp-caption sfl sfb tp-resizeme"
                    data-x="left" data-hoffset="15"
                    data-y="center" data-voffset="-70"
                    data-speed="1500"
                    data-start="0"
                    data-easing="easeOutExpo"
                    data-splitin="none"
                    data-splitout="none"
                    data-elementdelay="0.01"
                    data-endelementdelay="0.3"
                    data-endspeed="1200"
                    data-endeasing="Power4.easeIn"><h3>Best for you</h3></div>
                    
                    <div class="tp-caption sfl sfb tp-resizeme"
                    data-x="left" data-hoffset="15"
                    data-y="center" data-voffset="-20"
                    data-speed="1500"
                    data-start="500"
                    data-easing="easeOutExpo"
                    data-splitin="none"
                    data-splitout="none"
                    data-elementdelay="0.01"
                    data-endelementdelay="0.3"
                    data-endspeed="1200"
                    data-endeasing="Power4.easeIn"><h2>Drive Safe & Get License</h2></div>
                    
                    <div class="tp-caption sfl sfb tp-resizeme"
                    data-x="left" data-hoffset="15"
                    data-y="center" data-voffset="40"
                    data-speed="1500"
                    data-start="1000"
                    data-easing="easeOutExpo"
                    data-splitin="none"
                    data-splitout="none"
                    data-elementdelay="0.01"
                    data-endelementdelay="0.3"
                    data-endspeed="1200"
                    data-endeasing="Power4.easeIn"><div class="normal-text">Lorem ipsum dolLorem ipsum dolor sit amet, consectetur adipiscing elit. <br> Sed ultrices ipsum nonltrices ipsum non</div></div>
                    
                    <div class="tp-caption sfl sfb tp-resizeme"
                    data-x="left" data-hoffset="15"
                    data-y="center" data-voffset="110"
                    data-speed="1500"
                    data-start="1500"
                    data-easing="easeOutExpo"
                    data-splitin="none"
                    data-splitout="none"
                    data-elementdelay="0.01"
                    data-endelementdelay="0.3"
                    data-endspeed="1200"
                    data-endeasing="Power4.easeIn"><a href="services.html" class="theme-btn btn-style-one">Read More</a> &nbsp; &nbsp; <a href="#" class="theme-btn btn-style-two">see Pricing</a></div>
                 </li>
                    
                    <li data-transition="fade" data-slotamount="1" data-masterspeed="1000" data-thumb="img/Blog-02.jpg"  data-saveperformance="off"  data-title="Awesome Title Here">
                    <img src="img/Blog-02.jpg"  alt=""  data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat">    
                    <div class="tp-caption sft sfb tp-resizeme"
                    data-x="center" data-hoffset="0"
                    data-y="center" data-voffset="-70"
                    data-speed="1500"
                    data-start="0"
                    data-easing="easeOutExpo"
                    data-splitin="none"
                    data-splitout="none"
                    data-elementdelay="0.01"
                    data-endelementdelay="0.3"
                    data-endspeed="1200"
                    data-endeasing="Power4.easeIn"><h3>Best for you</h3></div>
                    
                    <div class="tp-caption sft sfb tp-resizeme"
                    data-x="center" data-hoffset="0"
                    data-y="center" data-voffset="-20"
                    data-speed="1500"
                    data-start="500"
                    data-easing="easeOutExpo"
                    data-splitin="none"
                    data-splitout="none"
                    data-elementdelay="0.01"
                    data-endelementdelay="0.3"
                    data-endspeed="1200"
                    data-endeasing="Power4.easeIn"><h2>make a sucessful drive with us!</h2></div>
                    
                    <div class="tp-caption sfb sfb tp-resizeme"
                    data-x="center" data-hoffset="0"
                    data-y="center" data-voffset="40"
                    data-speed="1500"
                    data-start="1000"
                    data-easing="easeOutExpo"
                    data-splitin="none"
                    data-splitout="none"
                    data-elementdelay="0.01"
                    data-endelementdelay="0.3"
                    data-endspeed="1200"
                    data-endeasing="Power4.easeIn"><div class="normal-text text-center">Lorem ipsum dolLorem ipsum dolor sit amet, consectetur adipiscing elit <br> dolLorem ipsum dolor sit amet, consectetur adipiscin.</div></div>
                    
                    <div class="tp-caption sfb sfb tp-resizeme"
                    data-x="center" data-hoffset="0"
                    data-y="center" data-voffset="110"
                    data-speed="1500"
                    data-start="1500"
                    data-easing="easeOutExpo"
                    data-splitin="none"
                    data-splitout="none"
                    data-elementdelay="0.01"
                    data-endelementdelay="0.3"
                    data-endspeed="1200"
                    data-endeasing="Power4.easeIn"><a href="services.html" class="theme-btn btn-style-one">Read More</a> &nbsp; &nbsp; <a href="#" class="theme-btn btn-style-two">see Pricing</a></div>
                    
                    </li>
                    
                    <li data-transition="fade" data-slotamount="1" data-masterspeed="1000" data-thumb="img/Blog-01.jpg"  data-saveperformance="off"  data-title="Awesome Title Here">
                    <img src="img/Blog-01.jpg"  alt=""  data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat"> 
                    
                    <div class="tp-caption sfl sfb tp-resizeme"
                    data-x="left" data-hoffset="15"
                    data-y="center" data-voffset="-80"
                    data-speed="1500"
                    data-start="0"
                    data-easing="easeOutExpo"
                    data-splitin="none"
                    data-splitout="none"
                    data-elementdelay="0.01"
                    data-endelementdelay="0.3"
                    data-endspeed="1200"
                    data-endeasing="Power4.easeIn"><h4>welcome to our driving school</h4></div>
                    
                    <div class="tp-caption sfl sfb tp-resizeme"
                    data-x="left" data-hoffset="15"
                    data-y="center" data-voffset="-10"
                    data-speed="1500"
                    data-start="500"
                    data-easing="easeOutExpo"
                    data-splitin="none"
                    data-splitout="none"
                    data-elementdelay="0.01"
                    data-endelementdelay="0.3"
                    data-endspeed="1200"
                    data-endeasing="Power4.easeIn"><h2>WE ARE FOCUSED ON YOUR <br> SUCCESS</h2></div>
                    
                    <div class="tp-caption sfl sfb tp-resizeme"
                    data-x="left" data-hoffset="15"
                    data-y="center" data-voffset="70"
                    data-speed="1500"
                    data-start="1000"
                    data-easing="easeOutExpo"
                    data-splitin="none"
                    data-splitout="none"
                    data-elementdelay="0.01"
                    data-endelementdelay="0.3"
                    data-endspeed="1200"
                    data-endeasing="Power4.easeIn"><div class="normal-text">Lorem ipsum dolLorem ipsum dolor sit amet, consectetur adipiscing elit. <br> Sed ultrices ipsum nonltrices ipsum non</div></div>
                    
                    <div class="tp-caption sfl sfb tp-resizeme"
                    data-x="left" data-hoffset="15"
                    data-y="center" data-voffset="140"
                    data-speed="1500"
                    data-start="1500"
                    data-easing="easeOutExpo"
                    data-splitin="none"
                    data-splitout="none"
                    data-elementdelay="0.01"
                    data-endelementdelay="0.3"
                    data-endspeed="1200"
                    data-endeasing="Power4.easeIn"><a href="services.html" class="theme-btn btn-style-one">Read More</a> &nbsp; &nbsp; <a href="#" class="theme-btn btn-style-two">see Pricing</a></div>
                    </li>
                    
                    
                    <li data-transition="fade" data-slotamount="1" data-masterspeed="1000" data-thumb="img/banner.jpg"  data-saveperformance="off"  data-title="Awesome Title Here">
                    <img src="img/banner.jpg"  alt=""  data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat"> 
                    
                    <div class="tp-caption sfl sfb tp-resizeme"
                    data-x="left" data-hoffset="15"
                    data-y="center" data-voffset="-70"
                    data-speed="1500"
                    data-start="0"
                    data-easing="easeOutExpo"
                    data-splitin="none"
                    data-splitout="none"
                    data-elementdelay="0.01"
                    data-endelementdelay="0.3"
                    data-endspeed="1200"
                    data-endeasing="Power4.easeIn"><h3>Best for you</h3></div>
                    
                    <div class="tp-caption sfl sfb tp-resizeme"
                    data-x="left" data-hoffset="15"
                    data-y="center" data-voffset="-20"
                    data-speed="1500"
                    data-start="500"
                    data-easing="easeOutExpo"
                    data-splitin="none"
                    data-splitout="none"
                    data-elementdelay="0.01"
                    data-endelementdelay="0.3"
                    data-endspeed="1200"
                    data-endeasing="Power4.easeIn"><h2>Drive Safe & Get License</h2></div>
                    
                    <div class="tp-caption sfl sfb tp-resizeme"
                    data-x="left" data-hoffset="15"
                    data-y="center" data-voffset="40"
                    data-speed="1500"
                    data-start="1000"
                    data-easing="easeOutExpo"
                    data-splitin="none"
                    data-splitout="none"
                    data-elementdelay="0.01"
                    data-endelementdelay="0.3"
                    data-endspeed="1200"
                    data-endeasing="Power4.easeIn"><div class="normal-text">Lorem ipsum dolLorem ipsum dolor sit amet, consectetur adipiscing elit. <br> Sed ultrices ipsum nonltrices ipsum non</div></div>
                    
                    <div class="tp-caption sfl sfb tp-resizeme"
                    data-x="left" data-hoffset="15"
                    data-y="center" data-voffset="110"
                    data-speed="1500"
                    data-start="1500"
                    data-easing="easeOutExpo"
                    data-splitin="none"
                    data-splitout="none"
                    data-elementdelay="0.01"
                    data-endelementdelay="0.3"
                    data-endspeed="1200"
                    data-endeasing="Power4.easeIn"><a href="services.html" class="theme-btn btn-style-one">Read More</a> &nbsp; &nbsp; <a href="#" class="theme-btn btn-style-two">see Pricing</a></div>
                 </li>
                 </ul>
               <div class="tp-bannertimer"></div>
            </div>
        </div>
     </section>
   <!--End Main Slider-->
    <div class="clr"></div>
    

     <!--Start Portfolio Section-->
    <section class="portfolio padding-style1">
        <div class="portfolio-header">
            <h4 class="section-title"></h4>
        </div>
        <div class="callouts-wrapper">
  <div class="container">
    <div class="row">

      <div class="col-sm-6 col-md-4">
        <div class="callouts">
         <div class="callouts-box text-center">
            <div class="icon-box"><i class="fa fa-book"></i></div>
            <div class="box-header">
              <h3>Awesome Courses</h3>
            </div>
            <div class="divider bg-primary"></div>
            <div class="box-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et</p>            
              <p class="rmf"><a href="">Read More...</a></p>
            </div> 
          </div>
        </div>
      </div>

      <div class="col-sm-6 col-md-4">
        <div class="callouts">
          <div class="callouts-box text-center">
            <div class="icon-box"><i class="fa fa-users " aria-hidden="true"></i></div>
            <div class="box-header">
              <h3>Qualified Teachers</h3>
            </div>
            <div class="divider bg-primary"></div>
            <div class="box-body">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et</p>
            <p class="rmf"><a href="">Read More...</a></p>
            </div>
          </div>
        </div>
      </div>


      <div class="col-sm-6 col-md-4">
        <div class="callouts">
          <div class="callouts-box text-center">
            <div class="icon-box"><i class="fa fa-android" aria-hidden="true"></i></div>
            <div class="box-header">
              <h3>App Development</h3>
            </div>
            <div class="divider bg-primary"></div>
            <div class="box-body">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et</p>
            <p class="rmf"><a href="">Read More...</a></p>
           </div>
          </div>
        </div>
      </div>


      <div class="col-sm-6 col-md-4">
        <div class="callouts">
          <div class="callouts-box text-center">
            <div class="icon-box"><i class="fa fa-globe" aria-hidden="true"></i></div>
            <div class="box-header">
              <h3>Online Classes</h3>
            </div>
            <div class="divider bg-primary"></div>
            <div class="box-body">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et</p>
            <p class="rmf"><a href="">Read More...</a></p>
            </div>
          </div>
        </div>
      </div>


      <div class="col-sm-6 col-md-4">
        <div class="callouts">
          <div class="callouts-box text-center">
            <div class="icon-box"><i class="fa fa-truck" aria-hidden="true"></i></div>
            <div class="box-header">
              <h3>Transportation</h3>
            </div>
            <div class="divider bg-primary"></div>
            <div class="box-body">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et</p>
            <p class="rmf"><a href="">Read More...</a></p>
            </div>
          </div>
        </div>
      </div>


      <div class="col-sm-6 col-md-4">
        <div class="callouts">
          <div class="callouts-box text-center">
            <div class="icon-box"><i class="fa fa-users" aria-hidden="true"></i></div>
            <div class="box-header">
              <h3>Customer Support</h3>
            </div>
            <div class="divider bg-primary"></div>
            <div class="box-body">
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et</p>
            <p class="rmf"><a href="http://sbtechnosoft.com/college-education/" target="_blank">Read More...</a></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
    </section>
    <!--End Portfolio Section-->
    
    
    
   <!--back to top start-->  
   <a href="#" class="scrollToTop">^</a>
   <!--back to top end-->
     
    

CSS


*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0}
body{ margin:0px; padding:0px;} 
a{ text-decoration:none !important; transition: all 0.3s ease 0s;}
.clr{ clear:both;}   

.sub_header{float:left; width:100%; background-color:#3eb2ce; min-height:2px;}

/*company contact start*/
.cont-client{ float:left;}
.cont-client ul{list-style:none; margin:0px; padding:0px; text-decoration:none;}
.cont-client ul li{ padding:10px; position:relative; float:left;} 

.cont-client ul li:nth-child(1):before{font-family: FontAwesome; content: "\f003"; display: inline-block; padding-right: 10px; vertical-align: middle; color:#fff;}

.cont-client ul li:nth-child(2):before{font-family: FontAwesome; content: "\f095"; display: inline-block; padding-right: 10px; vertical-align: middle; color:#fff; } 

.cont-client ul li a{ color:#FFFFFF; font-size:13px; text-decoration:none;} 
.cont-client ul li a:hover{ color:#e4e4e4;} 
/*company contact end*/     
  
/*Social icons start code*/     
.socail {float: right;margin:0px; padding:0px; list-style:none; text-decoration:none;}
.socail li{float:left !important; padding:10px; cursor:pointer;}

.socail li:nth-child(1):before{font-family: FontAwesome; content: "\f09a"; display: inline-block; vertical-align: middle; color:#fff; -moz-transition:all 300ms ease; -webkit-transition:all 300ms ease; -ms-transition:all 300ms ease; -o-transition:all 300ms ease; transition:all 300ms ease;}
.socail li:hover:nth-child(1):before{color:#294072}
  
.socail li:nth-child(2):before{font-family: FontAwesome; content: "\f099"; display: inline-block; vertical-align: middle; color:#fff; -moz-transition:all 300ms ease; -webkit-transition:all 300ms ease; -ms-transition:all 300ms ease; -o-transition:all 300ms ease; transition:all 300ms ease;}
.socail li:hover:nth-child(2):before{color:#000000}

.socail li:nth-child(3):before{font-family: FontAwesome; content: "\f0e1"; display: inline-block; vertical-align: middle; color:#fff; -moz-transition:all 300ms ease; -webkit-transition:all 300ms ease; -ms-transition:all 300ms ease; -o-transition:all 300ms ease; transition:all 300ms ease;}
.socail li:hover:nth-child(3):before{color:#015fa7}

.socail li:nth-child(4):before{font-family: FontAwesome; content: "\f231"; display: inline-block; vertical-align: middle; color:#fff; -moz-transition:all 300ms ease; -webkit-transition:all 300ms ease; -ms-transition:all 300ms ease; -o-transition:all 300ms ease; transition:all 300ms ease;}
.socail li:hover:nth-child(4):before{color:#b6272b}

.socail li:nth-child(5):before{font-family: FontAwesome; content: "\f0d5"; display: inline-block; vertical-align: middle; color:#fff; -moz-transition:all 300ms ease; -webkit-transition:all 300ms ease; -ms-transition:all 300ms ease; -o-transition:all 300ms ease; transition:all 300ms ease;}
.socail li:hover:nth-child(5):before{color:#c83d26}

.socail li:nth-child(6):before{font-family: FontAwesome; content: "\f16a"; display: inline-block; vertical-align: middle; color:#fff; -moz-transition:all 300ms ease; -webkit-transition:all 300ms ease; -ms-transition:all 300ms ease; -o-transition:all 300ms ease; transition:all 300ms ease;}
.socail li:hover:nth-child(6):before{color:#ed1b24}

.socail li:nth-child(7):before{font-family: FontAwesome; content: "\f17d"; display: inline-block; vertical-align: middle; color:#fff; -moz-transition:all 300ms ease; -webkit-transition:all 300ms ease; -ms-transition:all 300ms ease; -o-transition:all 300ms ease; transition:all 300ms ease;}
.socail li:hover:nth-child(7):before{color:#e66b03}
/*Social icons end code*/        
   

/*Search code past here for propogation start*/ 
.search{ float:right; width:35px; height:35px; border-radius:50%; background:#3EB2CE; border:2px solid #2390aa; margin-left:10px; color:#FFFFFF; position:relative; top:15px; text-align:center; padding-top:4px;  cursor:pointer; right:-23px;} 
.outer-serch{display: none; float: left; right:0px; position: relative; top: 100px; z-index: 10000;left:0}
.search-form{margin-top: 5px; position: absolute; width: 300px; left: 835px; top: -48px;}
/*Search code past here for propogation end*/ 


/*navigation formating start code*/
.navbar-default {background-color: #fff; border-color: #fff;}
.navbar {border: 1px solid transparent; margin-bottom: 0px; min-height: 50px; position: relative;}
.navbar-right {margin-top:10px;}
.nav li:hover{background-color:#fff; position:relative; transition:all 300ms ease;}
.nav li:hover:before{background-color: #3EB2CE; content: ""; height: 2px; left: 15px; position: absolute; top: 11px; width: 21px;}  
.nav li ul li:hover:before{background-color: transparent;}  
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {background-color: #fff; color: #3EB2CE;}
/*navigation formating end code*/   
   

/*navigation fixed code start*/ 
.fixed{z-index: 9999; position: fixed !important; left: 0; top: 0; width: 100%; transition: all 0.3s ease 0s; padding:0px 30px; -webkit-box-shadow: 0px 5px 10px 0px rgba(125,125,125,1); -moz-box-shadow: 0px 5px 10px 0px rgba(125,125,125,1); box-shadow: 0px 5px 10px 0px rgba(125,125,125,1);}
/*navigation fixed code end*/ 

    
/* slider code start*/
.btn-style-one{position:relative; padding:9px 36px; line-height:24px; color:#ffffff; font-size:14px; font-weight:700;border-radius:50px; background:#005dbe; border:2px solid #005dbe; text-transform:uppercase; font-family: 'Ubuntu', sans-serif;}
.btn-style-one:hover{color:#005dbe; background:none; border-color:#005dbe;}
.btn-style-two{position:relative; padding:9px 36px; line-height:24px; color:#005dbe; font-size:14px; font-weight:700;border-radius:50px; background:#ffffff; border:2px solid #ffffff; text-transform:uppercase; font-family: 'Ubuntu', sans-serif;}
.btn-style-two:hover{background:#005dbe; color:#ffffff; border-color:#005dbe;}
.main-slider .overlay-layer{position:absolute; left:0px; top:0px; width:100%; height:100%; display:block; background-color:rgba(0,0,0,0.55);}
.main-slider .tp-caption{z-index:5 !important;}
.main-slider .tp-dottedoverlay{background-color:rgba(0,0,0,0.35) !important;}
.main-slider h2{font-size:36px; color:#ffffff; font-weight:700; line-height:1.2em; text-transform:uppercase;}
.main-slider h3{font-size:30px; color:#ffffff; font-weight:500; line-height:1.2em; text-transform:uppercase;}
.main-slider .normal-text{font-weight:400; line-height:1.8em; color:#ffffff; font-size:15px; font-family: 'Ubuntu', sans-serif;}
.main-slider h4{font-weight:500; line-height:1.4em; color:#ffffff; font-size:16px; letter-spacing:1px; text-transform:uppercase;}
.main-slider .btn-style-one{color:#ffffff !important;}
.main-slider .btn-style-one:hover{color:#005dbe !important;}
.main-slider .btn-style-two{color: #005dbe !important;}
.main-slider .btn-style-two:hover{color: #ffffff !important;}
.main-slider .tparrows.preview3,.main-slider .tparrows.preview3{background:none !important; width:50px !important; overflow:hidden; margin-top:-10px !important; height:55px !important;}
.main-slider .tparrows.preview3::after{top:0px; color:#777777; font-size:16px; height:55px !important; line-height:55px; width:35px !important; padding:0px; background-color:rgba(255,255,255,0.4); border-radius:50px; -moz-transition:all 300ms ease; -webkit-transition:all 300ms ease; -ms-transition:all 300ms ease; -o-transition:all 300ms ease; transition:all 300ms ease;}
.main-slider .tparrows.tp-leftarrow.preview3::after{content: "\f104"; font-family: 'FontAwesome';}
.main-slider .tparrows.tp-rightarrow.preview3::after{content: "\f105"; font-family: 'FontAwesome';}
.main-slider .tparrows.preview3.tp-leftarrow{left:30px !important;}
.main-slider .tparrows.preview3.tp-rightarrow{right:20px !important;}
.main-slider .tparrows.preview3:hover::after{color:#777777; background:#fff;}
.main-slider .tparrows.preview3 .tp-arr-iwrapper{visibility:hidden; opacity:0; display:none;}
.main-slider .tp-bannertimer,.main-slider .tp-bullets{display:none !important; }
.navbar{border-radius: 0px;}
/*slider code end*/

/* boxes animation section code start*/
.callouts-wrapper .callouts{align-items: stretch; background-color: #fff; display: flex; flex-direction: column; float: left;padding: 20px 0; text-align: center; width: 100%;} 
.callouts-box::before, .callouts-box::after {border: 1px solid #e5e7e9; content: ""; height: calc(100% - 35px); pointer-events: none; position: absolute; transition: all 0.33s ease 0s; width: calc(100% - 35px);}
.callouts-box.hover::before, .callouts-box.hover::after, .callouts-box:hover::before, .callouts-box:hover::after {height: 100%; width: 100%;}
.callouts-box::before {border-width: 1px 0 0 1px; left: 0; top: 0;}
.callouts-box::after {border-width: 0 1px 1px 0; bottom: 0; right: 0;}
.callouts-box{align-items: center; cursor: default; display: inline-flex; flex-flow: column nowrap; justify-content: center; margin-left: auto; margin-right: auto; max-width: 400px; padding: 30px 10px 40px; position: relative; text-align: center; width: 100%;}
.callouts-box .divider {height: 2px; margin: 13px auto; max-width: 100%; transition: all 0.33s ease 0s; width: 49px;}
.callouts-box .box-header, .callouts-box .box-body {filter: blur(0px); position: relative; transition: all 0.33s ease 0s;will-change: transform;}
.callouts-box:hover .box-body {transform: translateY(9px);}
.callouts-box:hover .box-header, .callouts-box:hover .icon-box {transform: translateY(-9px);}
.callouts-box.hover .divider, .callouts-box:hover .divider {width: 168px;}
.callouts-wrapper .callouts .callouts-box .icon-box {font-size: 30px; transition: all 0.33s ease 0s;}
.callouts-wrapper .callouts p{color: #999; font-size: 14px; line-height: 23px; margin: 0;padding: 0;}
.callouts-wrapper .callouts h3 {color: #272727; font-size: 20px; font-weight: 600; margin: 10px 0 0; position: relative; text-align: center;}
.about-wrapper {float: left;padding: 0;position: relative;width: 100%;z-index: 0;}
.about-wrapper-inner {position: relative;z-index: 1;}
.aboutus-box {background: #2b2f40 none repeat scroll 0 0;display: flex;flex-flow: row-reverse nowrap;padding: 80px 30px;}
.aboutus-box .aboutus-box-image {display: block;flex-shrink: 0;}
.aboutus-box .aboutus-box-body {flex-grow: 1;padding-right: 45px;}
.callouts-box.hover::before, .callouts-box.hover::after, .callouts-box:hover::before, .callouts-box:hover::after {border-color: #3eb2ce;}
.rmf{text-align:center; margin-top:12px !important;}
/* boxes animation section code end*/

/* Scroll back to top start */
.scrollToTop{width:40px; height:33px; padding:4px; text-align:center; color: #fff; font-weight:bold; font-size:20px !important; text-decoration: none; position:fixed; bottom:1px; right:10px; display:none; background:#000000; border-radius:4px; z-index:999;}
.scrollToTop:hover{text-decoration:none !important; color:#FFFFFF !important;}
/* Scroll back to top end */



Js :-


   
<!-- Revlution slider code start here with effects-->
 <script type="text/javascript">
(function($) {
 //Revolution Slider
 if($('.main-slider .tp-banner').length){
  
  var MainSlider = $('.main-slider');
  var strtHeight = MainSlider.attr('data-start-height');
  var slideOverlay =  "'"+ MainSlider.attr('data-slide-overlay') +"'";
  
  $('.main-slider .tp-banner').show().revolution({
    dottedOverlay: slideOverlay,
    delay:5000,
    startwidth:1200,
    startheight:strtHeight,
    hideThumbs:600,

    thumbWidth:80,
    thumbHeight:50,
    thumbAmount:5,

    navigationType:"bullet",
    navigationArrows:"0",
    navigationStyle:"preview3",

    touchenabled:"on",
    onHoverStop:"off",

    swipe_velocity: 0.7,
    swipe_min_touches: 1,
    swipe_max_touches: 1,
    drag_block_vertical: false,

    parallax:"mouse",
    parallaxBgFreeze:"on",
    parallaxLevels:[7,4,3,2,5,4,3,2,1,0],

    keyboardNavigation:"off",

    navigationHAlign:"center",
    navigationVAlign:"bottom",
    navigationHOffset:0,
    navigationVOffset:50,

    soloArrowLeftHalign:"left",
    soloArrowLeftValign:"bottom",
    soloArrowLeftHOffset:20,
    soloArrowLeftVOffset:0,

    soloArrowRightHalign:"right",
    soloArrowRightValign:"center",
    soloArrowRightHOffset:20,
    soloArrowRightVOffset:0,

    shadow:0,
    fullWidth:"on",
    fullScreen:"off",

    spinner:"spinner4",

    stopLoop:"off",
    stopAfterLoops:-1,
    stopAtSlide:-1,

    shuffle:"off",

    autoHeight:"off",
    forceFullWidth:"on",

    hideThumbsOnMobile:"on",
    hideNavDelayOnMobile:1500,
    hideBulletsOnMobile:"on",
    hideArrowsOnMobile:"on",
    hideThumbsUnderResolution:0,

    hideSliderAtLimit:0,
    hideCaptionAtLimit:0,
    hideAllCaptionAtLilmit:0,
    startWithSlide:0,
    videoJsPath:"",
    fullScreenOffsetContainer: ""
   });
 }
})(window.jQuery);
</script>
<!-- Revlution slider code start here with effects-->



 <!-- navigation arrow down or up if and else condition-->
<script type="text/javascript">
$(document).ready(function(e) {
    $('.dropdown').click(function(){
//alert($('.dropdown-toggle i').hasClass('fa-angle-down'));
   //console.log($('.dropdown-toggle i').hasClass('fa-angle-down')); 
if($('.dropdown-toggle i').hasClass('fa-angle-down'));
{
$(this).find('i').toggleClass('fa-angle-down');
   $(this).find('i').toggleClass('fa-angle-up');
 
}
});

$(document).click(function(){
if($('.dropdown-toggle i').hasClass('fa-angle-up'));
{
$('.dropdown').find('i').removeClass('fa-angle-up');
$('.dropdown').find('i').addClass('fa-angle-down');
 
}
});
});
</script>
<!-- navigation arrow down or up if and else condition-->




<!-- For header fixed and scroll in animation-->
 <script type="text/javascript">
$(window).bind('scroll', function () {
    if ($(window).scrollTop() > 100) {
        $('.navbar-default').addClass('fixed');
$('.container-fluid').addClass('fadeInDown');
    } else {
        $('.navbar-default').removeClass('fixed');
  $('.container-fluid').removeClass('fadeInDown');
    }
});
</script>
<!-- for header fixed and scroll in animation-->


<!-- stop proporgtion in search box start-->
<script type="text/javascript">
$(document).ready(function(e) {

 //$(document).on('click', function(e) {
//           $('.outer-serch').removeClass('show');               
//          
//        });
//
//  $('.search').on('click', function(event){
//            event.stopPropagation();
//        });
//
//    $('.search').on('click', function(event){
//            event.stopPropagation();
//        });

  $('.search').on('click', function () {
            if(!$('.outer-serch').hasClass( "show" ))
                $('.outer-serch').addClass('show');
            else
                $('.outer-serch').removeClass('show');
        });

});
</script>
<!-- stop proporgtion in search box end-->


<!-- Back to top code start--> 
<script type="text/javascript">
$(document).ready(function(){
    //Check to see if the window is top if not then display button
    $(window).scroll(function(){
        if ($(this).scrollTop() > 100) {
            $('.scrollToTop').fadeIn();
        } else {
            $('.scrollToTop').fadeOut();
        }
    });

    //Click event to scroll to top
    $('.scrollToTop').click(function(){
        $('html, body').animate({scrollTop : 0},800);
        return false;
    });
});
</script>
<!-- Back to top code end--> 



No comments:

Post a Comment