init commit

2 files changed, 73 insertions, 0 deletions

diff --git a/static/css/index.css b/static/css/index.css
new file mode 100644
index 0000000..2fbcc51
--- /dev/null
+++ b/static/css/index.css
@@ -0,0 +1,73 @@
+.centerAll {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+#mainBG {
+  position: relative;
+  width: 100%;
+  height: 80vh;
+  overflow: hidden;
+  background-size: cover;
+  background-repeat: no-repeat;
+  color: #ffffff;
+}
+
+#mainBG .wave {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100px;
+  background: url("/img/wave.png");
+  background-size: 1000px 100px;
+}
+
+#mainBG .wave.wave1 {
+  animation: wave-animate 30s linear infinite;
+  z-index: 303;
+  opacity: 1;
+  animation-delay: 0s;
+  bottom: 0;
+}
+#mainBG .wave.wave2 {
+  animation: wave-animate2 15s linear infinite;
+  z-index: 302;
+  opacity: 0.5;
+  animation-delay: -5s;
+  bottom: 10px;
+}
+#mainBG .wave.wave3 {
+  animation: wave-animate 30s linear infinite;
+  z-index: 301;
+  opacity: 0.2;
+  animation-delay: -2s;
+  bottom: 15;
+}
+#mainBG .wave.wave4 {
+  animation: wave-animate2 5s linear infinite;
+  z-index: 300;
+  opacity: 0.7;
+  animation-delay: -5s;
+  bottom: 20px;
+}
+
+@keyframes wave-animate {
+  0% {
+    background-position-x: 0;
+  }
+  100% {
+    background-position-x: 1000px;
+  }
+}
+
+@keyframes wave-animate2 {
+  0% {
+    background-position-x: 0;
+  }
+  100% {
+    background-position-x: -1000px;
+  }
+}
diff --git a/static/img/wave.png b/static/img/wave.png
new file mode 100644
index 0000000..438acd6
--- /dev/null
+++ b/static/img/wave.png