<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<div id="slider" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#slider" data-slide-to="0" class="active"></li>
<li data-target="#slider" data-slide-to="1"></li>
<li data-target="#slider" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="https://images.pexels.com/photos/194356/pexels-photo-194356.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" alt="forest" class="img-responsive">
</div>
<div class="item">
<img src="https://static.pexels.com/photos/18104/pexels-photo.jpg" alt="meow" class="img-responsive">
</div>
<div class="item">
<img src="https://images.pexels.com/photos/205420/pexels-photo-205420.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" alt="meowwww!" class="img-responsive">
</div>
</div>
<a class="carousel-control left" href="#slider" data-slide="prev">
<span class="icon-prev"></span>
</a>
<a class="carousel-control right" href="#slider" data-slide="next">
<span class="icon-next"></span>
</a>
</div>
<div class="container-fluid" id="header">
<div class="img-responsive" id="main-logo">
<img src="http://vivekbisht.com/img/logo.png" class="img-responsive">
</div>
</div>
<nav class="navbar navbar-default" role="navigation" id="nav">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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 alt="" src="">
</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Projects </a> </li>
<li><a href="#">Services </a> </li>
<li><a href="#">About </a> </li>
<li><a href="#">Contact </a> </li>
</ul>
</div>
</div>
</nav>
<section id="about">
<div class="container">
<div class="heading">
<h2>About us</h2>
<p>know us more</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean suscipit, neque eget faucibus bibendum, ligula diam gravida risus, sed faucibus felis velit gravida tellus. Phasellus vitae tempor ante, in eleifend eros. Morbi eu felis placerat, convallis orci vitae, rutrum nulla. Integer sed est euismod, tristique diam tincidunt, faucibus ex. Aliquam dui odio, fringilla sit amet nulla eget, vehicula semper ante. Suspendisse commodo felis orci, non ullamcorper ex faucibus ut. Fusce tempus scelerisque justo, pharetra efficitur risus porttitor quis. Vestibulum et tellus ligula. Sed molestie iaculis massa, nec ornare justo vehicula ac. Aliquam laoreet nisl volutpat sem sodales vehicula. Donec et porta sem. Vivamus aliquam facilisis ipsum sit amet rutrum. Aliquam lobortis interdum auctor. Aliquam ut vulputate dui. Integer eu blandit erat. Etiam quam ligula, porttitor in porta sit amet, sodales quis magna. Mauris non gravida arcu, id imperdiet metus. Mauris eu viverra justo, quis pretium turpis. Mauris laoreet ante et elementum mollis. Nunc tempor nisi id facilisis porttitor. Integer ante metus, ullamcorper at egestas a, vehicula in ligula. Donec sed lacus est. Aenean blandit tincidunt dolor nec lacinia. Praesent finibus turpis ultrices, semper libero at, semper sapien. Morbi molestie ex congue risus porttitor, nec feugiat orci pulvinar. </p>
</div>
</section>
<section class="module parallax parallax-1">
<div class="container">
<h1>Services</h1>
</div>
</section>
<section class="module content">
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin hendrerit vitae purus quis imperdiet. Aenean elementum porta erat, at posuere est elementum non. Sed ut lorem eu ante ornare tristique quis eu odio. Proin nibh ligula, semper eget mauris nec, egestas mattis libero. Vestibulum auctor tellus vel augue rutrum lacinia. Nunc nec felis velit. Nulla augue magna, vehicula in convallis sed, pretium nec odio. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis a mauris vestibulum, ornare elit ac, consectetur sem. Pellentesque sem neque, ultricies nec lobortis eget, pellentesque nec lorem. Phasellus feugiat varius nisl, vel efficitur eros ultrices et. Sed sollicitudin, massa sit amet finibus eleifend, leo magna rhoncus sem, suscipit lacinia nulla mauris nec nibh. Aliquam ut massa id justo ullamcorper dictum vel rhoncus urna. </p>
</div>
</section>
<section class="module parallax parallax-2">
<div class="container" class="img-responsive">
<h1>Gallery</h1>
</div>
</section>
<section class="">
<div class="container" id="gallery-container">
<div class="row" id="gallery-row">
<div class="nopadding col-xs-6 col-sm-6 col-md-4">
<img src="https://images.pexels.com/photos/6482/black-and-white-man-person-hands.jpg?w=940&h=650&auto=compress&cs=tinysrgb">
</div>
<div class="nopadding col-xs-6 col-sm-6 col-md-4">
<img src="https://images.pexels.com/photos/51165/cpu-processor-electronics-computer-51165.jpeg?w=940&h=650&auto=compress&cs=tinysrgb">
</div>
<div class="nopadding col-xs-6 col-sm-6 col-md-4">
<img src="https://images.pexels.com/photos/291777/pexels-photo-291777.jpeg?w=940&h=650&auto=compress&cs=tinysrgb">
</div>
<div class="nopadding col-xs-6 col-sm-6 col-md-4" >
<img src="https://images.pexels.com/photos/343239/pexels-photo-343239.jpeg?w=940&h=650&auto=compress&cs=tinysrgb">
</div>
<div class="nopadding col-xs-6 col-sm-6 col-md-4">
<img src="https://images.pexels.com/photos/168765/pexels-photo-168765.jpeg?w=940&h=650&auto=compress&cs=tinysrgb">
</div>
<div class="nopadding col-xs-6 col-sm-6 col-md-4">
<img src="https://images.pexels.com/photos/163178/laptop-notebook-computer-work-163178.jpeg?w=940&h=650&auto=compress&cs=tinysrgb">
</div>
</div>
</div>
</section>
<footer id="myFooter">
<div class="footer-social">
<a class="social-icons" href="https://www.facebook.com/vivekbisht.com"><i class="fa fa-facebook"></i></a>
<a class="social-icons" href="https://twitter.com/vivekbisht109" title="Twitter" target="_blank"><i class="fa fa-twitter"></i></a>
<a class="social-icons" href="https://plus.google.com/+VivekBisht109" title="Google+" target="_blank"><i class="fa fa-google-plus"></i></a>
<a class="social-icons" href="https://www.linkedin.com/in/vivekbisht109" title="LinkedIn+" target="_blank"><i class="fa fa-linkedin"></i></a>
<a class="social-icons" href="https://www.instagram.com/vivekbisht109/" title="instagram" target="_blank"><i class="fa fa-instagram"></i></a>
<a class="social-icons" href="https://www.youtube.com/user/vivekbisht109" title="youtube" target="_blank"><i class="fa fa-youtube"></i></a>
<a class="social-icons" href="https://www.flickr.com/photos/vivekbisht109" title="flickr" target="_blank"><i class="fa fa-flickr"></i></a>
<a class="social-icons" href="https://www.github.com/vivekbisht109" title="github" target="_blank"><i class="fa fa-github"></i></a>
<a class="social-icons" href="http://codepen.io/vivekbisht109" title="codepen" target="_blank"><i class="fa fa-codepen"></i></a>
</div>
<div class="footer-copyright">
<div class="container">
<p>© 2017 - <a href="http://vivekbisht.com/"> vivekbisht.com </a> </p>
</div>
</div>
</footer>
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
body {
overflow-x: hidden !important;
font-family: 'Open Sans', sans-serif;
}
/* general */
section{
padding:100px 0;
}
section p{
font-size:15px;
color:#393632;
}
.heading {
z-index: 1;
position: relative;
text-align: center;
margin-bottom: 50px;
}
.heading:after {
left: 50%;
height: 3px;
width: 50px;
content: " ";
bottom: -20px;
margin-left: -25px;
position: absolute;
background: #0174B8;
}
.heading h2 {
font-size: 40px;
font-weight: 500;
margin: 0 0 5px;
color: #0174B8;
}
.heading p {
font-size: 16px;
font-weight: 300;
letter-spacing: 0.5px;
text-transform: uppercase;
color: #8693a7;
}
/* end general */
#slider{ }
#slider .item{
max-height:550px;
overflow-x
}
#slider .item img{
width:100%;
}
#main-logo{
margin:10px 0;
}
#main-logo > img {
margin: auto;
width:150px;
}
.navbar-default{
background-color: #fbfbfb;
margin:0;
}
.navbar-fixed {
top: 0;
z-index: 100;
position: fixed;
width: 100%;
}
.navbar-nav {
float:none;
margin:0 auto;
display: block;
text-align: center;
}
.navbar-nav > li {
display: inline-block;
float:none;
}
.jumbotron {
background-color: white;
}
.jumbotron img{
display:block;
margin-left:auto;
margin-right:auto;
}
.navbar {
}
.scroll-top {
position:fixed;
bottom:0;
right:6%;
z-index:100;
background: #f2f3f2;
font-size:24px;
border-top-left-radius:3px;
border-top-right-radius:3px;
}
.scroll-top a:link,.scroll-top a:visited {
color:#222;
}
.navbar-nav {
margin-left: 50px;
}
#test {
margin-left: auto;
margin-right: auto;
}
#services{
height: 500px;
background-color: transparent;
}
.img-circle {
border-radius: 50%;
}
.row img {
max-width: 100%;
width: 1000px;
padding: 5px;
}
.container-fluid {
padding-right: 0px;
padding-left: 0px;
}
#gallery-row {
margin-top: 15px;
}
#gallery-row img {
height: 333px;
padding: 10px;
}
.navbar-nav > li {
display: inline-block;
float:none;
}
.nopadding {
padding: 0;
}
@media only screen and (max-width : 480px) {
.navbar-default .navbar-nav>li>a {
font-size: 11px;
}
}
ul.nav.navbar-nav {
margin-left: -7px;
background-color: white;
}
div.navbar-header {
background-color: white;
}
section.module.parallax {
max-height: 400px;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover !important;
background-position:center;
}
.parallax h1 {
color: rgba(255, 255, 255, 0.8);
font-size: 48px;
font-weight: 700;
text-align: center;
text-transform: uppercase;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.parallax-1 {
background-image: url("https://static.pexels.com/photos/159643/laptop-ipad-organic-natural-159643.jpeg");
}
.parallax-2 {
background-image: url("https://static.pexels.com/photos/164732/pexels-photo-164732.jpeg");
}
#myFooter{
border-top:1px solid #999;
}
#myFooter ul{
list-style-type: none;
padding: 0;
margin-bottom: 18px;
}
#myFooter li{
display: inline-block;
margin: 0px 15px;
line-height: 2;
}
.footer-social{
text-align: center;
padding-top: 25px;
padding-bottom: 25px;
background-color: #fdfdfd;
}
.footer-social i{
font-size: 36px;
margin-right: 15px;
margin-left: 20px;
background-color: white;
color: #d0d0d0;
border-radius: 51%;
padding: 10px;
height: 60px;
width: 60px;
text-align: center;
line-height: 43px;
text-decoration: none;
transition:color 0.2s;
}
.footer-social .fa-facebook:hover,
.footer-social .fa-facebook:focus{
color: #2b55ff;
}
.footer-social .fa-google-plus:hover,
.footer-social .fa-google-plus:focus{
color:#DD5044;
}
.footer-social .fa-twitter:hover,
.footer-social .fa-twitter:focus{
color:#1DA1F2;
}
.footer-social .fa-linkedin:hover,
.footer-social .fa-linkedin:focus{
color:#0077B5;
}
.footer-social .fa-instagram:hover,
.footer-social .fa-instagram:focus{
color:#DE4A82;
}
.footer-social .fa-youtube:hover,
.footer-social .fa-youtube:focus{
color:#ED2919;
}
.footer-social .fa-flickr:hover,
.footer-social .fa-flickr:focus{
color:#0063DB;
}
.footer-social .fa-github:hover,
.footer-social .fa-github:focus{
color:#2B3137;
}
.footer-social .fa-codepen:hover,
.footer-social .fa-codepen:focus{
color:#000000;
}
.footer-copyright{
text-align: center;
color: #777;
border-top:1px solid #999;
}
.footer-copyright p{
margin:10px 0;
}
.footer-copyright a{
color:#8693a7;
font-size:16px;
text-decoration:none;
}
.footer-copyright a:hover{
color:#DE4A82;
}
$(document).ready(function() {
$(window).scroll(function () {
console.log($(window).scrollTop())
if ($(window).scrollTop() > 550) {
$("#nav").addClass('navbar-fixed');
}
if ($(window).scrollTop() < 500) {
$("#nav").removeClass('navbar-fixed');
}
});
});
