primer commit con archivos

2026-06-17 20:02:33 -05:00
commit de0321ef2b
3 changed files with 125 additions and 0 deletions
@@ -0,0 +1,111 @@
+<!doctype html>
+<html lang="es">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>En Construcción</title>
+        <link rel="icon" type="image/svg+xml" href="icon.svg" />
+        <style>
+            :root {
+                --bg-color: #0a0a0c;
+                --text-main: #f3f4f6;
+                --text-muted: #6b7280;
+                --accent: #3b82f6; /* Color de acento para la animación de fondo */
+            }
+
+            body {
+                background-color: var(--bg-color);
+                color: var(--text-main);
+                font-family:
+                    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+                    Helvetica, Arial, sans-serif;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                height: 100vh;
+                margin: 0;
+                overflow: hidden;
+            }
+
+            .container {
+                text-align: center;
+                padding: 2rem;
+            }
+
+            /* Contenedor del Logo con animación sutil de flotación */
+            .logo-container {
+                width: 80px; /* Puedes ajustar el tamaño de tu logo aquí */
+                height: 80px;
+                margin: 0 auto 2.5rem;
+                position: relative;
+                animation: float 4s ease-in-out infinite;
+            }
+
+            /* Estilo para que tu SVG sea responsivo y use el color correcto */
+            .logo-container svg {
+                width: 100%;
+                height: 100%;
+                display: block;
+            }
+
+            h1 {
+                font-size: 1.5rem;
+                font-weight: 400;
+                letter-spacing: 0.05em;
+                margin-bottom: 0.5rem;
+                animation: fadeIn 1.5s ease-out;
+            }
+
+            p {
+                color: var(--text-muted);
+                font-size: 0.9rem;
+                letter-spacing: 0.02em;
+                animation: fadeIn 2s ease-out;
+            }
+
+            /* Animación de flotación minimalista */
+            @keyframes float {
+                0%,
+                100% {
+                    transform: translateY(0);
+                }
+                50% {
+                    transform: translateY(-8px);
+                }
+            }
+
+            @keyframes fadeIn {
+                from {
+                    opacity: 0;
+                    transform: translateY(10px);
+                }
+                to {
+                    opacity: 1;
+                    transform: translateY(0);
+                }
+            }
+        </style>
+    </head>
+    <body>
+        <div class="container">
+            <div class="logo-container">
+                <!-- ⬇️ REEMPLAZA DESDE AQUÍ CON TU PROPIO CÓDIGO SVG ⬇️ -->
+                <svg
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="#f3f4f6"
+                    stroke-width="1.5"
+                >
+                    <path
+                        d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"
+                    />
+                    <polyline points="3.27 6.96 12 12.01 20.73 6.96" />
+                    <line x1="12" y1="22.08" x2="12" y2="12" />
+                </svg>
+                <!-- ⬆️ TERMINA EL BLOQUE DE TU SVG ⬆️ -->
+            </div>
+            <h1>SITIO EN CONSTRUCCIÓN</h1>
+            <p>Estamos diseñando algo nuevo. Volveremos pronto.</p>
+        </div>
+    </body>
+</html>