Website: News - Text Magic

15. News

Because every rebellion needs good news

Mentor Hiram Abif

Hiram studies the draft with a critical eye, then slides a piece of parchment across the table. “If you want people to believe in something, you have to give them a reason. Hope fuels a rebellion.
So we need a section that shows we’re making progress.”

He sketches a rough structure.
“Use Flexbox. The content should align cleanly, grow flexibly, and look good on every screen size.”

He taps the drawing.
“Nest the boxes properly. Headline first, then the main areas – and within those, the individual messages. Think logically – this shouldn’t look like a pile of random flyers.”

Seraphina leans over the table.
“And if you do it right, you’ll only need a few lines of code. So work smart – not complicated.”

Your task

Build the news layout.

While writing your HTML, keep an eye on which styles have already been defined —
there’s no need to reinvent what’s already written.

Solve the task here in the console [–> Open in a new tab]

HTML

<!-- HTML -->
<section id="news">
     <h2 class="center my-lg"><span class="secondary bold">News</span> from Aetheron</h2>
     <div class="flex news-container container">
          <!-- News-1 -->
          <div class="news bg-light">
               <img src="img/news/fungus.jpg" alt="" class="img-fluid">
               <div class="p-lg">
                    <h3 class="headline fw-bold secondary fs-title lh-sm">Love blooms under the giant mushrooms!</h3>
                    <p class="fw-bold">A mushroom creature finds its heart – proving that even curses can't stop true
                         love.</p>
                    <p>After a real laundry drama, caused by Tharnok, the brave mushroom creature not only broke the
                         curse but was finally able to meet its beloved. Under the gigantic mushrooms of Sunnyside
                         Fields, surrounded by flowers and sunbeams, the two found each other. A romantic clearing and
                         the scent of love – another victory for nature and the heart!</p>
               </div>
          </div>
          <!-- News-2 -->
          <div class="news bg-light">
               <img src="img/news/gingerbread.jpg" alt="" class="img-fluid">
               <div class="p-lg">
                    <h3 class="headline fw-bold secondary fs-title lh-sm">A sweet secret revealed</h3>
                    <p class="fw-bold">The gingerbread house of Sunnyside Fields holds more than just delicious recipes.
                    </p>
                    <p>The rebels discovered the gingerbread house, surrounded by golden light and the scent of
                         pastries. While a giant mechanical dog slept peacefully, questions were answered and Cobol’s
                         control over the fields weakened further. A sweet step toward freedom!</p>
               </div>
          </div>
          <!-- News-3 -->
          <div class="news bg-light">
               <img src="img/news/caelan.jpg" alt="" class="img-fluid">
               <div class="p-lg">
                    <h3 class="headline fw-bold secondary fs-title lh-sm">A spark in Greenwood Hollow – The resistance
                         is forming!</h3>
                    <p class="fw-bold">Thanks to a united message, the movement against Cobol is growing.</p>
                    <p>With the help of Caelan Ironwood and his headstrong drone Tinker, a decisive step was taken: a
                         digital platform uniting the resistance. Amid glowing flowers and the magic of Greenwood
                         Hollow, a message was born that inspires more people to join. The Flame of Greenwood burns
                         brighter than ever!</p>
               </div>
          </div>
          <!-- News-4 -->
          <div class="news bg-light">
               <img src="img/news/sonya.jpg" alt="" class="img-fluid">
               <div class="p-lg">
                    <h3 class="headline fw-bold secondary fs-title lh-sm">The Soundmaster joins the rebellion – Welcome,
                         Sonya!</h3>
                    <p class="fw-bold">With her arsenal of acoustic tricks, Sonya proved that noise can be mightier than
                         steel.</p>
                    <p>While Kragor Ironfist spread chaos, Sonya appeared with a mixture of confidence and a curious
                         collection of devices. Through her acoustic sabotage, she distracted the massive robot and gave
                         the rebels the chance to outsmart him. A loud victory – and a new, indispensable ally for the
                         Flame of Greenwood!</p>
               </div>
          </div>
          <!-- News-5 -->
          <div class="news bg-light">
               <img src="img/news/kragor.jpg" alt="" class="img-fluid">
               <div class="p-lg">
                    <h3 class="headline fw-bold secondary fs-title lh-sm">Greenwood Hollow breathes a sigh of relief –
                         Kragor Ironfist sent for maintenance!</h3>
                    <p class="fw-bold">With a touch of bureaucracy and a hologram, the victory was perfect.</p>
                    <p>The rebels used creativity and bureaucracy to stop Kragor Ironfist. A holographic form convinced
                         the mighty machine warrior that an overhaul was necessary. With monotonous precision, he
                         marched toward the workshop, and Greenwood Hollow is finally free. A triumph for the Flame of
                         Greenwood – and a moment to celebrate!</p>
               </div>
          </div>
     </div>
</section>

CSS

.news-container {
   flex-wrap: wrap;
   gap: var(--spacing-large)
}

.news-container>div {
   flex: 1 1 20rem;
   border-radius: var(--border-large);
}

.news img {
   border-radius: var(--border-large) var(--border-large) 0 0;
}

.news h3::first-letter {
   font-size: 3rem;
}

.news {
   box-shadow: var(--shadow-light);
}