Design a Magazine Layout - Design a Magazine Layout

HTML-CSS
1

Hey everyone, I have been trying to solve this mystery for hours, trying every possible way but I can seem to find where I am wrong on that one, nor can AIs find the mistake. I would appreciate if anyone could help me on that one as it keeps telling me that my grid-area names are not matching my grid template. Thanks in advance.

type or pa<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<title>Magazine Layout</title>
</head>

<body>
  <main class="magazine-cover">

    <header class="title">
      <h1 class="adventure-awaits">Adventure Awaits</h1>
      <p class="text"></p>
    </header>

    <section class="feature-article">
      <h2>Top 10 Exotic Destinations for 2024</h2>
      <p class="text">Discover the most breathtaking places to visit this year, from hidden beaches to mountain retreats. Our guide takes you through the best spots for your next adventure.</p>
    </section>

    <section class="small-article1">
      <h3>Gear Up: Must-Have Gadgets</h3>
      <p class="text">Check out the latest tech and gear to make your travels more exciting and comfortable.</p>
    </section>

    <section class="small-article2">
      <h3>Meet the Explorers</h3>
      <p class="text">Get to know the modern adventurers who are pushing the boundaries of exploration.</p>
    </section>

    <section class="cover-image">
      <img src="https://cdn.freecodecamp.org/curriculum/labs/magazine-cover.png" alt="volcano" loading="lazy" class="photo">
    </section>

  </main>
</body>

</html>ste code here

Here are the CSS properties:

.magazine-cover {
  background-color: white;
  height: 70%;
  width: 70%;
  margin: auto;
  display: grid;
  grid-template-areas: 
"title title title"
"feature-article feature-article cover-image"
"small-article1 small-article2 cover-image";
  row-gap: 10px;
  column-gap: 10px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto 1fr 1fr;
}

.title {
  grid-area: title;
}

.feature-article {
  grid-area: feature-article;
}

.cover-image {
  grid-area: cover-image;
}

.small-article1 {
  grid-area: small-article1;
}

.small-article2 {
  grid-area: small-article2;
}
2

hi there, welcome to the forum.

Please provide a link to the lab/exercise so we can check.

3

Hi, I don’t know what you mean exactly but here is the exercice:

CSS > Grid >

lab-magazine-layout/design-a-magazine-layout

Here are the last three criteria that are not met:

    1. The .title class should have a grid area of the same name.

  • Failed:14. The .feature-article class should have a grid area of the same name.

  • Failed:15. The .cover-image class should have a grid area of the same name.

4

can you provide the link to the lab too please?