Elementy strony dopasowane do własnego projektu. Wariant „Oś czasu” 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?
Data | tytuł | opis (osobne wiersze), Kolor osi, Klasa CSS. W edytorze kodu możesz dodatkowo zmienić całą strukturę i zachowanie przykładu.
Gotowy kod: Oś czasu
HTML
<div class="timeline"><article><span>01</span><h3>Pomysł</h3><p>Ustalamy kierunek i cele.</p></article><article><span>02</span><h3>Projekt</h3><p>Nadajemy pomysłowi formę.</p></article><article><span>03</span><h3>Wdrożenie</h3><p>Publikujemy gotową stronę.</p></article></div>