src/stage-curtain-hero/index.html

<html lang="en">
  <head>
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:400,700,900&display=swap"
      rel="stylesheet"
    />
    <link href="https://cdn.jsdelivr.net/npm/normalize.css" rel="stylesheet" />
    <link href="../base-styles.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="intersecion.js" type="text/javascript"></script>
    <title>Stage Curtain Hero</title>
  </head>
  <body>
    <header>
      <h1 class="inspired-title">Stage Curtain Hero</h1>
      <h2 class="inspired-credit">
        Inspiration:
        <cite class="inspired-credit__citation">
          <a href="https://www.apple.com/">Apple</a>
        </cite>
      </h2>
    </header>

    <div class="inspired-container">
      <div class="placeholder-content">Scroll down the page</div>
      <div class="hero">
        <div class="theatre" id="theatre">
          <div class="theatre__curtain theatre__curtain--left"></div>
          <div class="theatre__stage"></div>
          <div class="theatre__curtain theatre__curtain--right"></div>
        </div>
      </div>
      <div class="placeholder-content" />
    </div>
  </body>
</html>