Elementy strony dopasowane do własnego projektu. Wariant „Tabela cennika” możesz dopasować do kolorów i treści swojej strony.
Jak działa ten efekt?
HTML określa strukturę przykładu, CSS jego wygląd, a JavaScript — jeżeli występuje — odpowiada za interakcję. Podgląd pokazuje domyślne ustawienia, które możesz zmienić w edytorze.
Jak dodać go na stronę?
Otwórz przykład w edytorze i podmień tekst oraz kolory.
HTML wstaw w miejscu, w którym ma pojawić się element.
CSS przenieś do arkusza stylów swojej strony. Reguły body z podglądu dopasuj do własnego układu.
Sprawdź działanie na telefonie, klawiaturą i z własną treścią.
Na co zwrócić uwagę?
Podmień treści i odnośniki. Kod działa w przeglądarce; formularze wymagają osobnej obsługi wysyłania po stronie serwera.
Co możesz zmienić w konfiguratorze?
Plan | cena | korzyść (osobne wiersze), Tekst przycisku, Kolor akcentu, Wyróżniona pozycja, Klasa CSS. W edytorze kodu możesz dodatkowo zmienić całą strukturę i zachowanie przykładu.
Gotowy kod: Tabela cennika
HTML
<div class="pricing"><article><span>Start</span><h2>29 zł</h2><p>Jeden projekt</p><a href="#wybor-1">Wybieram ten plan</a><small id="wybor-1">Wybrano: Start</small></article><article class="featured"><span>Pro</span><h2>79 zł</h2><p>Dziesięć projektów</p><a href="#wybor-2">Wybieram ten plan</a><small id="wybor-2">Wybrano: Pro</small></article><article><span>Studio</span><h2>149 zł</h2><p>Dowolna liczba projektów</p><a href="#wybor-3">Wybieram ten plan</a><small id="wybor-3">Wybrano: Studio</small></article></div>