Beispiel: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;
}
 
 
#navigation {
	position: absolute;
	top: 0; 
	left: 0;
	z-index: 99;	
	margin: 0;
	padding: 1em;
	width: 100%;
	background: #00296d;	
	list-style: none;
}
 
#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;
}
 
#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;	
}
 
#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;	
}
 
#part_1:target ~ nav li:nth-child(1)
#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">
  <h1>One-Pager ohne JavaScript - 3<br>(weiche Übergänge)</h1>
  <p style="text-align:center;">
	   	<img src="//wiki.selfhtml.org/images/8/82/FIFA-WC-2014-Brasil.svg" alt="Logo der WM 2014, Quelle: Wikipedia">
  </p>
</section>
 
<section class="gruppen" id="part_2">
  <h1>Gruppen</h1>
  <p style="float:right; margin-top:-3em;">Wie viele Bilder hat diese Seite? - <a href="#three">Auflösung</a>
  </p>
  <div class="gruppe">
      <h2>Gruppe A</h2>
      <dl>  
        <dt>Brasilien</dt>
        <dd class="flag brasilien"></dd>
        <dt>Kroatien</dt>
        <dd class="flag  kroatien"></dd>
        <dt>Mexiko</dt>
        <dd class="flag mexiko"></dd>
        <dt>Kamerun</dt>
        <dd class="flag kamerun"></dd>
			</dl>
  </div>
 
  <div class="gruppe">
    <h2>Gruppe B</h2>
    <dl> 
        <dt>Spanien</dt>
        <dd class="flag spanien"></dd>
        <dt>Niederlande</dt>
        <dd class="flag niederlande"></dd>
        <dt>Chile</dt>
        <dd class="flag chile"></dd>
        <dt>Australien</dt>
        <dd class="flag australien">
        	<div class="union-jack"></div>
        	<div class="cross">&nbsp; ✸<br/>
          				 ✸<br/>
                   &nbsp; &nbsp; ★</div>
        </dd>
      </dl>
    </div>
 
    <div class="gruppe">
      <h2>Gruppe C</h2>
      <dl> 
        <dt>Kolumbien</dt>
        <dd class="flag kolumbien"></dd>
        <dt>Elfenbeinküste</dt>
        <dd class="flag elfenbein"></dd>
        <dt>Griechenland</dt>
        <dd class="flag griechenland"></dd>
        <dt>Japan</dt>
        <dd class="flag japan"></dd>
      </dl>
    </div>
 
	<div class="gruppe">
      <h2>Gruppe D</h2>
      <dl> 
        <dt>Uruguay</dt>
        <dd class="flag uruguay"></dd>
        <dt>Costa&nbsp;Rica</dt>
        <dd class="flag costarica"></dd>
        <dt>England</dt>
        <dd class="flag england"></dd>
        <dt>Italien</dt>
        <dd class="flag italien"></dd>
      </dl>
    </div>
 
    <div class="gruppe">
      <h2>Gruppe E</h2>
      <dl> 
        <dt>Schweiz</dt>
        <dd class="flag schweiz"></dd>
        <dt>Ecuador</dt>
        <dd class="flag ecuador"></dd>
        <dt>Frankreich</dt>
        <dd class="flag frankreich"></dd>
        <dt>Honduras</dt>
        <dd class="flag honduras"></dd>
      </dl>
    </div>
 
    <div class="gruppe">
      <h2>Gruppe F</h2>
      <dl> 
        <dt>Argentinien</dt>
        <dd class="flag argentinien"></dd>
        <dt>Bosnien</dt>
        <dd class="flag bosnien"></dd>
        <dt>Iran</dt>
        <dd class="flag iran"></dd>
        <dt>Nigeria</dt>
        <dd class="flag nigeria"></dd>
      </dl>
    </div>       
 
    <div class="gruppe">
      <h2>Gruppe G</h2>
      <dl> 
        <dt>Deutschland</dt>
        <dd class="flag deutschland"></dd>
        <dt>Portugal</dt>
        <dd class="flag portugal"></dd>
        <dt>Ghana</dt>
        <dd class="flag ghana"></dd>
        <dt>USA</dt>
        <dd class="flag usa"></dd>
      </dl>
    </div>                 
 
    <div class="gruppe">
      <h2>Gruppe H</h2>
      <dl> 
        <dt>Belgien</dt>
        <dd class="flag belgien"></dd>
        <dt>Algerien</dt>
        <dd class="flag algerien"></dd>
        <dt>Russland</dt>
        <dd class="flag russland"></dd>
        <dt>Südkorea</dt>
        <dd class="flag suedkorea">	
        	<div class="yy">
						<div class="yin"></div>
						<div class="yang"></div>
					</div>
					<div id="strcontainer1">☰</div>
					<div id="strcontainer2">☵</div>
					<div id="strcontainer3">☷</div>
					<div id="strcontainer4">☲</div>
        </dd>
      </dl>
    </div>
