<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700|Varela+Round" rel="stylesheet"> <!--===============================code==========================--> <section class="sec-padding section-light"> <div class="container"> <div class="row"> <div class="module-header"> <h2>Meet Our <strong>Team</strong></h2> <img src="assets/img/divider.png" alt=""> <p>Morbi accumsan ipsum velit nam nec tellus a odiose tincidunt auctor a ornare odio sed non mauris vitae erat consequat auctor</p> </div> <!--end title--> <div class="col-md-4 col-sm-6 col-xs-12 margin-bottom"> <div class="ce-feature-box-38"> <div class="img-box"> <div class="bg-circle-box"> <div class="img"><img src="http://gsrthemes.com/qcode/images/21.png"alt="" class="img-responsive"></div> <div class="circle"></div> </div> </div> <div class="text-box white text-left"> <h5 class="less-mar-1 title">Benjamin</h5> <p class="text-primary subtitle">Founder & CEO</p> <br> <p>Suspendisse et justo Lorem ipsum dolor sit amet consectetuer adipiscing elit lorem ipsum sit amet justo.</p> </div> </div> </div> <!--end item--> <div class="col-md-4 col-sm-6 col-xs-12 margin-bottom"> <div class="ce-feature-box-38"> <div class="img-box"> <div class="bg-circle-box"> <div class="img"><img src="http://artisandeveloper.in/wp-content/uploads/2017/04/man.png" alt="" class="img-responsive"></div> <div class="circle style2"></div> </div> </div> <div class="text-box primary text-left"> <h5 class="less-mar-1 title">Charlotte</h5> <p class="text-primary subtitle">Support</p> <br> <p>Suspendisse et justo Lorem ipsum dolor sit amet consectetuer adipiscing elit lorem ipsum sit amet justo.</p> </div> </div> </div> <!--end item--> <div class="col-md-4 col-sm-6 col-xs-12 margin-bottom"> <div class="ce-feature-box-38"> <div class="img-box"> <div class="bg-circle-box"> <div class="img"><img src="http://gsrthemes.com/qcode/images/21.png" alt="" class="img-responsive"></div> <div class="circle"></div> </div> </div> <div class="text-box white text-left"> <h5 class="less-mar-1 title">Jon Doe</h5> <p class="text-primary subtitle">Marketing</p> <br> <p>Suspendisse et justo Lorem ipsum dolor sit amet consectetuer adipiscing elit lorem ipsum sit amet justo.</p> </div> </div> </div> <!--end item--> <div class="clearfix"></div> </div> </div> </section> <!--===============================code==========================-->

.clear { clear: both; } /*=======================================================*/ .sec-padding { padding: 50px 0 50px 0; } .section-bgimg-6 { width: 100%; height: auto; margin: 0; float: left; background: url(../images/65.jpg) top center repeat; } .section-light { background-color: #f5f5f5; } .sec-title-container { width: 100%; float: left; padding-bottom: 120px; } h5.less-mar-1 { margin-bottom: 3px; } .text-primary { color: #a9cd2e; } .font-weight-4 { font-weight: 400; } .line-height-4 { line-height: 40px; } .text-primary { color: #a9cd2e; } h2.less-mar-1 { margin-bottom: 3px; } .font-weight-6 { font-weight: 600; } .line-height-5 { line-height: 50px; } .ce-title-line { background-color: #a9cd2e; } .ce-title-line { width: 12%; height: 2px; background-color: #a9cd2e; margin: 15px auto 0 auto; } .ce-sub-text { width: 50%; margin: 15px auto 0 auto; } .opacity-7 { opacity: 0.7; } .clearfix:after { content: " "; display: block; height: 0; clear: both; } .ce-feature-box-38 { position: relative; width: 100%; float: left; border-radius: 5px; transition: all 0.3s ease-out 0s; } .ce-feature-box-38 .img-box { position: relative; width: 100%; float: left; padding: 11px 11px 30px 11px; background-color: #fff; border-radius: 5px; overflow: hidden; } .ce-feature-box-38 .img-box .bg-circle-box { position: relative; width: 100%; min-height: 350px; float: left; padding: 12px 12px 0 12px; overflow: hidden; background-color: #fff; } .ce-feature-box-38 .img-box .bg-circle-box .img { position: absolute; width: 100%; float: left; z-index: 2; } .ce-feature-box-38 .img-box .bg-circle-box .circle { position: absolute; width: 780px; height: 780px; left: -45px; top: 18px; border: 30px solid #f5f5f5; border-radius: 100%; float: left; z-index: 1; transition: all 0.3s ease-out 0s; } .ce-feature-box-38 .text-box { width: 100%; padding: 30px 50px; background-color: #fff; transition: all 0.3s ease-out 0s; } .text-box.white { background-color: #fff; } h5.less-mar-1 { margin-bottom: 5px; } .title { transition: all 0.3s ease-out 0s; } .text-primary { color: #003366; } .ce-feature-box-38:hover { -webkit-box-shadow: 1px 4px 20px -2px rgba(0,0,0,0.2); box-shadow: 1px 4px 20px -2px rgba(0,0,0,0.2); transform: translateY(-8px); } /*=========================================*/