Skip to content

Mohit birthday wish #253

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

Open
Skg0107 wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Mohit birthday wish #253

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d895f27
updated
Sarthak-0108 Jul 20, 2025
72ef682
success
Sarthak-0108 Aug 16, 2025
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
17 changes: 8 additions & 9 deletions customize.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
{
"greeting": "Hiya",
"name": "Lydia",
"greetingText": "I really like your name btw!",
"wishText": "May the js.prototypes always be with you! ;)",
"imagePath": "img/lydia2.png",
"text1": "It's your birthday!!! :D",
"greeting": "Hi",
"name": "Mohit 👋👨‍💻",

"wishText": "May the smile on your face stay forever",
"imagePath": "img/mohit_photo.jpg",
"textInChatBox": "Happy birthday to you!! Yeee! Many many happy blah...",
"sendButtonLabel": "Send",
"text2": "That's what I was going to do.",
Expand All @@ -16,8 +15,8 @@
"smiley": ":)",
"bigTextPart1": "S",
"bigTextPart2": "O",
"wishHeading": "Happy Birthday!",
"outroText": "Okay, now come back and tell me if you liked it.",
"replayText": "Or click, if you want to watch it again.",
"wishHeading": "Happy Birthday:) :)Mohit",
"outroText": "wish you a long & happy life",
"replayText": "click here, if you want to watch it again.",
"outroSmiley": ":)"
}
Binary file added img/mohit_photo.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
271 changes: 146 additions & 125 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,133 +1,154 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Happy Birthday!!! :)</title>
<link
href="https://fonts.googleapis.com/css?family=Work+Sans:300,400"
rel="stylesheet"
/>
<link rel="shortcut icon" type="image/png" href="img/favicon.png" />
<link rel="stylesheet" href="style/style.css" />
</head>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Happy Birthday!!! :)</title>
<link href="https://fonts.googleapis.com/css?family=Work+Sans:300,400" rel="stylesheet">
<link rel="shortcut icon" type="image/png" href="img/favicon.png" />
<link rel="stylesheet" href="style/style.css">
</head>

