Update index.html

index.html

@@ -5,7 +5,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <title>GIF</title>
+    <title>Yakında</title>
 
     <style>
         * {
@@ -14,8 +14,7 @@
             box-sizing: border-box;
         }
 
-        html,
-        body {
+        html, body {
             width: 100%;
             height: 100%;
             overflow: hidden;
@@ -28,25 +27,60 @@
             justify-content: center;
         }
 
-        .gif {
+        .container {
+            position: relative;
             width: 70vw;
             height: 70vh;
 
-            max-width: 100%;
-            max-height: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
 
+        .gif {
+            width: 100%;
+            height: 100%;
             object-fit: contain;
         }
+
+        .yakin-da {
+            position: absolute;
+            left: 50%;
+            bottom: 8%;
+
+            transform: translateX(-50%);
+
+            color: white;
+            font-family: Arial, sans-serif;
+            font-size: clamp(28px, 5vw, 80px);
+            font-weight: 800;
+            letter-spacing: 8px;
+
+            text-shadow:
+                0 0 10px rgba(255,255,255,0.8),
+                0 0 25px rgba(255,255,255,0.5);
+
+            white-space: nowrap;
+            z-index: 10;
+        }
     </style>
 </head>
 
 <body>
 
-    <img
-        class="gif"
-        src="https://i.pinimg.com/originals/2d/80/d7/2d80d7455e67ca45cdbef867634aff98.gif"
-        alt="GIF"
-    >
+    <div class="container">
+
+        <img
+            class="gif"
+            src="https://i.pinimg.com/originals/2d/80/d7/2d80d7455e67ca45cdbef867634aff98.gif"
+            alt="GIF"
+        >
+
+        <div class="yakin-da">
+            YAKINDA
+        </div>
+
+    </div>
 
 </body>
 </html>