Vítěz

Hlasování skončilo a vyhrál Nedělní šlofík, fotka od Anny! Přidali jsme pro ni štítek: prvek span na začátku její karty. Zatím štítek překáží: odsouvá fotku dolů.

  • Vítězná karta vynikne: její rámeček je široký aspoň 2 px a má jinou barvu než rámečky ostatních karet, třeba jantarovou.
  • Štítek 🏆 Vítěz leží přes fotku v levém horním rohu karty, 12 px od jejího horního a levého okraje. Fotka zase začíná nahoře v kartě, jako by tam štítek nebyl.
  • Eva svou fotku Sněhová královna ze soutěže stáhla. Její karta je ztlumená, s neprůhledností nejvýš 60 %, takže je pořád vidět, ale už neupoutává pozornost. Ostatní karty zůstanou, jak jsou.

Tip: vzpomeňte si na štítek „Nový“ na Oskarově kartě v lekci Flexbox, Grid a pozice: štítek potřebuje pozici, a stejně tak prvek, od kterého se měří jeho posuny.

A to je celá galerie. S tím, co jste se naučili v posledních dvou lekcích, jste z obyčejných fotek udělali karty s rámečky, zaoblenými rohy a stíny, rozložili je do mřížky a umístili štítek přesně tam, kam jste chtěli. V příští lekci, Hover, focus a další stavy, zařídíte, aby tlačítka, jako je to pro hlasování, reagovala, když na ně najedete myší nebo na ně kliknete.

Pokyny

Zvýrazněte vítěznou kartu a dejte štítek do jejího levého horního rohu, přes fotku.

Ztlumte kartu stažené fotky.

Začněte programovat zdarma

Registrací souhlasíte s provozními podmínkami a zásadami ochrany osobních údajů.

Nebo se registrujte pomocí:

3/3