<body>
<div class="container">
<div class="one">
<h1 class="one">
<span data-node-name="greeting">Hey</span>
<span data-node-name="name">Lydia</span>
</h1>
<p class="two" data-node-name="greetingText">I really like your name btw!</p>
</div>
<div class="three">
<p data-node-name="text1">It's your birthday!!! :D</p>
</div>
<div class="four">
<div class="text-box">
<p class="hbd-chatbox" data-node-name="textInChatBox">Happy birthday to you!! Yeee! Many many happy blah...</p>
<p class="fake-btn" data-node-name="sendButtonLabel">Send</p>
<body>
<div class="container">
<div class="one">
<h1 class="one">
<span data-node-name="greeting">Hi</span>
<span data-node-name="name">Mohit(my best friend)</span>
</h1>
<!-- <p class="two" data-node-name="greetingText">
I really like your name btw!
</p> -->
</div>
</div>
<div class="five">
<p class="idea-1" data-node-name="text2">That's what I was going to do.</p>
<p class="idea-2" data-node-name="text3">But then I stopped.</p>
<p class="idea-3">
<span data-node-name="text4">I realised, I wanted to do something</span>
<strong data-node-name="text4Adjective">special</strong>.</p>
<p class="idea-4" data-node-name="text5Entry">Because,</p>
<p class="idea-5">
<span data-node-name="text5Content">You are Special</span>
<span class="smiley" data-node-name="smiley">:)</span>
</p>
<p class="idea-6">
<span data-node-name="bigTextPart1">S</span>
<span data-node-name="bigTextPart2">O</span>
</p>
</div>
<div class="six">
<img src="img/lydia2.png" alt="" class="lydia-dp" data-node-name="imagePath">
<img src="img/hat.svg" alt="" class="hat">
<div class="wish">
<h3 class="wish-hbd" data-node-name="wishHeading">Happy Birthday!</h3>
<h5 data-node-name="wishText">May the js.prototypes always be with you! ;)</h5>
<!-- <div class="three">
<p data-node-name="text1">It's your birthday!!! :D</p>
</div> -->
<div class="four">
<div class="text-box">
<p class="hbd-chatbox" data-node-name="textInChatBox">
Happy birthday to you!! Yeee! Many many happy blah...
</p>
<p class="fake-btn" data-node-name="sendButtonLabel">Send</p>
</div>
</div>
</div>
<div class="seven">
<div class="baloons">
<img src="img/ballon2.svg" alt="">
<img src="img/ballon1.svg" alt="">
<img src="img/ballon3.svg" alt="">
<img src="img/ballon1.svg" alt="">
<img src="img/ballon2.svg" alt="">
<img src="img/ballon3.svg" alt="">
<img src="img/ballon2.svg" alt="">
<img src="img/ballon3.svg" alt="">
<img src="img/ballon1.svg" alt="">
<img src="img/ballon2.svg" alt="">
<img src="img/ballon3.svg" alt="">
<img src="img/ballon2.svg" alt="">
<img src="img/ballon1.svg" alt="">
<img src="img/ballon3.svg" alt="">
<img src="img/ballon2.svg" alt="">
<img src="img/ballon3.svg" alt="">
<img src="img/ballon1.svg" alt="">
<img src="img/ballon2.svg" alt="">
<img src="img/ballon1.svg" alt="">
<img src="img/ballon3.svg" alt="">
<img src="img/ballon3.svg" alt="">
<img src="img/ballon1.svg" alt="">
<img src="img/ballon2.svg" alt="">
<img src="img/ballon3.svg" alt="">
<img src="img/ballon2.svg" alt="">
<img src="img/ballon1.svg" alt="">
<img src="img/ballon3.svg" alt="">
<img src="img/ballon2.svg" alt="">
<img src="img/ballon3.svg" alt="">
<img src="img/ballon1.svg" alt="">
<img src="img/ballon2.svg" alt="">
<img src="img/ballon1.svg" alt="">
<img src="img/ballon3.svg" alt="">
<div class="five">
<p class="idea-1" data-node-name="text2">
That's what I was going to do.
</p>
<p class="idea-2" data-node-name="text3">But then I stopped.</p>
<p class="idea-3">
<span data-node-name="text4"
>I realised, I wanted to do something</span
>
<strong data-node-name="text4Adjective">special</strong>.
</p>
<p class="idea-4" data-node-name="text5Entry">Because,</p>
<p class="idea-5">
<span data-node-name="text5Content">You are Special</span>
<span class="smiley" data-node-name="smiley">:)</span>
</p>
<p class="idea-6">
<span data-node-name="bigTextPart1">S</span>
<span data-node-name="bigTextPart2">O</span>
</p>
</div>
<div class="six">
<img
src="img/mohit_photo.jpg"
alt=""
class="lydia-dp"
data-node-name="imagePath"
/>
<img src="img/hat.svg" alt="" class="hat" style="display: none" />
<div class="wish">
<h3 class="wish-hbd" data-node-name="wishHeading">Happy Birthday!</h3>
<h5 data-node-name="wishText">
May the js.prototypes always be with you! ;)
</h5>
</div>
</div>
<div class="seven">
<div class="baloons">
<img src="img/ballon2.svg" alt="" />
<img src="img/ballon1.svg" alt="" />
<img src="img/ballon3.svg" alt="" />
<img src="img/ballon1.svg" alt="" />
<img src="img/ballon2.svg" alt="" />
<img src="img/ballon3.svg" alt="" />
<img src="img/ballon2.svg" alt="" />
<img src="img/ballon3.svg" alt="" />
<img src="img/ballon1.svg" alt="" />
<img src="img/ballon2.svg" alt="" />
<img src="img/ballon3.svg" alt="" />
<img src="img/ballon2.svg" alt="" />
<img src="img/ballon1.svg" alt="" />
<img src="img/ballon3.svg" alt="" />
<img src="img/ballon2.svg" alt="" />
<img src="img/ballon3.svg" alt="" />
<img src="img/ballon1.svg" alt="" />
<img src="img/ballon2.svg" alt="" />
<img src="img/ballon1.svg" alt="" />
<img src="img/ballon3.svg" alt="" />
<img src="img/ballon3.svg" alt="" />
<img src="img/ballon1.svg" alt="" />
<img src="img/ballon2.svg" alt="" />
<img src="img/ballon3.svg" alt="" />
<img src="img/ballon2.svg" alt="" />
<img src="img/ballon1.svg" alt="" />
<img src="img/ballon3.svg" alt="" />
<img src="img/ballon2.svg" alt="" />
<img src="img/ballon3.svg" alt="" />
<img src="img/ballon1.svg" alt="" />
<img src="img/ballon2.svg" alt="" />
<img src="img/ballon1.svg" alt="" />
<img src="img/ballon3.svg" alt="" />
</div>
</div>
<div class="eight">
<svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="20" />
</svg>
<svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="20" />
</svg>
<svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="20" />
</svg>
<svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="20" />
</svg>
<svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="20" />
</svg>
<svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="20" />
</svg>
<svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="20" />
</svg>
<svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="20" />
</svg>
<svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="20" />
</svg>
</div>
<div class="nine">
<p data-node-name="outroText">
Okay, now come back and tell me if you liked it.
</p>
<p id="replay" data-node-name="replayText">
Or click, if you want to watch it again.
</p>
<p class="last-smile" data-node-name="outroSmiley">:)</p>
</div>
</div>
<div class="eight">
<svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="20" />
</svg>
<svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="20" />
</svg>
<svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="20" />
</svg>
<svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="20" />
</svg>
<svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="20" />
</svg>
<svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="20" />
</svg>
<svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="20" />
</svg>
<svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="20" />
</svg>
<svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
<circle cx="20" cy="20" r="20" />
</svg>
</div>
<div class="nine">
<p data-node-name="outroText">Okay, now come back and tell me if you liked it.</p>
<p id="replay" data-node-name="replayText">Or click, if you want to watch it again.</p>
<p class="last-smile" data-node-name="outroSmiley">:)</p>
</div>
</div>
</body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<script type="application/javascript" src="script/main.js"></script>
</body>

</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<script type="application/javascript" src="script/main.js"></script>
</html>
Loading