/PortFolio.markdown

## index.html
<head>
  <title>Dilip pashi Web Design Portfolio</title>

</head>

<body>

  <!-- Navigation -->
  <nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
    <div class="container topnav">
      <!-- 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 topnav" href="http://www.facebook.com/dilip.pashi143" target="_blank">Dilip Pashi</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>
            <a href="#home">Home</a>
          </li>
          <li>
            <a href="#about">About</a>
          </li>
          <li>
            <a href="#portfolio">Portfolio</a>
          </li>
          <li>
            <a href="#contact">Contact</a>
          </li>
        </ul>
      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
  </nav>


  <!-- Header -->
  <a name="home"></a>
  <div class="intro-header">
    <div class="bg-overlay">
      <div class="container">


        <div class="row">
          <div class="col-lg-12">
            <div class="intro-message">
              <h1>Welcome to My Web Design Portfolio</h1>
              <h3>Where Awesomeness Is Brought To Life.</h3>
              <hr class="intro-divider">
              <ul class="list-inline intro-social-buttons">
                <li>
                  <a href="https://twitter.com/dilip_pashi" target="_blank" class="tweet btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a>
                </li>
                <li>
                  <a href="https://github.com/Diliprocks1986" target="_blank" class="git btn btn-default btn-lg "><i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span></a>
                </li>
                <li>
                  <a href="https://www.linkedin.com/in/diliprocks1986" target="_blank" class=" linked btn btn-default btn-lg"><i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Linkedin</span></a>
                </li>
                <li>
                  <a href="http://www.freecodecamp.com/diliprocks1986" target="_blank" class=" freecode btn btn-default btn-lg"><i class="fa fa-fire fa-fw"></i> <span class="network-name">freeCodeCamp</span></a>
                </li>
              </ul>
            </div>
          </div>
        </div>

      </div>
      <!-- /.container -->
    </div>
  </div>
  <!-- /.intro-header -->

  <!-- Page Content -->

  <a name="about"></a>
  <div class="content-section-a">
    <div class="bg-overlay2">
      <div class="container">
        <div class="row">
          <div class="col-lg-5 col-sm-6">

            <div class="clearfix"></div>
            <h2 class="section-heading">About My Journey to Web Design.</h2>
            <br>
            <p class="lead">I'm a <a class="link" target="_blank" href="http://www.freecodecamp.com/diliprocks1986">self taught</a> web designer, developer, co-founder and entrepreneur based in Kharagpur.<br>
              I'm currently part of a small web development team in an upcoming start-up, building web and mobile applications.<br>
              My passion is to use technology based solutions, to help solve real world challenges.<br>
              Competences:<br>
              Languages and Frameworks:<br>
              Javascript, HTML5, CSS3, jQuery, Bootstrap3, Angular.js, Meteor.js.<br>
              Tools & expertise:<br>
              Git, Responsive Web Design, Agile Methodologies.
            </p>
          </div>
          <div class="col-lg-5 col-lg-offset-2 col-sm-6 collapse navbar-collapse">
            <img class="img-circle img-responsive" src="https://pbs.twimg.com/profile_images/687587645912780800/taTg6il9_400x400.jpg" alt="">
          </div>
        </div>

      </div>
      <!-- /.container -->
    </div>
  </div>


  <!-- Portfolio Grid Section -->
  <a name="portfolio"></a>
  <section id="portfolio" class="bg-light-gray bounds">
    <div class="container">
      <div class="row">
        <div class="col-lg-12 text-center">
          <h2 class="section-heading">Awesomeness Portfolio.</h2>
          <h3 id="below-section" class="section-subheading text-muted">Below you'll find some of my recent work.</h3>
        </div>
      </div>
      <!-- Portfolio img1 -->
      <div class="row">
        <div class="col-md-4 col-sm-6 portfolio-item">
        <img src= "http://placehold.it/400x150/ff66ff/000000" class="img-responsive" alt="PINK" >

          <div class="portfolio-caption">
            <h4>Placeholder 1</h4>
            <p id="small-text" class="text-muted">Example portfolio</p>
          </div>
        </div>
        <!-- End of Portfolio img1 -->

        <!-- Portfolio img2 -->
        <div class="col-md-4 col-sm-6 portfolio-item portfolio2">
          <img src= "http://placehold.it/400x150/00ff00/000000" class="img-responsive" alt="GREEN" >

          <div class="portfolio-caption">
            <h4>Placeholder 2</h4>
            <p id="small-text" class="text-muted">Example portfolio</p>
          </div>
        </div>
        <!-- End of Portfolio img2 -->

        <!-- Portfolio img3 -->
        <div class="col-md-4 col-sm-6 portfolio-item">
          <img src= "http://placehold.it/400x150/ff0000/000000" class="img-responsive" alt="RED" >

          <div class="portfolio-caption">
            <h4>Placeholder 3</h4>
            <p id="small-text" class="text-muted">Example portfolio</p>
          </div>
        </div>
        <!-- End of Portfolio img3 -->

        <!-- Portfolio img4 -->
        <div class="col-md-4 col-sm-6 portfolio-item">
          <img src= "http://placehold.it/400x150/0000ff/000000" class="img-responsive" alt="BLUE" >

          <div class="portfolio-caption">
            <h4>Placeholder 4</h4>
            <p id="small-text" class="text-muted">Example portfolio</p>
          </div>
        </div>
        <!-- End of Portfolio img4 -->

        <!-- Portfolio img5 -->
        <div class="col-md-4 col-sm-6 portfolio-item">
          <img src= "http://placehold.it/400x150/ffff00/000000" class="img-responsive" alt="YELLOW" >

          <div class="portfolio-caption">
            <h4>Placeholder 5</h4>
            <p id="small-text" class="text-muted">Example portfolio</p>
          </div>
        </div>
        <!-- End of Portfolio img5 -->

        <!-- Portfolio img6 -->
        <div class="col-md-4 col-sm-6 portfolio-item">
          <img src= "http://placehold.it/400x150/00ffff/000000" class="img-responsive" alt="SKYBLUE" >

          <div class="portfolio-caption">
            <h4>Placeholder 6</h4>
            <p id="small-text" class="text-muted">Example portfolio</p>
          </div>
        </div>
        <!-- End of Portfolio img6 -->
      </div>
    </div>
  </section>

  <a name="contact"></a>
  <div class="banner">
    <div class="bg-overlay4">
      <div class="container">
        <div class="row">
          <div class="col-lg-6">
            <h2 class="connect">Connect with My Web Design Studio: dilip.pashi143@gmail.com</h2>
          </div>
          <br>

          <div class="col-lg-6">
            <ul class="list-inline banner-social-buttons">
              <li>
                <a href="https://facebook.com/dilip.pashi143" target="_blank" class=" facebook btn btn-default btn-lg"><i class="fa fa-facebook fa-fw"></i> <span class="network-name">Facebook</span></a>
              </li>
              <li>
                <a href="https://plus.google.com/u/0/102792612631927493726" target="_blank" class=" google btn btn-default btn-lg "><i class="fa fa-google fa-fw"></i> <span class="network-name">Google+</span></a>
              </li>
              <li>
                <a href="https://www.instagram.com" target="_blank" class=" instagram btn btn-default btn-lg"><i class="fa fa-instagram"></i> <span class="network-name">Instagram</span></a>
              </li>
              <li>
                <a href="http://www.freecodecamp.com/diliprocks1986" target="_blank" class=" freecode btn btn-default btn-lg"><i class="fa fa-fire fa-fw"></i> <span class="network-name">freeCodeCamp</span></a>
              </li>

            </ul>
          </div>
        </div>
        <!-- /.container -->
      </div>
    </div>
  </div>

  <!-- /.banner -->

  <!-- Footer -->
  <footer>

    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <ul class="list-inline">
            <li>
              <a href="#">Home</a>
            </li>
            <li class="footer-menu-divider">&sdot;</li>
            <li>
              <a href="#about">About</a>
            </li>
            <li class="footer-menu-divider">&sdot;</li>
            <li>
              <a href="#portfolio">Portfolio</a>
            </li>
            <li class="footer-menu-divider">&sdot;</li>
            <li>
              <a href="#contact">Contact</a>
            </li>
          </ul>
          <p class="copyright text-muted small">Copyright &copy; Dilip pashi Web Design Studio 2016. All Rights Reserved</p>
        </div>
      </div>
    </div>
  </footer>


