Contact Info

Widget Kontak Informasi

by Maharani Collection

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div class="contactinfo">
  <div class="facebook"><i class="fa fa-facebook-official fa-fw"></i> Like Us <a href="http://www.facebook.com/maharanitemplatema" target="_blank">Maharani Template Terbaru</a></div>
  <div class="twitter"><i class="fa fa-twitter fa-fw"></i> Follow Us <a href="http://www.twitter.com/songketwarnetma" target="_blank">Maharani Collection</a></div>
  <div class="googleplus"><i class="fa fa-google-plus fa-fw"></i> Circle Us <a href="https://plus.google.com/113740287379973893619" target="_blank">Maharani Template Terbaru</a></div>
  <div class="instagram"><i class="fa fa-instagram fa-fw"></i> Follow Us <a href="https://www.instagram.com/songketwarnetma" target="_blank">Maharani Collection</a></div>
  <div class="whaff"><i class="fa fa-user-plus fa-fw"></i> Invite Us BH70371
  </div>
  <div class="call"><i class="fa fa-phone fa-fw"></i> Call Us XXXX XXXX XXXX
  </div>
  <div class="email"><i class="fa fa-envelope fa-fw"></i> Email Us <a href="mailto:songketwarnetma@gmail.com">songketwarnetma@gmail.com</a>
  </div>
  <div class="linenaver"><i class="fa fa-user-plus fa-fw"></i> Invite Us masepjkt48
  </div>
  <div class="kakaotalk"><i class="fa fa-user-plus fa-fw"></i> Invite Us masepjkt48
  </div>
  <div class="wechat"><i class="fa fa-weixin fa-fw"></i> Invite Us masepjkt48
  </div>
  <div class="whatsapp"><i class="fa fa-whatsapp fa-fw"></i> Invite Us XXXX XXXX XXXX
  </div>
  <div class="bbm"><i class="fa fa-user-plus fa-fw"></i> Invite Us XXXXXXXX
  </div>

</div>

CSS

.contactinfo {
  background-color: #222;
  color: #FFF;
  height: 200px;
  overflow: auto;
  box-sizing: border-box;
  border: 4px solid #AAA;
}

.contactinfo a {
  text-decoration: none;
}

.contactinfo a:link {
  color: #EEE
}

.contactinfo a:visited {
  color: #DDD
}

.contactinfo a:hover {
  color: #FFF
}

.contactinfo a:active {
  color: #888
}

.contactinfo > div {
  border-bottom: 2px solid #DDD;
}

.contactinfo .facebook {
  background-color: #3B5998;
  color: #FFF;
  padding: 7px;
}

.contactinfo .twitter {
  background-color: #55ACEE;
  color: #FFF;
  padding: 7px;
}

.contactinfo .googleplus {
  background-color: #EA4335;
  color: #FFF;
  padding: 7px;
}

.contactinfo .instagram {
  background-color: #3F729B;
  color: #FFF;
  padding: 7px;
}

.contactinfo .whaff {
  background-color: #4190f6;
  color: #FFF;
  padding: 7px;
}

.contactinfo .call {
  background-color: #A4C639;
  color: #FFF;
  padding: 7px;
}

.contactinfo .email {
  background-color: #006699;
  color: #FFF;
  padding: 7px;
}

.contactinfo .linenaver {
  background-color: #3ace01;
  color: #FFF;
  padding: 7px;
}

.contactinfo .kakaotalk {
  background-color: #ffe812;
  color: #000;
  padding: 7px;
}

.contactinfo .wechat {
  background-color: #2dc100;
  color: #FFF;
  padding: 7px;
}

.contactinfo .whatsapp {
  background-color: #02a75a;
  color: #FFF;
  padding: 7px;
}

.contactinfo .bbm {
  background-color: #0075bc;
  color: #FFF;
  padding: 7px;
}