<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="well well-sm quick-contact"> <div class="row"> <div class="col-md-12"> <div class="row"> <div class="col-md-4"> <h1 class="title-contact"> Quick Contact</h1> </div> <div class="col-md-4 contact-email"> <h2> info@website.com</h2> <h3> +12 34567890, +12 34567890</h3> </div> <div class="col-md-4"> <div class="row contact row-first"> <div class="col-md-6"> <a href="http://www.jquery2dotnet.com" class="skype"><i class="fa fa-skype"></i>skypeuser</a> </div> <div class="col-md-6"> <a href="http://www.jquery2dotnet.com" class="google"><i class="fa fa-google-plus"></i>googleplus</a> </div> </div> <div class="row contact"> <div class="col-md-6"> <a href="http://www.jquery2dotnet.com" class="linkedin"><i class="fa fa-linkedin"></i>linkedin_id</a> </div> <div class="col-md-6"> <a href="http://www.jquery2dotnet.com" class="twitter"><i class="fa fa-twitter"></i>twitter_id</a> </div> </div> </div> </div> </div> </div> </div> </div>

@import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css); body{margin-top:20px} .fa{font-size:24px;margin-right:5px} .row-first{margin-bottom:10px;margin-top:8px} .title-contact{margin-top:32px;display:none;} .contact-email { display:none; } a{transition:all .3s ease;-webkit-transition:all .3s ease;-moz-transition:all .3s ease;-o-transition:all .3s ease} .quick-contact{color:#fff;background-color:#000;text-align:center} .contact a{-webkit-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;border-radius:2px;display:block;background-color:rgba(255,255,255,0.25);font-size:20px;text-align:center;color:#fff;padding:7px} .contact a:hover{background-color:rgba(255,255,255,0.85);text-decoration:none} .contact a.skype:hover,.fa-skype{color:#00aff0} .contact a.google:hover,.fa-google-plus{color:#dd4b39} .contact a.linkedin:hover,.fa-linkedin{color:#0e76a8} .contact a.twitter:hover,.fa-twitter{color:#00acee}

$(document).ready(function () { $(".title-contact, .contact-email").fadeIn("slow"); });