Landing Page FJGG

Explicación clara, técnica y entendible de cómo está construida la landing page que te generé para Proyecto FJGG.

Ver Landing Page

1. Estructura general del documento

La página está construida en HTML + CSS puro, sin frameworks ni JavaScript. La estructura base es:

<header> → Logo + navegación
<main> → Hero + tarjeta lateral + secciones
<footer> → Pie de página simple

Todo está envuelto en un contenedor .page que centra el contenido y limita el ancho máximo.

2. Sistema de diseño (variables CSS)

En la cabecera se definen variables CSS con :root:

Colores base
Colores de acento
Tonos suaves
Radio de bordes
Tipografía

Esto permite cambiar el estilo global modificando solo unas pocas líneas.

3. Layout principal

La landing usa CSS Grid y Flexbox según la zona:

✔ Hero principal

Usa un grid de dos columnas:

Columna izquierda → texto, título, botones
Columna derecha → tarjeta informativa (hero-card)

En pantallas pequeñas, el grid se convierte en una sola columna.

✔ Secciones inferiores

También usan grid:

Texto a la izquierda
Lista de características a la derecha

Y en móvil se apilan verticalmente.

4. Componentes importantes

Logo

Construido con:

Un círculo degradado (.logo-mark)
Texto en dos líneas (.logo-text)

Minimalista y sin imágenes.

Navegación

Un <nav> con enlaces simples. En móvil se reorganiza automáticamente gracias a flex-wrap.

Hero principal

Incluye:

Una badge (etiqueta) con un punto verde animado
Un título grande con degradado en la palabra “FJGG”
Un subtítulo
Dos botones (primario y ghost)
Metadatos del proyecto

Todo diseñado con flexbox.

Tarjeta lateral (hero-card)

Es uno de los elementos más elaborados:

Fondo con degradados radiales
Borde semitransparente
Encabezado con título y etiqueta
Cuerpo con una rejilla de 4 pill-cards
Texto descriptivo
Pie con estado y fecha

Es totalmente responsive.

Sección “Características”

Usa un grid de dos columnas con tarjetas .feature:

Fondo oscuro
Bordes suaves
Texto claro
Diseño limpio

En móvil se convierte en una sola columna.

5. Responsive (adaptación a móvil)

La página usa media queries en dos puntos clave:

✔ `@media (max-width: 900px)`

El hero pasa a una sola columna
La tarjeta se coloca arriba
La navegación se apila
Las secciones se vuelven verticales

✔ `@media (max-width: 520px)`

Los botones se apilan
Los metadatos se muestran en columna

Esto garantiza que la página funcione en:

Móviles pequeños
Tablets
Escritorios grandes

6. Estilo visual

La estética está basada en:

Degradados radiales
Sombras suaves
Colores oscuros tipo “dashboard moderno”
Acentos en violeta y azul
Tipografía del sistema (rápida y limpia)

El resultado es una landing moderna, ligera y elegante.

7. ¿Qué puedes modificar fácilmente?

Gracias a cómo está construida, puedes cambiar:

Colores → en :root
Título → en <h1>
Texto → en los párrafos
Botones → en .btn-primary y .btn-ghost
Secciones → duplicando bloques .section
Tarjeta lateral → editando .hero-card

Todo está pensado para ser editable sin romper nada.

