diff --git a/img/e1.jpg b/img/e1.jpg
new file mode 100644
index 0000000..266a978
Binary files /dev/null and b/img/e1.jpg differ
diff --git a/img/e10.jpg b/img/e10.jpg
new file mode 100644
index 0000000..c3d6cc6
Binary files /dev/null and b/img/e10.jpg differ
diff --git a/img/e11.jpg b/img/e11.jpg
new file mode 100644
index 0000000..2e5004b
Binary files /dev/null and b/img/e11.jpg differ
diff --git a/img/e12.jpg b/img/e12.jpg
new file mode 100644
index 0000000..71eac80
Binary files /dev/null and b/img/e12.jpg differ
diff --git a/img/e13.jpg b/img/e13.jpg
new file mode 100644
index 0000000..6b72a95
Binary files /dev/null and b/img/e13.jpg differ
diff --git a/img/e2.jpg b/img/e2.jpg
new file mode 100644
index 0000000..36f111f
Binary files /dev/null and b/img/e2.jpg differ
diff --git a/img/e3.jpg b/img/e3.jpg
new file mode 100644
index 0000000..e06ac8c
Binary files /dev/null and b/img/e3.jpg differ
diff --git a/img/e4.jpg b/img/e4.jpg
new file mode 100644
index 0000000..4ae46fb
Binary files /dev/null and b/img/e4.jpg differ
diff --git a/img/e5.jpg b/img/e5.jpg
new file mode 100644
index 0000000..4719a41
Binary files /dev/null and b/img/e5.jpg differ
diff --git a/img/e6.jpg b/img/e6.jpg
new file mode 100644
index 0000000..67dee6a
Binary files /dev/null and b/img/e6.jpg differ
diff --git a/img/e7.jpg b/img/e7.jpg
new file mode 100644
index 0000000..9fe24f1
Binary files /dev/null and b/img/e7.jpg differ
diff --git a/img/e8.jpg b/img/e8.jpg
new file mode 100644
index 0000000..b93c49c
Binary files /dev/null and b/img/e8.jpg differ
diff --git a/img/e9.jpg b/img/e9.jpg
new file mode 100644
index 0000000..07db356
Binary files /dev/null and b/img/e9.jpg differ
diff --git a/img/stars.jpg b/img/stars.jpg
new file mode 100644
index 0000000..93adc4f
Binary files /dev/null and b/img/stars.jpg differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..f018b2f
--- /dev/null
+++ b/index.html
@@ -0,0 +1,97 @@
+<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>Vesmír</title>
+    <style>
+        section{
+            height: 100vh;
+        }
+
+        #hvezdy{
+            color: white;
+        }
+
+        .earth-fixed{
+            position: fixed;
+            width: 200px;
+            opacity: 0;
+        }
+        #zjeveni{
+            color: white;
+        }
+        #rotace{
+            color: white;
+        }
+
+    </style>
+</head>
+<body>
+
+    <div id="earth">
+        <img class="earth-fixed" src="img/e1.jpg" alt="">
+    </div>
+    <section id="uvod">
+        void
+    </section>
+    <section id="dark">
+        dark
+    </section>
+    <section id="hvezdy">
+        hvězdy
+    </section>
+    <section id="zjeveni">
+        zjeveni
+    </section>
+    <section id="rotace">
+        rotace
+    </section>
+
+    <script>
+        function handler () {
+            let dark = document.querySelector('#dark');
+            let dark_rect = dark.getBoundingClientRect();
+            console.log("dark: " + 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);
+                    console.log("Opacity: " + opacity);
+            }
+
+            let zjeveni = document.querySelector('#zjeveni');
+            let zjeveni_rect = zjeveni.getBoundingClientRect();
+            let zeme_img = document.querySelector(".earth-fixed");
+            console.log("zjeveni: " + (zjeveni_rect.height - zjeveni_rect.top));
+            if (zjeveni_rect.height - zjeveni_rect.top > 0) {
+                let opacity = 1 - (zjeveni_rect.top / zjeveni_rect.height);
+                console.log("zjeveni opacity: " + opacity)
+                zeme_img.style.opacity = opacity;
+            }
+
+            let rotace = document.querySelector('#rotace');
+            let rotace_rect = rotace.getBoundingClientRect();
+            console.log("rotace: " + (rotace_rect.height - rotace_rect.top));
+            if (rotace_rect.height - rotace_rect.top > 0) {
+                let cislo = Math.ceil(13 * (1 - (rotace_rect.top / rotace_rect.height)));
+                console.log("cislo: " + cislo);
+                if (cislo >= 1 && cislo <= 13) {
+                    zeme_img.setAttribute("src", "img/e" + cislo + ".jpg");
+                }
+            }
+        }
+
+        //cisla v konzoli
+        window.addEventListener('load', handler, false);
+        window.addEventListener('scroll', handler, false);
+        window.addEventListener('resize', handler, false);
+    </script>
+</body>
+</html>
\ No newline at end of file
