From 97ecb38f48ff3ac86aef4e186366338ebe5ac95e Mon Sep 17 00:00:00 2001 From: sebi Date: Thu, 8 Aug 2024 09:38:46 +0200 Subject: [PATCH] Bis Ex4 --- Aufgabe_1/index.php | 5 +++ Aufgabe_2/index.php | 1 + Aufgabe_3/index.php | 0 aufgabe_4/index.php | 0 index.html | 88 +++++++++++++-------------------------------- styles.css | 58 ++++++++++++++++++++++++++++++ 6 files changed, 88 insertions(+), 64 deletions(-) create mode 100644 Aufgabe_1/index.php create mode 100644 Aufgabe_2/index.php create mode 100644 Aufgabe_3/index.php create mode 100644 aufgabe_4/index.php create mode 100644 styles.css diff --git a/Aufgabe_1/index.php b/Aufgabe_1/index.php new file mode 100644 index 0000000..3de36a8 --- /dev/null +++ b/Aufgabe_1/index.php @@ -0,0 +1,5 @@ +/* Schreiben Sie eine HTML-Datei, welche als Überschrift im Tab ‚Aufgabe 1‘ besitzt. Schreiben Sie eine Überschrift mit dem Inhalt ‚Mein Name‘. Geben Sie danach Ihren Namen aus. Dann soll die nächste Überschrift ‚Mein Lieblingsbild‘ kommen. Fügen Sie danach ein Bild ein. Als nächstes soll die Überschrift ‚Mein Link‘ mit einem Link zu einer Seite folgen. +Zum Schluss sollen noch zwei Listen folgen. Vor beiden Listen soll eine Überschrift stehen. Die erste Liste (ungeordnet) führt Ihre 5 Lieblingsgetränke. Die zweite Liste (geordnet) führt Ihre Einkaufsliste von Dingen die Sie brauchen. + +Achten Sie darauf, dass jedes Element in einem eigenen Paragraphen steht. Die Überschriften sollen von oben nach unter immer kleiner werden. */ + diff --git a/Aufgabe_2/index.php b/Aufgabe_2/index.php new file mode 100644 index 0000000..e623198 --- /dev/null +++ b/Aufgabe_2/index.php @@ -0,0 +1 @@ +/* Wandeln Sie die html-Datei aus Aufgabe 1 in eine PHP-Datei um. Fügen Sie ganz unten noch das aktuelle Datum und die aktuelle Uhrzeit ein. Sie müssen nicht alle HTML-Elemente mit einem echo-Befehl ausgeben. Es reicht, dass Sie das Datum und die Uhrzeit mit ausgeben. Verwenden Sie die kleinste Größe für die Überschrift. */ \ No newline at end of file diff --git a/Aufgabe_3/index.php b/Aufgabe_3/index.php new file mode 100644 index 0000000..e69de29 diff --git a/aufgabe_4/index.php b/aufgabe_4/index.php new file mode 100644 index 0000000..e69de29 diff --git a/index.html b/index.html index 31579ba..d6f4515 100644 --- a/index.html +++ b/index.html @@ -1,71 +1,31 @@ - - -Mehrere Aufgaben - + + + Übungsaufgaben Übersicht + - -
-
-

Aufgabe 1 - HTML

-

Hier steht die detaillierte Aufgabenbeschreibung für Aufgabe 1.

- Weiter zur Aufgabe 1 -
-
-

Aufgabenüberschrift 2

-

Hier steht die detaillierte Aufgabenbeschreibung für Aufgabe 2.

- Weiter zur Aufgabe 2 -
- -
- +
+

Übungsaufgaben Übersicht

+
+
+
+
+ Übungsaufgabe 1: Einführung in HTML +
+
+ Übungsaufgabe 2: Datum & Uhrzeit in PHP +
+
+ Übungsaufgabe 3: Ausgabe +
+
+ Übungsaufgabe 4: Konkatination +
+ +
+
diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..3cfb03a --- /dev/null +++ b/styles.css @@ -0,0 +1,58 @@ +/* Grundlegende Styles für den gesamten Body */ +body { + font-family: Arial, sans-serif; + background-color: #f4f4f9; + margin: 0; + padding: 0; +} + +/* Header-Styling */ +header { + background-color: #4CAF50; + color: white; + padding: 10px 0; + text-align: center; +} + +/* Main-Styling */ +main { + display: flex; + justify-content: center; + align-items: center; + height: calc(100vh - 60px); /* Höhe minus Header-Höhe */ + padding: 20px; +} + +/* Container für die Aufgabenliste */ +.task-list { + max-width: 600px; + width: 100%; + margin: 0 auto; +} + +/* Styling für einzelne Aufgaben */ +.task-item { + background-color: #fff; + border: 1px solid #ddd; + border-radius: 8px; + box-shadow: 0 2px 5px rgba(0,0,0,0.1); + margin-bottom: 20px; + transition: background-color 0.3s, box-shadow 0.3s; +} + +.task-item a { + display: block; + padding: 15px; + text-decoration: none; + color: #333; + font-size: 18px; +} + +.task-item:hover { + background-color: #f0f8ff; + box-shadow: 0 4px 10px rgba(0,0,0,0.2); +} + +.task-item a:hover { + color: #4CAF50; +}