Beispiel:CSS-Hero-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">
  <style>
html, body, header, h1, img {
  padding: 0;
  margin: 0;
  overflow-y:hidden; 
}

html {
  background-color: #a2a44c;
}

header {
  position: relative;
  height: 100vh; 	
}

header img {
  width: 100%;
  height: 100%;
}

header h1 {

}

#eins {
  position: absolute;
  top: 10%;
  left:50%;
}

#zwei {
  position: absolute;	
  top: 20%;
  left:50%;
}

text {
  fill:none;
  stroke: yellow;
  stroke-width: 1;
  font-family: Garamond;
  font-size: 2em;
} 

@media all and (min-width: 60em) { 

  text { font-size:2.8em; }
}
footer {
    position: absolute;
bottom: 0.5em;
right: 1em;
color: white;
}
  </style>
  <title>Hero-Image Webseite</title>
</head>
<body>
<header>
  <img src="//wiki.selfhtml.org/images/f/f3/Narzisse-m.jpg" 
       alt="Osterglocke als Zeichen des Frühlings, Quelle: Wikipedia"
       srcset="//wiki.selfhtml.org/images/e/e7/Narzisse-lg.jpg 4140w, 
             //wiki.selfhtml.org/images/f/f3/Narzisse-m.jpg 1920w, 
             //wiki.selfhtml.org/images/0/09/Narzisse-sm.jpg 1000w">

  <h1>
    <svg id="eins">
	  <text x="1" y="100">
	    Frohe
	  </text>
	</svg>
    <svg id="zwei">
	  <text x="1" y="100">
	    Ostern!
	  </text>
	</svg>    
  </h1>
</header>
<footer>
<a rel="license" href="https://commons.wikimedia.org/wiki/File:Narzisse.jpg">Narzisse von Martin Hirtreiter</a>  (CC BY-SA 3.0)
</footer>
</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS-Hero-3.html&oldid=81135“