diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
new file mode 100644
index 0000000..88b602a
--- /dev/null
+++ b/.github/workflows/build.yml
@@ -0,0 +1,31 @@
+name: Build and Lint
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout repository
+      uses: actions/checkout@v3
+
+    - name: Set up Node.js
+      uses: actions/setup-node@v3
+      with:
+        node-version: '16'
+
+    - name: Install htmlhint
+      run: npm install -g htmlhint
+
+    - name: Build index.html using Makefile
+      run: make
+
+    - name: Lint index.html
+      run: htmlhint index.html
diff --git a/source.html b/source.html
index ada97ef..3a575b5 100644
--- a/source.html
+++ b/source.html
@@ -1,22 +1,24 @@
+<!DOCTYPE html>
 <html>
   <head>
-    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js">
-    </script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
     <script>
-      !window.jQuery && document.write('<script src="assets/jquery-1.4.3.min.js"><\/script>')
-    </script>
-    <script src="assets/jquery.raptorize.1.0.js">
+      if (!window.jQuery) {
+        var script = document.createElement('script');
+        script.src = 'assets/jquery-1.4.3.min.js';
+        document.head.appendChild(script);
+      }
     </script>
+    <script src="assets/jquery.raptorize.1.0.js"></script>
     <script type="text/javascript">
-      $(window).load(function() {
-        $('.poney').raptorize({'enterOn' : 'konami-code', 'delayTime' : 3 }
-                             );
+      $(window).on('load', function() {
+        $('.poney').raptorize({'enterOn' : 'konami-code', 'delayTime' : 3 });
       });
     </script>
     <title>8==D</title>
     <style>
       html, body {
-        overflow: hidden
+        overflow: hidden;
       }
       body {
         font-family: "Comic Sans MS", Tahoma, Verdana, Arial, sans-serif;
@@ -25,36 +27,82 @@
         text-shadow: 0 0 50px #FF0000;
         font-size: 30px;
       }
+      /* Replace marquee and blink with CSS animations */
+      .marquee-left {
+        position: absolute;
+        left: 0;
+        width: 100%;
+        bottom: 50px;
+        overflow: hidden;
+        white-space: nowrap;
+        animation: marqueeLeft 10s linear infinite alternate;
+      }
+      .marquee-right {
+        position: absolute;
+        top: 40px;
+        width: 100%;
+        background: transparent;
+        overflow: hidden;
+        white-space: nowrap;
+        animation: marqueeRight 5s linear infinite alternate;
+      }
+      .marquee-down {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        text-align: center;
+        overflow: hidden;
+        animation: marqueeDown 10s linear infinite alternate;
+      }
+      @keyframes marqueeLeft {
+        0% { transform: translateX(0); }
+        100% { transform: translateX(calc(-100% + 100vw)); }
+      }
+      @keyframes marqueeRight {
+        0% { transform: translateX(calc(-100% + 100vw)); }
+        100% { transform: translateX(0); }
+      }
+      @keyframes marqueeDown {
+        0% { transform: translateY(0); }
+        100% { transform: translateY(calc(100% - 100vh)); }
+      }
+      .blink {
+        animation: blinkAnimation 1s steps(2, start) infinite;
+        font-size: 80px;
+      }
+      @keyframes blinkAnimation {
+        to {
+          visibility: hidden;
+        }
+      }
     </style>
   </head>
   <body>
-    <marquee scrolldelay="5" scrollamount="10" behaviour="alternate" style="left: 0; width: 100%;bottom: 50px;position:absolute">
-      <img src="assets/skull.gif" />
-    </marquee>
-    <marquee direction="right" scrolldelay="50" scrollamount="20" behaviour="alternate" style="width: 100%;position: absolute; top: 40px;background:transparent">
-      <img src="assets/cafetiere.gif" />
-    </marquee>
-    <div style="position:absolute;height: 100%; width: 100%;">
-      <marquee scrolldelay="10" scrollamount="20" direction="down" behaviour="alternate" style="width: 100%;height: 100%;text-align: center;top: 0;left:0">
-        <marquee scrollamount="20" scrolldelay="10" behaviour="alternate" style="width: 100%;font-size:100px;text-shadow: 0 0 15px magenta;">
-          8==D
-        </marquee>
-      </marquee>
+    <div class="marquee-left">
+      <img src="assets/skull.gif" alt="skull" />
     </div>
-    <img src="assets/_explosion.gif" style="position:absolute; left: 200px;top: 200px;" />
-    <img src="assets/_eclair.gif" style="position:absolute; right: 200px;bottom: 200px;" />
+    <div class="marquee-right">
+      <img src="assets/cafetiere.gif" alt="cafetiere" />
+    </div>
+    <div class="marquee-down">
+      <div style="font-size: 100px; text-shadow: 0 0 15px magenta;">
+        8==D
+      </div>
+    </div>
+    <img src="assets/_explosion.gif" style="position:absolute; left: 200px;top: 200px;" alt="explosion" />
+    <img src="assets/_eclair.gif" style="position:absolute; right: 200px;bottom: 200px;" alt="eclair" />
     <table width="100%" height="100%">
       <tr>
-        <td align="center" valign="middle" style="font-size: 80px">
-          <blink>
-            DA THOT HAZ DEMARAG3 3rd OF FEBRUARY
-            <br />
+        <td align="center" valign="middle">
+          <div class="blink">
+            DA THOT HAZ DEMARAG3 3rd OF FEBRUARY<br />
             HACKAGE CONTEST
-          </blink>
+          </div>
         </td>
       </tr>
     </table>
-    <div class="poney">
-    </div>
+    <div class="poney"></div>
   </body>
 </html>
