<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!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">
<meta name="description" content="Homepage">
<meta name="author" content="Ramanand">
<title>Sample Homepage</title>
<link rel="shortcut icon" href="favicon.png">
<!-- Bootstrap CDN -->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Fontawesome CDN -->
<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" href="css/styles.css">
<!-- inline-->
<style>
</style>
<!--[if lt IE 9]>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<header id="header" class="hidden-xs hidden-sm navbar-fixed-top">
<div class="container navbar-desktop-only">
<div class="logo-container">
<a href="#"><img class="" src="images/logo.jpg"></a>
</div>
<div class="toggle-nav hidden-xs hidden-sm">
<span class="e">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</span>
</div>
<div class="nav-pane slide-out">
<nav class="navbar navbar-default cust-navbar">
<div class="container">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="index.html">About</a></li>
<li><a href="index.html">Products</a></li>
<li><a href="index.html">Why Use Fabilon</a></li>
<li><a href="index.html">Industry Application</a></li>
<li><a href="index.html">Case Studies</a></li>
<li><a href="index.html">News And Events</a></li>
<li><a href="index.html">contact</a></li>
</ul>
</div>
</div>
</nav>
</div>
</div>
</header>
<header id="header-mob" class="visible-xs visible-sm">
<div class="container-fluid navbar-mobile-only mobile-nav">
<div class="mobile-logo">
<a href="index.html"><img class="img-responsive" src="images/logo.jpg" alt="logo"></a>
</div>
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<a href="index.html">About</a>
<a href="index.html">Products</a>
<a href="index.html">Why Use Fabilon</a>
<a href="index.html">Industry Applications</a>
<a href="index.html">Case Study</a>
<a href="index.html">News & Events</a>
<a href="index.html">Contact</a>
</div>
<span style="font-size:2em;cursor:pointer" onclick="openNav()">☰</span>
</div>
</header>
<section class="main-slider">
<div id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<!-- Slide 1 : Active -->
<div class="item active">
<img src="images/banner-1.jpg" alt="banner">
<div class="carousel-caption">
<h3>Slide 1</h3>
</div><!-- /.carousel-caption -->
</div><!-- /Slide1 -->
<!-- Slide 2 -->
<div class="item ">
<img src="images/banner-2.jpg" alt="banner">
<div class="carousel-caption">
<h3>Slide 2</h3>
</div><!-- /.carousel-caption -->
</div><!-- /Slide2 -->
<!-- Slide 3 -->
<div class="item ">
<img src="images/banner-3.jpg" alt="banner">
<div class="carousel-caption">
<h3>Slide 3</h3>
</div><!-- /.carousel-caption -->
</div><!-- /Slide3 -->
</div><!-- /.carousel-inner -->
<!-- Controls -->
<div class="control-box">
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="control-icon prev fa fa-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="control-icon next fa fa-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div><!-- /.control-box -->
</div><!-- /#myCarousel -->
</section><!-- /.main-slider -->
<section>
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="wow fadeInRight" data-wow-delay="0.5s">
<h1 class="page-header">Welcome to Modern Business</h1>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="wow fadeInDown" data-wow-delay="0.5s" >
<div class="panel panel-default">
<div class="panel-heading">
<h4><i class="fa fa-fw fa-check"></i> Bootstrap v3.2.0</h4>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda voluptatibus eveniet incidunt dicta nostrum quod?</p>
<a href="#" class="btn btn-default">Learn More</a>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<section class="wow fadeInDown" data-wow-delay="0.5s">
<div class="panel panel-default">
<div class="panel-heading">
<h4><i class="fa fa-fw fa-gift"></i> Free & Open Source</h4>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda voluptatibus eveniet incidunt dicta nostrum quod?</p>
<a href="#" class="btn btn-default">Learn More</a>
</div>
</div>
</section>
</div>
<div class="col-md-4">
<div class="wow fadeInDown" data-wow-delay="0.5s">
<div class="panel panel-default">
<div class="panel-heading">
<h4><i class="fa fa-fw fa-compass"></i> Easy to Use</h4>
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda voluptatibus eveniet incidunt dicta nostrum quod?</p>
<a href="#" class="btn btn-default">Learn More</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<!-- Portfolio Section -->
<div class="row">
<div class="col-lg-12">
<div class="wow fadeInRight" data-wow-delay="0.5s">
<h2 class="page-header">Portfolio Heading</h2>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="wow fadeInDown" data-wow-delay="0.5s">
<a href="portfolio-item.html">
<img class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" alt="">
</a>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="wow fadeInDown" data-wow-delay="0.5s">
<a href="portfolio-item.html">
<img class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" alt="">
</a>
</div>
</div>
<div class="col-md-4 col-sm-6">
<div class="wow fadeInDown" data-wow-delay="0.5s">
<a href="portfolio-item.html">
<img class="img-responsive img-portfolio img-hover" src="http://placehold.it/700x450" alt="">
</a>
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container">
<!-- Features Section -->
<div class="row">
<div class="col-lg-12">
<section class="wow fadeInRight" data-wow-delay="0.5s">
<h2 class="page-header">Modern Business Features</h2>
</section>
</div>
<div class="col-md-6">
<div class="wow fadeInDown" data-wow-delay="0.5s">
<p>The Modern Business template by Start Bootstrap includes:</p>
<ul>
<li><strong>Bootstrap v3.2.0</strong>
</li>
<li>jQuery v1.11.0</li>
<li>Font Awesome v4.1.0</li>
<li>Working PHP contact form with validation</li>
<li>Unstyled page elements for easy customization</li>
<li>17 HTML pages</li>
</ul>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis, omnis doloremque non cum id reprehenderit, quisquam totam aspernatur tempora minima unde aliquid ea culpa sunt. Reiciendis quia dolorum ducimus unde.</p>
</div>
</div>
<div class="col-md-6">
<div class="wow fadeInDown" data-wow-delay="0.5s">
<img class="img-responsive" src="http://placehold.it/700x450" alt="">
</div>
</div>
</div>
<hr>
</div>
</section>
<section>
<div class="container">
<!-- Call to Action Section -->
<div class="well">
<div class="row">
<div class="col-md-8">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, expedita, saepe, vero rerum deleniti beatae veniam harum neque nemo praesentium cum alias asperiores commodi.</p>
</div>
<div class="col-md-4">
<a class="btn btn-lg btn-default btn-block" href="#">Call to Action</a>
</div>
</div>
</div>
<hr>
</div>
</section>
<!-- Jquery CDN -->
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<!-- Bootstrap JS CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js"></script>
<script src="js/scripts.js"></script>
<!-- inline-->
</body>
</html>
body{
width:100%;
height:100%;
overflow-x: hidden;
}
/*Navbar Css*/
.container.navbar-desktop-only {
position:relative;
overflow-x: hidden;
}
.navbar-fixed-top.shrink {
color: #000;
background-color: rgba(255,255,255,0.8);
}
.navbar-fixed-top.shrink .cust-navbar{
background-color: rgba(255,255,255,0);
}
.navbar-default .navbar-nav>li>a {
color: #000;
}
/*
.logo-container img {
width: 30%;
-webkit-transition: width 0.5s;
transition: width 0.5s;
}
.logo-container img.shrink{
width:10%;
}
*/
.nav-pane {
-webkit-transition: 500ms;
transition: 500ms;
-webkit-transform: translateX(120%);
transform: translateX(120%);
top: 0;
right: 0px;
width: 75%;
position:absolute;
justify-content: space-around;
}
.nav-pane.open {
-webkit-transform: translateX(-5%);
transform: translateX(-5%);
-webkit-transition: 500ms;
transition: 500ms;
z-index: 9;
}
.toggle-nav {
position: absolute;
top:10px;
right: 0px;
z-index: 11;
cursor: pointer;
}
.toggle-nav span.e {
display: inline-block;
border: 1px solid #0aedb8;
padding: 10px 10px;
}
.toggle-nav span.e.btn-close span.bar:nth-child(1) {
-webkit-transition: 250ms;
transition: 250ms;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
top: 5px;
}
.toggle-nav span.e.btn-close span.bar:nth-child(2) {
opacity: 0;
-webkit-transition: 250ms;
transition: 250ms;
}
.toggle-nav span.e.btn-close span.bar:nth-child(3) {
-webkit-transition: 250ms;
transition: 250ms;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
bottom: 5px;
}
.toggle-nav span.e span.bar {
-webkit-transition: 250ms;
transition: 250ms;
position: relative;
display: block;
background: #0aedb8;
border-radius: 1px;
border-bottom: 2px solid #0aedb8;
width: 15px;
height: 1px;
}
.toggle-nav span.e span.bar:nth-child(2) {
margin: 3px 0;
}
.cust-navbar{
margin-bottom: 0px;
border: red;
border-radius: 0px;
background: rgba(255,255,255,0.8);
position: absolute;
width: 100%;
}
.cust-nav-brand{
margin-left: 29px !important;
}
/*Navbar Css Ends*/
/*Mobile Mode navbar Starts*/
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 99;
top: 0;
right: 0;
/*background-color: #111;*/
background-color: rgba(40, 79, 148,1);
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.mobile-nav span {
position: relative;
right: 0;
color: #000;
padding: 0px 10px;
float: right;
z-index: 1;
border: 1px solid #000;
}
.mobile-logo img{
position: absolute;
margin: 11px 0px 0px 19px;
max-width: 141px;
z-index: 1;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 1.2em;
color: #fff;
display: block;
transition: 0.3s;
}
.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
text-decoration: none;
}
.sidenav .closebtn {
position: absolute;
top: -29px;
right: 0px;
font-size: 4em;
margin-left: 50px;
z-index: ;
}
#mySidenav{
text-transform: uppercase;
}
#mySidenav li a{
padding: 13px;
}
/*Mobile mode navbar Ends*/
/* Carousel Fading slide */
.carousel-fade .carousel-inner { background: #000; }
.carousel-fade .carousel-control { z-index: 2; }
.carousel-fade .item {
opacity: 0;
-webkit-transition-property: opacity;
-moz-transition-property: opacity;
-o-transition-property: opacity;
transition-property: opacity;
}
.carousel-fade .next.left,
.carousel-fade .prev.right,
.carousel-fade .item.active { opacity: 1; }
.carousel-fade .active.left,
.carousel-fade .active.right {
left: 0;
opacity: 0;
z-index: 1;
}
/* Safari Fix */
@media all and (transform-3d), (-webkit-transform-3d) {
.carousel-fade .carousel-inner > .item.next,
.carousel-fade .carousel-inner > .item.active.right {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-inner > .item.prev,
.carousel-fade .carousel-inner > .item.active.left {
opacity: 0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-inner > .item.next.left,
.carousel-fade .carousel-inner > .item.prev.right,
.carousel-fade .carousel-inner > .item.active {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
}
/* Carousel Control custom */
.carousel-control .control-icon {
font-size: 48px;
height: 30px;
margin-top: -15px;
width: 30px;
display: inline-block;
position: absolute;
top: 50%;
z-index: 5;
}
.carousel-control .prev { margin-left: -15px; left: 50%; } /* Prev */
.carousel-control .next { margin-right: -15px; right: 50%; } /* Next */
/* Removing BS background */
.carousel .control-box { opacity: 0; }
a.carousel-control.left { left: 0; background: none; border: 0;}
a.carousel-control.right { right: 0; background: none; border: 0;}
/* Animation */
.control-box, a.carousel-control, .carousel-indicators li {
-webkit-transition: all 250ms ease;
-moz-transition: all 250ms ease;
-ms-transition: all 250ms ease;
-o-transition: all 250ms ease;
transition: all 250ms ease;
/* hardware acceleration causes Bootstrap carousel controlbox margin error in webkit */
/* Assigning animation to indicator li will make slides flicker */
}
/* Hover animation */
.carousel:hover .control-box { opacity: 1; }
.carousel:hover a.carousel-control.left { left: 15px; }
.carousel:hover a.carousel-control.right { right: 15px; }
/* Carouse Indicator */
.carousel-indicators li.active,
.carousel-indicators li { border: 0; }
.carousel-indicators li {
background: #666;
margin: 0 3px;
width: 12px;
height: 12px;
}
.carousel-indicators li.active {
background: #fff;
margin: 0 3px;
}
/*********************Media Queries Starts*****************/
@media( max-width: 1200px){
.nav>li>a {padding: 10px;}
}
@media( max-width: 992px){}
@media( max-width: 767px){}
@media( max-width: 480px){}
@media( max-width: 320px){
#mySidenav { max-width: 300px !important;}
}
/*********************Media Queries Ends*****************/
(function($) {
$(document).ready(function(){
$('.toggle-nav').on('click', function() {
toggleNavigation($(this), $('.nav-pane'));
changeLetters($(this));
});
function toggleNavigation(btn, nav) {
btn.toggleClass('open');
nav.toggleClass('open');
}
function changeLetters(btn) {
var e = $('.toggle-nav span.e');
e.toggleClass('btn-close');
}
$('.carousel').carousel({
interval: 6000
});
});
})(jQuery);
function openNav() {
document.getElementById("mySidenav").style.width = "340px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
new WOW().init();
$(window).scroll(function() {
if ($(document).scrollTop() > 100) {
$('.navbar-fixed-top').addClass('shrink');
} else {
$('.navbar-fixed-top').removeClass('shrink');
}
});
