Project by – @shobhit_dev_
Scroll Down to download project files 👇
Let’s create a Valentine’s Day Book using HTML, CSS, and JavaScript. This project will feature a digital book with a Valentine’s Day theme, where users can flip through pages, creating a charming experience perfect for the occasion.
We’ll use HTML to structure the book, CSS to style it with a romantic theme, and JavaScript to add interactive functionality for flipping through the pages.
Let’s dive into building the Valentine’s Day Book. Whether you’re a beginner or an experienced developer, this project offers a fun way to practice your web development skills while creating something special for the holiday. Let’s spread the love through code!
HTML :
This is a love-themed login page with a stylish, animated design. It has a gradient pink background, a glassmorphic login form, and falling heart emojis for a romantic feel. Users enter their name, and if it matches the secret code (“Shobhit”), they are redirected to another page; otherwise, a playful rejection message appears. The form uses smooth animations, hover effects, and input styling to enhance the experience. JavaScript handles the login logic and creates a continuous falling heart effect for visual appeal.
Index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Love Login by shobhit</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(135deg, #ff758c, #ff7eb3);
font-family: 'Poppins', sans-serif;
overflow: hidden; /* Prevent scrolling */
position: relative; /* Needed for absolute positioning of emojis */
}
#login-form {
background: rgba(255, 255, 255, 0.2);
padding: 30px 40px;
border-radius: 15px;
backdrop-filter: blur(10px);
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
text-align: center;
animation: fadeIn 1s ease-in-out;
position: relative;
z-index: 10; /* Ensure form stays on top */
}
label {
font-size: 20px;
color: white;
font-weight: 600;
margin-bottom: 10px;
}
input {
width: 100%;
padding: 15px;
margin: 10px 0;
border: none;
border-radius: 12px;
font-size: 18px;
text-align: center;
background: rgba(255, 255, 255, 0.7);
color: #333;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transition: background 0.3s ease;
}
input:focus {
background: rgba(255, 255, 255, 0.9);
outline: none;
box-shadow: 0 0 8px rgba(255, 77, 121, 0.7);
}
button {
background: #ff4d79;
color: white;
border: none;
padding: 12px 25px;
font-size: 20px;
border-radius: 8px;
cursor: pointer;
transition: 0.3s;
margin-top: 15px;
}
button:hover {
background: #ff2357;
transform: scale(1.1);
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(-20px); }
to { opacity: 1; transform: translateY(0); }
}
/* Falling emoji animation */
.falling-emoji {
position: absolute;
font-size: 2em;
top: -50px;
animation: fall linear infinite;
}
@keyframes fall {
from { transform: translateY(-50px); }
to { transform: translateY(100vh); }
}
</style>
</head>
<body>
<form id="login-form">
<label for="code">Enter Your Name:</label>
<input type="text" id="code" name="code" placeholder="Your Name">
<button id="submit-btn">Login</button>
</form>
<div id="result"></div>
<script>
const form = document.getElementById('login-form');
const codeInput = document.getElementById('code');
const submitBtn = document.getElementById('submit-btn');
const resultDiv = document.getElementById('result');
const secretCode = 'Shobhit'; // Replace with your secret code
const nextPageUrl = 'main.html'; // Replace with the URL of the new page
form.addEventListener('submit', (e) => {
e.preventDefault();
const userInput = codeInput.value.trim();
if (userInput === secretCode) {
resultDiv.innerHTML = 'Baby';
window.location.href = nextPageUrl; // Redirect to new page
} else {
resultDiv.innerHTML = 'Naa Tum meri baby nhi hoo kon hooo tum kaha hai meri Shobhit';
}
});
// Function to create falling emojis
function createFallingEmoji() {
const emojis = ['❤️', '💖', '💘', '💕', '💞', '💓', '💗', '😍'];
const emoji = document.createElement('div');
emoji.classList.add('falling-emoji');
emoji.innerText = emojis[Math.floor(Math.random() * emojis.length)];
emoji.style.left = Math.random() * 100 + 'vw'; // Random horizontal position
emoji.style.animationDuration = (Math.random() * 3 + 2) + 's'; // Random speed for fall
document.body.appendChild(emoji);
setTimeout(() => emoji.remove(), 5000); // Remove emoji after it falls
}
// Generate falling emojis every 500ms
setInterval(createFallingEmoji, 500);
</script>
</body>
</html>
HTML :
This is a visually appealing book-loading page with a romantic theme. It features a gradient pink background, a glowing progress bar that fills up in 3 seconds, and a pulsating heart animation. Falling heart emojis continuously appear for added effect. The page includes a “NEXT” button that redirects users to another page (book.html). Smooth animations, soft shadows, and glassmorphic elements enhance the aesthetic, creating an engaging and warm user experience.
Main.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loading Books by shobhit...</title>
<style>
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(135deg, #ffdde1, #ee9ca7);
font-family: 'Poppins', sans-serif;
color: #fff;
flex-direction: column;
overflow: hidden;
position: relative;
}
.container {
text-align: center;
position: relative;
padding: 20px;
border: 5px solid white;
border-radius: 15px;
background: rgba(255, 255, 255, 0.2);
box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}
.loading-text {
font-size: 2em;
font-weight: bold;
background: rgba(255, 255, 255, 0.3);
padding: 15px 30px;
border-radius: 15px;
backdrop-filter: blur(10px);
box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}
.subtext {
font-size: 1em;
margin-top: 10px;
opacity: 0.8;
}
.progress-bar {
width: 200px;
height: 10px;
background: rgba(255, 255, 255, 0.3);
border-radius: 50px;
overflow: hidden;
margin: 20px auto;
position: relative;
}
.progress {
width: 0%;
height: 100%;
background: #ff4d6d;
border-radius: 50px;
animation: load 3s ease-in-out forwards;
}
@keyframes load {
0% { width: 0%; }
100% { width: 100%; }
}
.heart {
width: 80px;
height: 80px;
margin-top: 20px;
animation: heartbeat 1.5s infinite ease-in-out;
}
@keyframes heartbeat {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.2); }
}
.next-btn {
background: rgba(255, 255, 255, 0.3);
border: none;
padding: 12px 25px;
color: white;
font-size: 1em;
cursor: pointer;
border-radius: 50px;
transition: all 0.3s ease-in-out;
box-shadow: 0 4px 10px rgba(255, 255, 255, 0.3);
margin-top: 20px;
backdrop-filter: blur(10px);
}
.next-btn:hover {
background: rgba(255, 255, 255, 0.5);
transform: scale(1.1);
}
.emoji {
position: absolute;
font-size: 2em;
top: -50px;
animation: fall linear infinite;
}
@keyframes fall {
from { transform: translateY(-50px); }
to { transform: translateY(100vh); }
}
.subtext {
font-size: 1em;
margin-top: 10px;
opacity: 0.8;
color: #333; /* Changed text color to a darker shade */
}
.loading-text {
font-size: 2em;
font-weight: bold;
background: linear-gradient(135deg, #ff4d6d, #ff7f7f); /* Changed the background to a reddish gradient */
padding: 15px 30px;
border-radius: 15px;
backdrop-filter: blur(10px);
box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
color: white; /* Changed text color to white for better contrast */
}
.next-btn {
background: linear-gradient(135deg, #ff4d6d, #ff7f7f);
border: none;
padding: 12px 25px;
color: white;
font-size: 1em;
cursor: pointer;
border-radius: 50px;
transition: all 0.3s ease-in-out;
box-shadow: 0 4px 10px rgba(255, 255, 255, 0.3);
margin-top: 20px;
backdrop-filter: blur(10px);
}
.next-btn:hover {
background: linear-gradient(135deg, #ff7f7f, #ff4d6d);
transform: scale(1.1);
}
</style>
</head>
<body>
<div class="container">
<div class="loading-text">Loading Book...</div>
<div class="subtext">Get ready for the cutest moment! 💖</div>
<div class="progress-bar">
<div class="progress"></div>
</div>
<img class="heart" src="https://static.vecteezy.com/system/resources/thumbnails/017/419/333/small/3d-illustration-of-a-shiny-heart-symbol-of-love-and-romance-png.png" alt="Heart">
<button class="next-btn" onclick="window.location.href='book.html'">NEXT →</button>
</div>
<script>
function createEmoji() {
const emojiArray = ['❤️', '💖', '💘', '💕', '💞', '💓', '💗', '😍'];
const emoji = document.createElement('div');
emoji.classList.add('emoji');
emoji.innerText = emojiArray[Math.floor(Math.random() * emojiArray.length)];
emoji.style.left = Math.random() * window.innerWidth + 'px';
emoji.style.animationDuration = (Math.random() * 3 + 2) + 's';
document.body.appendChild(emoji);
setTimeout(() => emoji.remove(), 5000);
}
setInterval(createEmoji, 500);
</script>
</body>
</html>
HTML :
This HTML and CSS code creates an interactive 3D flipbook with a heartfelt message. It features a visually appealing book animation with pages that turn smoothly, a gradient-animated background, and floating emoji effects for a dynamic experience. Each page contains a beautifully written message about appreciation, admiration, and personal connection, complemented by images. The design uses CSS properties like perspective, transform-style, and rotate for the flipping effect, along with animations for background and emojis to enhance engagement.
Book.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Message by Shobhit Dev</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
display: flex;
min-height: 100dvh;
perspective: 1000px;
font: 1em/1.4 "Poppins", sans-serif;
overflow: hidden;
color: hsl(180 68% 5%);
background-image: radial-gradient(
circle farthest-corner at 50% 50%,
hsl(187 20% 88%) 30%,
hsl(149 20% 94%) 100%
);
}
.book {
position: relative;
display: flex;
margin: auto;
width: 42cqmin; /* Increased width */
pointer-events: none;
transform-style: preserve-3d;
transition: translate 1s;
translate: calc(min(var(--c), 1) * 50%) 0%;
rotate: 1 0 0 30deg;
}
.page {
--thickness: 4;
flex: none;
display: flex;
width: 100%;
font-size: 2.2cqmin; /* Slightly increased font size */
pointer-events: all;
user-select: none;
transform-style: preserve-3d;
transform-origin: left center;
transition: transform 1s,
rotate 1s ease-in calc((min(var(--i), var(--c)) - max(var(--i), var(--c))) * 50ms);
translate: calc(var(--i) * -100%) 0px 0px;
transform: translateZ(calc((var(--c) - var(--i) - 0.5) * calc(var(--thickness) * 0.23cqmin)));
rotate: 0 1 0 calc(clamp(0, var(--c) - var(--i), 1) * -180deg);
}
.front,
.back {
position: relative;
flex: none;
width: 100%;
backface-visibility: hidden;
overflow: hidden;
background-color: #fff;
translate: 0px;
}
.back {
translate: -100% 0;
rotate: 0 1 0 180deg;
}
.book {
counter-reset: page -1;
}
.book a {
color: inherit;
}
.page {
box-shadow: 0em 0.5em 1em -0.2em #00000020;
}
.front,
.back {
display: flex;
flex-flow: column wrap;
justify-content: space-between;
padding: 2em;
border: 1px solid #0002;
}
.front:has(img),
.back:has(img) {
padding: 0;
}
.front img,
.back img {
width: 100%;
height: 100%;
object-fit: cover;
}
.front::after,
.back::after {
position: absolute;
bottom: 1em;
counter-increment: page;
content: counter(page) ".";
font-size: 0.8em;
}
.cover::after {
content: "";
}
.front::after {
right: 1em;
}
.front {
background: linear-gradient(to left, #f7f7f7 80%, #eee 100%);
border-radius: 0.1em 0.5em 0.5em 0.1em;
}
.back::after {
left: 1em;
}
.back {
background-image: linear-gradient(to right, #f7f7f7 80%, #eee 100%);
border-radius: 0.5em 0.1em 0.1em 0.5em;
}
.cover {
background: radial-gradient(
circle farthest-corner at 80% 20%,
hsl(150 80% 20% / 0.3) 0%,
hsl(170 60% 10% / 0.1) 100%
),
hsl(231, 32%, 29%) url("./cover.jpg") 50% / cover;
color: hsl(0, 100%, 30%); /* Dark red text color for cover page */
}
h1,
h2,
h3 {
margin-bottom: 1px;
color: hsl(0, 100%, 30%); /* Dark red heading color */
}
p {
margin-top: 1px;
margin-bottom: 8px;
line-height: 1.4;
color: hsl(0, 100%, 30%); /* Dark red text color for paragraphs */
}
.front,
.back {
padding: 1.5em;
color: hsl(0, 100%, 30%); /* Dark red text color for front and back pages */
}
.book {
width: 40cqmin; /* Slightly increased width */
}
.page {
font-size: 2cqmin; /* Slightly increased font size */
}
p:last-child {
margin-bottom: 0;
}
.front,
.back {
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 1.5em;
}
h2 {
margin-bottom: 5px;
}
p {
margin-top: 5px;
line-height: 1.4;
}
body {
margin: 0;
display: flex;
min-height: 100dvh;
perspective: 1000px;
font: 1em/1.4 "Poppins", sans-serif;
overflow: hidden;
color: hsl(180 68% 5%);
background: linear-gradient(to right, #ff7eb9, #ff65a3, #ff165d);
background-size: 400% 400%;
animation: gradientAnimation 10s ease infinite;
}
@keyframes gradientAnimation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
/* Emoji Animation */
.emoji {
position: absolute;
font-size: 3rem;
opacity: 0;
animation: floatEmojis 6s ease-in-out infinite;
}
@keyframes floatEmojis {
0% {
transform: translateY(100px);
opacity: 1;
}
50% {
transform: translateY(-100px) rotate(20deg);
opacity: 0.7;
}
100% {
transform: translateY(100px);
opacity: 1;
}
}
/* Add random timing for each emoji */
.emoji:nth-child(1) {
animation-delay: 0s;
left: 10%;
}
.emoji:nth-child(2) {
animation-delay: 1s;
left: 20%;
}
.emoji:nth-child(3) {
animation-delay: 2s;
left: 30%;
}
.emoji:nth-child(4) {
animation-delay: 3s;
left: 40%;
}
.emoji:nth-child(5) {
animation-delay: 4s;
left: 50%;
}
.emoji:nth-child(6) {
animation-delay: 5s;
left: 60%;
}
.emoji:nth-child(7) {
animation-delay: 6s;
left: 70%;
}
.emoji:nth-child(8) {
animation-delay: 7s;
left: 80%;
}
.emoji:nth-child(9) {
animation-delay: 8s;
left: 90%;
}
</style>
</head>
<body>
<div class="book">
<div class="page">
<div class="front cover">
<h1
style="
color: rgb(255, 255, 255);
text-shadow: 5px 2px 5px rgb(0, 0, 0);
"
>
A Message for You🤍
</h1>
<p
style="
color: rgb(255, 255, 255);
text-shadow: 5px 2px 5px rgb(0, 0, 0);
"
>
2025.<br />SHOBHIT Special Edition
</p>
</div>
<div class="back">
<h2>A Special Beginning ❤️✨</h2>
<p>Some people come into our lives unexpectedly, yet leave a lasting impact. You are one of those rare souls who make every moment feel a little more special.
From the very first conversation, something about you stood out—your kindness, your charm, and the effortless way you make the world around you brighter.
This isn’t just a collection of words; it’s a small way of showing how much you mean to me. A way to remind you that you are appreciated, admired, and truly special.
So, here’s to us—our conversations, our connection, and the beautiful moments yet to come. 💖</p>
<p>
Play Video Before Start Reading... <br />Since we connect in
Instagram on January 8th, 2021, ....
</p>
</div>
</div>
<!--2nd page-->
<div class="page">
<div class="front">
<h2>From Strangers to Something Special ❤️✨</h2>
<p>
It’s incredible to think how, just a few days ago, I didn’t even know you. Meeting you through [platform] was a moment of fate that I’ll always be grateful for.
At first, I wasn’t sure how we’d connect, what we’d talk about, or what kind of person you’d be. But now, after spending time with you, I’ve realized something truly special—
You’re absolutely amazing. 💖
Your words, your kindness, and the way you make me smile have already made a place in my heart. I never expected to meet someone like you, but now, I can’t imagine not having you in my life.
Maybe it was destiny, or maybe it was just luck—but whatever it was, I’m glad it brought me to you. 💕
</p>
</div>
<div class="back">
<img src="./1.jpg" alt="Img 1" />
</div>
</div>
<!--3rd page-->
<div class="page">
<div class="front">
<h2>The Magic of You ✨💖</h2>
<p>
There’s a charm about you, a beauty that words can hardly capture. It’s in the sparkle of your eyes, the warmth of your smile, and the effortless way you light up every moment. Every little thing about you feels so perfect, so mesmerizing, that I often wonder—
Were you crafted as a masterpiece?
It’s as if the universe took its time, carefully shaping someone as wonderful as you, just to make the world a little brighter. And trust me, you do. Every single day. 💕
Your presence feels like a soft melody, soothing yet unforgettable. The way you carry yourself, the kindness in your heart, and the purity in your soul make you even more special. It’s not just about how beautiful you look—it’s about how beautiful you truly are.
Every time I see you, I’m reminded that some things in life are simply magical, and you, without a doubt, are one of them. ✨💖
</p>
</div>
<div class="back">
<h2>The Strength Within You 💫✨</h2>
<p>
Beyond your beauty, what truly stands out is your dedication, hard work, and passion. You’re not just someone to admire for how you look—you’re an inspiration. The way you stay focused, chase your dreams, and give your best in everything makes me respect you even more.
You are a true leader.
Your confidence, kindness, and strength set you apart. You don’t just follow a path—you create one. Seeing your determination reminds me that true beauty isn’t just about appearance, but about the fire within you. And that’s what makes you truly incredible. 💖✨
No challenge is too big for you, and no goal is out of reach. You inspire those around you to be better, to dream bigger, and to believe in themselves. Watching you grow and achieve so much makes me proud to know you. 🌟
</p>
</div>
</div>
<!--4th page-->
<div class="page">
<div class="front">
<h2>The Best Part of My Day🤞💖</h2>
<p>
Talking to you has quickly become one of the highlights of my day. Every time I see a message from you, I can’t help but smile—it’s like a little spark of happiness. No matter how my day is going, our conversations make everything feel lighter and brighter.
You have a way of making the simplest moments special.
It’s not just about how beautiful you are; it’s the warmth, kindness, and charm in the way you talk. Your words have a magic that makes me feel at ease, and your presence alone brings joy.
I never knew a conversation could mean so much, but with you, it does. 💕
</p>
</div>
<div class="back">
<img src="./2.jpg" alt="Img 1" />
</div>
</div>
<!--5th page-->
<div class="page">
<div class="front">
<h1>A Wish from the Heart 💫💖</h1>
<p>
Sometimes, I find myself wishing I could meet you in person, just to see the smile that brightens my day and hear the voice that makes everything feel lighter. Maybe it’s a long shot, but the thought still lingers.
Even though we’ve only known each other for a short time, I hope you won’t forget me. Our moments, our conversations—they mean more to me than you might realize.
No matter what happens, I truly wish you a life filled with happiness, peace, and everything you deserve. 💕
You are someone special, and I hope life gives you endless reasons to smile. No matter where we go from here, I’ll always be grateful for the time we’ve shared. And if fate ever allows, maybe one day our paths will cross for real. ✨
</p>
</div>
<div class="back">
<h1>Always Here for You 💖✨</h1>
<p>
You are an inspiration, and I want you to know that I’ll always be here for you, no matter what. If you ever need anything—someone to listen, someone to support you, or just someone to make you smile—I’m just a message away.
My time is yours whenever you need it.
Life can be unpredictable, but I hope you never feel alone. Whether it’s a good day or a tough one, I’ll always be here to cheer you on, to remind you how amazing you are.
You deserve nothing but happiness, and if I can be a small part of that, I’d be honored. No matter where life takes us, just know that you’ll always have someone who cares—someone who truly believes in you. 💕
</p>
</div>
</div>
<!--6th page-->
<div class="page">
<div class="front">
<h2>The Beauty of You ✨💖</h2>
<p>
Can we take a moment to appreciate how effortlessly stunning you look in anything you wear? It’s not just the clothes—it’s the confidence, the grace, and the way you carry yourself that make you truly unforgettable.
You have a presence that turns heads and a charm that captivates hearts.
There’s something about you that draws people in—maybe it’s your elegance, your warmth, or just the way you light up any room you walk into. Whatever it is, it’s undeniable, and it makes you absolutely perfect in every way.
But beyond your beauty, it’s your kindness and the way you make others feel special that truly set you apart. You radiate positivity, and your energy is something rare and precious.
No matter where you are or what you do, you leave a lasting impression. You are not just beautiful—you are extraordinary. 💖✨
</p>
</div>
<div class="back">
<h2>Absolutely Breathtaking ✨💖</h2>
<p>
In everything you wear, you are nothing short of breathtaking. It’s not just about your looks—it’s the way you carry yourself with such confidence and grace that makes you truly mesmerizing.
I’m completely in awe of you.
Your presence alone can brighten any space, and your energy is simply magnetic. The way you move, the way you smile, and the way you make others feel at ease—it’s all part of your undeniable charm.
You don’t just turn heads; you leave lasting impressions. There’s something so effortlessly captivating about you that makes it impossible to look away.
You are not just beautiful—you are a work of art, inside and out. 💕✨
</p>
</div>
</div>
<!--7th page-->
<div class="page">
<div class="front">
<h2>Grateful for You🌹❤</h2>
<p>
I just wanted to take a moment to let you know how much I appreciate you. From the very start, you’ve been someone truly special—someone I admire more than words can express.
Meeting you, even for a short time, has been a gift.
Your kindness, your presence, and the way you make every conversation feel meaningful mean more to me than you know. I’m grateful that our paths crossed, and no matter what the future holds, I’ll always be thankful for you.
Some people leave a mark on our hearts without even trying—and you are one of them. 💕
</p>
</div>
<div class="back">
<h2>Will You Be Mine? ❤️✨</h2>
<p>From the moment we started talking, you’ve been on my mind in the best way possible. Your kindness, your beauty, your energy—everything about you feels so special to me.
You make my world brighter, my days better, and my heart a little fuller.
I don’t know what the future holds, but I do know one thing—I’d love to have you by my side. So, here’s my question, straight from the heart…
Will you be mine? 💖💕 </p>
</div>
</div>
<div class="page">
<div class="front">
<img src="./4.png" alt="Img 1" />
</div>
<div class="back cover">
<h3>Cutest Queen</h3>
<p>
Content:By SHOBHIT DEV<br /><a
href=""
target="_blank"
rel="nofollow"></a>
<br />
</p>
</div>
</div>
</div>
<div class="emoji">❤️🔥</div>
<div class="emoji">🫶🏻</div>
<div class="emoji">❤️</div>
<div class="emoji">😘</div>
<div class="emoji">👨❤️💋👨</div>
<div class="emoji">💓</div>
<div class="emoji">❣️</div>
<div class="emoji">💘</div>
<div class="emoji">💖</div>
<div class="emoji">💙</div>
<div class="emoji">💚</div>
<div class="emoji">🥰</div>
<div class="emoji">💗</div>
<script>
const flipBook = (elBook) => {
elBook.style.setProperty("--c", 0); // Set current page
elBook.querySelectorAll(".page").forEach((page, idx) => {
page.style.setProperty("--i", idx);
page.addEventListener("click", (evt) => {
if (evt.target.closest("a")) return;
const curr = evt.target.closest(".back") ? idx : idx + 1;
elBook.style.setProperty("--c", curr);
});
});
};
document.querySelectorAll(".book").forEach(flipBook);
</script>
</body>
</html>
JavaScript:
This code handles a login form where users enter a secret code. If the entered code matches 'Sona', it displays 'Baby' and redirects to main.html. Otherwise, it shows a message saying the user is not the correct person. The form submission is prevented from its default behavior using e.preventDefault().
const form = document.getElementById('login-form');
const codeInput = document.getElementById('code');
const submitBtn = document.getElementById('submit-btn');
const resultDiv = document.getElementById('result');
const secretCode = 'Sona'; // Replace with your secret code
const nextPageUrl = 'main.html'; // Replace with the URL of the new page
form.addEventListener('submit', (e) => {
e.preventDefault();
const userInput = codeInput.value.trim();
if (userInput === secretCode) {
resultDiv.innerHTML = 'Baby';
window.location.href = nextPageUrl; // Redirect to new page
} else {
resultDiv.innerHTML = 'Naa Tum meri baby nhi hoo kon hooo tum kaha hai meri sona';
}
});
In conclusion, creating the Valentine’s Day Book using HTML, CSS, and JavaScript has been a delightful project. By combining HTML for structure, CSS for styling, and JavaScript for interactive functionality, we’ve crafted a charming and interactive book experience that brings the romantic theme of Valentine’s Day to life.
If your project has problems, don’t worry. Just click to download the source code and face your coding challenges with excitement. Have fun coding!
