<div class="navbar navbar-inverse navbar-fixed-top opaque-navbar">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNav">
<span class="sr-only">Toggle navigation</span> Menu <i class="fa fa-bars"></i>
                </button>
      <a class="navbar-brand page-scroll" href="#">Manas</a> 
   </div>
    <div class="collapse navbar-collapse" id="myNav">
      <ul class=" nav navbar-nav pull-right">
        <li><a href="#about" class="page-scroll">About</a></li>
        <li><a href="#portfolio" class="page-scroll">Portfolio</a></li>
        <li><a href="#contact" class="page-scroll">Contact</a></li>
      </ul>
    </div>
  </div>
</div>
<section class="banner">
  <div class="container">
    <h3>Graphic & Web Designer</h3>
    <p>A Full Stack Developer, Based in XXXXXX. <br/> </p>
  </div>
</section>

<div class="abt" id="about">
<div class="jumbotron">
  <div class="container">
    <h3>We Have What You Need</h3>
    <hr></hr>
    <p>From a responsive Front End design to a Dynamic Backend handling,<br/> we provide you with your dream site and increase your chance of success.</p>
    
  <a href="#portfolio" class="btn btn-default">Get Started!</a>
  </div> 
</div>
</div>
<!--End ofAbout-->

<!--PortFolio-->

<div class="no-padding text-center" id="portfolio">
 <div class="container">
   <h1>Portfolio</h1>
    <hr></hr>
  </div>
 
  <div class="container-fluid">
    <div class="row no-gutter">
      <div class=" col-6 col-lg-4 col-sm-6">
        <img src="http://4.bp.blogspot.com/-bahoT9-tRn4/UYQmxSCtFdI/AAAAAAAAA6s/QQzILTQba18/s1600/art-camera-cool-photography-toy-Favim.com-446299.jpg" class="img-thumbnail" alt="Project-1" width="100%" height="auto">
      </div>
      <div class="col-6 col-lg-4 col-sm-6">
         <img src="http://4.bp.blogspot.com/-bahoT9-tRn4/UYQmxSCtFdI/AAAAAAAAA6s/QQzILTQba18/s1600/art-camera-cool-photography-toy-Favim.com-446299.jpg" class="img-thumbnail" alt="Project-1" width="100%" height="auto">
      </div>
      <div class="col-6 col-lg-4 col-sm-6">
         <img src="http://4.bp.blogspot.com/-bahoT9-tRn4/UYQmxSCtFdI/AAAAAAAAA6s/QQzILTQba18/s1600/art-camera-cool-photography-toy-Favim.com-446299.jpg" class="img-thumbnail" alt="Project-1" width="100%" height="auto">
      </div>
    </div>
    
    <div class="row no-gutter">
      <div class=" col-6 col-lg-4 col-sm-6">
        <img src="http://s9.favim.com/orig/130725/photography-pocket-watches-v-vintage-Favim.com-801353.jpg" alt="Project-1" width="100%" height="auto">
      </div>
      <div class="col-6 col-lg-4 col-sm-6">
         <img src="http://s9.favim.com/orig/130725/photography-pocket-watches-v-vintage-Favim.com-801353.jpg" class="img-thumbnail" alt="Project-1" width="100%" height="auto">
      </div>
      <div class="col-6 col-lg-4 col-sm-6">
         <img src="http://s9.favim.com/orig/130725/photography-pocket-watches-v-vintage-Favim.com-801353.jpg" alt="Project-1" width="100%" height="auto">
      </div>
    </div>
  </div>
</div>
<!--End of Portfolio-->

<div class="contact" id="contact">
  <div class="bg-dark">
<div class="container" >
  <div class="row">
    <div class="col-lg-8 col-lg-offset-2 text-center">
      <h1>Let's Get In Touch!</h2>
      <hr class="primary"></hr>
    <p class="my-font">Ready to start your next project with us? That's great! Give us a call or send us an email and we will get back to you as soon as possible!</p>
    </div>
   <div class="padded">
    <div class="col-lg-4 col-lg-offset-2 text-center">
    <i class="fa fa-phone fa-3x sr-contact"></i>
    <p>9999999999</p>
    </div>
    
    <div class="col-lg-4 text-center">
       <i class="fa fa-envelope-o fa-3x sr-contact"></i>
       <p><a href="mailto:your-email@your-domain.com">gfgfgfg@gmail.com</a></p>
    </div>
    </div>
  </div>
  </div>
