Learn how to create a stylish event invitation page using HTML and CSS with step-by-step guide. Perfect for beginners in web design.
Table of Contents
Designing a beautiful event invitation page using HTML and CSS is a great project for beginners in web design. Instead of sending paper invites, you can share a stylish and mobile-friendly web page. In this guide, we will walk through the steps of creating your own event invitation page.
Prerequisites
Before starting, make sure you have the following:
- Basic knowledge of HTML and CSS
- A simple code editor (VS Code, Sublime, or Notepad++)
- A web browser (Chrome, Edge, or Firefox) to test your page
Source Code
Step 1 (HTML Code):
We start by building the HTML layout of the invitation page. Tailwind CSS will help us design it easily with utility classes. Let's break down the HTML code step by step:
1. Document Setup
<!DOCTYPE html>
<html lang="en">- Declares this as an HTML5 document.
- lang="en" sets the document language to English.
2. <head> Section
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">- charset="UTF-8" → ensures the page supports all characters (including symbols, emojis, etc.).
- viewport meta → makes the page responsive for mobile devices.
<title>You're Invited! The Celestial Gala</title>- The page title (appears in the browser tab).
<script src="https://cdn.tailwindcss.com"></script>- Loads Tailwind CSS, a utility-first CSS framework.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Great+Vibes&family=Montserrat:wght@300;400;600&display=swap" rel="stylesheet">- Loads Google Fonts: Great Vibes and Montserrat.
<link rel="stylesheet" href="styles.css">- Links an external stylesheet (styles.css) for custom styles.
3. <body> Section
<body class="min-h-screen w-full flex items-center justify-center p-4 sm:p-6 lg:p-8 background-stars">- Tailwind classes:
- min-h-screen → full screen height.
- flex items-center justify-center → centers the content.
- p-4 sm:p-6 lg:p-8 → padding (responsive).
- background-stars → custom class (styled in styles.css).
4. Main Container (Card)
<div class="w-full max-w-4xl mx-auto rounded-2xl shadow-2xl overflow-hidden card-bg">- max-w-4xl → limits width.
- rounded-2xl → rounded corners.
- shadow-2xl → deep shadow effect.
- card-bg → custom background style.
5. Layout Structure
<div class="md:flex">- Creates a two-column layout (md:flex applies on medium+ screens).
Left Side (Image)
<div class="md:w-1/2">
<img src="...event-celestial-gala.webp" alt="Elegant gala setting..." class="h-64 w-full object-cover md:h-full">
</div>- Displays a gala image.
- object-cover ensures the image fills its container.
Right Side (Content)
<div class="p-8 md:p-12 md:w-1/2 flex flex-col justify-center">- Contains the invitation text, RSVP form, and details.
6. Header (Invitation Title)
<header class="text-center mb-8">
<h2 class="font-fancy text-5xl gold-text mb-2">You are Invited</h2>
<h1 class="text-3xl font-semibold tracking-wider text-white uppercase">To The Celestial Gala</h1>
</header>- Fancy styled heading.
- gold-text and font-fancy are custom styles.
7. Event Details
<div class="grid grid-cols-1 gap-4 text-left text-base mb-8">
<div class="flex items-center">
<svg ...></svg>
<span>Saturday, November 22nd, 2025</span>
</div>
...
</div>- Uses SVG icons + text to show:
- Date
- Time
- Location
8. RSVP Section
<div id="rsvp-form">
<button id="rsvp-button" class="w-full py-3 px-6 rounded-lg btn-gold font-semibold tracking-wider text-lg">
RSVP Now
</button>
</div>- RSVP button → when clicked, it shows a form.
<div id="form-container" class="hidden mt-6 text-left">
<!-- Name Input -->
<div class="mb-4">
<label for="name">Full Name</label>
<input type="text" id="name" name="name" placeholder="Your Name">
</div>
<!-- Guests Dropdown -->
<div class="mb-4">
<label for="guests">Guests (+1)</label>
<select id="guests" name="guests">
<option value="0">Just Me</option>
<option value="1">Bringing a Guest</option>
</select>
</div>
<!-- Submit Button -->
<button id="submit-button">Confirm Attendance</button>
</div>- A hidden form for user input:
- Name
- Guest option
- Confirm button
<div id="confirmation-message" class="hidden mt-6 text-center">
<p class="text-lg font-semibold gold-text">Thank you for your response!</p>
<p class="text-gray-300">We look forward to celebrating with you.</p>
</div>- Confirmation message (shown after submitting form).
9. Script
<script src="script.js"></script>- Links an external JavaScript file (script.js) to handle:
- Showing/hiding the RSVP form
- Submitting user input
- Displaying confirmation message
Step 2 (CSS Code):
After creating the HTML, we enhance the design with custom CSS. Tailwind covers most design needs, but some custom styles are needed for fonts, backgrounds, and buttons. Let's break down the CSS code step by step:
1. General Styles
body {
font-family: 'Montserrat', sans-serif;
background-color: #0a0a1a;
color: #f0f0f0;
}- font-family → Sets the default font for the whole page (Montserrat).
- background-color → Dark navy (#0a0a1a) background.
- color → Light gray text (#f0f0f0) for readability.
2. Fancy Font for Titles
.font-fancy {
font-family: 'Great Vibes', cursive;
}- Applies the Great Vibes cursive font to headings or decorative text.
3. Card Background (Glassmorphism effect)
.card-bg {
background-color: rgba(10, 10, 26, 0.85);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(212, 175, 55, 0.2);
}- background-color → Semi-transparent dark blue (rgba adds opacity).
- backdrop-filter: blur(10px) → Creates a glassy blur effect behind the card.
- -webkit-backdrop-filter → Safari browser compatibility.
- border → Subtle golden border (rgba(212, 175, 55, 0.2)).
4. Golden Text
.gold-text {
color: #d4af37;
}- Changes text color to gold (#d4af37), giving an elegant look.
5. Gold Button (Interactive)
.btn-gold {
background-color: #d4af37;
color: #0a0a1a;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(212, 175, 55, 0.2);
}- Gold background + dark text for contrast.
- Smooth transition (0.3s) on hover.
- Box shadow → soft glow effect around the button.
.btn-gold:hover {
background-color: #e7c66b;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(212, 175, 55, 0.3);
}- On hover:
- Button gets brighter gold (#e7c66b).
- Slight lift effect (translateY(-2px)).
- Stronger shadow glow.
6. Form Input Fields
.form-input {
background-color: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(212, 175, 55, 0.3);
color: #f0f0f0;
}- Transparent dark input background.
- Thin golden border with some transparency.
- Light text inside.
.form-input::placeholder {
color: #a0a0a0;
}- Placeholder text appears in a lighter gray.
.form-input:focus {
outline: none;
border-color: #d4af37;
box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.5);
}- When the user focuses on the input:
- Removes default browser outline.
- Adds gold border + glowing effect.
7. Background with Stars
.background-stars {
background-image: url('https://raw.githubusercontent.com/farazc60/Project-Images/refs/heads/main/event-star-background.png');
}- Adds a starry background image to the page (cosmic/galaxy vibe).
body {
font-family: 'Montserrat', sans-serif;
background-color: #0a0a1a;
color: #f0f0f0;
}
.font-fancy {
font-family: 'Great Vibes', cursive;
}
.card-bg {
background-color: rgba(10, 10, 26, 0.85);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(212, 175, 55, 0.2);
}
.gold-text {
color: #d4af37;
}
.btn-gold {
background-color: #d4af37;
color: #0a0a1a;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(212, 175, 55, 0.2);
}
.btn-gold:hover {
background-color: #e7c66b;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(212, 175, 55, 0.3);
}
.form-input {
background-color: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(212, 175, 55, 0.3);
color: #f0f0f0;
}
.form-input::placeholder {
color: #a0a0a0;
}
.form-input:focus {
outline: none;
border-color: #d4af37;
box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.5);
}
.background-stars {
background-image: url('https://raw.githubusercontent.com/farazc60/Project-Images/refs/heads/main/event-star-background.png');
} Step 3 (JavaScript Code):
Finally, we make the page interactive using JavaScript. The RSVP button will show a form, and the form submission will display a confirmation message. Let's break down the JavaScript code step by step:
1. Selecting Elements
const rsvpButton = document.getElementById('rsvp-button');
const formContainer = document.getElementById('form-container');
const submitButton = document.getElementById('submit-button');
const confirmationMessage = document.getElementById('confirmation-message');
const rsvpFormDiv = document.getElementById('rsvp-form');- Gets references to important HTML elements:
- rsvp-button → The "RSVP Now" button.
- form-container → The hidden RSVP form with name + guest fields.
- submit-button → The button inside the form ("Confirm Attendance").
- confirmation-message → Hidden message shown after submitting.
- rsvp-form → The div that originally holds the RSVP button.
2. Show Form when "RSVP Now" is Clicked
rsvpButton.addEventListener('click', () => {
rsvpButton.classList.add('hidden');
formContainer.classList.remove('hidden');
});- When the user clicks RSVP Now:
- rsvpButton.classList.add('hidden') → hides the button.
- formContainer.classList.remove('hidden') → shows the RSVP form.
This creates a smooth step 1 → step 2 transition.
3. Show Confirmation when Form is Submitted
submitButton.addEventListener('click', (e) => {
e.preventDefault(); // Prevent actual form submission for this demo
formContainer.classList.add('hidden');
confirmationMessage.classList.remove('hidden');
});- When the user clicks Confirm Attendance:
- e.preventDefault() → stops the form from refreshing the page (default behavior).
- formContainer.classList.add('hidden') → hides the RSVP form.
- confirmationMessage.classList.remove('hidden') → displays the Thank You message.
const rsvpButton = document.getElementById('rsvp-button');
const formContainer = document.getElementById('form-container');
const submitButton = document.getElementById('submit-button');
const confirmationMessage = document.getElementById('confirmation-message');
const rsvpFormDiv = document.getElementById('rsvp-form');
rsvpButton.addEventListener('click', () => {
rsvpButton.classList.add('hidden');
formContainer.classList.remove('hidden');
});
submitButton.addEventListener('click', (e) => {
e.preventDefault(); // Prevent actual form submission for this demo
formContainer.classList.add('hidden');
confirmationMessage.classList.remove('hidden');
});Final Output:
Conclusion:
Creating an event invitation page using HTML and CSS is simple yet effective. With just a few lines of code, you can design a modern, responsive invitation page for weddings, parties, or professional events.
This project helps beginners learn page structure, styling, and responsiveness. You can also extend it by adding JavaScript for RSVP forms or animations.
Now, instead of sending traditional invites, impress your guests with a professional digital invitation page!
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
Tags: html event page, css invitation page, event webpage design, tailwind css event invitation page, how to create an event invitation page using html and css, step by step event invitation web page tutorial, responsive invitation page design in html and css, event invitation landing page
End of the article
