diff --git a/Index.html b/Index.html
new file mode 100644
index 0000000..5068abc
--- /dev/null
+++ b/Index.html
@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Spectral Hackers Guild</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="styles.css">
+    <link rel="icon" href="img/favicon.png" type="image/png">
+</head>
+<body class="bg-gray-100 text-gray-900">
+    <nav class="navbar navbar-expand-lg navbar-dark bg-dark py-3">
+        <div class="container">
+            <a class="navbar-brand text-xl font-bold" href="#">Spectral Hackers Guild</a>
+            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+            <div class="collapse navbar-collapse" id="navbarNav">
+                <ul class="navbar-nav ms-auto">
+                    <li class="nav-item"><a class="nav-link" href="#about">Sobre Nosotros</a></li>
+                    <li class="nav-item"><a class="nav-link" href="#projects">Proyectos</a></li>
+                    <li class="nav-item"><a class="nav-link" href="#blog">Blog</a></li>
+                    <li class="nav-item"><a class="nav-link" href="#events">Eventos</a></li>
+                    <li class="nav-item"><a class="nav-link" href="#join">Únete al Club</a></li>
+                    <li class="nav-item"><a class="nav-link" href="#contact">Contacto</a></li>
+                </ul>
+            </div>
+        </div>
+    </nav>
+    <header class="bg-purple-900 text-white text-center py-12">
+        <h1 class="text-5xl font-bold">Spectral Hackers Guild</h1>
+        <p class="mt-4 text-xl">Uniendo talentos para asegurar el futuro digital</p>
+    </header>
+    <div class="container my-12">
+        <section id="about" class="my-12">
+            <h2 class="text-3xl font-bold text-purple-900 mb-6">Sobre Nosotros</h2>
+            <p>
+                Somos un club de estudiantes apasionados por la ciberseguridad y el hacking ético. Nuestro proyecto principal, la
+                <strong>Iniciativa de Ciberseguridad y Hacking Ético</strong>, busca formar la próxima generación de expertos para enfrentar los desafíos cibernéticos del presente y del futuro.
+            </p>
+            <p>
+                Bajo la dirección de Leonardo Ernesto Correa Hernández, nuestro objetivo es educar y sensibilizar a la comunidad sobre la importancia de la seguridad digital y el impacto que tiene en la sociedad.
+            </p>
+        </section>
+        <section id="projects" class="my-12">
+            <h2 class="text-3xl font-bold text-purple-900 mb-6">Proyectos y Retos</h2>
+            <p>Participamos activamente en proyectos innovadores de ciberseguridad, incluyendo:</p>
+            <ul class="list-disc list-inside ml-4">
+                <li><strong>Iniciativa de Ciberseguridad y Hacking Ético</strong>: Un programa educativo que prepara a los estudiantes para enfrentar ciberamenazas reales.</li>
+                <li>Retos semanales de ciberseguridad, donde los miembros practican sus habilidades con problemas de la vida real.</li>
+                <li>Colaboraciones con la UNAM y otras instituciones para impulsar la educación en seguridad digital.</li>
+            </ul>
+        </section>
+        <section id="blog" class="my-12">
+            <h2 class="text-3xl font-bold text-purple-900 mb-6">Blog</h2>
+            <p>En nuestro blog publicamos artículos técnicos, tutoriales y análisis de casos sobre ciberseguridad y hacking ético.</p>
+            <div class="row">
+                <div class="col-md-4">
+                    <div class="bg-gray-100 p-4 rounded-lg shadow-sm mb-4">
+                        <h3 class="text-2xl font-semibold">Cómo protegerse del ransomware</h3>
+                        <p class="text-sm mt-2">Guía para mantener tus datos a salvo de ataques de ransomware. Aprende cómo evitar ser víctima de este tipo de ataques.</p>
+                    </div>
+                </div>
+                <div class="col-md-4">
+                    <div class="bg-gray-100 p-4 rounded-lg shadow-sm mb-4">
+                        <h3 class="text-2xl font-semibold">Herramientas esenciales para hacking ético</h3>
+                        <p class="text-sm mt-2">Descubre las herramientas fundamentales para realizar pruebas de penetración y mantener la seguridad en tus sistemas.</p>
+                    </div>
+                </div>
+                <div class="col-md-4">
+                    <div class="bg-gray-100 p-4 rounded-lg shadow-sm mb-4">
+                        <h3 class="text-2xl font-semibold">Criptografía básica</h3>
+                        <p class="text-sm mt-2">Los fundamentos de la criptografía para proteger la información digital, explicado de manera clara y práctica.</p>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <section id="events" class="my-12">
+            <h2 class="text-3xl font-bold text-purple-900 mb-6">Eventos</h2>
+            <p>Mantente al día con nuestras conferencias, talleres y competencias de ciberseguridad, incluyendo sesiones de <strong>Capture The Flag (CTF)</strong> y hackathons.</p>
+        </section>
+        <section id="join" class="my-12">
+            <h2 class="text-3xl font-bold text-purple-900 mb-6">Únete al Club</h2>
+            <p>Si te apasiona la ciberseguridad, puedes unirte a <strong>Spectral Hackers Guild</strong>. Completa el siguiente formulario para ser parte de nuestro equipo.</p>
+            <form action="https://formspree.io/f/your-form-id" method="POST">
+                <div class="mb-3">
+                    <label for="name" class="form-label">Nombre</label>
+                    <input type="text" class="form-control" id="name" name="name" required>
+                </div>
+                <div class="mb-3">
+                    <label for="email" class="form-label">Correo Electrónico</label>
+                    <input type="email" class="form-control" id="email" name="email" required>
+                </div>
+                <button type="submit" class="btn btn-purple-900 text-white">Enviar</button>
+            </form>
+        </section>
+        <section id="contact" class="my-12">
+            <h2 class="text-3xl font-bold text-purple-900 mb-6">Contacto</h2>
+            <p>Para más información, contáctanos a través de nuestro correo: <strong>contacto@spectralhackersguild.com</strong>.</p>
+        </section>
+    </div>
+    <footer class="bg-dark text-white text-center py-4">
+        <p>&copy; 2024 Spectral Hackers Guild. Todos los derechos reservados.</p>
+    </footer>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>