CÓDIGO INICIAL

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <title>Proyecto FJGG</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style>
    :root {
      --bg: #050816;
      --bg-soft: #0b1020;
      --accent: #4f46e5;
      --accent-soft: #6366f1;
      --text: #f9fafb;
      --muted: #9ca3af;
      --radius: 14px;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: radial-gradient(circle at top, #111827 0, #020617 55%);
      color: var(--text);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    .page {
      max-width: 1120px;
      margin: 0 auto;
      padding: 1.5rem 1.25rem 3rem;
      display: flex;
      flex-direction: column;
      gap: 3rem;
    }

    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 0.6rem;
    }

    .logo-mark {
      width: 34px;
      height: 34px;
      border-radius: 999px;
      background: radial-gradient(circle at 30% 20%, #a855f7, #4f46e5 55%, #0f172a 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.9rem;
      font-weight: 700;
      letter-spacing: 0.04em;
    }

    .logo-text {
      display: flex;
      flex-direction: column;
      line-height: 1.1;
    }

    .logo-text span:first-child {
      font-size: 0.9rem;
      font-weight: 600;
    }

    .logo-text span:last-child {
      font-size: 0.75rem;
      color: var(--muted);
    }

    nav {
      display: flex;
      gap: 1.25rem;
      font-size: 0.9rem;
    }

    nav a {
      color: var(--muted);
      padding-bottom: 0.1rem;
      border-bottom: 1px solid transparent;
    }

    nav a:hover {
      color: var(--text);
      border-color: var(--accent-soft);
    }

    .hero {
      display: grid;
      grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
      gap: 2.5rem;
      align-items: center;
    }

    .hero-text {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.25rem 0.7rem;
      border-radius: 999px;
      background: rgba(15, 23, 42, 0.9);
      border: 1px solid rgba(148, 163, 184, 0.35);
      font-size: 0.75rem;
      color: var(--muted);
    }

    .badge-dot {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: radial-gradient(circle at 30% 20%, #22c55e, #16a34a);
      box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.25);
    }

    h1 {
      font-size: clamp(2.4rem, 4vw, 3.2rem);
      line-height: 1.05;
      letter-spacing: -0.04em;
    }

    h1 span {
      background: linear-gradient(120deg, #a855f7, #6366f1, #22d3ee);
      -webkit-background-clip: text;
      color: transparent;
    }

    .hero-subtitle {
      font-size: 0.98rem;
      color: var(--muted);
      max-width: 34rem;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.9rem;
      margin-top: 0.5rem;
    }

    .btn-primary,
    .btn-ghost {
      border-radius: 999px;
      padding: 0.7rem 1.4rem;
      font-size: 0.9rem;
      border: 1px solid transparent;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease,
        border-color 0.12s ease, color 0.12s ease;
    }

    .btn-primary {
      background: linear-gradient(135deg, #4f46e5, #6366f1);
      border-color: rgba(129, 140, 248, 0.7);
      color: #e5e7eb;
      box-shadow: 0 18px 45px rgba(79, 70, 229, 0.45);
    }

    .btn-primary:hover {
      transform: translateY(-1px);
      box-shadow: 0 22px 55px rgba(79, 70, 229, 0.6);
    }

    .btn-ghost {
      background: rgba(15, 23, 42, 0.8);
      border-color: rgba(148, 163, 184, 0.5);
      color: var(--muted);
    }

    .btn-ghost:hover {
      background: rgba(15, 23, 42, 0.95);
      color: var(--text);
      transform: translateY(-1px);
    }

    .hero-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 1.5rem;
      margin-top: 0.75rem;
      font-size: 0.8rem;
      color: var(--muted);
    }

    .hero-meta span strong {
      color: var(--text);
      font-weight: 600;
    }

    .hero-card {
      border-radius: var(--radius);
      background: radial-gradient(circle at top left, rgba(129, 140, 248, 0.18), transparent 55%),
        radial-gradient(circle at bottom right, rgba(56, 189, 248, 0.16), transparent 55%),
        linear-gradient(145deg, #020617, #020617);
      border: 1px solid rgba(148, 163, 184, 0.35);
      padding: 1.4rem 1.3rem;
      display: flex;
      flex-direction: column;
      gap: 1.1rem;
      position: relative;
      overflow: hidden;
    }

    .hero-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 0 0, rgba(129, 140, 248, 0.2), transparent 55%);
      opacity: 0.7;
      pointer-events: none;
    }

    .hero-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 0.75rem;
      position: relative;
      z-index: 1;
    }

    .hero-card-title {
      font-size: 0.9rem;
      font-weight: 600;
    }

    .hero-card-tag {
      font-size: 0.7rem;
      padding: 0.2rem 0.6rem;
      border-radius: 999px;
      border: 1px solid rgba(148, 163, 184, 0.6);
      color: var(--muted);
    }

    .hero-card-body {
      position: relative;
      z-index: 1;
      font-size: 0.8rem;
      color: var(--muted);
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }

    .hero-card-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.7rem;
    }

    .hero-pill {
      padding: 0.45rem 0.6rem;
      border-radius: 0.9rem;
      background: rgba(15, 23, 42, 0.9);
      border: 1px solid rgba(148, 163, 184, 0.4);
      display: flex;
      flex-direction: column;
      gap: 0.1rem;
    }

    .hero-pill span:first-child {
      font-size: 0.7rem;
      color: var(--muted);
    }

    .hero-pill span:last-child {
      font-size: 0.8rem;
      color: var(--text);
      font-weight: 500;
    }

    .hero-card-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.75rem;
      color: var(--muted);
      position: relative;
      z-index: 1;
    }

    .status-dot {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: radial-gradient(circle at 30% 20%, #22c55e, #16a34a);
      box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.25);
      margin-right: 0.35rem;
    }

    .section {
      margin-top: 0.5rem;
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
      gap: 2rem;
      align-items: flex-start;
    }

    .section h2 {
      font-size: 1.1rem;
      margin-bottom: 0.6rem;
    }

    .section p {
      font-size: 0.9rem;
      color: var(--muted);
      max-width: 34rem;
    }

    .features {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.9rem;
    }

    .feature {
      padding: 0.8rem 0.9rem;
      border-radius: 0.9rem;
      background: rgba(15, 23, 42, 0.9);
      border: 1px solid rgba(148, 163, 184, 0.35);
      font-size: 0.8rem;
      color: var(--muted);
    }

    .feature strong {
      display: block;
      margin-bottom: 0.2rem;
      color: var(--text);
      font-size: 0.85rem;
    }

    footer {
      margin-top: auto;
      padding: 1.5rem 1.25rem 2rem;
      font-size: 0.75rem;
      color: #6b7280;
      text-align: center;
    }

    @media (max-width: 900px) {
      .hero {
        grid-template-columns: minmax(0, 1fr);
      }

      .hero-card {
        order: -1;
      }

      .section {
        grid-template-columns: minmax(0, 1fr);
      }

      .features {
        grid-template-columns: minmax(0, 1fr);
      }

      header {
        flex-direction: column;
        align-items: flex-start;
      }

      nav {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
      }
    }

    @media (max-width: 520px) {
      .hero-actions {
        flex-direction: column;
        align-items: stretch;
      }

      .hero-meta {
        flex-direction: column;
      }
    }
  </style>
