Beispiel:Inhalt-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;
}
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;
}
img {
max-width: 100%;
}
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 tabindex="0" aria-current="page">Bilder von unseren Produkten</a></li>
<li><a href="./Beispiel:Preise-4.html">Unsere Preise</a></li>
</ul>
</nav>
<h1>Unsere Produkte</h1>
<p>Hier sehen Sie einen Überblick über unsere Angebote.</p>
<p>
<img src="https://wiki.selfhtml.org/images/0/0f/Cabinet.svg" alt="Kommode">
<img src="https://wiki.selfhtml.org/images/a/ad/Dresser.svg" alt="Kommode mit Schubladen">
<img src="https://wiki.selfhtml.org/images/d/dd/Filing-cabinet.svg" alt="Aktenschrank">
<img src="https://wiki.selfhtml.org/images/5/54/Table.svg" alt="Tisch">
<img src="https://wiki.selfhtml.org/images/7/74/Cupboard.svg" alt="Kleiderschrank">
<img src="https://wiki.selfhtml.org/images/3/3c/Chair.svg" alt="Schaukelstuhl">
<img src="https://wiki.selfhtml.org/images/3/37/Desk.svg" alt="Schreibtisch">
</p>
<footer>
<a href="kontakt.html">Kontakt</a>
<a href="impressum.html">Impressum</a>
<p>© 2025 SELFHTML</p>
</footer>
</body>
</html>
