Hi, I am Anubhav Saini

Contains Information regarding my online footprint. Also, first Zipline at FCC.

by jshacker

HTML

<div id="Top"></div>
<div class="container-fluid">
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" aria-expanded="false" data-target="collapsable-menu"> 
                <span class="sr-only">Toggle Menu</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button> 
            <a class="navbar-brand" href="#Top">Anubhav Saini</a>
        </div>
        <div id="collapsable-menu" class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#Home">Home</a></li>
                <li><a href="#About">About</a></li>
                <li><a href="#Blog">Blog</a></li>
            </ul>
        </div>
    </nav>
</div>
<section id="content">
    <div id="Home">
         <h1 class="heading text top-light white">hi, I am Anubhav Saini</h1>
        <hr class="separator top-light box white" />
        <div class="reach row"> 
            <span class="col-xs-3">
                <a href="https://twitter.com/iamanubhavsaini" class="text top-light white">Twitter</a>
            </span>
            <span class="col-xs-3">
                <a href="https://in.linkedin.com/in/iamanubhavsaini" class="text top-light white">LinkedIn</a>
            </span>
            <span class="col-xs-3">
                <a href="http://www.freecodecamp.com/iamanubhavsaini" class="text top-light white">FreeCodeCamp</a>
            </span>
            <span class="col-xs-3">
                <a href="https://github.com/IAmAnubhavSaini" class="text top-light white">GitHub</a>
            </span>
        </div>
    </div>
    <div id="About">
         <h1>About</h1>
        <hr class="separator" />
        <div>
            <span class="about-item">developer</span>
            <span class="about-item">
       ...

CSS

body {
  min-width: 900px;
}
#content {
  padding-top: 50px;
}
#Home,
#About,
#Portfolio {
  background: transparent no-repeat fixed center center / cover;
  height: 800px;
  text-align: center;
  color: white;
  font-variant: petite-caps;
  padding: 100px 0;
}
#Home {
  background-image: url("http://cache.desktopnexus.com/cropped-wallpapers/571/571748-1366x768-%5BDesktopNexus.com%5D.jpg");
  z-index: 1;
}
#About {
  background-image: url("http://cache.desktopnexus.com/cropped-wallpapers/1983/1983944-1366x768-%5BDesktopNexus.com%5D.jpg");
  z-index: 2;
}
#Portfolio {
  background-image: url("http://cache.desktopnexus.com/cropped-wallpapers/1939/1939682-1366x768-%5BDesktopNexus.com%5D.jpg");
  z-index: 3;
}
.heading {
  font-size: 3em;
}
#Home .heading {
  font-size: 6em;
}
#Portfolio .portfolio-item .heading {
  font-size: 4em;
}

.top-light.text.white {
  text-shadow:
    10px 20px 3px black,
    0 -1px 3px white;
}
.separator {
  border-width: 10px;
}
.top-light.box.white {
  box-shadow:
    10px 20px 3px black,
    0 -1px 3px white;
}
.reach {
  margin: 2em;
  padding: 2em;
}
.reach span a {
  color: white;
  font-size: 2em;
  text-decoration: underline;
}
.reach span a:hover {
  text-decoration: none;
  border-bottom: thin solid red;
}

.portfolio-item {
  background-color: rgba(0, 0, 0, 0.3);
  padding: 2em 0.2em;
}
.portfolio-details a {
  margin: 1em;
  padding: 0.2em 1em;
  background-color: rgba(200, 200, 200, 0.5);
  font-size: 2em;
  color: black;
}