File: /home/imensosw/www/imenso.co/imenso-new/index.php
<!doctype html>
<html lang="en-US" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="http://gmpg.org/xfn/11">
<title>Homepage | Imenso Software</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<link rel='stylesheet' href='css/style.css' media='all' />
<link rel='stylesheet' href='css/swiper.min.css' media='all' />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" media="all">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Sen:wght@400;700;800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"/>
<link href="https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg mt-4">
<div class="container">
<a class="navbar-brand" href="#"><img src="images/brand-logo.png" width="120"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav my-2 ml-auto" id="nav_bar">
<!-- Dropdown -->
<li class="nav-item mega-dropdown dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> Capabilities <i class="fa fa-angle-down"></i></a>
<div class="dropdown-menu">
<div class="container">
<div class="row">
<div class="col-sm-3 menu-cnt">
<h3>Capabilities</h3>
<p>Imenso Software is a client focused custom software development company.</p>
<a href="#">View All</a>
</div>
<div class="col-sm-8 offset-sm-1">
<div class="row">
<div class="col-sm-4">
<a class="dropdown-item" href="#">Link 1</a>
</div>
<div class="col-sm-4">
<a class="dropdown-item" href="#">Link 2 dasdf sadfsadf asd fasdf sadfsadf</a>
</div>
<div class="col-sm-4">
<a class="dropdown-item" href="#">Link 3</a>
</div>
<div class="col-sm-4">
<a class="dropdown-item" href="#">Link 4</a>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<!-- Dropdown -->
<!-- Dropdown -->
<li class="nav-item"> <a class="nav-link" href="#">Work</a></li>
<li class="nav-item"> <a class="nav-link" href="#">About</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Blog</a></li>
<li class="nav-item"> <a class="nav-link" href="#">Contact</a></li>
<li class="nav-item last-nav"> <a class="nav-link" href="#">Estimate Project</a></li>
</ul>
</div>
</div>
</nav>
<section class="t-burger hero">
<div class="container">
<div class="row">
<div class="col-lg-6">
<h1 class="mt-5">Full Stack Tech Consulting Agency</h1>
<p class="mt-4">Imenso Software is a client focused custom software development company. Whether you need custom web development or an appealing website design, Imenso has the required expertise and experience to do it all.</p>
<div class="mt-5">
<a href="" class="btn btn-primary">View our Work</a>
<a href="" class="btn btn-bordered ml-4">Estimate Project</a>
</div>
</div>
<div class="col-lg-6">
<img src="images/hero1.png" class="img-fluid" style="margin-top: -50px;">
</div>
</div>
</div>
</section>
<section class="burger capabilities">
<div class="container">
<div class="section-header">
<span class="sh-title">Capabilities</span>
<h2>High-quality IT services that evolve with corresponding business trends and technology</h2>
</div>
<ul class="nav nav-pills mb-3 mt-5 justify-content-center" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">UX/UI Design</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">Development</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Data Analytics</a>
</li>
<li class="nav-item">
<a class="nav-link" id="pills-contact-tab" data-toggle="pill" href="#pills-contact" role="tab" aria-controls="pills-contact" aria-selected="false">Digital Marketing</a>
</li>
</ul>
<div class="tab-content t-burger" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
<div class="row">
<div class="col-lg-3">
<h3>UX/UI Design</h3>
<p class="mt-4">We design intuitive user experience that enhance user engagements.</p>
<a class='animated-arrow' href='https://google.com'>
<span class='the-arrow -left'>
<span class='shaft'></span>
</span>
<span class='main'>
<span class='text'>
Know More
</span>
<span class='the-arrow -right'>
<span class='shaft'></span>
</span>
</span>
</a>
</div>
<div class="col-lg-9">
<div class="row">
<div class="col-lg-6">
<div class="media">
<img class="mr-3" src="https://secureservercdn.net/50.62.88.172/v5q.fc5.myftpupload.com/wp-content/themes/imenso/images/svg/img-1.svg" width="50" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0">Experience/interface designing</h5>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio.</p>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="media">
<img class="mr-3" src="https://secureservercdn.net/50.62.88.172/v5q.fc5.myftpupload.com/wp-content/themes/imenso/images/svg/img-4.svg" width="50" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0">Responsive (RWD)</h5>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio.</p>
</div>
</div>
</div>
</div>
<div class="row mt-5">
<div class="col-lg-6">
<div class="media">
<img class="mr-3" src="https://secureservercdn.net/50.62.88.172/v5q.fc5.myftpupload.com/wp-content/themes/imenso/images/svg/img-3.svg" width="50" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0">Wireframing & Prototyping</h5>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio.</p>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="media">
<img class="mr-3" src="https://secureservercdn.net/50.62.88.172/v5q.fc5.myftpupload.com/wp-content/themes/imenso/images/svg/img-2.svg" width="50" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0">User Research</h5>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
<div class="row">
<div class="col-lg-3">
<h3>Development</h3>
<p class="mt-4">We design intuitive user experience that enhance user engagements.</p>
<a class='animated-arrow' href='https://google.com'>
<span class='the-arrow -left'>
<span class='shaft'></span>
</span>
<span class='main'>
<span class='text'>
Know More
</span>
<span class='the-arrow -right'>
<span class='shaft'></span>
</span>
</span>
</a>
</div>
<div class="col-lg-9">
<div class="row">
<div class="col-lg-6">
<div class="media">
<img class="mr-3" src="images/icon1.png" width="80" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0">Web Applications</h5>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio.</p>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="media">
<img class="mr-3" src="images/icon2.png" width="80" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0">Mobile Apps</h5>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio.</p>
</div>
</div>
</div>
</div>
<div class="row mt-5">
<div class="col-lg-6">
<div class="media">
<img class="mr-3" src="images/icon1.png" width="80" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0">Product Engineering</h5>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio.</p>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="media">
<img class="mr-3" src="images/icon2.png" width="80" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0">Enterprise Application Development</h5>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">
<div class="row">
<div class="col-lg-3">
<h3>Data Analytics</h3>
<p class="mt-4">Bespoke web development services that respond to your business needs.</p>
<a class='animated-arrow' href='https://google.com'>
<span class='the-arrow -left'>
<span class='shaft'></span>
</span>
<span class='main'>
<span class='text'>
Know More
</span>
<span class='the-arrow -right'>
<span class='shaft'></span>
</span>
</span>
</a>
</div>
<div class="col-lg-9">
<div class="row">
<div class="col-lg-6">
<div class="media">
<img class="mr-3" src="images/icon1.png" width="80" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0">Data Visualization</h5>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio.</p>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="media">
<img class="mr-3" src="images/icon2.png" width="80" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0">Dashboards</h5>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio.</p>
</div>
</div>
</div>
</div>
<div class="row mt-5">
<div class="col-lg-6">
<div class="media">
<img class="mr-3" src="images/icon1.png" width="80" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0">Advanced Analytics </h5>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio.</p>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="media">
<img class="mr-3" src="images/icon2.png" width="80" alt="Generic placeholder image">
<div class="media-body">
<h5 class="mt-0">Data Warehousing</h5>
<p>Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="hero border-top">
<div class="hero__left">
<div class="section-header text-left">
<span class="sh-title">Capabilities</span>
<h2>How we have helped industry leaders to accelerate business </h2>
<p class="mt-4">Whether it's a simple website or a sophisticated web application, our work excels in quality and effectiveness.</p>
<a class='animated-arrow' href='https://google.com'>
<span class='the-arrow -left'>
<span class='shaft'></span>
</span>
<span class='main'>
<span class='text'>
View all Projects
</span>
<span class='the-arrow -right'>
<span class='shaft'></span>
</span>
</span>
</a>
</div>
</div>
<div class="hero__right">
<div class="viewport" id="app">
<main class="main">
<transition-group autoplay="true" tag="div" class="main__slider" name="main__slide-image" mode="out-in">
<a class="main__slide-image" v-for="(slide, index) of slides" :key="index" v-if="index === currentActiveSlide" :href="slide.link" >
<img class="img-fluid" :src="slide.img"/></a>
</transition-group>
</main>
<nav class="nav__slider">
<transition-group autoplay="true" tag="div" class="main__headline" name="main__headline-span" mode="out-in">
<span v-for="(slide, index) of slides" :key="index" v-if="index === currentActiveSlide" class="main__headline-span"><span class="head-label">Latest Projects</span>{{slide.headline}} <span class="explore">Explore</span></span>
</transition-group>
<div class="nav__control">
<div class="aside__nav">
<button class="aside__button" @click="handleSlideChange(-1)">
<i class="fa fa-angle-left" aria-hidden="true"></i>
</button>
<button class="aside__button" @click="handleSlideChange(1)">
<i class="fa fa-angle-right" aria-hidden="true"></i>
</button>
</div>
</div>
</nav>
</div>
</div>
</section>
<section class="burger about border-top">
<div class="container">
<div class="section-header">
<span class="sh-title">About Us</span>
<h2>Imenso Software specialises in delivering technology solutions through its unique consultative approach. We take great pride working with dynamic startups to Fortune 500 companies across the globe with our average engagement period of more than 4 years with all our major clients.</h2>
<div class="logos mt-5">
<ul>
<li><img src="images/nthrive-logo.png" class="img-fluid"></li>
<li><img src="images/liberty-logo.png" class="img-fluid"></li>
<li><img src="images/ul-logo.png" class="img-fluid" width="50"></li>
<li><img src="https://secureservercdn.net/50.62.88.172/v5q.fc5.myftpupload.com/wp-content/themes/imenso/images/allianz.webp" class="img-fluid"></li>
<li><img src="https://secureservercdn.net/50.62.88.172/v5q.fc5.myftpupload.com/wp-content/themes/imenso/images/mns-logo.webp" class="img-fluid" width="80"></li>
<li><img src="https://secureservercdn.net/50.62.88.172/v5q.fc5.myftpupload.com/wp-content/themes/imenso/images/dominos.webp" class="img-fluid" width="70"></li>
</ul>
</div>
<a class='animated-arrow' href='https://google.com'>
<span class='the-arrow -left'>
<span class='shaft'></span>
</span>
<span class='main'>
<span class='text'>
Know More
</span>
<span class='the-arrow -right'>
<span class='shaft'></span>
</span>
</span>
</a>
</div>
</div>
</section>
<section class="burger techstack border-top">
<div class="container">
<div class="section-header">
<span class="sh-title">Technical Expertise</span>
<h2>Cutting edge technologies<br> for your business success</h2>
</div>
<div class="row" style="margin-top: 100px;">
<div class="nav flex-column col-lg-3 offset-lg-2 nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Frontend</a>
<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Backend</a>
<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Mobile Apps</a>
<a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Database</a>
<a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Data Analytics</a>
<a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Deployment</a>
</div>
<div class="tab-content col-lg-6" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
<ul class="tech-icons">
<li><img src="https://secureservercdn.net/50.62.88.172/v5q.fc5.myftpupload.com/wp-content/themes/imenso/images/new-icons/laravel_n.png" alt="Laravel"><span>Laravel</span></li>
<li><img src="https://secureservercdn.net/50.62.88.172/v5q.fc5.myftpupload.com/wp-content/themes/imenso/images/new-icons/cakephp_n.png" alt="CakePHP"><span>CakePHP</span></li>
<li><img src="https://secureservercdn.net/50.62.88.172/v5q.fc5.myftpupload.com/wp-content/themes/imenso/images/new-icons/yii_n.png" alt="Yii"><span>Yii</span></li>
<li><img src="https://secureservercdn.net/50.62.88.172/v5q.fc5.myftpupload.com/wp-content/themes/imenso/images/new-icons/codeigniter_n.png" alt="Codeigniter"><span>Codeigniter</span></li>
<li><img src="https://secureservercdn.net/50.62.88.172/v5q.fc5.myftpupload.com/wp-content/themes/imenso/images/new-icons/zend_n.png" alt="Zend"><span>Zend</span></li>
<li><span><img src="https://secureservercdn.net/50.62.88.172/v5q.fc5.myftpupload.com/wp-content/themes/imenso/images/new-icons/NetCore.png" alt="Net Core"><span>.Net Core</span></li>
<li><img src="https://secureservercdn.net/50.62.88.172/v5q.fc5.myftpupload.com/wp-content/themes/imenso/images/new-icons/asp-WPF.png" alt="WPF"><span>WPF</span></li>
<li><img src="https://secureservercdn.net/50.62.88.172/v5q.fc5.myftpupload.com/wp-content/themes/imenso/images/new-icons/VB.png" alt="ASP MVC Dev"><span>ASP MVC</span></li>
</ul>
</div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
<ul class="tech-icons">
<li><img src="https://secureservercdn.net/50.62.88.172/v5q.fc5.myftpupload.com/wp-content/themes/imenso/images/new-icons/laravel_n.png" alt="Laravel"><span>Laravel</span></li>
<li><img src="https://secureservercdn.net/50.62.88.172/v5q.fc5.myftpupload.com/wp-content/themes/imenso/images/new-icons/cakephp_n.png" alt="CakePHP"><span>CakePHP</span></li>
<li><img src="https://secureservercdn.net/50.62.88.172/v5q.fc5.myftpupload.com/wp-content/themes/imenso/images/new-icons/yii_n.png" alt="Yii"><span>Yii</span></li>
<li><img src="https://secureservercdn.net/50.62.88.172/v5q.fc5.myftpupload.com/wp-content/themes/imenso/images/new-icons/codeigniter_n.png" alt="Codeigniter"><span>Codeigniter</span></li>
<li><img src="https://secureservercdn.net/50.62.88.172/v5q.fc5.myftpupload.com/wp-content/themes/imenso/images/new-icons/zend_n.png" alt="Zend"><span>Zend</span></li>
<li><span><img src="https://secureservercdn.net/50.62.88.172/v5q.fc5.myftpupload.com/wp-content/themes/imenso/images/new-icons/NetCore.png" alt="Net Core"><span>.Net Core</span></li>
<li><img src="https://secureservercdn.net/50.62.88.172/v5q.fc5.myftpupload.com/wp-content/themes/imenso/images/new-icons/asp-WPF.png" alt="WPF"><span>WPF</span></li>
<li><img src="https://secureservercdn.net/50.62.88.172/v5q.fc5.myftpupload.com/wp-content/themes/imenso/images/new-icons/VB.png" alt="ASP MVC Dev"><span>ASP MVC</span></li>
</ul>
</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
<ul class="tech-icons">
<li><img src="https://secureservercdn.net/50.62.88.172/v5q.fc5.myftpupload.com/wp-content/themes/imenso/images/new-icons/laravel_n.png" alt="Laravel"><span>Laravel</span></li>
<li><img src="https://secureservercdn.net/50.62.88.172/v5q.fc5.myftpupload.com/wp-content/themes/imenso/images/new-icons/cakephp_n.png" alt="CakePHP"><span>CakePHP</span></li>
<li><img src="https://secureservercdn.net/50.62.88.172/v5q.fc5.myftpupload.com/wp-content/themes/imenso/images/new-icons/yii_n.png" alt="Yii"><span>Yii</span></li>
<li><img src="https://secureservercdn.net/50.62.88.172/v5q.fc5.myftpupload.com/wp-content/themes/imenso/images/new-icons/codeigniter_n.png" alt="Codeigniter"><span>Codeigniter</span></li>
<li><img src="https://secureservercdn.net/50.62.88.172/v5q.fc5.myftpupload.com/wp-content/themes/imenso/images/new-icons/zend_n.png" alt="Zend"><span>Zend</span></li>
<li><span><img src="https://secureservercdn.net/50.62.88.172/v5q.fc5.myftpupload.com/wp-content/themes/imenso/images/new-icons/NetCore.png" alt="Net Core"><span>.Net Core</span></li>
<li><img src="https://secureservercdn.net/50.62.88.172/v5q.fc5.myftpupload.com/wp-content/themes/imenso/images/new-icons/asp-WPF.png" alt="WPF"><span>WPF</span></li>
<li><img src="https://secureservercdn.net/50.62.88.172/v5q.fc5.myftpupload.com/wp-content/themes/imenso/images/new-icons/VB.png" alt="ASP MVC Dev"><span>ASP MVC</span></li>
</ul>
</div>
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
<ul class="tech-icons">
<li><img src="https://secureservercdn.net/50.62.88.172/v5q.fc5.myftpupload.com/wp-content/themes/imenso/images/new-icons/laravel_n.png" alt="Laravel"><span>Laravel</span></li>
<li><img src="https://secureservercdn.net/50.62.88.172/v5q.fc5.myftpupload.com/wp-content/themes/imenso/images/new-icons/cakephp_n.png" alt="CakePHP"><span>CakePHP</span></li>
<li><img src="https://secureservercdn.net/50.62.88.172/v5q.fc5.myftpupload.com/wp-content/themes/imenso/images/new-icons/yii_n.png" alt="Yii"><span>Yii</span></li>
<li><img src="https://secureservercdn.net/50.62.88.172/v5q.fc5.myftpupload.com/wp-content/themes/imenso/images/new-icons/codeigniter_n.png" alt="Codeigniter"><span>Codeigniter</span></li>
<li><img src="https://secureservercdn.net/50.62.88.172/v5q.fc5.myftpupload.com/wp-content/themes/imenso/images/new-icons/zend_n.png" alt="Zend"><span>Zend</span></li>
<li><span><img src="https://secureservercdn.net/50.62.88.172/v5q.fc5.myftpupload.com/wp-content/themes/imenso/images/new-icons/NetCore.png" alt="Net Core"><span>.Net Core</span></li>
<li><img src="https://secureservercdn.net/50.62.88.172/v5q.fc5.myftpupload.com/wp-content/themes/imenso/images/new-icons/asp-WPF.png" alt="WPF"><span>WPF</span></li>
<li><img src="https://secureservercdn.net/50.62.88.172/v5q.fc5.myftpupload.com/wp-content/themes/imenso/images/new-icons/VB.png" alt="ASP MVC Dev"><span>ASP MVC</span></li>
</ul>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/node-vibrant@3.2.0-alpha/dist/vibrant.min.js" type="text/javascript"></script>
<script type="text/javascript">
var rotation1=true;
var mouseover=false;
var progress=0;
var app = new Vue({
el: "#app",
data: function data() {
return {
currentActiveSlide: 0,
nextActiveSlide:1,
rotation:true,
slides: [
{
headline: 'Validating employee assessment and internal appraisals',
img: 'images/b2.png',
link: '#'
},
{
headline: 'A tool to test medical coding knowledge for healthcare professionals.',
img: 'images/b1.png',
link: '#'
},
{
headline: 'A tool to test medical coding knowledge for healthcare professionals.',
img: 'images/b3.png',
link: '#'
},
]
};
},
mounted: function () {
this.startRotation();
},
methods: {
startRotation: function() {
// this.timer = setInterval(this.next, 5000);
$('.current_slide').html(this.currentActiveSlide+1+" / "+this.slides.length);
setTimeout(this.progress_bar, 10);
},
stopRotation: function() {
clearTimeout(this.timer);
this.timer = null;
},
next: function() {
if(rotation1==false || mouseover==true)
{
return false;
}
this.currentActiveSlide += 1;
if(this.currentActiveSlide==this.slides.length)
{
this.currentActiveSlide = 0;
this.nextActiveSlide= 1;
}
else
{
if(this.currentActiveSlide==this.slides.length-1)
{
this.nextActiveSlide=0;
}
else
{
this.nextActiveSlide= this.currentActiveSlide+1;
}
}
progress=0;
setTimeout(this.progress_bar,500);
$('.current_slide').html(this.currentActiveSlide+1+" / "+this.slides.length);
},
progress_bar:function(){
if(progress<110)
{
if(mouseover==false)
{
progress+=2;
$('.progress-bar').css('width',progress+"%");
}
setTimeout(this.progress_bar,200);
}
else
{
$('.progress-bar').css('width',"0%");
setTimeout(this.next,400);
}
},
handleSlideChange(val) {
rotation1=false;
let direction;
const calculatedNextSlide = this.currentActiveSlide + val;
if (val > 0) {
direction = "next";
} else {
direction = "previous";
}
if (direction === "next" && calculatedNextSlide < this.slides.length) {
this.currentActiveSlide += val;
} else if (direction === "next") {
this.currentActiveSlide = 0;
} else if (direction === "previous" && calculatedNextSlide < 0) {
this.currentActiveSlide = this.slides.length - 1;
} else {
this.currentActiveSlide += val;
}
if(this.currentActiveSlide==this.slides.length)
{
this.currentActiveSlide = 0;
this.nextActiveSlide= 1;
}
else
{
if(this.currentActiveSlide==this.slides.length-1)
{
this.nextActiveSlide=0;
}
else
{
this.nextActiveSlide= this.currentActiveSlide+1;
}
}
$('.current_slide').html(this.currentActiveSlide+1+" / "+this.slides.length);
setTimeout(function(){
if(rotation1==false)
{
rotation1=true;
}
},5000);
progress=0;
this.progress_bar;
// setTimeout(this.progress_bar,500);
}
}
});
$(document).on("mouseover",".main__slider",function(){
mouseover=true;
})
$(document).on("mouseout",".main__slider",function(){
mouseover=false;
})
</script>
</body>
</html>