Merge pull request #61 from arielelkaslasi/main

shalom
raisfeld-ori · Mar 20, 2024 · 780435c · 780435c
2 parents 242eabc + c66767c
commit 780435c
Show file tree

Hide file tree

Showing 2 changed files with 87 additions and 1 deletion.
diff --git a/src/pages/login/login.css b/src/pages/login/login.css
@@ -97,7 +97,7 @@
 #form{
     display: block;
     font-family: 'Ubuntu Mono';
-    margin-top: 10svh;
+    margin-top: 7svh;
 }
 
 
@@ -471,6 +471,7 @@
   font-weight: 500;
   color: #179bff;
   text-shadow: 2px 2px 4px rgba(2, 39, 80, 0.571), 0 0 5px rgba(10, 21, 84, 0.818);
+  margin-top: 3svh;
 
 }
 
@@ -510,4 +511,79 @@ a:hover {
   }
 }
 
+.wordCarousel {
+  font-size: 36px;
+  font-weight: 100;
+  color: #ff0202;
+  div {
+      overflow: hidden;
+      position: relative;
+      height: 65px;
+      padding-top: 10px;
+      margin-top: -10px;
+      li {
+          color: #0091ff;
+          font-weight: 700;
+          height: 45px;
+          margin-bottom: 45px;
+          display: block;
+          text-shadow: 2px 2px 4px rgba(2, 39, 80, 0.571), 0 0 5px rgba(10, 21, 84, 0.818);
+
+      }
+  }
+}
+
+.flip2 { animation: flip2 6s cubic-bezier(0.23, 1, 0.32, 1.2) infinite; }
+.flip3 { animation: flip3 6s cubic-bezier(0.23, 1, 0.32, 1.2) infinite; }
+.flip4 { animation: flip4 6s cubic-bezier(0.23, 1, 0.32, 1.2) infinite; }
+.flip5 { animation: flip5 6s cubic-bezier(0.23, 1, 0.32, 1.2) infinite; }
+
+@keyframes flip2 {
+  0% { margin-top: -180px; }
+  5% { margin-top: -90px;  }
+  50% { margin-top: -90px; }
+  55% { margin-top: 0px; }
+  99.99% { margin-top: 0px; }
+  100% { margin-top: -180px; }
+}
+
+@keyframes flip3 {
+  0% { margin-top: -270px; }
+  5% { margin-top: -180px; }
+  33% { margin-top: -180px; }
+  38% { margin-top: -90px; }
+  66% { margin-top: -90px; }
+  71% { margin-top: 0px; }
+  99.99% { margin-top: 0px; }
+  100% { margin-top: -270px; }
+}
+
+@keyframes flip4 {
+  0% { margin-top: -360px; }
+  5% { margin-top: -270px; }
+  25% { margin-top: -270px; }
+  30% { margin-top: -180px; }
+  50% { margin-top: -180px; }
+  55% { margin-top: -90px; }
+  75% { margin-top: -90px; }
+  80% { margin-top: 0px; }
+  99.99% { margin-top: 0px; }
+  100% { margin-top: -360px; }
+}
+
+@keyframes flip5 {
+  0% { margin-top: -450px; }
+  5% { margin-top: -360px; }
+  20% { margin-top: -360px; }
+  25% { margin-top: -270px; }
+  40% { margin-top: -270px; }
+  45% { margin-top: -180px; }
+  60% { margin-top: -180px; }
+  65% { margin-top: -90px; }
+  80% { margin-top: -90px; }
+  85% { margin-top: 0px; }
+  99.99% { margin-top: 0px; }
+  100% { margin-top: -450px; }
+}
+
 
diff --git a/src/pages/login/login.tsx b/src/pages/login/login.tsx
@@ -39,6 +39,16 @@ function login(){
 
                 <div id='form'>
 
+                <h4 className="wordCarousel">
+                <div>
+                    <ul className="flip5">
+                        <li>Hello 👋</li>
+                        <li>Shalom 👋</li>
+                        <li>Hola 👋</li>
+
+                    </ul>
+                </div>
+            </h4>
 
                 <h1 className='login' >Welcome back!</h1>
                 <p className='login2'>Please log to your account.</p>