It is a front-end for a simple hotel booking site. The site is developed using HTML/CSS and jquery plugins are used to provide extra features. There are total 5 webpages of the website.
-
Home Page - It is a indroductionary page about the hotel itself. It contains various images of the hotel which are slided in a conware fashion using an image slider. It also contains details about the rooms and a link to rooms page. It also shows free features that hotel provides to every visitor. Some reviews that hotel recieved over the years are also represented in a conware fashion. and finally a button which links to hotel booking facility. The image sliders (carousels) for rooms and reviews are draggable for the swift use of mobile users. Every page execpt booking page has a button which links redirects user to booking facility. Footer of every page contains some details about the hotel and address of the hotel along with the social links for the hotel. Scroll to top facility is also provided which redirects user to the top of the page along with a subtle animation when user clicks on a button.
-
Explore Page - It is a descriptive page for the various features hotel provides. New features can be easily added along with an image. The page follows principle of Minimalism and provides just the features nothing more.
-
Rooms Page - This page provides all the details about the rooms available in the hotel. When you hover over any of the room the details of that room will pe presented to you with a linear transition which is achieved with pure CSS3.
-
Booking Page - This is the page which has the booking faciltiy of the hotel. The form contains inputs for name, email-id, type of rooms, Number of rooms, and number of visitors. For number of rooms and visitors spinner buttons are provided (-,+) using a jquery plugin. For Date of Arrival and departure a datepicker jquery plugin is used.
-
Contact Page - This page can be used to contact the hotel by filling a simple form. It also serves purpose of providing the location of hotel in google maps. The location of hotel and zoom levels of the map can be easily modified.
- Image slider - Slick Slider - https://github.com/kenwheeler/slick
- Scroll to top - Scrollup - https://github.com/markgoodyear/scrollup
- Datepicker - pickmeup - https://github.com/nazar-pc/PickMeUp
- Spinner buttons - Handle Counter - https://github.com/nick-running/handle-counter