Bootstrap Quick Contact


	<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>
                            [email protected]</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="javascript:;" class="skype"><i class="fa fa-skype"></i>skypeuser</a>
                            </div>
                            <div class="col-md-6">
                                <a href="javascript:;" class="google"><i class="fa fa-google-plus"></i>googleplus</a>
                            </div>
                        </div>
                        <div class="row contact">
                            <div class="col-md-6">
                                <a href="javascript:;" class="linkedin"><i class="fa fa-linkedin"></i>linkedin_id</a>
                            </div>
                            <div class="col-md-6">
                                <a href="javascript:;" class="twitter"><i class="fa fa-twitter"></i>twitter_id</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

	<script type="text/javascript"></script>

    @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");
});