<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A beautiful Valentine's Day celebration with love, animations, and heartfelt messages">
<title>Happy Valentine's Day 2026 💕</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<!-- Floating Hearts Background -->
<div class="hearts-container" id="heartsContainer"></div>
<!-- Particle Canvas -->
<canvas id="particleCanvas"></canvas>
<!-- Navigation -->
<nav class="navbar">
<div class="nav-container">
<a href="#home" class="nav-logo">💕 Valentine 2026</a>
<ul class="nav-menu">
<li><a href="#home" class="nav-link">Home</a></li>
<li><a href="#countdown" class="nav-link">Countdown</a></li>
<li><a href="#memories" class="nav-link">Memories</a></li>
<li><a href="#message" class="nav-link">Message</a></li>
</ul>
</div>
</nav>
<!-- Hero Section -->
<section id="home" class="hero">
<div class="hero-content">
<h1 class="hero-title animate-fade-in">
<span class="title-line">Happy</span>
<span class="title-line title-highlight">Valentine's Day</span>
</h1>
<p class="hero-subtitle animate-fade-in-delay">
Celebrating love, joy, and beautiful moments together
</p>
<div class="hero-buttons animate-fade-in-delay-2">
<a href="#message" class="btn btn-primary">Read Love Letter</a>
<a href="#memories" class="btn btn-secondary">View Memories</a>
</div>
</div>
<div class="hero-decoration">
<div class="heart-large pulse">❤️</div>
</div>
</section>
<!-- Countdown Section -->
<section id="countdown" class="countdown-section">
<div class="container">
<h2 class="section-title reveal-on-scroll">Time Until Valentine's Day</h2>
<div class="countdown-container reveal-on-scroll">
<div class="countdown-item glass-card">
<div class="countdown-value" id="days">00</div>
<div class="countdown-label">Days</div>
</div>
<div class="countdown-item glass-card">
<div class="countdown-value" id="hours">00</div>
<div class="countdown-label">Hours</div>
</div>
<div class="countdown-item glass-card">
<div class="countdown-value" id="minutes">00</div>
<div class="countdown-label">Minutes</div>
</div>
<div class="countdown-item glass-card">
<div class="countdown-value" id="seconds">00</div>
<div class="countdown-label">Seconds</div>
</div>
</div>
</div>
</section>
<!-- Love Quotes Section -->
<section class="quotes-section">
<div class="container">
<div class="quote-card glass-card reveal-on-scroll">
<div class="quote-icon">💌</div>
<blockquote class="quote-text">
"Love is not just looking at each other, it's looking in the same direction together."
</blockquote>
<cite class="quote-author">— Antoine de Saint-Exupéry</cite>
</div>
</div>
</section>
<!-- Memories Gallery Section -->
<section id="memories" class="memories-section">
<div class="container">
<h2 class="section-title reveal-on-scroll">Our Beautiful Memories</h2>
<p class="section-subtitle reveal-on-scroll">Moments that make our hearts flutter</p>
<div class="gallery-grid">
<div class="gallery-item glass-card reveal-on-scroll">
<div class="gallery-image">
<div class="image-placeholder" style="background-image: url('../images/pexels-pengwhan-1767434.jpg');">
<span class="placeholder-text">First Date</span>
</div>
</div>
<div class="gallery-caption">
<h3>First Date</h3>
<p>Where it all began</p>
</div>
</div>
<div class="gallery-item glass-card reveal-on-scroll">
<div class="gallery-image">
<div class="image-placeholder" style="background-image: url('../images/pexels-pixabay-258421.jpg');">
<span class="placeholder-text">Special Moment</span>
</div>
</div>
<div class="gallery-caption">
<h3>Special Moment</h3>
<p>A day to remember</p>
</div>
</div>
<div class="gallery-item glass-card reveal-on-scroll">
<div class="gallery-image">
<div class="image-placeholder" style="background-image: url('../images/pexels-pixabay-326612.jpg');">
<span class="placeholder-text">Together</span>
</div>
</div>
<div class="gallery-caption">
<h3>Together Forever</h3>
<p>Our favorite place</p>
</div>
</div>
<div class="gallery-item glass-card reveal-on-scroll">
<div class="gallery-image">
<div class="image-placeholder" style="background-image: url('../images/pexels-visoesdomundo-2494701.jpg');">
<span class="placeholder-text">Celebration</span>
</div>
</div>
<div class="gallery-caption">
<h3>Celebration</h3>
<p>Making memories</p>
</div>
</div>
</div>
</div>
</section>
<!-- Love Message Section -->
<section id="message" class="message-section">
<div class="container">
<div class="message-card glass-card reveal-on-scroll">
<div class="message-header">
<h2 class="message-title">A Letter From My Heart</h2>
<div class="heart-divider">
<span>💕</span>
</div>
</div>
<div class="message-content">
<p class="typewriter" id="loveMessage"></p>
</div>
<div class="message-signature">
<p>With all my love,</p>
<p class="signature-name">Your Valentine 💖</p>
</div>
</div>
</div>
</section>
<!-- Interactive Section -->
<section class="interactive-section">
<div class="container">
<h2 class="section-title reveal-on-scroll">Send Your Love</h2>
<div class="love-button-container reveal-on-scroll">
<button class="love-button" id="loveButton">
<span class="button-heart">❤️</span>
<span class="button-text">Click to Send Love</span>
</button>
<div class="love-counter">
<span id="loveCount">0</span> loves sent
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<div class="footer-content">
<p class="footer-text">Made with 💖 for Valentine's Day 2026</p>
<p class="footer-subtext">Every moment with you is a treasure</p>
</div>
<div class="footer-hearts">
<span class="footer-heart">💕</span>
<span class="footer-heart">💖</span>
<span class="footer-heart">💗</span>
<span class="footer-heart">💓</span>
<span class="footer-heart">💝</span>
</div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>