Beispiel:Komfort-OnePager.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!DOCTYPE html>
<html lang="de"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <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 /*1em*/ auto;
	background-color: var(--background-color);
}

header {
	padding: 0 1em; 
	margin-top: 1em;
	margin-bottom: 0em;
	display: grid;
	grid-template-columns: 6em 1fr;
}

      header p {
        top: 1.7em;
        transform: rotate(-10deg);
        border: thin solid;
        padding: 0.5em;
        border-radius: 0.2em;
      }
      
      header #backlink {
       display:inline-block;
       text-shadow: none; 
       color: transparent;
       background: transparent;
       background-size: contain;
       width: 5em;
       height: 3em;
      }

      hgroup {
        display: flex;
        flex-flow: row wrap;
        align-items: start;
        gap: 0 3em;
      }
			
	@media (prefers-reduced-motion: no-preference) {
	  main {
			padding: 0;
	    scroll-snap-type: y mandatory; 
	    scroll-behavior: smooth;
	    scroll-padding: 0; /* nicht nötig */
	  }
		html,
		body, main {
			position: relative;
		}		

  	section {
  	  min-height: 100vh;
  	  scroll-snap-align: start; 
  	  scroll-margin: 0;  /* nicht nötig */
  	}
	}

      @media (max-width: 45em) { 
        hgroup p {
          display: none;
        }
      }

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

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

      h1 {
        color: var(--red);
        font-size: 2em;
        font-weight: bold;
      }

      h2 {
        background-color: var(--red);
        color: var(--background-color);
        padding: 0.5em;
        font-family: sans-serif;
        border-radius: 0 1em 1em 1em;
      }
			
      h3 {
        font-size: 1.4em; /*2.6em;*/
        color: var(--red-darker2);
        background-color: var(--background2-color);
        border: thin solid;
        font-family: cursive; 
        text-align: center;
      }

      p {
        color: brown;
        font-size: 1.1em;
      }

      @media (min-width: 30em) { 
        #leistungen {
          display: grid;
          grid-template-columns: 1fr 12em;
        }

        #leistungen h3 {
          grid-column: 1 / -1;
        }
				
        #gallery {
          display: grid;
          grid-template-columns: repeat(3,1fr);
        }
      }

      #angebot {
        background-color: var(--green);
        padding: 1em;
        width: 10em;
        text-align: center;
      }

      #angebot h4 {
        font-size: 2em;
        font-variant: small-caps;
        color: lightyellow;
      }

      #angebot p {
        color: white;
      }

      #produkte img {
        max-width: 100%;
      }

      /* Für One-Pager */
      body { 
        --viewporthoehe: hoch; 
      }

      @media (max-height: 30em) { 
        body { 
          --viewporthoehe: niedrig; 
        }
      }

      body {
        height: 100vh;
        display: flex;
        flex-direction: column;
      }
      
      header.niedrig hgroup {
        display: none;
      }

      nav:not(header.niedrig nav) {
        grid-column: 1/-1;
      }
      
      nav ul {
        list-style: none;
        padding-inline: 0;
        display: flex;
        flex-flow: row wrap;
        gap: 1em 2em;
      }  
			
      nav li {
        position: relative;
        padding-left: 1em;
       }
      
      main {
        overflow: auto;
        padding: 0 .5em;
        scrollbar-color: var(--red) var(--background-color);
      }

      main::-webkit-scrollbar {
        width: 1em;
        height: 2em;
        background-color: beige;
      }
      
      main::-webkit-scrollbar:hover {
        border: thin solid lightgray;
        border-radius: .5em 0 .5em .5em;
      }
      
      main::-webkit-scrollbar-thumb {
        background: firebrick;
        border-radius: .5em 0 .5em .5em;
      }
      

.lazyContainer {
  position:relative;
  display:inline-block;
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  vertical-align: bottom;
}
.lazyImage img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  transform: scale(1);
  transition: all 0.5s;
}

#image {
  --size: 100px;
  position: relative;
  display: block;	
  margin: 0 auto;
  transform-style: preserve-3d;
}

#image>* {
  //position: absolute;
  display: block;
  width: var(--size);
  height: var(--size);
}

:root {
  --background-color: beige;
  --background2-color: #f2ab70;
  --red-lighter2: #f27070;
  --red-lighter1: #d04242;
  --red: firebrick;  /* #b22222  	hsl(0, 68%, 42%) */
  --red-darker1: #910a0a;
  --red-darker2: #670000;
  --green-lighter2: #5ac15a;
  --green-lighter1: #34a634;
  --green: #1b8e1b;    /*  	hsl(120, 68%, 33%) */
  --green-darker1: #087408;
  --green-darker2: #005200;
  --petrol-lighter2: #439191;
  --petrol-lighter1: #277d7d;
  --petrol: #146b6b;     /*  	hsl(180, 69%, 25%) */
  --petrol-darker1: #065757;
  --petrol-darker2: #003e3e;
}
    </style>
    <script type="module">
    </script>
  </head>
  <body>
    <header>
      <a id="backlink" href="#willkommen"><img src="https://src.selfhtml.org/kurse/html-einstieg/img/logo.svg" alt="Willkommen"></a>
      <hgroup>
        <h1>Schreinerei Meier</h1>
        <p>ihre Werkstatt für gutes Wohnen!</p>
      </hgroup>
      <nav>
        <ul>
          <li aria-current="location"><a href="#willkommen">Willkommen</a></li>
          <li><a href="#preise">Preise</a></li>
          <li><a href="#produkte">Produkte</a></li>
          <li><a href="#kontakt">Kontakt und Impressum</a></li>
        </ul>
      </nav> 
    </header>
    
    <main>
    
      <section id="willkommen" style="height: 90vh;">
        <h2>Willkommen bei der Schreinerei Meier im Internet!</h2>

        <p>Wir sind seit vielen Jahren darauf spezialisiert, alle Kundenwünsche zu erfüllen. In unserer 
        Werkstatt produzieren wir selbst - mit Holz aus regionaler, nachhaltiger Forstwirtschaft.</p>

					<div id="leistungen">
