Responsive Social Icons

index.html

<link href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css' rel='stylesheet'/>

<h2>Responsive Social Icons</h2>

<div id="social-wrapper">
  <a class="fb" href="https://www.facebook.com/codenirvana.in" target="_blank">
    <i class="fa fa-facebook"></i>
  </a>
  
  <a class="gp" href="https://plus.google.com/+CodenirvanaIn" target="_blank">
      <i class="fa fa-google-plus"></i>
  </a>
  
  <a class="yt" href="https://www.youtube.com/codenirvanain" target="_blank">
      <i class="fa fa-youtube"></i>
  </a>
  
  <a class="tw" href="https://twitter.com/codenirvanain" target="_blank">
      <i class="fa fa-twitter"></i>
  </a>
</div>

<a class="cnir" href="http://www.codenirvana.in" target="_blank"> Code Nirvana</a>

Responsive-Social-Icons.markdown

Responsive Social Icons

Flat Responsive social icons widget.

A Pen by Udit on CodePen.

License.

style.css

body{
  background : #ccc;
}

h2{
  font-family: cursive;
  font-weight: 100;
  font-size: 40px;
  text-align: center;
  padding: 20px;
  margin: 0;
  color: #888;
}

#social-wrapper{
  background : #000;
  height : 400px;
  width : 50%;
  margin : auto;
}

#social-wrapper a{
  float : left;
  text-align : center;
  color : #FFF;
  font-size : 45px;
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  height : 50%;
}

#social-wrapper i{
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

#social-wrapper a:hover{
  background : #888;
}

#social-wrapper .fb{
  background : #3b5998;
}

#social-wrapper .tw{
  background : #4099FF;
}

#social-wrapper .yt{
  background : #e52d27;
}

#social-wrapper .gp{
  background : #D34836;
}

#social-wrapper .fb{
  width : 75%;
} 

#social-wrapper .gp{
  width : 25%;
} 

#social-wrapper .tw , #social-wrapper .yt{
  width : 50%;
} 

.cnir{
  position : absolute;
  right : 10px;
  bottom : 3px;
  color : #888;
  text-decoration : none;
}

/* Media Queries */
@media screen and (max-width: 1000px){
  #social-wrapper .fb{
    width : 100%;
  }
  #social-wrapper .tw , #social-wrapper .yt , #social-wrapper .gp{
    width : 33.3333333333%;
  } 
}

@media screen and (max-width: 650px){
  #social-wrapper .tw , #social-wrapper .yt , #social-wrapper .gp , #social-wrapper .fb{
    width : 50%;
  } 
}

@media screen and (max-width: 300px){
  #social-wrapper .tw , #social-wrapper .yt , #social-wrapper .gp , #social-wrapper .fb{
    width : 100%;
    height : 25%;
  } 
}