</body>

## PortFolio.markdown

      
    Raw
  

              PortFolio.markdown
            
          
    PortFolio

This is my PortFolio
A Pen by Dilip Pashi on CodePen.
License.

  
## scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

## style.css
body,
html {
    width: 100%;
    height: 100%;

}

body,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 700;
}

.topnav {
    font-size: 16px;
    border-bottom: 1px outset rgba(192, 192, 192, 0.5);
    background: rgba(192, 192, 192, 0.9);
    box-shadow: 0px 1px rgba(0, 0, 0, 0.3);
}
.topnav ul.navbar-nav li a {
background: rgba(28, 28, 28, 0.1);
color: #000;
}
.topnav ul.navbar-nav li a:hover,
.topnav ul.navbar-nav li a:focus
 {
background: rgba(255, 255, 255, 0.5);
color: #000;
}

.topnav .navbar-brand {
  background: rgba(28, 28, 28, 0.0);
  color: #000;
}

.topnav .navbar-brand:hover,
.topnav .navbar-brand:focus {
  background: rgba(255, 255, 255, 0.5);
  color: #000;
}

.lead {
    font-size: 18px;
    font-weight: 400;
}
/*top background*/
.intro-header {
    height: 855px;
    padding-top: 50px; /* If you're making other pages, make sure there is 50px of padding to make sure the navbar doesn't overlap content! */
    padding-bottom: 50px;
    text-align: center;
    background: url('https://www.colourbox.com/preview/10133993-html-code-green-screen-background-concept.jpg') no-repeat center center fixed;
    background-size: cover;
    height: 855px;
}
.bg-overlay {
  background:rgba(0,0,0, 0.3);
  height: 855px;
}

