<!-- this is the markup. you can change the details (your own name, your own avatar etc.) but don’t change the basic structure! -->

<aside class="profile-card">
  
  <header>
    
    <!-- here’s the avatar -->
    <a href="http://kanishkkunal.in">
      <img src="https://0.gravatar.com/avatar/bb9bf20fb6f55b4af10b0f98c540075f?s=150">
    </a>

    <!-- the username -->
    <h1>Kanishk Kunal</h1>
    
    <!-- and role or location -->
    <h2>Web & Mobile Developer</h2>
    
  </header>
  
  <!-- bit of a bio; who are you? -->
  <div class="profile-bio">
    
    <p>Kanishk is a passionate developer & blogger who devotes most of his time punching his keyboard and swiping his smartphone.</p>
    
  </div>
  
  <!-- some social links to show off -->
  <ul class="profile-social-links">
    
    <!-- twitter - el clásico  -->
    <li>
      <a href="https://twitter.com/kanihkkunal">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/social-twitter.svg">
      </a>
    </li>
    
    <!-- envato – use this one to link to your marketplace profile -->
    <li>
      <a href="http://themeforest.net/user/kanishkkunal">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/social-envato.svg">
      </a>
    </li>
    
    <!-- codepen - your codepen profile-->
    <li>
      <a href="https://codepen.io/kanishkkunal">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/social-codepen.svg">
      </a>
    </li>
    
    <!-- add or remove social profiles as you see fit -->
    
  </ul>
  
</aside>
<!-- that’s all folks! -->

/* go on then, styles go here.. knock yourself out! */
@import url(https://fonts.googleapis.com/css?family=Lato:300,400);

$spacing-unit: 24px;

@keyframes pulsate {
    0% {transform: scale(0.6, 0.6); opacity: 0.0;}
    50% {opacity: 1.0;}
    100% {transform: scale(1, 1); opacity: 0.0;}
}

body {
  background-color: #1a1d23;
  background-repeat:repeat, no-repeat;
  background-size:auto, 100% 100%;
  background-attachment: fixed;
  color: #ecf0f1;
  font-family: "Lato", "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 300;
  min-height: 100%;
  overflow-y: scroll;
  width: 100%;
}

h1, h2 {
  font-weight: 300;
  line-height: 1.2;
}

.profile-card {
  height: 305px;
  width: 600px;
  position: relative;
  margin: 4em auto;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  
  header {
    width: 100%;
    height: 100%;
    text-align: center;
    background: -moz-linear-gradient(45deg,  rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,rgba(0,0,0,0.9)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(45deg,  rgba(0,0,0,0.9) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(45deg,  rgba(0,0,0,0.9) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(45deg,  rgba(0,0,0,0.9) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
    background: linear-gradient(45deg,  rgba(0,0,0,0.9) 0%,rgba(0,0,0,0) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cc000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    
    a {
      position: relative;
    }
    
    a:before {
      content:"";
      border: 15px solid rgba(255,255,255,0.3);
      border-radius: 50%;
      height: 90px;
      width: 90px;
      position: absolute;
      left: 0;
      bottom: 3px;
      animation: pulsate 1.6s ease-out;
      animation-iteration-count: infinite; 
      opacity: 0.0;
      z-index: 99;
    }
    
    img {
      position: relative;
      border-radius: 50%;
      height: 90px;
      width: 90px;
      padding: 0;
      margin: 0;
      border: 15px solid transparent;
      margin-top: $spacing-unit / 2;
      z-index: 9999;
      transition: all .3s ease-out;
    }
    
    a:hover img {
     transform: scale(1.06, 1.06);
    }
    
    a:hover:before {
      animation: none;
    }
    
    h1 {
        text-align: center;
        font-size: 28px;
        font-weight: 400;
        opacity: 0.9;
        margin-bottom: $spacing-unit / 3;
    }
    
    h2 {
        font-size: 18px;
        margin-top: 0;
        opacity: 0.9;
    }
  }
  
  .profile-bio {
      position: absolute;
      bottom: 0;
    
    p {
      margin: $spacing-unit;
      text-align: center;
      opacity: 0.9;
    }
  }
  
  .profile-social-links {
    position: relative;
    background-color: white;
    margin: 0 auto;
    text-align: center;
    padding: 6px 0;
    
    li {
      display: inline-block;
      padding: 3px 5px 0;
      
      img {
        height: 28px;
        opacity: 0.8;
        transition: all .2s ease-out;
      }
      
      a:hover img {
        opacity: 1;
        transform: scale(1.1, 1.1);
      }
    }
  }
  
  .profile-social-links:after {
      bottom: 100%;
      left: 50%;
      border: solid transparent;
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
      border-color: rgba(255, 255, 255, 0);
      border-bottom-color: #ffffff;
      border-width: 10px;
      margin-left: -10px;
    }
}