scroll indiaktor

This commit is contained in:
Moritz 2019-07-12 00:36:15 +02:00
parent 45cd3558e2
commit f1015b9c32
2 changed files with 30 additions and 2 deletions

View file

@ -3,6 +3,7 @@
<head> <head>
<meta name="viewport" charset="UTF-8" content="width=device-width, height=device-height, initial-scale=1.0"> <meta name="viewport" charset="UTF-8" content="width=device-width, height=device-height, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="inhalte/designes/index.css"> <link rel="stylesheet" type="text/css" href="inhalte/designes/index.css">
<link rel="stylesheet" type="text/css" href="inhalte/designes/webfont-all.css">
<title>Epic-Sax</title> <title>Epic-Sax</title>
</head> </head>
@ -12,6 +13,7 @@
<h2>Willkommen auf</h2> <h2>Willkommen auf</h2>
<h1>Epic-Sax</h1> <h1>Epic-Sax</h1>
</div> </div>
<div class="arrow"></div>
</div> </div>
<div class="page history"> <div class="page history">
<h1>Geschichte</h1> <h1>Geschichte</h1>

View file

@ -15,8 +15,7 @@ div.page {
width: 100%; width: 100%;
height: 100%; height: 100%;
/* border: 5px solid red;
box-sizing: border-box; */
} }
/*### HOME #########################################################################*/ /*### HOME #########################################################################*/
@ -131,3 +130,30 @@ div.saxophones div.saxophone > img {
height: inherit; height: inherit;
} }
/*#### scroll #### */
.arrow::before{
content: 'Space';
color: grey;
position: absolute;
opacity: 0.8;
text-shadow: 0 0 .5rem rgba(0,0,0,0.5);
width: 6rem;
font-size: 2rem;
height: 4rem;
line-height: 4rem;
text-align: center;
bottom: 2rem;
margin-left: -3rem;
left: 50%;
animation: bounce 1s ease infinite;
}
@keyframes bounce {
50% {
transform: translateY(-50%);
}
100% {
transform: translateY(0);
}
}