A) Nach dem Download

Die ZIP-Datei wird extrahiert (entpackt) und im Verzeichnis src sind diese 2 Dateien für das Objekt "HTML":

1) Datei index.html - öffnen z.B. mit dem Windows Editor - der ganze Code wird kopiert und im HTML-Objekt unter "HTML Code" eingefügt.

2) Datei style.css - auch öffnen z.B. mit Windows Editor - der ganze Code wird kopiert und im HTML-Objekt unter "Erweitert" eingefügt.

B) Timeline mit eigenen Inhalten füllen

Jetzt geht es daran beim HTML-Teil, der im HTML-Objekt unter "HTML Code" eingefügt wurde, die vorgegebenen Inhalte durch eigene Inhalte zu ersetzen und bei Bedarf den kompletten Code-Abschnitt für eine Jahreszahl zu kopieren und darunter einzufügen, um die Timeline zu erweitern.

1) Musterabschnitt für jeweils eine Jahreszahl

Hinweis: Diese Abschnitte werden untereinander gesetzt, um die Timeline zu erweitern.

<li style="--accent-color:#41516C">

       <div class="date">2002</div>

       <div class="title">Title 1</div>

       <div class="descr">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quas itaque hic quibusdam fugiat est numquam harum, accusamus suscipit consequatur laboriosam!</div>

   </li>

2) Erklärung der einzelnen Code-Zeilen

Hinweis: Geändert wird nur der als Fett gekennzeichnete Teil, das Rest bleibt unverändert.

a) Angabe der Farbe für die Kreise und die Hintergründe der Jahreszahlen

<li style="--accent-color:#41516C">

b) Angabe der Jahreszahl

<div class="date">2002</div>

c) Hier steht die Überschrift

<div class="title">Title 1</div>

d) Und hier der große Text

<div class="descr">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quas itaque hic quibusdam fugiat est numquam harum, accusamus suscipit consequatur laboriosam!</div>

3) Hilfreiche Infos

Farb-Codes für die Kreise und Hintergründe gibt es z.B. hier

>> https://bfw.ac.at/020/farbtabelle.html