Skip to content

U
unacademy_html
Commit 9e3f240c by Anoop
Options

video tabs

parent 69694df8
Showing with 156 additions and 72 deletions
css/main.css
This source diff could not be displayed because it is too large. You can view the blob instead.
css/main.css.map
This source diff could not be displayed because it is too large. You can view the blob instead.
gallery.html
......@@ -1748,7 +1748,7 @@
<div class="opinion-header-border"></div>
</div>
</header>
</div>
......@@ -1816,30 +1816,38 @@
<div class="eg-students slider_swiperShikshodaya2">
<div class="swiper-wrapper">
<div class="eg-studentsItem swiper-slide">
<img class="card-img" src="http://unacademy.envigo-tech.co.uk/shikshodaya/wp-content/uploads/sites/3/2022/06/Image-2.jpg" alt="">
<img class="card-img"
src="http://unacademy.envigo-tech.co.uk/shikshodaya/wp-content/uploads/sites/3/2022/06/Image-2.jpg"
alt="">
<div class="card-body">
<p class="card-text">Promoting STEM education to enhance innovation and employability</p>
</div>
</div>
<div class="eg-studentsItem swiper-slide">
<img class="card-img" src="http://unacademy.envigo-tech.co.uk/shikshodaya/wp-content/uploads/sites/3/2022/06/Image-2.jpg" alt="">
<img class="card-img"
src="http://unacademy.envigo-tech.co.uk/shikshodaya/wp-content/uploads/sites/3/2022/06/Image-2.jpg"
alt="">
<div class="card-body">
<p class="card-text">Promoting STEM education to enhance innovation and employability</p>
</div>
</div>
<div class="eg-studentsItem swiper-slide">
<img class="card-img" src="http://unacademy.envigo-tech.co.uk/shikshodaya/wp-content/uploads/sites/3/2022/06/Image-2.jpg" alt="">
<img class="card-img"
src="http://unacademy.envigo-tech.co.uk/shikshodaya/wp-content/uploads/sites/3/2022/06/Image-2.jpg"
alt="">
<div class="card-body">
<p class="card-text">Promoting STEM education to enhance innovation and employability</p>
</div>
</div>
<div class="eg-studentsItem swiper-slide">
<img class="card-img" src="http://unacademy.envigo-tech.co.uk/shikshodaya/wp-content/uploads/sites/3/2022/06/Image-2.jpg" alt="">
<img class="card-img"
src="http://unacademy.envigo-tech.co.uk/shikshodaya/wp-content/uploads/sites/3/2022/06/Image-2.jpg"
alt="">
<div class="card-body">
<p class="card-text">Promoting STEM education to enhance innovation and employability</p>
</div>
</div>
</div>
<div class="navigator">
......@@ -1849,7 +1857,121 @@
</div>
</div>
<div class="shisksodiya_tab-feats tab-container">
<div class="tab-btn-box">
<ul>
<li class="link btn-one active"><a href="javascript:void(0)">Impact</a></li>
<li class="link btn-two"><a href="javascript:void(0)">Stories</a></li>
<li class="link btn-three"><a href="javascript:void(0)">Our Initiative</a></li>
</ul>
</div>
<div class="tab-wraper">
<!-- first content -->
<div class="tab-content-box content-1">
<div class="tab-content">
<div class="counter-img">
<div class="lef-box">
<div class="img-box">
<img src="http://unacademy.envigo-tech.co.uk/shikshodaya/wp-content/uploads/sites/3/2022/06/tab-img2.png"
alt="img">
</div>
<div class="txt-box">
<h4>Number of</h4>
<h4>Girl's Empowered</h4>
</div>
</div>
<div class="right-box">
<div class="counter-box">
<ul>
<li>
<div class="o-c-box">
<div class="count">1</div>
</div>
<div class="o-c-box">
<div class="count">2</div>
</div>
<div class="o-c-box">
<div class="count">3</div>
</div>
<div class="o-c-box">
<div class="count">4</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tab-card-box">
<div class="tab-card">
<p><span>4</span>State</p>
<p><span>100+</span>Districts</p><br>
<p class="foot-text">MoU’s with State Governments</p>
</div>
<div class="tab-card">
<p><span>4</span>State</p>
<p><span>100+</span>Districts</p><br>
<p class="foot-text">Learners from K-12</p>
</div>
<span class="tab-card">
<p><span>4</span>State</p>
<p><span>100+</span>Districts</p><br>
<p class="foot-text">Learners from Competitive Exams</p>
</div>
</div>
<!-- second content -->
<div class="tab-content-box content-2">
<div class="tab-content map-box">
<div class="map-content">
<div class="lef-box">
<h4>The Stories</h4>
<p>Nulla tortor odio, fermentum at tortor nec, vehicula pellentesque lacus.
Quisque egestas ante ac ipsum accumsan vulputate. Nam venenatis commodo dolor,
non auctor elit aliquet quis. Etiam vehicula vestibulum nibh vel cursus. Etiam
dignissim ac ante sed facilisis. Integer velit lorem, vehicula in dolor nec, eleifend
vulputate ipsum.
Suspendisse vitae diam scelerisque, auctor urna eget, rhoncus libero. Praesent at est
nisi.
Praesent ac pellentesque nisi.</p>
</div>
<div class="right-box">
<img src="http://unacademy.envigo-tech.co.uk/shikshodaya/wp-content/uploads/sites/3/2022/06/Map.png"
alt="" style="width:100%">
</div>
</div>
</div>
</div>
<!--third content -->
<div class="tab-content-box content-3">
<div class="video-box">
<div class="v-top-box">
<h4>Our Initiative</h4>
<p>
Quisque sit amet sollicitudin diam,
vel sodales massa. Sed eu dolor non enim dapibus rhoncus.
Donec eu enim imperdiet, vehicula sapien a, auctor ligula.
</p>
</div>
<div class="tab-viedo-box">
<div class="ratio ratio-21x9">
<iframe width="560" height="315" src="https://www.youtube.com/embed/Y--96ZWMufI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
......@@ -2014,76 +2136,38 @@
function swiperHandlerGallery() {
var swiper = swiper;
var init = false;
let bigScreen = window.matchMedia('(min-width: 993px)');
let smallScreen = window.matchMedia('(max-width: 992px)');
if (bigScreen.matches) {
if (!init) {
init = true;
swiper = new Swiper('.slider_swiperShikshodaya', {
loop: false,
slidesPerView: 1,
centeredSlides: false,
spaceBetween: 30,
grabCursor: true,
spaceBetween: 15,
// mousewheelControl: true,
// mousewheel: true,
// freeMode: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
document.querySelector(".slider_swiperShikshodaya").classList.remove("notActive")
}
}
if (smallScreen.matches) {
document.querySelector(".slider_swiperShikshodaya").classList.add("notActive")
if (init) {
swiper.destroy();
init = false;
}
}
swiper = new Swiper('.slider_swiperShikshodaya', {
loop: false,
slidesPerView: 1,
centeredSlides: false,
spaceBetween: 30,
grabCursor: true,
spaceBetween: 15,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
}
function swiperHandlerGallery2() {
var swiper = swiper;
var init = false;
let bigScreen = window.matchMedia('(min-width: 993px)');
let smallScreen = window.matchMedia('(max-width: 992px)');
if (bigScreen.matches) {
if (!init) {
init = true;
swiper = new Swiper('.slider_swiperShikshodaya2', {
loop: false,
slidesPerView: 2,
centeredSlides: false,
spaceBetween: 30,
grabCursor: true,
spaceBetween: 40,
// mousewheelControl: true,
// mousewheel: true,
// freeMode: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
document.querySelector(".slider_swiperShikshodaya2").classList.remove("notActive")
}
}
if (smallScreen.matches) {
document.querySelector(".slider_swiperShikshodaya2").classList.add("notActive")
if (init) {
swiper.destroy();
init = false;
}
}
init = true;
swiper = new Swiper('.slider_swiperShikshodaya2', {
loop: false,
slidesPerView: 2,
centeredSlides: false,
spaceBetween: 30,
grabCursor: true,
spaceBetween: 40,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
}
// addEventListenerMuili
window.addEventListener('load', function(){
swiperHandlerGallery()
swiperHandlerGallery2()
});
swiperHandlerGallery()
swiperHandlerGallery2()
// window.addEventListener(,swiperHandler());
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment