Karty s cenami

Teď tři karty s cenami. Stojí vedle sebe v řadě, 16 pixelů od sebe, a dohromady vyplňují celou šířku obsahu stránky. Každá karta potřebuje aspoň 200 pixelů, takže na úzké obrazovce se do jedné řady všechny nevejdou. V řadě pak zůstane tolik karet, kolik se jich vejde, ostatní se přesunou do další řady o 16 pixelů níž a karty v každé řadě se roztáhnou, aby ji vyplnily.

Popisy v kartách jsou různě dlouhé, ale karty v jedné řadě jsou stejně vysoké. Tlačítka Vybrat jsou úplně dole v kartách, aby byla všechna ve stejné výšce.

Abyste viděli, jak se karty zalamují, zužte okno prohlížeče (nebo ho rozšiřte, pokud se už zalamují).

Po tomto cvičení 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

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: každá karta je flex položka, ale i její vlastní obsah můžete rozložit pomocí flexboxu, a to do sloupce. A vzpomeňte si, které položky dostanou volné místo.

Pokyny

Karty stojí vedle sebe, 16 pixelů od sebe, a vyplňují šířku obsahu stránky. Každá karta je široká aspoň 200 pixelů: karty, které se nevejdou, se přesunou do další řady o 16 pixelů níž a také ji vyplní.

Tlačítka Vybrat jsou úplně dole ve svých kartách, všechna ve stejné výšce.

Začněte programovat zdarma

2/3