Design a Newspaper Layout - Design a Newspaper Layout

HTML-CSS
1

Tell us what’s happening:

The system doesn’t respond when i cilck Run Test

Your code so far

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

<head>
<meta charset="utf-8">
<title>Newspaper Layout</title>
<link rel="stylesheet"href="styles.css">
</head>

<body>
<main class="newspaper-layout">
        
        <header class="title">
            <h1>The Daily Sentinel</h1>
        </header>

        <figure class="cover-image">
            <img src="https://via.placeholder.com/800x400" alt="Representative news image">
        </figure>

        <article class="feature-article">
            <h2>Groundbreaking Discovery in Tech</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at porttitor sem.  Aliquam erat volutpat. Donec feugiat nisl eget pretium ultrices. Fusce sollicitudin erat ac vilit.</p>
        </article>

        <article class="small-article1">
            <h3>Local Weather Update</h3>
            <p>Expect clear skies and sunshine throughout the weekend with mild temperatures.</p>
        </article>

        <article class="small-article2">
            <h3>Sports Highlights</h3>
            <p>The home team secured a stunning victory in the final minutes of the game last night.</p>
        </article>

        <article class="small-article3">
            <h3>Cooking Corner</h3>
            <p>Try this simple five-ingredient pasta recipe for a quick and delicious weekday meal.</p>
        </article>

        <article class="secondary-article">
            <h2>The Future of Urban Gardening</h2>
            <p>Urban farming is taking over city rooftops, providing fresh produce and reducing carbon footprints for city dwellers worldwide.</p>
        </article>

    </main>
</body>

</html>



/* file: styles.css */
.newspaper-layout {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  grid-template-areas:
    "title title title"
    "feature-article feature-article cover-image"
    "secondary-article secondary-article cover-image"
    "small-article1 small-article2 small-article3";
}

/* Assigning the grid areas to the classes */
.title {
  grid-area: title;
}

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

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

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

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

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

.small-article3 {
  grid-area: small-article3;
}
.cover-image img {
  max-width: 100%;
  height: auto;
  display: block; 
}

Your browser information:

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

Challenge Information:

Design a Newspaper Layout - Design a Newspaper Layout

1 Like
2

Please try one of the following steps to move forward.

Click on the “Restart Step” button and force a refresh of your page with CTRL + F5 then try to paste the code in again.

or - Try the step in incognito or private mode.

or - Disable any/all extensions that interface with the freeCodeCamp website (such as Dark Mode, Ad Blockers, or Spellcheckers).

or - Ensure your browser is up-to-date or try a different browser.

I hope one of these will work for you.

2 Likes
3

i try all option still it doesn’t work

4

Which browser do you use?