Navigační lišta

Čas na poslední malý projekt! Tentokrát rozvrhnete stránku pomocí toho, co jste se naučili v lekcích Zobrazení a pozice a Flexbox. Stejně jako dosud pokyny říkají, jak má stránka vypadat, a jak toho dosáhnete, je na vás.

Projekt. Šťastné tlapky hlídají kočky v jejich vlastních domovech, když jsou majitelé pryč, a potřebují stránku s ceníkem. HTML i vzhled jednotlivých částí stránky (barvy, písmo, karty a tlačítka) jsou v souboru style.css připravené, ale všechno je zatím pod sebou. Ve třech cvičeních rozvrhnete navigační lištu, postavíte karty s cenami vedle sebe a zvýrazníte nejoblíbenější tarif. Každé cvičení navazuje na to předchozí.

Na konci bude stránka 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.

Úkol. Navigační lišta nahoře má logo na levém konci a odkazy na pravém konci, všechno uprostřed výšky lišty. Mezi odkazy je 24 pixelů.

Tip: odkazy jsou ve vlastním prvku div se třídou odkazy. Prvek může být zároveň flex položkou i flex kontejnerem.

Pokyny

Logo je na levém konci navigační lišty a odkazy na jejím pravém konci, všechno uprostřed výšky lišty.

Mezi odkazy je 24 pixelů.

Začněte programovat zdarma

1/3