Solution - Githubissues

Hi @sisianne1,

You were very close. It is a grid with two rows and three columns but the header with the H1 would have been placed outside of the grid. Here is what the html would have looked like:

<header role="banner">
  <h1>The Seven Wonders of the Ancient World</h1>
</header>

<main role="main">
  <img class="banner" src="images/seven-wonders.jpg" alt="" role="presentation">
  <div class="banner-text">
    <h2>Remarkable constructions of classical antiquity—lost in time.</h2>
    <p>Come explore the ancient wonders with our amazing teleportation technology that jumps you around the world.</p>
  </div>

  <figure>
    <img src="images/temple-of-artemis.jpg" alt="An illustration showing the Temple of Artemis surrounded by people">
    <figcaption>
      <h2>Temple of Artemis</h2>
      <dl>
        <dt>Construction:</dt>
        <dd>Circa 550 BC</dd>
        <dt>Builders:</dt>
        <dd>Greeks</dd>
        <dt>Location:</dt>
        <dd>Selçuk, Turkey</dd>
      </dl>
    </figcaption>
  </figure>

  <figure>
    <img src="images/colossus-of-rhodes.jpg" alt="A painting of the Colossus of Rhodes in its prime">
    <figcaption>
      <h2>Colossus of Rhodes</h2>
      <dl>
        <dt>Construction:</dt>
        <dd>292–280 BC</dd>
        <dt>Builders:</dt>
        <dd>Greeks</dd>
        <dt>Location:</dt>
        <dd>Rhodes, Greece</dd>
      </dl>
    </figcaption>
  </figure>

  <figure>
    <img src="images/hanging-gardens-of-babylon.jpg" alt="An artists depiction of the Gardens of Babylon">
    <figcaption>
      <h2>Gardens of Babylon</h2>
      <dl>
        <dt>Construction:</dt>
        <dd>Circa 600 BC</dd>
        <dt>Builders:</dt>
        <dd>Babylonians</dd>
        <dt>Location:</dt>
        <dd>Nineveh, Iraq</dd>
      </dl>
    </figcaption>
  </figure>

</main>

display: grid; would have been applied to the <main> in css and then you could either assign the content using grid-areas or grid-template-columns and use the top row for multiple overlapping elements.

Let me know if you have any questions. :)

Thanks, Wendy

sisianne1 / no-sketch-no-grid

Solution #1