index.html

<script
  src="https://kit.fontawesome.com/78b2b95993.js"
  crossorigin="anonymous"
></script>

<div class="hero-image">
  <div class="hero-text">
    <h1>Perceptible Radio Waves</h1>
    <ul>
      <li>
        <a href="https://www.youtube.com/watch?v=fnUreSvXxuo" target="_blank"
          >Demo Video
          <i style="color: white" class="fas fa-external-link-alt fa-xs"></i>
        </a>
      </li>
      <li>
        <a
          href="https://github.com/elizabethengelman/perceptible-radio"
          target="_blank"
          >Code Repository
          <i style="color: white" class="fas fa-external-link-alt fa-xs"></i>
        </a>
      </li>
      <li>
        <a
          href="https://itp.nyu.edu/lowres/thesis2023/author/ee2207/"
          target="_blank"
          >Process Documentation Blog
          <i style="color: white" class="fas fa-external-link-alt fa-xs"></i>
        </a>
      </li>

      <li>
        <a
          href="https://itp.nyu.edu/lowres/thesisarchive2023/?elizabeth-engelman"
          target="_blank"
          >NYU Thesis Archive
          <i style="color: white" class="fas fa-external-link-alt fa-xs"></i>
        </a>
      </li>
    </ul>
  </div>
</div>

<style>
  body,
  html {
    height: 100%;
    font-family: "Courier New", Courier, monospace;
  }

  /* The hero image */
  .hero-image {
    /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
      url("video-and-photo-documentation/greenbank-mockup-gif-cropped.gif");

    /* Set a specific height */
    height: 100%;

    /* Position and center the image to scale nicely on all screens */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }

  /* Place text in the middle of the image */
  .hero-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
  }

  body,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  ol,
  ul {
    margin: 0;
    padding: 0;
    font-weight: normal;
  }

  ol,
  ul {
    list-style: none;
  }

  a {
    font-size: 30px;
    text-decoration: none;
  }

  a:link {
    color: white;
  }

  a:visited {
    color: white;
  }

  /* mouse over link */
  a:hover {
    color: rgb(105, 253, 255);
  }

  h1 {
    font-size: 60px;
    margin-bottom: 10%;
  }
</style>