Scribd
Upload
16 views7 pages

Lovely Letter - HTML 5

This document is an HTML code for a romantic web page titled 'Te amo, mi vida', featuring an interactive envelope that opens to reveal a love message for 'Evelyn'. The page includes animations, a tulip graphic, and a countdown timer displaying the duration of love in days, hours, minutes, and seconds. It also contains JavaScript functions for user interaction and updating the timer based on a specified start date.

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
16 views7 pages

Lovely Letter - HTML 5

This document is an HTML code for a romantic web page titled 'Te amo, mi vida', featuring an interactive envelope that opens to reveal a love message for 'Evelyn'. The page includes animations, a tulip graphic, and a countdown timer displaying the duration of love in days, hours, minutes, and seconds. It also contains JavaScript functions for user interaction and updating the timer based on a specified start date.

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/ 7

<!

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;
}

.envelope {
position: relative;
width: 280px;
height: 180px;
background: #f5e9e2;
background-image: linear-gradient(to bottom right, #f9f2ed, #e8d6cb);
border-radius: 5px;
box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
cursor: pointer;
transition: transform 0.5s;
transform-style: preserve-3d;
margin: 50px auto;
}

.envelope:hover {
transform: translateY(-10px);
box-shadow: 0 10px 25px rgba(255, 255, 255, 0.5);
}

.envelope-front {
position: absolute;
width: 100%;
height: 100%;
background: #f5e9e2;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
z-index: 2;
overflow: hidden;
}

.envelope-flap {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
clip-path: polygon(0 0, 50% 30%, 100% 0, 100% 100%, 0 100%);
background: #ecdad0;
z-index: 1;
}

.envelope-heart {
position: absolute;
width: 40px;
height: 40px;
bottom: 20px;
right: 20px;
}

.tulip-container {
position: absolute;
width: 100px;
height: 140px;
z-index: 5;
left: 50%;
top: 40%;
transform: translate(-50%, -50%);
}

.para-evelyn {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
font-family: 'Brush Script MT', cursive;
font-size: 1.5em;
color: #ff66a3;
}

.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.3);
overflow: hidden;
display: none;
transition: all 0.8s ease;
opacity: 0;
transform: scale(0.9);
}

.heart-container {
position: relative;
width: 100%;
height: 280px;
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
overflow: visible;
}
.heart-outline {
position: relative;
width: 280px;
height: 280px;
margin: 0 auto;
}

.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;
}

.open-instructions {
position: absolute;
bottom: -30px;
left: 0;
width: 100%;
text-align: center;
color: #fff;
font-size: 0.9em;
animation: bounce 2s infinite;
}

@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
</style>
</head>
<body>
<div class="envelope" id="envelope">
<div class="envelope-front">
<div class="envelope-flap"></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="#006600"/>
<path d="M50,140 Q55,125 60,140" stroke="#008800" stroke-
width="2" fill="#006600"/>
<path d="M50,150 Q45,135 40,150" stroke="#008800" stroke-
width="2" fill="#006600"/>

<!-- Hojas -->


<path d="M50,170 Q65,160 60,145" stroke="#006600" stroke-
width="1.5" fill="#00aa00"/>
<path d="M50,180 Q35,170 40,155" stroke="#006600" stroke-
width="1.5" fill="#00aa00"/>

<!-- Flor del tulipán: pétalos externos -->


<path d="M30,120 C30,80 70,80 70,120 L50,140 Z"
fill="#ff3366"/>

<!-- Detalles pétalos -->


<path d="M35,115 C40,90 50,85 50,85 C50,85 60,90 65,115"
stroke="#ff1a53" stroke-width="1.5" fill="#ff4d79"/>
<path d="M32,118 C38,92 50,84 50,84 C50,84 62,92 68,118"
stroke="#ff0044" stroke-width="1" fill="none"/>

<!-- Detalles decorativos -->


<path d="M37,110 C40,100 45,95 50,95 C55,95 60,100 63,110"
stroke="#fff" stroke-width="0.5" fill="none" opacity="0.6"/>
<path d="M40,105 C45,100 50,98 55,100" stroke="#fff" stroke-
width="0.5" fill="none" opacity="0.6"/>

<!-- Brillos -->


<circle cx="40" cy="100" r="1" fill="#fff" opacity="0.8"/>
<circle cx="45" cy="95" r="0.8" fill="#fff" opacity="0.7"/>
<circle cx="52" cy="92" r="1.2" fill="#fff" opacity="0.9"/>

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


type="translate"
from="0 0" to="0 -5" dur="3s" repeatCount="indefinite"
additive="sum" />
</svg>
</div>
<div class="para-evelyn">Para Evelyn</div>
<div class="envelope-heart">
<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="#ff66a3"/>
</svg>
</div>
</div>
<div class="open-instructions">Toca para abrir</div>
</div>

<div class="container" id="love-message">


<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>
</div>

<script>
// Evento para abrir la carta
document.getElementById('envelope').addEventListener('click', function() {
this.style.transform = 'scale(0.1)';
this.style.opacity = '0';

setTimeout(function() {
document.getElementById('envelope').style.display = 'none';
document.getElementById('love-message').style.display = 'block';

setTimeout(function() {
document.getElementById('love-message').style.opacity = '1';
document.getElementById('love-message').style.transform =
'scale(1)';
}, 50);
}, 500);
});

// 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