Die Filme dieser Woche

Als Nächstes kommen die Filme dieser Woche. Wir haben in main einen neuen Bereich mit seiner Überschrift und den Texten der drei Filme eingefügt, aber ohne Elemente darum, sodass sie in der Vorschau zu einem einzigen Textblock verschmelzen. Geben wir ihnen eine Struktur.

Jeder Film bekommt eine Karte: eine Box, die alles zu einer Sache zusammenfasst. Websites sind voller Karten: Produkte in einem Shop, Artikel, Profile. Eine Karte hat in HTML keine besondere Bedeutung, deshalb ist sie ein div mit einer Klasse für die Gestaltung. In der Karte ist der Name des Films eine Überschrift der dritten Ebene, weil er unter der Überschrift Diese Woche steht. Genre und Länge kommen in einen Absatz mit der Klasse details, der kleiner und grau wird, und die Beschreibung in einen eigenen Absatz:

<div class="film">
    <h3>Der Leuchtturmwärter</h3>
    <p class="details">Drama · 112 Min.</p>
    <p>Ein Leuchtturmwärter auf einer einsamen Insel findet eine Flaschenpost, die alles verändert.</p>
</div>

Schließlich kommen alle drei Karten in ein weiteres div mit der Klasse filme. In CSS stellt es die Karten nebeneinander.

Tipp: Du musst die Texte nicht abtippen. Setze die Tags um die Texte, die schon im Editor stehen.