Live Preview
Tag didn’t load? Click here and let us know!Share this result
Previews are deleted daily. Get a permanent share link sent to your inbox:
Script
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Happy Anniversary ❤️</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,sans-serif;
}
body{
background:linear-gradient(135deg,#ff9a9e,#fad0c4);
overflow-x:hidden;
color:white;
text-align:center;
}
.page{
min-height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
padding:20px;
}
h1{
font-size:50px;
margin-bottom:20px;
animation:fade 2s;
}
p{
font-size:20px;
max-width:700px;
line-height:1.8;
}
button{
padding:15px 35px;
font-size:18px;
border:none;
border-radius:40px;
background:white;
color:#ff4081;
cursor:pointer;
margin-top:30px;
}
button:hover{
transform:scale(1.08);
}
.gallery{
display:flex;
overflow:hidden;
width:90%;
max-width:350px;
margin:auto;
border-radius:20px;
}
.gallery img{
width:100%;
display:none;
border-radius:20px;
}
.gallery img.active{
display:block;
animation:zoom 1s;
}
.timeline{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
margin-top:30px;
width:90%;
}
.card{
background:rgba(255,255,255,.2);
padding:20px;
border-radius:15px;
}
#gift{
display:none;
margin-top:30px;
font-size:28px;
}
.heart{
position:fixed;
top:-50px;
color:red;
font-size:20px;
animation:fall linear infinite;
pointer-events:none;
}
@keyframes fall{
0%{transform:translateY(-50px);}
100%{transform:translateY(110vh);}
}
@keyframes fade{
from{opacity:0;}
to{opacity:1;}
}
@keyframes zoom{
from{transform:scale(.8);}
to{transform:scale(1);}
}
</style>
</head>
<body>
<section class="page">
<h1>❤️ Happy Anniversary ❤️</h1>
<p>
Every love story is beautiful,
but ours is my favourite.
</p>
<button onclick="document.getElementById('gallery').scrollIntoView({behavior:'smooth'})">
Start Journey ❤️
</button>
</section>
<section class="page" id="gallery">
<h1>Our Memories 📸</h1>
<div class="gallery">
<img src="1.jpg" class="active">
<img src="2.jpg">
<img src<section class="page">
<h1>Our Journey ❤️</h1>
<div class="timeline">
<div class="card">
<h2>💕 First Meet</h2>
<p>The day our story began.</p>
</div>
<div class="card">
<h2>🌹 First Date</h2>
<p>A beautiful memory I'll always cherish.</p>
</div>
<div class="card">
<h2>📸 Best Memories</h2>
<p>Every picture reminds me how lucky I am.</p>
</div>
<div class="card">
<h2>💍 Forever</h2>
<p>Many more anniversaries together.</p>
</div>
</div>
</section>
<section class="page">
<h1>🎁 Surprise</h1>
<button onclick="showGift()">
Open Gift ❤️
</button>
<div id="gift">
<h2>I Love You Forever ❤️</h2>
<p>
Thank you for being the best part of my life.
No matter where life takes us,
my heart will always belong to you.
Happy Anniversary My Love ❤️
</p>
</div>
</section>
<section class="page">
<h1>⏳ Days Together</h1>
<h2 id="counter"></h2>
</section>
<script>
const text=`Happy Anniversary ❤️
Every day with you is my favourite day.
Thank you for your love,
your care,
your smile,
and every beautiful memory.
I promise to stay with you forever.
I Love You ❤️`;
let i=0;
function typing(){
if(i<text.length){
document.getElementById("letter").innerHTML+=text.charAt(i);function updateCounter(){
const start=new Date("2024-07-10"); // Change to your anniversary date
const now=new Date();
const diff=now-start;
const days=Math.floor(diff/(1000*60*60*24));
document.getElementById("counter").innerHTML=days+" Days Together ❤️";
}
updateCounter();
setInterval(updateCounter,1000);
function createHeart(){
const heart=document.createElement("div");
heart.className="heart";
heart.innerHTML="❤️";
heart.style.left=Math.random()*100+"vw";
heart.style.fontSize=(15+Math.random()*25)+"px";
heart.style.animationDuration=(4+Math.random()*4)+"s";
document.body.appendChild(heart);
setTimeout(()=>{
heart.remove();
},8000);
}
setInterval(createHeart,300);
</script>
</body>
</html>const start=new Date("2024-07-10");Landing Page
Loading...
Network Timeline
Performance Summary
3
Requests
1
Domains
4KB
Transfer Size
5KB
Content Size
159.0ms
Dom Content Loaded
192.0ms
First Paint
161.0ms
Load Time
Domain Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...
Timings (ms)
Loading...
Total Time
Loading...
Content Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...