<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 ----------> <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">OUR TEAM</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://nabeel.co.in/files/bootsnipp/team/1.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-twitter"></i></li></a> <a href="#"><li><i class="fa fa-linkedin"></i></li></a> </ul> </div> <h1>Marrie Doi</h1> <h2>Co-founder/ Operations</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 profile"> <div class="img-box"> <img src="http://nabeel.co.in/files/bootsnipp/team/2.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-twitter"></i></li></a> <a href="#"><li><i class="fa fa-linkedin"></i></li></a> </ul> </div> <h1>Christopher Di</h1> <h2>Co-founder/ Projects</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 profile"> <div class="img-box"> <img src="http://nabeel.co.in/files/bootsnipp/team/3.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-twitter"></i></li></a> <a href="#"><li><i class="fa fa-linkedin"></i></li></a> </ul> </div> <h1>Heather H</h1> <h2>Co-founder/ Marketing</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 profile"> <div class="img-box"> <img src="http://nabeel.co.in/files/bootsnipp/team/4.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-twitter"></i></li></a> <a href="#"><li><i class="fa fa-linkedin"></i></li></a> </ul> </div> <h1>John Doe</h1> <h2>Designer</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 profile"> <div class="img-box"> <img src="http://nabeel.co.in/files/bootsnipp/team/5.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-twitter"></i></li></a> <a href="#"><li><i class="fa fa-linkedin"></i></li></a> </ul> </div> <h1>Peter John</h1> <h2>Web Developer</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 profile"> <div class="img-box"> <img src="http://nabeel.co.in/files/bootsnipp/team/6.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-twitter"></i></li></a> <a href="#"><li><i class="fa fa-linkedin"></i></li></a> </ul> </div> <h1>Cherry John</h1> <h2>Fullstack Developer</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 profile"> <div class="img-box"> <img src="http://nabeel.co.in/files/bootsnipp/team/7.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-twitter"></i></li></a> <a href="#"><li><i class="fa fa-linkedin"></i></li></a> </ul> </div> <h1>Frank Martin</h1> <h2>Co-founder/ Operations</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 profile"> <div class="img-box"> <img src="http://nabeel.co.in/files/bootsnipp/team/8.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-twitter"></i></li></a> <a href="#"><li><i class="fa fa-linkedin"></i></li></a> </ul> </div> <h1>Christopher Di</h1> <h2>Co-founder/ Projects</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 profile"> <div class="img-box"> <img src="http://nabeel.co.in/files/bootsnipp/team/9.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-twitter"></i></li></a> <a href="#"><li><i class="fa fa-linkedin"></i></li></a> </ul> </div> <h1>Heather H</h1> <h2>Co-founder/ Marketing</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 profile"> <div class="img-box"> <img src="http://nabeel.co.in/files/bootsnipp/team/10.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-twitter"></i></li></a> <a href="#"><li><i class="fa fa-linkedin"></i></li></a> </ul> </div> <h1>Nancy Doe</h1> <h2>Designer</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 profile"> <div class="img-box"> <img src="http://nabeel.co.in/files/bootsnipp/team/11.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-twitter"></i></li></a> <a href="#"><li><i class="fa fa-linkedin"></i></li></a> </ul> </div> <h1>Stella John</h1> <h2>Web Developer</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> <div class="col-lg-3 col-md-3 col-sm-4 col-xs-12 profile"> <div class="img-box"> <img src="http://nabeel.co.in/files/bootsnipp/team/12.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-twitter"></i></li></a> <a href="#"><li><i class="fa fa-linkedin"></i></li></a> </ul> </div> <h1>Cherry John</h1> <h2>Fullstack Developer</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</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> <!---second---> <!-- The Team --> <div class="home-doctors clearfix"> <div class="container"> <div class="row"> <div class="col-lg-12 col-md-12 col-sm-12 "> <div class="slogan-section animated fadeInUp clearfix ae-animation-fadeInUp"> <h2>Meet our <span>Dental Specialists</span></h2><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> </div> </div> </div> <div class="row"> <!-- entry1 --> <div class="col-lg-3 col-md-3 col-sm-6 text-center doc-item"> <div class="common-doctor animated fadeInUp clearfix ae-animation-fadeInUp"> <ul class="list-inline social-lists animate"> <li><a href="#"><i class="fa fa-skype"></i></a></li> <li><a href="#"><i class="fa fa-skype"></i></a></li> <li><a href="#"><i class="fa fa-twitter"></i></a></li> <li><a href="#"><i class="fa fa-facebook"></i></a></li> </ul> <figure> <img width="670" height="500" src="http://somesweetphoto.smugmug.com/photos/i-VHdG3sd/0/O/i-VHdG3sd.jpg" class="doc-img animate attachment-gallery-post-single wp-post-image" alt="doctor-2"> </figure> <div class="text-content"> <h5>Dr. Jeremy</h5> <!-- <div class="for-border"></div> --> <h5><small>Dentist Title</small></h5> </div> </div> </div> <!-- entry2 --> <div class="col-lg-3 col-md-3 col-sm-6 text-center doc-item"> <div class="common-doctor animated fadeInUp clearfix ae-animation-fadeInUp"> <ul class="list-inline social-lists animate"> <li><a href="#"><i class="fa fa-skype"></i></a></li> <li><a href="#"><i class="fa fa-skype"></i></a></li> <li><a href="#"><i class="fa fa-twitter"></i></a></li> <li><a href="#"><i class="fa fa-facebook"></i></a></li> </ul> <figure> <img width="670" height="500" src="http://somesweetphoto.smugmug.com/photos/i-VHdG3sd/0/O/i-VHdG3sd.jpg" class="doc-img animate attachment-gallery-post-single wp-post-image" alt="doctor-2"> </figure> <div class="text-content"> <h5>Dr. Jeremy</h5> <!-- <div class="for-border"></div> --> <h5><small>Dentist Title</small></h5> </div> </div> </div> <!-- entry3 --> <div class="col-lg-3 col-md-3 col-sm-6 text-center doc-item"> <div class="common-doctor animated fadeInUp clearfix ae-animation-fadeInUp"> <ul class="list-inline social-lists animate"> <li><a href="#"><i class="fa fa-skype"></i></a></li> <li><a href="#"><i class="fa fa-skype"></i></a></li> <li><a href="#"><i class="fa fa-twitter"></i></a></li> <li><a href="#"><i class="fa fa-facebook"></i></a></li> </ul> <figure> <img width="670" height="500" src="http://somesweetphoto.smugmug.com/photos/i-VHdG3sd/0/O/i-VHdG3sd.jpg" class="doc-img animate attachment-gallery-post-single wp-post-image" alt="doctor-2"> </figure> <div class="text-content"> <h5>Dr. Jeremy</h5> <!-- <div class="for-border"></div> --> <h5><small>Dentist Title</small></h5> </div> </div> </div> <!-- entry4 --> <div class="col-lg-3 col-md-3 col-sm-6 text-center doc-item"> <div class="common-doctor animated fadeInUp clearfix ae-animation-fadeInUp"> <ul class="list-inline social-lists animate"> <li><a href="#"><i class="fa fa-skype"></i></a></li> <li><a href="#"><i class="fa fa-skype"></i></a></li> <li><a href="#"><i class="fa fa-twitter"></i></a></li> <li><a href="#"><i class="fa fa-facebook"></i></a></li> </ul> <figure> <img width="670" height="500" src="http://somesweetphoto.smugmug.com/photos/i-VHdG3sd/0/O/i-VHdG3sd.jpg" class="doc-img animate attachment-gallery-post-single wp-post-image" alt="doctor-2"> </figure> <div class="text-content"> <h5>Dr. Jeremy</h5> <!-- <div class="for-border"></div> --> <h5><small>Dentist Title</small></h5> </div> </div> </div> <!-- // --> <div class="visible-sm clearfix margin-gap"></div> </div> </div> </div> <!-- //The Team -->

