diff --git a/webseiten_dev/Download.jpg b/webseiten_dev/Download.jpg
new file mode 100644
index 0000000..e1af72c
Binary files /dev/null and b/webseiten_dev/Download.jpg differ
diff --git a/webseiten_dev/Pin on Guardado rápido.jpg b/webseiten_dev/Pin on Guardado rápido.jpg
new file mode 100644
index 0000000..94fcc49
Binary files /dev/null and b/webseiten_dev/Pin on Guardado rápido.jpg differ
diff --git a/webseiten_dev/Screenshot 2024-01-15 105310.jpg b/webseiten_dev/Screenshot 2024-01-15 105310.jpg
new file mode 100644
index 0000000..ca2ac96
Binary files /dev/null and b/webseiten_dev/Screenshot 2024-01-15 105310.jpg differ
diff --git a/webseiten_dev/ToDO.html b/webseiten_dev/ToDO.html
new file mode 100644
index 0000000..5853b4f
--- /dev/null
+++ b/webseiten_dev/ToDO.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
+<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
+<style>
+    
+    body{
+    height: 100%;
+    background-image: linear-gradient(to right,  rgba(21, 45, 70, 0.192), rgba(40, 16, 63, 0.178)), url(Download.jpg);
+    background-size: cover;
+    background-attachment: fixed;
+}
+    .demo-list-control {
+  width: 300px;
+}
+.button1{
+  background-color: #bcbe1a;
+}
+   </style>
+
+     <script>
+      function clearTodo(){
+        todolist.innerHTML ="";
+      }
+function addTodo(){
+    // alert("Hallo");
+     
+    todolist.innerHTML += `
+    <li class="mdl-list__item">
+              <span class="mdl-list__item-primary-content">
+                <i class="material-icons  mdl-list__item-avatar">extension</i>
+                <p style="color: #1E72DF"  >${todofield.value}</p>
+              </span>
+              <span class="mdl-list__item-secondary-action">
+                <label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="list-checkbox-1">
+                  <input type="checkbox" id="list-checkbox-1" class="mdl-checkbox__input" checked />
+                </label>
+              </span>
+            </li>
+    `;
+}
+     </script>
+</head>
+<body>
+    <!-- Always shows a header, even in smaller screens. -->
+<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
+    <header class="mdl-layout__header">
+      <div class="mdl-layout__header-row">
+        <!-- Title -->
+        <span class="mdl-layout-title">To Do Liste</span>
+        <!-- Add spacer, to align navigation to the right -->
+        <div class="mdl-layout-spacer"></div>
+        <!-- Navigation. We hide it in small screens. -->
+        <nav class="mdl-navigation mdl-layout--large-screen-only">
+          <a class="mdl-navigation__link" href="">Link</a>
+          <a class="mdl-navigation__link" href="">Link</a>
+          <a class="mdl-navigation__link" href="">Link</a>
+          <a class="mdl-navigation__link" href="">Link</a>
+        </nav>
+      </div>
+    </header>
+    <div class="mdl-layout__drawer">
+      <span class="mdl-layout-title">To Do Liste</span>
+      <nav class="mdl-navigation">
+        <a class="mdl-navigation__link" href="">Link</a>
+        <a class="mdl-navigation__link" href="">Link</a>
+        <a class="mdl-navigation__link" href="">Link</a>
+        <a class="mdl-navigation__link" href="">Link</a>
+      </nav>
+    </div>
+    <main class="mdl-layout__content">
+      <div class="page-content"><!-- Your content goes here -->
+    
+        <form onsubmit="return false;">
+            <div class="mdl-textfield mdl-js-textfield">
+              <input class="mdl-textfield__input" type="text" id="todofield">
+              <label class="mdl-textfield__label" for="todofield">To do einfügen</label>
+            </div>
+
+
+
+            <button onclick="addTodo()" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored">
+                Speichern
+              </button>
+          </form>
+
+          <button class="mdl-button mdl-js-button mdl-button--raised" disabled>
+            ToDo leeren
+          </button>
+
+
+          <ul class="demo-list-control mdl-list" id="todolist">
+             
+            </ul>
+            <button onclick="clearTodo()" class="button1"  class="mdl-button mdl-js-button mdl-button--raised mdl-button--accent" >
+              Liste leeren
+            </button>
+    </div>
+    </main>
+  </div> 
+</body>
+</html>
\ No newline at end of file
diff --git a/webseiten_dev/Zusammenfassung ausgefahren.docx b/webseiten_dev/Zusammenfassung ausgefahren.docx
new file mode 100644
index 0000000..03488e1
Binary files /dev/null and b/webseiten_dev/Zusammenfassung ausgefahren.docx differ
diff --git a/webseiten_dev/idiot i know you will look to your right.jpg b/webseiten_dev/idiot i know you will look to your right.jpg
new file mode 100644
index 0000000..788d250
Binary files /dev/null and b/webseiten_dev/idiot i know you will look to your right.jpg differ
diff --git a/webseiten_dev/logo_wse.png b/webseiten_dev/logo_wse.png
new file mode 100644
index 0000000..e8b5938
Binary files /dev/null and b/webseiten_dev/logo_wse.png differ
diff --git a/webseiten_dev/wse.html b/webseiten_dev/wse.html
new file mode 100644
index 0000000..eee18b4
--- /dev/null
+++ b/webseiten_dev/wse.html
@@ -0,0 +1,182 @@
+<style>
+h1 {
+    color: red;
+    text-align: center;
+} 
+font-face {}
+.myheading {
+    color: goldenrod;
+    text-align: left;
+}
+.mychart{
+    color:aqua;
+    text-align: end;
+}
+.mytext{
+    color: aqua;
+}
+.mylist{
+    color: aqua;
+    text-align: center;
+}
+html{
+    height: 100%;
+}
+body{
+    height: 100%;
+    background-image: linear-gradient(to right,  rgba(61, 142, 223, 0.411), rgba(141, 58, 219, 0.445)), url("Pin\ on\ Guardado\ rápido.jpg");
+    background-size: cover;
+    background-attachment: fixed;
+}
+.button {
+  border: none;
+  color: white;
+  padding: 15px 32px;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 16px;
+  margin: 4px 2px;
+  cursor: pointer;
+}
+
+.button1 {background-color: #04AA6D;} /* Green */
+.button2 {background-color: #008CBA;} /* Blue */
+</style>
+
+
+<button class="button button1">Green</button>
+<button  class="button button2"><a href="Screenshot 2024-01-15 105310.jpg">Image</a></button>
+
+
+
+
+
+
+<h1>
+Willkomen auf Wrbos kleiner, selstgestalter Webseite!
+</h1>
+
+<h1 class="myheading">Christian Webseite    <p align="center"> Ich mag auch Yoghurt</p></h1>
+
+<h1 class="myheading">Übungsseite</h1>
+
+<br/>
+
+<h2 class="myheading">Das ist eine erste Testwebseite.</h2>
+
+<div class="mytext">
+    <p align="center">
+        Das ist unsere <b><i>erste Webseite</i></b>, mit der wir uns überlegen wollen, was wir heute lernen.
+    </p>
+
+    <p align="center">
+        Anschließend machen wir eine kleine Todo-Liste.
+    </p>
+</div>
+
+<h3 class="mylist">ToDo:</h3>
+
+<ol class="mylist">
+    <li class="mylist">HTML Elemente lernen</li>
+    <li class="mylist">HTML Elemente auf unserer Testwebseite einbauen</li>
+    <li class="mylist">Formatierung mit CSS herstellen</li>
+    <li class="mylist">Mittels JavaScript einen Taschenrechner bauen</li>
+</ol>
+<br><br><br>
+<p align="center">
+<img src="logo_wse.png" />
+</p>
+<br/><br/><br/>
+<h1 class="myheading"> <p align="center"><b><i>Wie wird denn nun das Wetter für heute und morgen?</i></b></p></h1>
+<p align="center">
+    <ol class="myheading">
+<li class="myheading"> <p align="center"> Die Wetterdaten beruhen auf den Vorhersagen von unserem Wetterhahn Benjamin Blümchen.</p></li>
+<ul class="myheading"> 
+    <li class="myheading"> <p align="center">Dabei wurde er von seinen Freunden Otto und Gulliver unterstützt.</p></li>
+</ul>
+</ol>
+</p>
+
+<br><br><br>
+
+<table border="3" bgcolor="blue" width="100%" height="10%" class="mychart">
+    <tr>
+        <td align="center">
+            <b>Tag</b>
+        </td>
+        <td align="center">
+            <b>Temperatur</b>
+        </td>
+        <td align="center">
+           <b> Wetter</b>
+        </td>
+    </tr>
+    <tr>
+        <td align="center">
+            Montag
+        </td>
+        <td align="center">
+            0°C
+        </td>
+        <td align="center">
+            bew&ouml;lkt
+        </td>
+    </tr>
+    <tr >
+        <td align="center">
+            Dienstag
+        </td>
+        <td align="center">
+            2°C
+        </td>
+        <td align="center">
+            heiter
+        </td>
+    </tr>
+</table>
+<br><br><br><br><br>
+<h1 class="myheading"> <b><i>Für die folgenden zwei Tage wird das Wetter wie folgt:</i></b></h1>
+<table border="3" bgcolor="blue" width="100%" height="10%" class="mychart">
+    <tr>
+        <td align="center">
+          <b>Tag</b>
+        </td>
+        <td align="center">
+            <b>Temperatur</b>
+        </td>
+        <td align="center">
+            <b>Wetter</b>
+        </td>
+    </tr>
+    <tr>
+        <td  align="center">
+            Mittwoch
+        </td>
+        <td align="center">
+            -3°C
+        </td>
+        <td align="center">
+            ungem&uuml;lich
+        </td>
+    </tr>
+    <tr>
+        <td align="center">
+            Donnerstag
+        </td>
+        <td align="center">
+            -1°C
+        </td>
+        <td align="center">
+            windig
+        </td>
+    </tr>
+</table>
+
+
+<br><br><br>
+
+    <h2 class="myheading"> Den Verantwortlichen für das Chaos dieser Webseite, sowie ein random Dokument, finden Sie hier unten.</h2>
+<a class="mytext" href="Zusammenfassung ausgefahren.docx"> Hier Zusammenfassung öffnen</a>
+<br><br>
+<a class="mytext" href="mailto:ch.wrba@wrba.ch">Email an Christian</a>
diff --git a/webseiten_dev/xback05.gif b/webseiten_dev/xback05.gif
new file mode 100644
index 0000000..99de2d3
Binary files /dev/null and b/webseiten_dev/xback05.gif differ

+ Tag +	+ Temperatur +	+ Wetter +
+ Montag +	+ 0°C +	+ bewölkt +
+ Dienstag +	+ 2°C +	+ heiter +