diff --git a/index.html b/index.html
new file mode 100644
index 0000000..61cfd09
--- /dev/null
+++ b/index.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset='utf-8'>
+    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
+    <title>Hathieves.es</title>
+    <meta name='viewport' content='width=device-width, initial-scale=1'>
+    <style>
+        body{
+            background-color: black;
+            margin: 0;
+            padding: 0;
+            width: 100vw;
+            height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;            
+        }
+
+        .logo{
+            width: 250px;
+            height: 250px;
+            box-shadow: 0px 0px 0px 2px rgba(255,255,255,1);
+            background: url("https://www.hatthieves.es/wp-content/uploads/2019/08/cropped-ht.png");
+            opacity: 0;
+            overflow: hidden;            
+        }
+
+        .logo2:before
+        {
+            content: '';
+            position: absolute;
+            width: 250px;
+            height: 250px;
+            background: url("https://www.hatthieves.es/wp-content/uploads/2019/08/cropped-ht.png");
+            opacity: .5;
+            mix-blend-mode: hard-light;
+            animation: animate .2s linear infinite;
+        }
+
+        @keyframes animate
+        {
+            0%
+            {
+                background-position: 0 0;
+                filter: hue-rotate(0deg);
+            }
+            10%
+            {
+                background-position: 5px 0;
+            }
+            20%
+            {
+                background-position: -5px 0;
+            }
+            30%
+            {
+                background-position: 15px 0;
+            }
+            40%
+            {
+                background-position: -5px 0;
+            }
+            50%
+            {
+                background-position: -25px 0;
+            }
+            60%
+            {
+                background-position: -50px 0;
+            }
+            70%
+            {
+                background-position: 0 -20px;
+            }
+            80%
+            {
+                background-position: -60px -20px;
+            }
+            81%
+            {
+                background-position: 0 0;
+            }
+            100%
+            {
+                background-position: 0 0;
+                filter: hue-rotate(360deg);
+            }
+        }
+    </style>
+    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
+    <script>
+        $(document).ready(function(){
+            sound = new Audio('sound.mp3');
+            $(".logo").animate({        
+                opacity: '1'
+            }, 1500);
+
+            setTimeout(function(){
+                $(".logo").addClass("logo2")
+                sound.play()
+            },2000);
+
+            setTimeout(function(){
+                $(".logo").removeClass("logo2")
+                sound.pause();
+            },3000);
+
+            setTimeout(function(){
+                $(".logo").animate({        
+                    opacity: '0'
+                }, 1500);
+            },3000);            
+        });
+    </script>    
+</head>
+<body>
+    <div class="logo"></div>
+</body>
+</html>
\ No newline at end of file
diff --git a/sound.mp3 b/sound.mp3
new file mode 100644
index 0000000..11b080b
Binary files /dev/null and b/sound.mp3 differ