@import url(https://fonts.googleapis.com/css?family=Quicksand:400,300); body{ font-family: 'Quicksand', sans-serif; } .team{ padding:75px 0; } h6.description{ font-weight: bold; letter-spacing: 2px; color: #999; border-bottom: 1px solid rgba(0, 0, 0,0.1); padding-bottom: 5px; } .profile{ margin-top: 25px; } .profile h1{ font-weight: normal; font-size: 20px; margin:10px 0 0 0; } .profile h2{ font-size: 14px; font-weight: lighter; 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 #88C425; 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: #88C425; } a{ color:#88C425; } a:hover{ text-decoration:none; color:#519548; } i.red{ color:#BC0213; } /*------second---*/ @import url(//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css); .animate { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } /*=============== Home-team ===============*/ .home-doctors { text-align: center; padding: 70px 0 80px; background: #f0f5f6; } .home-doctors h2 { font-weight: normal; } .home-doctors .common-doctor { background-color: #fff; } .home-doctors .common-doctor figure { overflow: hidden; width: 100%; height: 196px; } .home-doctors img { width: 100%; height: auto; margin-top: -6em; } .home-doctors .common-doctor h5 { margin: 0 0 7px; font-size: 18px; font-weight: 700; color: #3a3c41; } .home-doctors .common-doctor .for-border { margin-bottom: 20px; } .home-doctors .common-doctor .text-content { padding: 19px 14px 13px; } .home-doctors.doctors-var-two { text-align: left; background-color: #fff; } .home-doctors.doctors-var-two .slogan-section { text-align: left; } .home-doctors.doctors-var-two .common-doctor { background-color: transparent; } .home-doctors.doctors-var-two .common-doctor .for-border { display: none; } .home-doctors.doctors-var-two .common-doctor .text-content { padding: 20px 0 20px; } .home-doctors.doctors-var-two .text-center { text-align: left; } .slogan-section { margin-bottom: 50px; text-align: center; } .home-doctors .common-doctor .for-border { margin-bottom: 20px; } .for-border { height: 11px; width: 100%; background: transparent url(http://omarhabash.com/nova/wp-content/uploads/2014/08/feature-border.png) center center no-repeat; border: none; } .home-doctors .common-doctor h5 small { color: #008fd5; font-weight: bold; font-size: 0.8em; font-style: italic; } .home-doctors .common-doctor ul{ position: absolute; top: 50%; left: 0; width: 100%; margin-top: -28px; text-align: center; margin-top: 10em; opacity: 0; z-index: 1; } .home-doctors .common-doctor li a { background: #008fd5; color: white; padding: 0.75em; border: 5px solid rgba(255, 255, 255, 0.33); } .doc-img{ /* Webkit for Chrome and Safari */ -webkit-transform: scale(1, 1); // This is the scale for the normal size of the image. -webkit-transition-duration: 500ms; -webkit-transition-timing-function: ease-out; /* Webkit for Mozila Firefox */ -moz-transform: scale(1, 1); -moz-transition-duration: 500ms; -moz-transition-timing-function: ease-out; /* Webkit for IE( Version: 11, 10 ) */ -ms-transform: scale(1, 1); -ms-transition-duration: 500ms; -ms-transition-timing-function: ease-out; } .doc-item:hover .doc-img{ /* Webkit for Chrome and Safari */ -webkit-transform: scale(1.2, 1.2); // This is the enlarged size scale of the image. -webkit-transition-duration: 500ms; -webkit-transition-timing-function: ease-out; /* Webkit for Mozila Firefox */ -moz-transform: scale(1.2, 1.2); -moz-transition-duration: 500ms; -moz-transition-timing-function: ease-out; /* Webkit for IE( Version: 11, 10 ) */ -ms-transform: scale(1.20, 1.20); -ms-transition-duration: 500ms; -ms-transition-timing-function: ease-out; opacity: 0.7; } .doc-item:hover .social-lists{ margin-top: -2em; opacity: 1; } /*=============== //Home-team ===============*/