132 lines
3.4 KiB
HTML
132 lines
3.4 KiB
HTML
<!--
|
|
- Praktikum DBWT. Autoren:
|
|
- Robert, Joel, 3672729
|
|
- Şafak, Hazinedar, 3108590
|
|
-->
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>CSS Übung</title>
|
|
<style>
|
|
* {
|
|
font-family: Arial;
|
|
}
|
|
|
|
a {
|
|
color: darkorange;
|
|
font-weight: bold;
|
|
text-decoration-line: none;
|
|
}
|
|
|
|
p.center {
|
|
text-align: center;
|
|
}
|
|
|
|
table {
|
|
border: 3px solid #ecc3a4;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
td {
|
|
border: 1px solid white;
|
|
}
|
|
|
|
thead tr th {
|
|
background: #faebd7;
|
|
}
|
|
|
|
tbody tr:nth-child(even) {
|
|
background: #faebd7;
|
|
}
|
|
|
|
ol {
|
|
line-height: 40px;
|
|
}
|
|
|
|
footer {
|
|
border-top: 3px solid #ecc3a4;
|
|
}
|
|
|
|
ul {
|
|
float: right;
|
|
}
|
|
|
|
ul li {
|
|
display: inline;
|
|
padding-left: 20px;
|
|
padding-right: 20px;
|
|
}
|
|
|
|
ul li:not(:first-child) {
|
|
border-left: 3px solid #ecc3a4;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main>
|
|
<div class="elektro zeile">
|
|
<h1 id="elektro">Wofür steht das E in E-Mensa?</h1>
|
|
<p>Am besten zeigt man das in einer <a href="#etabelle">Tabelle</a>.</p>
|
|
<table id="etabelle">
|
|
<thead>
|
|
<tr>
|
|
<th>Bedeutung</th>
|
|
<th>Philosophie</th>
|
|
<th>Beispiele</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Elektro</td>
|
|
<td>Alles geht elektronisch</td>
|
|
<td>
|
|
<ol>
|
|
<li class="pflicht">Bestellung digital</li>
|
|
<li class="pflicht">Bezahlen digital</li>
|
|
<li>Essen digital</li>
|
|
<li>Spülen digital</li>
|
|
</ol>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Extravagant</td>
|
|
<td>Es gibt auch Ausgefallenes</td>
|
|
<td><p>Wir sind die einzige Mensa weit und breit mit </p>
|
|
<ol>
|
|
<li class="pflicht">Vanillesauerkraut</li>
|
|
<li class="pflicht">Bohnensenfbrot</li>
|
|
<li>Habaneroeiscreme</li>
|
|
<li>Bananengulasch</li>
|
|
</ol>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Effizient</td>
|
|
<td>Schnell, lecker und qualitativ</td>
|
|
<td>
|
|
<ol>
|
|
<li class="pflicht">Frisch für Sie zubereitet, wann Sie es wollen</li>
|
|
<li class="pflicht">Die Zutaten sind nachverfolgbar und immer tiefgekühlt</li>
|
|
<li>Wir haben auch Samstags geöffnet. Sie sehen, wie effizient wir sind.</li>
|
|
</ol>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<p class="center">Da geht natürlich noch viel mehr, siehe nur <abbr title="Extra">E</abbr>.<br>Die Tabelle ist
|
|
aber schon ganz schön imposant so oder?</p>
|
|
</div>
|
|
</main>
|
|
<footer>
|
|
<ul>
|
|
<li>(c) DBWT</li>
|
|
<li>Hilfe</li>
|
|
<li>Datenschutz</li>
|
|
<li>Impressum</li>
|
|
</ul>
|
|
</footer>
|
|
</body>
|
|
</html> |