Haileys Hotel is a website designed to showcase an elegant, user-friendly interface for potential customers. The project demonstrates the ability to create a fully responsive, accessible, and visually appealing multi-page website using only HTML and CSS. It aims to provide users with an easy way to explore rooms, book their stay, and contact the hotel.You can view the deoplyed site here
- Easy navigation across essential hotel services.
- Clear and responsive layout that works on all devices.
- A professional and clean design that enhances user trust and engagement.
- All files are clearly named, consistently lowercase, and grouped logically (e.g.,
assets/folder for images). - The CSS is separated into an external
style.cssfile, linked in the HTML<head>. - Code is organized and commented for easy readability and maintainability.
The color scheme for Haileys Hotel was carefully chosen to create an elegant, calm, and refined atmosphere, ideal for a hospitality brand.
| Colour Name | Hex Code | Role in Design | Color Theory |
|---|---|---|---|
| Rosewood Blush | #A75878 |
Primary / Accent Colour | Rosewood Blush and Orchid Bloom are analogous hues (next to each other on the color wheel) in the red-violet to violet range. This creates a harmonious and soothing effect, ideal for hospitality brands like a hotel that want to appear elegant, calm, and refined. |
| Orchid Bloom | #A7589F |
Secondary Accent | Same analogous relationship as Rosewood Blush, enhancing a sense of unity and sophistication. |
| Lavender Mist | #DBD3DC |
Background / Neutral Tone | A soft lavender-grey balances the vibrant tones by offering a gentle, clean background, making the bold colors pop without overwhelming the eye. Great for UI/UX design where readability and aesthetic balance are essential. |
| Deep Plum | #300833 |
Text / Contrast / Callouts | Deep plum complements the lighter tones and conveys luxury, mystery, and depth, providing strong contrast for headings, callouts, and important elements. |
As a user
I want to view a beautiful landing page
So that I can get a welcoming first impression of Hailey’s Hotel
Given I visit the hotel’s website
Then I should see the name "Hailey's Hotel"
And I should see an introduction about the hotel
And I should see a call-to-action button to "View Rooms"
As a user
I want to navigate easily across pages
So that I can find information quickly
Given I am on any page of the website
Then I should see navigation links to "Home", "View Rooms", "Booking", and "Contact Us"
As a user
I want to browse available rooms
So that I can decide which room I’d like to book
Given I click on "View Rooms"
Then I should see a list of room options
And each card should show a room image, name, and a "Book Room" button
As a user
I want to fill out a booking form
So that I can reserve a room for specific dates
Given I click on "Book Room"
Then I should be taken to a booking form
And I should be able to enter check-in and check-out dates
And enter my name, phone number, and email
And click a “book” to complete the booking
As a user
I want to access contact details for the hotel
So that I can reach out for questions or special requests
Given I click on "Contact Us"
Then I should see a contact form or contact information
Here are some screenshots of the final implementation:
These screenshots align with the user stories, such as viewing rooms, booking a room, and contacting the hotel.
Index.html
Viewroom.html
Booking.html
Contactus.html
- ✅ Navigate through all pages using menu links to ensure correct linking.
- ✅ Fill out the booking form and the contact form to confirm field accessibility and basic validation.
- ✅ Test the responsiveness by manually resizing the browser window and checking different device views (mobile, tablet, desktop).
- ✅ Verify that important pages and links are easily discoverable.
- ✅ Check that the form fields are labeled and easy to understand.
- ✅ Confirm that the color scheme, typography, and layout contribute to a pleasant user experience.
- ✅ Test using Chrome DevTools (mobile view) for different screen sizes like iPhone SE, iPad, and desktop.
- ✅ Check on an actual mobile device to ensure real-world responsiveness.
- ✅ Click every navigation link manually to confirm there are no 404 or broken pages.
- ✅ Use an online broken link checker tool to scan the site and ensure all links are valid.
| Test Scenario | Action | Expected Result | Actual Result | Pass/Fail |
|---|---|---|---|---|
| Navigation Links | Click on all navbar links | Navigate to the correct page without errors | Works as expected | Pass |
| Booking Form Submission | Fill and submit booking form | Form fields should accept input correctly | Works as expected | Pass |
| Contact Form Submission | Fill and submit contact form | Form fields should accept input correctly | Works as expected | Pass |
| Broken Links Check | Check all links manually and using tool | No broken links, all links active | Works as expected | Pass |
| Mobile Responsiveness (iPhone SE size) | Resize screen or use DevTools | Layout adjusts correctly for mobile screens | Works as expected | Pass |
| Tablet Responsiveness (iPad size) | Resize screen or use DevTools | Layout adjusts correctly for tablets | Works as expected | Pass |
| Desktop Responsiveness (Full Screen) | Open on large desktop screen | Layout stays centered and professional looking | Works as expected | Pass |
| Readability and Accessibility (color/contrast) | Review site visually | Text is easily readable with good contrast | Works as expected | Pass |
| Image Display | Check images on all pages | Images load properly without distortion | Works as expected | Pass |
| Form Labels and Inputs | Review form accessibility | Labels are clearly linked to their input fields | Works as expected | Pass |
The following features and enhancements are planned for future updates to Haileys Hotel:
| Improvement Area | Planned Enhancement |
|---|---|
| Add Dedicated Pages | Create full pages for the "Things To Do" and "Dining" sections currently linked on the landing page. |
| Enhance Forms | Implement form validation using JavaScript for better user experience and data accuracy. |
| Accessibility Improvements | Improve ARIA labels, keyboard navigation, and screen reader support to enhance accessibility for all users. |
| Advanced Styling | Add subtle animations (hover effects, scroll animations) using CSS or lightweight libraries for a dynamic and modern look. |
| Booking System Integration | Connect to a real booking engine or backend system to allow users to make live room reservations. |
The project was deployed using GitHub Pages by following these steps:
- Go to the GitHub repository.
- Click on Settings > Pages.
- Under Branch, select
mainand the/rootfolder. - Click Save.
- After a few minutes, the live site is available at:
Haileys Hotel Live Site