applehtml

<html>
<head>
  <link rel="stylesheet" href="apple.css">
</head>
<body>
  <div class="parent">
    <div class="header">
      <img src="images/applleee.jpg" alt="Apple image">
    </div>

    <div class="navbar">
      <a href="#home" class="nav-btn button-home" onclick="showSection('home', event)">Home</a>
      <a href="#about" class="nav-btn button-about" onclick="showSection('about', event)">About</a>
      <a href="#more" class="nav-btn button-more" onclick="showSection('more', event)">More</a>
<!---- copy and paste to add more buttons, change the ref to the section id.-->

    </div>

    <div class="left">
      <h2>Sidebar 1</h2>
    </div>

<!--- the main section is here. New pages can be added by making section IDs much like the about and more-->
    <div class="middle">
      <section id="home" class="page-section" style="display: block;">
        <h1>Main Content</h1>
        <p>Main content here. This section will be the default.
          <h3>another header style</h3>


        </p>
      </section>

      <section id="about" class="page-section" style="display: none;">
        <h1>About</h1>
        <p>About content here.
        </p>
      </section>

      <section id="more" class="page-section" style="display:none;">
        <h1>More </h1>
        <p> More here.</p>
      </section>
    </div>

    <div class="right">
      <h2>Sidebar 2</h2>
    </div>

    <div class="footer"></div>
  </div>

  <script>
    function showSection(sectionId, event) {
      event.preventDefault();
      document.querySelectorAll('.page-section').forEach(function(section) {
        section.style.display = 'none';
      });
      var target = document.getElementById(sectionId);
      if (target) target.style.display = 'block';
    }
  </script>
</body>
</html>