.intro-message {
    position: relative;
    padding-top: 20%;
    padding-bottom: 20%;
}
/*Big header*/
.intro-message > h1 {
    margin-top: -50px;
    text-shadow: 2px 1px 2px #000;
    font-size: 6em;
    color: rgba(200, 50, 50, 10);
}

.intro-divider {
    width: 400px;
    border-top: 1px solid #f8f8f8;
    border-bottom: 1px solid rgba(0,0,0,0.2);
}
/*small header*/
.intro-message > h3 {
    text-shadow: 2px 2px 2px rgba(,0,0,0.6);
  color: yellow;
}

@media(max-width:767px) {
    .intro-message {
        padding-bottom: 15%;
    }

    .intro-message > h1 {
        font-size: 3em;
    }

    ul.intro-social-buttons > li {
        display: block;
        margin-bottom: 20px;
        padding: 0;
    }

    ul.intro-social-buttons > li:last-child {
        margin-bottom: 0;
    }

    .intro-divider {
        width: 100%;
    }
}
/*line*/
hr.intro-divider {
  border: 1px outset rgba(255, 255, 255, 0.2);
  box-shadow: 1px 1px 1px rgba(0,0,0,0.6);
  width: 100%;
}
/* social buttons */
.btn {
  display: inline-block;
  color: #000;
  border: 2px outset rgba(0, 0, 0, 0.9);
  background: #C0C0C0;

  letter-spacing: 2px;
  transition: 0.2s;
}
.tweet{
background-color: rgba( 0, 172, 237, 1);
	box-shadow: 0 5px 20px rgba(0, 172, 237, .5);
}
.tweet:hover{
   color: #00aced;
  border: 2px outset rgba(0, 0, 0, 0.9);
  background: rgba(0,0,0, 0.9);
  transform:scale(1.1);
  transition: 0.2s;
  text-shadow: 1px 1px 1px rgba(0,0,0, 20);
  box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
  letter-spacing: 2px;
}
.git {
background-color: rgba(255, 255, 255, 1);
	box-shadow: 0 5px 20px rgba(255, 255, 255, .5);
}
.git:hover{
  color: #FFFFFF;
  border: 2px outset rgba(0, 0, 0, 0.9);
  background: rgba(0,0,0, 0.9);
  transform:scale(1.1);
  transition: 0.2s;
  text-shadow: 1px 1px 1px rgba(0,0,0, 20);
  box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
  letter-spacing: 2px;
}
.linked {
background-color: rgba( 0, 123, 181, 1);
	box-shadow: 0 5px 20px rgba(0, 123, 181, .5);
}
.linked:hover{
   color: #007bb5;
  border: 2px outset rgba(0, 0, 0, 0.9);
  background: rgba(0,0,0, 0.9);
  transform:scale(1.1);
  transition: 0.2s;
  text-shadow: 1px 1px 1px rgba(0,0,0, 20);
  box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
  letter-spacing: 2px;
}
.freecode {
background-color: #d2691e;
	box-shadow: 0 5px 20px rgba(210,105,30, .5);
}
.freecode:hover{
   color: #d2691e;
  border: 2px outset rgba(0, 0, 0, 0.9);
  background: rgba(0,0,0, 0.9);
  transform:scale(1.1);
  transition: 0.2s;
  text-shadow: 1px 1px 1px rgba(0,0,0, 20);
  box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
  letter-spacing: 2px;
}

.facebook{
background-color: rgba( 59, 89, 152, 1);
	box-shadow: 0 5px 20px rgba(59, 89, 152, .5);
}
.facebook:hover{
   color: #3b5998;
  border: 2px outset rgba(0, 0, 0, 0.9);
  background: rgba(0,0,0, 0.9);
  transform:scale(1.1);
  transition: 0.2s;
  text-shadow: 1px 1px 1px rgba(0,0,0, 20);
  box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
  letter-spacing: 2px;
}
.google{
background-color: rgba( 221, 75, 57, 1);
	box-shadow: 0 5px 20px rgba(221, 75, 57, .5);
}
.google:hover{
   color: #dd4b39;
  border: 2px outset rgba(0, 0, 0, 0.9);
  background: rgba(0,0,0, 0.9);
  transform:scale(1.1);
  transition: 0.2s;
  text-shadow: 1px 1px 1px rgba(0,0,0, 20);
  box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
  letter-spacing: 2px;
}
.instagram{
background-color: rgba( 18, 86, 136, 1);
	box-shadow: 0 5px 20px rgba(18, 86, 136, .5);
}
.instagram:hover{
   color: #125688;
  border: 2px outset rgba(0, 0, 0, 0.9);
  background: rgba(0,0,0, 0.9);
  transform:scale(1.1);
  transition: 0.2s;
  text-shadow: 1px 1px 1px rgba(0,0,0, 20);
  box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
  letter-spacing: 2px;
}
/*section 2*/
.content-section-a {
    padding: 50px 0;
    background: url('http://www.stimulbrain.com/wp-content/uploads/2012/10/Goal-Setting-The-Key-to-Success.jpg') no-repeat center center fixed;
    background-size: cover;
    height: 855px;
}
.bg-overlay2 {
  margin-top: -50px;
  background: rgba(255, 255, 255, 0.2);
  height: 855px;
}
  /*self-taught*/
