Resume Landing Page

index.html

    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.1/css/materialize.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>


    <p style="color: #006407">MacBook-Pro.local$ </p>
    <h1> Rup Gautam <span class="cursor">|</span></h1>

    <!--Start circle profile pic-->
    <div class="circle"></div>


    <div class="social">
        <ul>
            <li><a href=https://www.linkedin.com/in/rupgautam id="li"><i class="fa fa-linkedin"></i></a></li>
            <li><a href=https://github.com/RupGautam id="gh"><i class="fa fa-github"></i></a></li>
            <li><a href=/resume.pdf id="cv"><i class="fa fa-file-pdf-o"></i></a></li>
            <li><a href=https://twitter.com/gautamrup id="tw"><i class="fa fa-twitter"></i></a></li>
            <li><a href=./Books.md id="bk"><i class="fa fa-book"></i></a></li>
        </ul>
    </div>

resume-landing-page.markdown

Resume Landing Page

A Pen by Rup Gautam on CodePen.

License.

style.css

@import url(http://fonts.googleapis.com/css?family=Inconsolata);

::-moz-selection {
    background: rgba(0, 0, 0, 0.2);
}

::selection {
    background: rgba(0, 0, 0, 0.2);
}

body {
    background: #64346D;
    background: linear-gradient(to right, #64346D, #330333, #64346D);
    background-size: 200%;
    background-position: 0%;
    font-family: 'Open Sans', Inconsolata;
    font-size: 1em;
    margin: 4em;
    color: #f5f5f5;
    animation: bg-move 10s linear infinite;
    -webkit-animation: bg-move 10s linear infinite;
}

h1 {
    font-size: 3.5em;
    text-align: center;
    margin: -.1em 0 1em;
    font-family: Inconsolata;
}

.circle {
    position: relative;
    margin: 0 auto 3em;
    height: 9em;
    width: 9em;
    border-radius: 50%;
    background: #999 url(https://media.licdn.com/mpr/mpr/shrinknp_200_200/AAEAAQAAAAAAAAlfAAAAJDU0MTZlYTUwLWMwYzgtNGY3ZC1hZjU5LTk3NWY3ZmEyMmRjMw.jpg) 10% 0%;
    background-size: 10em 10em;
    box-shadow: 0 0 0 0.8em rgba(255, 255, 255, 0.3);
}

.social {
    position: relative;
    margin: 0 auto 3em;
    height: 9em;
}

.circle:before, .circle:after {
    position: absolute;

    width: 6.30em;
    font-size: 1.7em;
    top: 2em;
    right: 6em;
}

.circle:after {

    left: 6.45em;
    width: 10.25em;
}

.nav {
    margin: -10px auto;
    height: 3em;
    width: 30.3em;
}

.nav div {
    text-align: center;
    text-shadow: 0 0 7px rgba(0, 0, 0, 0.3);
    font-size: 1.2em;
    line-height: 2em;
    height: 2em;
    padding: 0 1em;
    margin: 0 10px;
    background: rgba(0, 0, 0, 0.3);
    border: solid 3px transparent;
    border-radius: 4px;
    opacity: 1;
    transition: all 500ms;
    float: left;
}

.nav div:hover {
    border: solid 3px #fff;
}

.li {
    margin: 0;

}

p:first-of-type {
    max-width: 9999em;
    text-align: center;
    margin: 0;
}

p:not(:first-of-type) {
    animation: slide-in 1s ease-out;
    -webkit-animation: slide-in 1s ease-out;
}

p:not(:first-of-type):before {
    content: '';
    display: block;
    max-width: 49em;
    width: 80%;
    height: 1px;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: solid 1px rgba(255, 255, 255, 0.3);
    margin: 2.5em auto 10px;
}

.cursor {
    color: GoldenRod;
    opacity: 1;

    -webkit-animation: blink 1.0s infinite cubic-bezier(1, 0, 0, 1);
    -moz-animation: blink 1.0s infinite cubic-bezier(1, 0, 0, 1);
    animation: blink 1.0s infinite cubic-bezier(1, 0, 0, 1);
}

@keyframes blink {
    from {
        opacity: 0;
    }
    to {
        opacity: 1
    }
}

@-webkit-keyframes blink {
    from {
        opacity: 0;
    }
    to {
        opacity: 1
    }
}

@-moz-keyframes blink {
    from {
        opacity: 0;
    }
    to {
        opacity: 1
    }
}

ul {
    padding: 10px;
    font-size: 0;
    text-align: center;
}

li {
    display: inline-block;
    margin: 70px auto;
}

a {
    display: block;
    position: relative;
    margin: 0 25px;
    font-size: 50px;
    text-align: center;
    color: white;

}

a:before {
    content: "";
    background-color: #1f2027;
    color: white;

}

a:after {
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
}

a:hover:before {
    background-color: white;
}

#li:hover {
    color: #007bb6;
}

#gh:hover {
    color: rgba(51, 51, 51, 0.58);
}

#yt:hover {
    color: #dd3a3a;
}

#fb:hover {
    color: #285298;
}

#tw:hover {
    color: #00aced;
}