203 lines
5.8 KiB
HTML
203 lines
5.8 KiB
HTML
<!--
|
|
- Praktikum DBWT. Autoren:
|
|
- Robert, Joel, 3672729
|
|
- Şafak, Hazinedar, 3108590
|
|
-->
|
|
<!DOCTYPE html>
|
|
<html lang="en" xmlns="http://www.w3.org/1999/html">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Ihre E-Mensa</title>
|
|
<style>
|
|
* {
|
|
font-family: Arial;
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: 200px auto 200px;
|
|
}
|
|
|
|
img {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.speisen {
|
|
border: solid;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.speisen td {
|
|
border: solid;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.speisen td:not(:first-of-type) {
|
|
text-align: center;
|
|
}
|
|
|
|
p {
|
|
text-align: justify;
|
|
}
|
|
|
|
.zahlen {
|
|
list-style-type: none;
|
|
display: grid;
|
|
grid-template-columns: auto auto auto;
|
|
gap: 10px;
|
|
}
|
|
|
|
.zahlen p {
|
|
text-align: center;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.formular {
|
|
display: grid;
|
|
grid-template-columns: auto auto auto;
|
|
justify-content: start;
|
|
gap: 10px;
|
|
}
|
|
|
|
.wichtig {
|
|
text-align: center;
|
|
}
|
|
|
|
.wichtigListe {
|
|
display: inline-block;
|
|
text-align: left;
|
|
}
|
|
|
|
.freude {
|
|
text-align: center;
|
|
}
|
|
|
|
footer {
|
|
border-top: 1px solid;
|
|
}
|
|
|
|
.fusszeile {
|
|
padding-top: 20px;
|
|
padding-bottom: 20px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
border: none;
|
|
}
|
|
|
|
.fusszeile td:first-child {
|
|
border-left: none;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
}
|
|
|
|
.fusszeile td {
|
|
border-left: 3px solid;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
<body>
|
|
<div class="grid">
|
|
<div>
|
|
<img src="fh-logo.jpg" alt="FH-Logo">
|
|
</div>
|
|
<div>
|
|
<a href="#ankündigung">Ankündigung</a>
|
|
<a href="#speisen">Speisen</a>
|
|
<a href="#zahlen">Zahlen</a>
|
|
<a href="#kontakt">Kontakt</a>
|
|
<a href="#wichtig">Wichtig für uns</a>
|
|
|
|
</div>
|
|
</div>
|
|
<hr>
|
|
<div class="grid">
|
|
<div></div>
|
|
<div>
|
|
<img src="mensa21.jpg" alt="Essen">
|
|
<h1 id="ankündigung">Bald gibt es auch Essen online ;)</h1>
|
|
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
|
|
dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
|
|
clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
|
|
consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
|
|
sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
|
|
sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
|
|
<h1 id="speisen">Köstlichkeiten die Sie erwarten</h1>
|
|
<table class="speisen">
|
|
<tr class="speisen">
|
|
<td></td>
|
|
<td>Preis intern</td>
|
|
<td>Preis extern</td>
|
|
</tr>
|
|
<tr class="speisen">
|
|
<td>Rindfleich mit Bambus, Kaiserschoten und roter Paprika, dazu Mie Nudeln</td>
|
|
<td>3,50</td>
|
|
<td>6,20</td>
|
|
</tr>
|
|
<tr class="speisen">
|
|
<td>Spinatrisotto mit kleinen Samosateigecken und gemischter Salat</td>
|
|
<td>2,90</td>
|
|
<td>5,30</td>
|
|
</tr>
|
|
<tr class="speisen">
|
|
<td>...</td>
|
|
<td>...</td>
|
|
<td>...</td>
|
|
</tr>
|
|
</table>
|
|
<h1 id="zahlen">E-Mensa in Zahlen</h1>
|
|
<div class="zahlen">
|
|
<p>X Besuche</p>
|
|
<p>Y Anmeldungen zum Newsletter</p>
|
|
<p>Z Speisen</p>
|
|
</div>
|
|
<h1 id="kontakt">Interesse geweckt? Wir informieren</h1>
|
|
<div class="formular">
|
|
<div>
|
|
<label for="name">Name</label> <br>
|
|
<input type="text" name="name" id="name" placeholder="Bitte geben Sie Ihren Namen ein">
|
|
</div>
|
|
<div>
|
|
<label for="mail">E-Mail</label> <br>
|
|
<input type="text" name="name" id="mail" placeholder="Bitte geben Sie Ihren Namen ein">
|
|
</div>
|
|
<div>
|
|
<label for="sprache">Newsletter bitte in</label> <br>
|
|
<select name="sprache" id="sprache">
|
|
<option value="deutsch">Deutsch</option>
|
|
<option value="englisch">Englisch</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
<input required type="checkbox" name="datenschutz" id="datenschutz"
|
|
placeholder="Bitte geben Sie Ihren Namen ein">
|
|
<label for="datenschutz">Den Datenschutzbestimmungen stimme ich zu</label>
|
|
<button type="submit">Zum Newsletter anmelden</button>
|
|
<h1 id="wichtig">Das ist uns wichtig</h1>
|
|
<div class="wichtig">
|
|
<ul class="wichtigListe">
|
|
<li>Beste frische saisonale Zutaten</li>
|
|
<li>Ausgewogen abwechslungsreiche Gerichte</li>
|
|
<li>Sauberkeit</li>
|
|
</ul>
|
|
</div>
|
|
<h1 class="freude">Wir freuen uns auf Ihren Besuch!</h1>
|
|
</div>
|
|
</div>
|
|
<footer>
|
|
<table class="fusszeile">
|
|
<tr>
|
|
<td>(c) E-Mensa GmbH</td>
|
|
<td>Şafak Hazinedar & Robert Joel</td>
|
|
<td><a href="">Impressum</a></td>
|
|
</tr>
|
|
</table>
|
|
</footer>
|
|
</body>
|
|
|
|
</html> |