Scribd
Upload
5 views14 pages

HTML

This document contains an HTML and CSS code for a Valentine's Day themed webpage featuring a welcome message, a love letter, a photo gallery, and a playlist of love songs. The webpage includes animated falling hearts and a responsive design for different screen sizes. The content is organized into sections with navigation links for easy access to each part.

Uploaded by

Abhishek Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views14 pages

HTML

This document contains an HTML and CSS code for a Valentine's Day themed webpage featuring a welcome message, a love letter, a photo gallery, and a playlist of love songs. The webpage includes animated falling hearts and a responsive design for different screen sizes. The content is organized into sections with navigation links for easy access to each part.

Uploaded by

Abhishek Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

HTML

<!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 Special</title>

<link rel="stylesheet" href="valentine.css">

</head>

<body>

<div class="hearts-container">

<div class="heart"> </div>

<div class="heart"> </div>

<div class="heart"> </div>

<div class="heart"> </div>

<div class="heart"> </div>

<div class="heart"> </div>

<div class="heart"> </div>

<div class="heart"> </div>

<div class="heart"> </div>

<div class="heart"> </div>

<div class="heart"> </div>

<div class="heart"> </div>

<div class="heart"> </div>

<div class="heart"> </div>

<div class="heart"> </div>


</div>

<div class="content">

<nav class="menu">

<a href="#welcome" class="active">Welcome</a>

<a href="#letter">Love Letter</a>

<a href="#gallery">Memories</a>

<a href="#playlist">Our Songs</a>

</nav>

<section id="welcome" class="page active">

<div class="card">

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

<p>I have something special for you...</p>

<div class="big-heart"> </div>

</div>

</section>

<section id="letter" class="page">

<div class="card letter">

<div class="envelope">

<div class="letter-content">

<h2>My Dearest Valentine,</h2>

<p>On this special day, I want to tell you how much you mean to me. Your love fills my
heart with joy and makes every day brighter. You're not just my valentine, you're my best friend, my
confident, and my soulmate.</p>

<p>Thank you for being you, and for choosing to share your life with me. I love you
more with each passing day.</p>
<p class="signature">Forever Yours,<br>Me </p>

</div>

</div>

</div>

</section>

<section id="gallery" class="page">

<div class="card gallery">

<div class="photo-grid">

<img src="https://plus.unsplash.com/premium_photo-1670601070125-
a0f3c2862d1d?w=500&auto=format&fit=crop&q=60&ixlib=rb-
4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8aW1hZ2UlMjBvZiUyMGElMjBiZWF1dGlmdWwlMjB
waW5rJTIwcm9zZSUyMGluJTIwdmVzc2VsfGVufDB8fDB8fHww" alt="Memory 1">

<img src="https://images.unsplash.com/photo-1523438885200-e635ba2c371e?w=600"
alt="Memory 2">

<img src="https://images.unsplash.com/photo-1516589178581-6cd7833ae3b2?w=600"
alt="Memory 3">

<img src="https://media.istockphoto.com/id/2171284151/photo/a-couple-enjoys-a-
joyful-moment-together-on-a-serene-autumn-
day.jpg?s=612x612&w=0&k=20&c=7jTDSb03hZ5aPzvTWm4KIU9Lkn_sgdJtWPnNPWbOXCQ="
alt="Memory 4">

<img src="https://images.unsplash.com/photo-1453230645768-
7ecb0653013d?w=500&auto=format&fit=crop&q=60&ixlib=rb-
4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTl8fHBpY3R1cmUlMjBvZiUyMGElMjBjb3VwbGUlMjBza
XR0aW5nJTIwbG9uZWx5fGVufDB8fDB8fHww" alt="Memory 5">

<img src="https://images.unsplash.com/photo-1518199266791-5375a83190b7?w=600"
alt="Memory 6">

</div>

</div>

</section>

<section id="playlist" class="page">


<div class="card">

<h2>Our Love Songs </h2>

<div class="song-list">

<div class="song">Ishq Hai - Anurag Saikia</div>

<div class="song">Die with a smile - Bruno Mars</div>

<div class="song">Dekha Hazaro Daffa aapko - Arijit Singh</div>

<div class="song">Until I Found You - Stephen Sanchez</div>

<div class="song">Infinity - Jaymes Young</div>

<div class="song">Perfect - Ed Sheeran</div>

</div>

</div>

</section>

</div>

</body>

</html>

CSS

*{

margin: 0;

padding: 0;

box-sizing: border-box;

body {

min-height: 100vh;

background: linear-gradient(135deg, #ffd1dc, #ff9eaa, #ff748c);

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,


sans-serif;
overflow-x: hidden;

position: relative;

/* Falling Hearts Animation */

.hearts-container {

position: fixed;

width: 100%;

height: 100%;

pointer-events: none;

z-index: 1;

.heart {

position: absolute;

font-size: 24px;

animation: fall linear infinite;

opacity: 0.7;

@keyframes fall {

0% {

transform: translateY(-5vh) rotate(0deg);

opacity: 1;

100% {

transform: translateY(105vh) rotate(360deg);


opacity: 0.5;

/* Generate different positions and animation durations for hearts */

.heart:nth-child(1) { left: 5%; animation-duration: 3s; }

.heart:nth-child(2) { left: 15%; animation-duration: 4s; animation-delay: 1s; }

.heart:nth-child(3) { left: 25%; animation-duration: 3.5s; animation-delay: 2s; }

.heart:nth-child(4) { left: 35%; animation-duration: 4.5s; animation-delay: 0.5s; }

.heart:nth-child(5) { left: 45%; animation-duration: 3s; animation-delay: 1.5s; }

.heart:nth-child(6) { left: 55%; animation-duration: 4s; animation-delay: 2.5s; }

.heart:nth-child(7) { left: 65%; animation-duration: 3.5s; animation-delay: 0.2s; }

.heart:nth-child(8) { left: 75%; animation-duration: 4.5s; animation-delay: 1.8s; }

.heart:nth-child(9) { left: 85%; animation-duration: 3s; animation-delay: 0.8s; }

.heart:nth-child(10) { left: 95%; animation-duration: 4s; animation-delay: 2.2s; }

.heart:nth-child(11) { left: 10%; animation-duration: 3.5s; animation-delay: 1.2s; }

.heart:nth-child(12) { left: 20%; animation-duration: 4.5s; animation-delay: 2.8s; }

.heart:nth-child(13) { left: 30%; animation-duration: 3s; animation-delay: 0.4s; }

.heart:nth-child(14) { left: 40%; animation-duration: 4s; animation-delay: 1.6s; }

.heart:nth-child(15) { left: 50%; animation-duration: 3.5s; animation-delay: 2.4s; }

/* Content Styles */

.content {

position: relative;

z-index: 2;

min-height: 100vh;

display: flex;
flex-direction: column;

align-items: center;

padding: 2rem;

/* Navigation Menu */

.menu {

background: rgba(255, 255, 255, 0.9);

padding: 1rem;

border-radius: 50px;

margin-bottom: 2rem;

backdrop-filter: blur(10px);

box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

.menu a {

color: #ff4b6e;

text-decoration: none;

padding: 0.5rem 1.5rem;

margin: 0 0.5rem;

border-radius: 25px;

transition: all 0.3s ease;

.menu a:hover {

background: #ff4b6e;

color: white;
}

.menu a.active {

background: #ff4b6e;

color: white;

/* Card Styles */

.card {

background: rgba(255, 255, 255, 0.9);

padding: 2rem;

border-radius: 20px;

box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);

max-width: 800px;

width: 100%;

margin: 0 auto;

backdrop-filter: blur(10px);

text-align: center;

h1 {

color: #ff4b6e;

font-size: 2.5rem;

margin-bottom: 1rem;

h2 {
color: #ff4b6e;

font-size: 2rem;

margin-bottom: 1.5rem;

p{

color: #666;

line-height: 1.6;

margin-bottom: 1rem;

.big-heart {

font-size: 5rem;

animation: pulse 1.5s infinite;

@keyframes pulse {

0% { transform: scale(1); }

50% { transform: scale(1.1); }

100% { transform: scale(1); }

/* Letter Styles */

.letter {

cursor: pointer;

transition: transform 0.3s ease;

}
.envelope {

background: #fff;

padding: 2rem;

border-radius: 10px;

box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);

transform-origin: center;

transition: transform 0.5s ease;

.letter:hover .envelope {

transform: scale(1.02);

.letter-content {

text-align: left;

.signature {

text-align: right;

font-style: italic;

margin-top: 2rem;

/* Gallery Styles */

.photo-grid {

display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

gap: 1rem;

margin-top: 1rem;

.photo-grid img {

width: 100%;

height: 200px;

object-fit: cover;

border-radius: 10px;

transition: transform 0.3s ease;

.photo-grid img:hover {

transform: scale(1.05);

/* Playlist Styles */

.song-list {

display: flex;

flex-direction: column;

gap: 1rem;

.song {

background: rgba(255, 255, 255, 0.8);

padding: 1rem;
border-radius: 10px;

transition: transform 0.3s ease;

.song:hover {

transform: translateX(10px);

background: rgba(255, 255, 255, 0.9);

/* Page Transitions */

.page {

display: none;

animation: fadeIn 0.5s ease;

.page.active {

display: block;

@keyframes fadeIn {

from { opacity: 0; transform: translateY(20px); }

to { opacity: 1; transform: translateY(0); }

/* Responsive Design */

@media (max-width: 768px) {

.menu {
display: flex;

flex-direction: column;

gap: 0.5rem;

width: 100%;

max-width: 300px;

.menu a {

text-align: center;

margin: 0;

.card {

padding: 1.5rem;

.photo-grid {

grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

/* Add this script to handle navigation without JavaScript */

#welcome:target,

#letter:target,

#gallery:target,

#playlist:target {

display: block;
}

#welcome:not(:target),

#letter:not(:target),

#gallery:not(:target),

#playlist:not(:target) {

display: none;

/* Show welcome page by default if no hash in URL */

#welcome:not(:target):not(:only-child) {

display: block;

You might also like