Karta s fotkou

Čas na další projekt! Tento miniprojekt využije poslední dvě lekce: rámečky, stíny a obrázky a rozvržení pomocí flexboxu, mřížky a pozice. Stejně jako v prvním miniprojektu cvičení popisují výsledek a třídy jsou na vás. Kde popis neudává přesnou velikost nebo barvu, zvolte si vlastní.

Projekt. Kočičí časopis pořádá fotosoutěž a jeho čtenáři hlasují pro nejlepší fotku. Ve třech cvičeních uděláte z fotky kartu, rozložíte karty do galerie a vyhlásíte vítěze. Barvy a text stránky jsou hotové, takže se můžete soustředit na karty a rozvržení. Stejně jako minule měňte jen třídy, ne prvky, a každé cvičení začíná hotovou stránkou z předchozího.

Nakonec bude horní část galerie vypadat takhle:

🏆 Vítěz

Nedělní šlofík

📷 Anna♥ 128

Inspektor krabic

📷 Tomáš♥ 96

Karta s fotkou. V editoru je první soutěžní fotka: prvek article s obrázkem a prvkem div, ve kterém je název fotky, jméno jejího autora a tlačítko pro hlasování s počtem hlasů. Udělejte z ní kartu:

• Karta je bílá, se světlým rámečkem (ne v tmavé barvě textu), zaoblenými rohy a stínem.
• Fotka vyplní celou šířku karty a je čtvercová. Není zmáčknutá: co se do čtverce nevejde, se ořízne.
• Horní rohy fotky jsou zaoblené spolu s rohy karty, takže nepřečnívají.
• Tlačítko pro hlasování má tvar pilulky: jeho konce jsou půlkruhy.