index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vakbond tegen onvoldoendes</title>
    <link rel="stylesheet" href="style.css">
    <script src="./script.js" defer></script>


    <script>document.addEventListener("DOMContentLoaded", function () {
        const menuToggle = document.querySelector(".menu-toggle");
        const navbar = document.querySelector(".navbar");
    
        menuToggle.addEventListener("click", function () {
            navbar.classList.toggle("active");
        });
    });</script>
</head>
<body>
    

    <header class="header" id="home">

        <a href="#" class="logo"><img src="./Logo.png" alt="" width="100" height="100" /></div></a>    
    
        <div class="menu-toggle">
            <div class="bar"></div>
            <div class="bar"></div>
            <div class="bar"></div>
        </div>
        
    <nav class="navbar">
        <a href="#">Home</a>
        <a href="#about">Over ons</a>
        <a href="./aanmelden">Inschrijven</a>
        <a href="./login">Login</a>
    </nav>
    </a>
    <script>
        // Smooth scrolling when clicking on navigation links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
    
                const targetId = this.getAttribute('href').substring(1);
                const target = document.getElementById(targetId);
    
                if (target) {
                    const targetPosition = target.getBoundingClientRect().top + window.scrollY;
                    window.scrollTo({
                        top: targetPosition - 50, // Adjust scroll position as needed
                        behavior: 'smooth'
                    });
                }
            });
        });
    </script>
        </a>

</header>


<section class="home" id="">

    <div class="home-content">
    
    <h1>Hey! Welkom</h1>
    <h3>Vakbond</h3>
    <p>Hoi, welkom bij de website van de Vakbond Tegen Onvoldoendes. <br> Hier helpen wij mensen tegen hun onvoldoendes.</p>
    <div class="btn-box">
        <a href="#pricing">Over ons</a>
        <a href="mailto:s00071@student.pleysier.nl">Let's talk!</a>
    </div>
</div>
    </section>


<div class="aboutme">

<div class="h3"> <h3>About Us!</h3>
</div>
<div class="p">
<p>Wij zijn de vakbond tegen onvoldoendes, wij geven bijlessen gratis aan leerlingen met moeite. <br> Wij zijn een klein groepje jongeren die helpen met betere cijfers krijgen</p>
</div>


</div>


</body>
</html>