This Week's Films

Next come the films that are on this week. We've added a new section to main with its heading and the texts of the three films, but without any elements around them, so in the preview, they run together into one block of text. Let's give them their structure.

Each film gets a card: a box that groups everything about one thing. Websites are full of cards: products in a shop, articles, profiles. A card has no special meaning in HTML, so it's a div, with a class for styling. In the card, the film's name is a heading of the third level, because it belongs under the heading This week. The genre and the length go in a paragraph with the class details, which will be smaller and gray, and the description goes in a paragraph of its own:

<div class="film">
    <h3>The Lighthouse Keeper</h3>
    <p class="details">Drama · 112 min</p>
    <p>A keeper on a lonely island finds a message in a bottle that changes everything.</p>
</div>

Finally, all three cards go into one more div, with the class films. In CSS, it will put the cards side by side.

Tip: You don't need to type the texts. Put the tags around the texts that are already in the editor.