CodePen Embed

<head>
<style>
@import url('https://fonts.googleapis.com/css?family=Abel|Cinzel|Quicksand|Comfortaa');
</style>
</head>
<BODY>
  <div id="mynav">
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">Cirriculum Vitae</a>
    </div>
    <div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#section1">Hello</a></li>
          <li><a href="#section2">General Information</a></li>
          <li><a href="#section3">Skills</a></li>
          <li><a href="#section4">Contact</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>    
  </div>
        <div class="navarea" id="navarea"><h1></h1></div>
  <div class="bg-img1" id="section1">
    <div class="row">
      <div class="hellomsg">
        <h1>Hello!!</h1>
      </div>
      <div class="imkt">
        <h1>I am Kaustubh</h1>
      </div>
    </div>
    <div class="Intro">
      <div class="details text-center flex-item">
        <h2>Kaustubh Toraskar</h2>
        <h4>Mumbai,India</h4>
        <h4>Sardar Patel Institute of Technology</h4>
        <h4>Freelancer</h4>
      </div>
      <img class="thumbnail flex-item" src="https://scontent.fbom1-1.fna.fbcdn.net/v/t1.0-9/14445958_1096725117049393_7537212999278498225_n.jpg?oh=69d99e6ee794b557c48dcf609fcc5e04&oe=593C05FB" id="dp"></img>
    </div>
  </div>
  <div class="bg-img2" id="section2">
    <div class="Seperator">
      <h3>Personal Information</h3>
    </div>
    <div class="qual">
      <div class="text-center info">
        <hr width="40%" /><i class="fa fa-code"></i><hr width="40%" />
        <Table>
          <tr>
            <td> Name:</td>
            <td> Kaustubh Madhukar Toraskar</td>
          </tr>
          <tr>
            <td>Date of Birth:</td>
            <td> 24th September 1997</td>
          </tr>
          <tr>
            <td>Age:</td>
            <td>19</td>
          </tr>
          <TR>
            <TD>Qualification:</TD>
            <td> Second Year Engineering Student (Expecting to complete graduation by 2019)
            </td>
          </TR>

        </table>
        <h3>Academics</h3>
        <table>
          <tr>
            <td>SSC Examination Score:
            </td>
            <td>92.40%</td>
          </tr>
          <tr>
            <td>HSC Examination Score:
            </td>
            <td>90.41%</td>
          </tr>
          <tr>
            <td>Average GPA (Till 3rd Sem):</td>
            <td>9.03</td>
          </tr>
          <tr>
            <td colspan="2">
              Qualified for Primary and Secondary Scholarships of Maharashtra State Board.</td>
          </tr>
          <tr>
            <td colspan="2">
              Qualified for the Second round of Homi Bhabha Young Scientist contest at both Primary and Secondary stages.
            </td>
          </tr>
        </table>
        <h3>Extra Cirricular Activities</h3>
        <table>
          <tr>
            <td colspan="2">
              Passed the Praveshika Poorna Examination from Gandharva Mahavidyalaya in Tabla.
            </td>
          </tr>
          <tr>
            <td colspan="2">
              Played Volleyball for College's team for 2 years which includes one runner up.
            </td>
          </tr>
          <tr>
            <td colspan="2">Participated in various Sanskrit Shloka recital competitions and won plenty of prizes.
            </td>
          </tr>
          </table>
      </div>
    </div>
  </div>
  </div>
  <div class="bg-img3" id="section3">
    <div class="Seperator">
      <h2>Skills</h2></div>
    <div class="skills">
      <h3>Languages I know:</h3><br /><br />
      <div class="row">
        <div class="col-sm-6 col-md-4 col-lg-3">
          <h4>C,C++</h4>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3">
          <h4>Java</h4>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3">
          <h4>HTML,CSS</h4>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3">
          <h4>JavaScript</h4>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3">
          <h4>JQuery</h4>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-3">
          <h4>SQL</h4>
        </div>
      </div><br /><br />
      <h3>My Projects:</h3><br /><br />
      <div class="row">
        <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
          <h4>Snake Game</h4>
          <p>
            An user interactive snake game, programmed in C without using graphics.<br> git link:<br>https://github.com/kaustubhtoraskar/snakegame.git</p>
        </div>
      </div><br /><br />
      <h3>Work Experience</h3><br /><br />
      <div class="row">
        <div class="col-sm-6 col-md-4 col-lg-6">
          <h5>Conducted Codatron 2k17</h5>
          <p>
            Codatron is a coding competition organised in technical festival of Sardar Patel Institute of Technology.This competition is open for all and students from various colleges participate in codatron.</p>
        </div>
        <div class="col-sm-6 col-md-4 col-lg-6">
          <h5>Successfully executed GeetGeek.</h5>
          <p>
            GeetGeek is a fun event organised in cultural festival of Sardar Patel Institute of Technology.This event is enhanced version of Antakshari and is played among the college students of both SPIT and Bhavan's campus.
          </p>
        </div>
        <div class="col-sm-12 col-md-12 col-lg-12">
          <h5>Social Media Manager at CYKLO</h5>
          <p>Cyklo is a startup which promotes the eco friendly way of transportation.I am working there as a social media manager which includes handling all of it's social media displays.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="bg-img4" id="section4">
    <div class="Seperator">
      <h2>Contact Me</h2></div>
    <div class="contact text-center">
      <h5>Mail me at:</h5>
  <h3>kaustubhtoraskar97@gmail.com</h3>
      <h5>My Contact NO:</h5>
      <h3>9930468296</h3>
      <h4>Or find me on social network</h4>
      <h2><span><i class="fa fa-hand-o-down fa-4" aria-hidden="true"></i></span></h2>
      <div class="row">
        <div class="col-xs-4 col-sm-2">
          <a class="button social" href="#"><i class="fa fa-fw fa-linkedin"></i></a></div>
        <div class="col-xs-4 col-sm-2">
          <a class="button social" href="https://github.com/kaustubhtoraskar"><i class="fa fa-fw fa-github"></i></a></div>
        <div class="col-xs-4 col-sm-2">
          <a class="button social" href="https://twitter.com/bababanchoddas"><i class="fa fa-fw fa-twitter"></i></a></div>
        <div class="col-xs-4 col-sm-2">
          <a class="button social" href="https://www.facebook.com/kaustubhtoraskar"><i class="fa fa-fw fa-facebook"></i></a></div>
        <div class="col-xs-4 col-sm-2">
          <a class="button social" href="https://www.instagram.com/kaustubh_toraskar/"><i class="fa fa-fw fa-instagram"></i></a></div>
        <div class="col-xs-4 col-sm-2"><a class="button social" href="https://www.quora.com/profile/Kaustubh-Toraskar"><i class="fa fa-fw fa-quora"></i></a></div>
      </div>
    </div>
  </div>
