Beispiel:CSS-Hero-4.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">
<style>
html, body, header, h1, img {
padding: 0;
margin: 0;
}
body {
background-image: linear-gradient(white 0%, #e6f2f7 10%, #5c82d9 70%, #8db243 70%, #ebf5d7 100%);
position: relative;
min-width: 400px;
height: 99.5vh;
}
header h1 {
position: absolute;
top: 20%;
left: 10%;
}
svg {
width: 400px;
}
#eins {
position: absolute;
top: 50%;
left: 5%;
}
#zwei {
position: absolute;
top: 45%;
right: 5%;
}
text {
fill: yellow;
stroke: #3983ab;
stroke-width: 2px;
font-family: Garamond;
font-size: 2em;
}
nav {
position: absolute;
top: 90%;
left: 0%;
}
.ghost {
position: relative;
margin: 2em 4em;
padding: .5em 1em;
width: 8em;
background: transparent;
color: #3983ab;
text-decoration: none;
border: 1px solid #3983ab;
border-radius: 3px;
cursor: pointer;
transition: all ease 2s;
}
.ghost:hover, .ghost:active {
outline: none;
background: white;
color: darkblue;
}
@media all and (min-width: 60em) {
text {
font-size: 4em;
}
svg {
width: 800px;
}
header h1 {
left: 20%;
}
}
</style>
<title>Hero-Image Webseite - 2</title>
</head>
<body>
<header>
<h1>
<svg>
<text x="1" y="100">
Frohe Ostern!
</text>
</svg>
</h1>
</header>
<img id="eins" src="http://wiki.selfhtml.org/images/f/fa/Ostern-1.svg"
alt="Tulpe mit Ostereiern">
<img id="zwei" src="http://wiki.selfhtml.org/images/0/03/Ostern-2.svg"
alt="Bunny mit Ostereiern">
<nav>
<a class="ghost" href="http://wiki.selfhtml.org/wiki/HTML/Tutorials/Hero-Image-Webseite">zurück</a>
<a class="ghost" href="http://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:HTML-Tut-Hero-1.html">Beispiel 1</a>
</nav>
</body>
</html>