search

Jessica-Lee123 / type-those-grids

Apply basic CSS Grid layouts to a simple typography-focused layout.
0 stars 0 forks source link

In the green but still 86% difference, I NEED HELP PLEASE!!! #1

Open Jessica-Lee123 opened 3 years ago

Jessica-Lee123 commented 3 years ago

@hellachella @carolsinc @raven-rhea

Trying to catch up, I have no idea what I need to do next for this. I'm in the green, no changes needed, yet I'm 86% different. This totally sucks.

PLEASE HELP!!!

hellachella commented 3 years ago

Letsee

hellachella commented 3 years ago

Sent you a zoom link in slack. online now.

hellachella commented 3 years ago

Paste these into their files and you will see code comments in the following format: <!--- comment for html ---> and /* Comment for CSS */

They will be greyed out in a code editor.

HTML Fixes

<!DOCTYPE html>
<html lang="en-ca">
<head>
  <meta charset="utf-8">
  <title>The Seven Wonders of the Ancient World</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Merriweather:ital@0;1&display=swap" rel="stylesheet">
</head>
<body>

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

    <!-- Move into Main: img & p inside of a div just below open main tag-->
    <img src="images/maerten-van-heemskerck-panorama-with-the-aabduction-of-helen-amidst-the-wonders-of-the-ancient-world-walters-37656.jpg" alt="maerten-van-heemskerck-panorama-with-the-aabduction-of-helen-amidst-the-wonders-of-the-ancient-world-walters-37656">
    <p>Remarkable constructions of classical antiquity—lost in time. Come explore the ancient wonders with our amazing teleportation technology that jumps you around the world.</p>
  </header>

  <main role="main">
    <!-- <div class="">
      <img src="images/maerten-van-heemskerck-panorama-with-the-aabduction-of-helen-amidst-the-wonders-of-the-ancient-world-walters-37656.jpg" alt="">

      Jessica, Just briefly describe the image, not the file name. Something like : "Painting of the Seven Wonders

      <p>Remarkable constructions of classical antiquity—lost in time. Come explore the ancient wonders with our amazing teleportation technology that jumps you around the world.</p>
    </div> -->

    <ul> <!-- No need for UL, just figures, however if we were using li as containers, we would put each figure into its own list item, but we are not. -->
      <li><!-- Remove -->
        <figure>
          <img src="images/colossus-of-rhodes.jpg" alt="colossus-of-rhodes">
          <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="hanging-gardens-of-babylon">
          <figcaption>
            <h2>Hanging Gardens of Babylon</h2>
            <dl>
              <dt>Construction:</dt>
              <dd>600 BC</dd>
              <dt>Builders:</dt>
              <dd>Babylonians</dd>
              <dt>Location:</dt>
              <dd>Nineveh, Iraq</dd>
            </dl>
          </figcaption>
        </figure>

        <figure>
          <img src="images/temple-of-artemis.jpg" alt="temple-of-artemis">
          <figcaption>
            <h2>Temple of Artemis</h2>
            <dl>
              <dt>Construction:</dt>
              <dd>550 BC</dd>
              <dt>Builders:</dt>
              <dd>Greeks</dd>
              <dt>Location:</dt>
              <dd>Selçuk, Turkey</dd>
            </dl>
          </figcaption>
        </figure>
      </li> <!-- Remove -->
    </ul><!-- Remove -->
  </main>
</body>
</html>

CSS Fixes

html {
  box-sizing: border-box;
  font-family: Merriweather, serif;
  line-height: 1.5;
  margin: 1em;
}

*, *::before, *::after {
  box-sizing: inherit;
}

body {
  margin: 0;
}

img {
  width: 100%;
  align-self: center; /*Remove*/
}

/* Add: */
/* h1 {
  font-weight: normal;
  font-style: italic;
  font-size: 1rem;
  margin: 0 0 1.5rem;
} */

/* Add: */
/* h2 {
  font-weight: normal;
  font-style: italic;
  font-sizeL 1.5rem;
  margin: 0 0 1.5rem;
} */

main {
  font-family: Merriweather, serif; /* unneccesary */
  font-style: italic;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas:
    "banner banner banner"
    "col1 col2 col3";
  gap: .75rem;
}

/* Remove: */
.img-banner {
  grid-area: banner;
}

.banner-text {
  font-family: Merriweather, serif; /* Unnessesary, it's the document font*/
  grid-area: banner;
  /* ADD align-self: end (moves text to bottom)*/
  color: #fff;
  padding: 1.5rem 1rem;
}

/* ADD: */
/* .banner-text h2,
  banner-text p,
  figure h2 {
  margin-bottom: 0;
} */

/* Remove default margin from figure: */
/* figure {
margin :0
} */

/* Add padding to figcaption: */
/* figcaption {
  padding: 1rem;
} */

/* Remove default margin from dl */
/* dl {
  margin: 0;
} */

dd {
  font-style: normal; /* <-- remove */
  /* margin-left: 1rem; <-- Add */
}

dt {
  font-style: italic;
}
Jessica-Lee123 commented 3 years ago

@hellachella

Hey Chelle, I made these changes but it's still at 86% difference. It's asking for a label for the div class, I can't think of what it would be. My images are also not spacing across, I keep going through the notes but having trouble finding what I need to do again.

carolsinc commented 3 years ago

The classes you are using in the CSS need to be assigned to elements in your html. Your first image should have the class of banner and your first div should have the class of banner-text