scroll indiaktor
This commit is contained in:
parent
45cd3558e2
commit
f1015b9c32
2 changed files with 30 additions and 2 deletions
|
@ -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>
|
||||||
|
|
|
@ -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);
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in a new issue