From de1577093fb99e68d60fa350e913f70c7c76be67 Mon Sep 17 00:00:00 2001
From: alokhytam <alpanyaaja@gmail.com>
Date: Mon, 4 Aug 2025 00:00:06 +0700
Subject: [PATCH] Create index.html

---
 index.html | 96 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 96 insertions(+)
 create mode 100644 index.html
diff --git a/index.html b/index.html
new file mode 100644
index 00000000..77eb1263
--- /dev/null
+++ b/index.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>AXIOO Hype 5</title>
+  <style>
+    body {
+      margin: 0;
+      background-color: #0f0f0f;
+      color: #f0f0f0;
+      font-family: 'Courier New', Courier, monospace;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 100vh;
+    }
+
+    .typing-text {
+      font-size: 1.8rem;
+      border-right: 2px solid #f0f0f0;
+      white-space: nowrap;
+      overflow: hidden;
+      width: 0;
+      animation: typing 4s steps(40, end) forwards, blink 0.75s step-end infinite;
+    }
+
+    @keyframes typing {
+      from { width: 0 }
+      to { width: 100% }
+    }
+
+    @keyframes blink {
+      from, to { border-color: transparent }
+      50% { border-color: #f0f0f0 }
+    }
+
+    .drawing-area {
+      margin-top: 40px;
+      width: 300px;
+      height: 200px;
+      position: relative;
+    }
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
+
+    path.laptop-line {
+      stroke: #00ffcc;
+      stroke-width: 2;
+      fill: none;
+      stroke-dasharray: 600;
+      stroke-dashoffset: 600;
+      animation: draw 5s ease-out forwards;
+    }
+
+    @keyframes draw {
+      to {
+        stroke-dashoffset: 0;
+      }
+    }
+
+    .pen {
+      width: 24px;
+      height: 24px;
+      background-color: #ffffff;
+      border-radius: 50%;
+      position: absolute;
+      top: 160px;
+      left: 10px;
+      animation: pen-move 5s ease-out forwards;
+    }
+
+    @keyframes pen-move {
+      0%   { transform: translate(0, 0); }
+      25%  { transform: translate(80px, -40px); }
+      50%  { transform: translate(180px, 0); }
+      75%  { transform: translate(240px, -30px); }
+      100% { transform: translate(270px, 0); }
+    }
+  </style>
+</head>
+<body>
+  <div class="typing-text">AXIOO Hype 5 – Tipis, cepat, dan andal untuk produktivitas Anda.</div>
+
+  <div class="drawing-area">
+    <svg viewBox="0 0 300 200">
+      <path class="laptop-line" d="M50 100 L250 100 L230 150 L70 150 Z M70 150 L100 130 L200 130 L230 150" />
+    </svg>
+    <div class="pen"></div>
+  </div>
+</body>
+</html>