</BODY>

.hellomsg {
  color: Darkblue;
  display: flex;
  position: absolute;
  justify-content: center;
  width: 100%;
  height: auto;
  margin-top: 10%;
  text-shadow:0px 30px 10px purple;
}
.info {
  color: white;
  background-color: black;
  opacity: 0.8;
  padding: 2%;
box-shadow:5px 10px 10px  #0f000f;
  
}

td {
  background-color: black;
  width:50%;
  font-size:15px;
  font-family:quicksand;
}

.imkt {
  color: darkblue;
  display: flex;
  position: absolute;
  justify-content: center;
  width: 100%;
  height: auto;
  margin-top: 10%;
  opacity: 0;
  text-shadow:0px 30px 10px purple;
}

.bg-img1 {
  /*background-image: url("http://images.akamai.steamusercontent.com/ugc/559885232760590823/BB582CC6088BE17D77B2EF47B7A8DC63E43B564F/");*/
  background-image: url("http://www.technocrazed.com/wp-content/uploads/2015/11/HD-Galaxy-Wallpapers-Free-Download-110.jpg");
  background-size: cover;
  background-attachment: fixed;
  min-height: 100%;
  width: 100%;
  paddin-bottom: 5%;
}

.bg-img3 {
  /*background-image:url("http://img.7te.org/images/570x363/mint-green-wallpaper-green-wallpaper-82845.png");*/
  background-image: url("http://deepskyeffect.com/resources/Objects/M42%20-%20Orion's%20Nebula.jpg");
  height: 220%;
  padding-bottom: 5%;
  width: 100%;
}

.bg-img2 {
  /*background-/*image:url("http://theartmad.com/wp-content/uploads/2015/02/Geometric-Wallpaper-13.jpg");*/
  background-image: url("http://powellong.com/data/wallpapers/17/WDF_651175.jpg");
  height: 200%;
  width: 100%;
}

