page.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
    <link rel="stylesheet" href="page.css">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap" rel="stylesheet">
    <title>Responsive Landing Page with Nav Menu</title>
</head>

<body>
    <header>
        <h1>My Logo</h1>

        <section class="menu">
            <ul class="menu-list">
                <li>Home</li>
                <li class="active">Products</li>
                <li>About Us</li>
                <li>Contact</li>
            </ul>

            <button>
                <i class="fas fa-times"></i>
                <i class="fas fa-bars"></i>
            </button>
        </section>
    </header>

    <section class="main">

        <section class="left">
            <p class="title">Information Technology</p>
            <p class="msg">IT includes several layers of physical equipment (hardware), virtualization, management systems, automation tools, operating systems, other system software and applications used to perform essential functions. User devices, peripherals and software can be included in the IT domain.</p>
            <button class="cta">Learn More</button>
        </section>

        <section class="right">
            <img src="it.jpg" alt="Landing image">
        </section>

    </section>

    <script>
        var menu = document.querySelector('.menu');
        var menuBtn = document.querySelector('.menu button');
        menuBtn.addEventListener('click', () => {
            menu.classList.toggle('opened')
        })
    </script>


</body>

</html>