Beispiel:OnePager-1.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>One-Pager mit Scroll-Snap</title>
<style>
- {box-sizing: border-box;}
html, body {
margin: 0; padding: 0; position: relative; font-family: sans-serif;
}
@media screen and (prefers-reduced-motion: no-preference) and (height > 22em) {
html {
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
scroll-padding: 0;
}
section {
scroll-snap-align: start;
scroll-margin: 0;
}
}
@media screen {
html {
scrollbar-color: steelblue gold;
scrollbar-width: auto;
::-webkit-scrollbar { width: 14px;}
::-webkit-scrollbar-thumb { background-color: steelblue; border-radius: 14px; border: 3px solid gold;}
::-webkit-scrollbar-track { background: gold;}
}
section {
min-height: 100vh;
background: #fff;
}
}
section {
padding: 1em;
}
section > * {
max-width: 40em; margin: 0.5em auto;
}
section h2 {
font-size: 3em; text-align: center; line-height: 2rem; margin-top: 5rem;
}
h1, h2, h3 {
font-family: serif;
}
nav {
position: fixed; top: 0; left: 0; z-index: 99; width: 100%; background: transparent;
}
- navigation {
display: flex; flex-direction: row; gap: 0.4em; max-width: 40em; margin: 0 auto; padding: 1em;
}
- navigation li {
list-style: none;
}
- navigation li a,
- navigation li a:link,
- navigation li a:visited {
display: block; margin: 0 0 0.5em 0; padding: 0.1em 0.5em; font-weight: bold; text-decoration: none; text-align: center; line-height: 180%; color: #204960; background: gold; border: thin solid #204960; border-radius: .5em;
}
- navigation li a:hover,
- navigation li a:focus,
- navigation li a:active {
color: gold; background: #204960;
}
/* Colored sections */
- part_1{
background: #fffbf0;
}
- part_2 {
background: white; /* #ebf5d7; */
}
- part_3 {
background: oklch(0.95 0.16 300);
color: oklch(0.44 0.16 300); }
- part_4 {
background: oklch(0.99 0.05 100);
}
- part_5 {
background: oklch(0.95 0.03 70);
}
/* Wide windows */
@media screen and (width > 37em) {
section{
padding: 1em;
}
section h2 {
font-size: 4em;
}
section p {
text-align: justify;
}
#navigation {
gap: 1em;
}
#navigation li a,
#navigation li a:link,
#navigation li a:visited {
padding: 0.1em 1em;
}
}
</style> </head>
<body> <nav>
</nav>
<section id="part_1" tabindex="1">
Inhaltsverzeichnis
Webdesign
</section>
<section id="part_2" tabindex="2">
HTML
</section>
<section id="part_3" tabindex="3">
CSS
</section>
<section id="part_4" tabindex="4">
JavaScript
</section>
<section id="part_5" tabindex="5">
SVG
</section>
</body> </html>
