mengubah

Author: MuhammadMallq

404.html

@@ -14,7 +14,7 @@
             <img src="Gif PakAmba.gif" alt="404 Animation">
         </div>
         <h1>Sepertinya Anda tersesat. Halaman yang Anda cari tidak tersedia.</h1>
-        <h3>Yang putih hitamkan, yang hitam biarkan, tapi yang nganu sudah pasti hitam.</h3>
+        <h3>Yang putih hitamkan, yang hitam biarkan, tapi yang lihat sudah pasti hitam.</h3>
         <a href="index.html" class="button">Kembali ke Beranda</a>
         <audio autoplay loop>
             <source src="ambasong.mp3" type="audio/mpeg">

404.styles.css

@@ -12,15 +12,47 @@ body {
     font-family: 'Arial', sans-serif;
     background-color: #0e0d0d;
     overflow: hidden;
+    animation: fadeIn 1s ease-in-out; 
 }
 
 .container {
     text-align: center;
     padding: 20px;
+    animation: slideDown 1s ease forwards; 
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes slideDown {
+    from {
+        transform: translateY(-30px);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
 }
 
 .gif-container {
     margin-bottom: 30px;
+    animation: float 4s ease-in-out infinite; 
+}
+
+@keyframes float {
+    0%, 100% {
+        transform: translateY(0);
+    }
+    50% {
+        transform: translateY(-15px);
+    }
 }
 
 .gif-container img {
@@ -34,12 +66,14 @@ h1 {
     font-size: 2.5rem;
     color: #ff6b6b;
     margin-bottom: 20px;
+    animation: fadeIn 2s ease-in-out; 
 }
 
 h3 {
     font-size: 1.2rem;
     color: #ffffff;
     margin-bottom: 30px;
+    animation: fadeIn 2.5s ease-in-out; 
 }
 
 .button {
@@ -50,6 +84,7 @@ h3 {
     text-decoration: none;
     border-radius: 5px;
     transition: background-color 0.3s ease;
+    animation: fadeIn 3s ease-in-out; 
 }
 
 .button:hover {

styles.css

@@ -160,15 +160,15 @@ header h1 {
     overflow: hidden;
     border-right: 3px solid rgba(255, 255, 255, 0.75); 
     white-space: nowrap;
-    animation: typing 10s steps(infinite, end) infinite, blinkCursor 0.75s step-end infinite;
+    animation: typing 10s steps(30, end) infinite, blinkCursor 0.75s step-end infinite;
 }
 .movie img {
     transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
 }
 
 .movie img:hover {
-    transform: scale(1.05); /* Perbesar gambar */
-    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Tambahkan bayangan */
+    transform: scale(1.05); 
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); 
 }