Nejoblíbenější tarif

Většina lidí si vybírá Denní péči, a to má stránka ukázat. Do její karty jsme přidali štítek: prvek span se třídou stitek, jehož vzhled už v souboru style.css je. Karta má také novou třídu, oblibeny.

Štítek sedí na horním kraji karty, zčásti nad kartou a zčásti v ní, v pravé polovině karty. V kartě nezabírá žádné místo, takže nadpis a zbytek obsahu jsou na stejném místě jako v ostatních kartách.

Celá karta je navíc o 8 pixelů výš než ostatní, aby vynikla. Ostatní karty se nepohnou.

Hotová stránka bude vypadat takhle (zmenšeně):

Šťastné tlapkyDomůTarifyKontakt

Hlídání koček, když jste pryč

O vaši kočku se postaráme v jejím vlastním domově, kde se cítí nejlépe. Vyberte si tarif, který vám vyhovuje.

Návštěva

290 Kč / den

Jedna návštěva denně: čerstvé jídlo a voda a čistý kočičí záchod.

Vybrat

Nejoblíbenější

Denní péče

450 Kč / den

Dvě návštěvy denně s časem na hraní a mazlení a každý večer fotka vaší kočky.

Vybrat

Plná péče

690 Kč / den

Tři návštěvy denně, čas na hraní, zalité květiny, vybraná schránka a videohovor, kdykoli se vám po kočce zasteskne.

Vybrat

Zavolejte nám na +420 123 456 789 nebo napište na ahoj@stastnetlapky.example.

Tip: v lekci Zobrazení a pozice jste umístili prvek do rohu jiného prvku. Stejná vlastnost umí posunout i samotnou kartu.

A to je celý projekt. Rozvrhli jste celou stránku: navigační lištu, karty, které se přizpůsobí šířce obrazovky, tlačítka zarovnaná dole a štítek přesně tam, kam patří. V příští lekci, CSS Grid, se naučíte rozložit prvky do řádků a sloupců najednou.

Pokyny

Štítek sedí na horním kraji prostřední karty, v její pravé polovině, a obsah karty je na stejném místě jako v ostatních kartách.

Prostřední karta je o 8 pixelů výš než ostatní karty, které zůstanou na svém místě.

Začněte programovat zdarma

3/3