index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <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=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"
      rel="stylesheet"
    />
    <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=League+Gothic&display=swap"
      rel="stylesheet"
    />
    <title>Occult Sex Worker</title>
    <link
      rel="shortcut icon"
      href="./Images/riteslogo.jpg"
      type="image/x-icon"
    />
    <link rel="stylesheet" href="./styles.css" />
    <script type="module" src="./main.js"></script>
  </head>
  <body>
    <!-- SPLASHSCREEN -->
    <div id="splashscreen">
      <img
        id="splashscreen-image"
        src="./Images/ritesband1.jpg"
        alt="Splashscreen Image"
      />
    </div>

    <div id="content" style="display: none">
      <!-- HEADER -->
      <header id="header">
        <img
          src="./Images/ritesbanner.png"
          alt="Band banner with Sax, Drag and Rock'n'Roll tagline"
        />
      </header>

      <!-- MAIN SECTION -->
      <main>
        <div class="albumInfo">
          <div id="albumArt" class="montserr">
            <p>Front:</p>
            <img
              class="albumImages"
              src="./Images/ritesalbum1.jpg"
              alt="Front of album"
            />
          </div>
          <div id="albumOverview">
            <div id="albumDetails" class="league-black"></div>
          </div>
        </div>

        <!-- ALBUM BACK IMAGE AND TRACKLIST CONTAINER -->
        <div class="albumInfo">
          <!-- ALBUM BACK IMAGE -->
          <div id="albumArtBack" class="montserr">
            <p>Back:</p>
            <img
              class="albumImages"
              src="./Images/ritesalbum2.jpg"
              alt="Back of album"
            />
          </div>

          <!-- TRACKLIST -->
          <div id="tracklist" class="league-black">
            <h2>Tracklist</h2>
            <ul class="league-black-sml">
              <li>
                <span class="track-number">1.</span> Dependency
                <span class="track-length">(01:23)</span>
              </li>
            </ul>
          </div>
          <div id="bandImage">
            <img
              id="bandLineUp"
              src="./Images/ritesband2.jpg"
              alt="Band Line Up"
            />
          </div>
        </div>
      </main>

      <!-- FOOTER -->
      <footer id="footer">
        <div id="footertext" class="league-black">
          <p>©<span id="bandName">Band Name</span></p>
        </div>
      </footer>
    </div>
  </body>
</html>