"4b0ut u5"
Bootstrap 3.3.0 Snippet by okebro

Post to Facebook Tweet this

<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 ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <!-- This file has been downloaded from Bootsnipp.com. Enjoy! --> <title>Responsive Team Profiles with Social Links Free For Bootstrap - Bootsnipp.com</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> <style type="text/css"> body { font-family: 'Roboto', sans-serif; } .team { padding:0; } .profile { margin-top: 10px; } .profile h1 { font-weight: bold; color: #2a2a2a; font-size: 20px; margin:10px 0 0 0; } .profile p { font-size: 14px; color: #333333; font-weight: 400; margin-top: 5px; } .profile .img-box { opacity: 1; display: block; position: relative; } .profile .img-box:after { content:""; opacity: 0; background-color: rgba(0, 0, 0, 0.75); position: absolute; right: 0; left: 0; top: 0; bottom: 0; } .img-box ul { position: absolute; z-index: 2; bottom: 50px; text-align: center; width: 100%; padding-left: 0px; height: 0px; margin:0px; opacity: 0; } .profile .img-box:after, .img-box ul, .img-box ul li { -webkit-transition: all 0.5s ease-in-out 0s; -moz-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s; } .img-box ul i { font-size: 20px; letter-spacing: 10px; } .img-box ul li { width: 30px; height: 30px; text-align: center; border: 1px solid #c34253; margin: 2px; padding: 5px; display: inline-block; } .img-box a { color:#fff; } .img-box:hover:after { opacity: 1; } .img-box:hover ul { opacity: 1; } .img-box ul a { -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; } .img-box a:hover li { border-color: #fff; color: #c34253; } a{ color:#88c425; } a:hover { text-decoration:none; color:#519548; } i.red { color:#bc0213; } </style> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <section class="team"> <div class="container"> <div class="row"> <div class="col-md-10 col-md-offset-1"> <div class="col-lg-12"> <h6 class="description"></h6> <div class="row pt-md"> <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 profile"> <div class="img-box"> <img src="http://rumart.weebly.com/files/theme/afandi01.jpg" class="img-responsive"> <ul class="text-center"> <a href="#"><li><i class="fa fa-facebook"></i></li></a> <a href="#"><li><i class="fa fa-instagram"></i></li></a> <a href="#"><li><i class="fa fa-linkedin"></i></li></a> </ul> </div> <h1>M. Afandi</h1> <p>Co-Founder & Marketing</p> <p>Berpengalaman lebih dari 5 tahun berwirausaha di bidang konstruksi</p> </div> <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 profile"> <div class="img-box"> <img src="http://rumart.weebly.com/files/theme/dian01.jpg" class="img-responsive"> <ul class="text-center"> <a href="https://www.facebook.com/dian.h.saputra" target="_blank"><li><i class="fa fa-facebook"></i></li></a> <a href="https://www.instagram.com/dianhsaputra/" target="_blank"><li><i class="fa fa-instagram"></i></li></a> <a href="https://www.linkedin.com/in/dian-hadi-saputra-a96b49a1?trk=nav_responsive_tab_profile_pic" target="_blank"><li><i class="fa fa-linkedin"></i></li></a> </ul> </div> <h1>Dian H. Saputro</h1> <p>Co-Founder & Production</p> <p>Berpengalaman lebih dari 5 tahun sebagai Civil Engineer di salah satu kontraktor swasta ternama</p> </div> </div> </div> </div> </div> </div> </section> <!--<footer> <div class="container"> <div class="col-md-10 col-md-offset-1 text-center"> <h6>Coded with <i class="fa fa-heart red"></i> by <a href="http://www.nabeel.co.in" target="_blank">Nabeel Kondotty</a></h6> </div> </div> </footer>--> <script type="text/javascript"> </script> </body> </html>

Related: See More

Datepicker

Questions / Comments: