Repetition Websites

1. Erstelle an passender Stelle in deiner Ordnerstruktur einen Ordner namens „Buttons“.
2. Öffne Visual Studio Code (VSC) und öffne dort diesen Ordner.
3. Erstelle in VSC innerhalb des Ordners „Buttons“ vier neue Dateien: index.html, style.css, red.html und blue.html
4. Erstelle in index.html die html-Grundstruktur mit den Tags html, head, title, body.
5. Binde in index.html die Datei style.css ein.
6. Bearbeite index.html und style.css so, dass die html-Datei möglichst genau so aussieht:
7. Wenn du auf den roten Button klickst, wird die Seite red.html geöffnet, wenn du auf die blauen Button klickst, wird die Seite blue.html geöffnet.
8. Beide Dateien zeigen eine beliebige Nachricht in grosser, weisser Schrift. Die Hintergrundfarbe von red.html ist rot, diejenige von blue.html blau.

• Verwende Links als Buttons. Mit CSS-Eigenschaften wie padding, border-style, background-color, text-decoration, text-align etc. kannst du die Links wie Buttons aussehen lassen.

Erweitere die CSS-Datei so, dass die Buttons die Farbe wechseln, wenn du den Mauszeiger darüber bewegst.

• Der rote Button soll heller werden (coral), seine Schrift dunkel (darkred)
• Der blaue Button soll heller werden (cornflowerblue), seine Schrift dunkel (darkblue)