🌟 Introduction
Ever thought of wishing someone Happy Birthday in a creative and unforgettable way? How about sending them a customized web page with their name, a photo, and a heartfelt message — all built by you?
In this blog, I’ll walk you through building a simple yet elegant Birthday Wisher website using HTML, CSS, and JavaScript, with multiple pages, image upload, and direct shareable link support. A perfect mini-project to showcase your frontend skills and make someone feel special!
📁 Project Structure
bash
Copy
Edit
birthday-wisher/
├── index.html # Home Page
├── upload.html # Upload birthday image
├── wish.html # Personalized birthday wish
├── style.css # Shared styles
├── assets/ # Images & uploaded files
└── README.md # Project info
🔧 Features at a Glance
✅ Multi-page website
✅ Image upload & preview
✅ Birthday message display
✅ Direct sharable link (yourname.github.io/birthday-wisher/wish.html)
✅ Fully responsive & colorful interface
💻 Key HTML Pages
🏠 index.html – Home Page
html
Copy
Edit
🎉 Make Someone's Day Special!
Celebrate birthdays with personalized wishes and joyful memories.
📤 upload.html – Upload Image Page
html
Copy
Edit
function previewImage(e) {
const preview = document.getElementById('preview');
preview.src = URL.createObjectURL(e.target.files[0]);
preview.style.display = 'block';
}
💌 wish.html – Birthday Message Page
html
Copy
Edit
🎂 Happy Birthday, [Name]!
Wishing you love, laughter, and happiness on your special day!
🎨 Styling with style.css
css
Copy
Edit
body {
background-color: #fff0f5;
font-family: 'Segoe UI', sans-serif;
text-align: center;
}
nav {
background-color: #ff69b4;
padding: 15px;
}
nav a {
color: white;
text-decoration: none;
margin: 0 15px;
}
.hero {
padding: 50px;
background: linear-gradient(#ffe4e1, #fff0f5);
}
🔗 Making the Link Shareable
Once you host it on GitHub Pages, you can share your wish.html page as a unique link like:
arduino
Copy
Edit
https://yourusername.github.io/birthday-wisher/wish.html
That link is clickable, no login required, and works on any device.
💡 Unique & Commonly Used Code Snippets
📸 JavaScript Image Preview
js
Copy
Edit
function previewImage(event) {
const output = document.getElementById('preview');
output.src = URL.createObjectURL(event.target.files[0]);
output.style.display = 'block';
}
🔗 Navbar Code (Used on all pages)
html
Copy
Edit
💬 Final Thoughts
This simple yet meaningful project brings together HTML, CSS, and JavaScript to create a gift that’s digital, personalized, and shareable. It’s perfect for beginners, portfolio builders, or just spreading smiles!
"Code a wish. Share a smile. Celebrate life — the dev way!" 🥳
GitHub Repository: github.com/rohanharne45/birthday-wisher
rohanharne45.github.io/birthday-wisher
Top comments (0)