</head>
<body>
  <div class="page">
    <header>
      <div class="logo">
        <div class="logo-mark">FJ</div>
        <div class="logo-text">
          <span>Proyecto FJGG</span>
          <span>Ideas, código y experimentos personales</span>
        </div>
      </div>
      <nav>
        <a href="#proyecto">Proyecto</a>
        <a href="#caracteristicas">Características</a>
        <a href="#contacto">Contacto</a>
      </nav>
    </header>

    <main>
      <section class="hero" id="proyecto">
        <div class="hero-text">
          <div class="badge">
            <span class="badge-dot"></span>
            Proyecto en desarrollo activo
          </div>
          <h1>
            Proyecto <span>FJGG</span><br />
            una landing mínima, clara y rápida.
          </h1>
          <p class="hero-subtitle">
            Un espacio para centralizar ideas, pruebas técnicas y pequeños proyectos personales. Ligero, responsive y
            pensado para cargar rápido en cualquier dispositivo.
          </p>
          <div class="hero-actions">
            <button class="btn-primary">
              Empezar ahora
              <span>→</span>
            </button>
            <button class="btn-ghost">
              Ver detalles del proyecto
            </button>
          </div>
          <div class="hero-meta">
            <span><strong>100%</strong> HTML + CSS puro</span>
            <span><strong>Diseño</strong> responsive</span>
            <span><strong>Enfoque</strong> minimalista</span>
          </div>
        </div>

        <aside class="hero-card" aria-label="Resumen del Proyecto FJGG">
          <div class="hero-card-header">
            <div>
              <div class="hero-card-title">Resumen del proyecto</div>
              <div style="font-size:0.75rem;color:var(--muted);">
                Versión inicial de la landing de Proyecto FJGG
              </div>
            </div>
            <div class="hero-card-tag">v1 · Responsive</div>
          </div>

          <div class="hero-card-body">
            <div class="hero-card-grid">
              <div class="hero-pill">
                <span>Objetivo</span>
                <span>Landing limpia y rápida</span>
              </div>
              <div class="hero-pill">
                <span>Tecnología</span>
                <span>HTML + CSS</span>
              </div>
              <div class="hero-pill">
                <span>Diseño</span>
                <span>Mobile‑first</span>
              </div>
              <div class="hero-pill">
                <span>Estado</span>
                <span>En evolución</span>
              </div>
            </div>
            <p>
              Este bloque puede usarse como tarjeta de resumen, panel de métricas o presentación rápida del proyecto.
              Todo el layout se adapta automáticamente a móvil, tablet y escritorio.
            </p>
          </div>

          <div class="hero-card-footer">
            <div style="display:flex;align-items:center;">
              <span class="status-dot"></span>
              <span>Actualizado en tiempo real por ti</span>
            </div>
            <span>Proyecto FJGG · 2026</span>
          </div>
        </aside>
      </section>

      <section class="section" id="caracteristicas">
        <div>
          <h2>¿Qué es Proyecto FJGG?</h2>
          <p>
            Una base sencilla sobre la que puedes construir lo que quieras: portfolio, blog técnico, microsite de
            pruebas o centro de enlaces. El objetivo es que el código sea claro, fácil de modificar y sin dependencias
            externas.
          </p>
        </div>
        <div class="features">
          <article class="feature">
            <strong>Diseño responsive</strong>
            Se adapta automáticamente a móviles, tablets y pantallas grandes usando solo CSS moderno.
          </article>
          <article class="feature">
            <strong>Código limpio</strong>
            Estructura simple, sin frameworks, ideal para personalizar y entender cada parte del layout.
          </article>
          <article class="feature">
            <strong>Enfoque rápido</strong>
            Sin scripts pesados ni librerías externas: pensado para cargar rápido incluso con conexiones lentas.
          </article>
          <article class="feature">
            <strong>Fácil de extender</strong>
            Puedes añadir secciones, formularios, enlaces a proyectos o integrar esta landing en cualquier hosting.
          </article>
        </div>
      </section>

      <section class="section" id="contacto" style="margin-top:2.5rem;">
        <div>
          <h2>¿Y ahora qué?</h2>
          <p>
            Puedes usar esta página como punto de partida: cambia textos, colores, tipografías o añade tus propios
            bloques. Lo importante es que el esqueleto ya está listo para funcionar en cualquier dispositivo.
          </p>
        </div>
        <div class="feature" style="align-self:stretch;display:flex;flex-direction:column;justify-content:center;">
          <strong>Próximo paso</strong>
          <p style="font-size:0.85rem;color:var(--muted);margin-top:0.25rem;">
            Sustituye este bloque por un formulario de contacto, enlaces a tus proyectos o cualquier llamada a la
            acción que tenga sentido para tu versión de <strong>Proyecto FJGG</strong>.
          </p>
        </div>
      </section>
    </main>
  </div>

  <footer>
    Proyecto FJGG · Landing responsive en HTML + CSS · Personalízala a tu gusto.
  </footer>
</body>
</html>

AGREGAR FUENTE ORBITRON

La forma más sencilla es cargarla desde Google Fonts.

✔ Añade esto dentro de `<head>` antes del `<style>`:

html

<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700&display=swap" rel="stylesheet">

✔ Luego, en tu CSS, define Orbitron como fuente principal del título:

css

h1 {
  font-family: 'Orbitron', sans-serif;
}

Si quieres que toda la página use Orbitron:

css

body {
  font-family: 'Orbitron', sans-serif;
}

Añadir animaciones suaves (fade-in + slide-up)

Voy a añadir animaciones elegantes, modernas y discretas:

fade-in → aparece suavemente
slide-up → sube ligeramente al aparecer
hover glow → brillo suave en botones

✔ Añade estas animaciones al final de tu `<style>`:

css

/* Animación de entrada suave */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animación de fade-in simple */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Glow suave para botones */
@keyframes softGlow {
  from { box-shadow: 0 0 0 rgba(99,102,241,0.0); }
  to { box-shadow: 0 0 18px rgba(99,102,241,0.35); }
}

3. Aplicar animaciones a los elementos clave

✔ Hero principal (título, subtítulo, botones)

css

.hero-text {
  animation: fadeInUp 0.9s ease forwards;
}

.hero-card {
  animation: fadeInUp 1.2s ease forwards;
}

.hero-actions .btn-primary,
.hero-actions .btn-ghost {
  transition: all 0.25s ease;
}

.hero-actions .btn-primary:hover {
  animation: softGlow 0.4s ease forwards;
}

4. Animación suave al cargar secciones

css

.section {
  opacity: 0;
  animation: fadeIn 1.2s ease forwards;
  animation-delay: 0.4s;
}

5. Animación para el logo (detalle elegante)

css

.logo-mark {
  animation: fadeInUp 0.8s ease forwards;
}

Resultado final

Con estos cambios:

La página respira más, no aparece de golpe.
Los elementos clave entran con movimiento suave.
Los botones tienen un glow elegante al pasar el ratón.
El título usa Orbitron, dándole un estilo más tecnológico y distintivo.

La landing queda más moderna, más viva y más profesional.

Sustituir el logo en el HTML

Busca este bloque en tu <header>:

html

<div class="logo-mark">FJ</div>

Y cámbialo por:

html

<div class="logo-mark">
  <img src="ruta-de-tu-imagen.png" alt="Logo FJGG">
</div>

Consejo: usa un PNG o SVG cuadrado (por ejemplo 256×256) para que quede perfecto.

2. Ajustar el CSS para que la imagen encaje perfectamente

Reemplaza el CSS de .logo-mark por este:

css

.logo-mark {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none; /* Quitamos el degradado anterior */
}

.logo-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Esto garantiza:

El logo sigue siendo circular
La imagen se adapta sin deformarse
Mantiene el estilo minimalista
Funciona en móvil y escritorio

3. Si quieres que el logo tenga animación suave (opcional)

Añade esto al CSS:

css

.logo-mark {
  animation: fadeInUp 0.8s ease forwards;
}

