Filmy tohoto týdne

Dál přijdou filmy, které hrajeme tento týden. Do main jsme přidali novou sekci s nadpisem a texty tří filmů, zatím ale bez prvků kolem nich, a tak v náhledu splývají do jednoho řádku. Dejme jim strukturu.

Každý film dostane kartu: rámeček, který seskupuje všechno o jedné věci. Weby jsou karet plné: zboží v e-shopu, články, profily. HTML pro kartu žádný zvláštní prvek nemá, a proto je to div se třídou kvůli stylům. Název filmu je v kartě nadpis třetí úrovně, protože patří pod nadpis Tento týden. Žánr a délka patří do odstavce se třídou details (podrobnosti), který bude menší a šedý, a popis do vlastního odstavce:

<div class="film">
    <h3>Strážce majáku</h3>
    <p class="details">Drama · 112 min</p>
    <p>Strážce majáku na opuštěném ostrově najde v láhvi dopis, který všechno změní.</p>
</div>

Nakonec všechny tři karty vložíte do dalšího prvku div, a to se třídou films (filmy). V CSS pak karty postaví vedle sebe.

Tip: Texty nemusíte psát. Obalte tagy texty, které už v editoru jsou.

Pokyny

  1. Udělejte z prvního filmu kartu jako v ukázce: div se třídou film a v něm název v h3, žánr a délku v odstavci se třídou details a popis v dalším odstavci.

  2. Stejně udělejte karty i ze zbylých dvou filmů.

  3. Všechny tři karty vložte do prvku div se třídou films. Patří pod nadpis Tento týden, dovnitř sekce.

ZpětDalší