HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!

1728x251

32.7 KB

Share this result

Previews are deleted daily. Get a permanent share link sent to your inbox:

Script

Open in browser

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Valentine's Day Card 💖</title>
<link href="https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap" rel="stylesheet">
<style>
body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: linear-gradient(to bottom, #ffccd5, #ffe5ec);
    overflow-x: hidden;
    text-align: center;
}

h1 {
    color: #b30059;
}

.hearts {
    position: fixed;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
    top: 0;
    left: 0;
}

.heart {
    position: absolute;
    color: red;
    font-size: 20px;
    animation: fall linear infinite;
}

@keyframes fall {
    0% { transform: translateY(-10%); opacity: 1; }
    100% { transform: translateY(110vh); opacity: 0; }
}

.envelope {
    width: 300px;
    height: 200px;
    background: #fff;
    margin: 20px auto;
    position: relative;
    border-radius: 10px;
    cursor: pointer;
    transition: 1s;
}

.envelope.open {
    height: 350px;
}

.message {
    display: none;
    font-family: 'Great Vibes', cursive;
    font-size: 28px;
    color: #b30059;
    padding: 15px;
}

.envelope.open .message {
    display: block;
}

button {
    padding: 10px 20px;
    margin: 10px;
    background: #ff4d6d;
    border: none;
    border-radius: 5px;
    color: white;
    cursor: pointer;
}

.gallery img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    margin: 5px;
    border-radius: 10px;
}

.countdown {
    font-size: 20px;
    color: #800040;
}

.map iframe {
    width: 90%;
    height: 250px;
    border-radius: 10px;
    border: none;
}

.border-floral {
    border: 10px solid pink;
    border-image: url('https://i.imgur.com/Y5bRZ6F.png') 30 round;
}

.wax-seal {
    margin-top: 10px;
}
</style>
</head>

<body>

<div class="hearts"></div>

<h1>Happy Valentine's Day 💕</h1>

<div class="envelope" onclick="openEnvelope(this)">
    <div class="message" id="personalMessage"></div>
</div>

<input type="text" id="userText" placeholder="Type your romantic message">
<button onclick="setMessage()">Seal Message 💌</button>

<button onclick="toggleMusic()">🎵 Music</button>
<audio id="bgMusic" loop>
    <source src="https://cdn.pixabay.com/audio/2022/02/23/audio_d9f0b7c4e5.mp3" type="audio/mpeg">
</audio>

<div class="countdown" id="countdown"></div>

<h2>Upload Your Cherished Photos 📸</h2>
<input type="file" multiple accept="image/*" onchange="loadGallery(event)">
<div class="gallery border-floral" id="gallery"></div>

<h2>Pin Your Love Memories 🗺️</h2>
<div class="map">
<iframe src="https://www.openstreetmap.org/export/embed.html"></iframe>
</div>

<h2>Secret Romantic Poem 💖</h2>
<button onclick="generatePoem()">Generate Poem</button>
<p id="poem"></p>

<h2>Choose Wax Seal 🔴</h2>
<select onchange="changeSeal(this.value)">
<option value="#ff4d6d">Classic Red</option>
<option value="#800040">Royal Burgundy</option>
<option value="#d4af37">Golden Love</option>
</select>
<div class="wax-seal" id="seal" style="width:50px;height:50px;border-radius:50%;background:#ff4d6d;margin:auto;"></div>

<script>
// Falling hearts
function createHeart() {
    const heart = document.createElement("div");
    heart.classList.add("heart");
    heart.innerHTML = "❤️";
    heart.style.left = Math.random() * 100 + "vw";
    heart.style.animationDuration = Math.random() * 3 + 2 + "s";
    document.querySelector(".hearts").appendChild(heart);
    setTimeout(() => heart.remove(), 5000);
}
setInterval(createHeart, 300);

// Envelope open
function openEnvelope(el) {
    el.classList.toggle("open");
}

// Set message
function setMessage() {
    document.getElementById("personalMessage").innerText =
        document.getElementById("userText").value;
}

// Music toggle
function toggleMusic() {
    const music = document.getElementById("bgMusic");
    if (music.paused) music.play();
    else music.pause();
}

// Countdown to Feb 14
function updateCountdown() {
    const now = new Date();
    const valentine = new Date(now.getFullYear(), 1, 14);
    if (now > valentine) valentine.setFullYear(now.getFullYear() + 1);
    const diff = valentine - now;
    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
    document.getElementById("countdown").innerText =
        "Countdown to Valentine's Day: " + days + " days 💕";
}
setInterval(updateCountdown, 1000);

// Gallery
function loadGallery(event) {
    const gallery = document.getElementById("gallery");
    for (let file of event.target.files) {
        const img = document.createElement("img");
        img.src = URL.createObjectURL(file);
        gallery.appendChild(img);
    }
}

// Poem generator
function generatePoem() {
    const poems = [
        "In your eyes, I see forever,\nIn your smile, my heart's delight.",
        "With every heartbeat, I love you more,\nToday, tomorrow, forevermore.",
        "Like roses bloom in crimson hue,\nMy world blossoms because of you."
    ];
    document.getElementById("poem").innerText =
        poems[Math.floor(Math.random() * poems.length)];
}

// Wax seal
function changeSeal(color) {
    document.getElementById("seal").style.background = color;
}
</script>

</body>
</html>

Landing Page

This ad does not have a landing page available

Network Timeline

Performance Summary

Requests

Domains

142KB

Transfer Size

551KB

Content Size

704.0ms

Dom Content Loaded

804.0ms

First Paint

1,723.0ms

Load Time

Domain Breakdown

Transfer Size (bytes)

Content Size (bytes)

Header Size (bytes)

Requests

Timings (ms)

Total Time

Content Breakdown

Transfer Size (bytes)

Content Size (bytes)

Header Size (bytes)

Requests