</section>
 
<section id="part_3">
  <h1>Das Wunder von Mineirão</h1>
  <p>08.Juli 2014 im Mineirão Stadion in Belo Horizonte</p>
 
  <div class="team">
    <dl> 
      <dt>Deutschland</dt>
      <dd class="flag deutschland"></dd>
    </dl>
    <p class="">7 </p> 
    <ul>
      <li> 0:1 Müller (11.)</li>
      <li> 0:2 Klose (23.)</li>
      <li> 0:3 Kroos (24.)</li>
      <li> 0:4 Kroos (26.)</li>
      <li> 0:5 Khedira (29.)</li>
      <li> 0:6 Schürrle (69.)</li>
      <li> 0:7 Schürrle (79.)</li>
    </ul> 
  </div>  
  <div class="team">
    <dl> 
      <dt>Brasilien</dt>
      <dd class="flag brasilien"></dd>
    </dl>
    <p class="">1 </p> 
    <ul>
      <li>1:7 Oscar (90.)</li>   
    </ul>
  </div>      
</section>
 
<section id="part_4">
  <h1>Das Finale</h1>
  <p>13.Juli 2014 im Maracanã Stadium in Rio de Janeiro</p>
 
  <div class="team">
    <dl> 
      <dt>Deutschland</dt>
      <dd class="flag deutschland"></dd>
    </dl>
    <p class="">1 </p> 
    <ul>
      <li> 0:1 Götze (113.)</li>
    </ul> 
  </div>  
  <div class="team">
    <dl> 
      <dt>Argentinien</dt>
      <dd class="flag argentinien"></dd>
    </dl>
    <p class="">0</p> 
  </div>    
</section>
 
<section id="part_5">
  <h1>Wie viele Bilder waren es?</h1>
  <p>Genau genommen, kein einziges!</p>
  <p>
   	 Diese Flaggen wurden nur durch die passenden CSS-Definitionen erzeugt. <br>
     Trikoloren erfordern einen einzigen <a href="https://wiki.selfhtml.org/wiki/Linear-gradient%28%29">linear-gradient() </a>,
     kompliziertere Muster<br>benötigen die <a href="https://wiki.selfhtml.org/wiki/CSS/Selektoren/after">Pseudo-Elemente</a> 
     :after und :before.
  </p>  
  <p>Heute, da der IE8 mittlerweile als ausgestorben gilt, könnte man diese Effekte<br>
     mit <a href="https://wiki.selfhtml.org/wiki/SVG/Tutorials/Einsteig">SVG</a> 
     noch einfacher und genauer realisieren.
  </p>   
  <p>In diesem Selfhtml <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/Single-Page_Webseite">Wiki-Artikel</a> wird die Funktionsweise der One-Page-Webseite erklärt.</p> 
</section>
 
<nav>	
	<ul id="navigation">
		<li><a href="#">Startseite</a></li>
		<li><a href="#part_2">Gruppen</a></li>
		<li><a href="#part_3">Wunder</a></li>
		<li><a href="#part_4">Finale</a></li>
		<li><a href="#part_5">?</a></li>
	</ul>
</nav>

</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:Beispiel:OnePager-2014.html&oldid=88265“