Build a Newspaper Article - Build a Newspaper Article

HTML-CSS
1

Tell us what’s happening:

The naming of all the class elements that this exercise asks do not pass

Your code so far

<!-- file: index.html -->
<!DOCTYPE HTML>
  <html lang="en">
    <head>
     <link rel="stylesheet" href="styles.css">
      <meta charset="utf-8">
       <title>Newspaper Article</title> 
    </head>

<body>
  <div class="newspaper">
  <header>
    <h1 class="name">Daily Planet</h1>
     <p class="date">April 14, 2025 – Metropolis</p>
  </header>
  <main>
    <h2 class="headline">Superman Saves Metropolis from Catastrophic Train Derailment</h2>
    <h3 class="sub-headline">The Man of Steel swoops in just in time to stop disaster, saving hundreds aboard a speeding commuter train.</h3>
    <h3 class="author">By Lois Lane</h3>
    <p class="text">In a heroic act that once again reminded the world why he's called the Man of Steel, Superman saved hundreds of lives yesterday by preventing a high-speed commuter train from derailing in downtown Metropolis.</p>
    <p class="text">The incident occurred around 3:45 p.m. when a mechanical failure on the track threatened to send the train hurtling off-course. Eyewitnesses reported hearing a loud screech before spotting Superman swoop down from the sky, using his immense strength to lift the front car and safely guide the train to a halt.</p>
    <p class="text">Civilian at the train commuter Lena Torres said “There was no time to think—we were bracing for impact, Then suddenly, there he was. Superman. He saved us.”</p>
    <p class="text">Officials from the Metropolis Transit Authority are investigating the cause of the malfunction but confirmed that without Superman’s intervention, the accident could have resulted in significant casualties.</p>
     <p class="text">Mayor Frank Peterson praised the Kryptonian hero in a press briefing, stating, “Metropolis owes Superman yet another debt of gratitude. His bravery and unwavering commitment to our city are beyond compare.”</p>
      <p class="text">Superman, as always, declined to comment, offering only a brief wave before flying off into the sky.</p>
      </div>
  </main>
</body>

/* file: styles.css */
html {
  font-size: 24px;
}

.newspaper {
  font-size: 16px;
  font-family: "Open Sans", sans-serif;
  display: grid;
  width: 80%;
  margin: 0 auto;
  border: 2px solid black;
  padding: 5px;
  max-width: 800px;
}

.name {
  font-size: 2rem;
  font-family: "Times New Roman", serif;
  text-align: center;
}

.date {
  text-align: center
}

.author {
  font-weight: bold;
}

.name, .author {
  text-transform: uppercase;
}

.headline {
  font-size: 2em;
  font-weight: bold;
}

.sub-headline {
  font-weight: 100;
  font-size: 1.5em;
  font-style: italic;
}

.text {
  text-indent: 20px;
  line-height: 2em;
}

.text::first-letter {
  font-weight: bold;
  font-size: 2em;
}

Your browser information:

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

Challenge Information:

Build a Newspaper Article - Build a Newspaper Article

2

it seems it is not asked explicitly, but the tests wants those elements to all be direct children of .newspaper

3

I´m sorry, but is that not the case as is? all of the are inside the div classed “newspaper”

4

they are not direct children, as the children of .newspaper are main and header, the other elements are children of main and header, and descendants of .newspaper

or continuing using family three terms, .name is a grandchild of .newspaper, not a child

1 Like
5

(post deleted by author)

6

I had the same problem, but i don’t understand your solution. Do i have to create a post with my code?

7

yes, please create a post with your code, as any suggestion to you must be based on the code you have written

1 Like