Skip to content

Update customize.json #137

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
maxvell917 wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Update customize.json #137

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3d5bbd9
Update customize.json
maxvell917 Feb 17, 2026
ad8b73a
Create index.html for the Valentine's wish website homepage
maxvell917 Feb 17, 2026
82881ce
Create script.js with customization loading function
maxvell917 Feb 17, 2026
bb5a587
Updated index.html with mobile responsive design improvements.
maxvell917 Feb 17, 2026
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
4 changes: 2 additions & 2 deletions customize.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "xyz",
"name": "Dimela❤️",
"greetingText": "I really like your name btw!",
"wishText": "Aankhon me teri Ajab si Ajab si aadae hai, Dil ko bna de malang ye teri wo hawayeinn hai",
"wishText": "No matter where this life may go,My love for you will always grow.Forever yours, on this Valentine’s Day.",
"imagePath": "img/vector.jpg"
}
207 changes: 74 additions & 133 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,137 +1,78 @@
<!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 Valentine :)</title>
<link
rel="stylesheet"
/>
<link rel="shortcut icon" type="image/png" href="./img/heart.svg" />
<link rel="stylesheet" href="style/style.css" />
</head>

<body>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Valentine Wish</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
text-align: center;
padding: 20px;
}
.container {
width: 90%;
max-width: 1200px;
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
}
img {
width: 100%;
height: auto;
}
@media (min-width: 600px) {
.container {
flex-direction: row;
}
}
h1 {
font-size: 2rem;
margin: 20px 0;
}
p {
font-size: 1.2rem;
line-height: 1.5;
}
button {
padding: 10px 20px;
font-size: 1rem;
border: none;
background-color: #f50057;
color: white;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #c21c49;
}
@media (max-width: 600px) {
h1 {
font-size: 1.5rem;
}
p {
font-size: 1rem;
}
button {
width: 100%;
}
}
</style>
</head>
<body>
<header>
<h1>Happy Valentine’s Day!</h1>
</header>
<div class="container">
<div class="one">
<h1 class="one">
Hey
<span id="name">xyz</span>
</h1>
<p class="two" id="greetingText">I really like your name btw!</p>
</div>
<div class="three">
<p>It's Valentine!!! :D</p>
</div>
<div class="four">
<div class="text-box">
<p class="hbd-chatbox">
Happy Valentine's Day!! Yeee! Love and blah blah...
</p>
<p class="fake-btn">Send</p>
</div>
</div>
<div class="five">
<p class="idea-1">That's what I was going to do.</p>
<p class="idea-2">But then I stopped.</p>
<p class="idea-3">
I realised, I wanted to do something <strong>special</strong>.
</p>
<p class="idea-4">Because,</p>
<p class="idea-5">
You are Special
<span>:)</span>
</p>
<p class="idea-6">
<span>S</span>
<span>O</span>
</p>
</div>
<div class="six">
<img src="img/vector.jpg" alt="" class = "girl-dp" id="imagePath" />
<div class="wish">
<h3 class="wish-hbd">Happy Valentine's Day Gorgeous</h3>
<h5 id="wishText">kuch kuch</h5>
</div>
</div>
<div class="seven">
<div class="baloons">
<img src="img/balloon.svg" alt="" />
<!-- <img src="img/music-note.svg" alt="" /> -->
<img src="img/smiling.svg" />
<img src="img/heart.svg" />
<!-- <img src="img/happy.svg" alt="" /> -->
<img src="img/balloon.svg" alt="" />
<!-- <img src="img/music-note.svg" alt="" /> -->
<!-- <img src="img/smiling.svg" /> -->
<img src="img/heart.svg" />
<img src="img/balloon.svg" alt="" />
<img src="img/music-note.svg" alt="" />
<img src="img/heart.svg" />
<img src="img/balloon.svg" alt="" />
<!-- <img src="img/music-note.svg" alt="" /> -->
<!-- <img src="img/smiling.svg" /> -->

<img src="img/heart.svg" />
<img src="img/balloon.svg" alt="" />
<img src="img/heart.svg" />
<img src="img/heart.svg" />
<img src="img/music-note.svg" alt="" />
<img src="img/smiling.svg" />

<img src="img/happy.svg" alt="" />
<img src="img/balloon.svg" alt="" />
<img src="img/heart.svg" />
<!-- <img src="img/music-note.svg" alt="" /> -->
<!-- <img src="img/heart.svg" />

<img src="img/happy.svg" alt="" />
<img src="img/balloon.svg" alt="" />
<img src="img/music-note.svg" alt="" /> -->
<img src="img/smiling.svg" />
<!-- <img src="img/heart.svg" /> -->
<!-- <img src="img/happy.svg" alt="" /> -->
</div>
</div>
<div class="eight">
<svg viewBox="0 0 40 40" xmlnssvg/heart.svg.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>Okay, now come back and tell me if you liked it.</p>
<p id="replay">Or click, if you want to watch it again.</p>
<p class="last-smile">:)</p>
</div>
<img src="valentine-image.jpg" alt="Valentine's Day">
<p>Wishing you all the love and happiness on this special day!</p>
<button>Send Your Wishes</button>
</div>
</body>

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
<script type="text/babel" src="script/main.js"></script>
</html>
</body>
</html>
16 changes: 16 additions & 0 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
async function loadCustomization() {
try {
const response = await fetch('customize.json');
const data = await response.json();

document.getElementById('name').textContent = data.name;
document.getElementById('greeting').textContent = data.greetingText;
document.getElementById('wish').textContent = data.wishText;
document.getElementById('image').src = data.imagePath;

} catch (error) {
console.error('Error loading customization:', error);
}
}

loadCustomization();