Skip to content

Add initial HTML structure for Valentine page #19

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

Add initial HTML structure for Valentine page #19

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
325 changes: 325 additions & 0 deletions website
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,325 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>BE MY VALENTINE♥</title>
<link rel="stylesheet" href="styles.css">
<style>
body {
padding: 25px;
background: linear-gradient(135deg, #ffafbd, #ffc0cb);
color: #333;
font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
flex-direction: column;
position: relative;
overflow-x: hidden;
height: 100vh;
}

.title {
color: #5C6AC4;
font-family: "Playfair Display", serif;
text-align: center;
font-size: 2.5rem;
margin-bottom: 20px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
animation: glow 2s infinite alternate;
}

@keyframes glow {
from { text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #e60073, 0 0 20px #e60073; }
to { text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6; }
}

.image-container {
text-align: center;
margin: 20px 0;
max-width: 90%;
}

.wedding-image {
max-width: 100%;
height: auto;
border-radius: 15px;
box-shadow: 0 8px 16px rgba(0,0,0,0.15);
transition: transform 0.3s ease;
}

.wedding-image:hover {
transform: scale(1.05);
}

.buttons-container {
display: flex;
justify-content: center;
gap: 20px;
width: 100%;
margin-top: 30px;
padding: 0 25px;
flex-wrap: wrap;
}

.btn {
padding: 15px 30px;
font-size: 1.2rem;
border: none;
border-radius: 50px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: bold;
background-color: #333;
color: #fff;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
min-width: 120px;
flex: 1;
max-width: 180px;
}

.yes-btn {
background: linear-gradient(to right, #ff6b6b, #ff8e8e);
color: white;
}

.no-btn {
background: linear-gradient(to right, #4ecdc4, #7eddd6);
color: white;
}

.btn:hover {
transform: translateY(-5px) scale(1.05);
box-shadow: 0 8px 16px rgba(0,0,0,0.3);
}

.btn:active {
transform: translateY(0) scale(0.98);
}

.section {
display: none;
text-align: center;
padding: 30px;
margin-top: 20px;
background: rgba(255, 255, 255, 0.9);
border-radius: 15px;
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
max-width: 90%;
animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}

.active {
display: block;
}

.back-btn {
margin-top: 20px;
background: linear-gradient(to right, #5C6AC4, #7a8bc4);
color: white;
padding: 12px 24px;
}

.floating-emoji {
position: absolute;
font-size: 24px;
animation: float 15s infinite linear;
z-index: -1;
user-select: none;
}

@keyframes float {
0% {
transform: translateY(100vh) rotate(0deg);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translateY(-100px) rotate(360deg);
opacity: 0;
}
}

.name-input {
margin: 20px 0;
padding: 10px 15px;
border-radius: 50px;
border: 2px solid #5C6AC4;
font-size: 1.1rem;
width: 80%;
max-width: 300px;
text-align: center;
}

.message {
font-size: 1.2rem;
margin: 20px 0;
line-height: 1.6;
}

@media (max-width: 768px) {
.title {
font-size: 2rem;
}

.buttons-container {
flex-direction: column;
align-items: center;
gap: 15px;
}

.btn {
width: 80%;
max-width: 250px;
}

.section {
padding: 20px;
}
}

.heart {
animation: pulse 1.5s infinite;
}

@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}

.letter {
font-family: "Georgia", serif;
font-size: 1.1rem;
line-height: 1.8;
text-align: left;
max-width: 600px;
margin: 0 auto;
padding: 20px;
background: rgba(255, 255, 255, 0.8);
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.letter h3 {
color: #ff6b6b;
text-align: center;
margin-top: 0;
}

.letter p {
margin: 15px 0;
}

.letter .signature {
text-align: right;
font-style: italic;
margin-top: 30px;
}
</style>
</head>
<body>
<div class="container">
<h1 class="title">BE MY VALENTINE♥</h1>
<div class="image-container">
<img src="https://uploads.onecompiler.io/437vq7ujm/442jzbdb2/download%20(8).jpg" alt="Valentine Photo" class="wedding-image">
</div>
<div class="buttons-container">
<button class="btn yes-btn" onclick="showSection('yes-section')" aria-label="Yes, I want to be your Valentine">YES</button>
<button class="btn no-btn" onclick="showSection('no-section')" aria-label="No, I don't want to be your Valentine">NO</button>
</div>
</div>

<div id="yes-section" class="section">
<h2 class="title">YAY! I KNEW YOU'D SAY YES! ❤️</h2>
<p class="message">Thank you for being my Valentine! I'm so happy you chose to be with me.</p>
<img src="https://uploads.onecompiler.io/437vq7ujm/442jzbdb2/5bdb0e92-e0a9-47af-a8c2-62ea8df8f5e9.jpg" alt="Happy Valentine" class="wedding-image">
<br>
<button class="btn back-btn" onclick="showMainPage()">BACK</button>
</div>

<div id="no-section" class="section">
<h2 class="title">OH NO! BUT I LOVE YOU ANYWAY! ❤️</h2>
<p class="message">Even if you said no, I still want to be your Valentine. You're amazing!</p>
<img src="https://uploads.onecompiler.io/437vq7ujm/442jzbdb2/ff8e42cb-1315-4463-a826-4f77d7b95be9.jpg" alt="Sweet Valentine" class="wedding-image">
<br>
<button class="btn back-btn" onclick="showMainPage()">BACK</button>
</div>

<div id="love-letter-section" class="section">
<h2 class="title">A LOVE LETTER FOR YOU</h2>
<div class="letter">
<h3>My Dearest Valentine,</h3>
<p>Every moment with you feels like a beautiful dream. Your smile lights up my world, and your presence makes every day brighter.</p>
<p>I cherish all the memories we've created together and look forward to making more unforgettable moments.</p>
<p>You are not just my Valentine, but my best friend, my partner, and my greatest joy.</p>
<p>With all my love,</p>
<p class="signature">Your Valentine</p>
</div>
<br>
<button class="btn back-btn" onclick="showMainPage()">BACK</button>
</div>

<script>
// Create floating emojis
function createFloatingEmojis() {
const emojis = ['❤️', '💕', '💖', '💗', '💓', '💞', '💘', '💝', '💌', '💋', '🌹', '💐', '🌸', '🌺'];
const container = document.body;

for (let i = 0; i < 30; i++) {
const emoji = document.createElement('div');
emoji.className = 'floating-emoji';
emoji.textContent = emojis[Math.floor(Math.random() * emojis.length)];

// Random position
emoji.style.left = Math.random() * 100 + 'vw';
emoji.style.animationDuration = (Math.random() * 10 + 10) + 's';
emoji.style.animationDelay = Math.random() * 5 + 's';
emoji.style.fontSize = (Math.random() * 20 + 15) + 'px';
emoji.style.opacity = Math.random() * 0.7 + 0.3;

container.appendChild(emoji);
}
}

// Call the function when page loads
window.onload = createFloatingEmojis;

function showSection(sectionId) {
// Hide all sections
document.querySelectorAll('.section').forEach(section => {
section.classList.remove('active');
});

// Show the selected section
document.getElementById(sectionId).classList.add('active');

// Hide the main content (buttons and title)
document.querySelector('.container').style.display = 'none';
}

function showMainPage() {
// Hide all sections
document.querySelectorAll('.section').forEach(section => {
section.classList.remove('active');
});

// Show the main content (buttons and title)
document.querySelector('.container').style.display = 'block';
}
</script>
</body>
</html>