<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Higher Institute</title>

<link rel="stylesheet" type="text/css" href="style.css">

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">

</head>

<body>

<header id="header">

<div class="menu">

<div class="logo">

<img src="img/logo.jpg" alt="">

</div>

<nav>

<ul>

<a href=""><li>Home</li></a>

<a href=""><li>About Us</li></a>

<a href=""><li>Services</li></a>

<a href=""><li>Contact Us</li></a>

</ul>

</nav>

</div>

<div class="text-box">

<h1>Lorem ipsum dolor </h1>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque suscipit quod, <br>saepe? Maiores nisi odit totam. Cum quia, amet quasi.</p>

<a href="" class="hero-btn">Visit Us To Know More</a>

</div>

</header>



<script>

var arr=["img/1.jpg","img/2.jpg","img/3.jpg"];

var i=0;

function slider()

{

            var img=document.getElementById("header");


            img.style.background="linear-gradient(rgba(194,20,255,.6),rgba(24,120,7,.3)),url("+arr[i]+")";

            img.style.backgroundPostion="center";

            img.style.backgroundSize="100% 100%";

            img.style.backgroundPostion="center";

            i++;

            if(i==arr.length)

            {

            i=0;

            }

}

setInterval(slider,3000);

</script>

</body>

</html>