Beispiel:Layout-3-3.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>Layout 3 - Step 3</title>

<style>

root {
 color-scheme: light dark;	

 /* Grundton – Lila */
 --lila2:        oklch(0.80 0.15 300);
 --lila1:        oklch(0.60 0.15 300);
 --lila:         oklch(0.44 0.16 300);
 --lila-darker:  oklch(0.29 0.16 300);
 --lila-darkest: oklch(0.20 0.16 300);

 /* Akzent 1 – Gold */
 --gold2:        oklch(0.95 0.17 50);
 --gold1:        oklch(0.80 0.16 50);
 --gold:         oklch(0.65 0.17 50);
 --gold-darker:  oklch(0.50 0.15 50);

 /* Akzent 2 – Mint */
 --mint2:        oklch(0.98 0.14 170);
 --mint1:        oklch(0.90 0.14 170);
 --mint:         oklch(0.80 0.13 170);
 --mint-darker:  oklch(0.60 0.14 170);
 --mint-darkest: oklch(0.40 0.14 170);

 /* Neutral / Grau */
 --whitesmoke:   oklch(0.97 0 0);
 --grey1:        oklch(0.80 0 0);
 --grey:         oklch(0.65 0 0);
 --grey-darker:  oklch(0.50 0 0);
 --charcoal:     oklch(0.30 0 0);

--textColor: light-dark(var(--charcoal), var(--whitesmoke)); --navColor: var(--whitesmoke); }

body { width: calc(100% - 2em); max-width: 75em; min-height: calc(100vh - 2em); margin: 0 auto; padding: 1em; font-family: Avenir, Arial, sans-serif; background-color: light-dark(var(--whitesmoke), var(--charcoal)); display: grid; gap: 0.5em; }

nav { 

   background: linear-gradient(90deg, var(--lila1), var(--lila));
   color: var(--navColor);

}


header, nav, main, article, section, aside, footer { border-radius: 0 0.5em 0.5em; border: thin solid; padding: 1em; }

header { border-color: var(--grey1); display: grid; grid-template-columns: 4em 1fr; gap: 0.5em;

img { width: 2.25em; padding-top: 1.25em; } }


nav ul { 

   list-style: none;
   margin: 0.5em;
   padding: 0;

}

nav li a { 

   display: inline-block;
   text-decoration:none;
   color: inherit;
   font-size: 1.5em;  /* mobil größer */

font-weight: bold; 

   padding: 0.2em 1em;

} nav li a:hover, nav li a:focus{ 

   color:gold;

background: var(--lila1); }

main { border-color: var(--gold);

h2,h3 { color: light-dark(var(--lila), var(--lila2)) ; } aside { background: light-dark(var(--mint), var(--mint-darker)) ; } .warning { background: light-dark(var(--gold1), var(--gold-darker)) ; } }