.logo-mark img {
  transition: transform 0.25s ease;
}

.logo-mark:hover img {
  transform: scale(1.06);
}

Esto le da un efecto elegante al pasar el ratón.

Resultado final

Tu logo ahora será:

Una imagen real
Perfectamente integrada
Totalmente responsive
Con animación suave
Sin romper el diseño original

Ajustar tamaño general del logo (escritorio)

En tu CSS, modifica .logo-mark así:

css

.logo-mark {
  width: 48px;   /* Ajusta aquí el tamaño */
  height: 48px;  /* Mantén siempre igual ancho/alto */
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

👉 Cambia 48px por el tamaño que quieras:

40px → pequeño
48px → medio
60px → grande
72px → muy grande

2. Tamaño diferente en móvil (opcional)

Si quieres que el logo sea más pequeño en pantallas pequeñas, añade esto:

css

@media (max-width: 520px) {
  .logo-mark {
    width: 38px;
    height: 38px;
  }
}

Esto mantiene la estética y evita que el logo ocupe demasiado espacio en móviles.

3. Tamaño diferente en pantallas grandes (opcional)

Si quieres que en pantallas grandes el logo se vea más imponente:

css

@media (min-width: 1200px) {
  .logo-mark {
    width: 56px;
    height: 56px;
  }
}

4. Ajustar el espacio entre logo y texto

Si al cambiar el tamaño notas que queda muy pegado al texto, ajusta el gap:

css

.logo {
  display: flex;
  align-items: center;
  gap: 0.8rem; /* Ajusta aquí */
}

Resultado

Con estos ajustes:

El logo se adapta perfectamente a cualquier tamaño.
Mantiene su forma circular.
No se deforma la imagen.
Es totalmente responsive.
Se integra con el diseño sin romper nada.

Cambiar el contenedor `.page` para que sea full‑width

Busca este bloque:

css

.page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

Y cámbialo por esto:

css

.page {
  width: 100%;
  max-width: none;     /* Elimina el límite */
  margin: 0;           /* Quita centrado */
  padding: 1.5rem 2rem 3rem; /* Puedes ajustar el padding lateral */
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

👉 Con esto, la página ya ocupa el ancho completo.

2. Hacer que el header también sea full‑width

Si quieres que el header toque los bordes:

Busca:

css

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

Y cámbialo por:

css

header {
  width: 100%;
  padding: 1rem 2rem; /* Ajusta el espacio lateral */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

3. Hacer que el hero ocupe todo el ancho real

El hero ya usa grid, pero si quieres que se vea más “abierto”, añade:

css

.hero {
  width: 100%;
}

4. Si quieres que TODO el contenido toque los bordes (estilo ultra‑full‑width)

Puedes reducir el padding lateral:

css

.page {
  padding-left: 1rem;
  padding-right: 1rem;
}

O incluso:

css

.page {
  padding: 0;
}

Resultado

Con estos cambios:

La landing se vuelve full‑width real
El contenido se expande de borde a borde
Mantienes el diseño moderno y responsive
No se rompe nada del layout original

CÓDIGO COMPLETO:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <title>Proyecto FJGG</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;700&display=swap" rel="stylesheet">

  <style>
    :root {
      --bg: #050816;
      --bg-soft: #0b1020;
      --accent: #4f46e5;
      --accent-soft: #6366f1;
      --text: #f9fafb;
      --muted: #9ca3af;
      --radius: 14px;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: radial-gradient(circle at top, #111827 0, #020617 55%);
      color: var(--text);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    .page {
  width: 100%;
  max-width: none;     /* Elimina el límite */
  margin: 0;           /* Quita centrado */
  padding: 1.5rem 2rem 3rem; /* Puedes ajustar el padding lateral */
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 0.6rem;
    }

    .logo-mark {
      width: 34px;
      height: 34px;
      border-radius: 999px;
      background: radial-gradient(circle at 30% 20%, #a855f7, #4f46e5 55%, #0f172a 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.9rem;
      font-weight: 700;
      letter-spacing: 0.04em;
    }

    .logo-text {
      display: flex;
      flex-direction: column;
      line-height: 1.1;
    }

    .logo-text span:first-child {
      font-size: 0.9rem;
      font-weight: 600;
    }

    .logo-text span:last-child {
      font-size: 0.75rem;
      color: var(--muted);
    }

    nav {
      display: flex;
      gap: 1.25rem;
      font-size: 0.9rem;
    }

    nav a {
      color: var(--muted);
      padding-bottom: 0.1rem;
      border-bottom: 1px solid transparent;
    }

    nav a:hover {
      color: var(--text);
      border-color: var(--accent-soft);
    }

    .hero {
      display: grid;
      grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
      gap: 2.5rem;
      align-items: center;
    }

    .hero-text {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.25rem 0.7rem;
      border-radius: 999px;
      background: rgba(15, 23, 42, 0.9);
      border: 1px solid rgba(148, 163, 184, 0.35);
      font-size: 0.75rem;
      color: var(--muted);
    }

    .badge-dot {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: radial-gradient(circle at 30% 20%, #22c55e, #16a34a);
      box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.25);
    }

    h1 {
      font-size: clamp(2.4rem, 4vw, 3.2rem);
      line-height: 1.05;
      letter-spacing: -0.04em;
    }

    h1 span {
      background: linear-gradient(120deg, #a855f7, #6366f1, #22d3ee);
      -webkit-background-clip: text;
      color: transparent;
    }

    .hero-subtitle {
      font-size: 0.98rem;
      color: var(--muted);
      max-width: 34rem;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 0.9rem;
      margin-top: 0.5rem;
    }

    .btn-primary,
    .btn-ghost {
      border-radius: 999px;
      padding: 0.7rem 1.4rem;
      font-size: 0.9rem;
      border: 1px solid transparent;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease,
        border-color 0.12s ease, color 0.12s ease;
    }

    .btn-primary {
      background: linear-gradient(135deg, #4f46e5, #6366f1);
      border-color: rgba(129, 140, 248, 0.7);
      color: #e5e7eb;
      box-shadow: 0 18px 45px rgba(79, 70, 229, 0.45);
    }

    .btn-primary:hover {
      transform: translateY(-1px);
      box-shadow: 0 22px 55px rgba(79, 70, 229, 0.6);
    }

    .btn-ghost {
      background: rgba(15, 23, 42, 0.8);
      border-color: rgba(148, 163, 184, 0.5);
      color: var(--muted);
    }

    .btn-ghost:hover {
      background: rgba(15, 23, 42, 0.95);
      color: var(--text);
      transform: translateY(-1px);
    }

    .hero-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 1.5rem;
      margin-top: 0.75rem;
      font-size: 0.8rem;
      color: var(--muted);
    }

    .hero-meta span strong {
      color: var(--text);
      font-weight: 600;
    }

    .hero-card {
      border-radius: var(--radius);
      background: radial-gradient(circle at top left, rgba(129, 140, 248, 0.18), transparent 55%),
        radial-gradient(circle at bottom right, rgba(56, 189, 248, 0.16), transparent 55%),
        linear-gradient(145deg, #020617, #020617);
      border: 1px solid rgba(148, 163, 184, 0.35);
      padding: 1.4rem 1.3rem;
      display: flex;
      flex-direction: column;
      gap: 1.1rem;
      position: relative;
      overflow: hidden;
    }

    .hero-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 0 0, rgba(129, 140, 248, 0.2), transparent 55%);
      opacity: 0.7;
      pointer-events: none;
    }

    .hero-card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 0.75rem;
      position: relative;
      z-index: 1;
    }

    .hero-card-title {
      font-size: 0.9rem;
      font-weight: 600;
    }

    .hero-card-tag {
      font-size: 0.7rem;
      padding: 0.2rem 0.6rem;
      border-radius: 999px;
      border: 1px solid rgba(148, 163, 184, 0.6);
      color: var(--muted);
    }

    .hero-card-body {
      position: relative;
      z-index: 1;
      font-size: 0.8rem;
      color: var(--muted);
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
    }

    .hero-card-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.7rem;
    }

    .hero-pill {
      padding: 0.45rem 0.6rem;
      border-radius: 0.9rem;
      background: rgba(15, 23, 42, 0.9);
      border: 1px solid rgba(148, 163, 184, 0.4);
      display: flex;
      flex-direction: column;
      gap: 0.1rem;
    }

    .hero-pill span:first-child {
      font-size: 0.7rem;
      color: var(--muted);
    }

    .hero-pill span:last-child {
      font-size: 0.8rem;
      color: var(--text);
      font-weight: 500;
    }

    .hero-card-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.75rem;
      color: var(--muted);
      position: relative;
      z-index: 1;
    }

    .status-dot {
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: radial-gradient(circle at 30% 20%, #22c55e, #16a34a);
      box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.25);
      margin-right: 0.35rem;
    }

    .section {
      margin-top: 0.5rem;
      display: grid;
      grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
      gap: 2rem;
      align-items: flex-start;
    }

    .section h2 {
      font-size: 1.1rem;
      margin-bottom: 0.6rem;
    }

    .section p {
      font-size: 0.9rem;
      color: var(--muted);
      max-width: 34rem;
    }

    .features {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.9rem;
    }

    .feature {
      padding: 0.8rem 0.9rem;
      border-radius: 0.9rem;
      background: rgba(15, 23, 42, 0.9);
      border: 1px solid rgba(148, 163, 184, 0.35);
      font-size: 0.8rem;
      color: var(--muted);
    }

    .feature strong {
      display: block;
      margin-bottom: 0.2rem;
      color: var(--text);
      font-size: 0.85rem;
    }

    footer {
      margin-top: auto;
      padding: 1.5rem 1.25rem 2rem;
      font-size: 0.75rem;
      color: #6b7280;
      text-align: center;
    }

    @media (max-width: 900px) {
      .hero {
        grid-template-columns: minmax(0, 1fr);
      }

      .hero-card {
        order: -1;
      }

      .section {
        grid-template-columns: minmax(0, 1fr);
      }

      .features {
        grid-template-columns: minmax(0, 1fr);
      }

      header {
        flex-direction: column;
        align-items: flex-start;
      }

      nav {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
      }
    }

    @media (max-width: 520px) {
      .hero-actions {
        flex-direction: column;
        align-items: stretch;
      }

      .hero-meta {
        flex-direction: column;
      }
    }
    h1 {
  font-family: 'Orbitron', sans-serif;
}
body {
  font-family: 'Orbitron', sans-serif;
}
/* Animación de entrada suave */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(18px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animación de fade-in simple */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Glow suave para botones */
@keyframes softGlow {
  from { box-shadow: 0 0 0 rgba(99,102,241,0.0); }
  to { box-shadow: 0 0 18px rgba(99,102,241,0.35); }
}
.hero-text {
  animation: fadeInUp 0.9s ease forwards;
}

.hero-card {
  animation: fadeInUp 1.2s ease forwards;
}

.hero-actions .btn-primary,
.hero-actions .btn-ghost {
  transition: all 0.25s ease;
}

.hero-actions .btn-primary:hover {
  animation: softGlow 0.4s ease forwards;
}
.section {
  opacity: 0;
  animation: fadeIn 1.2s ease forwards;
  animation-delay: 0.4s;
}
.logo-mark {
  animation: fadeInUp 0.8s ease forwards;
}
.logo-mark {
  width: 48px;   /* Ajusta aquí el tamaño */
  height: 48px;  /* Mantén siempre igual ancho/alto */
  border-radius: 999px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

  </style>
</head>
<body>
  <div class="page">
    <header>
      <div class="logo">
        <div class="logo-mark">
  <img src="https://franciscojaviergonzalezgarcia.com/wp-content/uploads/2026/06/Copilot_20260616_032434.png" alt="Logo FJGG">
</div>

        <div class="logo-text">
          <span>Proyecto FJGG</span>
          <span>Ideas, código y experimentos personales</span>
        </div>
      </div>
      <nav>
        <a href="#proyecto">Proyecto</a>
        <a href="#caracteristicas">Características</a>
        <a href="#contacto">Contacto</a>
      </nav>
    </header>

    <main>
      <section class="hero" id="proyecto">
        <div class="hero-text">
          <div class="badge">
            <span class="badge-dot"></span>
            Proyecto en desarrollo activo
          </div>
          <h1>
            Proyecto <span>FJGG</span><br />
            una landing mínima, clara y rápida.
          </h1>
          <p class="hero-subtitle">
            Un espacio para centralizar ideas, pruebas técnicas y pequeños proyectos personales. Ligero, responsive y
            pensado para cargar rápido en cualquier dispositivo.
          </p>
          <div class="hero-actions">
            <button class="btn-primary">
              Empezar ahora
              <span>→</span>
            </button>
            <button class="btn-ghost">
              Ver detalles del proyecto
            </button>
          </div>
          <div class="hero-meta">
            <span><strong>100%</strong> HTML + CSS puro</span>
            <span><strong>Diseño</strong> responsive</span>
            <span><strong>Enfoque</strong> minimalista</span>
          </div>
        </div>

        <aside class="hero-card" aria-label="Resumen del Proyecto FJGG">
          <div class="hero-card-header">
            <div>
              <div class="hero-card-title">Resumen del proyecto</div>
              <div style="font-size:0.75rem;color:var(--muted);">
                Versión inicial de la landing de Proyecto FJGG
              </div>
            </div>
            <div class="hero-card-tag">v1 · Responsive</div>
          </div>

          <div class="hero-card-body">
            <div class="hero-card-grid">
              <div class="hero-pill">
                <span>Objetivo</span>
                <span>Landing limpia y rápida</span>
              </div>
              <div class="hero-pill">
                <span>Tecnología</span>
                <span>HTML + CSS</span>
              </div>
              <div class="hero-pill">
                <span>Diseño</span>
                <span>Mobile‑first</span>
              </div>
              <div class="hero-pill">
                <span>Estado</span>
                <span>En evolución</span>
              </div>
            </div>
            <p>
              Este bloque puede usarse como tarjeta de resumen, panel de métricas o presentación rápida del proyecto.
              Todo el layout se adapta automáticamente a móvil, tablet y escritorio.
            </p>
          </div>

          <div class="hero-card-footer">
            <div style="display:flex;align-items:center;">
              <span class="status-dot"></span>
              <span>Actualizado en tiempo real por ti</span>
            </div>
            <span>Proyecto FJGG · 2026</span>
          </div>
        </aside>
      </section>

      <section class="section" id="caracteristicas">
        <div>
          <h2>¿Qué es Proyecto FJGG?</h2>
          <p>
            Una base sencilla sobre la que puedes construir lo que quieras: portfolio, blog técnico, microsite de
            pruebas o centro de enlaces. El objetivo es que el código sea claro, fácil de modificar y sin dependencias
            externas.
          </p>
        </div>
        <div class="features">
          <article class="feature">
            <strong>Diseño responsive</strong>
            Se adapta automáticamente a móviles, tablets y pantallas grandes usando solo CSS moderno.
          </article>
          <article class="feature">
            <strong>Código limpio</strong>
            Estructura simple, sin frameworks, ideal para personalizar y entender cada parte del layout.
          </article>
          <article class="feature">
            <strong>Enfoque rápido</strong>
            Sin scripts pesados ni librerías externas: pensado para cargar rápido incluso con conexiones lentas.
          </article>
          <article class="feature">
            <strong>Fácil de extender</strong>
            Puedes añadir secciones, formularios, enlaces a proyectos o integrar esta landing en cualquier hosting.
          </article>
        </div>
      </section>

      <section class="section" id="contacto" style="margin-top:2.5rem;">
        <div>
          <h2>¿Y ahora qué?</h2>
          <p>
            Puedes usar esta página como punto de partida: cambia textos, colores, tipografías o añade tus propios
            bloques. Lo importante es que el esqueleto ya está listo para funcionar en cualquier dispositivo.
          </p>
        </div>
        <div class="feature" style="align-self:stretch;display:flex;flex-direction:column;justify-content:center;">
          <strong>Próximo paso</strong>
          <p style="font-size:0.85rem;color:var(--muted);margin-top:0.25rem;">
            Sustituye este bloque por un formulario de contacto, enlaces a tus proyectos o cualquier llamada a la
            acción que tenga sentido para tu versión de <strong>Proyecto FJGG</strong>.
          </p>
        </div>
      </section>
    </main>
  </div>

  <footer>
    Proyecto FJGG · Landing responsive en HTML + CSS · Personalízala a tu gusto.
  </footer>
</body>
</html>

1. Estructura general del documento

2. Sistema de diseño (variables CSS)

3. Layout principal

✔ Hero principal

✔ Secciones inferiores

4. Componentes importantes

Logo

Navegación

Hero principal

Tarjeta lateral (hero-card)

Sección “Características”

5. Responsive (adaptación a móvil)

✔ @media (max-width: 900px)

✔ @media (max-width: 520px)

6. Estilo visual

7. ¿Qué puedes modificar fácilmente?

AGREGAR FUENTE ORBITRON

✔ Añade esto dentro de <head> antes del <style>:

✔ Luego, en tu CSS, define Orbitron como fuente principal del título:

Añadir animaciones suaves (fade-in + slide-up)

✔ Añade estas animaciones al final de tu <style>:

3. Aplicar animaciones a los elementos clave

✔ Hero principal (título, subtítulo, botones)

4. Animación suave al cargar secciones

5. Animación para el logo (detalle elegante)

Resultado final

Sustituir el logo en el HTML

2. Ajustar el CSS para que la imagen encaje perfectamente

3. Si quieres que el logo tenga animación suave (opcional)

Resultado final

Ajustar tamaño general del logo (escritorio)

2. Tamaño diferente en móvil (opcional)

3. Tamaño diferente en pantallas grandes (opcional)

4. Ajustar el espacio entre logo y texto

Resultado

Cambiar el contenedor .page para que sea full‑width

2. Hacer que el header también sea full‑width

3. Hacer que el hero ocupe todo el ancho real

4. Si quieres que TODO el contenido toque los bordes (estilo ultra‑full‑width)

Resultado

Cookies

✔ `@media (max-width: 900px)`

✔ `@media (max-width: 520px)`

✔ Añade esto dentro de `<head>` antes del `<style>`:

✔ Añade estas animaciones al final de tu `<style>`:

Cambiar el contenedor `.page` para que sea full‑width