index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Portfolio</title>
    <link rel="stylesheet" href="style.css">
    <script>
        // JavaScript function to toggle the background color of the home section
        function toggleBackgroundColor() {
            var homeSection = document.getElementById('home');
            homeSection.style.backgroundColor = homeSection.style.backgroundColor === 'rgba(0, 0, 0, 0.5)' ? '#333' : 'rgba(0, 0, 0, 0.5)';
        }
    </script>
</head>
<body>

    <nav>
        <a href="#home">Home</a>
        <a href="">About</a>
        <a href="">Portfolio</a>
        <a href="">Contact</a>
    </nav>

    <section id="home">
        <img src="images/logo.png" alt="Your Name">
        <h2>Welcome to Thejaswini's Portfolio</h2>
        <p class="thought">"Showcasing my passion for creativity and innovation."</p>
        <div class="btn-container">
            <a href="">View Portfolio</a>
            <a href="">Contact Me</a>
            <a onclick="toggleBackgroundColor()">Toggle Background Color</a>
        </div>
    </section>

    

</body>
</html>