index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <script src="main.js" defer></script>
  </head>
  <body>
    <h1>Mushrooms of the Bay Area</h1>

    <div class="buttons">
      <button id="chanterelle-button" class="button">Chanterelle</button>
      <button id="oyster-button" class="button">Oyster mushroom</button>
      <button id="fly-agaric-button" class="button">Fly agaric</button>
    </div>

    <h2 id="header"></h2>
    <img id="image">
    <p id="credit"></p>
  </body>
</html>