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