Beispiel:Komfort-OnePager-1.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 */ } 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;

}

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

}

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

}

  1. skip-to-top {

position: fixed; bottom: 1em; right: 50%; 

 background-color: var(--green-darker2);

color: gold; padding: 1em 2em; }

  1. skip-to-top:hover {
 background-color: var(--red-darker2);

}

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">

'use strict'; document.addEventListener('DOMContentLoaded', function () { const topLink = document.querySelector('#skip-to-top'); 

   const nav = document.querySelector('nav');

   let observer = new IntersectionObserver(function(entries) {
       entries.forEach(function(entry) {
           if (!entry.isIntersecting) {
               topLink.hidden = false;
           } else {
               topLink.hidden = true;
           }
       });
   }, { threshold: [0] });

   observer.observe(nav);

}); </script> 

 </head>
 <body>
   <main>  
     <section id="willkommen" >    
   <header>
     <a id="backlink" href="#willkommen" hidden><img src="https://src.selfhtml.org/kurse/html-einstieg/img/logo.svg" alt="Willkommen"></a>
     <a href="#willkommen" id="skip-to-top">skip to top</a>
     <hgroup>

Schreinerei Meier

ihre Werkstatt für gutes Wohnen!

     </hgroup>
     <nav>
  • <a href="#willkommen">Willkommen</a>
  • <a href="#preise">Preise</a>
  • <a href="#produkte">Produkte</a>
  • <a href="#kontakt">Kontakt und Impressum</a>
     </nav> 
   </header>

Willkommen bei der Schreinerei Meier im Internet!

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.

Unsere Leistungen:

  • Möbel nach Ihren Wünschen
    • Küchenmöbel
    • Regale und Schrankwände
    • Badezimmermöbel
  • Haustüren
  • Gartenzäune
  • Reparaturen
         <aside id="angebot">

Angebot

Nächste Woche 10% auf alles!

         </aside>

       </section>
       <section>

Unsere Geschichte:

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.

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.

       </section>

     <section id="preise">

Unsere nur zu Beispielzwecken erdachten Phantasie-Preise

<tbody> </tbody>
Produkt Preis
Tisch 50 €
Schrank 70 €
Bett 100 € 
     </section>

     <section id="produkte">

Unsere Produkte

Hier sehen Sie einen Überblick über unsere Angebote.

     </section>
     
 
               

     <section id="kontakt">

Impressum

Angaben gem. § 5 TMG

Betreiber und Kontakt:
Schreinerei Meier
Möbelstr. 1
D-12345
Musterstadt
Germany
Tel:
+49 1234 5678
Fax:
+49 1234 5679
E-Mail-Adresse:
<a href="mailto:test@example.com">test@example.com</a>
Vertretung:
Die Schreinerei Meier wird rechtlich vertreten durch Herrn Harry Meier

Berufsspezifische Angaben:

Berufsbezeichnung: k. A.

Zuständige Kammer: IHK Bayern

Verliehen in/durch: k. A.

Folgende berufsrechtliche Regelungen finden Anwendung: k. A.
Diese Regelungen können Sie einsehen unter: k. A.

Zuständige Aufsichtsbehörde: Finanzamt Musterstadt

Register und Registernummer: 999999 999999

Umsatzsteuer-ID: 999999 999999

Verantwortlicher für journalistisch-redaktionelle Inhalte gem. § 55 II RstV:
Hans Jürgen Mustermann

Quelle: <a href="http://www.deutsche-anwaltshotline.de/recht-auf-ihrer-website/impressum-generator">Impressum-Generator</a> der Deutschen Anwaltshotline AG

     <aside>

Kontakt

E-Mail-Adresse:
test@example.com
Tel:
+49 1234 5678
Fax:
+49 1234 5679
     </aside>  
     </section>
   </main>
     
     <footer>

© 2023 by SELFHTML

     </footer>

</body></html>

Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:Komfort-OnePager-1.html&oldid=95754“