<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<link rel="shortcut icon" type="x-icon" href="./assets/images/logo 2.png">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<!-- Typewriter -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/TypewriterJS/2.17.0/core.min.js" integrity="sha512-o6alMAMTI5qAmVC1UvuRPgTl3UOOkP8NZ6212+rq1Oslsuy8Owt9r5Z0Wu0LNxpw/Q8N8ToGiyovHV+kyOulxg==" crossorigin="anonymous"></script>
<!-- JQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
<!-- AOS CSS -->
<!-- AOS JS -->
<!-- counter up files -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.min.js"></script>
<!-- My Colors -->
<link rel="stylesheet" href="assets/css/colors.css">
<!-- My Scroll -->
<link rel="stylesheet" href="assets/css/scroll.css">
<!-- My Fonts -->
<link rel="stylesheet" href="assets/css/fonts.css">
<!-- Hover -->
<link rel="stylesheet" href="assets/plugins/hover/css/hover.css">
<!-- Second hover -->
<link rel="stylesheet" href="keyfactors.css">
<!-- services section -->
<link rel="stylesheet" href="services2.css">
<!-- tree -->
<link rel="stylesheet" href="tree.css">
<!-- contact responsive -->
<link rel="stylesheet" href="contact_resp.css">
<!-- slider section -->
<link rel="stylesheet" href="slider.css">
<!-- box in aboutus -->
<link rel="stylesheet" href="style1.css">
<!-- footer styling -->
<link rel="stylesheet" href="footer_style.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<!-- Fontawesome -->
<script src="https://kit.fontawesome.com/23901fd2f3.js" crossorigin="anonymous"></script>
<title>Home | Alogic Data</title>
<style>
body {
font-family: primary-regular;
overflow-x: hidden;
}
@media screen and (min-width:768px) {
.h-md-100 {
height: 100% !important;
}
}
@media screen and (max-width: 350px) {
.splitbox.right p {
font-size: 12px;
}
.pattern-yellow {
font-size: calc(1rem) !important;
}
.splitbox.left p {
font-size: 14px;
}
}
.myheight {
height: calc(100% - 72px);
}
.full-box {
height: 100vh;
width: auto;
}
.my_btn {
color: white;
/* background-color: var(--my_yellow); */
background-color: #0e5493;
font-family: primary-semibold;
transition: background-color 500ms ease;
}
.my_btn:hover {
color: white;
background-color: black;
}
.my_btn:active {
transform: scale(0.98);
}
.my_btn:focus {
box-shadow: 0 0 0 0.25rem rgb(0 0 0 / 25%);
}
.my_btn2 {
color: white;
background-color: navy;
font-family: primary-semibold;
transition: background-color 500ms ease;
}
.my_btn2:hover {
color: white;
background-color: black;
}
.my_btn2:active {
transform: scale(0.98);
}
.my_btn2:focus {
box-shadow: 0 0 0 0.25rem rgb(0 0 0 / 25%);
}
.bg {
background: linear-gradient(rgb(0, 0, 0, .75), rgb(0, 0, 0, .75)), url(assets/images/split1.png);
/* background:#0e5493; */
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.margin_top {
margin-top: 10rem;
}
.particles_bg {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.card-title {
font-family: primary-bold;
color: navy;
}
.card {
border-radius: .5rem;
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
border: none;
}
#one {
background: url(assets/images/learning2.png), white;
background-repeat: no-repeat;
background-position: center;
background-size: auto 100%;
transition: background-size 500ms ease;
}
#two {
background: url(assets/images/learning3.png), white;
background-repeat: no-repeat;
background-position: center;
background-size: auto 100%;
transition: background-size 500ms ease;
}
#three {
background: url(assets/images/learning10.png), white;
background-repeat: no-repeat;
background-position: center;
background-size: auto 100%;
transition: background-size 500ms ease;
}
#four {
background: url(assets/images/creative.png), linear-gradient(to bottom, #e2e2ff 25%, #f6f6ff);
background-repeat: no-repeat;
background-position: center;
background-size: 100% auto;
transition: background-size 500ms ease;
}
#one:hover,
#two:hover,
#three:hover,
#four:hover {
background-size: auto 110%;
}
.card .card-body {
color: black;
border-radius: .5rem;
visibility: hidden;
background: rgb(244, 168, 58, .80);
}
.card:hover .card-body {
visibility: visible;
}
.pattern-black {
width: fit-content;
font-family: primary-extrabold !important;
font-size: calc(1.375rem + 2vw);
background-image: url(assets/images/pattern-black.jpg);
background-position: bottom left;
background-size: cover;
-webkit-background-clip: text;
color: transparent !important;
}
.pattern-yellow {
width: fit-content;
font-family: primary-extrabold !important;
font-size: calc(1.375rem + 2vw);
background-image: url(assets/images/pattern-yellow.jpg);
background-position: center left;
background-size: cover;
-webkit-background-clip: text;
color: transparent !important;
}
#typewriter {
font-size: calc(1.375rem + 2vw);
}
/* About Us */
.splitbox-container {
height: 100%;
width: 100%;
overflow: hidden;
position: relative;
}
.splitbox {
height: 100%;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
}
.splitbox h1 {
font-family: primary-bold;
}
.splitbox p a {
text-decoration: none;
color: #baeaea;
font-family: primary-bold;
}
.splitbox .lineHeight {
font-size: large;
line-height: 1.7rem;
}
.splitbox.left {
width: 100%;
left: 0;
top: 0;
color: black;
transition: all 1s ease;
padding-right: 10%;
background-size: 100% 100% !important;
}
.splitbox.left .innerbox {
height: 80%;
}
.splitbox.left .innerbox p {
color: #baeaea;
}
.splitbox.left .innerbox h1 {
color: white;
}
.splitbox.left .innerbox .aboutus_block {
border: 1px solid #baeaea;
margin-top: 8rem !important;
}
.splitbox.right {
width: 100%;
transform: translateX(90%);
right: 0;
top: 0;
/* color: #f4a83a; */
color: white;
background-color: #07151e;
transition: all 1s ease;
padding-right: 10%;
}
.splitbox.right:hover {
transform: translateX(10%);
}
.splitbox.right .innerbox2 {
height: 80%;
}
.splitbox.right h1 {
color: white;
}
.splitbox.right .innerbox2 p {
color: #baeaea;
}
.inner {
display: flex;
width: 10%;
justify-content: center;
align-items: center;
}
.innerbox2 {
width: 90%;
opacity: 0;
transition: all 1s ease;
}
.splitbox.right:hover .innerbox2 {
opacity: 1;
}
.icon {
width: auto;
height: 100%;
}
.splitbox.right i {
font-size: calc(1.375rem + 2vw);
animation: jump 500ms ease-in-out alternate infinite;
}
.h_100_aboutus {
height: 100vh;
}
.icon_font {
font-size: 12px !important;
}
@keyframes jump {
from {
transform: translateX(10px);
}
to {
transform: translateX(0);
}
}
/* carousel border styles */
.p1 {
/* color: #185891; */
color: white;
}
.i_con {
width: 80px;
}
.carousel-inner .carousel-item {
box-shadow: 0 20px 35px rgba(0, 0, 0, 0.3);
/* border-radius: 20px; */
overflow: hidden;
padding: 0.3rem 0.3rem;
}
.carousel-inner .carousel-item:before {
/* #204b7d */
content: "";
background-image: conic-gradient(#5098d3 30deg,
transparent 120deg);
height: 150%;
width: 150%;
position: absolute;
left: -25%;
top: -25%;
animation: rotate 2s infinite linear;
z-index: -1;
}
@keyframes rotate {
100% {
transform: rotate(-360deg);
}
}
.carousel-inner .carousel-item:after {
content: "";
height: 100%;
width: 100%;
position: absolute;
}
.icons {
display: flex;
flex-direction: column;
align-items: center;
background-color: black;
justify-content: center;
z-index: 1;
height: 100%;
width: 100%;
padding: 2rem 2rem;
}
.card {
background-color: black;
box-shadow: 0 20px 35px rgba(0, 0, 0, 0.75);
/* border-radius: 20px; */
overflow: hidden;
padding: 0.2rem 0.2rem;
}
.card:before {
/* #204b7d */
content: "";
background-image: conic-gradient(#5098d3 30deg,
transparent 120deg);
height: 150%;
width: 150%;
position: absolute;
left: -25%;
top: -25%;
animation: rotate 20s infinite linear;
z-index: 1;
}
@keyframes rotate {
100% {
transform: rotate(-360deg);
}
}
.card:after {
content: "";
height: 100%;
width: 100%;
position: absolute;
}
@media only screen and (max-width:576px) {
.splitbox .lineHeight {
font-size: medium;
line-height: 1.5;
}
.h_100_aboutus {
height: 160vh !important;
}
.splitbox.left {
background-size: cover !important;
}
.mh {
font-size: 32px !important;
font-weight: bold;
}
}
</style>
</head>
<body>
<style>
.hvr-underline-from-left:before {
background: #1163a9;
}
.nav-link {
border-left: 0.15rem solid;
border-color: transparent;
}
.nav-link:hover {
color: white !important;
}
.nav-link.active:before {
right: 0;
background: #1163a9;
}
.nav-link.active {
color: white !important;
}
.nav-link:active {
transform: scale(0.98);
}
.navbar-dark .navbar-brand {
/* color: #0e5493 !important; */
width: 4rem;
animation: rotation 5s infinite ease;
}
.navbar-dark .navbar-brand:hover {
animation-play-state: paused;
}
@keyframes rotation {
from {
transform: rotateY(360deg);
}
to {
transform: rotateY(0deg);
}
}
.bg_navy {
background-color: rgb(0, 0, 0, 1);
}
@media only screen and (max-width:576px) {
#mynav {
background-color: rgb(0, 0, 0, 1);
}
}
</style>
<nav id="mynav" class="navbar fixed-top navbar-expand-md navbar-dark py-2">
<div class="container">
<a href="
index.php"><img src="assets/images/logo 2.png" alt="" class="navbar-brand"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 ms-auto mb-2 mb-lg-0 primary-semibold bg-sm-dark">
<li class="nav-item mb-2 mb-md-0">
<a id="home" class="nav-link hvr-underline-from-left" href="index.php">Home</a>
</li>
<li class="nav-item mb-2 mb-md-0">
<a id="E-learning" class="nav-link hvr-underline-from-left" href="E-learning.php">e-Learning</a>
</li>
<li class="nav-item mb-2 mb-md-0">
<a id="Technology" class="nav-link hvr-underline-from-left" href="Technology.php">Technology</a>
</li>
<li class="nav-item mb-2 mb-md-0">
<a id="industry" class="nav-link hvr-underline-from-left" href="industry.php">Industry Solutions</a>
</li>
<!-- <li class="nav-item mb-2 mb-md-0">
<a id="projects" class="nav-link hvr-underline-from-left" href="projects.php">Clients</a>
</li> -->
<li class="nav-item mb-2 mb-md-0">
<a id="ourworks" class="nav-link hvr-underline-from-left" href="ourworks.php">Our Works</a>
</li>
<li class="nav-item mb-2 mb-md-0">
<a id="contact" class="nav-link hvr-underline-from-left" href="contactUs.php">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav> <div class="container-fluid full-box bg position-relative p-0">
<div id="particles-js" class="particles_bg"></div>
<div class="container h-100">
<div class="gutter py-3"></div>
<div class="row justify-content-center align-items-center myheight">
<div data-aos="fade" data-aos-duration="1000" class="col-12 text-center text-white">
<p class="h4 primary-bold" style="color:white;">Think Big. We do</p>
<p class="h1 primary-bold" id="typewriter" style="color:var(--my_yellow);"></p>
<p class="h1 primary-bold">Solutions</p>
<p>Get whats finest for your Business' Growth and take Your work Digitally with us...</p>
<a href="#aboutscr" class="btn my_btn">EXPLORE</a>
</div>
</div>
</div>
<!-- <div class="container h-auto h-md-100 py-5 py-md-0">
</div> -->
<!-- Second section. Contains about us -->
<div id="aboutscr" class="container-fluid h_100_aboutus p-0">
<div class="splitbox-container">
<div id class="splitbox left" style="background: linear-gradient(rgb(0, 0, 0, 0.75), rgb(0, 0, 0, 0.75)), url(assets/images/aboutus.jpg);">
<div class="innerbox ps-3 ps-md-5 py-3 pe-2 pb-3">
<h1 data-aos="fade-right" data-aos-duration="1000">About Us</h1>
<p data-aos="fade-up" data-aos-duration="1000" class="lineHeight">AlogicData was established in 2017. In last 4 years we have grown from 7 people company to vibrant team of 50+ employees with 35+ clients across 4 continents.<br>
<br>We help organizations looking to train their employees, partners, and customers switch to web and mobile-based training. <br> Our solutions are divided into two categories — <br><a class="text-light fs-5" href="">e-Learning design solutions</a> and <a class="text-light fs-5" href="">Technology solutions</a>.
</p>
<div data-aos="fade-up" data-aos-duration="1000" class="user" style="background-color:#23282d!important;">
<p data-aos="fade-up" data-aos-duration="1000" class="lineHeight">For most of our customers, we’re more than just a vendor. We’ve been their long-term strategic partner, and they have been engaging with us for nearly 5 years. And why wouldn’t they? They have reasons to see the value in us – our adherence to processes, the flexibility we offer them, the trust we inspire in them, the team they get to work with, the innovation focus they see in us, and a whole lot more!
</p>
</div>
</div>
</div>
<div class="splitbox right">
<div class="inner">
<div class="icon">
<i class="fas fa-chevron-left"></i>
</div>
</div>
<div class="innerbox2 py-3 ps-3 ps-md-0 pe-2">
<h1>Why Choose Us?</h1>
<p class="lineHeight">AlogicData is different because we offer an integrated solution, which will cater to every one of your business needs. While our core strength is our people, we have invested in technology, created infrastructure, and put into place processes to ease every aspect of your journey.
<br> <br>We offer competitive salaries to attract top notch talent, and continuous training for in-house resources. AlogicData adheres to a strict self-imposed, no subcontract policy and has robust mechanisms to collect customer feedback, so we are improving all the time.
</p>
<div class="row align-items-center">
<div class="col-sm-12 col-10 text-center">
<div data-aos="fade" data-aos-duration="1000" class="row justify-content-sm-evenly pt-4 pt-md-5 align-items-center d-sm-flex">
<div class="col-6 col-md-1 pt-2">
<img src="assets/images/icons/icon-33.png" alt="" class="img-fluid">
<div class="col-12 mt-3 icon_font d-sm-none">24 / 7 support. 365 days a year</div>
</div>
<div class="col-6 col-md-1 pt-2 pb-3 pb-sm-0">
<img src="assets/images/icons/icon-22.png" style="width: 90%;" alt="" class="img-fluid pb-1 pb-sm-0">
<div class="col-12 mt-3 icon_font d-sm-none">99 % Uptime</div>
</div>
<div class="col-6 col-md-1 pt-4 pt-sm-2 pb-3 pb-sm-0">
<img src="assets/images/icons/icon-11.png" style="width: 75%;" alt="" class="img-fluid">
<div class="col-12 mt-2 icon_font d-sm-none">Quality Check Every Quarter</div>
</div>
<div class="col-6 col-md-1 pt-5 pt-sm-2">
<img src="assets/images/icons/icon-46.png" alt="" class="img-fluid">
<div class="col-12 mt-2 icon_font d-sm-none">Tech-enabled, Integrated, Collaborative Approach</div>
</div>
</div>
</div>
<div class="col-8 col-sm-12 height_we_are">
<div data-aos="fade" data-aos-duration="1000" class="row justify-content-evenly pt-md-2 align-items-center d-none d-sm-flex">
<div class="col-12 col-md-2 text-center pt-sm-0 ">
<p style="font-size: smaller; padding-left:4rem; ">Quality Check Every Quarter</p>
</div>
<div class="col-12 col-md-2 text-center pt-sm-0 mt-0 pt-3">
<p style="font-size: smaller;" class="ps-sm-3">99% Uptime</p>
</div>
<div class="col-12 col-md-2 text-center">
<p style="font-size: smaller;" class="pe-sm-3">24 / 7 support. 365 days a year</p>
</div>
<div class="col-12 col-md-2 text-center">
<p style="font-size: smaller;" class="pe-sm-5">Tech-enabled, Integrated, Colaborative Approach</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- third Section Which shows Key Factors for our organisation -->
<div class="services" style="background: linear-gradient(rgb(0, 0, 0, 0.75), rgb(0, 0, 0, 0.75)),
url(assets/images/5053309.jpg);">
<div class="col-12 d-flex justify-content-center pb-0 pt-5">
<p class="h1 mh mb-0 p-2 px-5" style="color: #4193e4; font-family:cursive">Key Factors</p>
</div>
<div class="square">
<span></span>
<span></span>
<span></span>
<div class="content">
<h2 class="mb-3" style="color: #83b8e8;">Innovation</h2><br>
<p style="color: white;" class="pb-5">We conceptualize, design and architect compelling learning experiences for the
web and mobile world.
</p>
</div>
</div>
<div class="square">
<span></span>
<span></span>
<span></span>
<div class="content">
<h2 style="color: #83b8e8;">Team</h2><br>
<p class="text-center" style="color: white; text-align:center!important;">We've done it with the combined creativity of content developers, instructional designers, <br> UI designers,
software
engineers and strategic thinkers.
</p>
</div>
</div>
<div class="square">
<span></span>
<span></span>
<span></span>
<div class="content">
<h2 style="color: #83b8e8;">Excellence</h2><br>
<p style="color: white;">Excellence is not a coincidence. We've delivered excellent outcomes through smart ideas and meticulous
execution.</p>
</div>
</div>
</div>
<!-- Fourth Section it display The services provided. -->
<div class="section_services" style="background: linear-gradient(rgb(0, 0, 0, 0.75), rgb(0, 0, 0, 0.75)),
url(assets/images/5053309.jpg)!important;">
<div class=" heading" style="background:transparent;">
<p class="p-2 h2 mh px-5 text-center" style="color: #4193e4; font-family:cursive; display:inline;">Explore Our Learning Solutions</p>
</div>
<div class="container-fluid">
<div class="row d-sm-none">
<div class=" col-6 col-md-4 col-lg-3 p-3 p-sm-5">
<div class="card">
<div class="icons">
<img class="img-fluid i_con" src="assets/images/icon 2/e learning.png" alt="">
<p class="p1 pt-3 text-center">Custom <br> e-Learning Solutions <br><br></p>
</div>
</div>
</div>
<div class=" col-6 col-md-4 col-lg-3 p-3 p-sm-5">
<div class=" card">
<div class="icons">
<img class="img-fluid i_con" src="assets/images/icon 2/custom-game--based-e--learning.png" alt="">
<p class="p1 pt-3 text-center"> Game <br> Based <br> e-Learning <br><br></p>
</div>
</div>
</div>
<div class=" col-6 col-md-4 col-lg-3 p-3 p-sm-5">
<div class="card">
<div class="icons">
<img class="img-fluid i_con" src="assets/images/icon 2/video-&-animation.png" alt="">
<p class="p1 pt-3 text-center">Video <br> and <br> Animation <br></p>
</div>
</div>
</div>
<div class=" col-6 col-md-4 col-lg-3 p-3 p-sm-5">
<div class="card">
<div class="icons text-center">
<img class="img-fluid i_con" src="assets/images/icon 2/website-&-app.png" alt="">
<p class="p1 pt-3 text-center">Websites <br> and <br> Apps <br></p>
</div>
</div>
</div>
<div class=" col-6 col-md-4 col-lg-3 p-3 p-sm-5">
<div class="card">
<div class="icons">
<img class="img-fluid i_con" src="assets/images/icon 2/html 5.png" alt="">
<p class="p1 pt-3 text-center">Flash to <br> HTML5 Conversion<br> <br></p>
</div>
</div>
</div>
<div class=" col-6 col-md-4 col-lg-3 p-3 p-sm-5">
<div class="card">
<div class="icons">
<img class="img-fluid i_con" src="assets/images/icon 2/moodle-LMS.png" alt="">
<p class="p1 pt-3 text-center">Moodle <br> LMS<br><br><br></p>
</div>
</div>
</div>
<div class=" col-6 col-md-4 col-lg-3 p-3 p-sm-5">
<div class="card">
<div class="icons">
<img class="img-fluid i_con" src="assets/images/icon 2/subject-matter-expert.png" alt="">
<p class="p1 pt-3 text-center">Subject <br> Matter Expert<br><br></p>
</div>
</div>
</div>
<div class=" col-6 col-md-4 col-lg-3 p-3 p-sm-5">
<div class="card">
<div class="icons">
<img class="img-fluid i_con" src="assets/images/icon 2/branding-and-design.png" alt="">
<p class="p1 pt-3 text-center">Branding <br> and <br> Designing<br><br></p>
</div>
</div>
</div>
<div class=" col-6 col-md-4 col-lg-3 p-3 p-sm-5">
<div class="card">
<div class="icons">
<img class="img-fluid i_con" src="assets/images/icon 2/micro learning.png" alt="">
<p class="p1 pt-3 text-center">Micro-<br> Learning<br></p>
</div>
</div>
</div>
<div class=" col-6 col-md-4 col-lg-3 p-3 p-sm-5">
<div class="card">
<div class="icons">
<img class="img-fluid i_con" src="assets/images/icon 2/gamifications.png" alt="">
<p class="p1 pt-3 text-center">Virtual <br> Reality<br></p>
</div>
</div>
</div>
<div class=" col-6 col-md-4 col-lg-3 p-3 p-sm-5">
<div class="card">
<div class="icons">
<img class="img-fluid i_con" src="assets/images/icon 2/augmentative-reality.png" alt="">
<p class="p1 pt-3 text-center"><br>Augmantative <br> Reality<br></p>
</div>
</div>
</div>
<div class=" col-6 col-md-4 col-lg-3 p-3 p-sm-5">
<div class="card">
<div class="icons">
<img class="img-fluid i_con" src="assets/images/icon 2/3d design.png" alt="">
<p class="p1 pt-3 text-center">3D Design <br> Services<br></p>
</div>
</div>
</div>
<div class=" col-6 col-md-4 col-lg-3 p-3 p-sm-5">
<div class="card">
<div class="icons">
<img class="img-fluid i_con" src="assets/images/icon 2/sound-mixing-and-ediing.png" alt="">
<p class="p1 pt-3 text-center">Sound Mixing <br> and Editing<br></p>
</div>
</div>
</div>
<div class=" col-6 col-md-4 col-lg-3 p-3 p-sm-5">
<div class="card">
<div class="icons">
<img class="img-fluid i_con" src="assets/images/icon 2/voice recording.png" alt="">
<p class="p1 pt-3 text-center"><br> Voice <br>Recording<br></p>
</div>
</div>
</div>
<div class=" col-6 col-md-4 col-lg-3 p-3 p-sm-5">
<div class="card">
<div class="icons">
<img class="img-fluid i_con" src="assets/images/icon 2/sound.png" alt="">
<p class="p1 pt-3 text-center">Sound <br>Making<br></p>
</div>
</div>
</div>
<div class=" col-6 col-md-4 col-lg-3 p-3 p-sm-5">
<div class="card">
<div class="icons">
<img class="img-fluid i_con" src="assets/images/icon 2/training.png" alt="">
<p class="p1 pt-3 text-center"><br> Training <br></p>
</div>
</div>
</div>
<div class="col-12 parting "></div>
</div>
<div class="row d-none d-sm-flex">
<div class=" col-6 col-md-4 col-lg-3 p-3 p-sm-5">
<div class="card">
<div class="icons">
<img class="img-fluid i_con" src="assets/images/icon 2/e learning.png" alt="">
<p class="p1 pt-3 text-center">Custom <br> e-Learning <br> Solutions<br></p>
</div>
</div>
</div>
<div class=" col-6 col-md-4 col-lg-3 p-3 p-sm-5">
<div class=" card">
<div class="icons">
<img class="img-fluid i_con" src="assets/images/icon 2/custom-game--based-e--learning.png" alt="">
<p class="p1 pt-3 text-center"> Game <br> Based <br> e-Learning <br></p>
</div>
</div>
</div>
<div class=" col-6 col-md-4 col-lg-3 p-3 p-sm-5">
<div class="card">
<div class="icons">
<img class="img-fluid i_con" src="assets/images/icon 2/video-&-animation.png" alt="">
<p class="p1 pt-3 text-center">Video <br> and <br> Animation <br></p>
</div>
</div>
</div>
<div class=" col-6 col-md-4 col-lg-3 p-3 p-sm-5">
<div class="card">
<div class="icons text-center">
<img class="img-fluid i_con" src="assets/images/icon 2/website-&-app.png" alt="">
<p class="p1 pt-3 text-center">Websites <br> and <br> Apps <br></p>
</div>
</div>
</div>
<div class=" col-6 col-md-4 col-lg-3 p-3 p-sm-5">
<div class="card">
<div class="icons">
<img class="img-fluid i_con" src="assets/images/icon 2/html 5.png" alt="">
<p class="p1 pt-3 text-center">Flash to <br> HTML5 Conversion<br> <br></p>
</div>
</div>
</div>
<div class=" col-6 col-md-4 col-lg-3 p-3 p-sm-5">
<div class="card">
<div class="icons">
<img class="img-fluid i_con" src="assets/images/icon 2/moodle-LMS.png" alt="">
<p class="p1 pt-3 text-center">Moodle <br> LMS<br><br></p>
</div>
</div>
</div>
<div class=" col-6 col-md-4 col-lg-3 p-3 p-sm-5">
<div class="card">
<div class="icons">
<img class="img-fluid i_con" src="assets/images/icon 2/subject-matter-expert.png" alt="">
<p class="p1 pt-3 text-center">Subject <br> Matter Expert<br><br></p>
</div>
</div>
</div>
<div class=" col-6 col-md-4 col-lg-3 p-3 p-sm-5">
<div class="card">
<div class="icons">
<img class="img-fluid i_con" src="assets/images/icon 2/branding-and-design.png" alt="">
<p class="p1 pt-3 text-center">Branding <br> and Designing <br><br></p>
</div>
</div>
</div>
<div class=" col-6 col-md-4 col-lg-3 p-3 p-sm-5">
<div class="card">
<div class="icons">
<img class="img-fluid i_con" src="assets/images/icon 2/micro learning.png" alt="">
<p class="p1 pt-3 text-center">Micro-<br> Learning<br></p>
</div>
</div>
</div>
<div class=" col-6 col-md-4 col-lg-3 p-3 p-sm-5">
<div class="card">
<div class="icons">
<img class="img-fluid i_con" src="assets/images/icon 2/gamifications.png" alt="">
<p class="p1 pt-3 text-center">Virtual <br> Reality<br></p>
</div>
</div>
</div>
<div class=" col-6 col-md-4 col-lg-3 p-3 p-sm-5">
<div class="card">
<div class="icons">
<img class="img-fluid i_con" src="assets/images/icon 2/augmentative-reality.png" alt="">
<p class="p1 pt-3 text-center">Augmentative <br> Reality<br></p>
</div>
</div>
</div>
<div class=" col-6 col-md-4 col-lg-3 p-3 p-sm-5">
<div class="card">
<div class="icons">
<img class="img-fluid i_con" src="assets/images/icon 2/3d design.png" alt="">
<p class="p1 pt-3 text-center">3D Design <br> Services<br></p>
</div>
</div>
</div>
<div class=" col-6 col-md-4 col-lg-3 p-3 p-sm-5">
<div class="card">
<div class="icons">
<img class="img-fluid i_con" src="assets/images/icon 2/sound-mixing-and-ediing.png" alt="">
<p class="p1 pt-3 text-center">Sound Mixing <br> and Editing<br></p>
</div>
</div>
</div>
<div class=" col-6 col-md-4 col-lg-3 p-3 p-sm-5">
<div class="card">
<div class="icons">
<img class="img-fluid i_con" src="assets/images/icon 2/voice recording.png" alt="">
<p class="p1 pt-3 text-center">Voice <br>Recording<br></p>
</div>
</div>
</div>
<div class=" col-6 col-md-4 col-lg-3 p-3 p-sm-5">
<div class="card">
<div class="icons">
<img class="img-fluid i_con" src="assets/images/icon 2/sound.png" alt="">
<p class="p1 pt-3 text-center">Sound <br>Making<br></p>
</div>
</div>
</div>
<div class=" col-6 col-md-4 col-lg-3 p-3 p-sm-5">
<div class="card">
<div class="icons">
<img class="img-fluid i_con" src="assets/images/icon 2/training.png" alt="">
<p class="p1 pt-3 text-center"><br> Training <br></p>
</div>
</div>
</div>
<div class="col-12 parting "></div>
</div>
</div>
</div>
<!-- this section shows our main two fields work -->
<!-- <div class="section_trees" style=" background: linear-gradient(rgb(0, 0, 0, 0.3), rgb(0, 0, 0, 0.3)),
url(assets/images/new-2-bg.png) !important;
background-size:100% 100%!important;">
<div class="tree">
<h1 class="first_tree">Elearning</h1>
<div class="timeline">
<ul>
<li id="e-learn-1">
<div class="timeline-content">
<h1>Use scenerio based learning</h1>
<p> </p>
</div>
</li>
<li id="e-learn-2">
<div class="timeline-content">
<h1>Keep training curriculum role based and relevent</h1>
<p></p>
</div>
</li>
<li id="e-learn-3">
<div class="timeline-content">
<h1>Incorporate visual mediums such as 3D graphics and simultions</h1>
<p></p>
</div>
</li>
<li id="e-learn-3">
<div class="timeline-content">
<h1>Emotional Engagement: Use the narrative which puts the learner at the center </h1>
<p></p>
</div>
</li>
<li id="e-learn-4">
<div class="timeline-content">
<h1>Add interativity tools such as gamification for reinforcement</h1>
<p></p>
</div>
</li>
<li id="e-learn-4">
<div class="timeline-content">
<h1>Use microlearning to deliver critical concepts</h1>
<p></p>
</div>
</li>
</ul>
</div>
</div>
<div class="tree">
<h1 class="first_tree">Technology</h1>
<div class="timeline">
<ul>
<li>
<div class="timeline-content">
<h1>Heading 1</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur tempora ab
laudantium
voluptatibus aut eos placeat laborum, quibusdam exercitationem labore.</p>
</div>
</li>
<li>
<div class="timeline-content">
<h1>Heading 2</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur tempora ab
laudantium
voluptatibus aut eos placeat laborum, quibusdam exercitationem labore.</p>
</div>
</li>
<li>
<div class="timeline-content">
<h1>Heading 3</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur tempora ab
laudantium
voluptatibus aut eos placeat laborum, quibusdam exercitationem labore.</p>
</div>
</li>
<li>
<div class="timeline-content">
<h1>Heading 4</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur tempora ab
laudantium
voluptatibus aut eos placeat laborum, quibusdam exercitationem labore.</p>
</div>
</li>
</ul>
</div>
</div>
</div> -->
<!-- this section covers our work history -->
<section style="background:linear-gradient(rgb(0, 0, 0, 0.75), rgb(0, 0, 0, 0.75)),url(assets/images/5053309.jpg)!important;">
<div class="d-flex justify-content-center align-items-center pt-5">
<p class=" h1 p-2 px-5 mh mb-0 " style="color: #4193e4;font-family:cursive">Intresting Facts</p>
</div>
<div class=" counter-up pt-5">
<div class="content2">
<div class="box2">
<div class="icon"><i class="fas fa-history"></i></div>
<div class="d-flex">
<div class="counter">1000</div> <span class="text-white fs-1 fw-bold ps-1 pt-1">+</span>
</div>
<div class="text fw-bold">Learning Complete</div>
</div>
<div class="box2">
<div class="icon"><i class="fas fa-gift"></i></div>
<div class="d-flex">
<div class="counter">250</div> <span class="text-white fs-1 ps-1 fw-bold pt-1">+</span>
</div>
<div class="text fw-bold">Completed Projects</div>
</div>
<div class="box2">
<div class="icon"><i class="fas fa-users"></i></div>
<div class="d-flex">
<div class="counter">35</div> <span class="text-white fs-1 fw-bold ps-1 pt-1">+</span>
</div>
<div class="text fw-bold">Happy Clients</div>
</div>
</div>
</div>
</section>
<!-- Clients Section -->
<section style=" background: linear-gradient(rgb(0, 0, 0, 0.75), rgb(0, 0, 0, 0.75)),url(assets/images/5053309.jpg); padding-bottom:5rem;">
<div class="container pt-sm-5">
<div class="row justify-content-center">
<div class="col-12 d-flex flex-column align-items-center">
<p class="h1 p-2 mh px-5 mb-3" style="color: #4193e4; font-family:cursive">Our Clients
</p>
</div>
<div class="col-12 col-md-7">
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-bs-ride="carousel" data-interval="500">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="assets/images/images/1.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="assets/images/images/2.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="assets/images/images/3.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="assets/images/images/4.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="assets/images/images/5.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="assets/images/images/6.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="assets/images/images/7.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="assets/images/images/8.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="assets/images/images/9.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="assets/images/images/10.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="assets/images/images/11.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="assets/images/images/12.jpg" class="d-block w-100" alt="...">
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleFade" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="container">
<div class="row">
<div class="footer-col">
<h4>Navigations</h4>
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="E-learning.php">e-Learning</a></li>
<li><a href="Technology.php">Technology</a></li>
<li><a href="industry.php">Industry Solutions</a></li>
<li><a href="ourworks.php">Our Works</a></li>
<li><a href="contactUs.php">Contact Us</a></li>
</ul>
</div>
<div class="footer-col col-sm-3 col-12">
<h4>Services</h4>
<ul>
<li><a href="#">Custom
e-Learning Solutions</a></li>
<li><a href="#">Game
Based e-Learning</a></li>
<li><a href="#">Video
and Animation</a></li>
<li><a href="#">Websites
and Apps</a></li>
<li><a href="#">Branding
and Designing</a></li>
<li><a href="#">Moodle
LMS</a></li>
<li><a href="#">Sound Mixing and
Editing</a></li>
<li><a href="#">Augmantative
Reality</a></li>
<li><a href="#">Virtual
Reality</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Contact Us</h4>
<ul>
<li><a href="#">
<li><a href="#">
<i class="fas fa-phone-volume"></i> +91-7592-471667, <br> +91-8108771792</a></li>
<li><a href="#"></a></li>
</ul>
</div>
<div class="footer-col">
<h4>Find Us</h4>
<div class="social-links">
<a href="https://www.linkedin.com/company/alogicdata-bhopal/about/"><i class="fab fa-linkedin-in"></i></a>
<a href="https://www.facebook.com/alogicdata/"><i class="fab fa-facebook-f"></i></a>
<a href="https://www.instagram.com/alogicdata/?hl=en"><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
</div>
</footer>
<!-- <div class="container-fluid h-auto h-md-100 py-5 py-md-0" style="background-color:#f1f1f1;">
<div class="row align-items-center h-100">
<div class="col-12">
<div class="row justify-content-center">
<div class="col-12 mb-4">
<h1 class="primary-bold"><span class="pattern">Our</span> Services</h1>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3 py-3 py-md-0">
<div id="one" class="card">
<div class="card-body">
<h5 class="card-title">Custom Game-based e-Learning</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn my_btn2">Go somewhere</a>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3 py-3 py-md-0">
<div id="two" class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn my_btn2">Go somewhere</a>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3 py-3 py-md-0">
<div id="three" class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn my_btn2">Go somewhere</a>
</div>
</div>
</div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3 py-3 py-md-0">
<div id="four" class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn my_btn2">Go somewhere</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div> -->
</div>
<script type="text/javascript" src="assets/plugins/particles/particles.js"></script>
<script type="text/javascript" src="assets/plugins/particles/app.js"></script>
<!--Start of Tawk.to Script-->
<script type="text/javascript">
var Tawk_API = Tawk_API || {},
Tawk_LoadStart = new Date();
(function() {
var s1 = document.createElement("script"),
s0 = document.getElementsByTagName("script")[0];
s1.async = true;
s1.src = 'https://embed.tawk.to/60fff47c649e0a0a5cce2636/1fbjt62ah';
s1.charset = 'UTF-8';
s1.setAttribute('crossorigin', '*');
s0.parentNode.insertBefore(s1, s0);
})();
</script>
<!--End of Tawk.to Script-->
<script>
//AOS Initialization
AOS.init();
$('.gutter').height($('#mynav').height());
$('#home').addClass('active');
//typewriter
var app1 = document.getElementById('typewriter');
var contact_typewriter = new Typewriter(app1, {
delay: 50,
loop: true
});
contact_typewriter.typeString('e-Learning')
.pauseFor(2500)
.deleteAll()
.typeString('Technology')
.pauseFor(2500)
.deleteAll()
.typeString('Multimedia')
.pauseFor(2500)
.deleteAll()
.typeString('Digital')
.pauseFor(2500)
.start();
$(window).on("load", function() {
mainNav();
$(window).scroll(function() {
mainNav();
});
function mainNav() {
var top = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
if (top > 40) $('#mynav').addClass('bg_navy');
else $('#mynav').removeClass('bg_navy');
}
});
// changing the color of progress bar on scrolling
// $(window).scroll(function() {
// var scroll = $(window).scrollTop(),
// dh = $(document).height(),
// wh = $(window).height();
// scrollPercent = (scroll / (dh - wh)) * 100;
// $("#myBar").css("height", scrollPercent + "%");
// });
// window.onscroll = function() {
// myFunction()
// };
// function myFunction() {
// var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
// // var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
// // var scrolled = (winScroll / height) * 100;
// var scrolled = winScroll - document.querySelector(".section_trees").offsetTop;
// document.getElementById("myBar").style.height = scrolled + "%";
// }
// resoponsive contact
$(document).ready(function() {
$('.counter').counterUp({
delay: 10,
time: 1200
});
});
// slider animation
// $("#slideshow > div:gt(0)").hide();
// setInterval(function() {
// $('#slideshow > div:first')
// .fadeOut(1000)
// .next()
// .fadeIn(1000)
// .end()
// .appendTo('#slideshow');
// }, 3000);
</script>
</body>
</html>