169 lines
7.7 KiB
PHP
169 lines
7.7 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>For A, With Love</title>
|
|
|
|
<!-- SEO Meta Tags -->
|
|
<meta name="description" content="<?php echo htmlspecialchars($_SERVER['PROJECT_DESCRIPTION'] ?? 'A special website for a special person.'); ?>">
|
|
<meta name="author" content="Your Name">
|
|
<meta name="keywords" content="love, romance, personal website, girlfriend">
|
|
|
|
<!-- Open Graph / Twitter Card Meta Tags (pre-populated by platform) -->
|
|
<meta property="og:title" content="For A, With Love">
|
|
<meta property="og:description" content="<?php echo htmlspecialchars($_SERVER['PROJECT_DESCRIPTION'] ?? 'A special website for a special person.'); ?>">
|
|
<meta property="og:image" content="<?php echo htmlspecialchars($_SERVER['PROJECT_IMAGE_URL'] ?? ''); ?>">
|
|
<meta property="og:url" content="<?php echo 'https://'.$_SERVER['HTTP_HOST']; ?>">
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
|
|
<!-- Bootstrap CSS -->
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
<!-- Custom CSS -->
|
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
|
|
|
<!-- Font Awesome for icons -->
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Header -->
|
|
<nav class="navbar navbar-expand-lg navbar-light bg-transparent fixed-top">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="#" style="font-family: 'Great Vibes', cursive; font-size: 1.8rem; color: #E6A4B4;">For A</a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarNav">
|
|
<ul class="navbar-nav ms-auto">
|
|
<li class="nav-item"><a class="nav-link" href="#hero">Home</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="#story">Our Story</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="#love-reasons">Why I Love You</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="#gallery">Gallery</a></li>
|
|
<li class="nav-item"><a class="nav-link" href="#messages">Messages</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Hero Section -->
|
|
<section id="hero" class="hero">
|
|
<div class="hero-text">
|
|
<h1>For A, With Love</h1>
|
|
<p>"A, this website is a small piece of my heart for you."</p>
|
|
<button id="play-music-btn" class="btn btn-outline-light mt-3"><i class="fas fa-music"></i> Play Music</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Our Story Section -->
|
|
<section id="story" class="section">
|
|
<div class="container">
|
|
<h2>Our Story</h2>
|
|
<div class="timeline">
|
|
<!-- Timeline Item Placeholder 1 -->
|
|
<div class="timeline-item">
|
|
<div class="timeline-dot"></div>
|
|
<div class="timeline-content">
|
|
<h3>[Date of a special memory]</h3>
|
|
<p>[A short description of the memory. e.g., The day we first met and how the world seemed to stop for a moment.]</p>
|
|
</div>
|
|
</div>
|
|
<!-- Timeline Item Placeholder 2 -->
|
|
<div class="timeline-item">
|
|
<div class="timeline-dot"></div>
|
|
<div class="timeline-content">
|
|
<h3>[Another key date]</h3>
|
|
<p>[Describe another beautiful moment we shared. Maybe our first trip together or a funny inside joke.]</p>
|
|
</div>
|
|
</div>
|
|
<!-- Timeline Item Placeholder 3 -->
|
|
<div class="timeline-item">
|
|
<div class="timeline-dot"></div>
|
|
<div class="timeline-content">
|
|
<h3>[Memorable event]</h3>
|
|
<p>[Talk about a challenge we overcame or a dream we shared. This is where we show our strength as a couple.]</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Why I Love You Section -->
|
|
<section id="love-reasons" class="section bg-light">
|
|
<div class="container">
|
|
<h2>Why I Love You</h2>
|
|
<div class="love-reasons-grid">
|
|
<!-- Reason Placeholder -->
|
|
<div class="reason-card">Your infectious laugh.</div>
|
|
<div class="reason-card">The way your eyes sparkle.</div>
|
|
<div class="reason-card">Your kindness to everyone.</div>
|
|
<div class="reason-card">How you always support me.</div>
|
|
<div class="reason-card">Our late-night talks.</div>
|
|
<div class="reason-card">Your passion for your dreams.</div>
|
|
<div class="reason-card">The comfort of your hugs.</div>
|
|
<div class="reason-card">Your incredible cooking.</div>
|
|
<div class="reason-card">How we can be silly together.</div>
|
|
<div class="reason-card">Your beautiful soul.</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Gallery Section -->
|
|
<section id="gallery" class="section">
|
|
<div class="container">
|
|
<h2>Gallery</h2>
|
|
<div class="gallery-grid">
|
|
<!-- Gallery Item Placeholder -->
|
|
<div class="gallery-item"><img src="https://via.placeholder.com/300x300.png/FFC0CB/fff?text=Our+Memory+1" alt="Placeholder Image"></div>
|
|
<div class="gallery-item"><img src="https://via.placeholder.com/300x300.png/F0E68C/fff?text=Our+Memory+2" alt="Placeholder Image"></div>
|
|
<div class="gallery-item"><img src="https://via.placeholder.com/300x300.png/E6A4B4/fff?text=Our+Memory+3" alt="Placeholder Image"></div>
|
|
<div class="gallery-item"><img src="https://via.placeholder.com/300x300.png/FFF5EE/333?text=Our+Memory+4" alt="Placeholder Image"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Messages for Archana Section -->
|
|
<section id="messages" class="section bg-light">
|
|
<div class="container">
|
|
<h2>A Message For You</h2>
|
|
<div class="poem">
|
|
<p>
|
|
In a world of fleeting moments,<br>
|
|
You are my constant star.<br>
|
|
With every beat of my heart,<br>
|
|
I find myself where you are.
|
|
</p>
|
|
<p>
|
|
This is just a placeholder, my love,<br>
|
|
For a thousand words I wish to say,<br>
|
|
But for now, know this to be true,<br>
|
|
I love you more each and every day.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Final Page Section -->
|
|
<section id="final" class="final-section">
|
|
<div class="container">
|
|
<h2>A, I love you more every day.</h2>
|
|
</div>
|
|
<div class="floating-hearts"></div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer>
|
|
<div class="container">
|
|
Made with <i class="fas fa-heart" style="color: #FFC0CB;"></i>, for the one who has my heart.
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Bootstrap JS Bundle -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
|
|
<!-- Custom JS -->
|
|
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
|
|
|
</body>
|
|
</html> |