230 lines
4 KiB
CSS
230 lines
4 KiB
CSS
body{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0%;
|
|
background-color: rgb(225, 240, 255);
|
|
font-family: Futura, "Trebuchet MS", Arial, sans-serif;
|
|
}
|
|
|
|
body.story{
|
|
background-color: rgb(240, 235, 220);
|
|
}
|
|
|
|
header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
width: 100%;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
header.index {
|
|
justify-content: flex-end;
|
|
background-image: url(images/planet-gbb8a962be_1920.jpg);
|
|
background-repeat: no-repeat;
|
|
height: 300px;
|
|
}
|
|
|
|
header.story {
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
height: 100px;
|
|
}
|
|
|
|
main, footer{
|
|
display: flex;
|
|
width: 70%;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
@media (max-width: 720px){
|
|
main, footer {
|
|
display: flex;
|
|
width: 95%;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
}
|
|
}
|
|
|
|
header h1 {
|
|
color: rgb(255, 255, 255);
|
|
padding: 30px;
|
|
margin-top: 30px;
|
|
font-size: 100px;
|
|
}
|
|
|
|
div.button {
|
|
border: 1px solid black;
|
|
}
|
|
|
|
div.button:hover{
|
|
opacity: 0.7;
|
|
}
|
|
|
|
div.button#login {
|
|
padding: 10px;
|
|
border-radius: 7px;
|
|
margin: 5px;
|
|
font-size: large;
|
|
background-color: rgb(225, 240, 255);
|
|
}
|
|
|
|
div.button#login p {
|
|
margin: 0px;
|
|
color: black;
|
|
}
|
|
|
|
h2{
|
|
font-size: 40px;
|
|
margin-top: 60px;
|
|
}
|
|
|
|
p {
|
|
font-size: 20px;
|
|
}
|
|
|
|
p.storyMadeYear {
|
|
margin: 0px;
|
|
font-size: 25px;
|
|
font-weight: bold;
|
|
opacity: 0.7;
|
|
padding-top: 30px;
|
|
border-top: 2px dotted rgb(143, 158, 175);
|
|
}
|
|
|
|
div.zurueck {
|
|
background-color: rgb(240, 235, 220);
|
|
text-align: center;
|
|
margin-left: 80px;
|
|
position: fixed;
|
|
box-shadow:rgb(0, 0, 0);
|
|
}
|
|
|
|
div.zurueck p {
|
|
color: rgb(0, 0, 0);
|
|
font-weight: bold;
|
|
margin: 0px;
|
|
padding: 10px;
|
|
}
|
|
|
|
div.linkBox{
|
|
padding-top: 25px;
|
|
padding-bottom: 25px;
|
|
}
|
|
|
|
div.storyLink {
|
|
border-radius: 10px;
|
|
border: 1px solid black;
|
|
width: 100%;
|
|
text-align: left;
|
|
background-size: 100%;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
div.storyLink p {
|
|
font-size: 30px;
|
|
padding: 50px;
|
|
margin: 0px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
div.storyLink:hover {
|
|
opacity: 0.7;
|
|
}
|
|
|
|
div.storyLink#einGanzesUniversum {
|
|
background-image: url(images/spaceStation.jpg);
|
|
background-position: 0px 35%;
|
|
}
|
|
|
|
div.storyLink#einGanzesUniversum p {
|
|
color: rgb(255, 255, 255);
|
|
}
|
|
|
|
div.storyLink#dasSignal {
|
|
background-image: url(images/spaceProbe.jpg);
|
|
background-position: 0px 45%;
|
|
}
|
|
|
|
div.storyLink#dasSignal p {
|
|
color: rgb(255, 255, 255);
|
|
}
|
|
|
|
div.storyLink#TraeumeDrachen {
|
|
background-image: url(images/evening-flight-of-dragons-4k-ic.jpg);
|
|
background-position: 0px 40%;
|
|
}
|
|
|
|
div.storyLink#TraeumeDrachen p {
|
|
color: rgb(112, 112, 112);
|
|
}
|
|
|
|
div.storyLink#schwarzImSchnee {
|
|
background-image: url(images/caricature-g76effd26f_1920.jpg);
|
|
background-position: 0px 70%;
|
|
}
|
|
|
|
div.storyLink#schwarzImSchnee p {
|
|
color: rgb(19, 19, 19);
|
|
}
|
|
|
|
div.storyLink#sunsetDue {
|
|
background-image: url(images/science-fiction-ge38b2bddf_1920.jpg);
|
|
background-position: 0px 50%;
|
|
}
|
|
|
|
div.storyLink#sunsetDue p {
|
|
color: rgb(211, 211, 211);
|
|
}
|
|
|
|
div.storyLink#traumschloss {
|
|
background-image: url(images/teahub.io-coole-wallpaper-360571.png);
|
|
background-position: 0px 25%;
|
|
}
|
|
|
|
div.storyLink#traumschloss p {
|
|
color: rgb(244, 248, 255);
|
|
}
|
|
|
|
div.storyLink#totesLeben {
|
|
background-image: url(images/teahub.io-forest-desktop-wallpaper-1643267.png);
|
|
background-position: 0px 60%;
|
|
}
|
|
|
|
div.storyLink#totesLeben p {
|
|
color: rgb(181, 207, 197);
|
|
}
|
|
|
|
div.storyLink#leben {
|
|
background-image: url(images/teahub.io-cloud-sky-wallpaper-1776886.png);
|
|
background-position: 0px 50%;
|
|
}
|
|
|
|
div.storyLink#leben p {
|
|
color: rgb(162, 196, 209);
|
|
}
|
|
|
|
section {
|
|
width: 100%;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
|
|
}
|
|
|
|
footer a {
|
|
color: rgb(143, 158, 175);
|
|
}
|
|
|
|
footer {
|
|
color: rgb(143, 158, 175);
|
|
font-size: 20px;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-top: 2px dashed rgb(143, 158, 175);
|
|
} |