?
áEÓê¤ÎïLwebshll2019
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags -->
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<!-- Author -->
<meta name="author" content="Themes Industry">
<!-- Description -->
<meta name="description" content="MegaOne is a highly creative, modern, visually stunning and Bootstrap responsive multipurpose studio and portfolio HTML5 template with ready home page demos.">
<!-- Page Title -->
<title>Team | MegaOne HTML5 Template</title>
<!-- Favicon -->
<link href="vendor/img/favicon.ico" rel="icon">
<!-- Bundle -->
<link rel="stylesheet" href="vendor/css/bundle.min.css">
<link href="vendor/css/LineIcons.min.css" rel="stylesheet">
<link href="vendor/css/line-awesome.min.css" rel="stylesheet">
<link href="vendor/css/megamenu.css" rel="stylesheet">
<!-- Style Sheet -->
<link href="vendor/css/elements.css" rel="stylesheet">
</head>
<!-- Js Files -->
<script src="vendor/js/bundle.min.js"></script>
<script src="vendor/js/jquery.appear.js"></script>
<body>
<!-- Start Element Heading -->
<section id="elements" class="ui-element bg-light-gray">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="main-title wow fadeIn" data-wow-delay="300ms">
<div class="main-title-opacity-text"> <h1 class="d-flex justify-content-center">Elements </h1> </div>
<h1 class="color-purple heading-tooltip-number position-relative d-inline-block">Elements</h1>
<h2 class="color-black"> Team UI Blocks </h2>
<p class="color-black font-weight-500 text-uppercase">Power up your pages with these elements. Each element comes with a variety of options for your choice.</p>
</div>
</div>
</div>
</div>
</section>
<!-- End Element Heading -->
<!-- Start Header -->
<header class="megamenu mega-elements pt-5">
<nav class="navbar navbar-top-default navbar-expand-lg static-nav transparent-bg fixed-menu">
<div class="container container-width">
<div id="menu" class="collapse navbar-collapse d-none d-lg-block mod-menu">
<ul class="nav navbar-nav mx-auto">
<li class="nav-item"> <a href="elements-info.html" target="_blank" class="nav-link link">Info Blocks</a></li>
<li class="nav-item"> <a href="elements-team.html" target="_blank" class="nav-link link active">Team Blocks</a></li>
<li class="nav-item"> <a href="index-elements-portfolio.html" target="_blank" class="nav-link link">Portfolio Blocks</a></li>
<li class="nav-item"> <a href="elements-pricing.html" target="_blank" class="nav-link link">Pricing Blocks</a></li>
<li class="nav-item mega-menu active"> <a href="javascript:void(0)" class="nav-link dropdown-arrow">Others <i class="fas fa-angle-down"></i></a>
<ul class="hide-cursor bg-white text-left">
<li class="p-0">
<ul>
<li> <a class="dropdown-items" target="_blank" href="elements-counter.html">Counter Blocks</a> </li>
<li> <a class="dropdown-items" target="_blank" href="elements-quote.html">Quote Blocks</a> </li>
</ul>
</li>
<li class="p-0">
<ul>
<li> <a class="dropdown-items" target="_blank" href="elements-footer.html">Footer Blocks</a> </li>
<li> <a class="dropdown-items" target="_blank" href="elements-button.html">Button Blocks</a> </li>
</ul>
</li>
<li class="p-0">
<ul>
<li> <a class="dropdown-items" target="_blank" href="elements-testimonials.html">Testimonial Blocks</a> </li>
<li> <a class="dropdown-items" target="_blank" href="elements-typography.html">Typography Blocks</a> </li>
<li> <a class="dropdown-items" target="_blank" href="elements-blog.html">Blog Blocks</a> </li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<!-- side menu open button -->
<a class="menu_bars d-inline-block d-lg-none menu-bars-setting" id="sidemenu_toggle">
<div class="menu-lines">
<span></span>
<span></span>
<span></span>
</div>
</a>
</div>
</nav>
<!-- Side Menu -->
<div class="side-menu d-none">
<div class="inner-wrapper nav-icon">
<span class="btn-close link" id="btn_sideNavClose"></span>
<nav class="side-nav w-100">
<div class="position-relative">
<!-- Main Menu -->
<div class="navbar-nav side-main-menu">
<a class="nav-link" href="elements-info.html">Info Blocks</a>
<a class="nav-link" href="elements-team.html">Team Blocks</a>
<a class="nav-link" href="elements-quote.html">Portfolio Blocks</a>
<a class="nav-link" href="elements-quote.html">Pricing Blocks</a>
<a class="nav-link active sidenav-arrow multi-item1" href="javascript:void(0)">Others <i class="fas fa-angle-right"></i></a>
</div>
<!-- Home Section Sub Menu -->
<div class="navbar-nav sub-multi-item1">
<a class="nav-link sidenav-arrow item1" href="javascript:void(0)">Demos 1 <i class="fas fa-arrow-right"></i></a>
<a class="nav-link sidenav-arrow item2" href="javascript:void(0)">Demos 2 <i class="fas fa-arrow-right"></i></a>
<a class="nav-link sidenav-arrow item3" href="javascript:void(0)">Demos 3 <i class="fas fa-arrow-right"></i></a>
<a class="nav-link arrow-back back-main" href="javascript:void(0)"><i class="fas fa-angle-left"></i>Back</a>
</div>
<!-- Home Section Inner Menu -->
<div class="navbar-nav inner-multi-item1 item1">
<a class="nav-link" target="_blank" href="elements-blog.html">Testimonial Blocks</a>
<a class="nav-link" target="_blank" href="elements-counter.html">Typography Blocks</a>
<a class="nav-link" target="_blank" href="elements-button.html">Blog Blocks</a>
<a class="nav-link arrow-back back" href="javascript:void(0)"><i class="fas fa-angle-left"></i>Back</a>
<a class="nav-link arrow-back back-main" href="javascript:void(0)">Back To Main</a>
</div>
<div class="navbar-nav inner-multi-item1 item2">
<a class="nav-link" target="_blank" href="elements-testimonials.html">Footer Blocks</a>
<a class="nav-link" target="_blank" href="elements-footer.html">Button Blocks</a>
<a class="nav-link link arrow-back back" href="javascript:void(0)"><i class="fas fa-angle-left"></i>Back</a>
<a class="nav-link arrow-back back-main" href="javascript:void(0)">Back To Main</a>
</div>
<div class="navbar-nav inner-multi-item1 item3">
<a class="nav-link" target="_blank" href="index-elements-portfolio.html">Counter Blocks</a>
<a class="nav-link" target="_blank" href="elements-typography.html">Quote Blocks</a>
<a class="nav-link arrow-back back" href="javascript:void(0)"><i class="fas fa-angle-left"></i>Back</a>
<a class="nav-link arrow-back back-main" href="javascript:void(0)">Back To Main</a>
</div>
</div>
</nav>
<div class="side-footer text-white w-100">
<ul class="social-icons-simple">
<li class="side-menu-icons animated-wrap pb-0"><a class="animated-element" href="javascript:void(0)"><i class="ti ti-facebook color-white"></i> </a> </li>
<li class="side-menu-icons animated-wrap pb-0"><a class="animated-element" href="javascript:void(0)"><i class="ti ti-instagram color-white"></i> </a> </li>
<li class="side-menu-icons animated-wrap pb-0"><a class="animated-element" href="javascript:void(0)"><i class="ti ti-twitter color-white"></i> </a> </li>
</ul>
<p class="text-white">© 2021 MegaOne. Made With Love by Themesindustry</p>
</div>
</div>
</div>
<a id="close_side_menu" href="javascript:void(0);"></a>
<!-- Side Menu -->
</header>
<!-- End Header -->
<!-- Start ui-block-01 -->
<section class="text-center ui-block-01 team-sec">
<div class="container">
<!--Row-->
<div class="row">
<div class="col-md-12">
<div class="heading-area mx-570 mb-5">
<span class="sub-title">We are megaone company</span>
<h2 class="title">We have some <span class="alt-color js-rotating">great, ideal</span> talented
staff</h2>
<p class="para">There are many variations of passages of Lorem Ipsum available, but the majority
have suffered alteration in some form, by injected.</p>
</div>
</div>
</div>
<!--Row-->
<div class="row wow fadeInUp">
<div class="col-md-4">
<div class="team-item">
<!--Team Image-->
<img alt="image" class="team-image" src="vendor/img/elements-img/team-img/ui-block-01-1-team.png">
<!--Name-->
<div class="name">
<img alt="shape" src="vendor/img/elements-img/team-img/ui-block-01-1-shape-team.png">
<h6>David Joe</h6>
</div>
<!--Designation-->
<p class="designation mb-2">Director</p>
<!--Team Social-->
<div class="team-social social-icon-bg-hvr">
<a href="#"><i aria-hidden="true" class="fab fa-facebook-f"></i></a>
<a href="#"><i aria-hidden="true" class="fab fa-linkedin-in"></i></a>
<a href="#"><i aria-hidden="true" class="fab fa-twitter"></i></a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="team-item">
<!--Team Image-->
<img alt="image" class="team-image" src="vendor/img/elements-img/team-img/ui-block-01-2-team.png">
<!--Name-->
<div class="name">
<img alt="shape" src="vendor/img/elements-img/team-img/ui-block-01-2-shape-team.png">
<h6>Natalie Roy</h6>
</div>
<!--Designation-->
<p class="designation mb-2">Director</p>
<!--Team Social-->
<div class="team-social social-icon-bg-hvr">
<a href="#"><i aria-hidden="true" class="fab fa-facebook-f"></i></a>
<a href="#"><i aria-hidden="true" class="fab fa-linkedin-in"></i></a>
<a href="#"><i aria-hidden="true" class="fab fa-twitter"></i></a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="team-item">
<!--Team Image-->
<img alt="image" class="team-image" src="vendor/img/elements-img/team-img/ui-block-01-3-team.png">
<!--Name-->
<!--Name-->
<div class="name">
<img alt="shape" src="vendor/img/elements-img/team-img/ui-block-01-3-shape-team.png">
<h6>Jhon Wok</h6>
</div>
<!--Designation-->
<p class="designation mb-2">Director</p>
<!--Team Social-->
<div class="team-social social-icon-bg-hvr">
<a href="#"><i aria-hidden="true" class="fab fa-facebook-f"></i></a>
<a href="#"><i aria-hidden="true" class="fab fa-linkedin-in"></i></a>
<a href="#"><i aria-hidden="true" class="fab fa-twitter"></i></a>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="vendor/js/morphext.min.js"></script>
<script>
if ($(".ui-block-01.team-sec .js-rotating").length) {
$(".ui-block-01.team-sec .js-rotating").Morphext({
// The [in] animation type. Refer to Animate.css for a list of available animations.
animation: "flipInX",
// An array of phrases to rotate are created based on this separator. Change it if you wish to separate the phrases differently (e.g. So Simple | Very Doge | Much Wow | Such Cool).
separator: ",",
// The delay between the changing of each phrase in milliseconds.
speed: 3000,
complete: function () {
// Called after the entrance animation is executed.
}
});
}
</script>
<!-- Cut the script tag including the script and paste it before the body ending tag at the bottom of your html file -->
<!-- End ui-block-01 -->
<hr>
<!-- Start ui-block-02 -->
<section class="team-section ui-block-02">
<svg class="separator__svg" id="team-header-svg" width="100%" viewBox="0 0 100 100" preserveAspectRatio="none" fill="#fff" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M 100 100 V 10 L 0 100"/>
<path d="M 30 73 L 100 18 V 10 Z" fill="#fff" stroke-width="0"/>
</svg>
<div class="container position-relative">
<div class="row">
<div class="col-12 col-lg-12">
<div class="team-details pr-lg-5">
<h6 class="sub-title main-color">Lorem ipsum is simply dummy text</h6>
<h2 class="title">Our Creative Team</h2>
</div>
</div>
<div class="col-12 col-lg-12 team-member-area">
<div class="testimonial-team owl-carousel owl-theme">
<div class="item text-center wow fadeInUp">
<div class="image-holder">
<img src="vendor/img/elements-img/team-img/ui-block-02-1-team.png" alt="team1">
</div>
<h3 class="team-name">Richard Stevens</h3>
</div>
<div class="item text-center wow fadeInUp" data-wow-delay=".3s">
<div class="image-holder">
<img src="vendor/img/elements-img/team-img/ui-block-02-2-team.png" alt="team1">
</div>
<h3 class="team-name">Lisa Warrior</h3>
</div>
<div class="item text-center wow fadeInUp" data-wow-delay=".4s">
<div class="image-holder">
<img src="vendor/img/elements-img/team-img/ui-block-02-3-team.png" alt="team1">
</div>
<h3 class="team-name">Mark J Stevens</h3>
</div>
<div class="item text-center">
<div class="image-holder">
<img src="vendor/img/elements-img/team-img/ui-block-02-1-team.png" alt="team1">
</div>
<h3 class="team-name">Richard Stevens</h3>
</div>
<div class="item text-center">
<div class="image-holder">
<img src="vendor/img/elements-img/team-img/ui-block-02-2-team.png" alt="team1">
</div>
<h3 class="team-name">Lisa Warrior</h3>
</div>
<div class="item text-center">
<div class="image-holder">
<img src="vendor/img/elements-img/team-img/ui-block-02-3-team.png" alt="team1">
</div>
<h3 class="team-name">Mark J Stevens</h3>
</div>
</div>
</div>
</div>
<a class='circle' id="team-circle-left"><i class="lni lni-chevron-left"></i></a>
<a class='circle' id="team-circle-right"><i class="lni lni-chevron-right"></i></a>
</div>
<svg class="separator__svg" id="team-foot-svg" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none" fill="#fff" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="M 100 100 V 10 L 0 100"/>
<path d="M 30 73 L 100 18 V 10 Z" fill="#fff" stroke-width="0"/>
</svg>
</section>
<link href="vendor/css/owl.carousel.min.css" rel="stylesheet">
<script src="vendor/js/owl.carousel.min.js"></script>
<script>
$('.ui-block-02.team-section .testimonial-team').owlCarousel({
loop:true,
autoplay:false,
margin: 0,
nav:true,
center:true,
responsive: {
0: {
items: 1,
},
600: {
items: 1
},
1000: {
items: 3
},
}
});
$('.ui-block-02.team-section #team-circle-right').click(function() {
var owl = $('.ui-block-02.team-section .testimonial-team');
owl.owlCarousel();
owl.trigger('next.owl.carousel');
});
$('.ui-block-02.team-section #team-circle-left').click(function() {
var owl = $('.ui-block-02.team-section .testimonial-team');
owl.owlCarousel();
owl.trigger('prev.owl.carousel', [300]);
});
</script>
<!-- Cut the script tag including the script and paste it before the body ending tag at the bottom of your html file -->
<!-- End ui-block-02 -->
<hr>
<!-- Start ui-block-03 -->
<section class="bg-light-gray position-relative team-sec ui-block-03">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="main-title wow fadeIn" data-wow-delay="300ms">
<h5> Lorem ipsum dolor sit amet </h5>
<h2 class="mb-0">Our <span class="color-pink">Creative</span> Team </h2>
</div>
</div>
</div>
<div class="row wow fadeInUp team" data-wow-delay="300">
<div class="col-lg-6 col-xl-3 p-0 team-col ml-md-auto mr-md-0 mx-auto">
<div class="team-image">
<img src="vendor/img/elements-img/team-img/ui-block-03-1-team.jpg" alt="team1" class="m-image1">
</div>
<div class="team-classic-content hvr-team pink">
<h3 class="mb-3 text-capitalize color-black">Jessica Jones</h3>
<h5 class="mb-3 text-capitalize color-pink">Lead Designer</h5>
<p class="mt-3 mb-3 color-black">Lorem ipsum dolor sit amet, consectetur adipiscing elit augue.</p>
<ul class="team-social">
<li class="d-inline-block"><a href="javascript:void(0)" class="facebook-bg-hvr"><i class="fab fa-facebook-f" aria-hidden="true"></i></a></li>
<li class="d-inline-block"><a href="javascript:void(0)" class="twitter-bg-hvr"><i class="fab fa-twitter" aria-hidden="true"></i></a></li>
<li class="d-inline-block"><a href="javascript:void(0)" class="google-bg-hvr"><i class="fab fa-google" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
<div class="col-lg-6 col-xl-3 p-0 team-col2 mr-md-auto ml-md-0 mx-auto">
<div class="row">
<div class="col-md-12 order-md-1">
<div class="team-image">
<img src="vendor/img/elements-img/team-img/ui-block-03-2-team.jpg" alt="team2" class="m-image2">
</div>
</div>
<div class="col-md-12 order-md-0">
<div class="team-classic-content hvr-team2 blue">
<h3 class="mb-3 text-capitalize color-black">Rob Clark</h3>
<h5 class="mb-3 text-capitalize color-blue">marketing head</h5>
<p class="mt-3 mb-3 color-black">Lorem ipsum dolor sit amet, consectetur adipiscing elit augue.</p>
<ul class="team-social">
<li class="d-inline-block"><a href="javascript:void(0)" class="facebook-bg-hvr"><i class="fab fa-facebook-f" aria-hidden="true"></i></a></li>
<li class="d-inline-block"><a href="javascript:void(0)" class="twitter-bg-hvr"><i class="fab fa-twitter" aria-hidden="true"></i></a></li>
<li class="d-inline-block"><a href="javascript:void(0)" class="google-bg-hvr"><i class="fab fa-google" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="w-100 d-none d-lg-block d-xl-none"></div>
<div class="col-lg-6 col-xl-3 p-0 team-col ml-md-auto mr-md-0 mx-auto team-row2">
<div class="team-image">
<img src="vendor/img/elements-img/team-img/ui-block-03-3-team.jpg" alt="team3" class="m-image3">
</div>
<div class="team-classic-content hvr-team yellow">
<h3 class="mb-3 text-capitalize color-black">Nicole Cross</h3>
<h5 class="mb-3 text-capitalize color-yellow">Visualizer</h5>
<p class="mt-3 mb-3 color-black">Lorem ipsum dolor sit amet, consectetur adipiscing elit augue.</p>
<ul class="team-social">
<li class="d-inline-block"><a href="javascript:void(0)" class="facebook-bg-hvr"><i class="fab fa-facebook-f" aria-hidden="true"></i></a></li>
<li class="d-inline-block"><a href="javascript:void(0)" class="twitter-bg-hvr"><i class="fab fa-twitter" aria-hidden="true"></i></a></li>
<li class="d-inline-block"><a href="javascript:void(0)" class="google-bg-hvr"><i class="fab fa-google" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
<div class="col-lg-6 col-xl-3 p-0 team-col2 mr-md-auto ml-md-0 mx-auto team-row2">
<div class="row">
<div class="col-md-12 order-md-1">
<div class="team-image2">
<img src="vendor/img/elements-img/team-img/ui-block-03-4-team.jpg" alt="team4" class="m-image2">
</div>
</div>
<div class="col-md-12 order-md-0">
<div class="team-classic-content hvr-team2 pink">
<h3 class="mb-3 text-capitalize color-black">Albert Rodricks</h3>
<h5 class="mb-3 text-capitalize color-pink">Creative Lead</h5>
<p class="mt-3 mb-3 color-black">Lorem ipsum dolor sit amet, consectetur adipiscing elit augue.</p>
<ul class="team-social">
<li class="d-inline-block"><a href="javascript:void(0)" class="facebook-bg-hvr"><i class="fab fa-facebook-f" aria-hidden="true"></i></a></li>
<li class="d-inline-block"><a href="javascript:void(0)" class="twitter-bg-hvr"><i class="fab fa-twitter" aria-hidden="true"></i></a></li>
<li class="d-inline-block"><a href="javascript:void(0)" class="google-bg-hvr"><i class="fab fa-google" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End ui-block-03 -->
<hr>
<!-- Start ui-block-04 -->
<section class="team-section ui-block-04">
<div class="container">
<div class="row">
<div class="col-12 stats-heading-area text-center wow fadeInUp">
<span class="sub-heading">Lorem ipsum is simply dummy text </span>
<h4 class="heading">WE ARE PROPERTY <span> & <span class="color js-rotating">REAL ESTATE</span> AGENCY</span></h4>
<p class="text">
Lorem ipsum is simply dummy text of the printing and typesetting. Lorem Ipsum has been the industry’s standard dummy. Lorem Ipsum has been the industry’s standard dummy.
</p>
</div>
</div>
<div class="row">
<div class="col-12 col-lg-12 team-member-area">
<div class="testimonial-team owl-carousel owl-theme">
<div class="item text-center wow fadeInUp">
<div class="image-holder">
<img src="vendor/img/elements-img/team-img/ui-block-04-1-team.png" alt="team1">
</div>
<h3 class="team-name">Richard Stevens</h3>
<span>Real Estate Agent</span>
</div>
<div class="item text-center wow fadeInDown">
<div class="image-holder">
<img src="vendor/img/elements-img/team-img/ui-block-04-2-team.png" alt="team1">
</div>
<h3 class="team-name">Lisa Warrior</h3>
<span>Real Estate Agent</span>
</div>
<div class="item text-center wow fadeInUp">
<div class="image-holder">
<img src="vendor/img/elements-img/team-img/ui-block-04-3-team.png" alt="team1">
</div>
<h3 class="team-name">Mark J Stevens</h3>
<span>Real Estate Agent</span>
</div>
<div class="item text-center">
<div class="image-holder">
<img src="vendor/img/elements-img/team-img/ui-block-04-1-team.png" alt="team1">
</div>
<h3 class="team-name">Richard Stevens</h3>
<span>Real Estate Agent</span>
</div>
<div class="item text-center">
<div class="image-holder">
<img src="vendor/img/elements-img/team-img/ui-block-04-2-team.png" alt="team1">
</div>
<h3 class="team-name">Lisa Warrior</h3>
<span>Real Estate Agent</span>
</div>
<div class="item text-center">
<div class="image-holder">
<img src="vendor/img/elements-img/team-img/ui-block-04-3-team.png" alt="team1">
</div>
<h3 class="team-name">Mark J Stevens</h3>
<span>Real Estate Agent</span>
</div>
</div>
</div>
</div>
</div>
</section>
<link href="vendor/css/owl.carousel.min.css" rel="stylesheet">
<script src="vendor/js/owl.carousel.min.js"></script>
<script>
$('.ui-block-04.team-section .testimonial-team').owlCarousel({
loop:true,
autoplay:false,
margin: 0,
nav:false,
center:true,
responsive: {
0: {
items: 1,
},
600: {
items: 1
},
1000: {
items: 3
},
}
});
</script>
<!-- Cut the script tag including the script and paste it before the body ending tag at the bottom of your html file -->
<!-- End ui-block-04 -->
<hr>
<!-- Start ui-block-05 -->
<section class="ui-block-05 team-sec">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="main-title wow fadeIn" data-wow-delay="300ms">
<h5> You can try out our </h5>
<h2> best <b>consultants</b> team </h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sodales lobortis vehicula. Aliquam sodales turpis a neque sagittis, condimentum imperdiet risus luctus. Praesent cursus non risus in tempor.</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="team-classic owl-team owl-carousel text-center wow fadeInUp">
<div class="item">
<div class="team-data-img wow fadeIn" data-wow-delay="350ms">
<div class="image">
<img src="vendor/img/elements-img/team-img/ui-block-05-1-team.jpg" alt="team" class="img-responsive" data-no-retina>
<div class="team-overlay center-block">
<ul class="social_icon d-flex justify-content-center noborder">
<li><a class="facebook" href="javascript:void(0)"><i class="fab fa-facebook-f"></i> </a> </li>
<li><a class="twitter" href="javascript:void(0)"><i class="fab fa-twitter"></i> </a> </li>
<li><a class="google" href="javascript:void(0)"><i class="fab fa-google"></i> </a> </li>
<li><a class="insta" href="javascript:void(0)"><i class="fab fa-instagram"></i> </a> </li>
</ul>
</div>
</div>
<div class="team-classic-content">
<h5 class="color-black font-weight-600 mb-2 text-capitalize">Mark Wooderberg</h5>
<p class="color-black font-weight-normal font-16 text-capitalize">General manager</p>
</div>
</div>
</div>
<div class="item">
<div class="team-data-img wow fadeIn" data-wow-delay="350ms">
<div class="image">
<img src="vendor/img/elements-img/team-img/ui-block-05-2-team.jpg" alt="team" class="img-responsive" data-no-retina>
<div class="team-overlay center-block">
<ul class="social_icon d-flex justify-content-center noborder">
<li><a class="facebook" href="javascript:void(0)"><i class="fab fa-facebook-f"></i> </a> </li>
<li><a class="twitter" href="javascript:void(0)"><i class="fab fa-twitter"></i> </a> </li>
<li><a class="google" href="javascript:void(0)"><i class="fab fa-google"></i> </a> </li>
<li><a class="insta" href="javascript:void(0)"><i class="fab fa-instagram"></i> </a> </li>
</ul>
</div>
</div>
<div class="team-classic-content">
<h5 class="color-black font-weight-600 mb-2 text-capitalize">Janey Woods</h5>
<p class="color-black font-weight-normal font-16 text-capitalize">Executive Vice President</p>
</div>
</div>
</div>
<div class="item">
<div class="team-data-img wow fadeIn" data-wow-delay="350ms">
<div class="image">
<img src="vendor/img/elements-img/team-img/ui-block-05-3-team.jpg" alt="team" class="img-responsive" data-no-retina>
<div class="team-overlay center-block">
<ul class="social_icon d-flex justify-content-center noborder">
<li><a class="facebook" href="javascript:void(0)"><i class="fab fa-facebook-f"></i> </a> </li>
<li><a class="twitter" href="javascript:void(0)"><i class="fab fa-twitter"></i> </a> </li>
<li><a class="google" href="javascript:void(0)"><i class="fab fa-google"></i> </a> </li>
<li><a class="insta" href="javascript:void(0)"><i class="fab fa-instagram"></i> </a> </li>
</ul>
</div>
</div>
<div class="team-classic-content">
<h5 class="color-black font-weight-600 mb-2 text-capitalize">Chris Anderson</h5>
<p class="color-black font-weight-normal font-16 text-capitalize">Marketing Head</p>
</div>
</div>
</div>
<div class="item">
<div class="team-data-img wow fadeIn" data-wow-delay="350ms">
<div class="image">
<img src="vendor/img/elements-img/team-img/ui-block-05-1-team.jpg" alt="team" class="img-responsive" data-no-retina>
<div class="team-overlay center-block">
<ul class="social_icon d-flex justify-content-center noborder">
<li><a class="facebook" href="javascript:void(0)"><i class="fab fa-facebook-f"></i> </a> </li>
<li><a class="twitter" href="javascript:void(0)"><i class="fab fa-twitter"></i> </a> </li>
<li><a class="google" href="javascript:void(0)"><i class="fab fa-google"></i> </a> </li>
<li><a class="insta" href="javascript:void(0)"><i class="fab fa-instagram"></i> </a> </li>
</ul>
</div>
</div>
<div class="team-classic-content">
<h5 class="color-black font-weight-600 mb-2 text-capitalize">Mark Wooderberg</h5>
<p class="color-black font-weight-normal font-16 text-capitalize">General manager</p>
</div>
</div>
</div>
<div class="item">
<div class="team-data-img wow fadeIn" data-wow-delay="350ms">
<div class="image">
<img src="vendor/img/elements-img/team-img/ui-block-05-2-team.jpg" alt="team" class="img-responsive" data-no-retina>
<div class="team-overlay center-block">
<ul class="social_icon d-flex justify-content-center noborder">
<li><a class="facebook" href="javascript:void(0)"><i class="fab fa-facebook-f"></i> </a> </li>
<li><a class="twitter" href="javascript:void(0)"><i class="fab fa-twitter"></i> </a> </li>
<li><a class="google" href="javascript:void(0)"><i class="fab fa-google"></i> </a> </li>
<li><a class="insta" href="javascript:void(0)"><i class="fab fa-instagram"></i> </a> </li>
</ul>
</div>
</div>
<div class="team-classic-content">
<h5 class="color-black font-weight-600 mb-2 text-capitalize">Janey Woods</h5>
<p class="color-black font-weight-normal font-16 text-capitalize">Executive Vice President</p>
</div>
</div>
</div>
<div class="item">
<div class="team-data-img wow fadeIn" data-wow-delay="350ms">
<div class="image">
<img src="vendor/img/elements-img/team-img/ui-block-05-3-team.jpg" alt="team" class="img-responsive" data-no-retina>
<div class="team-overlay center-block">
<ul class="social_icon d-flex justify-content-center noborder">
<li><a class="facebook" href="javascript:void(0)"><i class="fab fa-facebook-f"></i> </a> </li>
<li><a class="twitter" href="javascript:void(0)"><i class="fab fa-twitter"></i> </a> </li>
<li><a class="google" href="javascript:void(0)"><i class="fab fa-google"></i> </a> </li>
<li><a class="insta" href="javascript:void(0)"><i class="fab fa-instagram"></i> </a> </li>
</ul>
</div>
</div>
<div class="team-classic-content">
<h5 class="color-black font-weight-600 mb-2 text-capitalize">Chris Anderson</h5>
<p class="color-black font-weight-normal font-16 text-capitalize">Marketing Head</p>
</div>
</div>
</div>
<div class="item">
<div class="team-data-img wow fadeIn" data-wow-delay="350ms">
<div class="image">
<img src="vendor/img/elements-img/team-img/ui-block-05-1-team.jpg" alt="team" class="img-responsive" data-no-retina>
<div class="team-overlay center-block">
<ul class="social_icon d-flex justify-content-center noborder">
<li><a class="facebook" href="javascript:void(0)"><i class="fab fa-facebook-f"></i> </a> </li>
<li><a class="twitter" href="javascript:void(0)"><i class="fab fa-twitter"></i> </a> </li>
<li><a class="google" href="javascript:void(0)"><i class="fab fa-google"></i> </a> </li>
<li><a class="insta" href="javascript:void(0)"><i class="fab fa-instagram"></i> </a> </li>
</ul>
</div>
</div>
<div class="team-classic-content">
<h5 class="color-black font-weight-600 mb-2 text-capitalize">Mark Wooderberg</h5>
<p class="color-black font-weight-normal font-16 text-capitalize">General manager</p>
</div>
</div>
</div>
<div class="item">
<div class="team-data-img wow fadeIn" data-wow-delay="350ms">
<div class="image">
<img src="vendor/img/elements-img/team-img/ui-block-05-2-team.jpg" alt="team" class="img-responsive" data-no-retina>
<div class="team-overlay center-block">
<ul class="social_icon d-flex justify-content-center noborder">
<li><a class="facebook" href="javascript:void(0)"><i class="fab fa-facebook-f"></i> </a> </li>
<li><a class="twitter" href="javascript:void(0)"><i class="fab fa-twitter"></i> </a> </li>
<li><a class="google" href="javascript:void(0)"><i class="fab fa-google"></i> </a> </li>
<li><a class="insta" href="javascript:void(0)"><i class="fab fa-instagram"></i> </a> </li>
</ul>
</div>
</div>
<div class="team-classic-content">
<h5 class="color-black font-weight-600 mb-2 text-capitalize">Janey Woods</h5>
<p class="color-black font-weight-normal font-16 text-capitalize">Executive Vice President</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<link href="vendor/css/owl.carousel.min.css" rel="stylesheet">
<script src="vendor/js/owl.carousel.min.js"></script>
<script>
$(".ui-block-05.team-sec .team-classic.owl-team").owlCarousel({
items: 3,
margin: 30,
dots: true,
nav: false,
loop:true,
autoplay: true,
smartSpeed:500,
navSpeed: true,
autoplayHoverPause:true,
responsiveClass:true,
responsive: {
992: {
items: 3
},
600: {
items: 2
},
320: {
items: 1
}
}
});
</script>
<!-- Cut the script tag including the script and paste it before the body ending tag at the bottom of your html file -->
<!-- End ui-block-05 -->
<hr>
<!-- Start ui-block-06 -->
<section id="team" class="team ui-block-06">
<div class="container">
<div class="row">
<div class="col-12 col-md-10 col-lg-6 offset-lg-3 offset-md-1 text-center">
<div class="team-text text-black">
<h1 class="main-heading mb-4">Meet The Team</h1>
<p class="sub-heading mb-4">Lorem ipsum is simply dummy text of the printing and typesetting. Lorem Ipsum has been the industry’s standard dummy.</p>
</div>
</div>
</div>
<div class="row padding-top-half">
<div class="col-12">
<div id="team-carousal" class="owl-carousel owl-theme team-owl mt-100 text-center">
<div class="item">
<div class="team-img">
<img src="vendor/img/elements-img/team-img/ui-block-06-1-team.png" alt="img">
</div>
<div class="team-tittle text-left mt-3 mb-3">
<div class="name-img">
<img src="vendor/img/elements-img/team-img/ui-block-06-1-shape-team.png" alt="img">
<img src="vendor/img/elements-img/team-img/ui-block-06-hover-shape-team.png" class="black-img" alt="img">
<h3 class="name mb-0">Alex Stoke</h3>
</div>
<p class="sub-heading mb-0 mt-1 text-center text-black">Director</p>
<div class="social-icons text-center">
<a href="#" class="fb"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="twt"><i class="fab fa-twitter"></i></a>
<a href="#" class="drb"><i class="fab fa-dribbble"></i></a>
</div>
</div>
</div>
<div class="item">
<div class="team-img mt-20">
<img src="vendor/img/elements-img/team-img/ui-block-06-2-team.png" alt="img">
</div>
<div class="team-tittle text-left mt-3 mb-3">
<div class="name-img">
<img src="vendor/img/elements-img/team-img/ui-block-06-2-shape-team.png" alt="img">
<img src="vendor/img/elements-img/team-img/ui-block-06-hover-shape-team.png" class="black-img" alt="img">
<h3 class="name mb-0">Lisa Waren</h3>
</div>
<p class="sub-heading mb-0 mt-1 text-center text-black">Manager</p>
<div class="social-icons text-center">
<a href="#" class="fb"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="twt"><i class="fab fa-twitter"></i></a>
<a href="#" class="drb"><i class="fab fa-dribbble"></i></a>
</div>
</div>
</div>
<div class="item">
<div class="team-img mt-20">
<img src="vendor/img/elements-img/team-img/ui-block-06-3-team.png" alt="img">
</div>
<div class="team-tittle text-left mt-3 mb-3">
<div class="name-img">
<img src="vendor/img/elements-img/team-img/ui-block-06-3-shape-team.png" alt="img">
<img src="vendor/img/elements-img/team-img/ui-block-06-hover-shape-team.png" class="black-img" alt="img">
<h3 class="name mb-0">Lisa Waren</h3>
</div>
<p class="sub-heading mb-0 mt-1 text-center text-black">Designer</p>
<div class="social-icons text-center">
<a href="#" class="fb"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="twt"><i class="fab fa-twitter"></i></a>
<a href="#" class="drb"><i class="fab fa-dribbble"></i></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<link href="vendor/css/owl.carousel.min.css" rel="stylesheet">
<script src="vendor/js/owl.carousel.min.js"></script>
<script>
$('.ui-block-06.team #team-carousal').owlCarousel({
loop:true,
margin:30,
nav:true,
dots:false,
responsive:{
0:{
items:1
},
600:{
items:2
},
1000:{
items:3
}
}
});
</script>
<!-- Cut the script tag including the script and paste it before the body ending tag at the bottom of your html file -->
<!-- End ui-block-06 -->
<hr>
<!-- Start ui-block-07 -->
<section class="ui-block-07 team-sec">
<div class="container">
<div class="row align-items-lg-end">
<div class="col-lg-6">
<div class="heading-area pr-lg-5">
<h6 class="sub-title main-color">Let's Meet To Our Experts</h6>
<h2 class="title">We Have Creative & Innovative Team </h2>
<p class="paragraph">There are many variations of passages of Lorem Ipsum available be the majority have suffered alteration in some form.
</div>
</div>
<div class="col-lg-6">
<!-- Progress Bar -->
<ul class="services-skill text-left">
<!--Progress Item-->
<li class="progress-item">
<h6>App Design<span class="float-right"><b class="count">80</b>%</span></h6>
<div class="progress">
<span class="progress-bar" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></span>
</div>
</li>
<!--Progress Item-->
<li class="progress-item">
<h6>Development<span class="float-right"><b class="count">80</b>%</span></h6>
<div class="progress">
<span class="progress-bar" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></span>
</div>
</li>
<!--Progress Item-->
<li class="progress-item">
<h6>Web Design<span class="float-right"><b class="count">75</b>%</span></h6>
<div class="progress">
<span class="progress-bar" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></span>
</div>
</li>
<!--Progress Item-->
<li class="progress-item">
<h6>UI / UX Design<span class="float-right"><b class="count">75</b>%</span></h6>
<div class="progress">
<span class="progress-bar" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></span>
</div>
</li>
</ul>
</div>
</div>
<div class="row mt-lg-5 pt-lg-5">
<div class="col-lg-4 col-md-6">
<div class="team-item">
<img src="vendor/img/elements-img/team-img/ui-block-07-1-team.jpg" alt="team">
<div class="team-detail">
<h5 class="m-0">David Manager</h5>
<p class="mb-2">Company CEO</p>
<ul class="social-icon social-icon-clr-hvr">
<li><a href="javascript:void(0)"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="javascript:void(0)"><i class="fab fa-instagram"></i></a></li>
<li><a href="javascript:void(0)"><i class="fab fa-twitter"></i></a></li>
<li><a href="javascript:void(0)"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="team-item">
<img src="vendor/img/elements-img/team-img/ui-block-07-2-team.jpg" alt="team">
<div class="team-detail">
<h5 class="m-0">Mike Kongal</h5>
<p class="mb-2">Creative Designer</p>
<ul class="social-icon social-icon-clr-hvr">
<li><a href="javascript:void(0)"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="javascript:void(0)"><i class="fab fa-instagram"></i></a></li>
<li><a href="javascript:void(0)"><i class="fab fa-twitter"></i></a></li>
<li><a href="javascript:void(0)"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="team-item">
<img src="vendor/img/elements-img/team-img/ui-block-07-3-team.jpg" alt="team">
<div class="team-detail">
<h5 class="m-0">Aleana Dian</h5>
<p class="mb-2">Maketing Head</p>
<ul class="social-icon social-icon-clr-hvr">
<li><a href="javascript:void(0)"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="javascript:void(0)"><i class="fab fa-instagram"></i></a></li>
<li><a href="javascript:void(0)"><i class="fab fa-twitter"></i></a></li>
<li><a href="javascript:void(0)"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<script>
$('.ui-block-07.team-sec .count').each(function () {
$(this).appear(function () {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 3000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
});
$(".ui-block-07.team-sec .progress-bar").each(function () {
$(this).appear(function () {
$(this).animate({width: $(this).attr("aria-valuenow") + "%"}, 3000)
});
});
</script>
<!-- Cut the script tag including the script and paste it before the body ending tag at the bottom of your html file -->
<!-- End ui-block-07 -->
<hr>
<!-- Start ui-block-08 -->
<section class="team-sec position-relative ui-block-08 py-0">
<div class="left-overlay"></div>
<div class="container">
<div class="row inner-team-sec padding-top padding-bottom">
<div class="col-12 col-lg-4 text-center text-lg-left">
<div class="team-detail wow fadeInLeft">
<h4 class="heading">WE HAVE <span>AMAZING TEAM</span></h4>
<p class="text">
Lorem ipsum is simply dummy text of the printing and typesetting. Lorem Ipsum has been the industry’s standard dummy.
</p>
</div>
</div>
<div class="col-12 col-lg-8">
<div class="team-area wow fadeInRight">
<div class="row no-gutters team-carousel owl-carousel owl-theme">
<div class="item text-center">
<div class="team-box">
<div class="img-holder position-relative">
<img src="vendor/img/elements-img/team-img/ui-block-08-1-team.jpg">
<div class="overlay d-flex justify-content-center align-items-center">
<!--Team Social-->
<ul class="team-social">
<li><a class="facebook-text-hvr" href="javascript:void(0);"><i class="lab la-facebook-f" aria-hidden="true"></i></a></li>
<li><a class="twitter-text-hvr" href="javascript:void(0);"><i class="lab la-twitter" aria-hidden="true"></i></a></li>
<li><a class="instagram-text-hvr" href="javascript:void(0);"><i class="lab la-instagram" aria-hidden="true"></i></a></li>
<li><a class="pinterest-text-hvr" href="javascript:void(0);"><i class="lab la-pinterest-p" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
<div class="team-info">
<h4 class="team-name">Eden Wooderburg</h4>
<p class="team-designation">Creative Head</p>
</div>
</div>
</div>
<div class="item text-center">
<div class="team-box">
<div class="img-holder position-relative">
<img src="vendor/img/elements-img/team-img/ui-block-08-2-team.jpg">
<div class="overlay d-flex justify-content-center align-items-center">
<!--Team Social-->
<ul class="team-social">
<li><a class="facebook-text-hvr" href="javascript:void(0);"><i class="lab la-facebook-f" aria-hidden="true"></i></a></li>
<li><a class="twitter-text-hvr" href="javascript:void(0);"><i class="lab la-twitter" aria-hidden="true"></i></a></li>
<li><a class="instagram-text-hvr" href="javascript:void(0);"><i class="lab la-instagram" aria-hidden="true"></i></a></li>
<li><a class="pinterest-text-hvr" href="javascript:void(0);"><i class="lab la-pinterest-p" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
<div class="team-info">
<h4 class="team-name">Angelo Walking</h4>
<p class="team-designation">Design Lead</p>
</div>
</div>
</div>
</div>
<a href="javascript:void(0);" class="team-nav team-prev" id="team-prev">
<i class="fas fa-angle-left"></i>
</a>
<a href="javascript:void(0);" class="team-nav team-next" id="team-next">
<i class="fas fa-angle-right"></i>
</a>
</div>
</div>
</div>
</div>
</section>
<link href="vendor/css/owl.carousel.min.css" rel="stylesheet">
<script src="vendor/js/owl.carousel.min.js"></script>
<script>
$('.ui-block-08.team-sec .team-carousel').owlCarousel({
loop: true,
smartSpeed: 500,
responsiveClass: true,
nav:false,
dots:false,
autoplay: true,
margin:30,
autoplayHoverPause: true,
autoplayTimeout: 3000,
responsive: {
0: {
items: 1,
margin: 30,
},
480: {
items: 1,
},
992: {
items: 2,
}
}
});
$('#team-next').click(function() {
var owl = $('.team-carousel');
owl.owlCarousel();
owl.trigger('next.owl.carousel');
});
$('#team-prev').click(function() {
var owl = $('.team-carousel');
owl.owlCarousel();
owl.trigger('prev.owl.carousel', [300]);
});
</script>
<!-- Cut the script tag including the script and paste it before the body ending tag at the bottom of your html file -->
<!-- End ui-block-08 -->
<hr>
<!-- Start ui-block-09 -->
<div class="about-sec ui-block-09" style="background: url('vendor/img/elements-img/team-img/ui-block-09-bg-team.png');">
<div class="container">
<div class="row">
<div class="col-12 col-md-6 text-center about-self">
<div class="about-heading">
<span class="heading-subtitle">- THE BRIDE -</span>
<h2 class="heading-title">Isabella David</h2>
</div>
<div class="about-image-holder">
<img src="vendor/img/elements-img/team-img/ui-block-09-1-team.jpg" alt="Isabella David">
</div>
<div class="about-img-des">
<div class="inner-text">
<p class="small-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
<span class="quote">~ Love Quote ~</span>
</div>
</div>
</div>
<div class="col-12 col-md-6 text-center about-self">
<div class="about-heading">
<span class="heading-subtitle">- THE GROOM -</span>
<h2 class="heading-title">Alex Ferdinand</h2>
</div>
<div class="about-image-holder">
<img src="vendor/img/elements-img/team-img/ui-block-09-2-team.jpg" alt="Alex Ferdinand">
</div>
<div class="about-img-des">
<div class="inner-text">
<p class="small-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text.</p>
<span class="quote">~ Love Quote ~</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End ui-block-09 -->
<hr>
<!-- Start ui-block-10 -->
<section class="team-section ui-block-10">
<div class="container">
<!--Heading-->
<div class="row">
<div class="col-12 col-md-10 col-lg-8 offset-md-1 offset-lg-2 text-center wow fadeIn" style="visibility: visible; animation-name: fadeIn;">
<div class="heading-area d-inline-block">
<h6 class="sub-title main-color">Towards the Sea</h6>
<h2 class="title">Our Crew</h2>
<p class="paragraph">There are many variations of passages of Lorem Ipsum available be the majority have suffered alteration in some form, by injected humour or randomised words.
</div>
</div>
</div>
<!--Heading-->
<!-- Grid row -->
<div class="team-carousel owl-carousel owl-theme wow fadeIn">
<!-- Grid column -->
<div class="item mb-lg-0 mb-4">
<!-- Rotating card -->
<div class="card-wrapper">
<div id="card-1" class="card card-rotating text-center">
<div class="face front">
<!-- Avatar -->
<div class="avat-image-team">
<img src="vendor/img/elements-img/team-img/ui-block-10-1-team.jpg" alt="First sample avatar image">
</div>
</div>
<div class="face back">
<!-- Content -->
<div class="card-body p-0">
<h4 class="font-weight-bold mt-4 mb-2">
<strong>Mark Alex</strong>
</h4>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta.
Blanditiis rem amet repellat.
</p>
<hr>
<!-- Social Icons -->
<ul class="list-inline list-unstyled team-ul">
<li class="list-inline-item">
<a href="javascript:void(0);" class="p-2 fa-lg fb-ic">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li class="list-inline-item">
<a href="javascript:void(0);" class="p-2 fa-lg pin-ic">
<i class="fab fa-pinterest"> </i>
</a>
</li>
<li class="list-inline-item">
<a href="javascript:void(0);" class="p-2 fa-lg ins-ic">
<i class="fab fa-instagram"> </i>
</a>
</li>
<li href="javascript:void(0);" class="list-inline-item">
<a class="p-2 fa-lg tw-ic">
<i class="fab fa-twitter"> </i>
</a>
</li>
</ul>
</div>
</div>
<!-- Back Side -->
</div>
</div>
<!-- Rotating card -->
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="item mb-lg-0 mb-4">
<!-- Rotating card -->
<div class="card-wrapper">
<div id="card-2" class="card card-rotating text-center">
<div class="face front">
<!-- Avatar -->
<div class="avat-image-team">
<img src="vendor/img/elements-img/team-img/ui-block-10-2-team.jpg" alt="First sample avatar image">
</div>
</div>
<div class="face back">
<!-- Content -->
<div class="card-body p-0">
<h4 class="font-weight-bold mt-4 mb-2">
<strong>maria jose</strong>
</h4>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta.
Blanditiis rem amet repellat.
</p>
<hr>
<!-- Social Icons -->
<ul class="list-inline list-unstyled team-ul">
<li class="list-inline-item">
<a class="p-2 fa-lg fb-ic">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li class="list-inline-item">
<a class="p-2 fa-lg pin-ic">
<i class="fab fa-pinterest"> </i>
</a>
</li>
<li class="list-inline-item">
<a class="p-2 fa-lg ins-ic">
<i class="fab fa-instagram"> </i>
</a>
</li>
<li class="list-inline-item">
<a class="p-2 fa-lg tw-ic">
<i class="fab fa-twitter"> </i>
</a>
</li>
</ul>
</div>
</div>
<!-- Back Side -->
</div>
</div>
<!-- Rotating card -->
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="item mb-lg-0 mb-4">
<!-- Rotating card -->
<div class="card-wrapper">
<div id="card-4" class="card card-rotating text-center">
<div class="face front">
<!-- Avatar -->
<div class="avat-image-team">
<img src="vendor/img/elements-img/team-img/ui-block-10-3-team.jpg" alt="First sample avatar image">
</div>
</div>
<div class="face back">
<!-- Content -->
<div class="card-body p-0">
<h4 class="font-weight-bold mt-4 mb-2">
<strong>Williamson</strong>
</h4>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta.
Blanditiis rem amet repellat.
</p>
<hr>
<!-- Social Icons -->
<ul class="list-inline list-unstyled team-ul">
<li class="list-inline-item">
<a class="p-2 fa-lg fb-ic">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li class="list-inline-item">
<a class="p-2 fa-lg pin-ic">
<i class="fab fa-pinterest"> </i>
</a>
</li>
<li class="list-inline-item">
<a class="p-2 fa-lg ins-ic">
<i class="fab fa-instagram"> </i>
</a>
</li>
<li class="list-inline-item">
<a class="p-2 fa-lg tw-ic">
<i class="fab fa-twitter"> </i>
</a>
</li>
</ul>
</div>
</div>
<!-- Back Side -->
</div>
</div>
<!-- Rotating card -->
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="item mb-lg-0 mb-4">
<!-- Rotating card -->
<div class="card-wrapper">
<div id="card-5" class="card card-rotating text-center">
<div class="face front">
<!-- Avatar -->
<div class="avat-image-team">
<img src="vendor/img/elements-img/team-img/ui-block-10-4-team.jpg" alt="First sample avatar image">
</div>
</div>
<div class="face back">
<!-- Content -->
<div class="card-body p-0">
<h4 class="font-weight-bold mt-4 mb-2">
<strong>bella vita</strong>
</h4>
<hr>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta.
Blanditiis rem amet repellat.
</p>
<hr>
<!-- Social Icons -->
<ul class="list-inline list-unstyled team-ul">
<li class="list-inline-item">
<a class="p-2 fa-lg fb-ic">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li class="list-inline-item">
<a class="p-2 fa-lg pin-ic">
<i class="fab fa-pinterest"> </i>
</a>
</li>
<li class="list-inline-item">
<a class="p-2 fa-lg ins-ic">
<i class="fab fa-instagram"> </i>
</a>
</li>
<li class="list-inline-item">
<a class="p-2 fa-lg tw-ic">
<i class="fab fa-twitter"> </i>
</a>
</li>
</ul>
</div>
</div>
<!-- Back Side -->
</div>
</div>
<!-- Rotating card -->
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
</section>
<link rel="stylesheet" href="vendor/css/owl.carousel.min.css">
<script src="vendor/js/owl.carousel.min.js"></script>
<script>
$('.ui-block-10 .team-carousel').owlCarousel({
items: 5,
autoplay: 1500,
smartSpeed: 1500,
autoplayHoverPause: true,
slideBy: 1,
loop: false,
margin: 30,
dots: false,
nav: false,
responsive: {
1200: {
items: 3,
},
768: {
items: 2,
},
480: {
items: 1,
},
320: {
items: 1,
},
}
});
</script>
<!-- Cut the script tag including the script and paste it before the body ending tag at the bottom of your html file -->
<!-- End ui-block-10 -->
<hr>
<!-- Start ui-block-11 -->
<section class="team-sec ui-block-11">
<div class="container">
<div class="row align-items-lg-end">
<div class="col-12 col-md-10 col-lg-8 offset-md-1 offset-lg-2 text-center wow fadeIn" style="visibility: visible; animation-name: fadeIn;">
<div class="heading-area pr-lg-5">
<h6 class="sub-title main-color">Let's Meet To Our Awesome Team</h6>
<h2 class="title">WE HAVE CREATIVE & EXPERT TEAM</h2>
<p class="paragraph">There are many variations of passages of Lorem Ipsum available be the majority have suffered alteration in some form.
</div>
</div>
</div>
<div class="row mt-lg-5 pt-lg-5">
<div class="col-lg-4 col-md-6">
<div class="team-item">
<img src="vendor/img/elements-img/team-img/ui-block-11-1-team.jpg" alt="team">
<div class="team-detail">
<h5 class="m-0">David Manager</h5>
<p class="mb-2">Expert Barber</p>
<ul class="social-icon social-icon-clr-hvr">
<li><a href="javascript:void(0)"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="javascript:void(0)"><i class="fab fa-instagram"></i></a></li>
<li><a href="javascript:void(0)"><i class="fab fa-twitter"></i></a></li>
<li><a href="javascript:void(0)"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6">
<div class="team-item">
<img src="vendor/img/elements-img/team-img/ui-block-11-2-team.jpg" alt="team">
<div class="team-detail">
<h5 class="m-0">Mike Kongal</h5>
<p class="mb-2">Founder & Boss Barber</p>
<ul class="social-icon social-icon-clr-hvr">
<li><a href="javascript:void(0)"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="javascript:void(0)"><i class="fab fa-instagram"></i></a></li>
<li><a href="javascript:void(0)"><i class="fab fa-twitter"></i></a></li>
<li><a href="javascript:void(0)"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="team-item">
<img src="vendor/img/elements-img/team-img/ui-block-11-3-team.jpg" alt="team">
<div class="team-detail">
<h5 class="m-0">Alex Dian</h5>
<p class="mb-2">Expert Barber</p>
<ul class="social-icon social-icon-clr-hvr">
<li><a href="javascript:void(0)"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="javascript:void(0)"><i class="fab fa-instagram"></i></a></li>
<li><a href="javascript:void(0)"><i class="fab fa-twitter"></i></a></li>
<li><a href="javascript:void(0)"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<script>
$('.ui-block-11.team-sec .count').each(function () {
$(this).appear(function () {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 3000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
});
</script>
<!-- Cut the script tag including the script and paste it before the body ending tag at the bottom of your html file -->
<!-- End ui-block-11 -->
<hr>
<!-- Start ui-block-12 -->
<section class="bg-light-gray team-sec ui-block-12">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="main-title wow fadeIn" data-wow-delay="300ms">
<h5> Heros of our company </h5>
<h2> creative heads </h2>
<p>Curabitur mollis bibendum luctus. Duis suscipit vitae dui sed suscipit. Vestibulum auctor nunc vitae diam eleifend, in maximus metus sollicitudin. Quisque vitae sodales lectus. Nam porttitor justo sed mi finibus, vel tristique risus faucibus. </p>
</div>
</div>
</div>
<div class="row text-center">
<div class="col-lg-4 col-md-6 col-sm-12 mb-xs-2rem">
<div class="box-team">
<div class="team-data-img wow fadeIn" data-wow-delay="350ms">
<div class="team-img">
<img src="vendor/img/elements-img/team-img/ui-block-12-1-team.jpg" alt="team" class="img-responsive" data-no-retina>
<div class="first-color overlay center-block">
<ul class="team-social white-bg">
<li><a href="javascript:void(0)" class="facebook-bg-hvr"><i class="lni-facebook-filled" aria-hidden="true"></i></a></li>
<li><a href="javascript:void(0)" class="twitter-bg-hvr"><i class="lni-twitter-filled" aria-hidden="true"></i></a></li>
<li><a href="javascript:void(0)" class="google-bg-hvr"><i class="lni-google-plus" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
<div>
<h4 class="color-black font-weight-normal mt-4 text-capitalize">ben cook</h4>
<p class="color-light-grey font-weight-light designation text-capitalize">
Creative Head
</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12 mb-xs-2rem">
<div class="box-team second-color">
<div class="team-data-img wow fadeIn" data-wow-delay="350ms">
<div class="team-img">
<img src="vendor/img/elements-img/team-img/ui-block-12-2-team.jpg" alt="team" class="img-responsive" data-no-retina>
<div class="first-color overlay center-block">
<ul class="team-social white-bg">
<li><a href="javascript:void(0)" class="facebook-bg-hvr"><i class="lni-facebook-filled" aria-hidden="true"></i></a></li>
<li><a href="javascript:void(0)" class="twitter-bg-hvr"><i class="lni-twitter-filled" aria-hidden="true"></i></a></li>
<li><a href="javascript:void(0)" class="google-bg-hvr"><i class="lni-google-plus" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
<div>
<h4 class="color-black font-weight-normal mt-4 text-capitalize">selena jhonson</h4>
<p class="color-light-grey font-weight-light designation text-capitalize">
Marketing Head
</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 col-sm-12">
<div class="box-team m-0 third-color">
<div class="team-data-img wow fadeIn" data-wow-delay="350ms">
<div class="team-img">
<img src="vendor/img/elements-img/team-img/ui-block-12-3-team.jpg" alt="team" class="img-responsive" data-no-retina>
<div class="first-color overlay center-block">
<ul class="team-social white-bg">
<li><a href="javascript:void(0)" class="facebook-bg-hvr"><i class="lni-facebook-filled" aria-hidden="true"></i></a></li>
<li><a href="javascript:void(0)" class="twitter-bg-hvr"><i class="lni-twitter-filled" aria-hidden="true"></i></a></li>
<li><a href="javascript:void(0)" class="google-bg-hvr"><i class="lni-google-plus" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
<div>
<h4 class="color-black font-weight-normal mt-4 text-capitalize">jack caprio</h4>
<p class="color-light-grey font-weight-light designation text-capitalize">
Lead Designer
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End ui-block-12 -->
<hr>
<!-- Start ui-block-13 -->
<section class="speaker-sec ui-block-13">
<div class="container">
<div class="row text-center speakers-detail">
<div class="col-12">
<span class="sub-heading">Listen to the</span>
<h4 class="large-heading">Event Organizers</h4>
<span class="fly-line"></span>
</div>
</div>
<div class="speaker owl-carousel owl-theme text-center">
<div class="item speaker-info">
<div class="image-holder">
<img src="vendor/img/elements-img/team-img/ui-block-13-1-team.jpg" alt="speaker">
<div class="overlay d-flex justify-content-center align-items-center">
<div class="speaker-links">
<ul>
<li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
</ul>
</div>
</div>
</div>
<h4 class="speaker-name">James Anderson</h4>
<p class="speaker-detail">Founder, Cards</p>
</div>
<div class="item speaker-info">
<div class="image-holder">
<img src="vendor/img/elements-img/team-img/ui-block-13-2-team.jpg" alt="speaker">
<div class="overlay d-flex justify-content-center align-items-center">
<div class="speaker-links">
<ul>
<li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
</ul>
</div>
</div>
</div>
<h4 class="speaker-name">James Anderson</h4>
<p class="speaker-detail">Founder, Cards</p>
</div>
<div class="item speaker-info">
<div class="image-holder">
<img src="vendor/img/elements-img/team-img/ui-block-13-3-team.jpg" alt="speaker">
<div class="overlay d-flex justify-content-center align-items-center">
<div class="speaker-links">
<ul>
<li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
</ul>
</div>
</div>
</div>
<h4 class="speaker-name">James Anderson</h4>
<p class="speaker-detail">Founder, Cards</p>
</div>
<div class="item speaker-info">
<div class="image-holder">
<img src="vendor/img/elements-img/team-img/ui-block-13-4-team.jpg" alt="speaker">
<div class="overlay d-flex justify-content-center align-items-center">
<div class="speaker-links">
<ul>
<li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-instagram"></i></a></li>
</ul>
</div>
</div>
</div>
<h4 class="speaker-name">James Anderson</h4>
<p class="speaker-detail">Founder, Cards</p>
</div>
</div>
</div>
</section>
<link rel="stylesheet" href="vendor/css/owl.carousel.min.css">
<script src="vendor/js/owl.carousel.min.js"></script>
<script>
$('.ui-block-13.speaker-sec .slider-social').mouseenter(function () {
$('.ui-block-13.speaker-sec ~ .aimated-cursor').removeClass('magic');
$('.ui-block-13.speaker-sec .cursor').css({border: "2px solid rgb(0, 0, 0)"});
});
$('.ui-block-13.speaker-sec .slider-social').mouseleave(function () {
$('.ui-block-13.speaker-sec ~ .aimated-cursor').addClass('magic');
$('.ui-block-13.speaker-sec .cursor').css({border: "2px solid rgb(255, 255, 255)"});
});
$('.ui-block-13.speaker-sec .speaker').owlCarousel({
loop: true,
margin: 20,
slideSpeed: 5000,
slideTransition: 'linear',
nav: false,
dots: false,
autoplay: true,
autoplayTimeout: 8000,
autoplayHoverPause: true,
responsive: {
0: {
items: 1
},
600: {
items: 2
},
1000: {
items: 3
},
1500: {
items: 4
},
}
});
</script>
<!-- Cut the script tag including the script and paste it before the body ending tag at the bottom of your html file -->
<!-- End ui-block-13 -->
<hr>
<!-- Start ui-block-14 -->
<section class="team-sec ui-block-14">
<div class="container">
<div class="row">
<div class="col-sm-12 col-lg-8 offset-lg-2 text-center mb-5">
<h1 class="main-heading green-color">Faculty <span class="blue-color">Members</span> </h1>
<p class="sub-heading text-black">Lorem ipsum dolor sit amet, consectetur adipi elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut quis in voluptate velit esse cillum.</p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div id="ourteachers-slider" class="owl-carousel">
<div class="item">
<div class="team-box wow fadeInUp" data-wow-delay="300ms">
<div class="image">
<img src="vendor/img/elements-img/team-img/ui-block-14-1-team.png" alt="">
</div>
<div class="team-content gradient_bg whitecolor">
<h3 class="text-white">Elina Marie </h3>
<p class="mb-5 text-white">Language Teacher</p>
<div class="progress-bars">
<div class="progress">
<p class="text-white sub-heading">Loem ispum</p>
<div class="progress-bar" data-value="90"><span>90%</span></div>
</div>
<div class="progress">
<p class="text-white">Loem ispum</p>
<div class="progress-bar" data-value="75"><span>75%</span></div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="team-box wow fadeInUp" data-wow-delay="350ms">
<div class="image">
<img src="vendor/img/elements-img/team-img/ui-block-14-2-team.png" alt="">
</div>
<div class="team-content gradient_bg_default whitecolor">
<h3 class="text-white">Jhony Walkin</h3>
<p class="text-white mb-5">Photograpy Teacher</p>
<div class="progress-bars">
<div class="progress">
<p class="text-white sub-heading">Loem ispum</p>
<div class="progress-bar" data-value="75"><span>75%</span></div>
</div>
<div class="progress">
<p class="text-white sub-heading">Loem ispum</p>
<div class="progress-bar" data-value="90"><span>90%</span></div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="team-box wow fadeInUp" data-wow-delay="300ms">
<div class="image">
<img src="vendor/img/elements-img/team-img/ui-block-14-3-team.png" alt="">
</div>
<div class="team-content gradient_bg whitecolor">
<h3 class="text-white">Clair Daniel</h3>
<p class="text-white mb-5">Computer Teacher</p>
<div class="progress-bars">
<div class="progress">
<p class="text-white sub-heading">Loem ispum</p>
<div class="progress-bar" data-value="90"><span>90%</span></div>
</div>
<div class="progress">
<p class="text-white sub-heading">Loem ispum</p>
<div class="progress-bar" data-value="75"><span>75%</span></div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="team-box wow fadeInUp" data-wow-delay="300ms">
<div class="image">
<img src="vendor/img/elements-img/team-img/ui-block-14-1-team.png" alt="">
</div>
<div class="team-content gradient_bg whitecolor">
<h3 class="text-white">Elina Marie</h3>
<p class="text-white mb-5">Sports Teacher</p>
<div class="progress-bars">
<div class="progress">
<p class="text-white sub-heading">Loem ispum</p>
<div class="progress-bar" data-value="90"><span>90%</span></div>
</div>
<div class="progress">
<p class="text-white sub-heading">Loem ispum</p>
<div class="progress-bar" data-value="75"><span>75%</span></div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="team-box wow fadeInUp" data-wow-delay="350ms">
<div class="image">
<img src="vendor/img/elements-img/team-img/ui-block-14-2-team.png" alt="">
</div>
<div class="team-content gradient_bg_default whitecolor">
<h3 class="text-white">Johny Walkin</h3>
<p class="text-white mb-5">Science Teacher</p>
<div class="progress-bars">
<div class="progress">
<p class="text-white sub-heading">Loem ispum</p>
<div class="progress-bar" data-value="75"><span>75%</span></div>
</div>
<div class="progress">
<p class="text-white sub-heading">Loem ispum</p>
<div class="progress-bar" data-value="90"><span>90%</span></div>
</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="team-box wow fadeInUp" data-wow-delay="300ms">
<div class="image">
<img src="vendor/img/elements-img/team-img/ui-block-14-3-team.png" alt="">
</div>
<div class="team-content gradient_bg whitecolor">
<h3 class="text-white">Clair Daniel</h3>
<p class="text-white mb-5">Mathematics Teacher</p>
<div class="progress-bars">
<div class="progress">
<p class="text-white sub-heading">Loem ispum</p>
<div class="progress-bar" data-value="90"><span>90%</span></div>
</div>
<div class="progress">
<p class="text-white sub-heading">Loem ispum</p>
<div class="progress-bar" data-value="75"><span>75%</span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<link rel="stylesheet" href="vendor/css/owl.carousel.min.css">
<script src="vendor/js/owl.carousel.min.js"></script>
<script>
$(".ui-block-14.team-sec #ourteachers-slider").owlCarousel({
items: 3,
margin: 20,
center:true,
autoplay: true,
autoplayHoverPause: true,
loop: true,
nav: false,
responsive: {
1280: {
items: 3,
},
600: {
items: 2,
},
320: {
items: 1,
},
}
});
</script>
<!-- Cut the script tag including the script and paste it before the body ending tag at the bottom of your html file -->
<!-- End ui-block-14 -->
<hr>
<!-- Start ui-block-15 -->
<section class="team-section ui-block-15">
<div class="container">
<h2 class="wow fadeInDown" data-wow-delay="300ms">Meet The Team</h2>
<p class="wow fadeInDown" data-wow-delay="300ms">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class=" text-center team-section-carousel owl-carousel owl-themes active wow zoomIn" data-wow-delay="400ms">
<!-- Team-1 -->
<div class="item">
<img src="vendor/img/elements-img/team-img/ui-block-15-1-team.jpg" alt="image">
<div class="team-detail">
<h5>Jane Anderson</h5>
<p>Company CEO</p>
</div>
</div>
<!-- Team-2 -->
<div class="item">
<img src="vendor/img/elements-img/team-img/ui-block-15-2-team.jpg" alt="image">
<div class="team-detail">
<h5>Andrew Cusik</h5>
<p>Marketing Lead</p>
</div>
</div>
<!-- Team-3 -->
<div class="item">
<img src="vendor/img/elements-img/team-img/ui-block-15-3-team.jpg" alt="image">
<div class="team-detail">
<h5>Sarah Jenifer</h5>
<p>Strategist</p>
</div>
</div>
<!-- Team-4 -->
<div class="item">
<img src="vendor/img/elements-img/team-img/ui-block-15-1-team.jpg" alt="image">
<div class="team-detail">
<h5>Jane Anderson</h5>
<p>Company CEO</p>
</div>
</div>
<!-- Team-5 -->
<div class="item">
<img src="vendor/img/elements-img/team-img/ui-block-15-2-team.jpg" alt="image">
<div class="team-detail">
<h5>Andrew Cusik</h5>
<p>Marketing Lead</p>
</div>
</div>
<!-- Team-6 -->
<div class="item">
<img src="vendor/img/elements-img/team-img/ui-block-15-3-team.jpg" alt="image">
<div class="team-detail">
<h5>Sarah Jenifer</h5>
<p>Strategist</p>
</div>
</div>
<!-- Team-7 -->
<div class="item">
<img src="vendor/img/elements-img/team-img/ui-block-15-1-team.jpg" alt="image">
<div class="team-detail">
<h5>Jane Anderson</h5>
<p>Company CEO</p>
</div>
</div>
<!-- Team-8 -->
<div class="item">
<img src="vendor/img/elements-img/team-img/ui-block-15-2-team.jpg" alt="image">
<div class="team-detail">
<h5>Andrew Cusik</h5>
<p>Marketing Lead</p>
</div>
</div>
<!-- Team-9 -->
<div class="item">
<img src="vendor/img/elements-img/team-img/ui-block-15-3-team.jpg" alt="image">
<div class="team-detail">
<h5>Sarah Jenifer</h5>
<p>Strategist</p>
</div>
</div>
</div>
</div>
</section>
<link rel="stylesheet" href="vendor/css/owl.carousel.min.css">
<script src="vendor/js/owl.carousel.min.js"></script>
<script>
$('.ui-block-15.team-section .team-section-carousel').owlCarousel({
loop: true,
margin: 30,
autoplay: true,
nav: false,
dots: true,
responsive: {
0: {
items: 1
},
600: {
items: 2
},
1000: {
items: 3
}
}
});
</script>
<!-- Cut the script tag including the script and paste it before the body ending tag at the bottom of your html file -->
<!-- End ui-block-15 -->
<hr>
<!-- Start ui-block-16 -->
<section class="team-slider ui-block-16 team-sec">
<div class="container">
<!--Heading-->
<div class="row wow fadeIn">
<div class="col-md-12 text-center">
<div class="title d-inline-block">
<h5 class="mb-3 blue mb-20 text-capitalize">Heros Behind the Company</h5>
<h2 class="mb-3 mb-20 text-capitalize gradient-text1">Our Business Team</h2>
<p class="margin-30 text-width">Curabitur mollis bibendum luctus. Duis suscipit vitae dui sed suscipit. Vestibulum auctor nunc vitae diam eleifend, in maximus metus sollicitudin. Nam porttitor justo sed mi finibus, vel tristique risus faucibus. </p>
</div>
</div>
</div>
<!--Team-->
<div class="row">
<div class="col-sm-12">
<div id="team-slider" class="owl-carousel owl-theme wow fadeInUp">
<!--Team Item-->
<div class="team-box item">
<!--Team Image-->
<div class="team-image">
<img src="vendor/img/elements-img/team-img/ui-block-16-1-team.jpg" alt="image">
<!--Team Overlay-->
<div class="overlay center-block">
<!--Team Social-->
<ul class="team-social p-0">
<li><a class="facebook-bg-hvr" href="javascript:void(0);"><i class="fab fa-facebook-f" aria-hidden="true"></i></a></li>
<li><a class="twitter-bg-hvr" href="javascript:void(0);"><i class="fab fa-twitter" aria-hidden="true"></i></a></li>
<li><a class="instagram-bg-hvr" href="javascript:void(0);"><i class="fab fa-instagram" aria-hidden="true"></i></a></li>
<li><a class="pinterest-bg-hvr" href="javascript:void(0);"><i class="fab fa-pinterest-p" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
<!--Team Text-->
<div class="team-text">
<h3 class="text-capitalize">Alex Walkin</h3>
<span class="alt-font text-capitalize">Owner / Co-founder</span>
</div>
<!--Team Progress-->
<ul class="team-progress text-left">
<!--Progress Item-->
<li class="progress-item">
<h5 class="text-capitalize">Project Management <span class="float-right"><b class="count">90</b>%</span></h5>
<div class="progress">
<span class="progress-bar green-background gradient-bg1" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></span>
</div>
</li>
<!--Progress Item-->
<li class="progress-item">
<h5 class="text-capitalize">Consulting<span class="float-right"><b class="count">75</b>%</span></h5>
<div class="progress">
<span class="progress-bar blue-background" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></span>
</div>
</li>
</ul>
</div>
<!--Team Item-->
<div class="team-box item">
<!--Team Image-->
<div class="team-image">
<img src="vendor/img/elements-img/team-img/ui-block-16-2-team.jpg" alt="image">
<!--Team Overlay-->
<div class="overlay center-block">
<!--Team Social-->
<ul class="team-social p-0">
<li><a class="facebook-bg-hvr" href="javascript:void(0);"><i class="fab fa-facebook-f" aria-hidden="true"></i></a></li>
<li><a class="twitter-bg-hvr" href="javascript:void(0);"><i class="fab fa-twitter" aria-hidden="true"></i></a></li>
<li><a class="instagram-bg-hvr" href="javascript:void(0);"><i class="fab fa-instagram" aria-hidden="true"></i></a></li>
<li><a class="pinterest-bg-hvr" href="javascript:void(0);"><i class="fab fa-pinterest-p" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
<!--Team Text-->
<div class="team-text">
<h3 class="text-capitalize">Teena Jhon</h3>
<span class="alt-font text-capitalize">Lead Designer</span>
</div>
<!--Team Progress-->
<ul class="team-progress text-left">
<!--Progress Item-->
<li class="progress-item">
<h5 class="text-capitalize">Designer<span class="float-right"><b class="count">75</b>%</span></h5>
<div class="progress">
<span class="progress-bar blue-background" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></span>
</div>
</li>
<!--Progress Item-->
<li class="progress-item">
<h5 class="text-capitalize">Customer Care<span class="float-right"><b class="count">90</b>%</span></h5>
<div class="progress">
<span class="progress-bar green-background gradient-bg1" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></span>
</div>
</li>
</ul>
</div>
<!--Team Item-->
<div class="team-box item">
<!--Team Image-->
<div class="team-image">
<img src="vendor/img/elements-img/team-img/ui-block-16-3-team.jpg" alt="image">
<!--Team Overlay-->
<div class="overlay center-block">
<!--Team Social-->
<ul class="team-social p-0">
<li><a class="facebook-bg-hvr" href="javascript:void(0);"><i class="fab fa-facebook-f" aria-hidden="true"></i></a></li>
<li><a class="twitter-bg-hvr" href="javascript:void(0);"><i class="fab fa-twitter" aria-hidden="true"></i></a></li>
<li><a class="instagram-bg-hvr" href="javascript:void(0);"><i class="fab fa-instagram" aria-hidden="true"></i></a></li>
<li><a class="pinterest-bg-hvr" href="javascript:void(0);"><i class="fab fa-pinterest-p" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
<!--Team Text-->
<div class="team-text">
<h3 class="text-capitalize">David Warrior</h3>
<span class="alt-font text-capitalize">Marketing Head</span>
</div>
<!--Team Progress-->
<ul class="team-progress text-left">
<!--Progress Item-->
<li class="progress-item">
<h5 class="text-capitalize">Marketing Online<span class="float-right"><b class="count">90</b>%</span></h5>
<div class="progress">
<span class="progress-bar green-background gradient-bg1" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></span>
</div>
</li>
<!--Progress Item-->
<li class="progress-item">
<h5 class="text-capitalize">Dealing<span class="float-right"><b class="count">75</b>%</span></h5>
<div class="progress">
<span class="progress-bar blue-background" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></span>
</div>
</li>
</ul>
</div>
<!--Team Item-->
<div class="team-box item">
<!--Team Image-->
<div class="team-image">
<img src="vendor/img/elements-img/team-img/ui-block-16-1-team.jpg" alt="image">
<!--Team Overlay-->
<div class="overlay center-block">
<!--Team Social-->
<ul class="team-social p-0">
<li><a class="facebook-bg-hvr" href="javascript:void(0);"><i class="fab fa-facebook-f" aria-hidden="true"></i></a></li>
<li><a class="twitter-bg-hvr" href="javascript:void(0);"><i class="fab fa-twitter" aria-hidden="true"></i></a></li>
<li><a class="instagram-bg-hvr" href="javascript:void(0);"><i class="fab fa-instagram" aria-hidden="true"></i></a></li>
<li><a class="pinterest-bg-hvr" href="javascript:void(0);"><i class="fab fa-pinterest-p" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
<!--Team Text-->
<div class="team-text">
<h3 class="text-capitalize">Alex Walkin</h3>
<span class="alt-font text-capitalize">Owner / Co-founder</span>
</div>
<!--Team Progress-->
<ul class="team-progress text-left">
<!--Progress Item-->
<!--Progress Item-->
<li class="progress-item">
<h5 class="text-capitalize">Consulting<span class="float-right"><b class="count">75</b>%</span></h5>
<div class="progress">
<span class="progress-bar blue-background" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></span>
</div>
</li>
<li class="progress-item">
<h5 class="text-capitalize">Project Management <span class="float-right"><b class="count">90</b>%</span></h5>
<div class="progress">
<span class="progress-bar green-background gradient-bg1" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></span>
</div>
</li>
</ul>
</div>
<!--Team Item-->
<div class="team-box item">
<!--Team Image-->
<div class="team-image">
<img src="vendor/img/elements-img/team-img/ui-block-16-2-team.jpg" alt="image">
<!--Team Overlay-->
<div class="overlay center-block">
<!--Team Social-->
<ul class="team-social p-0">
<li><a class="facebook-bg-hvr" href="javascript:void(0);"><i class="fab fa-facebook-f" aria-hidden="true"></i></a></li>
<li><a class="twitter-bg-hvr" href="javascript:void(0);"><i class="fab fa-twitter" aria-hidden="true"></i></a></li>
<li><a class="instagram-bg-hvr" href="javascript:void(0);"><i class="fab fa-instagram" aria-hidden="true"></i></a></li>
<li><a class="pinterest-bg-hvr" href="javascript:void(0);"><i class="fab fa-pinterest-p" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
<!--Team Text-->
<div class="team-text">
<h3 class="text-capitalize">Teena Jhon</h3>
<span class="alt-font text-capitalize">Lead Designer</span>
</div>
<!--Team Progress-->
<ul class="team-progress text-left">
<!--Progress Item-->
<li class="progress-item">
<h5 class="text-capitalize">Customer Care<span class="float-right"><b class="count">90</b>%</span></h5>
<div class="progress">
<span class="progress-bar green-background gradient-bg1" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100"></span>
</div>
</li>
<!--Progress Item-->
<li class="progress-item">
<h5 class="text-capitalize">Designer<span class="float-right"><b class="count">75</b>%</span></h5>
<div class="progress">
<span class="progress-bar blue-background" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<link rel="stylesheet" href="vendor/css/owl.carousel.min.css">
<script src="vendor/js/owl.carousel.min.js"></script>
<script>
$(".ui-block-16.team-sec #team-slider").owlCarousel({
items: 3,
dots: false,
nav: false,
responsive: {
992: {
items: 3,
},
991: {
items: 2,
},
767: {
items: 1,
},
320: {
items: 1,
},
}
});
// Team Slider
$(".ui-block-16.team-sec #team-carousel").owlCarousel({
items: 1,
dots: true,
nav: false,
autoplay: true,
smartSpeed:500,
autoplayHoverPause:true,
loop:true,
responsive: {
992: {
items: 1,
},
991: {
items: 1,
},
767: {
items: 1,
},
320: {
items: 1,
},
}
});
$(".ui-block-16.team-sec .progress-bar").each(function () {
$(this).appear(function () {
$(this).animate({width: $(this).attr("aria-valuenow") + "%"}, 3000)
});
});
</script>
<!-- Cut the script tag including the script and paste it before the body ending tag at the bottom of your html file -->
<!-- End ui-block-16 -->
<hr>
<!-- Start ui-block-17 -->
<section class="our-cast ui-block-17">
<div class="container">
<div class="row">
<div class="col-12 col-md-8 offset-md-2 text-center">
<div class="about-heading heading-details">
<h4 class="heading">OUR CAST</h4>
<p class="top-des"></p>
</div>
</div>
</div>
<div class="row no-gutters testimonial-cast owl-carousel owl-theme">
<div class="item">
<div class="row no-gutters cast-card">
<div class="col-12">
<div class="cast-img">
<img src="vendor/img/elements-img/team-img/ui-block-17-1-team.jpg" alt="image">
</div>
<div class="cast-detail d-flex align-items-center">
<div class="cast-content">
<h4 class="cast-name">Lopez Joshe</h4>
<span class="cast-designation">Dribble Actor</span>
<p class="cast-des">Lorem ipsum dolor sit amet conset sed tem sit amet, conset sed tem.</p>
<ul class="cast-social">
<li><a href="#"><i class="lab la-facebook-f"></i></a></li>
<li><a href="#"><i class="lab la-twitter"></i></a></li>
<li><a href="#"><i class="lab la-dribbble"></i></a></li>
<li><a href="#"><i class="lab la-instagram"></i></a></li>
</ul>
</div>
<div class="overlay-cast"></div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row no-gutters cast-card">
<div class="col-12">
<div class="cast-detail d-flex align-items-center">
<div class="cast-content">
<h4 class="cast-name">Lopez Joshe</h4>
<span class="cast-designation">Dribble Actor</span>
<p class="cast-des">Lorem ipsum dolor sit amet conset sed tem sit amet, conset sed tem.</p>
<ul class="cast-social">
<li><a href="#"><i class="lab la-facebook-f"></i></a></li>
<li><a href="#"><i class="lab la-twitter"></i></a></li>
<li><a href="#"><i class="lab la-dribbble"></i></a></li>
<li><a href="#"><i class="lab la-instagram"></i></a></li>
</ul>
</div>
<div class="overlay-cast"></div>
</div>
<div class="cast-img">
<img src="vendor/img/elements-img/team-img/ui-block-17-2-team.jpg" alt="image">
</div>
</div>
</div>
</div>
<div class="item">
<div class="row no-gutters cast-card">
<div class="col-12">
<div class="cast-img">
<img src="vendor/img/elements-img/team-img/ui-block-17-3-team.jpg" alt="image">
</div>
<div class="cast-detail d-flex align-items-center">
<div class="cast-content">
<h4 class="cast-name">Lopez Joshe</h4>
<span class="cast-designation">Dribble Actor</span>
<p class="cast-des">Lorem ipsum dolor sit amet conset sed tem sit amet, conset sed tem.</p>
<ul class="cast-social">
<li><a href="#"><i class="lab la-facebook-f"></i></a></li>
<li><a href="#"><i class="lab la-twitter"></i></a></li>
<li><a href="#"><i class="lab la-dribbble"></i></a></li>
<li><a href="#"><i class="lab la-instagram"></i></a></li>
</ul>
</div>
<div class="overlay-cast"></div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="row no-gutters cast-card">
<div class="col-12">
<div class="cast-detail d-flex align-items-center">
<div class="cast-content">
<h4 class="cast-name">Lopez Joshe</h4>
<span class="cast-designation">Dribble Actor</span>
<p class="cast-des">Lorem ipsum dolor sit amet conset sed tem sit amet, conset sed tem.</p>
<ul class="cast-social">
<li><a href="#"><i class="lab la-facebook-f"></i></a></li>
<li><a href="#"><i class="lab la-twitter"></i></a></li>
<li><a href="#"><i class="lab la-dribbble"></i></a></li>
<li><a href="#"><i class="lab la-instagram"></i></a></li>
</ul>
</div>
<div class="overlay-cast"></div>
</div>
<div class="cast-img">
<img src="vendor/img/elements-img/team-img/ui-block-17-4-team.jpg" alt="image">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<link rel="stylesheet" href="vendor/css/owl.carousel.min.css">
<script src="vendor/js/owl.carousel.min.js"></script>
<script>
$('.ui-block-17 .testimonial-cast').owlCarousel({
loop: true,
smartSpeed: 500,
responsiveClass: true,
nav:false,
dots:false,
autoplay: true,
margin:0,
autoplayHoverPause: true,
autoplayTimeout: 3000,
responsive: {
0: {
items: 1,
margin: 30,
},
480: {
items: 2,
},
992: {
items: 4,
}
}
});
</script>
<!-- Cut the script tag including the script and paste it before the body ending tag at the bottom of your html file -->
<!-- End ui-block-17 -->
<hr>
<script src="vendor/js/megamenu.js"></script>
<script>
$ = jQuery.noConflict();
jQuery(window).on("load", function () {
"use strict";
$('.side-menu').removeClass('d-none');
});
jQuery(function ($) {
"use strict";
var $window = $(window);
var windowsize = $(window).width();
$(".scroll").on("click", function(event){
event.preventDefault();
$('html,body').animate({
scrollTop: $(this.hash).offset().top - 40}, 1100);
});
if ($("#sidemenu_toggle").length) {
$("#sidemenu_toggle").on("click", function () {
$(".pushwrap").toggleClass("active");
$(".side-menu").addClass("side-menu-active"), $("#close_side_menu").fadeIn(700)
}), $("#close_side_menu").on("click", function () {
$(".side-menu").removeClass("side-menu-active"), $(this).fadeOut(200), $(".pushwrap").removeClass("active")
}), $(".side-nav .navbar-nav .nav-link").on("click", function () {
$(".side-menu").removeClass("side-menu-active"), $("#close_side_menu").fadeOut(200), $(".pushwrap").removeClass("active")
}), $("#btn_sideNavClose").on("click", function () {
$(".side-menu").removeClass("side-menu-active"), $("#close_side_menu").fadeOut(200), $(".pushwrap").removeClass("active")
})
}
});
</script>
</body>
</html>