diff --git a/web/12/demos/00_simplebox.html b/web/12/demos/00_simplebox.html new file mode 100644 index 0000000..6c3305b --- /dev/null +++ b/web/12/demos/00_simplebox.html @@ -0,0 +1,14 @@ + + + + + + Gestylte Box + + +
+

Willkommen!

+ Dies ist eine einfache Box.
Container
Container
+
+ + diff --git a/web/12/demos/00_styles_simplebox.css b/web/12/demos/00_styles_simplebox.css new file mode 100644 index 0000000..d35a556 --- /dev/null +++ b/web/12/demos/00_styles_simplebox.css @@ -0,0 +1,22 @@ +.simple-box { + background-color: #78abda; + font-family: Arial, sans-serif; + + width: 300px; + height: 300px; + padding: 20px; + border: 2px solid #333; + border-radius: 10px; + margin: 30px; +} + +.oben { + background-color: #e5f41d; + height: 20%; + margin-bottom: 15px; +} +.unten { + background-color: red; + height: 20%; + margin-top: 5px; +} \ No newline at end of file diff --git a/web/12/demos/01_centered.html b/web/12/demos/01_centered.html new file mode 100644 index 0000000..b173d30 --- /dev/null +++ b/web/12/demos/01_centered.html @@ -0,0 +1,31 @@ + + + + + + Zentrierung mit CSS + + + + +
+
+

Die Luft ist klar, die Nächte still, ein weißer Schleier deckt das Land. Die Kälte ruht, wie sie es will, + und malt mit Frost die Bäume zart.

+
+
+

Ein Funken Glanz im Kerzenlicht, die Stille trägt ein sanftes Kleid. Der Winter zeigt sein stilles + Gesicht, und schenkt uns Ruhe, tiefe Zeit.

+
+ +
+ + + \ No newline at end of file diff --git a/web/12/demos/01_styles_centered.css b/web/12/demos/01_styles_centered.css new file mode 100644 index 0000000..3e32729 --- /dev/null +++ b/web/12/demos/01_styles_centered.css @@ -0,0 +1,17 @@ +.outer-box { + width: 400px; + height: 400px; + background-color: #112588; + + overflow: scroll; +} + +.centered-box { + width: 200px; + background-color: #e8f1f2; + border: 4px solid #95d4ea; + padding: 15px; + + text-align: center; + margin: auto; +} \ No newline at end of file diff --git a/web/12/demos/02_positioning.html b/web/12/demos/02_positioning.html new file mode 100644 index 0000000..2a4f2e0 --- /dev/null +++ b/web/12/demos/02_positioning.html @@ -0,0 +1,13 @@ + + + + + + Absolute Positionierung + + +
+
+
+ + \ No newline at end of file diff --git a/web/12/demos/02_styles_positioning.css b/web/12/demos/02_styles_positioning.css new file mode 100644 index 0000000..3e4085e --- /dev/null +++ b/web/12/demos/02_styles_positioning.css @@ -0,0 +1,35 @@ +.logo-container{ + background-color: magenta; + position: absolute; + + height: 8%; + width: 5%; + top: 0%; + left: 0%; + + /* z-index: 1; */ +} + +.navbar-container{ + background-color: orange; + + height: 8%; + width: 95%; + + position: absolute; + top: 0%; + left:5%; + + /* z-index: 0; */ +} + +.content-container{ + background-color: cyan; + position: absolute; + + height: 92%; + width: 100%; + + top: 8%; + left: 0%; +} \ No newline at end of file diff --git a/web/12/demos/03_Lieblingsbuecher.html b/web/12/demos/03_Lieblingsbuecher.html new file mode 100644 index 0000000..f600d77 --- /dev/null +++ b/web/12/demos/03_Lieblingsbuecher.html @@ -0,0 +1,67 @@ + + + + + + + Meine Lieblingsbücher + + + + +
+ Buecher +
+ + + +
+

Lieblingsbücher

+ +
+ Die + Einladung +
+
+ Sebastian Fitzek +
+ ca. 400 +
+
+ Monster +

+ Nele Neuhaus +
+ ca. 560 +
+
+ Eine Frage + der Chemie

+ Bonnie Garmus +
+ ca. 464 +
+ +
+ Die Waffen + des Lichts

+ Ken Follett
+ ca. 880 +
+
+ + + + \ No newline at end of file diff --git a/web/12/demos/03_styles_Lieblingsbuecher.css b/web/12/demos/03_styles_Lieblingsbuecher.css new file mode 100644 index 0000000..7b6b074 --- /dev/null +++ b/web/12/demos/03_styles_Lieblingsbuecher.css @@ -0,0 +1,66 @@ +body { + margin: 0; + padding: 0; +} + +#logo-container { + background-color: cadetblue; + width: 10%; + height: 10%; + position: absolute; + top: 0%; + left: 0%; + /* z-index: 1; */ +} + +#logo-container img { + display: block; + height: 100%; + margin: auto; + /* z-index: 1; */ +} + +#navbar-container { + background-color: rgb(155, 207, 209); + width: 90%; + height: 10%; + position: absolute; + top: 0%; + left: 10%; +} + +#navbar-container a, +#navbar-container a:visited { + display: flex; + float: left; + width: 20%; + height: 100%; + justify-content: center; + align-items: center; + text-decoration: none; + color: rgb(4, 60, 116); +} + +#navbar-container a:hover { + background-color: rgb(225, 236, 236); +} + +.content-container { + background-color: rgb(229, 228, 222); + width: 100%; + height: 100%; + position: absolute; + top: 10%; + left: 0%; + text-align: center; +} + +.buch-element { + display: block; + float: left; + background-color: rgb(210, 194, 168); + height: 150px; + width: 18%; + padding: 1.5em 0; + margin: 10px 1% 10px 1%; +} \ No newline at end of file diff --git a/web/12/demos/img/buecher.png b/web/12/demos/img/buecher.png new file mode 100644 index 0000000..a8340d2 Binary files /dev/null and b/web/12/demos/img/buecher.png differ diff --git a/web/12/labor/12_aufgaben.md b/web/12/labor/12_aufgaben.md new file mode 100644 index 0000000..bb904a4 --- /dev/null +++ b/web/12/labor/12_aufgaben.md @@ -0,0 +1,34 @@ +# Übungsblatt 12 + +## 1. CSS-Übung: Box-Modell + +**Aufgabenstellung**: Setzen Sie diese Skizze in HTML und CSS um. Alle wichtigen Maße und Angaben für Ihren `
`-Container sind vorgegeben. + +![Skizze mit Maßen](uebung01.png) + +## 2. CSS-Übung: Positionierung + +**Aufgabenstellung**: Setzen Sie diese Skizze in HTML und CSS um. Alle wichtigen Maße und Angaben für die verschiedenen `
`-Container sind vorgegeben. + +![Skizze mit Maßen](uebung02.png) + +#### Hinweise +1. Sie dürfen `1cm` in `1px` darstellen. +2. Die Farben dürfen frei gewählt werden. + +## 3. CSS und Javascript: Adventskalender + +**Aufgabenstellung**: Erstellen Sie einen einfachen Adventskalender in HTML, CSS und Javascript. + +#### Arbeitsschritte +1. Erstellen Sie eine HTML-Seite mit der Überschrift "Adventskalender". +2. Es sollen 24 Kästchen (Türchen) auf der Webseite in ansprechenden/passenden Farben (Hintergrund und Rahmen) und Format zu sehen sein. Jedes Türchen trägt **in der Mitte** eine Nummer zwischen 1-24 als Inhalt. +3. Die Türchen werden so angeordnet, dass jedes Element **links im Container ansetzt** und die folgenden Elemente direkt daneben erscheinen, bis die verfügbare Breite erschöpft ist. +4. **Beim Klicken** auf ein Türchen wird zunächst geprüft, ob es überhaupt geöffnet werden darf (Türchen-Nummer mit heutigem Datum vergleichen). +5. Falls das Öffnen erlaubt ist, ändert sich die Hintergrundfarbe des Türchens und der Inhalt wird durch dieses Zeichen ausgetauscht: "\u{1F381}". +6. Falls das Öffnen noch nicht erlaubt ist, erscheint eine Meldung "Noch schläft das Türchen – wie ein Geschenk unter dem Baum.". + +#### Hinweise +1. Die Kästchen dürfen auch dynamisch erzeugt werden (mit Javascript). +2. Für die Prüfung können Sie das `Date`-Objekt von Javascript verwenden. +3. Um einem DOM-Element dynamisch eine CSS-Klasse hinzufügen können Sie die `classList`-API in Javascript verwenden. \ No newline at end of file diff --git a/web/12/labor/uebung01.png b/web/12/labor/uebung01.png new file mode 100644 index 0000000..9b5fcb7 Binary files /dev/null and b/web/12/labor/uebung01.png differ diff --git a/web/12/labor/uebung02.png b/web/12/labor/uebung02.png new file mode 100644 index 0000000..3ab91c3 Binary files /dev/null and b/web/12/labor/uebung02.png differ