Poema

Open In Editor Video Publish Your Code

HTML

<html><head><base href=".">
<meta charset="UTF-8">
<title>Poemas para my osita ♥</title>
<style>
body {
    background-color: #fff0f5;
    font-family: 'Comic Sans MS', cursive;
    margin: 0;
    padding: 20px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: linear-gradient(45deg, #fff0f5 25%, #ffe4e1 25%, #ffe4e1 50%, #fff0f5 50%, #fff0f5 75%, #ffe4e1 75%, #ffe4e1 100%);
    background-size: 40px 40px;
    overflow-x: hidden;
}

.title {
    color: #ff69b4;
    text-shadow: 
        0 0 10px #ff69b4,
        0 0 20px #ff69b4,
        0 0 30px #ff69b4;
    animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
    from {
        text-shadow: 
            0 0 10px #ff69b4,
            0 0 20px #ff69b4,
            0 0 30px #ff69b4;
    }
    to {
        text-shadow: 
            0 0 20px #ff69b4,
            0 0 30px #ff69b4,
            0 0 40px #ff69b4;
    }
}

.kitty-logo {
    width: 150px;
    margin: 20px;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.floating-hearts {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

.heart {
    position: absolute;
    color: #ff69b4;
    opacity: 0.3;
    transform-style: preserve-3d;
    animation: float-3d 6s linear infinite;
}

@keyframes float-3d {
    0% {
        transform: translateY(100vh) translateZ(0) rotateX(0deg) rotateY(0deg);
        opacity: 0.3;
    }
    100% {
        transform: translateY(-100px) translateZ(100px) rotateX(360deg) rotateY(360deg);
        opacity: 0;
    }
}

.poems-circle {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    max-width: 1200px;
}

.poem-card {
    width: 200px;
    height: 200px;
    perspective: 1000px;
    cursor: pointer;
    transform-style: preserve-3d;
    animation: float-card 3s ease-in-out infinite;
}

@keyframes float-card {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(2deg); }
}

.poem-card:hover {
    transform: scale(1.05);
}

.poem-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s;
}

.poem-card:hover .poem-inner {
    transform: rotateY(180deg);
}

.poem-front, .poem-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    padding: 15px;
    box-shadow: 0 5px 15px rgba(255, 105, 180, 0.3);
    transition: all 0.3s ease;
}

