diff --git a/web/12/labor/loesungen/styles_uebung01.css b/web/12/labor/loesungen/styles_uebung01.css
new file mode 100644
index 0000000..5775ec6
--- /dev/null
+++ b/web/12/labor/loesungen/styles_uebung01.css
@@ -0,0 +1,6 @@
+div{
+ background-color: #71F5D1;
+ width: 250px;
+ padding: 20px 5px 25px;
+ margin: 100px auto;
+}
\ No newline at end of file
diff --git a/web/12/labor/loesungen/styles_uebung02.css b/web/12/labor/loesungen/styles_uebung02.css
new file mode 100644
index 0000000..5b90f9d
--- /dev/null
+++ b/web/12/labor/loesungen/styles_uebung02.css
@@ -0,0 +1,62 @@
+#box1{
+ background-color: red;
+ width: 113px;
+ height: 207px;
+ position: absolute;
+ top: 0px;
+ left: 0px;
+}
+
+#box2{
+ background-color: yellow;
+ width: 93px;
+ height: 38px;
+ position: absolute;
+ top: 0px;
+ left: 113px;
+}
+
+#box3{
+ background-color: magenta;
+ width: 93px;
+ height: 107px;
+ position: absolute;
+ top: 38px;
+ left: 113px;
+}
+
+#box4{
+ background-color: cyan;
+ width: 93px;
+ height: 107px;
+ position: absolute;
+ top: 145px;
+ left:113px;
+}
+
+#box5{
+ background-color: green;
+ width: 113px;
+ height: 45px;
+ position: absolute;
+ top: 207px;
+ left: 0px;
+}
+
+#box6{
+ background-color: purple;
+ width: 166px;
+ height: 45px;
+ position: absolute;
+ top: 252px;
+ left: 0px;
+}
+
+#box7{
+ background-color: gray;
+ width: 40px;
+ height: 45px;
+ position: absolute;
+ top: 252px;
+ left: 166px;
+}
diff --git a/web/12/labor/loesungen/styles_uebung03.css b/web/12/labor/loesungen/styles_uebung03.css
new file mode 100644
index 0000000..8cef456
--- /dev/null
+++ b/web/12/labor/loesungen/styles_uebung03.css
@@ -0,0 +1,17 @@
+.tuerchen {
+ font-size: 2em;
+ width: 120px;
+ height: 120px;
+ border: 4px solid green;
+ margin: 2px;
+ background-color: brown;
+ color: white;
+ float: left;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.offen {
+ background-color: gold;
+}
\ No newline at end of file
diff --git a/web/12/labor/loesungen/uebung01.html b/web/12/labor/loesungen/uebung01.html
new file mode 100644
index 0000000..7b71d40
--- /dev/null
+++ b/web/12/labor/loesungen/uebung01.html
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+ Übung 01
+
+
+ Übung zum Box-Modell
+
+
\ No newline at end of file
diff --git a/web/12/labor/loesungen/uebung02.html b/web/12/labor/loesungen/uebung02.html
new file mode 100644
index 0000000..1b24784
--- /dev/null
+++ b/web/12/labor/loesungen/uebung02.html
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+ Übung 01
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/web/12/labor/loesungen/uebung03.html b/web/12/labor/loesungen/uebung03.html
new file mode 100644
index 0000000..20faa14
--- /dev/null
+++ b/web/12/labor/loesungen/uebung03.html
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+
+ Adventskalender
+
+
+
+ Adventskalender
+
+
+
+
+
\ No newline at end of file
diff --git a/web/12/labor/loesungen/uebung03.js b/web/12/labor/loesungen/uebung03.js
new file mode 100644
index 0000000..5b4985a
--- /dev/null
+++ b/web/12/labor/loesungen/uebung03.js
@@ -0,0 +1,23 @@
+const kalender = document.getElementById("kalender");
+const heuteTag = new Date().getDate();
+const heuteMonat = new Date().getMonth();
+const geschenk = "\u{1F381}";
+const baum = "\u{1F384}";
+
+for (let i = 1; i <= 24; i++) {
+ const tuer = document.createElement("div");
+ tuer.classList.add("tuerchen");
+ tuer.textContent = i;
+
+ tuer.addEventListener("click", () => {
+ if (i <= heuteTag && heuteMonat === 11) {
+ tuer.classList.add("offen");
+ tuer.textContent = geschenk;
+ } else {
+ alert("Noch schläft das Türchen – wie ein Geschenk unter dem " + baum)
+ }
+ });
+
+ kalender.appendChild(tuer);
+}
+