</div>
</div>
<!--End Of Contact-->

<footer class="footer">
  <div class="container">
    <div class="row">
    <div class="col-sm-6 text-center">
      <h3>About this Page</h3>
      <p>Used:Bootstrap,Jquery,HTML,CSS.<br/>
      Made By: Manas Yadav</p>
      
    </div>
      <div class="col-sm-6 text-center">
        <h3>Around The Web</h3>
        <ul class="list-icon">
          <li><a type="button" href="https://www.facebook.com/manas.yadav.71"><i class="fa fa-facebook-official"></i></a>
            <li><a type="button" href="https://github.com/manas2297"><i class="fa fa-github-square" aria-hidden="true"></i></a>
              <li><a type="button" href=""><i class="fa fa-google-plus-official" aria-hidden="true"></i></a>
        </ul>
      </div> 
    </div>
  </div>
  
</footer>

    

body,html{
  font-family: 'Josefin Sans', sans-serif;
}

section{
  background:yellow;
}
.banner{
  width:100%;
  background:url('http://www.alstercloud.de/wp-content/uploads/2017/01/header.jpg') no-repeat;
  background-size:cover;
  background-position:center;
  min-height:600px;
  
}
.banner h3{
  text-align:center;
  margin-top: 200px;
  color:#fff;
  font-size:80px;
  font-weight:700;
  font-family: 'Josefin Sans', sans-serif;
 }
.banner p{
  text-align:center;
  color:#fff;
  font-size:1.3em;
  opacity:1;
  font-family: 'Josefin Sans', sans-serif;
  
}
.opaque-navbar .container .navbar-header >a{
  color:#fff;
  text-transform:uppercase;
  font-weight:bold;
}
.opaque-navbar .container .navbar-collapse >ul >li >a{
  color:#fff;
  text-transform:uppercase;
  font-weight:700;
}

.opaque-navbar{
  background-color:rgba(0,0,0,0);
  border-bottom:1px solid #eee;
  
  transition : background-color 0.5s ease 0s;
}
.opaque-navbar.opaque {
    background-color:black ;
    border:0px;    
    transition: background-color .5s ease 0s;
}

ul.dropdown-menu {
    background-color: black;
}
.abt{
  text-align:center;
}
.abt .jumbotron  {
  background-color:#e67e22;
}
.abt h3{
  
  color:white;
  font-size:40px; 
  
}
 hr{
  width:100px;
  border-width:3px;
  
}
.abt p{
  
  color: rgba(255, 255, 255, 0.7);
  font-size:20px;
}
.btn{
  border:none;
  border-radius:300px;
  font-weight:bold;
  text-transform:uppercase;
  
}
.btn-default{
  padding-bottom: 15px;
  padding-top:15px;
  padding-left:30px;
  padding-right:30px;
}

.no-padding{
  padding:0;
  margin-top:-30px;
}

 .col-6{
  padding: 0 0;
}

.no-padding h1{
  padding-top:55px;
  text-transform:uppercase;
}
.no-padding hr{
  border: 2px solid #d0d0d0;
}
.bg-dark{
  background-color:#222222;
  color:white;
}

.primary{
  border:1px solid #d35400;
}

.my-font{
  font-size:20px;
  
}
.bg-dark{
  padding-top:55px;
  padding-bottom:30px;
}
.padded{
  padding-top:200px;
}
.padded .col-lg-4 a{
 color:#d35400;
  font-weight:bold;
}

.list-icon{
  list-style-type:none;
  text-decoration:none;
  }
.list-icon li{
  display:inline;
  padding-right:20px;
}
.list-icon .fa{
  font-size:40px;
}
@media (max-width: 992px) {
  body
  {
    background:white;
  }
  .opaque-navbar {
    background-color: black;
    height: 60px;
    transition: background-color .5s ease 0s;
}

}

$(function() {

$(document).on('click','a.page-scroll',function(event){
  var $anchor=$(this);
  $('html,body').stop().animate({
    scrollTop: ($($anchor.attr('href')).offset().top-45)
  },1500,'easeInOutExpo');
  event.preventDefault();
});
});




 $(window).scroll(function() {
    if($(this).scrollTop() > 50)  /*height in pixels when the navbar becomes non opaque*/ 
    {
        $('.opaque-navbar').addClass('opaque');
    } else {
        $('.opaque-navbar').removeClass('opaque');
    }
});