Language
HTML
Services
Web Designing
Timeline
4 Days
Industry
Travel
Project Overview
This project is a front-end hotel booking website where I replicated the complete UI design from a Canva template and transformed it into a fully responsive and interactive web interface. The goal was to convert a static design layout into a functional website while maintaining pixel-perfect accuracy in typography, spacing, colors, and overall structure. The website includes a hero booking section, featured hotels, property listing cards, detailed hotel pages, and a clean call-to-action driven layout. Special attention was given to responsiveness, ensuring the design adapts seamlessly across desktop, tablet, and mobile devices. The project demonstrates my ability to translate design concepts into structured HTML, CSS, and interactive components while preserving visual consistency
The Challenge & The Solution
One of the main challenges was converting a static Canva design into a responsive and structured layout without access to design specifications such as exact spacing, font sizes, or grid measurements. Maintaining pixel-perfect accuracy while ensuring the layout remained flexible across devices required careful CSS planning. Managing consistent spacing and alignment in property listing grids was technically demanding. Handling image proportions and ensuring uniform card layouts despite varying content lengths was another difficulty. Implementing booking form UI elements while keeping the design clean and user-friendly required thoughtful positioning and styling. Additionally, optimizing performance while using high-quality hotel images was a key challenge.
- Structured Layout with CSS Grid & Flexbox
- Responsive Design Strategy
- Consistent Design System
- Image Optimization & Aspect Ratio Control
- Clean Form Styling & UX Enhancements
