Repo erstellt
parent
9dae96d20a
commit
3d5ccd880b
Binary file not shown.
|
After Width: | Height: | Size: 150 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 201 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
|
|
@ -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>
|
||||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
|
|
@ -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ö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ü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>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Loading…
Reference in New Issue