Tul xxx Tul

Viewing: index.html

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Feliz Día de la Madre, Johana 💖</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=Dancing+Script:wght@700&display=swap" rel="stylesheet">
<style>
  *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

  :root {
    --rose: #e8636a;
    --blush: #f7c5c8;
    --gold: #c9a96e;
    --ivory: #fdf6f0;
    --deep: #2c1a1d;
    --petal: #fce4ec;
  }

  html, body {
    width: 100%; height: 100%;
    overflow: hidden;
    background: var(--deep);
    font-family: 'Cormorant Garamond', serif;
  }

  /* ── Particle canvas ── */
  #canvas { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

  /* ── Main scene ── */
  .scene {
    position: relative; z-index: 1;
    width: 100vw; height: 100vh;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
  }

  /* ── Big background bloom ── */
  .bloom {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0;
    animation: bloomIn 2.5s ease forwards;
  }
  .bloom-1 { width: 700px; height: 700px; background: radial-gradient(circle, #e8636a55, transparent 70%); top: -10%; left: -10%; animation-delay: .3s; }
  .bloom-2 { width: 500px; height: 500px; background: radial-gradient(circle, #c9a96e44, transparent 70%); bottom: -10%; right: -5%; animation-delay: .8s; }
  .bloom-3 { width: 400px; height: 400px; background: radial-gradient(circle, #f7c5c855, transparent 70%); top: 30%; left: 40%; animation-delay: 1.2s; }
  @keyframes bloomIn { to { opacity: 1; } }

  /* ── Card ── */
  .card {
    position: relative;
    background: linear-gradient(145deg, rgba(253,246,240,.13) 0%, rgba(232,99,106,.07) 50%, rgba(201,169,110,.1) 100%);
    border: 1px solid rgba(201,169,110,.35);
    border-radius: 28px;
    padding: 60px 70px;
    max-width: 680px; width: 92vw;
    backdrop-filter: blur(18px);
    box-shadow:
      0 0 0 1px rgba(201,169,110,.12),
      0 40px 100px rgba(0,0,0,.55),
      inset 0 1px 0 rgba(255,255,255,.12);
    text-align: center;
    opacity: 0;
    transform: translateY(40px) scale(.96);
    animation: cardReveal 1.2s cubic-bezier(.22,1,.36,1) 1s forwards;
  }
  @keyframes cardReveal {
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  /* ── Decorative top line ── */
  .top-ornament {
    display: flex; align-items: center; gap: 14px;
    justify-content: center; margin-bottom: 30px;
    opacity: 0; animation: fadeUp .8s ease 1.8s forwards;
  }
  .ornament-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
  .ornament-icon { color: var(--gold); font-size: 18px; }

  /* ── Date badge ── */
  .date-badge {
    display: inline-block;
    font-size: 11px; letter-spacing: 4px; text-transform: uppercase;
    color: var(--gold); font-family: 'Cormorant Garamond', serif;
    background: rgba(201,169,110,.12);
    border: 1px solid rgba(201,169,110,.3);
    border-radius: 100px;
    padding: 6px 20px; margin-bottom: 28px;
    opacity: 0; animation: fadeUp .8s ease 2s forwards;
  }

  /* ── Name ── */
  .name {
    font-family: 'Dancing Script', cursive;
    font-size: clamp(52px, 12vw, 90px);
    color: var(--blush);
    line-height: 1;
    margin-bottom: 10px;
    text-shadow: 0 0 60px rgba(232,99,106,.6), 0 4px 30px rgba(0,0,0,.4);
    opacity: 0; animation: nameReveal 1s cubic-bezier(.22,1,.36,1) 2.1s forwards;
  }
  @keyframes nameReveal {
    from { opacity: 0; transform: scale(.85); filter: blur(8px); }
    to   { opacity: 1; transform: scale(1);  filter: blur(0); }
  }

  /* ── Main title ── */
  .title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(16px, 4vw, 22px);
    font-weight: 400; font-style: italic;
    color: rgba(253,246,240,.75);
    letter-spacing: 2px;
    margin-bottom: 36px;
    opacity: 0; animation: fadeUp .8s ease 2.5s forwards;
  }

  /* ── Divider ── */
  .divider {
    display: flex; align-items: center; gap: 16px;
    margin: 0 auto 36px; width: 80%;
    opacity: 0; animation: fadeUp .8s ease 2.7s forwards;
  }
  .div-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(247,197,200,.4), transparent); }
  .div-heart { font-size: 14px; color: var(--rose); animation: pulse 2s ease-in-out infinite; }
  @keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.3)} }

  /* ── Message ── */
  .message {
    font-size: clamp(15px, 3vw, 19px);
    color: rgba(253,246,240,.85);
    line-height: 1.9;
    font-style: italic;
    font-weight: 300;
    margin-bottom: 44px;
    opacity: 0; animation: fadeUp .8s ease 2.9s forwards;
  }
  .message em { color: var(--blush); font-style: normal; font-weight: 400; }

  /* ── Signature ── */
  .signature {
    font-family: 'Dancing Script', cursive;
    font-size: 22px;
    color: var(--gold);
    opacity: 0; animation: fadeUp .8s ease 3.3s forwards;
    margin-bottom: 36px;
  }

  /* ── Bottom ornament ── */
  .bottom-ornament {
    display: flex; align-items: center; gap: 14px;
    justify-content: center;
    opacity: 0; animation: fadeUp .8s ease 3.5s forwards;
  }

  /* ── Floating petals ── */
  .petal {
    position: fixed;
    pointer-events: none;
    font-size: 18px;
    animation: petalFall linear infinite;
    opacity: 0;
    z-index: 0;
  }
  @keyframes petalFall {
    0%   { transform: translateY(-40px) rotate(0deg); opacity: 0; }
    10%  { opacity: .7; }
    90%  { opacity: .5; }
    100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
  }

  /* ── Glow ring around card ── */
  .card::before {
    content: '';
    position: absolute; inset: -2px;
    border-radius: 30px;
    background: linear-gradient(135deg, rgba(232,99,106,.4), transparent 40%, rgba(201,169,110,.35) 100%);
    z-index: -1;
    opacity: 0; animation: ringGlow 3s ease 2s forwards;
  }
  @keyframes ringGlow { to { opacity: 1; } }

  /* ── Corner flowers ── */
  .corner { position: absolute; font-size: 28px; opacity: 0; animation: cornerReveal 1s ease forwards; }
  .corner-tl { top: 18px; left: 22px; animation-delay: 3.2s; transform: rotate(-20deg); }
  .corner-tr { top: 18px; right: 22px; animation-delay: 3.4s; transform: rotate(20deg); }
  .corner-bl { bottom: 18px; left: 22px; animation-delay: 3.6s; transform: rotate(20deg); }
  .corner-br { bottom: 18px; right: 22px; animation-delay: 3.8s; transform: rotate(-20deg); }
  @keyframes cornerReveal { from{opacity:0;transform:scale(0)} to{opacity:.7;transform:scale(1)} }

  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ── Responsive ── */
  @media(max-width:520px) {
    .card { padding: 40px 28px; }
  }
</style>
</head>
<body>

<canvas id="canvas"></canvas>

<div class="scene">
  <!-- Atmospheric blooms -->
  <div class="bloom bloom-1"></div>
  <div class="bloom bloom-2"></div>
  <div class="bloom bloom-3"></div>

  <div class="card">
    <!-- Corner flowers -->
    <span class="corner corner-tl">🌸</span>
    <span class="corner corner-tr">🌺</span>
    <span class="corner corner-bl">🌹</span>
    <span class="corner corner-br">🌸</span>

    <div class="top-ornament">
      <div class="ornament-line"></div>
      <span class="ornament-icon">✦</span>
      <div class="ornament-line"></div>
    </div>

    <div class="date-badge">10 de Mayo · Día de la Madre</div>

    <div class="name">Mamá Johana</div>
    <div class="title">Feliz Día de la Madre</div>

    <div class="divider">
      <div class="div-line"></div>
      <span class="div-heart">♥</span>
      <div class="div-line"></div>
    </div>

    <p class="message">
      Mamá, hay palabras que el corazón siente<br>
      pero que ningún idioma alcanza a describir.<br><br>
      Eres el primer abrazo que conocí,<br>
      la voz que me calmó en cada tormenta,<br>
      la fuerza silenciosa detrás de cada logro<br>
      y el amor más <em>puro e incondicional</em><br>
      que existe en este mundo.<br><br>
      Hoy y todos los días, gracias por ser tú,<br>
      por ser <em>mi mamá</em>, mi hogar y mi guía.<br>
      <em>Te amo infinitamente.</em>
    </p>

    <div class="signature">Con todo mi amor 💖</div>

    <div class="bottom-ornament">
      <div class="ornament-line"></div>
      <span class="ornament-icon" style="color:var(--rose)">🌸</span>
      <div class="ornament-line"></div>
    </div>
  </div>
</div>

<!-- Floating petals -->
<script>
  // ── Floating petals ──────────────────────────────────
  const emojis = ['🌸','🌺','🌹','✿','❀','🌷'];
  for (let i = 0; i < 22; i++) {
    const el = document.createElement('div');
    el.className = 'petal';
    el.textContent = emojis[Math.floor(Math.random() * emojis.length)];
    el.style.left = Math.random() * 100 + 'vw';
    el.style.fontSize = (12 + Math.random() * 18) + 'px';
    const dur = 8 + Math.random() * 10;
    el.style.animationDuration = dur + 's';
    el.style.animationDelay = (Math.random() * 12) + 's';
    document.body.appendChild(el);
  }

  // ── Particle canvas (sparkles) ───────────────────────
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');
  let W, H, particles = [];

  function resize() {
    W = canvas.width  = window.innerWidth;
    H = canvas.height = window.innerHeight;
  }
  resize();
  window.addEventListener('resize', resize);

  function makeParticle() {
    return {
      x: Math.random() * W,
      y: Math.random() * H,
      r: .5 + Math.random() * 1.5,
      alpha: Math.random(),
      da: (.003 + Math.random() * .007) * (Math.random() < .5 ? 1 : -1),
      dx: (Math.random() - .5) * .3,
      dy: (Math.random() - .5) * .3,
      color: Math.random() < .5
        ? `rgba(232,99,106,`
        : `rgba(201,169,110,`
    };
  }
  for (let i = 0; i < 140; i++) particles.push(makeParticle());

  function loop() {
    ctx.clearRect(0, 0, W, H);
    for (const p of particles) {
      p.alpha += p.da;
      if (p.alpha <= 0 || p.alpha >= 1) p.da *= -1;
      p.x += p.dx; p.y += p.dy;
      if (p.x < 0) p.x = W; if (p.x > W) p.x = 0;
      if (p.y < 0) p.y = H; if (p.y > H) p.y = 0;
      ctx.beginPath();
      ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
      ctx.fillStyle = p.color + p.alpha + ')';
      ctx.fill();
    }
    requestAnimationFrame(loop);
  }
  loop();
</script>
</body>
</html>
User / IP	: 216.73.216.217
Host / Server	: 45.84.207.204 / aircan.me
System	: Linux lt-bnk-web1726.main-hosting.eu 5.14.0-611.36.1.el9_7.x86_64 #1 SMP PREEMPT_DYNAMIC Tue Mar 3 11:23:52 EST 2026 x86_64