Design a Magazine Layout - Design a Magazine Layout

HTML-CSS
1

Tell us what’s happening:

Th am unable to move forward, kindly help me:

Your .magazine-cover should have a grid-template-areas property with title spanning all three columns of the first row.
8. The second row of the grid template should contain a feature article spanning two columns and a cover image.
9. The third row of the grid template should contain small-article1, small-article2, and cover-image.
12. You should add a gap of 10px between grid items.
13. The .title class should have a grid area of the same name.
The

.feature-article

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

.cover-image

class should have a grid area of

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>Magazine Layout</title>
<link rel="stylesheet" href="styles.css" />
</head>
<main class="magazine-cover">
  <header class="title">
<h1>Adventure Awaits</h1>
  </header>
  <section class="feature-article">
    <h2>Top 10 Exotic Destinations for 2024</h2>
<p>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>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>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="Cover image"
  </section>
</main>

<body>

</body>

</html>

/* file: styles.css */
body{
  width: 500px;
  height: 400px;
  background-color: lightgrey;
}

.magazine-cover {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto 1fr 1fr;
  grid-template-areas: "title title title" "feature-article feature-article cover-image"  "small-article1 small-article2
cover-image";
gap: 10px;
}

h1{
  background-color: black;
  color: white;
  text-align: center;
  width: 100%;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36

Challenge Information:

Design a Magazine Layout - Design a Magazine Layout

2

do not send cover-image" to a new line, if you want to write on multiple lines, you need to have the whole thing between quotes all on the same line

for the other parts you have not yet added any css for those

1 Like
3

Solver it. Thank you for the guidance,