|
|
|
@ -15,17 +15,26 @@ |
|
|
|
} |
|
|
|
|
|
|
|
.earth-fixed{ |
|
|
|
padding: 10%; |
|
|
|
position: fixed; |
|
|
|
width: 200px; |
|
|
|
width: 500px; |
|
|
|
opacity: 0;} |
|
|
|
.stars{ |
|
|
|
position:fixed; |
|
|
|
opacity: 0; |
|
|
|
} |
|
|
|
#hvezdicky{ |
|
|
|
color: white; |
|
|
|
} |
|
|
|
#zjeveni{ |
|
|
|
color: white; |
|
|
|
} |
|
|
|
#rotace{ |
|
|
|
color: white; |
|
|
|
} |
|
|
|
|
|
|
|
img { |
|
|
|
width: 250px; |
|
|
|
} |
|
|
|
</style> |
|
|
|
</head> |
|
|
|
<body> |
|
|
|
@ -33,20 +42,21 @@ |
|
|
|
<div id="earth"> |
|
|
|
<img class="earth-fixed" src="img/img/e1.jpg" alt=""> |
|
|
|
</div> |
|
|
|
<section id="uvod"> |
|
|
|
void |
|
|
|
<section id="uvod" style="text-align: center; padding-top: 50vh; font-size: 30px;"> |
|
|
|
before the scroll,<br>there was the void... |
|
|
|
</section> |
|
|
|
<section id="dark"> |
|
|
|
dark |
|
|
|
<section id="dark" style="text-align: center; padding-top: 50vh; font-size: 30px; color: grey;"> |
|
|
|
... then came<br>the dark |
|
|
|
</section> |
|
|
|
<section id="hvezdy"> |
|
|
|
hvězdy |
|
|
|
<section id="hvezdy" style="text-align: center; padding-top: 50vh; font-size: 30px; color: grey;"> |
|
|
|
... few millions years later,<br>the stars emerged |
|
|
|
</section> |
|
|
|
<section id="zjeveni"> |
|
|
|
zjeveni |
|
|
|
|
|
|
|
<section id="zjeveni" style="padding-left: 75%; padding-top: 50vh; font-size: 30px; color: grey;"> |
|
|
|
and finally,<br>the planet |
|
|
|
</section> |
|
|
|
<section id="rotace"> |
|
|
|
rotace |
|
|
|
<section id="rotace" style="padding-left: 75%; padding-top: 50vh; font-size: 30px; color: grey;"> |
|
|
|
earth formed |
|
|
|
</section> |
|
|
|
|
|
|
|
<script> |
|
|
|
|
david subr
4 years ago