Thanks to visit codestin.com
Credit goes to www.scribd.com

Scribd
Upload
8 views5 pages

Lovely - Letter - HTML 5

The document is an HTML page titled 'Te amo, mi vida' that features a romantic message and a countdown timer celebrating love. It includes styled elements such as a heart outline, tulip graphics, and animated stars, along with a script to update the time since the start of a relationship. The content is designed to convey affection and appreciation for a loved one named Evelyn.

Uploaded by

Carlos Santiago
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
8 views5 pages

Lovely - Letter - HTML 5

The document is an HTML page titled 'Te amo, mi vida' that features a romantic message and a countdown timer celebrating love. It includes styled elements such as a heart outline, tulip graphics, and animated stars, along with a script to update the time since the start of a relationship. The content is designed to convey affection and appreciation for a loved one named Evelyn.

Uploaded by

Carlos Santiago
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

<!

DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Te amo, mi vida</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #000;
margin: 0;
font-family: 'Georgia', serif;
color: #333;
overflow: hidden;
background-image: radial-gradient(circle, #333 1px, transparent 1px);
background-size: 30px 30px;
}

.container {
position: relative;
width: 100%;
max-width: 500px;
background-color: #fff;
border-radius: 20px;
padding: 20px;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
overflow: hidden;
}

.heart-container {
position: relative;
width: 100%;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}

.tulip-container {
position: absolute;
bottom: -20px;
right: 20px;
width: 50px;
height: 100px;
z-index: 5;
}

.heart-outline {
position: relative;
width: 300px;
height: 300px;
}

.heart-outline svg {
width: 100%;
height: 100%;
}

.star {
animation: twinkle 2s infinite alternate;
}

@keyframes twinkle {
0% { opacity: 0.5; }
100% { opacity: 1; }
}

.love-message {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
text-align: center;
background-color: rgba(255, 255, 255, 0.7);
border-radius: 12px;
padding: 10px;
box-shadow: 0 0 15px rgba(255, 102, 163, 0.2);
}

.timer {
margin: 10px 0;
font-size: 1.2em;
color: #333;
}

.timer span {
font-weight: bold;
}

.love-title {
font-size: 1.2em;
margin-bottom: 10px;
color: #333;
font-family: 'Brush Script MT', cursive;
}

.love-you {
font-size: 1.5em;
font-weight: bold;
margin-top: 10px;
color: #333;
font-family: 'Brush Script MT', cursive;
animation: pulse 1.5s infinite;
}

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

.code-comments {
text-align: left;
padding: 15px;
background: #f9f9f9;
border-radius: 8px;
margin-top: 20px;
font-family: monospace;
color: #666;
white-space: pre-line;
box-shadow: 0 3px 10px rgba(0,0,0,0.1);
border-left: 4px solid #ff66a3;
}

.comment {
color: #888;
}

.code {
color: #000;
}

.function {
color: #0033cc;
}

.string {
color: #006600;
}
</style>
</head>
<body>
<div class="container">
<div class="code-comments">
<span class="comment"># Querida Evelyn, mi universo entero:
##</span>
<span class="function">def mi_promesa_eterna():</span>
<span class="code">print(</span><span class="string">"Si tuviera que vivir mil
vidas, en cada una te buscaría para enamorarme de ti otra vez."</span><span
class="code">)</span>
<span class="code">print(</span><span class="string">"Gracias por convertir mis
días grises en arcoíris y mis lágrimas en sonrisas."</span><span
class="code">)</span>
<span class="comment"># Cuando el universo me preguntó qué quería, susurré tu
nombre.</span>
<span class="code">print(</span><span class="string">"No hay palabras
suficientes para decirte que eres mi razón de despertar cada mañana."</span><span
class="code">)</span>
<span class="code">print(</span><span class="string">"Te amaré hasta que la
última estrella del cielo se apague... y después también."</span><span
class="code">)</span>
<span class="code">print(</span><span class="string">"Te amo infinitamente, mi
Evelyn ❤"</span><span class="code">)</span>

<span class="function">mi_promesa_eterna()</span>
</div>

<div class="heart-container">
<div class="heart-outline">
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
<path d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-
19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5
199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z"
fill="none" stroke="#ff66a3" stroke-width="10" id="heart-path"/>
</svg>
</div>

<div class="love-message">
<div class="love-title">Me enamoré de ti hace...</div>
<div class="timer">
<span id="days">364</span> días
<span id="hours">10</span> horas
<span id="minutes">07</span> minutos
<span id="seconds">04</span> segundos
</div>
<div class="love-you">Te Amo Evelyn!</div>
</div>

<div class="tulip-container">
<svg viewBox="0 0 100 200" xmlns="http://www.w3.org/2000/svg">
<!-- Tallo del tulipán -->
<path d="M50,200 Q50,160 50,120" stroke="#008800" stroke-
width="3" fill="none"/>
<path d="M50,140 Q55,125 60,140" stroke="#008800" stroke-
width="2" fill="#006600"/>

<!-- Flor del tulipán -->


<path d="M30,120 C30,80 70,80 70,120 L50,140 Z"
fill="#ff3366"/>
<path d="M30,120 C35,100 45,90 50,90 C55,90 65,100 70,120"
stroke="#ff3366" stroke-width="1.5" fill="none"/>
<path d="M37,110 C40,95 50,90 50,90 C50,90 60,95 63,110"
stroke="#ff1a53" stroke-width="1" fill="none"/>

<animate attributeName="transform" attributeType="XML"


type="translate"
from="0 0" to="0 -5" dur="3s" repeatCount="indefinite"
additive="sum" />
</svg>
</div>
</div>
</div>

<script>
// Agregar estrellas pequeñas al contorno del corazón
const heartPath = document.getElementById('heart-path');
const pathLength = heartPath.getTotalLength();
const starCount = 40;
const svgNS = "http://www.w3.org/2000/svg";
const svg = heartPath.parentNode;

for (let i = 0; i < starCount; i++) {


const pointOnPath = heartPath.getPointAtLength(pathLength * i /
starCount);
const star = document.createElementNS(svgNS, "text");
star.setAttribute("x", pointOnPath.x);
star.setAttribute("y", pointOnPath.y);
star.setAttribute("font-size", "20");
star.setAttribute("fill", getRandomColor());
star.setAttribute("text-anchor", "middle");
star.textContent = "✦"; // Pequeña estrella
star.classList.add("star");
svg.appendChild(star);
}

function getRandomColor() {
const colors = ["#ff9999", "#ffcc99", "#ffff99", "#99ff99", "#99ffff",
"#9999ff", "#ff99ff", "#ff6b6b", "#ffd56b", "#d4fb79", "#ff85a1", "#fbb1bd",
"#c5adff"];
return colors[Math.floor(Math.random() * colors.length)];
}

// Función para actualizar el contador


function updateCounter() {
const startDate = new Date("2023-07-30"); // Fecha real de inicio de la
relación
const now = new Date();
const diff = now - startDate;

const days = Math.floor(diff / (1000 * 60 * 60 * 24));


const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 *
60));
const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((diff % (1000 * 60)) / 1000);

document.getElementById("days").textContent = days;
document.getElementById("hours").textContent =
hours.toString().padStart(2, '0');
document.getElementById("minutes").textContent =
minutes.toString().padStart(2, '0');
document.getElementById("seconds").textContent =
seconds.toString().padStart(2, '0');
}

// Actualizar inmediatamente y luego cada segundo


updateCounter();
setInterval(updateCounter, 1000);
</script>
</body>
</html>

You might also like