For my daughter Mira's 100-day celebration, I built a dedicated RSVP webpage to make it easy for guests to confirm attendance while adding a touch of personalization and charm.
Designed with a mobile-first approach, the webpage features a clean and simple interface with smooth CSS-only animations, including a custom baby illustration. A unique location-based banner appears for visitors outside the UAE, ensuring relevant event details are highlighted.
All RSVP responses are seamlessly collected and stored, creating a hassle-free experience for both guests and hosts. The site is lightweight, fast, and thoughtfully crafted to provide a delightful interaction while keeping everything streamlined and efficient.
Design Elements
The main baby illustration is done using Vanilla CSS only. You can check it out on my Codepen. All other visual assets are SVG.
Typography
- Protest Revolution
- Caveat Brush
Colors
#BF87D9
#FFE3B6
#FF7824
Tech
Colors and typography are handled via CSS Variables.
Built with AstroJS, vanilla CSS, and Firebase for authentication and storage.
Hosted on Netlify.