i made the header and something extra

1 files changed, 334 insertions, 0 deletions

diff --git a/static/css/core.css b/static/css/core.css
new file mode 100644
index 00000000..d13338d4
--- /dev/null
+++ b/static/css/core.css
@@ -0,0 +1,334 @@
+/* Shared CSS File */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Mali", sans-serif;
+  font-size: 11px;
+}
+
+*,
+input,
+button {
+  outline: none;
+  border: none;
+}
+
+hr {
+  border: 0;
+  height: 1px;
+  background: #fff;
+}
+
+html {
+  background-color: #000;
+  color: #fff;
+}
+
+#video-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  object-fit: cover;
+  z-index: -100;
+}
+
+#video-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #000;
+  opacity: 0.35;
+  z-index: -99;
+}
+
+#body-wrapper {
+  position: relative;
+  z-index: 1;
+  width: 1000px;
+  margin: 0 auto;
+}
+
+#content-wrapper {
+  display: flex;
+}
+
+#left-sidebar {
+  width: 200px;
+  border-top: 1px solid #fff;
+  border-top-left-radius: 14px;
+}
+
+#main-content {
+  width: 580px;
+  padding: 0 20px;
+  border-top: 1px solid #fff;
+}
+
+#right-sidebar {
+  width: 200px;
+  border-top: 1px solid #fff;
+}
+
+.flip-container {
+  perspective: 1000px;
+}
+.flipper {
+  position: relative;
+  transform-style: preserve-3d;
+  transition: transform 0.6s;
+}
+.front,
+.back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: start;
+}
+.back {
+  transform: rotateX(180deg);
+}
+
+.glitch,
+.glow {
+  color: #dfbfbf;
+  position: relative;
+  font-size: 18px;
+  font-weight: bold;
+  animation: glitch 5s 5s infinite;
+}
+
+.glitch::before,
+.glow::before {
+  content: attr(data-text);
+  position: absolute;
+  left: -2px;
+  text-shadow: -5px 0 magenta;
+  background: black;
+  overflow: hidden;
+  top: 0;
+  animation: noise-1 3s linear infinite alternate-reverse,
+    glitch 5s 5.05s infinite;
+}
+
+.glitch::after,
+.glow::after {
+  content: attr(data-text);
+  position: absolute;
+  left: 2px;
+  text-shadow: -5px 0 lightgreen;
+  background: black;
+  overflow: hidden;
+  top: 0;
+  animation: noise-2 3s linear infinite alternate-reverse, glitch 5s 5s infinite;
+}
+
+@keyframes glitch {
+  1% {
+    transform: rotateX(10deg) skewX(90deg);
+  }
+  2% {
+    transform: rotateX(0deg) skewX(0deg);
+  }
+}
+@keyframes noise-1 {
+  3.3333333333% {
+    clip-path: inset(9px 0 46px 0);
+  }
+  6.6666666667% {
+    clip-path: inset(54px 0 5px 0);
+  }
+  10% {
+    clip-path: inset(13px 0 46px 0);
+  }
+  13.3333333333% {
+    clip-path: inset(54px 0 31px 0);
+  }
+  16.6666666667% {
+    clip-path: inset(80px 0 1px 0);
+  }
+  20% {
+    clip-path: inset(61px 0 29px 0);
+  }
+  23.3333333333% {
+    clip-path: inset(39px 0 32px 0);
+  }
+  26.6666666667% {
+    clip-path: inset(25px 0 43px 0);
+  }
+  30% {
+    clip-path: inset(68px 0 5px 0);
+  }
+  33.3333333333% {
+    clip-path: inset(4px 0 42px 0);
+  }
+  36.6666666667% {
+    clip-path: inset(90px 0 4px 0);
+  }
+  40% {
+    clip-path: inset(75px 0 25px 0);
+  }
+  43.3333333333% {
+    clip-path: inset(56px 0 17px 0);
+  }
+  46.6666666667% {
+    clip-path: inset(24px 0 26px 0);
+  }
+  50% {
+    clip-path: inset(90px 0 8px 0);
+  }
+  53.3333333333% {
+    clip-path: inset(22px 0 65px 0);
+  }
+  56.6666666667% {
+    clip-path: inset(45px 0 29px 0);
+  }
+  60% {
+    clip-path: inset(93px 0 3px 0);
+  }
+  63.3333333333% {
+    clip-path: inset(80px 0 12px 0);
+  }
+  66.6666666667% {
+    clip-path: inset(93px 0 4px 0);
+  }
+  70% {
+    clip-path: inset(75px 0 17px 0);
+  }
+  73.3333333333% {
+    clip-path: inset(96px 0 1px 0);
+  }
+  76.6666666667% {
+    clip-path: inset(68px 0 5px 0);
+  }
+  80% {
+    clip-path: inset(10px 0 64px 0);
+  }
+  83.3333333333% {
+    clip-path: inset(78px 0 18px 0);
+  }
+  86.6666666667% {
+    clip-path: inset(14px 0 36px 0);
+  }
+  90% {
+    clip-path: inset(54px 0 4px 0);
+  }
+  93.3333333333% {
+    clip-path: inset(18px 0 65px 0);
+  }
+  96.6666666667% {
+    clip-path: inset(79px 0 14px 0);
+  }
+  100% {
+    clip-path: inset(82px 0 11px 0);
+  }
+}
+@keyframes noise-2 {
+  0% {
+    clip-path: inset(45px 0 42px 0);
+  }
+  3.3333333333% {
+    clip-path: inset(97px 0 2px 0);
+  }
+  6.6666666667% {
+    clip-path: inset(98px 0 2px 0);
+  }
+  10% {
+    clip-path: inset(67px 0 19px 0);
+  }
+  13.3333333333% {
+    clip-path: inset(28px 0 8px 0);
+  }
+  16.6666666667% {
+    clip-path: inset(85px 0 2px 0);
+  }
+  20% {
+    clip-path: inset(94px 0 2px 0);
+  }
+  23.3333333333% {
+    clip-path: inset(75px 0 3px 0);
+  }
+  26.6666666667% {
+    clip-path: inset(47px 0 42px 0);
+  }
+  30% {
+    clip-path: inset(69px 0 9px 0);
+  }
+  33.3333333333% {
+    clip-path: inset(79px 0 22px 0);
+  }
+  36.6666666667% {
+    clip-path: inset(50px 0 5px 0);
+  }
+  40% {
+    clip-path: inset(2px 0 53px 0);
+  }
+  43.3333333333% {
+    clip-path: inset(74px 0 19px 0);
+  }
+  46.6666666667% {
+    clip-path: inset(8px 0 57px 0);
+  }
+  50% {
+    clip-path: inset(96px 0 3px 0);
+  }
+  53.3333333333% {
+    clip-path: inset(19px 0 36px 0);
+  }
+  56.6666666667% {
+    clip-path: inset(18px 0 43px 0);
+  }
+  60% {
+    clip-path: inset(28px 0 50px 0);
+  }
+  63.3333333333% {
+    clip-path: inset(17px 0 3px 0);
+  }
+  66.6666666667% {
+    clip-path: inset(77px 0 4px 0);
+  }
+  70% {
+    clip-path: inset(64px 0 29px 0);
+  }
+  73.3333333333% {
+    clip-path: inset(57px 0 29px 0);
+  }
+  76.6666666667% {
+    clip-path: inset(7px 0 62px 0);
+  }
+  80% {
+    clip-path: inset(27px 0 10px 0);
+  }
+  83.3333333333% {
+    clip-path: inset(44px 0 5px 0);
+  }
+  86.6666666667% {
+    clip-path: inset(18px 0 34px 0);
+  }
+  90% {
+    clip-path: inset(61px 0 39px 0);
+  }
+  93.3333333333% {
+    clip-path: inset(3px 0 51px 0);
+  }
+  96.6666666667% {
+    clip-path: inset(28px 0 22px 0);
+  }
+  100% {
+    clip-path: inset(48px 0 37px 0);
+  }
+}
+
+.glow {
+  text-shadow: 0 0 1000px #dfbfbf;
+  color: transparent;
+  position: absolute;
+  top: 0;
+}