index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="style.css" >
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Project Glow in Light</title>
</head>
<body>
    <div class="hero">
        <nav>
            <img src="menu.png" class="menu.img">
            <img src="logo.png" class="logo">
            <ul>
            <li> <a href="">Latest</a></li>
            <li><a href="">Modern</a></li>
            <li><a href="">Contemporary</a></li>
            <li><a href="">Affordable</a></li>
        </ul>
        <button type="button" onclick="toggleBtn().active" id="btn"><span>

        </span></button>
        </nav>

<div class="lamp-container">

    <img src="lamp.png" class="lamp">
    <img src="light.png" class="light"  id="light">
</div>
<div class="text-container">
    <h1>My Project <br> Glow in Light </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>
         <a href="">Check All Collection</a>
         <div class="control">
            <p>04</p>
            <div class="line"><span></span></div>
            <p>05</p>
         </div>


</div>

    </div>
    <script> 
    let btn = document.getElementById("btn");
    let light = document.getElementById("light");

    function toggleBtn(){
       btn.classList.toggle("active")
       light.classList.toggle("on")
       

    }
    
    btn.addEventListener(click,()=> active)
    
    </script>
    
</body>
</html>