.container .link {
  color: rgb(0,128,0);
  font-weight: bold;
  font-size: 22px;
}

.container .link:hover {
  color: rgb(220,20,60);
  font-weight: bold;
  font-size: 22.5px;
}

h2.section-heading {
    margin-top: 100px;
    font-size: 3em;
    color: rgba(0, 0, 0, 0.9);
}

  /*text*/
 .content-section-a p {
    font-size: 22px;
   font-weight: bold;
    color: #000;
  }
.content-section-a p a {
  color: silver;
  font-weight: bold;
}
/*profile picture*/
.img-circle {
  margin-top: 150px;
  border: 1px outset rgba(255, 255, 255, 0.3);
  box-shadow: 1px 1px 1px rgba(0,0,0,0.6);

}


/* Portfolio section*/
section {
  color: black;
  background: url('http://web.mit.edu/aloomis/www/portfolio/background.jpg') no-repeat center center fixed;
  background-size: cover;
}

 #below-section {
  color: #000;
}

#small-text {
  color: white;
}

/*Portfolio items*/

#portfolio .portfolio-item {
  margin: 0 0 15px;
  right: 0;
  border: 1px outset rgba(255, 255, 255, 0.6);
}

#portfolio .portfolio-item:hover {
  border: 1px outset rgba(0, 0, 0, 0.9);
  background: rgba(0,0,0, 0.9);
  transform:scale(.7);
  transition: 0.5s;
  text-shadow: 1px 1px 1px rgba(0,0,0, 20);
  box-shadow: 3px 3px 3px rgba(0,0,0,0.5);

}

#portfolio .portfolio-item .portfolio-link {
  display: block;
  position: relative;
  max-width: 400px;
  margin: 0 auto;
}

#portfolio .portfolio-item .portfolio-link .portfolio-hover {
  background: rgba(0, 0, 0, .7);
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: all ease .5s;
  -webkit-transition: all ease .5s;
  -moz-transition: all ease .5s,
}

#portfolio .portfolio-item .portfolio-link .portfolio-hover:hover {
  opacity: 5;
}

#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content {
  position: absolute;
  width: 100%;
  height: 20px;
  font-size: 20px;
  text-align: center;
  top: 50%;
  margin-top: -12px;
  color: #fff;
}

#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content i {
  margin-top: -12px;
}

#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h3,
#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h4 {
  margin: 0;
}

#portfolio .portfolio-item .portfolio-caption {
  max-width: 400px;
  margin: 0 auto;
  background-color: rgba(0,0,0, 0.8);
  text-align: center;
  padding: 25px;
}

#portfolio .portfolio-item .portfolio-caption h4 {
  color: #fff;
  text-transform: none;
  margin: 0;
}

#portfolio .portfolio-item .portfolio-caption p {
  font-family: "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-style: italic;
  font-size: 13px;
  margin: 0;
}

#portfolio * {
  z-index: 2;
}

@media (min-width:767px) {
  #portfolio .portfolio-item {
    margin: 0 0 30px;
  }
}

/*.col-md-4 {
  overflow: hidden;
  display: inline-block;
  border: 1px outset rgba(255, 255, 255, 0.6);
  background: rgba(0, 0, 0, 0.6);
  border-radius: 1%;
  text-align: center;
  box-shadow: 2px 3px 2px rgba(0,0,0,0.3);
  text-shadow: 1px 2px 1px rgba(0,0,0,0.3);
  cursor: pointer;
}
.col-md-4:hover {
  transition: 0.5s;
  box-shadow: 5px 10px 5px rgba(0,0,0,0.9);
}*/

.section-heading-spacer {
    float: left;
    width: 200px;
    border-top: 3px solid #e7e7e7;
}

.banner {
    padding: 100px 0;
    background: url('http://pizzaworld.in/pages/backgrounds/background_contact.jpg') no-repeat center center fixed;
    background-size: cover;
    height: 755px;
}

.bg-overlay4 {
  margin-top: -100px;
  padding: 100px 0;
  background: rgba(255,255,255, 0.3);
  height: 755px;
}

.banner ul {
    margin-bottom: 0;
}

.banner-social-buttons {
    float: right;
    margin-top: 0;
}

@media(max-width:1199px) {
    ul.banner-social-buttons {
        float: left;
        margin-top: 15px;
    }
}


    ul.banner-social-buttons > li {
        display: block;
        margin-bottom: 20px;
        padding: 0;
    }

    ul.banner-social-buttons > li:last-child {
        margin-bottom: 0;
    }

h2.connect {
   margin: 0;
   color: rgba(0, 0, 0, 0.9);
}

footer {
    padding: 50px 0;
    background: rgba(192, 192, 192, 0.9);
}

p.copyright {
    margin: 15px 0 0;
}

