<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multi-Tab Website</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>My Multi-Tab Website</h1>
    </header>
    <nav>
        <button class="tab-button" onclick="showTab('tab1')">Tab 1</button>
        <button class="tab-button" onclick="showTab('tab2')">Tab 2</button>
        <button class="tab-button" onclick="showTab('tab3')">Tab 3</button>
        <button class="tab-button" onclick="showTab('tab4')">Tab 4</button>
    </nav>
    <main>
        <section id="tab1" class="tab-content active">
            <p>Welcome to Tab 1! This is some content for the first tab.</p>
        </section>
        <section id="tab2" class="tab-content">
            <p>This is Tab 2! Here is the content for the second tab.</p>
        </section>
        <section id="tab3" class="tab-content">
            <p>You're viewing Tab 3! This is where the third tab content goes.</p>
        </section>
        <section id="tab4" class="tab-content">
            <p>Finally, this is Tab 4! Here's the content for the last tab.</p>
        </section>
    </main>
    <script src="script.js"></script>
</body>
</html>
