Merge ecaf5b302a into c92b0bc3a8

_project_starter_/index.html

@@ -1,13 +1,51 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="es">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="style.css" />
-    <title>My Project</title>
+    <title>Project Starter</title>
   </head>
   <body>
+    <main class="starter">
+      <section class="starter__hero">
+        <div class="starter__content">
           <h1>Project Starter</h1>
+          <p>Bienvenido al proyecto inicial. Esta página está preparada para usar tu CSS y JavaScript.</p>
+          <button id="startButton" type="button">Comenzar</button>
+        </div>
+
+        <div class="starter__summary">
+          <div class="summary__item">
+            <strong>03</strong>
+            <span>Componentes</span>
+          </div>
+          <div class="summary__item">
+            <strong>01</strong>
+            <span>Interacción</span>
+          </div>
+          <div class="summary__item">
+            <strong>100%</strong>
+            <span>Responsive</span>
+          </div>
+        </div>
+      </section>
+
+      <section class="starter__cards">
+        <article class="card">
+          <h2>Diseño moderno</h2>
+          <p>Tarjetas limpias, colores suaves y efectos de profundidad para destacar tu contenido.</p>
+        </article>
+        <article class="card">
+          <h2>Fácil de personalizar</h2>
+          <p>Reemplaza textos, agrega secciones y usa esta base para tu próximo proyecto web.</p>
+        </article>
+        <article class="card">
+          <h2>Animaciones simples</h2>
+          <p>Incluye botones interactivos y transiciones que mejoran la experiencia de usuario.</p>
+        </article>
+      </section>
+    </main>
     <script src="script.js"></script>
   </body>
 </html>

_project_starter_/script.js

@@ -1 +1,31 @@
+const startButton = document.getElementById('startButton');
+const content = document.querySelector('.starter__content');
+const starter = document.querySelector('.starter');
+
+if (startButton && content) {
+  startButton.addEventListener('click', () => {
+    if (starter) starter.classList.add('starter--active');
+
+    content.innerHTML = `
+      <div class="hero__result">
+        <h1>¡Perfecto!</h1>
+        <p>El proyecto ya respondió a tu clic. Ahora puedes ver contenido dinámico y continuar personalizando esta plantilla.</p>
+        <ul class="result__list">
+          <li>Contenido actualizado al instante</li>
+          <li>Botón <strong>Volver</strong> sin recargar todo el sitio</li>
+          <li>Base lista para agregar más secciones</li>
+        </ul>
+        <button type="button" id="resetButton">Volver</button>
+      </div>
+    `;
+
+    const resetButton = document.getElementById('resetButton');
+    if (resetButton) {
+      resetButton.addEventListener('click', () => {
+        if (starter) starter.classList.remove('starter--active');
+        window.location.reload();
+      });
+    }
+  });
+}
 

_project_starter_/style.css

@@ -5,12 +5,173 @@
 }
 
 body {
+  margin: 0;
+  min-height: 100vh;
   font-family: 'Roboto', sans-serif;
   display: flex;
-  flex-direction: column;
   align-items: center;
   justify-content: center;
-  height: 100vh;
+  background: linear-gradient(135deg, #1f2937 0%, #4b5563 100%);
-  overflow: hidden;
+  color: #f9fafb;
+}
+
+.starter {
+  width: 90%;
+  max-width: 560px;
+  padding: 2rem;
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 24px;
+  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.35);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+}
+
+.starter__content {
+  display: grid;
+  gap: 1.4rem;
+}
+
+h1 {
   margin: 0;
+  font-size: clamp(2rem, 3vw, 3rem);
+  letter-spacing: -0.04em;
+}
+
+p {
+  margin: 0;
+  line-height: 1.8;
+  color: #e5e7eb;
+}
+
+button {
+  width: fit-content;
+  padding: 0.95rem 1.8rem;
+  border: none;
+  border-radius: 9999px;
+  font-size: 1rem;
+  font-weight: 700;
+  color: #111827;
+  background: linear-gradient(135deg, #f59e0b 0%, #ec4899 100%);
+  cursor: pointer;
+  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
+}
+
+button:hover,
+button:focus-visible {
+  transform: translateY(-2px);
+  box-shadow: 0 16px 30px rgba(236, 72, 153, 0.3);
+  filter: saturate(1.1);
+}
+
+button:active {
+  transform: translateY(0);
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.45rem 1rem;
+  border-radius: 999px;
+  font-size: 0.85rem;
+  font-weight: 700;
+  letter-spacing: 0.03em;
+  color: #111827;
+  background: #fbbf24;
+}
+
+.starter__hero {
+  display: grid;
+  gap: 2rem;
+  margin-bottom: 2rem;
+}
+
+.starter--active {
+  background: rgba(59, 130, 246, 0.18);
+  border-color: rgba(96, 165, 250, 0.22);
+}
+
+.hero__result {
+  display: grid;
+  gap: 1rem;
+}
+
+.result__list {
+  margin: 0;
+  padding-left: 1.2rem;
+  color: #e5e7eb;
+}
+
+.result__list li {
+  margin-bottom: 0.65rem;
+  line-height: 1.75;
+}
+
+.result__list strong {
+  color: #f8fafc;
+}
+
+.starter__summary {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1rem;
+}
+
+.summary__item {
+  padding: 1rem;
+  border-radius: 20px;
+  background: rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  text-align: center;
+}
+
+.summary__item strong {
+  display: block;
+  font-size: 1.8rem;
+  margin-bottom: 0.4rem;
+  color: #ffffff;
+}
+
+.summary__item span {
+  display: block;
+  color: #d1d5db;
+}
+
+.starter__cards {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1rem;
+}
+
+.card {
+  padding: 1.5rem;
+  border-radius: 24px;
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
+  transition: transform 0.2s ease, background 0.2s ease;
+}
+
+.card:hover {
+  transform: translateY(-4px);
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.card h2 {
+  margin-top: 0;
+  margin-bottom: 0.75rem;
+  font-size: 1.15rem;
+}
+
+.card p {
+  margin: 0;
+  color: #e5e7eb;
+}
+
+@media (max-width: 840px) {
+  .starter__summary,
+  .starter__cards {
+    grid-template-columns: 1fr;
+  }
 }