CSS · expert

Ceník se třemi tarify

Tři tarify vedle sebe, všechny karty stejně vysoké a tlačítka zarovnaná dole. Prostřední tarif je zvýrazněný červeným rámečkem a štítkem „Nejoblíbenější“, který přečuhuje přes horní okraj. Odrážky v seznamech nahraďte červenými fajfkami.

Do 600 px šířky jsou karty pod sebou. Přepněte náhled na Mobil a porovnejte i ten.

Štítek ani fajfky nejsou v HTML. Musíte je vyrobit v CSS.

HTML · hotové, neměňte

Vaše CSS · ukládá se v tomhle prohlížeči

Nápověda

Tři stejné sloupce: grid s repeat(3, 1fr). Karty v jednom řádku gridu jsou automaticky stejně vysoké.
Tlačítko dolů: karta je flex sloupec a seznam dostane flex: 1, takže zabere volné místo.
Štítek je ::before s content, position: absolute na kartě s position: relative, vycentrovaný přes left: 50% a translateX(-50%).
Fajfka: list-style: none na seznamu a li::before s content: "✓ ".

Ukázat vzorové řešení

Co se hodí: Grid, Pozicování, Pseudoelementy, Media queries.