<header class="hero">

  <h1>Women in STEM</h1>

  <nav>
    <ul role="list">
      <li><a href="https://obamawhitehouse.archives.gov/women-in-stem#section-ellen-ochoa" target="_blank"><img src="https://obamawhitehouse.archives.gov/sites/default/files/image/nsf_ellenochoa_square.jpg" aria-hidden="true"><span>Ellen Ochoa</span></a></li>
      <li><a href="https://obamawhitehouse.archives.gov/women-in-stem#section-grace-hopper" target="_blank"><img src="https://obamawhitehouse.archives.gov/sites/default/files/women-in-stem/grace-hopper.jpg" aria-hidden="true"><span>Grace Hopper</span></a></li>
      <li><a href="https://obamawhitehouse.archives.gov/women-in-stem#section-katherine-johnson" target="_blank"><img src="https://obamawhitehouse.archives.gov/sites/default/files/women-in-stem/katherine-johnson.jpg" aria-hidden="true"><span>Katherine Johnson</span></a></li>
      <li><a href="https://obamawhitehouse.archives.gov/women-in-stem#section-ada-lovelace" target="_blank"><img src="https://obamawhitehouse.archives.gov/sites/default/files/women-in-stem/ada-lovelace.jpg" aria-hidden="true"><span>Ada Lovelace</span></a></li>
      <li><a href="https://obamawhitehouse.archives.gov/women-in-stem#section-sally-ride" target="_blank"><img src="https://obamawhitehouse.archives.gov/sites/default/files/women-in-stem/sally-ride.jpg" aria-hidden="true"><span>Sally Ride</span></a></li>
      <li><a href="https://obamawhitehouse.archives.gov/women-in-stem#section-rosalind-franklin" target="_blank"><img src="https://obamawhitehouse.archives.gov/sites/default/files/women-in-stem/rosalind-franklin.jpg" aria-hidden="true"><span>Rosalind Franklin</span></a></li>
      <li><a href="https://obamawhitehouse.archives.gov/women-in-stem#section-barbara-mcclintock" target="_blank"><img src="https://obamawhitehouse.archives.gov/sites/default/files/women-in-stem/barbara-mcclintock.jpg" aria-hidden="true"><span>Barbara McClintock</span></a></li>
      <li><a href="https://obamawhitehouse.archives.gov/women-in-stem#section-mary-engle-pennington" target="_blank"><img src="https://obamawhitehouse.archives.gov/sites/default/files/image/usda_maryenglepennington_square.jpg" aria-hidden="true"><span>Mary Engle Pennington</span></a></li>
      <li><a href="https://obamawhitehouse.archives.gov/women-in-stem#section-eniac-programmers" target="_blank"><img src="https://obamawhitehouse.archives.gov/sites/default/files/women-in-stem/eniac.png" aria-hidden="true"><span>The ENIAC Programmers</span></a></li>
    </ul>
  </nav>

</header>
<main>
  <h2>The Untold History of Women in Science and Technology</h2>
  <p>Listen to women from across the Obama Administration tell the stories of their personal heroes across the fields of science, technology, engineering, and math (STEM).</p>
  <a class="button" href="https://obamawhitehouse.archives.gov/women-in-stem" target="_blank">View All Stories</a>
</main>
$color: #0a1737;

* {
  box-sizing: border-box;
}

body {
  font-family: "Lato", sans-serif;
  color: scale-color($color, $lightness: 10%);
}

h1,
h2 {
  margin: 0;
  font-family: "Playfair Display", serif;
  font-style: italic;
}

h1 {
  font-size: calc(1rem + 5vw);
  padding-left: 1rem;
  margin-bottom: -0.25em;
  z-index: 2;
  position: relative;
}

p {
  font-size: 1.25rem;
  line-height: 1.5;
}

.button {
  display: inline-flex;
  padding: 0.5em 1em;
  border-radius: 4px;
  background-color: $color;
  color: #fff;
  text-align: center;
  text-decoration: none;
  transition: background 180ms;

  &:hover {
    background-color: scale-color($color, $lightness: 30%, $saturation: 80%);
  }

  &:focus {
    outline: none;
    box-shadow: 0 0 0 3px scale-color($color, $lightness: 60%, $saturation: 80%);
  }
}

.hero {
  background-color: $color;
  padding: 2rem 1rem 0.25rem;
  color: #fff;

  nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-gap: 2vmin;
    grid-template-columns: repeat(auto-fill, minmax(25vmin, auto));

    li {
      &:nth-child(1) {
        grid-column-start: 2;
      }

      img {
        display: block;
        object-fit: cover;
        width: 100%;
        max-height: 20vh;
        filter: blur(2px) grayscale(20%);
        transition: all 200ms;
      }

      a {
        overflow: hidden;
        display: grid;
        grid-template-areas: cell;
        place-items: end;
        position: relative;
        transition: box-shadow 180ms;
        text-decoration: none;

        img,
        span {
          grid-area: cell;
        }

        span {
          z-index: 1;
          padding: 0.25em;
          background-color: #fff;
          color: $color;
          font-size: 0.9rem;
          border-left: 2px solid red;
          opacity: 0;
          transform: translateX(100%);
          transition: all 400ms ease-in;
        }

        &,
        &:before {
          border-radius: 4px;
        }

        &:before {
          content: "";
          position: absolute;
          top: -3px;
          right: -3px;
          bottom: -3px;
          left: -3px;
          z-index: 1;
          box-shadow: inset 0 0 200px $color;
          transition: box-shadow 200ms ease-in;
        }

        &:hover,
        &:focus {
          img {
            filter: none;
          }

          span {
            opacity: 1;
            transform: translateX(0);
          }

          &:before {
            box-shadow: inset 0 0 30px $color;
          }
        }

        &:focus {
          outline: none;
          box-shadow: 0 0 0 3px #fff;
        }
      }
    }
  }
}

main {
  max-width: 80ch;
  margin: 2rem auto;
  padding: 0 1rem;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.