## styles
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="//fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" />
	<head>
	<title>Dilip pashi Web Design Portfolio</title>

	</head>

	<body>

	<!-- Navigation -->
	<nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
	<div class="container topnav">
	<!-- 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 topnav" href="http://www.facebook.com/dilip.pashi143" target="_blank">Dilip Pashi</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>
	<a href="#home">Home</a>
	</li>
	<li>
	<a href="#about">About</a>
	</li>
	<li>
	<a href="#portfolio">Portfolio</a>
	</li>
	<li>
	<a href="#contact">Contact</a>
	</li>
	</ul>
	</div>
	<!-- /.navbar-collapse -->
	</div>
	<!-- /.container -->
	</nav>


	<!-- Header -->
	<a name="home"></a>
	<div class="intro-header">
	<div class="bg-overlay">
	<div class="container">


	<div class="row">
	<div class="col-lg-12">
	<div class="intro-message">
	<h1>Welcome to My Web Design Portfolio</h1>
	<h3>Where Awesomeness Is Brought To Life.</h3>
	<hr class="intro-divider">
	<ul class="list-inline intro-social-buttons">
	<li>
	<a href="https://twitter.com/dilip_pashi" target="_blank" class="tweet btn btn-default btn-lg"><i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span></a>
	</li>
	<li>
	<a href="https://github.com/Diliprocks1986" target="_blank" class="git btn btn-default btn-lg "><i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span></a>
	</li>
	<li>
	<a href="https://www.linkedin.com/in/diliprocks1986" target="_blank" class=" linked btn btn-default btn-lg"><i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Linkedin</span></a>
	</li>
	<li>
	<a href="http://www.freecodecamp.com/diliprocks1986" target="_blank" class=" freecode btn btn-default btn-lg"><i class="fa fa-fire fa-fw"></i> <span class="network-name">freeCodeCamp</span></a>
	</li>
	</ul>
	</div>
	</div>
	</div>

	</div>
	<!-- /.container -->
	</div>
	</div>
	<!-- /.intro-header -->

	<!-- Page Content -->

	<a name="about"></a>
	<div class="content-section-a">
	<div class="bg-overlay2">
	<div class="container">
	<div class="row">
	<div class="col-lg-5 col-sm-6">

	<div class="clearfix"></div>
	<h2 class="section-heading">About My Journey to Web Design.</h2>
	<br>
	<p class="lead">I'm a <a class="link" target="_blank" href="http://www.freecodecamp.com/diliprocks1986">self taught</a> web designer, developer, co-founder and entrepreneur based in Kharagpur.<br>
	I'm currently part of a small web development team in an upcoming start-up, building web and mobile applications.<br>
	My passion is to use technology based solutions, to help solve real world challenges.<br>
	Competences:<br>
	Languages and Frameworks:<br>
	Javascript, HTML5, CSS3, jQuery, Bootstrap3, Angular.js, Meteor.js.<br>
	Tools & expertise:<br>
	Git, Responsive Web Design, Agile Methodologies.
	</p>
	</div>
	<div class="col-lg-5 col-lg-offset-2 col-sm-6 collapse navbar-collapse">
	<img class="img-circle img-responsive" src="https://pbs.twimg.com/profile_images/687587645912780800/taTg6il9_400x400.jpg" alt="">
	</div>
	</div>

	</div>
	<!-- /.container -->
	</div>
	</div>


	<!-- Portfolio Grid Section -->
	<a name="portfolio"></a>
	<section id="portfolio" class="bg-light-gray bounds">
	<div class="container">
	<div class="row">
	<div class="col-lg-12 text-center">
	<h2 class="section-heading">Awesomeness Portfolio.</h2>
	<h3 id="below-section" class="section-subheading text-muted">Below you'll find some of my recent work.</h3>
	</div>
	</div>
	<!-- Portfolio img1 -->
	<div class="row">
	<div class="col-md-4 col-sm-6 portfolio-item">
	<img src= "http://placehold.it/400x150/ff66ff/000000" class="img-responsive" alt="PINK" >

	<div class="portfolio-caption">
	<h4>Placeholder 1</h4>
	<p id="small-text" class="text-muted">Example portfolio</p>
	</div>
	</div>
	<!-- End of Portfolio img1 -->

	<!-- Portfolio img2 -->
	<div class="col-md-4 col-sm-6 portfolio-item portfolio2">
	<img src= "http://placehold.it/400x150/00ff00/000000" class="img-responsive" alt="GREEN" >

	<div class="portfolio-caption">
	<h4>Placeholder 2</h4>
	<p id="small-text" class="text-muted">Example portfolio</p>
	</div>
	</div>
	<!-- End of Portfolio img2 -->

	<!-- Portfolio img3 -->
	<div class="col-md-4 col-sm-6 portfolio-item">
	<img src= "http://placehold.it/400x150/ff0000/000000" class="img-responsive" alt="RED" >

	<div class="portfolio-caption">
	<h4>Placeholder 3</h4>
	<p id="small-text" class="text-muted">Example portfolio</p>
	</div>
	</div>
	<!-- End of Portfolio img3 -->

	<!-- Portfolio img4 -->
	<div class="col-md-4 col-sm-6 portfolio-item">
	<img src= "http://placehold.it/400x150/0000ff/000000" class="img-responsive" alt="BLUE" >

	<div class="portfolio-caption">
	<h4>Placeholder 4</h4>
	<p id="small-text" class="text-muted">Example portfolio</p>
	</div>
	</div>
	<!-- End of Portfolio img4 -->

	<!-- Portfolio img5 -->
	<div class="col-md-4 col-sm-6 portfolio-item">
	<img src= "http://placehold.it/400x150/ffff00/000000" class="img-responsive" alt="YELLOW" >

	<div class="portfolio-caption">
	<h4>Placeholder 5</h4>
	<p id="small-text" class="text-muted">Example portfolio</p>
	</div>
	</div>
	<!-- End of Portfolio img5 -->

	<!-- Portfolio img6 -->
	<div class="col-md-4 col-sm-6 portfolio-item">
	<img src= "http://placehold.it/400x150/00ffff/000000" class="img-responsive" alt="SKYBLUE" >

	<div class="portfolio-caption">
	<h4>Placeholder 6</h4>
	<p id="small-text" class="text-muted">Example portfolio</p>
	</div>
	</div>
	<!-- End of Portfolio img6 -->
	</div>
	</div>
	</section>

	<a name="contact"></a>
	<div class="banner">
	<div class="bg-overlay4">
	<div class="container">
	<div class="row">
	<div class="col-lg-6">
	<h2 class="connect">Connect with My Web Design Studio: dilip.pashi143@gmail.com</h2>
	</div>
	<br>

	<div class="col-lg-6">
	<ul class="list-inline banner-social-buttons">
	<li>
	<a href="https://facebook.com/dilip.pashi143" target="_blank" class=" facebook btn btn-default btn-lg"><i class="fa fa-facebook fa-fw"></i> <span class="network-name">Facebook</span></a>
	</li>
	<li>
	<a href="https://plus.google.com/u/0/102792612631927493726" target="_blank" class=" google btn btn-default btn-lg "><i class="fa fa-google fa-fw"></i> <span class="network-name">Google+</span></a>
	</li>
	<li>
	<a href="https://www.instagram.com" target="_blank" class=" instagram btn btn-default btn-lg"><i class="fa fa-instagram"></i> <span class="network-name">Instagram</span></a>
	</li>
	<li>
	<a href="http://www.freecodecamp.com/diliprocks1986" target="_blank" class=" freecode btn btn-default btn-lg"><i class="fa fa-fire fa-fw"></i> <span class="network-name">freeCodeCamp</span></a>
	</li>

	</ul>
	</div>
	</div>
	<!-- /.container -->
	</div>
	</div>
	</div>

	<!-- /.banner -->

	<!-- Footer -->
	<footer>

	<div class="container">
	<div class="row">
	<div class="col-lg-12">
	<ul class="list-inline">
	<li>
	<a href="#">Home</a>
	</li>
	<li class="footer-menu-divider">⋅</li>
	<li>
	<a href="#about">About</a>
	</li>
	<li class="footer-menu-divider">⋅</li>
	<li>
	<a href="#portfolio">Portfolio</a>
	</li>
	<li class="footer-menu-divider">⋅</li>
	<li>
	<a href="#contact">Contact</a>
	</li>
	</ul>
	<p class="copyright text-muted small">Copyright © Dilip pashi Web Design Studio 2016. All Rights Reserved</p>
	</div>
	</div>
	</div>
	</footer>


	</body>
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
	body,
	html {
	width: 100%;
	height: 100%;

	}

	body,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
	font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-weight: 700;
	}

	.topnav {
	font-size: 16px;
	border-bottom: 1px outset rgba(192, 192, 192, 0.5);
	background: rgba(192, 192, 192, 0.9);
	box-shadow: 0px 1px rgba(0, 0, 0, 0.3);
	}
	.topnav ul.navbar-nav li a {
	background: rgba(28, 28, 28, 0.1);
	color: #000;
	}
	.topnav ul.navbar-nav li a:hover,
	.topnav ul.navbar-nav li a:focus
	{
	background: rgba(255, 255, 255, 0.5);
	color: #000;
	}

	.topnav .navbar-brand {
	background: rgba(28, 28, 28, 0.0);
	color: #000;
	}

	.topnav .navbar-brand:hover,
	.topnav .navbar-brand:focus {
	background: rgba(255, 255, 255, 0.5);
	color: #000;
	}

	.lead {
	font-size: 18px;
	font-weight: 400;
	}
	/top background/
	.intro-header {
	height: 855px;
	padding-top: 50px; /* If you're making other pages, make sure there is 50px of padding to make sure the navbar doesn't overlap content! */
	padding-bottom: 50px;
	text-align: center;
	background: url('https://www.colourbox.com/preview/10133993-html-code-green-screen-background-concept.jpg') no-repeat center center fixed;
	background-size: cover;
	height: 855px;
	}
	.bg-overlay {
	background:rgba(0,0,0, 0.3);
	height: 855px;
	}

	.intro-message {
	position: relative;
	padding-top: 20%;
	padding-bottom: 20%;
	}
	/Big header/
	.intro-message > h1 {
	margin-top: -50px;
	text-shadow: 2px 1px 2px #000;
	font-size: 6em;
	color: rgba(200, 50, 50, 10);
	}

	.intro-divider {
	width: 400px;
	border-top: 1px solid #f8f8f8;
	border-bottom: 1px solid rgba(0,0,0,0.2);
	}
	/small header/
	.intro-message > h3 {
	text-shadow: 2px 2px 2px rgba(,0,0,0.6);
	color: yellow;
	}

	@media(max-width:767px) {
	.intro-message {
	padding-bottom: 15%;
	}

	.intro-message > h1 {
	font-size: 3em;
	}

	ul.intro-social-buttons > li {
	display: block;
	margin-bottom: 20px;
	padding: 0;
	}

	ul.intro-social-buttons > li:last-child {
	margin-bottom: 0;
	}

	.intro-divider {
	width: 100%;
	}
	}
	/line/
	hr.intro-divider {
	border: 1px outset rgba(255, 255, 255, 0.2);
	box-shadow: 1px 1px 1px rgba(0,0,0,0.6);
	width: 100%;
	}
	/* social buttons */
	.btn {
	display: inline-block;
	color: #000;
	border: 2px outset rgba(0, 0, 0, 0.9);
	background: #C0C0C0;

	letter-spacing: 2px;
	transition: 0.2s;
	}
	.tweet{
	background-color: rgba( 0, 172, 237, 1);
	box-shadow: 0 5px 20px rgba(0, 172, 237, .5);
	}
	.tweet:hover{
	color: #00aced;
	border: 2px outset rgba(0, 0, 0, 0.9);
	background: rgba(0,0,0, 0.9);
	transform:scale(1.1);
	transition: 0.2s;
	text-shadow: 1px 1px 1px rgba(0,0,0, 20);
	box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
	letter-spacing: 2px;
	}
	.git {
	background-color: rgba(255, 255, 255, 1);
	box-shadow: 0 5px 20px rgba(255, 255, 255, .5);
	}
	.git:hover{
	color: #FFFFFF;
	border: 2px outset rgba(0, 0, 0, 0.9);
	background: rgba(0,0,0, 0.9);
	transform:scale(1.1);
	transition: 0.2s;
	text-shadow: 1px 1px 1px rgba(0,0,0, 20);
	box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
	letter-spacing: 2px;
	}
	.linked {
	background-color: rgba( 0, 123, 181, 1);
	box-shadow: 0 5px 20px rgba(0, 123, 181, .5);
	}
	.linked:hover{
	color: #007bb5;
	border: 2px outset rgba(0, 0, 0, 0.9);
	background: rgba(0,0,0, 0.9);
	transform:scale(1.1);
	transition: 0.2s;
	text-shadow: 1px 1px 1px rgba(0,0,0, 20);
	box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
	letter-spacing: 2px;
	}
	.freecode {
	background-color: #d2691e;
	box-shadow: 0 5px 20px rgba(210,105,30, .5);
	}
	.freecode:hover{
	color: #d2691e;
	border: 2px outset rgba(0, 0, 0, 0.9);
	background: rgba(0,0,0, 0.9);
	transform:scale(1.1);
	transition: 0.2s;
	text-shadow: 1px 1px 1px rgba(0,0,0, 20);
	box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
	letter-spacing: 2px;
	}

	.facebook{
	background-color: rgba( 59, 89, 152, 1);
	box-shadow: 0 5px 20px rgba(59, 89, 152, .5);
	}
	.facebook:hover{
	color: #3b5998;
	border: 2px outset rgba(0, 0, 0, 0.9);
	background: rgba(0,0,0, 0.9);
	transform:scale(1.1);
	transition: 0.2s;
	text-shadow: 1px 1px 1px rgba(0,0,0, 20);
	box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
	letter-spacing: 2px;
	}
	.google{
	background-color: rgba( 221, 75, 57, 1);
	box-shadow: 0 5px 20px rgba(221, 75, 57, .5);
	}
	.google:hover{
	color: #dd4b39;
	border: 2px outset rgba(0, 0, 0, 0.9);
	background: rgba(0,0,0, 0.9);
	transform:scale(1.1);
	transition: 0.2s;
	text-shadow: 1px 1px 1px rgba(0,0,0, 20);
	box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
	letter-spacing: 2px;
	}
	.instagram{
	background-color: rgba( 18, 86, 136, 1);
	box-shadow: 0 5px 20px rgba(18, 86, 136, .5);
	}
	.instagram:hover{
	color: #125688;
	border: 2px outset rgba(0, 0, 0, 0.9);
	background: rgba(0,0,0, 0.9);
	transform:scale(1.1);
	transition: 0.2s;
	text-shadow: 1px 1px 1px rgba(0,0,0, 20);
	box-shadow: 3px 3px 3px rgba(0,0,0,0.5);
	letter-spacing: 2px;
	}
	/section 2/
	.content-section-a {
	padding: 50px 0;
	background: url('http://www.stimulbrain.com/wp-content/uploads/2012/10/Goal-Setting-The-Key-to-Success.jpg') no-repeat center center fixed;
	background-size: cover;
	height: 855px;
	}
	.bg-overlay2 {
	margin-top: -50px;
	background: rgba(255, 255, 255, 0.2);
	height: 855px;
	}
	/self-taught/
	.container .link {
	color: rgb(0,128,0);
	font-weight: bold;
	font-size: 22px;
	}

	.container .link:hover {
	color: rgb(220,20,60);
	font-weight: bold;
	font-size: 22.5px;
	}

	h2.section-heading {
	margin-top: 100px;
	font-size: 3em;
	color: rgba(0, 0, 0, 0.9);
	}

	/text/
	.content-section-a p {
	font-size: 22px;
	font-weight: bold;
	color: #000;
	}
	.content-section-a p a {
	color: silver;
	font-weight: bold;
	}
	/profile picture/
	.img-circle {
	margin-top: 150px;
	border: 1px outset rgba(255, 255, 255, 0.3);
	box-shadow: 1px 1px 1px rgba(0,0,0,0.6);

	}


	/* Portfolio section*/
	section {
	color: black;
	background: url('http://web.mit.edu/aloomis/www/portfolio/background.jpg') no-repeat center center fixed;
	background-size: cover;
	}

	#below-section {
	color: #000;
	}

	#small-text {
	color: white;
	}

	/Portfolio items/

	#portfolio .portfolio-item {
	margin: 0 0 15px;
	right: 0;
	border: 1px outset rgba(255, 255, 255, 0.6);
	}

	#portfolio .portfolio-item:hover {
	border: 1px outset rgba(0, 0, 0, 0.9);
	background: rgba(0,0,0, 0.9);
	transform:scale(.7);
	transition: 0.5s;
	text-shadow: 1px 1px 1px rgba(0,0,0, 20);
	box-shadow: 3px 3px 3px rgba(0,0,0,0.5);

	}

	#portfolio .portfolio-item .portfolio-link {
	display: block;
	position: relative;
	max-width: 400px;
	margin: 0 auto;
	}

	#portfolio .portfolio-item .portfolio-link .portfolio-hover {
	background: rgba(0, 0, 0, .7);
	position: absolute;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: all ease .5s;
	-webkit-transition: all ease .5s;
	-moz-transition: all ease .5s,
	}

	#portfolio .portfolio-item .portfolio-link .portfolio-hover:hover {
	opacity: 5;
	}

	#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content {
	position: absolute;
	width: 100%;
	height: 20px;
	font-size: 20px;
	text-align: center;
	top: 50%;
	margin-top: -12px;
	color: #fff;
	}

	#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content i {
	margin-top: -12px;
	}

	#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h3,
	#portfolio .portfolio-item .portfolio-link .portfolio-hover .portfolio-hover-content h4 {
	margin: 0;
	}

	#portfolio .portfolio-item .portfolio-caption {
	max-width: 400px;
	margin: 0 auto;
	background-color: rgba(0,0,0, 0.8);
	text-align: center;
	padding: 25px;
	}

	#portfolio .portfolio-item .portfolio-caption h4 {
	color: #fff;
	text-transform: none;
	margin: 0;
	}

	#portfolio .portfolio-item .portfolio-caption p {
	font-family: "Droid Serif", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-style: italic;
	font-size: 13px;
	margin: 0;
	}

	#portfolio * {
	z-index: 2;
	}

	@media (min-width:767px) {
	#portfolio .portfolio-item {
	margin: 0 0 30px;
	}
	}

	/*.col-md-4 {
	overflow: hidden;
	display: inline-block;
	border: 1px outset rgba(255, 255, 255, 0.6);
	background: rgba(0, 0, 0, 0.6);
	border-radius: 1%;
	text-align: center;
	box-shadow: 2px 3px 2px rgba(0,0,0,0.3);
	text-shadow: 1px 2px 1px rgba(0,0,0,0.3);
	cursor: pointer;
	}
	.col-md-4:hover {
	transition: 0.5s;
	box-shadow: 5px 10px 5px rgba(0,0,0,0.9);
	}*/

	.section-heading-spacer {
	float: left;
	width: 200px;
	border-top: 3px solid #e7e7e7;
	}

	.banner {
	padding: 100px 0;
	background: url('http://pizzaworld.in/pages/backgrounds/background_contact.jpg') no-repeat center center fixed;
	background-size: cover;
	height: 755px;
	}

	.bg-overlay4 {
	margin-top: -100px;
	padding: 100px 0;
	background: rgba(255,255,255, 0.3);
	height: 755px;
	}

	.banner ul {
	margin-bottom: 0;
	}

	.banner-social-buttons {
	float: right;
	margin-top: 0;
	}

	@media(max-width:1199px) {
	ul.banner-social-buttons {
	float: left;
	margin-top: 15px;
	}
	}



	ul.banner-social-buttons > li {
	display: block;
	margin-bottom: 20px;
	padding: 0;
	}

	ul.banner-social-buttons > li:last-child {
	margin-bottom: 0;
	}

	h2.connect {
	margin: 0;
	color: rgba(0, 0, 0, 0.9);
	}

	footer {
	padding: 50px 0;
	background: rgba(192, 192, 192, 0.9);
	}

	p.copyright {
	margin: 15px 0 0;
	}
	<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
	<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
	<link href="//fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" />