footer { border-color: var(--gold-darkest); } @media (width > 30em) { body { grid-template-columns: 12em 1fr; }

header, footer { grid-column: 1 / -1; } nav { padding: 0;

h2 { color: transparent; } 

   li a {

font-size: 1rem; /* jetzt wieder auf Standardschriftgröße */ 

   }

}

@media (width > 45em) { main { display: grid; grid-template-columns: repeat(auto-fill, minmax(15em, 1fr)); gap: 0.5em;

:not(aside) { grid-column: 1 / -1; } aside {

} } } @media (prefers-color-scheme: dark) { 

 a {
   color: skyblue;
 }

aside { color: var(--charcoal); } .warning h3 {color: var(--lila); } blockquote h3{ color: white;} }

blockquote { 

 font: 1.2em/1.4 Georgia, serif;
 font-size: clamp(1em, 4cqi, 2em);
 text-align: center;
 margin: 0;

h3 { 

 	font-size: clamp(1.5em, 2cqi, 2em);
 	margin: 0;
 	word-break: keep-all;

white-space: normal; }

p { 

 	font-style: italic;
 	margin: 0;

} .content { color: steelBlue; } } figure { 

	container-type: inline-size;

} figcaption { 

 margin-top: 1em;
 font-size: 0.8em;

}

.css,.html { background: var(--lila); color: white; border-radius: 0 0.2em 0.2em; font-size: 1.5rem; padding: 0.25em; } .html { background: var(--gold); } </style> </head>

<body> <header> <img src="https://wiki.selfhtml.org/images/4/45/SELF-Logo.svg" alt="logo">

CSS - Vom Entwurf zum Layout 3

</header>

<nav>

Navigation

  • <a href="#link_1.html">Wer wir sind</a>
  • <a href="#link_2.html">Was wir tun</a>
  • <a href="#link_3.html">Wie du helfen kannst</a>
  • <a href="#link_4.html">Kontakt</a>

</nav>

<main>

Inhalt

CONTENT IS LIKE WATER

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 00 1240 500"> <title>Content is like</title> <style> path, circle, rect, line { fill: none; stroke: black; stroke-width: 3; stroke-linecap: round; } #water { fill: steelblue; stroke: none; } @media (prefers-color-scheme:dark) { path, circle, rect, line { stroke: white; } } </style> <path id="water" d="M870 288s53 10 107 10c29 0 53-3 95-8 38-5 64 7 91 5v60c0 4-4 7-7 7H876c-2 0-6-3-6-6zm-356-7s15 1 25 9c9 7 31 7 44 4l3 13v101c0 4-5 8-8 8h-61c-4 0-9-3-9-9V307zm-275 43s21 11 36 11c10 1 26-6 42-3 15 2 22 7 31 7 9 1 21-2 32-4 10-1 15 0 15 0s7 30-19 56c-18 16-33 18-47 18s-36-4-54-32c-26-9-33-30-36-53ZM62 355s22 2 33 0 31-3 43 1c11 4 24 1 24 1s3 21-15 37c-13 11-28 15-43 14-10-1-20-6-27-13-8-8-15-17-15-40Zm630-61s13 9 26 10c11 1 26-5 34-5s16 1 16 1v92h-76zM620 63s-1 15-6 23-2 21 7 25c7 2 15-5 17-12 3-14-8-27-18-36Z"/> <path id="cup" d="M62 331h100v30c0 33-30 47-52 47-20 0-48-16-48-47zm101 10c7 0 12 3 12 10v8c0 6-5 11-13 11m-85 46h70"/> <g id="teapot"> <path d="M396 344c0 36-29 65-65 65-24 0-45-13-56-32 0 0-35-7-36-58 0-29-16-26-17-34s8-6 15-3c17 7 23 37 36 32 6-10 13-19 23-25h70c18 12 30 32 30 55Zm-105 72 83 1"/> <path d="M391 370c13-17 43-16 43-42 0-21-24-36-46-16"/> <path d="M297 288c0-12 0-11 25-12 0-3 0-9 7-9h4c7 0 7 6 7 9 24 0 26 2 25 12"/> </g> <g id="bottle"> <path d="m535 197-27 110v100c0 5 4 9 9 9h60c5 0 9-4 9-9V307l-27-110"/> <rect width="35" height="12" x="530" y="185" rx="8"/> </g> <g id="mobile"> <rect width="100" height="168" x="680" y="249" rx="8"/> <path d="M692 261h76v131h-76z"/> <circle cx="730" cy="405" r="6"/> </g> <g id="widescreen"> <path d="M854 190c0-5 4-9 9-9h306c5 0 9 4 9 9v178c0 5-4 9-9 9h-123v20l20 20H966l20-20v-20H863c-5 0-9-4-9-9z"/> <rect width="293" height="166" x="870" y="196" rx="8"/> </g> </svg>

You put water into a cup it becomes the cup.
You put water into a bottle it becomes the bottle.
You put it in a teapot, it becomes the teapot.

<figcaption> (Josh Clark (originally Bruce Lee) - Seven deadly mobile myths
Illustration by Stephanie Walter) </figcaption> </figure>


aktuelle Infos und Termine

 <aside class="infobox">

Tipp:

Untersuche HTML und CSS der Seite mit den <a href="https://wiki.selfhtml.org/wiki/Arbeiten_mit_dem_Seiteninspektor">Entwickler-Tools</a>.

</aside> <aside class="infobox warning">

Less is more!

Einfacher ist besser!

</aside> <aside class="infobox" >

Infobox in Grün!

Die (geteilten) Komplementärfarben zu lila sind orange und grün. Diese können als Farbakzente verwendet werden

</aside>

<aside class="infobox">

Form follows function

  • 10:00 Uhr Berlin
  • 14:00 Uhr Bonn
  • 18:00 Uhr Bethlehem

</aside> </main>

<footer>

Footer

<a href="#kontakt.html">Kontakt</a>

© 2022 SELFHTML

</footer>

</body> </html>

Abgerufen am 13.10.2025
von "http://wiki.selfhtml.org/wiki/Beispiel:Layout-3-3.html"