.bg-img4 {
  /*background-image: url("http://www.walldevil.com/wallpapers/a62/purple-wallpaper-blue-pattern-art-elideli-d5vunta.jpg");*/
  background-image: url("http://images.akamai.steamusercontent.com/ugc/559885232760590823/BB582CC6088BE17D77B2EF47B7A8DC63E43B564F/");
  height:auto;
  width: 100%;
  padding-bottom:5%;
}

img {
  height: auto;
  width: 100%;
}

.navbar {
  border: none;
}

#dp {
  float: left;
  height: 20%;
  width: 25%;
  border-radius: 50%;
  border: hidden;
  margin-right: 3%;
}
h1{

}
.Intro {
  width: 100%;
  min-height: 30%;
  display: flex;
  opacity: 0.9;
  justify-content: center;
  flex-wrap: wrap-reverse;
  flex-direction: row-reverse;
  background-color: black;
  padding: 2%;
  margin-top: 100px;
  box-shadow:0px 10px 10px #111;
}
.flex-item {
  color: white;
}

.qual {
  padding: 5%;
  width: 100%;
  height: auto;
  display: flex;
  flex-flow: column;
  justify-content: center;
}

table {
  color: white;
  border: hidden;
}

.contact {
  padding: 3%;
  max-width: 90%;
  margin: 5%;
  background-color: black;
  opacity: 0.8;
  color: white;
  height: auto;
  display:flex;
  flex-flow:column;
  flex-wrap:wrap;
  justify-content: center;
  box-shadow:5px 10px 10px  #112;

}
.Seperator {
  display: flex;
  justify-content: center;
  widht: 100%;
  background-color: black;
  opacity: 0.9;
  color: white;
  padding: 3%;
  box-shadow:0px -5px 10px  #000;
      font-family:'Cinzel' , serif ;
}

.skills {
  padding: 2%;
  margin: 5% 5% 10% 5%;
  width: 90%;
  background-color: black;
  color: white;
  opacity: 0.8;
  text-align: center;
  box-shadow:5px 10px 10px  #0f0000;
  font-family:Comfortaa;
}
h4{font-family:Comfortaa;
}
h3{font-family:Comfortaa;
}
h5{font-family:Comfortaa;
}
h2{font-family:Comfortaa;
}



.bg-img1,
.bg-img2,
.bg-img3,
.bg-img4 {
  position:relative;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: auto;
}

.social {
  border-radius: 50%;
  opacity: 0.5%;
  background-color: black;
  border: solid;
}

@media screen and (min-width: 640px) {
  .bg-img3{
    height:auto;
}

@media screen and(min-width:368px) {
}
.navbar{
  height:8%;
  opacity:0.8;
  color:white;
  background-color:black;
  font-family:'Abel', sans-serif;
  font-size:20px;
}
hr{
  color:white;
}
.navarea{
  position:fixed;
  min-height:20%;
  min-width:100%;
}

$(document).ready(function() {
  $(".Intro").hide();
  $(".qual").hide();
  $("#hb").hide();
  $(".hellomsg")
    .animate({
      left: '0',
      right: '0%',
      top: '25%'
    }, function() {
      $(".hellomsg").fadeOut(2000);
      $(".imkt").delay(3000).animate({
        left: '0',
        right: '0%',
        top: '25%',
        opacity: '1'
      }, function() {
        $(".imkt").fadeOut(3000);
        $(".Intro,.qual,.hobbies").delay(3000).fadeIn(1000);
      });
    });
  $("BODY").scrollspy({
    target: ".navbar",
    offset: 50
  });
  $("#myNavbar a").on('click', function(event) {
    if (this.hash !== "") {
      event.preventDefault();
      var hash = this.hash;
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 800, function() {
        window.location.hash = hash;
      });
    } // End if
  });
  $(".navarea").on({
    mouseover: function() {
      $(".navbar").fadeIn(1000);
    }
  });
  $("body").click(function(e) {
    if (e.target.id !== 'mynav') {
      $(".navbar").fadeOut(2000);
    }
  });
 /* $(".navarea").mouseenter(function(){
    $(".navbar").css("display","block");
  });
    $(".navarea").mouseleave(function(){
    $(".navbar").css("display","none");
  });*/
});

This Pen is owned by Kaustubh Toraskar on CodePen.

See more by @Meghdoot on CodePen

External CSS

External JavaScript