Beispiel:OnePager-2014.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>One-Pager nur mit CSS - 2014 Version</title>  
 <style>
 * {

box-sizing: border-box; }

html{ background:#00296d; font-family: Arial, Helvetica, sans-serif; margin: 0; padding: 0; }

body{ position: relative; overflow: hidden; max-width: 65em; margin: 0em auto; height: 100vh; }

section { padding:3em 1em 1em; width:100%; height: 100vh; background: white; opacity: 0; position: absolute; top: 0; left: 0; transition: all 0.5s; }

section:first-of-type { 

 opacity: 1;
 transition: all 0.5s;

}

section:target { 

 opacity: 1;

z-index: 2;

}

.team { 

 width: 50%;
 display: table-cell;
 margin: 1em;
 text-align: center;
 position: relative;

}

.team:first-of-type:after { 

 content:':';
 font-size: 8em;
 position: absolute;
 top: .5em;
 right: -0.4em;

} .team p { 

 font-size: 8em;
 line-height: 100%;
 margin: 0.2em 0;
 font-weight: bold;

}

.team ul {margin-left: 4em;}

.team li { 

 text-align:left;
 margin-left: 4em;
 list-style: none;

}

.team li::before { 

 content: "⚽ ";    
 font-size: 1.5em;

}

img { border: none; }

h1 { color: #00296d; padding: 0.5em; font-size: 2.5em; }

h2 { font-family: Arial, Helvetica, sans-serif; margin: 0 0 0.5em 0; }

h3 { font-family: Arial, Helvetica, sans-serif; margin: 0; padding: 0; }


  1. navigation {

position: absolute; top: 0; left: 0; z-index: 99; margin: 0; padding: 1em; width: 100%; background: #00296d; list-style: none; }

  1. navigation li {

float: left; height: 2em; text-align: center; margin: 0; border: solid 1px gold; border-radius:.5em; line-height: 150%; font-family: Arial bold, Helvetica, sans-serif; margin: 0 0 0 1em; }

  1. navigation li a, #navigation li a:link, #navigation li a:visited {

text-decoration: none; display: block; height: 2em; color: gold; font-weight:bold; padding: 0.1em 1em; }

  1. navigation li a:hover, #navigation li a:focus, #navigation li a:active {

background: gold; color: #00296d; border-radius: .5em; }

.gruppen{ display: table-cell; }

.gruppe{ float: left; width: 33%; }

@media (min-width: 40em) { .gruppe{ width: 25%; } }

/*DL, DT, DD Datenliste*/ dt { float: left; clear: left; width: 130px; font-size: 1em; font-weight: bold; 

}

dd { margin: 0 0 5px 135px; padding: 0 0 0.5em 0; font-size: 1.5em; }

.flag{ display: block; position: relative; overflow: hidden; width: 3em; height: 2em; background: white; 

 border: 1px solid #333;

}

  1. part_1:target ~ nav li:nth-child(1)
  2. part_2:target ~ nav li:nth-child(2), ... { andere Farben }

</style> 

 <link href="./Beispiel:Flaggen.css" rel="stylesheet" type="text/css">

</head>

<body> <section id="part_1">

One-Pager ohne JavaScript - 3
(weiche Übergänge)

<img src="//wiki.selfhtml.org/images/8/82/FIFA-WC-2014-Brasil.svg" alt="Logo der WM 2014, Quelle: Wikipedia">

</section>

<section class="gruppen" id="part_2">

Gruppen

Wie viele Bilder hat diese Seite? - <a href="#three">Auflösung</a>

Gruppe A

Brasilien
Kroatien
Mexiko
Kamerun

Gruppe B

Spanien
Niederlande
Chile
Australien
  ✸
         				 ✸
    ★

Gruppe C

Kolumbien
Elfenbeinküste
Griechenland
Japan

Gruppe D

Uruguay
Costa Rica
England
Italien

Gruppe E

Schweiz
Ecuador
Frankreich
Honduras

Gruppe F

Argentinien
Bosnien
Iran
Nigeria

Gruppe G

Deutschland
Portugal
Ghana
USA

Gruppe H

Belgien
Algerien
Russland
Südkorea
☰
☵
☷
☲

</section>

<section id="part_3">

Das Wunder von Mineirão

08.Juli 2014 im Mineirão Stadion in Belo Horizonte

Deutschland

7

  • 0:1 Müller (11.)
  • 0:2 Klose (23.)
  • 0:3 Kroos (24.)
  • 0:4 Kroos (26.)
  • 0:5 Khedira (29.)
  • 0:6 Schürrle (69.)
  • 0:7 Schürrle (79.)
Brasilien

1

  • 1:7 Oscar (90.)

</section>

<section id="part_4">

Das Finale

13.Juli 2014 im Maracanã Stadium in Rio de Janeiro

Deutschland

1

  • 0:1 Götze (113.)
Argentinien

0

</section>

<section id="part_5">

Wie viele Bilder waren es?

Genau genommen, kein einziges!

Diese Flaggen wurden nur durch die passenden CSS-Definitionen erzeugt.
Trikoloren erfordern einen einzigen <a href="https://wiki.selfhtml.org/wiki/Linear-gradient%28%29">linear-gradient() </a>, kompliziertere Muster
benötigen die <a href="https://wiki.selfhtml.org/wiki/CSS/Selektoren/after">Pseudo-Elemente</a>  :after und :before.

Heute, da der IE8 mittlerweile als ausgestorben gilt, könnte man diese Effekte
mit <a href="https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einsteig">SVG</a> noch einfacher und genauer realisieren.

In diesem Selfhtml <a href="https://wiki.selfhtml.org/wiki/OnePager">Wiki-Artikel</a> wird die Funktionsweise der One-Page-Webseite erklärt.

</section>

<nav>

</nav>

</body> </html>

Abgerufen am 22.06.2025
von "http://wiki.selfhtml.org/wiki/Beispiel:OnePager-2014.html"