<h3>Unsere Leistungen:</h3>
          <ul>
            <li>Möbel nach Ihren Wünschen
            <ul>
              <li>Küchenmöbel</li>
              <li>Regale und Schrankwände</li>
              <li>Badezimmermöbel</li>
            </ul>
            </li>
            <li>Haustüren</li>
            <li>Gartenzäune</li>
            <li>Reparaturen</li>
          </ul>
          <aside id="angebot">
            <h4>Angebot</h4>
            <p>Nächste Woche 10% auf alles!</p>
          </aside>
          </div>
        </section>
        <section>
          <h2>Unsere Geschichte:</h2>

          <p>Die Anfänge unserer Firma reichen bis ins Mittelalter zurück, als Horst Holzmann begann seine 
          bisher für den Eigenbedarf hergestellten Möbel auch auf dem Markt der nächsten Stadt zu verkaufen.</p>

          <p>Sein Sohn führte diese Tradition fort und nach ihm noch 
viele weitere Kinder und Kindeskinder. 
            Heute führt Schwiegersohn Harry Meier den Betrieb in der 15.
 Generation weiter und arbeitet bereits seinen Enkel als Nachfolger ein.</p>
        </section>

      <section id="preise">
        <h2>Unsere nur zu Beispielzwecken erdachten Phantasie-Preise</h2>
        <table>
          <tbody><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>
        </tbody></table>
      </section>

      <section id="produkte">
        <h2>Unsere Produkte</h2>
        <p>Hier sehen Sie einen Überblick über unsere Angebote.</p>
        <p id="gallery">
          <span class="lazyContainer"><img src="https://wiki.selfhtml.org/images/0/0f/Cabinet.svg" alt="Kommode" loading="lazy"></span>
          <span class="lazyContainer"><img src="https://wiki.selfhtml.org/images/a/ad/Dresser.svg" alt="Kommode mit Schubladen" loading="lazy"></span>
          <span class="lazyContainer"><img src="https://wiki.selfhtml.org/images/d/dd/Filing-cabinet.svg" alt="Aktenschrank" loading="lazy"></span>
          <span class="lazyContainer"><img src="https://wiki.selfhtml.org/images/5/54/Table.svg" alt="Tisch" loading="lazy"></span>
          <span class="lazyContainer"><img src="https://wiki.selfhtml.org/images/3/3c/Chair.svg" alt="Schaukelstuhl" loading="lazy"></span>
          <span class="lazyContainer"><img src="https://wiki.selfhtml.org/images/3/37/Desk.svg" alt="Schreibtisch" loading="lazy"></span>
          <span class="lazyContainer" style="grid-column:1/-1;"><img src="https://wiki.selfhtml.org/images/7/74/Cupboard.svg" alt="Kleiderschrank" loading="lazy" width="600"></span>
        </p>
      </section>
      
  
                

      <section id="kontakt">
        <h2>Impressum</h2>
        <p>Angaben gem. § 5 TMG</p>
        <dl> 
          <dt>Betreiber und Kontakt:</dt> 
          <dd>Schreinerei Meier</dd> 
          <dd>Möbelstr. 1</dd> 
          <dt></dt>
          <dd>D-12345</dd>
          <dt></dt> 
          <dd>Musterstadt</dd> 
          <dt></dt>
          <dd>Germany</dd> 
          <dt>Tel:</dt> 
          <dd>+49 1234 5678</dd> 
          <dt>Fax:</dt> 
          <dd>+49 1234 5679</dd>
          <dt>E-Mail-Adresse:</dt>
          <dd><a href="mailto:test@example.com">test@example.com</a></dd>
        </dl>

        <dl>
          <dt>Vertretung:</dt>
          <dd>Die Schreinerei Meier wird rechtlich vertreten durch Herrn Harry Meier</dd>
        </dl>  

        <h3>Berufsspezifische Angaben:</h3>
        <p>Berufsbezeichnung: k. A. </p>
        <p>Zuständige Kammer: IHK Bayern</p>
        <p>Verliehen in/durch: k. A.</p>
        <p>Folgende berufsrechtliche Regelungen finden Anwendung: k. A. <br>
           Diese Regelungen können Sie einsehen unter: k. A. </p>
        <p>Zuständige Aufsichtsbehörde: Finanzamt Musterstadt</p>
        <p>Register und Registernummer: 999999 999999</p>
        <p>Umsatzsteuer-ID: 999999 999999</p>
        <p>Verantwortlicher für journalistisch-redaktionelle Inhalte gem. § 55 II RstV:<br>Hans Jürgen Mustermann</p>
        <p>Quelle: <a href="http://www.deutsche-anwaltshotline.de/recht-auf-ihrer-website/impressum-generator">Impressum-Generator</a> der Deutschen Anwaltshotline AG</p>

      <aside>  
        <h3>Kontakt</h3>
        <dl> 
          <dt>E-Mail-Adresse:</dt>
          <dd>test@example.com</dd>
          <dt>Tel:</dt> 
          <dd>+49 1234 5678</dd> 
          <dt>Fax:</dt> 
          <dd>+49 1234 5679</dd>
        </dl>  
      </aside>  
      </section>
    </main>
      
      <footer>
        <p>© 2023 by SELFHTML</p>
      </footer>
 
</body></html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:Komfort-OnePager.html&oldid=95749“