Tell us what’s happening:
Tests 13-16 do not seem to pass the validation . I checked my CSS and I don’t notice any bugs.
Your code so far
<!-- file: index.ht<!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 Chronicle</h1>
</header>
<article class="feature-article">
<h2>Historic Peace Agreement Signed</h2>
<p>In a landmark event that has captured global attention, world leaders from rival nations came together yesterday to sign a historic peace agreement. The ceremony, held at the United Nations headquarters, marks the end of a decades-long conflict that has claimed thousands of lives. The agreement includes provisions for mutual disarmament, economic cooperation, and cultural exchange programs. Diplomatic experts are calling this the most significant peace accord of the 21st century, with potential implications for global stability and international relations for generations to come.</p>
</article>
<figure class="cover-image">
<img src="https://images.unsplash.com/photo-1588681664899-f142ff2dc9b1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
alt="Historic peace agreement signing ceremony at UN headquarters">
</figure>
<article class="secondary-article">
<h2>Tech Giant Unveils Revolutionary AI System</h2>
<p>A leading technology company has announced the development of what it calls "the most advanced artificial intelligence system ever created." The new AI, named "Synapse," can reportedly understand and respond to complex human emotions, engage in creative writing, and solve scientific problems that have stumped researchers for years. While the breakthrough promises to revolutionize industries from healthcare to education, it has also reignited debates about AI ethics and regulation. The company claims to have implemented unprecedented safety measures, but critics argue for immediate government oversight.</p>
</article>
<article class="small-article1">
<h3>Local Election Results Shake Political Landscape</h3>
<p>Surprising outcomes in yesterday's municipal elections have upended traditional political strongholds, with several independent candidates defeating established party representatives. Voter turnout reached record highs, suggesting renewed public engagement in local governance.</p>
</article>
<article class="small-article2">
<h3>Climate Conference Yields Mixed Results</h3>
<p>While the international climate summit produced agreements on renewable energy targets, negotiations collapsed on carbon taxation policies. Environmental groups express cautious optimism but emphasize that the agreed measures fall short of what scientists deem necessary.</p>
</article>
<article class="small-article3">
<h3>Breakthrough in Renewable Energy Storage</h3>
<p>Researchers have announced a significant advancement in battery technology that could make solar and wind power more viable. The new storage system promises to increase capacity while reducing costs by nearly 40%, potentially accelerating the transition away from fossil fuels.</p>
</article>
</main>
</body>
</html>ml -->
/* file: st * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Georgia, 'Times New Roman', Times, serif;
line-height: 1.6;
padding: 20px;
background-color: #f5f5f5;
}
/* Main Newspaper Layout */
.newspaper-layout {
display: grid;
grid-template-columns: 1fr 1fr 1fr; /* Three equal columns */
grid-template-rows: auto 1fr 1fr 1fr; /* Auto for title, equal for others */
grid-template-areas:
"title title title"
"feature-article feature-article cover-image"
"secondary-article secondary-article cover-image"
"small-article1 small-article2 small-article3";
gap: 20px;
max-width: 1200px;
margin: 0 auto;
background-color: white;
padding: 30px;
box-shadow: 0 0 20px rgba(0,0,0,0.1);
border: 2px solid #333;
}
/* Grid Area Assignments */
.title {
grid-area: title;
text-align: center;
border-bottom: 3px double #333;
padding-bottom: 15px;
margin-bottom: 10px;
}
.title h1 {
font-size: 3.5rem;
font-family: "Times New Roman", serif;
letter-spacing: 2px;
color: #222;
text-transform: uppercase;
}
.feature-article {
grid-area: feature-article;
border-right: 1px solid #ddd;
padding-right: 20px;
}
.feature-article h2 {
font-size: 2rem;
color: #b30000;
margin-bottom: 15px;
border-bottom: 2px solid #b30000;
padding-bottom: 8px;
}
.feature-article p {
font-size: 1.1rem;
text-align: justify;
}
.secondary-article {
grid-area: secondary-article;
border-right: 1px solid #ddd;
padding-right: 20px;
padding-top: 20px;
}
.secondary-article h2 {
font-size: 1.8rem;
color: #0066cc;
margin-bottom: 15px;
border-bottom: 2px solid #0066cc;
padding-bottom: 8px;
}
.cover-image {
grid-area: cover-image;
padding-left: 20px;
}
.cover-image img {
max-width: 100%;
height: auto;
border: 1px solid #ccc;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.small-article1 {
grid-area: small-article1;
border-top: 1px solid #ddd;
padding-top: 20px;
}
.small-article2 {
grid-area: small-article2;
border-top: 1px solid #ddd;
padding-top: 20px;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
padding-left: 20px;
padding-right: 20px;
}
.small-article3 {
grid-area: small-article3;
border-top: 1px solid #ddd;
padding-top: 20px;
}
.small-article1 h3,
.small-article2 h3,
.small-article3 h3 {
font-size: 1.3rem;
color: #333;
margin-bottom: 10px;
border-bottom: 1px solid #ddd;
padding-bottom: 5px;
}
.small-article1 p,
.small-article2 p,
.small-article3 p {
font-size: 0.95rem;
text-align: justify;
}
/* Newspaper-like styling */
article {
background-color: #fff;
}
h2, h3 {
font-weight: bold;
}
p {
margin-bottom: 15px;
color: #222;
}
/* Responsive Design */
@media (max-width: 768px) {
.newspaper-layout {
grid-template-columns: 1fr;
grid-template-rows: auto;
grid-template-areas:
"title"
"feature-article"
"cover-image"
"secondary-article"
"small-article1"
"small-article2"
"small-article3";
gap: 15px;
padding: 15px;
}
.feature-article,
.secondary-article {
border-right: none;
border-bottom: 1px solid #ddd;
padding-right: 0;
padding-bottom: 20px;
}
.small-article2 {
border-left: none;
border-right: none;
padding-left: 0;
padding-right: 0;
}
.title h1 {
font-size: 2.5rem;
}
}yles.css */
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