html structure draft and first try of js time laps

2016-06-27 14:43:54 +02:00
parent 8218678f90
commit 1dfd58f8d7
7 changed files with 198 additions and 23 deletions
@@ -0,0 +1,60 @@
+html, body {
+  position: relative;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  width: 100%;
+  height: 100%; }
+
+#root {
+  position: relative;
+  width: 100%;
+  height: 100%; }
+
+#header {
+  position: absolute;
+  z-index: 10;
+  top: 0;
+  left: 0; }
+
+#pictures {
+  position: relative;
+  z-index: 5;
+  width: 100%;
+  height: 100%;
+  overflow: hidden; }
+  #pictures .frame {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    opacity: 0;
+    transition: opacity 100 ease-in-out; }
+    #pictures .frame.current {
+      opacity: 1; }
+
+#timeline {
+  position: absolute;
+  z-index: 9;
+  bottom: 0;
+  left: 0;
+  width: 67%;
+  margin: 1% 0 1% 32%;
+  height: 3em;
+  background-color: rgba(255, 255, 255, 0.6);
+  border-radius: 5px; }
+
+#map {
+  position: absolute;
+  z-index: 9;
+  bottom: 0;
+  left: 0;
+  width: 30%;
+  margin: 1%;
+  height: 40%;
+  background-color: rgba(255, 255, 255, 0.6);
+  border-radius: 5px; }