The purpose of this website is to attract people to visit the Imagine Leisure Centre and enjoy its services. The website highlights the features of the Leisure Centre.
The mobile-first approach design was implemented on this website to maintain the user experience from mobile devices to desktop computers.
A live demo can be found here.
- HTML
- CSS
- Bootstrap (4.3.1)
- Font Awesome (5.11.2)
- Hover.CSS (2.3.1)
The following features were implemented:
- Jumbotron from Bootstrap 4, See here
- Blockquotes from Bootstrap 4, See here
- Card from Bootstrap 4, See here
- Media object from Bootstrap 4, See here
- Tables from Bootstrap 4, See here
- Modal from Bootstrap 4, See here
- Navbar from Bootstrap 4, See here
- Clock and social media icons from Fontawesome.com, See here
- Navbar item shadow from Hover.CSS, See here
This site was manually tested in several web browsers (Chrome, Firefox, Opera, Internet browser of my Samsung 4K television and Chrome developer mode) to ensure compatibility and responsiveness. The Safari browser is outdated on windows. It cannot open the website. My mentor, Brian tested the website on IOS and macOS Safari.
The link of every social icon has the target="_blank" attribute to open the social site in a new tab.
The button for the modals (register and sign in) remains focused after clicked, leaving a blue outline around the button. As it turned out, it is a browser problem. However the outline can be removed, I found an article here and here that advised not to remove it.
All files were tested with the W3C Markup Validation Service and the W3C CSS Validation Service.
This site is deployed to Github pages. It updates automatically on a new push to the repository. It can be cloned using git clone https://github.com/faithy80/ucfd-project.git in Command Line Interface or it can be downloaded from here to run the site locally. After downloading, double click on index.html or launch it from a web browser to start the home page of the website.
Some contents and ideas were taken from the following websites:
- HQ Gym website
- Kingfisher Club Renmore website
- Warehouse Gym website
- NRG Fitness website
- Active Fitness website
The description of the classes was taken from the Google search website and Wikipedia. Also, some ideas were taken from Matt Rudge's Whiskey drop and Resume project tutorials.
The background photos were taken from Unsplash.com. The pictures of the equipment and classes were downloaded from the Google search website.
I'd like to thank
- Mentor Matt Rudge for the Whiskey Drop and Resume website tutorials,
- Mentor Brian O'Grady for the User Experience Design tutorials,
- Mentor Brian Macharia for guiding me through this project and for testing the website on Safari,
- Haley Schafer for the README.md example from her ucfd-project,
- Google Maps for the map in the footer.