Bodyline Gym
The Bodyline Gym website is the landing page for anyone looking for a gym based in London.
The Bodyline Gym offers great facilities such as a state of the art workout studio, spa, yoga rooms and also a 1 month free membership trial for new customers
This site is targeted at people between the ages of 18-50 based in London who want a space to workout and relax.
Users of this website will be able to find all the information they need to know about Bodyline Gym:
About the gym
Facilties at the gym
Location
Open Times
Memberships
Contact Details
Features
Navigation
- Featured at the top of all three pages is a fully responsive navigation bar which includes links to the logo, Home page, Facilties page and Sign up page.
- They are all in the same style to allow for easy navigation and consistency through out the site.
- The navigation is in a light colour which contrasts with the background allowing the user to easily navigate through the site.
- The navigation bar also features an orange line under the page (Home, Facilties and Sign up) the user is currently on making it easier to navigate.
- The navigation clearly tells the user the name of the gym (logo) and makes the different sections of the site easy to find on all screen sizes.
Landing Page Image
- The landing page includes a photo with an information box to allow the user to see the benefits of the gym.
- This section introduces the user to Bodyline gym with a clean zooming animation to grab the attention of the user.
About Us Section
- The about us section explains who Bodyline gym are.
- It also explains that bodyline gym has something for everyone no matter what skill level they are at.
Membership Section
- The membership section explains to the user important information about the benefits of being a bodyline member.
- It also tells the user that they should sign up for the 1 month Free membership
Footer
- The footer provides important information to the user such as the location of the gym and contact details.
- The location and contact details is important to the user as it gives the user the ability to find and contact the gym.
- The footer also includes social media links so the user can see and connect with the gym. The links will open to a new tab to allow easy navigation for the user.
Facilties Page
- The facilties page provides the user with supporting images showing the user the facilties of the gym.
- This page is important for the user as they will be able to easily identify all the facilties at the gym.
Sign Up Page
- The sign up page allows the user to to get signed up to become a bodyline member and get a 1 month free trial.
- The user is asked to submit their full name and email address.
- The sign up page is important for the user as it allows them to be able to become a bodyline member.
Features to Implement
- A feature to implement is making the from go to a database as it does not go anywhere as the action attribute is set to "#"
Testing
- I tested that this website works in different browsers (Chrome, Firefox, Safari)
- I confirm that this project is responsive, accessible and functions on all standard screen sizes using the devtools device toolbar.
- I confirm that the Navigation, Landing page, About Us, Membership, footer, facilities page and sign up page are all easy to navigate and understand.
- I confirm that the form works; it requires entries in every field and the email field requires an email input and the submit button works.
Validator Testing
- HTML
- No errors were returned when passing through the official W3C validator.
- CSS
- No errors were found when passing through the official (Jigsaw) validator.
Unfixed Bugs
- The submit button for the form does not go anywhere as there is no database linked to the website.
Deployment
- The site was deployed to GitHub pages. The steps to deploy are as follows:
- In the GitHub repository, navigate to the Settings tab
- From the source section drop-down menu, select the main Branch
- Once the main branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.
The live link can be found here - Bodyline Gym
Credits
Content
- The code to make the social media links was taken from the Love Running Project
- The code to make the hero image and information box was taken from Love Running Project
- Some of the code for the navigation bar flexbox media query at 520px and less was taken from Stack Overflow
- The code to make the navigation responsive for media query at 950px was taken from Love Running Project
- Some of the code for the form was taken from Love Running Project
Media
- The hero image on the home page is taken from Pexels
- The three images on the facilties page is taken from here
- The fonts where taken from Fontawesome