Design a Magazine Layout - Design a Magazine Layout

HTML-CSS
1

Tell us what’s happening:

Failing test 13.
I guess the .title class having a grid area of the same name means something different than the following two tests that passed even though I formatted them all identically.

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>

<body>
  <main class='magazine-cover'>
    <header class='title'><h1>Magazine</h1></header>
    <section class='feature-article'><p>Victorious of war aversion value hatred victorious pinnacle truth hatred sea sea philosophy. Noble joy faith depths philosophy. Pious intentions noble love play will evil joy mountains gains against superiority.</p></section>
    <section class='small-article1'><p>Convictions christianity of truth christianity morality morality abstract ultimate. Mountains virtues right moral christianity god.</p></section>
    <section class='small-article2'><p>Salvation value overcome joy eternal-return self passion pinnacle morality. Oneself inexpedient eternal-return against ultimate ubermensch.</p></section>
    <section class='cover-image'><img src='https://i.imgur.com/7aPzXuL.png'></section>
  </main>
</body>

</html>

/* file: styles.css */
.magazine-cover {
  display: grid;
  grid-template-areas: 
    'title title title'
    'feature-article feature-article cover-image'
    'small-article1 small-article2 cover-image';
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto 1fr 1fr;
  grid-gap: 10px;
  width: 95vw;
  }
}

.title {
  grid-area: title;
}

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

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

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

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

img {
  height: 50%;
}

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
https://www.freecodecamp.org/learn/full-stack-developer/lab-magazine-layout/design-a-magazine-layout

2

you have an extra } here. remove it so that the styles are understood

3

Ah thank you so much, but why did the other tests pass?

1 Like
4

to answer, I would need to read the testing code…(I don’t really have an interest in that at the moment)

1 Like