<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <!--Pulling Awesome Font --> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <div class="col-md-4"></div> <div class="col-md-4"> <div class="panel panel-default"> <div class="panel-heading"><img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQ7pNHU2p0-Dg-GKO_4dVSwRZaX-tawZ2pzDD6lQ-_D_Bwil8dw" /> Sri Lanka</div> <div class="panel-body text-left"> <div class="row"> <div class="col-md-12 "> <center> <a class="" href="#"> <img class="media-object dp img-circle" src="https://media.licdn.com/mpr/mpr/shrinknp_200_200/AAEAAQAAAAAAAAUCAAAAJDg4NjAyZTgwLTg2MWYtNDBmNi1hOWU1LTM1MjM0YTdhYTYxYw.jpg" style="width: 180px;height:180px;"> </a> </center> </div> <div class="col-md-12"> <h2>Sachith Seram</h2> <p>Software Developer at ceymplon</p> <p> <a href="#" class="remove-decoration"><i class="glyphicon glyphicon-envelope"></i> poolsachitha@gmail.com</a> <br> <a href="http://sachitha-seram.branded.me/" target="_blank" class="remove-decoration"><i class="glyphicon glyphicon-globe"></i> www.sachitha-seram.branded.me </a><br> <a href="#" class="remove-decoration"> <i class="glyphicon glyphicon-phone"></i> +94 710 000 000</a> </p> </div> </div> </div> <div id="IdFooter" class="panel-footer text-right"> <ul class="social-network social-circle"> <li><a href="#" class="icoRss" title="Rss"><i class="fa fa-rss"></i></a></li> <li><a href="https://www.facebook.com/blood.pssus" class="icoFacebook" title="Facebook"><i class="fa fa-facebook"></i></a></li> <li><a href="#" class="icoTwitter" title="Twitter"><i class="fa fa-twitter"></i></a></li> <li><a href="#" class="icoGoogle" title="Google +"><i class="fa fa-google-plus"></i></a></li> <li><a href="https://lk.linkedin.com/pub/sachitha-seram/85/a2a/618" class="icoLinkedin" title="Linkedin"><i class="fa fa-linkedin"></i></a></li> </ul> </div> </div> </div> <div class="col-md-4"></div> </div> </div> </div>

.panel-heading { padding: 10px 15px; background-color: #353535; border-top: 1px solid #ddd; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; position: absolute; top: 0%; cursor:pointer; opacity:0.8; color:white; border:none; } .panel-body { padding: 60px 4% 5% 7%; } .box { padding:2%; border:1px #ddd solid; cursor:pointer; } .remove-decoration { text-decoration:none !important; color:#333; font-size:12px; } /*========================= Icons ================= */ /* footer social icons */ ul.social-network { list-style: none; display: inline; margin-left:0 !important; padding: 0; } ul.social-network li { display: inline; margin: 0 5px; } /* footer social icons */ #IdFooter .social-network a.icoRss:hover { background-color: #F56505; } #IdFooter .social-network a.icoFacebook:hover { background-color:#3B5998; } #IdFooter .social-network a.icoTwitter:hover { background-color:#33ccff; } #IdFooter .social-network a.icoGoogle:hover { background-color:#BD3518; } #IdFooter .social-network a.icoVimeo:hover { background-color:#0590B8; } #IdFooter .social-network a.icoLinkedin:hover { background-color:#007bb7; } #IdFooter .social-network a.icoRss:hover i, .social-network a.icoFacebook:hover i, .social-network a.icoTwitter:hover i, #IdFooter .social-network a.icoGoogle:hover i, .social-network a.icoVimeo:hover i, .social-network a.icoLinkedin:hover i { color:#fff; } #IdFooter a.socialIcon:hover, .socialHoverClass { color:#44BCDD; } #IdFooter .social-circle li a { display:inline-block; position:relative; margin:0 auto 0 auto; -moz-border-radius:50%; -webkit-border-radius:50%; border-radius:50%; text-align:center; width: 35px; height: 35px; font-size:18px; } #IdFooter .social-circle li i { margin:0; line-height:38px; text-align: center; } #IdFooter .social-circle li a:hover i, .triggeredHover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -ms--transform: rotate(360deg); transform: rotate(360deg); -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; -ms-transition: all 0.2s; transition: all 0.2s; } #IdFooter .social-circle i { color: #fff; -webkit-transition: all 0.8s; -moz-transition: all 0.8s; -o-transition: all 0.8s; -ms-transition: all 0.8s; transition: all 0.8s; } #IdFooter a { background-color: #D3D3D3; }