Design a Newspaper Layout - Design a Newspaper Layout

HTML-CSS
1

Tell us what’s happening:

  1. Your .newspaper-layout element should have a grid-template-areas property with title spanning all three columns of the first row.
  2. The second row of the grid template should contain a feature-article spanning two columns and a cover-image.
  3. The third row of the grid template should contain a secondary-article spanning two columns and a cover-image.
  4. The fourth row of the grid template should contain small-article1, small-article2, and small-article3.

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 Layout</title>
</head>

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

<article class="feature-article">
<h2>Breaking News: Volcano Eruption Disrupts Tourism</h2><p>
Recently, a volcano erupted in a popular tourist destination. The eruption has caused widespread panic and has disrupted tourism in the area. The volcano has been spewing lava and ash for several days now, and authorities are urging residents and tourists to evacuate the area immediately. The eruption has also caused a number of flights to be cancelled, leaving many tourists stranded. The situation is still developing, and authorities are working to contain the eruption and ensure the safety of everyone in the area.</p></article>
<figure class="cover-image">
  <img src="https://ikozmik.com/Content/Images/uploaded/its-free-featured.jpg"></figure>

<article class="small-article1">
<h3>Sports: Local Team Wins Championship</h3>
<p>Hockey fans are celebrating today as the local team has won the championship. The team, which has been on a winning streak all season, clinched the title in a thrilling final match. Fans took to the streets to celebrate the victory, waving flags and chanting the team's name.</p></article>

<article class="small-article2">
<h3>Health: Tips for a Balanced Diet</h3>
<p>A diet high in calories, sugar, and unhealthy fats can lead to a variety of health problems, including obesity, diabetes, and heart disease. To maintain a healthy weight and reduce your risk of chronic diseases, it's important to eat a balanced diet that includes a variety of nutrient-rich foods. Here are some tips for eating a balanced diet:</p></article>

<article class="small-article3">
  <h3>
Travel: Top 10 Destinations for 2025</h3>
<p>
Traveling is one of the best ways to experience new cultures, meet new people, and see the world. If you're looking for inspiration for your next trip, here are the top 10 destinations for 2025:</p></article>

<article class="secondary-article">
<h2>Technology: The Rise of AI</h2>
<p>
Artificial intelligence (AI) is changing the way we live and work. From self-driving cars to virtual assistants, AI is revolutionizing the world around us. But what exactly is AI, and how does it work? In this article, we'll explore the rise of AI and its impact on society.</p></article>
</main>
</body>

</html>

/* file: styles.css */



.newspaper-layout{
  display:grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto 1fr 1fr 1fr;
grid-template-areas: 
'title title title'
'feature-article feature-article cover-image'
'secondary-article secondary-article cover-image'
'small-article1 small-article2 small-article3'
'secondary-article secondary-article secondary-article';
  gap:20px;
}

.title{
  grid-area: title;
  text-align:center;
  background-color: black;
  color: white;
  border-radius: 0 0 10px 10px;
}

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

img{
  max-width:100%;
}
.cover-image{
  grid-area: cover-image;
}

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

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

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

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


:has(> h3){
  padding:20px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/145.0.0.0 Safari/537.36

Challenge Information:

Design a Newspaper Layout - Design a Newspaper Layout

2

It looks like you have a fifth line that the user stories didn´t asked for in your grid template.

off: That´s looks clever. :+1:

:has(> h3){
  padding:20px;
}

Where did you learned it?

3

I learned about the :has pseudo-class as well as the direct child > combinator in previous lessons.

And during this lab I wondered if there was a way to select all parent elements that have a direct child of h3? So I googled it and found this. :has(> h3)

I agree it’s nifty!

For the record I fixed my mistakes for user stories on this as well :grin:

1 Like