From 3588e86e27f3001f6aa0c005ff487e90b56f58c3 Mon Sep 17 00:00:00 2001
From: olek <jan@kjan.email>
Date: Mon, 17 Feb 2025 11:23:15 +0000
Subject: [PATCH] Update src/index.html

---
 src/index.html | 52 +++++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 45 insertions(+), 7 deletions(-)
diff --git a/src/index.html b/src/index.html
index fc7c820..9fb085e 100644
--- a/src/index.html
+++ b/src/index.html
@@ -7,6 +7,7 @@
     <style>
       html, body {
         height: 100%;
+        overflow: hidden;
       }
       body {
         background-color: #fff;
@@ -17,31 +18,68 @@
         line-height: 1.5;
         margin: 0;
         display: flex;
-        justify-content: center;
+        justify-content: flex-start;
         align-items: center;
+        height: 100vh;
+        position: relative;
+        padding-left: 10vw;
       }
       main {
         padding: 1rem;
         text-align: center;
+        position: absolute;
+        animation: moveText 5s infinite linear alternate;
       }
       h1 {
         font-size: 2.5rem;
         line-height: 1.1;
         margin: 0;
+        position: relative;
+        display: inline-block;
+        animation: shakeText 0.2s infinite alternate ease-in-out;
       }
-      h1::after {
-        content: "";
-        background-color: #ffe800;
-        background: repeating-linear-gradient(45deg, #ffe800, #ffe800 0.5rem, #222 0.5rem, #222 1.0rem);
-        display: block;
+      .crazy-underline {
+        position: absolute;
+        width: 100%;
         height: 0.5rem;
-        margin-top: 1rem;
+        background: repeating-linear-gradient(45deg, #ffe800, #ffe800 0.5rem, #222 0.5rem, #222 1.0rem);
+        animation: moveUnderline 3s infinite linear, spinUnderline 1s infinite linear;
+      }
+
+      @keyframes moveText {
+        0% { top: 10%; left: 5%; }
+        25% { top: 80%; left: 15%; }
+        50% { top: 30%; left: 50%; }
+        75% { top: 90%; left: 30%; }
+        100% { top: 10%; left: 5%; }
+      }
+
+      @keyframes shakeText {
+        0% { transform: translateX(0) rotate(0deg); }
+        25% { transform: translateX(-3px) rotate(-2deg); }
+        50% { transform: translateX(3px) rotate(2deg); }
+        75% { transform: translateX(-2px) rotate(-1deg); }
+        100% { transform: translateX(2px) rotate(1deg); }
+      }
+
+      @keyframes moveUnderline {
+        0% { top: 0%; left: 5%; }
+        25% { top: 80%; left: 10%; }
+        50% { top: 30%; left: 45%; }
+        75% { top: 90%; left: 25%; }
+        100% { top: 10%; left: 5%; }
+      }
+
+      @keyframes spinUnderline {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(720deg); }
       }
     </style>
   </head>
   <body>
     <main>
       <h1>Our website is under construction.</h1>
+      <div class="crazy-underline"></div>
     </main>
   </body>
 </html>