.poem-front {
    background: linear-gradient(45deg, #fff0f5, #ffe4e1);
    border: 3px solid #ff69b4;
}

.poem-back {
    background: linear-gradient(45deg, #ff69b4, #ff1493);
    color: white;
    transform: rotateY(180deg);
    font-size: 0.9em;
    text-align: center;
    overflow-y: auto;
    border: 3px solid #fff;
}

.day-number {
    font-size: 3em;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
    animation: pulse-number 2s infinite;
}

@keyframes pulse-number {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.love-message {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 15px 30px;
    background-color: #ff69b4;
    color: white;
    border-radius: 25px;
    font-size: 1.2em;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: translateX(-50%) scale(1); }
    50% { transform: translateX(-50%) scale(1.05); }
    100% { transform: translateX(-50%) scale(1); }
}

.sparkle {
    position: absolute;
    pointer-events: none;
    background: radial-gradient(circle, #fff, transparent);
    filter: drop-shadow(0 0 10px #ff69b4);
    animation: sparkle 1.5s linear infinite;
}

@keyframes sparkle {
    0% { transform: scale(0) rotate(0deg); opacity: 0; }
    50% { transform: scale(1) rotate(180deg); opacity: 0.8; }
    100% { transform: scale(0) rotate(360deg); opacity: 0; }
}
</style>
</head>
<body>
<h1 class="title">HOLA MY OSITA ♥</h1>
<img src="https://i.ibb.co/5BhVFGy/IMG-3166.png" alt="Hello Kitty" class="kitty-logo">

<div class="floating-hearts"></div>
<div class="love-message">Te amo más que a nada en este mundo ♥</div>

<div class="poems-circle">
    
    <div class="poem-card">
        <div class="poem-inner">
            <div class="poem-front">
                <span class="day-number">1</span>
            </div>
            <div class="poem-back">
                Cada amanecer pienso en ti,<br>
                En tu sonrisa que ilumina mi existir,<br>
                Eres el amor que siempre soñé,<br>
                La razón por la que aprendí a vivir.
            </div>
        </div>
    </div>

<div class="poem-card">
        <div class="poem-inner">
            <div class="poem-front">
                <span class="day-number">2</span>
            </div>
            <div class="poem-back">
                Como estrella en mi cielo brillás,<br>
                Iluminando mis noches con tu amor,<br>
                En cada latido de mi corazón estás,<br>
                Siendo mi más dulce bendición.
            </div>
        </div>
    </div>

<div class="poem-card">
        <div class="poem-inner">
            <div class="poem-front">
                <span class="day-number">3</span>
            </div>
            <div class="poem-back">
                Tus ojos son mi guía en la oscuridad,<br>
                Tu voz es la melodía de mi canción,<br>
                Contigo encontré la felicidad,<br>
                Y el verdadero significado del amor.
            </div>
        </div>
    </div>

<div class="poem-card">
        <div class="poem-inner">
            <div class="poem-front">
                <span class="day-number">4</span>
            </div>
            <div class="poem-back">
                En cada suspiro de mi ser,<br>
                Tu nombre se dibuja en el aire,<br>
                Eres mi razón para creer,<br>
                En este amor que nadie sabe.
            </div>
        </div>
    </div>

<div class="poem-card">
        <div class="poem-inner">
            <div class="poem-front">
                <span class="day-number">5</span>
            </div>
            <div class="poem-back">
                Como pétalos de rosa al viento,<br>
                Mis palabras vuelan hacia ti,<br>
                Llevando todo el sentimiento,<br>
                Del amor que vive en mí.
            </div>
        </div>
    </div>

<div class="poem-card">
        <div class="poem-inner">
            <div class="poem-front">
                <span class="day-number">6</span>
            </div>
            <div class="poem-back">
                Eres la luz de mi mañana,<br>
                El sueño de mi noche serena,<br>
                La sonrisa que me sana,<br>
                Y el amor que vale la pena.
            </div>
        </div>
    </div>

<div class="poem-card">
        <div class="poem-inner">
            <div class="poem-front">
                <span class="day-number">7</span>
            </div>
            <div class="poem-back">
                Cada día junto a ti es un regalo,<br>
                Un tesoro que guardo en mi corazón,<br>
                En tus brazos encuentro mi amparo,<br>
                Y en tu amor, mi mejor canción.
            </div>
        </div>
    </div>

<div class="poem-card">
        <div class="poem-inner">
            <div class="poem-front">
                <span class="day-number">8</span>
            </div>
            <div class="poem-back">
                Tu amor es mi dulce medicina,<br>
                El bálsamo que cura mi ser,<br>
                Eres la estrella que ilumina,<br>
                Todo mi mundo al amanecer.
            </div>
        </div>
    </div>

<div class="poem-card">
        <div class="poem-inner">
            <div class="poem-front">
                <span class="day-number">9</span>
            </div>
            <div class="poem-back">
                En el jardín de mi corazón,<br>
                Floreces como la más bella flor,<br>
                Llenando de color mi ilusión,<br>
                Con el perfume de nuestro amor.
            </div>
        </div>
    </div>

<div class="poem-card">
        <div class="poem-inner">
            <div class="poem-front">
                <span class="day-number">10</span>
            </div>
            <div class="poem-back">
                Eres mi sueño hecho realidad,<br>
                Mi felicidad en forma de amor,<br>
                Contigo encontré la verdad,<br>
                De lo que significa el amor.
            </div>
        </div>
    </div>

<div class="poem-card">
        <div class="poem-inner">
            <div class="poem-front">
                <span class="day-number">11</span>
            </div>
            <div class="poem-back">
                Como luna que brilla en la noche,<br>
                Iluminas mi camino al andar,<br>
                Eres el más precioso derroche,<br>
                De amor que pude encontrar.
            </div>
        </div>
    </div>

<div class="poem-card">
        <div class="poem-inner">
            <div class="poem-front">
                <span class="day-number">12</span>
            </div>
            <div class="poem-back">
                En cada latido te siento,<br>
                En cada respiro te vivo,<br>
                Eres mi más dulce momento,<br>
                Y el amor por el que suspiro.
            </div>
        </div>
    </div>

<div class="poem-card">
        <div class="poem-inner">
            <div class="poem-front">
                <span class="day-number">13</span>
            </div>
            <div class="poem-back">
                Como brisa en primavera,<br>
                Refrescas mi corazón,<br>
                Eres mi dulce quimera,<br>
                Mi más hermosa ilusión.
            </div>
        </div>
    </div>

<div class="poem-card">
        <div class="poem-inner">
            <div class="poem-front">
                <span class="day-number">14</span>
            </div>
            <div class="poem-back">
                En el libro de mi vida,<br>
                Eres el más bello capítulo,<br>
                La historia más querida,<br>
                El amor sin título.
            </div>
        </div>
    </div>

<div class="poem-card">
        <div class="poem-inner">
            <div class="poem-front">
                <span class="day-number">15</span>
            </div>
            <div class="poem-back">
                Eres mi presente y futuro,<br>
                Mi más hermosa realidad,<br>
                El amor más puro y seguro,<br>
                Mi eterna felicidad.
            </div>
        </div>
    </div>

<div class="poem-card">
        <div class="poem-inner">
            <div class="poem-front">
                <span class="day-number">16</span>
            </div>
            <div class="poem-back">
                Cada segundo que pasa,<br>
                Mi amor por ti crece más,<br>
                Eres la luz de mi casa,<br>
                Y nunca te dejaré jamás.
            </div>
        </div>
    </div>

<div class="poem-card">
        <div class="poem-inner">
            <div class="poem-front">
                <span class="day-number">17</span>
            </div>
            <div class="poem-back">
                Entre millones de estrellas,<br>
                Tú eres la que más brilla,<br>
                De todas las cosas bellas,<br>
                Eres mi maravilla.
            </div>
        </div>
    </div>

<div class="poem-card">
        <div class="poem-inner">
            <div class="poem-front">
                <span class="day-number">18</span>
            </div>
            <div class="poem-back">
                Eres la razón de mis días,<br>
                La musa de mis poemas,<br>
                Cada latido me envuelve en melodías,<br>
                Y en tus brazos, encuentro mis temas.
            </div>
        </div>
    </div>

<div class="poem-card">
        <div class="poem-inner">
            <div class="poem-front">
                <span class="day-number">19</span>
            </div>
            <div class="poem-back">
                Eres la flor que en mi pecho florece,<br>
                El abrigo que a mi alma mece,<br>
                Eres un sueño que nunca se desvanece,<br>
                Mi amor por ti crece y crece.
            </div>
        </div>
    </div>

<div class="poem-card">
        <div class="poem-inner">
            <div class="poem-front">
                <span class="day-number">20</span>
            </div>
            <div class="poem-back">
                Como el mar abraza la orilla,<br>
                Así abrazo tu amor sincero,<br>
                Eres la estrella que brilla,<br>
                En mi cielo, mi dulce anhelo.
            </div>
        </div>
    </div>

<div class="poem-card">
        <div class="poem-inner">
            <div class="poem-front">
                <span class="day-number">21</span>
            </div>
            <div class="poem-back">
                Eres la canción que nunca termina,<br>
                La melodía que alegra mi andar,<br>
                Cada nota en mi pecho adivina,<br>
                Que a tu lado quiero soñar.
            </div>
        </div>
    </div>

<div class="poem-card">
        <div class="poem-inner">
            <div class="poem-front">
                <span class="day-number">22</span>
            </div>
            <div class="poem-back">
                Como un río que fluye sin fin,<br>
                Así es mi amor por ti,<br>
                Eres el sol que ilumina mi jardín,<br>
                Y siempre estarás aquí.
            </div>
        </div>
    </div>

<div class="poem-card">
        <div class="poem-inner">
            <div class="poem-front">
                <span class="day-number">23</span>
            </div>
            <div class="poem-back">
                Eres el viento que acaricia mi piel,<br>
                La brisa suave que me hace sentir,<br>
                En cada susurro, en cada anhelo,<br>
                Juntos siempre, así quiero vivir.
            </div>
        </div>
    </div>

<div class="poem-card">
        <div class="poem-inner">
            <div class="poem-front">
                <span class="day-number">24</span>
            </div>
            <div class="poem-back">
                Eres mi refugio en la tormenta,<br>
                La calma que llena mi ser,<br>
                Desde que llegaste, mi vida es lenta,<br>
                Eres el sol que vuelve a nacer.
            </div>
        </div>
    </div>

<div class="poem-card">
        <div class="poem-inner">
            <div class="poem-front">
                <span class="day-number">25</span>
            </div>
            <div class="poem-back">
                Eres mi sueño en cada despertar,<br>
                La razón de mi risa y mi llanto,<br>
                En tu amor siempre quiero estar,<br>
                Juntos, amor, nunca en un canto.
            </div>
        </div>
    </div>

<div class="poem-card">
        <div class="poem-inner">
            <div class="poem-front">
                <span class="day-number">26</span>
            </div>
            <div class="poem-back">
                Eres la luz que ilumina mi vida,<br>
                La razón de mis mejores momentos,<br>
                Eres mi amor, mi dulce salida,<br>
                En ti encuentro mis sentimientos.
            </div>
        </div>
    </div>

<div class="poem-card">
        <div class="poem-inner">
            <div class="poem-front">
                <span class="day-number">27</span>
            </div>
            <div class="poem-back">
                Como un faro en la oscuridad,<br>
                Así guías mi caminar,<br>
                Eres mi amor, mi felicidad,<br>
                Juntos siempre, quiero soñar.
            </div>
        </div>
    </div>

<div class="poem-card">
        <div class="poem-inner">
            <div class="poem-front">
                <span class="day-number">28</span>
            </div>
            <div class="poem-back">
                Eres el abrazo que sana mi herida,<br>
                La cura a mi soledad,<br>
                Eres mi amor, mi vida,<br>
                Siempre juntos, en realidad.
            </div>
        </div>
    </div>

<div class="poem-card">
        <div class="poem-inner">
            <div class="poem-front">
                <span class="day-number">29</span>
            </div>
            <div class="poem-back">
                Cada latido de mi corazón,<br>
                Es un susurro de amor sincero,<br>
                Eres mi razón, mi gran pasión,<br>
                Siempre juntos, mi amor entero.
            </div>
        </div>
    </div>

<div class="poem-card">
        <div class="poem-inner">
            <div class="poem-front">
                <span class="day-number">30</span>
            </div>
            <div class="poem-back">
                Eres el sueño que nunca se apaga,<br>
                La luz que siempre quiero ver,<br>
                En tus brazos, mi amor se despliega,<br>
                Y nunca te dejaré de querer.
            </div>
        </div>
    </div>

<div class="poem-card">
        <div class="poem-inner">
            <div class="poem-front">
                <span class="day-number">31</span>
            </div>
            <div class="poem-back">
                Eres la flor que quiero cuidar,<br>
                La lluvia que alivia mi ser,<br>
                En cada beso quiero soñar,<br>
                Contigo siempre, mi querer.
            </div>
        </div>
    </div>

<div class="poem-card">
        <div class="poem-inner">
            <div class="poem-front">
                <span class="day-number">32</span>
            </div>
            <div class="poem-back">
                Eres el sol que amanece en mi vida,<br>
                La razón detrás de mi sonrisa,<br>
                Cada momento a tu lado es una partida,<br>
                Y siempre quiero que tú seas mi prisa.
            </div>
        </div>
    </div>

<div class="poem-card">
        <div class="poem-inner">
            <div class="poem-front">
                <span class="day-number">33</span>
            </div>
            <div class="poem-back">
                En el silencio de la noche estrellada,<br>
                Te encuentro en cada susurro,<br>
                Eres mi amor, mi alma encantada,<br>
                Siempre contigo, mi dulce murmullo.
            </div>
        </div>
    </div>

<div class="poem-card">
        <div class="poem-inner">
            <div class="poem-front">
                <span class="day-number">34</span>
            </div>
            <div class="poem-back">
                Eres la paz que inunda mi ser,<br>
                La risa que llena mi hogar,<br>
                En cada palabra quiero renacer,<br>
                Y en tu amor, siempre quiero estar.
            </div>
        </div>
    </div>

<div class="poem-card">
        <div class="poem-inner">
            <div class="poem-front">
                <span class="day-number">35</span>
            </div>
            <div class="poem-back">
                Eres el sueño que nunca se apaga,<br>
                La luz que siempre quiero ver,<br>
                En tus brazos, mi amor se despliega,<br>
                Y nunca te dejaré de querer.
            </div>
        </div>
    </div>

<div class="poem-card">
        <div class="poem-inner">
            <div class="poem-front">
                <span class="day-number">36</span>
            </div>
            <div class="poem-back">
                Eres la flor que quiero cuidar,<br>
                La lluvia que alivia mi ser,<br>
                En cada beso quiero soñar,<br>
                Contigo siempre, mi querer.
            </div>
        </div>
    </div>

<div class="poem-card">
        <div class="poem-inner">
            <div class="poem-front">
                <span class="day-number">37</span>
            </div>
            <div class="poem-back">
                Eres el sol que amanece en mi vida,<br>
                La razón detrás de mi sonrisa,<br>
                Cada momento a tu lado es una partida,<br>
                Y siempre quiero que tú seas mi prisa.
            </div>
        </div>
    </div>

<div class="poem-card">
        <div class="poem-inner">
            <div class="poem-front">
                <span class="day-number">38</span>
            </div>
            <div class="poem-back">
                En el silencio de la noche estrellada,<br>
                Te encuentro en cada susurro,<br>
                Eres mi amor, mi alma encantada,<br>
                Siempre contigo, mi dulce murmullo.
            </div>
        </div>
    </div>

<div class="poem-card">
        <div class="poem-inner">
            <div class="poem-front">
                <span class="day-number">39</span>
            </div>
            <div class="poem-back">
                Eres la paz que inunda mi ser,<br>
                La risa que llena mi hogar,<br>
                En cada palabra quiero renacer,<br>
                Y en tu amor, siempre quiero estar.
            </div>
        </div>
    </div>

<div class="poem-card">
        <div class="poem-inner">
            <div class="poem-front">
                <span class="day-number">40</span>
            </div>
            <div class="poem-back">
                Eres mi cielo en un día nublado,<br>
                La luz que brilla en la oscuridad,<br>
                Siempre a tu lado, nunca alejado,<br>
                Eres mi amor, mi felicidad.
            </div>
        </div>
    </div>

<div class="poem-card">
        <div class="poem-inner">
            <div class="poem-front">
                <span class="day-number">41</span>
            </div>
            <div class="poem-back">
                Eres la melodía que me envuelve,<br>
                La canción que quiero cantar,<br>
                En cada verso, mi amor se resuelve,<br>
                Siempre contigo, quiero estar.
            </div>
        </div>
    </div>

<div class="poem-card">
        <div class="poem-inner">
            <div class="poem-front">
                <span class="day-number">42</span>
            </div>
            <div class="poem-back">
                Como un río que fluye sin fin,<br>
                Así es mi amor por ti,<br>
                Eres el sol que ilumina mi jardín,<br>
                Y siempre estarás aquí.
            </div>
        </div>
    </div>

<div class="poem-card">
        <div class="poem-inner">
            <div class="poem-front">
                <span class="day-number">43</span>
            </div>
            <div class="poem-back">
                Eres el viento que acaricia mi piel,<br>
                La brisa suave que me hace sentir,<br>
                En cada susurro, en cada anhelo,<br>
                Juntos siempre, así quiero vivir.
            </div>
        </div>
    </div>

<div class="poem-card">
        <div class="poem-inner">
            <div class="poem-front">
                <span class="day-number">44</span>
            </div>
            <div class="poem-back">
                Eres mi refugio en la tormenta,<br>
                La calma que llena mi ser,<br>
                Desde que llegaste, mi vida es lenta,<br>
                Eres el sol que vuelve a nacer.
            </div>
        </div>
    </div>

<div class="poem-card">
        <div class="poem-inner">
            <div class="poem-front">
                <span class="day-number">45</span>
            </div>
            <div class="poem-back">
                Eres mi sueño en cada despertar,<br>
                La razón de mi risa y mi llanto,<br>
                En tu amor siempre quiero estar,<br>
                Juntos, amor, nunca en un canto.
            </div>
        </div>
    </div>

<div class="poem-card">
        <div class="poem-inner">
            <div class="poem-front">
                <span class="day-number">46</span>
            </div>
            <div class="poem-back">
                Eres la luz que ilumina mi vida,<br>
                La razón de mis mejores momentos,<br>
                Eres mi amor, mi dulce salida,<br>
                En ti encuentro mis sentimientos.
            </div>
        </div>
    </div>

<div class="poem-card">
        <div class="poem-inner">
            <div class="poem-front">
                <span class="day-number">47</span>
            </div>
            <div class="poem-back">
                Como un faro en la oscuridad,<br>
                Así guías mi caminar,<br>
                Eres mi amor, mi felicidad,<br>
                Juntos siempre, quiero soñar.
            </div>
        </div>
    </div>

<div class="poem-card">
        <div class="poem-inner">
            <div class="poem-front">
                <span class="day-number">48</span>
            </div>
            <div class="poem-back">
                Eres el abrazo que sana mi herida,<br>
                La cura a mi soledad,<br>
                Eres mi amor, mi vida,<br>
                Siempre juntos, en realidad.
            </div>
        </div>
    </div>

<div class="poem-card">
        <div class="poem-inner">
            <div class="poem-front">
                <span class="day-number">49</span>
            </div>
            <div class="poem-back">
                Cada latido de mi corazón,<br>
                Es un susurro de amor sincero,<br>
                Eres mi razón, mi gran pasión,<br>
                Siempre juntos, mi amor entero.
            </div>
        </div>
    </div>

<div class="poem-card">
        <div class="poem-inner">
            <div class="poem-front">
                <span class="day-number">50</span>
            </div>
            <div class="poem-back">
                Eres el sueño que nunca se apaga,<br>
                La luz que siempre quiero ver,<br>
                En tus brazos, mi amor se despliega,<br>
                Y nunca te dejaré de querer.
            </div>
        </div>
    </div>
</div>

setInterval(createEnhancedHeart, 300);

// Enhanced sparkle effect
function createEnhancedSparkle(e) {
    const sparkle = document.createElement('div');
    sparkle.className = 'sparkle';
    sparkle.style.left = e.pageX + 'px';
    sparkle.style.top = e.pageY + 'px';
    sparkle.style.width = Math.random() * 15 + 5 + 'px';
    sparkle.style.height = sparkle.style.width;
    sparkle.style.transform = `rotate(${Math.random() * 360}deg) translateZ(${Math.random() * 50}px)`;
    document.body.appendChild(sparkle);
    
    setTimeout(() => sparkle.remove(), 1500);
}

document.addEventListener('mousemove', (e) => {
    if(Math.random() > 0.8) { // Only create sparkles 20% of the time
        createEnhancedSparkle(e);
    }
});

// Card flip functionality
document.querySelectorAll('.poem-card').forEach(card => {
    card.addEventListener('click', () => {
        const inner = card.querySelector('.poem-inner');
        inner.style.transform = inner.style.transform === 'rotateY(180deg)' 
            ? 'rotateY(0deg)' 
            : 'rotateY(180deg)';
    });
    
    // Add 3D tilt effect to cards
    card.addEventListener('mousemove', (e) => {
        const rect = card.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;
        const centerX = rect.width / 2;
        const centerY = rect.height / 2;
        
        const angleX = (y - centerY) / 30;
        const angleY = (centerX - x) / 30;
        
        card.style.transform = `perspective(1000px) rotateX(${angleX}deg) rotateY(${angleY}deg)`;
    });
    
    card.addEventListener('mouseleave', () => {
        card.style.transform = 'perspective(1000px) rotateX(0) rotateY(0)';
    });
});

// Love message changer
const loveMessages = [
    "Te amo más que a nada en este mundo ♥",
    "Eres mi todo ♥",
    "Contigo hasta el infinito ♥",
    "Mi corazón es tuyo ♥",
    "Eres mi princesa ♥",
    "Cada día te amo más ♥",
    "Mi amor por ti es eterno ♥",
    "Eres mi sueño hecho realidad ♥",
    "Mi corazón late por ti ♥",
    "Juntos por siempre ♥"
];

let currentMessageIndex = 0;
const loveMessageElement = document.querySelector('.love-message');

setInterval(() => {
    currentMessageIndex = (currentMessageIndex + 1) % loveMessages.length;
    loveMessageElement.textContent = loveMessages[currentMessageIndex];
}, 3000);
</script>
</body></html>

Poema

HTML

CSS

JS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS