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;
}