<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.6.3/font-awesome.min.css" integrity="sha384-Wrgq82RsEean5tP3NK3zWAemiNEXofJsTwTyHmNb/iL3dP/sZJ4+7sOld1uqYJtE" crossorigin="anonymous">
<link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>

<h1>Up-cent</h1>
<p>first pen</p>
<p><--different effects--></p>
<p>nya cats</p>
<p>| |</p>
<p>\/</p>

  <img src="http://vignette3.wikia.nocookie.net/campjupiter/images/2/2c/Catinbowls.png/revision/latest?cb=20141203222915" alt="" />
  
<!--Media bar #1 -->
<nav class="social">
       <ul>
          <a href=""><li>Gitlab <i class="fa fa-gitlab"></i></li</a>
       </ul>
        <ul>
          <a href=""><li> Snapchat <i class="fa fa-snapchat"></i></li</a>
       </ul>
       <ul>
          <a href=""><li>HTML5 <i class="fa fa-html5" aria-hidden="true"></i></li</a>
       </ul>
       <ul>
          <a href=""><li> LinkedIn<i class="fa fa-linkedin-square" aria-hidden="true"></i></li</a>
       </ul>
       <ul>
          <a href=""><li>Slack <i class="fa fa-slack" aria-hidden="true"></i></li</a>
       </ul>
       <ul>
          <a href=""><li>Pied-Piper <i class="fa fa-pied-piper-alt" aria-hidden="true"></i></li</a>
       </ul>
</nav>


<!-- Media bar #2 -->
<nav class="social_2">
       <ul>
          <a href=""><li><i class="fa fa-gitlab"></i>Gitlab </li</a>
       </ul>
        <ul>
          <a href=""><li><i class="fa fa-snapchat"></i> Snapchat </li</a>
       </ul>
       <ul>
          <a href=""><li><i class="fa fa-html5" aria-hidden="true"></i>HTML5 </li</a>
       </ul>
       <ul>
          <a href=""><li><i class="fa fa-linkedin-square" aria-hidden="true"></i> LinkedIn</li</a>
       </ul>
       <ul>
          <a href=""><li><i class="fa fa-slack" aria-hidden="true"></i>Slack </li</a>
       </ul>
       <ul>
          <a href=""><li><i class="fa fa-pied-piper-alt" aria-hidden="true"></i>Pied-Piper </li</a>
       </ul>
</nav>
      			<!-- End media bar #2 -->

body {
  
  background:rgba(184, 29, 55, 1);
}
  img {
    
    position: absolute;
    bottom: 0;
    max-width: 20%;
    min-height: 50%;
    left: 42%;
  
  }


h1 {
  
  text-align: center;
  color: rgba(36, 191, 78, 1);
  font-family: 'Indie Flower', cursive;
  font-size:40px;
  cursor: pointer;
}
h1:hover {
  text-shadow: 2px 2px rgba(235, 217, 23, 1);
 
 
}

p {
  font-family: 'Indie Flower', cursive;
  text-align: center;
  font-size:20px;
  color: rgba(36, 191, 78, 1);
  cursor: pointer;
    
}

p:hover {
  
  color:rgba(235, 217, 23, 1);
  text-decoration: underline;
  text-transform: uppercase;
  letter-spacing: 5px;

}


a {
  color: #fff;
  text-decoration: none;
}



.social {
  position: fixed;
  top: 20px;
  font-size: 12px;


}

.social ul {
  padding: 0px;
  transform: translate(-270px, 0);
}

.social ul li {
  display: block;
  margin-right: 15px;
  background: rgba(0, 0, 0, 0.36);
  width: 310px;
  text-align: right;
  padding: 5px;
  border-radius: 0 30px 30px 0;
  transition: all 0.5s;
}

.social ul li:hover {
  transform: translate(160px, 0);
  background: rgba(248,167,20, 0.4);
  .fa-pied-piper-alt{
  	color: rgb(61, 191, 139);
  }
  .fa-slack {
  	color: rgb(217, 17, 17);
  }
  .fa-linkedin-square {
  	color: rgb(171, 104, 27);
  }
  .fa-html5t {
  	color: rgb(133, 32, 55);
  }
  .fa-gitlab {
  	color: rgb(237, 137, 7);
  }
  .fa-snapchat {
  	color: rgb(127, 133, 49);
  }
}

.social ul li:hover a {
  color: #000;
}

.social ul li:hover i {
  color: #fff;
  background: rgba(0, 0, 0, 0.25);
  transform: rotate(360deg);
  transition: all 1s;
}
.social ul li i {
  margin-left: 10px;
  color: #000;
  padding: 12px;
  border-radius: 50%;
  font-size: 15px;
  background: #ffffff;
  transform: rotate(0deg);
}



/*Second bar styles*/
a {
  color: #fff;
  text-decoration: none;
}

.social_2 a{
  margin-left: 0;
}

.social_2 {
  position: fixed;
  right: 0; 
  top: 20px; 
  font-size: 12px;
}

.social_2 ul {
  padding: 0px;
  transform: translate(270px, 0);
}

.social_2 ul li {
  display: block;
  margin-left: 15px;
  background: rgba(0, 0, 0, 0.36);
  width: 310px;
  text-align: left;
  padding: 5px;
  border-radius: 30px 0 0 30px;
  transition: all 0.7s;
}

.social_2 ul li:hover {
  transform: translate(-160px, 0);
  background: rgba(248,167,20, 0.4);
  .fa-linkedin-square{
  	background: rgb(60, 69, 232);
  }
  .fa-pied-piper-alt{
  	background: rgb(61, 191, 139);
  }
  .fa-slack {
  	background: rgb(217, 17, 17);
  }
  .instagram {
  	background: rgb(171, 104, 27);
  }
  .fa-html5 {
  	background: rgb(133, 32, 55);
  }
   .fa-gitlab {
  	background: rgb(237, 137, 7);
  }
  .fa-snapchat {
  	background: rgb(127, 133, 49);
  }
}

.social_2 ul li:hover a {
  color: #000;
}

.social_2 ul li:hover i {
  color: #fff;
  background: rgba(0, 0, 0, 0.25);
  transform: rotate(-360deg);
  transition: all 0.7s;
}
.social_2 ul li i {
  margin-right: 10px;
  color: #000;
  padding: 12px;
  border-radius: 50%;
  font-size: 15px;
  background: #ffffff;
  transform: rotate(0deg);
}