Beispiel:Preise-4.html
Aus SELFHTML-Wiki
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Schreinerei Meier, Dingenskirchen</title>
<style>
body {
max-width: 60em;
margin: 0.5em auto;
padding: 0.5em;
background:beige;
}
@media (min-width: 30em) {
section {
display: grid;
grid-template-columns: 1fr 12em;
}
section h2 {
grid-column: 1 / -1;
}
}
#angebot {
background-color: firebrick;
padding: 1em;
width: 10em;
text-align: center;
}
#angebot h3 {
font-size: 2em;
font-variant: small-caps;
color: lightyellow;
}
#angebot p {
color: white;
}
img {
max-width: 100%;
}
h1 {
border: thin solid transparent;
}
h2 {
font-size: 2em;
color: firebrick;
background-color: LightSalmon;
border: thin solid;
text-align: center;
}
p {
color: brown;
font-size: 1.1em;
}
header {
height: 5em;
padding: 0 1em;
margin-bottom: 1em;
display: grid;
grid-template-columns: 6em 1fr 1fr;
}
header p:first-of-type{
font-size: 2em;
font-weight: bold;
}
header p:last-of-type {
transform: rotate(-10deg);
border: thin solid;
padding: 0.5em;
border-radius: 0.2em;
align-self: end;
max-width: 14em;
}
header #backlink {
display:inline-block;
text-shadow: none;
width: 5em;
height: 3em;
padding-top: 1em;
}
footer {
display: grid;
grid-template-columns: 1fr 10em;
}
footer > * {
grid-column: -2 / -1;
}
</style>
</head>
<body>
<header>
<a id="backlink" href="/"><img src="https://src.selfhtml.org/kurse/html-einstieg/img/logo.svg" alt="Logo"/></a>
<p>Schreinerei Meier</p>
<p>ihre Werkstatt für gutes Wohnen!</p>
</header>
<nav>
<ul>
<li><a href="./Beispiel:Index-4b.html">Startseite</a></li>
<li><a href="./Beispiel:Inhalt-4.html">Bilder von unseren Produkten</a></li>
<li><a tabindex="0" aria-current="page">Unsere Preise</a></li>
</ul>
</nav>
<h1>Unsere nur zu Beispielzwecken erdachten Phantasie-Preise</h1>
<table>
<tr>
<th>Produkt</th>
<th>Preis</th>
</tr>
<tr>
<td>Tisch</td>
<td>50 €</td>
</tr>
<tr>
<td>Schrank</td>
<td>70 €</td>
</tr>
<tr>
<td>Bett</td>
<td>100 €</td>
</tr>
</table>
<footer>
<a href="kontakt.html">Kontakt</a>
<a href="impressum.html">Impressum</a>
<p>© 2025 SELFHTML</p>
</footer>
</body>
</html>
