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…
	
	Add table
		
		Reference in a new issue