Beispiel:Inhalt-4.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!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;
  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;
}

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;
    width: 14em;
}
header #backlink {
 display:inline-block;
 text-shadow: none; 
 color: transparent;
 background: url(https://src.selfhtml.org/designs/design-0/img/logo.svg);
 background-size: contain;
 width: 5em;
 height: 5em;
}

footer {
  	display: grid;
  	grid-template-columns: 1fr 10em;
}

footer > * {
  grid-column: -2 / -1;
}


</style>
  </head>
  <body>
  <header>
    <a id="backlink" href="/"><img src="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:Preise-4.html">Unsere Preise</a></li>
      <li><a tabindex="0" aria-current="page">Bilder von unseren Produkten</a></li>
    </ul>
</nav>
    <h1>Unsere Produkte</h1>
    <p>Hier sehen Sie einen Überblick über unsere Angebote.</p>
    <p>
      <img src="//wiki.selfhtml.org/images/0/0f/Cabinet.svg" alt="Kommode">
      <img src="//wiki.selfhtml.org/images/a/ad/Dresser.svg" alt="Kommode mit Schubladen">
      <img src="//wiki.selfhtml.org/images/d/dd/Filing-cabinet.svg" alt="Aktenschrank">
      <img src="//wiki.selfhtml.org/images/5/54/Table.svg" alt="Tisch">
      <img src="//wiki.selfhtml.org/images/7/74/Cupboard.svg" alt="Kleiderschrank" width="500" height="400">
      <img src="//wiki.selfhtml.org/images/3/3c/Chair.svg" alt="Schaukelstuhl">
      <img src="//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>© 2021 by selfHTML</p>
  </footer>
  </body>
 </html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:Inhalt-4.html&oldid=79693“