Index.html

<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NeoLamp</title>
	<link rel="stylesheet" href="Style.css">
</head>
<body>
<div class="hero">
	<nav>
		<a href="Index.html">
		<img src="images/menu.png" class="menu-img">
		</a>
		<img src="images/logo.png" class="logo">
		<ul>
			<li><a href="Latest.html">Latest</a></li>
			<li><a href="Modern.html">Modern</a></li>
			<li><a href="Contemporary.html">Contemporary</a></li>
			<li><a href="Affordable.html">Affordable</a></li>
		</ul>
		<button type="button" onclick="toggleBtn()" id="btn"><span></span></button>
	</nav>
	
	<div class="lamp-container">
		<img src="images/lamp.png" class="lamp">
		<img src="images/light.png" class="light" id="light">
	</div>
	
	<div class="text-container">
		<h1>Latest<br> in Lighting</h1>
		<p>This is the first lamp from our company. 
		we're making a huge collection of modern Lamps in all categories from home use to office use.</p>
	</div>
    <div class="text-container-">
		<a href="products.html">Check All Products</a>
	</div>
	<div class="text-container">
		<div class="control">
			<p>04</p>
			<div class="line"><span></span></div>
			<p>05</p>
		</div>
	</div>

</div>


<script>
	var btn = document.getElementById("btn");
	var light = document.getElementById("light");
	
	function toggleBtn(){
		btn.classList.toggle("active");
		light.classList.toggle("on");
	}
</script>



</body>
</html>