import React from 'react';
import './banner.css';
const Banner = () => {
const btns = document.querySelectorAll(".nav-btn");
const slides = document.querySelectorAll(".video-slide");
const contents = document.querySelectorAll(".content");
var SliderNav = function(manual){
btns.forEach((btn) =>{
btn.classList.remove("active");
});
slides.forEach((slide) =>{
slides.classList.remove("active");
});
contents.forEach((content) =>{
content.classList.remove("active");
});
btns[manual].classList.add("active");
slides[manual].classList.add("active");
contents[manual].classList.add("active");
}
btns.forEach((btn,i) => {
btn.addEventListener("click",() => {
SliderNav(i);
});
});
return (
<>
<section className='home'>
<video controls autoplay muted loop width="auto" height="450" >
<source src="/v1.mp4" type='video/mp4'/>
</video>
<video controls autoplay muted loop width="auto" height="450" >
<source src="/v2.mp4" type='video/mp4'/>
</video>
<div class="content active">
<h1>Wonderful.<br/><span>World</span></h1>
<p className='para_cont'>As an IT business consultant, we focus on delivering seamless services to our clients, based on a well-tested methodology and solid experience.</p>
<a>Read More</a>
</div>
{/* <div class="content2">
<h1>Wonderful.<br/><span>World</span></h1>
<p className='para_cont'>As an IT business consultant, we focus on delivering seamless services to our clients, based on a well-tested methodology and solid experience.</p>
<a>Read More</a>
</div> */}
<div className='media-icons'>
<a rel='nofollow' href=''><i class="Fa-fa-Facebook"></i></a>
<a rel='nofollow' href=''><i class="fa-fa-instagram"></i></a>
<a rel='nofollow' href=''><i class="fa-fa-whatsapp"></i></a>
<a rel='nofollow' href=''><i class="fa-fa-twitter"></i></a>
</div>
<div className='slider-navigation'>
<div className='nav-btn active'></div>
<div className='nav-btn'></div>
<div className='nav-btn'></div>
<div className='nav-btn'></div>
</div>
</section>
</>
);
};
export default Banner;
