Build a Newspaper Article - Build a Newspaper Article

Programming HTML-CSS
1

Tell us what’s happening:

i am getting the following things wrong plz.. help
4. You should have a .newspaper selector that sets its elements’ font-family to 'Open Sans', sans-serif .
5. 18. You should have a .name selector that sets its elements’ font-family to 'Times New Roman', serif .
6. 21. You should have a .headline selector that sets its elements’ font-size to 2em.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Newspaper Article</title>
    <link href="styles.css" rel="stylesheet">
  </head>
  <body>
    <div class="newspaper">
      <p class="name">name</p>
      <p class="date">August 5, 2025</p>
      <p class="headline">headline</p>
      <p class="sub-headline">sub-headline</p>
      <p class="author">author</p>
      <p class="text">text</p>
      <p class="text">text</p>
      </div>
  </body>
</html>

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

.newspaper {
    font-size: 16px;
    font-family: 'Open Sans', sans-serif, Arial, sans-serif; /* Added fallback */
    height: 100vh;
    width: 100%;
}

.name {
    font-size: 2rem;
    font-family:'Times New Roman', serif, Georgia, serif;
    margin-bottom: 0;
}

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

.date, .name {
    text-align: center;
}

.date {
    margin-bottom: 0;
}

body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

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

.author {
    font-weight: bold;
}

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

.text::first-letter {
    font-size: 2rem;
}

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

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:

Build a Newspaper Article - Build a Newspaper Article
https://www.freecodecamp.org/learn/full-stack-developer/lab-newspaper-article/build-a-newspaper-article

2
  1. You should have a .sub-headline selector that sets its elements’ font-size to 1.5em.
      1. You should have a .text selector that sets its elements’ line-height to 2em.
  • Failed:29. You should have a .text::first-letter selector that sets its elements’ font-weight to bold.
    1. You should have an .text::first-letter selector that sets its elements’ font-size to 2em
3

Here are some troubleshooting steps you can follow. Focus on one test at a time:

  • What is the requirement of the first failing test?
  • Check the related User Story and ensure it’s followed precisely.
  • What line of code implements this?

If this does not help you solve the problem, please reply with answers to these questions.

4
  1. You should have a .newspaper selector that sets its elements’ font-family to 'Open Sans', sans-serif .
5

please try to answers to the questions instead of copypasting the failing test

6

what do you mean my requirement . if what we have to write then its specified in the failing test ?

7

can you answer these questions?

8

i checked but i have written code accordingly and other people have wrote same with different problems

9

well, this is not the requested value for font-family

10 
.name {
    font-size: 2rem;
    font-family:'Times New Roman', serif ;
    margin-bottom: 0;
}
i corrected it but it's not solving the problem
11

I am not sure what you are showing me

12

corrected css code you were saying i had added few extra font style i removed them but still no progress

13

show your updated code then

14

got it i was writing 2 rem instead of 2 em thankyou for your quick guidance

15

but newspaper font style till not resolved

html {
    font-size: 24px;
}

.newspaper {
font-size: 16px;
font-family: 'Open Sans', sans-serif, sans-serif;
height: 100vh;
width: 100%;
}

.name {
    font-size: 2rem;
    font-family:'Times New Roman', serif ;
    margin-bottom: 0;
}

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

.date, .name {
    text-align: center;
}

.date {
    margin-bottom: 0;
}

body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

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

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

.author {font-weight: bold;}

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

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

what is the value that is requested?

17

thank you i added extra sans serif . screen gets clustered because i am learning on laptop sorry for inconvenience