<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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Fixed Top Navbar Example for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/custom.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css%22" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Services <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-collapse -->
</nav>
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-interval="false">
<!-- 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>
<div class="carousel-inner">
<div class="active item">
<img class="first-slide" src="https://images.pexels.com/photos/327236/pexels-photo-327236.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" alt="First slide">
<div class="carousel-caption">
<h1>Mobilizing the world with intelligence</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<a class="btn btn-link site-btn" href="#">Learn more</a>
</div>
</div>
<div class="item">
<img class="second-slide" src="https://images.pexels.com/photos/8575/pexels-photo.jpg?w=940&h=650&auto=compress&cs=tinysrgb" alt="Second slide">
<div class="carousel-caption">
<h1>Helping to empower the world's increasingly mobile society</h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<a class="btn btn-link" href="#">Learn more</a>
</div>
</div>
<div class="item">
<img class="third-slide" src="https://images.pexels.com/photos/5156/people-eiffel-tower-lights-night.jpg?w=940&h=650&auto=compress&cs=tinysrgb" alt="Third slide">
<div class="carousel-caption">
<h1>Pioneers of using technical innovation </h1>
<p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<a class="btn btn-link" href="#">Learn more</a>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
<!-- /.carousel -->
<!-- /.Apply Area -->
<div class="apply-area area-padding bg-grey2">
<div class="container">
<div class="row text-center">
<div class="col-md-12">
<h2>real products with huge impact</h2>
<div class="gap-b-30"></div>
<p>There are "big data companies" and there are big data companies. The difference is the ability to productize and monetize that data into real products with huge impact. That's what INRIX does every day.
Learn more about working at INRIX and our Open Positions</p>
</div>
</div>
</div>
</div>
<!-- /.Discover Area -->
<div class="discover-area area-padding bg-yellow">
<div class="container">
<div class="row text-center">
<div class="col-md-12">
<h2>Discover how can we help you</h2>
<h4>Contact Us</h4>
</div>
</div>
</div>
</div>
<!-- /.footer section -->
<div class="footer-section">
<div class="footer text-center">
<div class="container">
<div class="col-md-3 footer-one F-border-right">
<h5>About Us </h5>
<p>have been serving India with its 8 branches and completed 5k+ students in last 7 years. We have a team of experienced and certified trainers who will help you from the start to end of a training lesson.</p>
<div class="bigpixi-footer-social">
<ul>
<li class="bigpixi-footer-social__list-item">
<a class="bigpixi-footer__icon-link" rel="nofollow" href="https://twitter.com/">
<img class="bigpixi-footer-social__icon" alt="Twitter" title="Twitter" src="http://simpleicons.org/icons/twitter.svg">
</a> </li>
<li class="bigpixi-footer-social__list-item">
<a class="bigpixi-footer__icon-link" rel="nofollow" href="https://www.facebook.com/">
<img class="bigpixi-footer-social__icon" alt="Facebook" title="Facebook" src="http://simpleicons.org/icons/facebook.svg">
</a> </li>
<li class="bigpixi-footer-social__list-item">
<a class="bigpixi-footer__icon-link" rel="nofollow" href="https://www.youtube.com/">
<img class="bigpixi-footer-social__icon" alt="YouTube" title="YouTube" src="http://simpleicons.org/icons/youtube.svg">
</a> </li>
<li class="bigpixi-footer-social__list-item">
<a class="bigpixi-footer__icon-link" rel="nofollow" href="https://www.instagram.com/">
<img class="bigpixi-footer-social__icon" alt="Instagram" title="Instagram" src="http://simpleicons.org/icons/instagram.svg">
</a> </li>
<li class="bigpixi-footer-social__list-item">
<a class="bigpixi-footer__icon-link" rel="nofollow" href="https://www.pinterest.com/">
<img class="bigpixi-footer-social__icon" alt="Pinterest" title="Pinterest" src="http://simpleicons.org/icons/pinterest.svg">
</a> </li>
</ul>
</div>
</div>
<div class="col-md-3 footer-two F-border-right">
<h5>Information </h5>
<ul>
<li><a href="maintenance.html">Maintenance Tips</a></li>
<li><a href="contact.html">Locations</a></li>
<li><a href="about.html">Testimonials</a></li>
<li><a href="about.html">Careers</a></li>
<li><a href="about.html">Partners</a></li>
</ul>
</div>
<div class="col-md-3 footer-three F-border-right">
<h5>Helpful Links </h5>
<ul>
<li><a href="maintenance.html">Maintenance Tips</a></li>
<li><a href="contact.html">Locations</a></li>
<li><a href="about.html">Testimonials</a></li>
<li><a href="about.html">Careers</a></li>
<li><a href="about.html">Partners</a></li>
</ul>
</div>
<div class="col-md-3 footer-four">
<h5>Contact Us </h5>
<p><strong>Location:</strong><br>
47 Destiny Common, South Jolieview<br>
<strong>Office Hours:</strong><br>
8:00am – 5:00pm<br>
<strong>Telephone:</strong><br>
826-696-8370<br>
<strong>Email:</strong><br>
scrate@yoursite.com</p>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="footer-bottom">
<div class="container">
<div class="row">
<div class="col-sm-6 ">
<div class="copyright-text">
<p>CopyRight © 2017 Digital All Rights Reserved</p>
</div>
</div> <!-- End Col -->
<div class="col-sm-6 ">
<div class="copyright-text pull-right">
<p> <a href="#">Home</a> | <a href="#">Privacy</a> |<a href="#">Terms & Conditions</a> | <a href="#">Refund Policy</a> </p>
</div>
</div> <!-- End Col -->
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
/*******************
Apply CSS
*********************/
.bg-grey2 {background:#e2e2e2;}
.area-padding {padding:70px 0px 70px 0px;}
.apply-area h2{color:#002d72;font-weight:600;letter-spacing:-1px; text-transform:capitalize;}
.apply-area p {color:#767676; font-size:16px;line-height:28px;}
.gap-b-30 {margin-bottom:30px;}
/*******************
Discover CTA CSS
*********************/
.bg-yellow {background:#f1c400;}
.area-padding {padding:70px 0px 70px 0px;}
.discover-area h2{color:#002d72;font-weight:600;letter-spacing:-1px; text-transform:capitalize;}
.discover-area h4{text-transform:uppercase;font-size:14px;font-weight:600;}
/*******************
Footer CSS
*********************/
.footer-top {
position: relative;
background-color: #002d72;
color: #c5c5c5;
padding: 75px 0 75px;
border-top : 1px solid #696969;
border-bottom : 1px solid #696969;
}
/* Footer */
.footer {
position: relative;
background-color: #002d72 ;
color: #7d7975;
padding: 75px 0 40px;
font-size:16px;
}
.footer p {
line-height:26px;
}
.footer h5 {
font-size: 18px;
font-weight: 700;
color: #fff ;
position: relative;
padding-bottom: 16px;
}
.footer h5:after {
content: '';
display: block;
margin: 5px 0 0;
width: 40%;
height: 1px;
background-color: #002d72 ;
}
.footer ul {
list-style: none;
line-height: 36px;
padding-left:0px;
}
.footer ul a {
color:#7d7975;
}
.footer ul a:hover {
color:#f1c400 ;;
}
.F-border-right {
border-right: 1px solid #2f2f33 ;
height: 350px;
}
/*footer bottom */
.footer-bottom {
padding-top: 10px;
padding-bottom: 25px;
border-top: 1px solid #2f2f33 ;
background: #002d72 ;
}
.copyright-text p {
color: #7d7975;
margin-top: 18px;
margin-bottom: 0;
font-size:15px;
}
.copyright-text a {
color: #7d7975;
margin: 0px 10px 0px 10px;
}
.copyright-text a:hover {
color: #767676 ;
}
/*footer-social icon */
.bigpixi-footer-social {
margin-left: auto;
margin-top: 18px;
}
.bigpixi-footer-social__list-item {
display: inline-block;
margin-left: 10px;
}
.bigpixi-footer__icon-link {
display: inline-block;
-webkit-transition: 0.1s cubic-bezier(0.39, 0.575, 0.565, 1);
transition: 0.1s cubic-bezier(0.39, 0.575, 0.565, 1);
-webkit-transition-property: opacity, -webkit-transform;
transition-property: opacity, -webkit-transform;
transition-property: opacity, transform;
transition-property: opacity, transform, -webkit-transform;
}
.bigpixi-footer-social__icon {
display: inline-block;
height: 32px;
width: 32px;
padding:5px;
border : 1px solid #696969;
border-radius:4px;
background:#696969;
}
.bigpixi-footer-social__icon:hover {
display: inline-block;
padding: 2px;
transition : .75s;
background: #383d49;
}
/*footer section ends here */
.btn-link {color:#f1c400; font-size:16px;}
.btn-link:hover{color:#fff;}
/* Carousel base class */
.carousel {
height: 500px;
margin-bottom: 60px;
}
.item::after {
background: rgba(0, 0, 0, 0.60) none repeat scroll 0 0;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 0;
}
/* Declare heights because of positioning of img element */
.carousel .item {
height: 500px;
background-color: #777;
}
.carousel-inner > .item > img {
position: absolute;
top: 0;
left: 0;
min-width: 100%;
height: 500px;
}
.carousel-caption {
padding-top:150px;
margin-bottom: 5%;
text-align:left;
margin-left:0px;
z-index: 10;
}
.carousel-caption h1 {
margin: 0;
line-height:1;
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.4);
font-size:44px;
font-weight:400;
margin-bottom:10px;
}
.carousel-caption p{font-size:18px; letter-spacing:0px;}
.carousel-caption .btn {
margin-top: 0px;
margin-bottom:10px;
}
/* Navigation CSS */
.dropdown-menu > li > a:hover {
color: #fff;
text-decoration: none;
background-color: #002d72 ;
}
.dropdown-menu > li > a {padding:10px; border-bottom:1px solid #e2e2e2;}
.navbar-default {
background-color: #002d72;
border-color: #002d72;
border-bottom:1px solid #002d72;
padding:5px 0px 5px 0px;
font-weight:400;
letter-spacing:1px;
font-size:14px;
}
.navbar-default .navbar-brand {
color: #ffffff;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #f1c400;
}
.navbar-default .navbar-text {
color: #ffffff;
}
.navbar-default .navbar-nav > li > a {
color: #ffffff;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #f1c400;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #f1c400;
background-color: #002d72;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #f1c400;
background-color: #002d72;
}
.navbar-default .navbar-toggle {
border-color: #002d72;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #002d72;
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #ffffff;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: #ffffff;
}
.navbar-default .navbar-link {
color: #ffffff;
}
.navbar-default .navbar-link:hover {
color: #f1c400;
}
@media (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #ffffff;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
color: #f1c400;
}
.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
color: #f1c400;
background-color: #002d72;
}
}
#767676;
#002d72;
