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