diff --git a/index.html b/index.html
new file mode 100644
index 0000000..215f8dd
--- /dev/null
+++ b/index.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>vesmir</title>
+    <style>
+        section{
+            height: 100vh;
+        }
+        #hvezdy{
+            color: white;
+        }
+    </style>
+</head>
+<body>
+    <section id="uvod">
+        void
+    </section>
+    <section id="dark">
+        dark
+    </section>
+    <section id="hvezdy">
+        hvezdy
+    </section>
+    <script>
+        function handler() {
+            let dark = document.querySelector('#dark');
+            let dark_rect = dark.getBoundingClientRect();
+            console.log(dark_rect.top);
+            let value = Math.ceil(255 * (dark_rect.top / dark_rect.height));
+            if (value >= 0 && value <= 255) {
+                document.body.style.backgroundColor = "rgb(" + value + "," + value + "," + value + ")";
+            }
+            
+            let hvezdy = document.querySelector("#hvezdy");
+            let hvezdy_rect = hvezdy.getBoundingClientRect();
+            console.log("hvezdy: " + (hvezdy_rect.height - hvezdy_rect.top));
+            if (hvezdy_rect.height - hvezdy_rect.top > 0) {
+                let opacity = (hvezdy_rect.top / hvezdy_rect.height);
+                if (opacity >= 0 && opacity <= 1){
+                console.log("opacity: " + opacity);
+            }
+
+
+            }
+            
+        }
+
+
+        window.addEventListener('load', handler, false);
+        window.addEventListener('scroll', handler, false);
+        window.addEventListener('resize', handler, false);
+    </script>
+</body>
+</html>
\ No newline at end of file
