This is the promotional website for Gym4Life. It is designed to be viewed and used on different device types, easy navigation throughout the website for both potential and reutrning gym members.

    ### First time visitor goals

•   As a first time visitor, I want to easily understand the main purpose of the website and learn about the organisation.
  

•   As a first time visitor, I want to be able to navigate through the site to find the content.
  

•   As a first time visitor, I want to find out what services and features the gym have to offer.
  
    ### Returning visitor goals
  

•   As a returning visitor, I want to see the types of classes available to attend.
  

•   As a returning visitor, I want to easily navigate to the page to find contact details to get in touch with the gym
  
    ### Frequent users goals
  

•   As a frequent user, I want to sign up to newsletter so that I'm aware if there are any new updates on Gym4Life and aware of any promotions.
  

•    As a frequent user, I want contact details so I can get in touch with the gym either through calling, emailing or filling in a form where someone gets back to me
  

•   As a frequent user, I want a timetable off what day and time the classes are scheduled for.
  
    ### Design
        ### Colour Scheme
  

•        The Three main colours used are red, black and ivory.
  
        ### Typography 
  

•        The Lato font is the main font used throughout all of the website with Sans Serif used as a fallback font in case for some reason that the Lato font isn't being imported onto the website correctly. Lato is a nice and easily readable font that is appropriate for a Gym website.
  
        ### Imagery 
  

•        The images used on the website are important factor. The background hero image aims to catch your attention. It makes the page aesthetic and pleasing to look at for the user.
  

• Responsive on all devices.
  • Interactive buttons change colour when you hover over them for both social links buttons in the footer and other buttons used throughout the website.

[HTML5](https://en.wikipedia.org/wiki/HTML5)
CSS3](https://en.wikipedia.org/wiki/Cascading_Style_Sheets)

Bootstrap v5.0

•   Bootstrap was used on this website to aid with adding responsive design and the style of the website
  

  Hover.css:

•   Hover.css. was used on social links buttons in the footer as well as on all the other buttons created on the website.
  

  Font Awesome

•   Font Awesome was used to integrate icons on some of my web pages to enhanance the look and layout of the website for UX reasons.
  

  Git

•   Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
  

  GitHub:

•   GitHub is used to store Gym4Life's code after being pushed from Git.
  

  Balsamiq:

•   Balsamiq was used to create the wireframes for Gym4Life during the UX design.
  

• Procreate Procreate was used to create the about-us hero image and memberships hero image.

The W3C Markup Validator and W3C CSS Validator Services were used to validate all pages of the Gym4Life project to ensure there were no syntax errors in the project.

• W3C Markup Validator
• W3C CSS Validator

• As a first time visitor, I want to easily understand the main purpose of the website and learn about the organisation.

1. As soon as you enter the website the first thing you notice is a navigation bar with links to different web pages you can navigate to, along with the logo of the organisation. Beneath that you enounter a hero image with text and a "join now" button.
2. Main points about the gyms opening hours are made within the text of the hero image.
3. Once the user enters the website you can either scroll down the website to find out about key information regarding the gym to learn about what the gym offers and what they're doing during the covid period.

• As a first time visitor, I want to be able to navigate easily through the web site to find the content.

1. Gym4Life's website has been designed with a simple and easy to use navigation bar on every page of that follows you down the web page so that you can easily navigate to other parts of the website without feeling lost or confused using the website.
2. At the bottom of each web page there are links to the about us, contact us page as well as social media links.

• As a first time visitor, I want to find out what services and features the gym have to offer. 1. On the home page of this website you have information that informs you of the different services available in the gym like different gym classes, types of memberships and 1-2-1 personal training sessions available. 2. The user can either use the navigation bar to access our wide array of different classes pages, memberships, about us sections and personal training section. Further down the page there are sections that have links to the classes home page, memberships and personal training web pages.

• As a returning visitor, I want to see the types of classes available to attend.

1. The navigation bar has direct links to the classes pages. There is a Classes home page which explains the different types of class categories at Gym4Life called cardio, strength, mind & body and fight classes.
2. All of the class categories provide a link to the specific type of classes web page with a list of classes available within that specific category.

• As a returning visitor, I want to easily navigate to the page to find contact details to get in touch with the gym.

1. At the bottom of the page there is a footer with links to the contact us web page which has the gym location, contact number and email address.

• As a frequent user, I want to sign up to newsletter so that I'm aware if there are any new updates on Gym4Life and aware of any promotions.

1. There is currently no link or section where you can sign up to newsletter

• As a frequent user, I want contact details so I can get in touch with the gym either through calling, emailing or filling in a form where someone gets back to me

1. On the contact us page there is a form available for you to fill in if you have any enquiries you want to ask the gym. There is also an email address and customer services opening hours and contact number so you can get in touch with their team

• As a frequent user, I want a timetable off what day and time the classes are scheduled for.

1. Currently there is no timetable available for when and what day they have classes on.

• The webstite has been tested on Google Chrome, Firefox and Safari web browsers.
• The website has been used on multiple device types such as desktop, laptop, iPhone XR/XS & iPhone 12.
• Numerous amounts of testing was done where I was clicking on different pages to make sure that all web links work on all types of devices.
• Friends and family tested the website on either their phones, laptops and tablets and informed me of any issues that arose and how they found using the website.

• On Firefox laptop browser the personal-training web page has a bug where the about us section has shifted over to the left center of the web page.
• On Firefox laptop web browser the personal-training web page has a bug where container with the image of a personal trainer has shifted over to the bottom right center of the web page.
• On Firefox laptop browser the about-us web page has a bug where the customer service section has moved to the middle of the web page.

The project was deployed to GitHub Pages using the following steps...

1. Log in to GitHub and find the GitHub Repository
2. At the top of the Repository, find the "Settings" button on the menu.
3. Scroll down the Settings page until you find the "GitHub Pages" section.
4. Under "Source", click the "None" dropdown option and select "Master Branch".
5. The web page will automatically reload itself.
6. Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.

1. Bootstrap5 Bootstrap CDN used throughout this project to use bootstrap grid system and create responsive design across the website.
2. FontAwesome FontAwesome was used to add icons on some of my web pages to enhanance the website aesthetics.

1. All the hero images came from shutter stock Shutterstock

1. My menntor for helpul tips and feedback.
2. Tutor support at Code Institute for their asisstance and support.