File: /home/imensosw/public_html/imenso.co/demo/ww-voices/index.php
<?php include "header.php" ?>
<section class="banner-area">
<div class="container-fluid p-0">
<div class="row g-0">
<div class="col-md-8">
<!-- Swiper -->
<div class="swiper-container mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="#">
<h2>Latest News - a SM clip</h2>
<img src="images/banner-1.jpg" alt="banner" />
</a>
</div>
<div class="swiper-slide">
<a href="#">
<h2>Who is WWV / Stakeholder Message</h2>
<img src="images/banner-2.jpg" alt="banner" />
</a>
</div>
<div class="swiper-slide">
<a href="#">
<h2>For the Students - cool thing for them</h2>
<img src="images/banner-3.jpg" alt="banner" />
</a>
</div>
<div class="swiper-slide">
<a href="#">
<h2>Success item - repeat here - good piece.See:</h2>
<img src="images/banner-4.jpg" alt="banner" />
</a>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<!-- Swiper JS -->
</div>
<div class="col-md-4">
<div class="video-area" id="playme-DrStacey" onclick="revealVideo('video',this)" data-video="https://www.youtube.com/embed/Vea-9o6wGkU">
<!-- <iframe src="https://www.youtube.com/embed/Vea-9o6wGkU" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> -->
<div class="video-icon animate"><i class="fa fa-play"></i></div>
<img src="images/DrStacey.jpg" alt="Dr. Stacey" />
<h5>Dr. Stacey “STEM” Williams</h5>
</div>
<div class="video-area" id="playme-JuneArcher" onclick="revealVideo('video',this)" data-video="https://www.youtube.com/embed/JmNGx5iR-5k">
<!-- <iframe src="https://www.youtube.com/embed/JmNGx5iR-5k" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> -->
<div class="video-icon animate"><i class="fa fa-play"></i></div>
<img src="images/JuneArcher.jpg" alt="June Archer" />
<h5>June Archer</h5>
</div>
</div>
</div>
</div>
</section>
<section class="burger about-area">
<div class="container">
<div class="row">
<div class="col-md-8">
<img src="images/banner-1.jpg" class="img-fluid mb-4" data-aos="fade-up" alt="about" />
<div>
<p>World Wide Voices is an enrichment program that solves the disconnect between education and real world experience by focusing on practical, transferable skills and inspiring young people to explore STEM / STEAM / STREAM related industries and careers.</p>
<p>Our mentors and instructors are skilled professionals in fields such as finance, arts & entertainment, health, science, tech, and marketing. Students will stretch their creativity and communication skills with cutting edge tech tools as they explore career options and develop their interests.</p>
<p><a href="methodolgy.php" class="read_more">read more...</a></p>
</div>
</div>
<div class="col-md-4">
<div class="side-bar" data-aos="fade-up" data-aos-delay="50">
<div class="mb-4">
<h4 class="side-bar-tital">Featured Courses</h4>
<ul class="list-course">
<li><a href="#">
<div>
<div class="image">
<img src="images/pexels-davis-sanchez-3916376.jpg" class="w-100" />
</div>
</div>
<span>STEM (STEAM & STREAM)</span>
</a></li>
<li><a href="#">
<div>
<div class="image">
<img src="images/pexels-rfstudio-3825457.jpg" class="w-100" />
</div>
</div>
<span>Media Literacy & Production</span>
</a></li>
<li><a href="#">
<div>
<div class="image">
<img src="images/pexels-wallace-chuck-3587478.jpg" class="w-100" />
</div>
</div>
<span>Career Exploration & Visioning</span>
</a></li>
<li><a href="#">
<div>
<div class="image">
<img src="images/pexels-davis-sanchez-3916376.jpg" class="w-100" />
</div>
</div>
<span>Entrepreneurship and Economics</span>
</a></li>
<li><a href="#">
<div>
<div class="image">
<img src="images/pexels-wallace-chuck-3587478.jpg" class="w-100" />
</div>
</div>
<span>The Business of Arts and Entertainment</span>
</a></li>
</ul>
</div>
<div class="mb-3" data-aos="fade-up" data-aos-delay="150">
<h4 class="side-bar-tital">Instructors</h4>
<ul class="list-category">
<li>
<a href="#">
<div>
<span class="category-img" style="background: url('images/headshot_StaceyWilliams.jpg') no-repeat;"> </span>
</div>
<div>
<span class="category-title">Stacey Williams, Ph.D.</span><br />
<span class="tp-team-designation">Professor</span>
</div>
</a>
</li>
<li>
<a href="#">
<div>
<span class="category-img" style="background: url('images/headshot_DuanePierre.jpg') no-repeat;"> </span></div>
<div>
<span class="category-title">Duane Pierre</span><br />
<span class="tp-team-designation">Professor</span>
</div>
</a>
</li>
<li>
<a href="#">
<div>
<span class="category-img" style="background: url('images/headshot_PaigeRasid.jpg') no-repeat;"> </span></div>
<div>
<span class="category-title">Paige Rasid</span><br />
<span class="tp-team-designation">Professor</span>
</div>
</a>
</li>
<li>
<a href="#">
<div>
<span class="category-img" style="background: url('images/headshot_AntwaineDebnam.jpg') no-repeat;"> </span>
</div>
<div>
<span class="category-title">Antwaine Debnam</span><br />
<span class="tp-team-designation">Professor</span>
</div>
</a>
</li>
<li>
<a href="#">
<div>
<span class="category-img" style="background: url('images/headshot_June Archer.jpg') no-repeat;"> </span></div>
<div>
<span class="category-title">June Archer</span><br />
<span class="tp-team-designation">Professor</span>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="trending-courses" class="burger">
<div class="container">
<div class="row">
<div class="column-wrapper col-lg-3 col-md-6" data-aos="fade-down" data-aos-delay="50">
<header class="entry-header"> <h2 class="entry-title color-white">Trending</h2> </header>
<!--.entry-header-->
<div class="entry-content">
<p>Check out our guest speakers, actual footage from class and what is happening at wwvoices on social media.</p>
<a href="course.php" class="view-more"> VIEW ALL Trending Courses </a>
</div>
<!--.entry-content-->
</div>
<!--.column-wrapper-->
<div class="column-wrapper col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="150">
<div class="course-image">
<a href="#"><img src="images/pexels-davis-sanchez-3916376.jpg" class="img-fluid animate" alt=" "></a>
</div>
<div class="course-content">
<h3><a href="#">Guest Speakers</a></h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry....</p>
</div>
<!--.course-image-->
</div>
<!--.column-wrapper-->
<div class="column-wrapper col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="150">
<div class="course-image">
<a href="#"><img src="images/pexels-rfstudio-3825457.jpg" class="img-fluid animate" alt=" "></a>
</div>
<div class="course-content">
<h3><a href="#">Class Notes</a></h3>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the...</p>
</div>
<!--.course-image-->
</div>
<!--.column-wrapper-->
<div class="column-wrapper col-lg-3 col-md-6" data-aos="fade-up" data-aos-delay="150">
<div class="course-image">
<a href="#"><img src="images/pexels-wallace-chuck-3587478.jpg" class="img-fluid animate" alt=" "></a>
</div>
<div class="course-content">
<h3><a href="#">Trending on Social...</a></h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry....</p>
</div>
<!--.course-image-->
</div>
<!--.column-wrapper-->
</div>
<!--.row-->
</div>
<!--.container-->
</section>
<section id="information-section" class="burger_t">
<div class="container">
<div class="row g-0">
<div class="column-wrapper col-4" data-aos="fade">
<a href="course.php">
<img src="images/img-1.jpg" alt="Information Section Image" class="img-fluid">
<div class="black-overlay"></div>
</a>
<div class="information-content">
<div class="seperator" data-aos="fade-up" data-aos-delay="50"></div>
<h2 data-aos="fade-up" data-aos-delay="50"><a href="course.php" class="color-white">COURSES</a></h2>
</div>
<!--.information-->
</div>
<!--.column-wrapper-->
<div class="column-wrapper col-4" data-aos="fade">
<a href="instructors.php">
<img src="images/img-2.jpg" alt="Information Section Image" class="img-fluid">
<div class="black-overlay"></div>
</a>
<div class="information-content">
<div class="seperator" data-aos="fade-up" data-aos-delay="50"></div>
<h2 data-aos="fade-up" data-aos-delay="50"><a href="instructors.php" class="color-white">INSTRUCTORS</a></h2>
</div>
<!--.information-->
</div>
<!--.column-wrapper-->
<div class="column-wrapper col-4" data-aos="fade">
<a href="methodolgy.php">
<img src="images/img-3.jpg" alt="Information Section Image" class="img-fluid">
<div class="black-overlay"></div>
</a>
<div class="information-content">
<div class="seperator" data-aos="fade-up" data-aos-delay="50"></div>
<h2 data-aos="fade-up" data-aos-delay="50"><a href="methodolgy.php" class="color-white">METHODOLOGY</a></h2>
</div>
<!--.information-->
</div>
<!--.column-wrapper-->
</div>
<!--.row-->
</div>
<!--.container-->
</section>
<div id="video" class="lightbox" onclick="hideVideo('video','youtube')">
<div class="lightbox-container">
<div class="lightbox-content">
<button onclick="hideVideo('video',this)" class="lightbox-close"> Close | <i class="fa fa-close"></i> </button>
<div class="video-container">
<iframe id="youtube" width="960" height="540" src="https://www.youtube.com/embed/WsptdUFthWI?showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<?php include "footer.php" ?>
<script>
var swiper = new Swiper(".mySwiper", {
effect: "fade",
speed: 2000,
loop: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
pagination: {
el: ".swiper-pagination",
clickable: true,
//dynamicBullets: true,
},
});
/*Lightbox Video*/
function revealVideo(div, that){
var video_url=$(that).attr('data-video');
video_url = video_url+'?autoplay=1';
$('.lightbox').find('#youtube').attr('src',video_url);
$("#video").fadeIn();
}
function hideVideo(div, that){
$('#youtube').attr('src','') ;
$("#video").fadeOut();
}
/*Lightbox Video*/
</script>
</body>
</html>