This is a Personal Training website. You can find here details about the personal trainers qualifications, what packages are on offer, communication details, social media links, a gallery of images relating to the service and a tool to submit what package you would like to purchase.

• As a First Time Visitor, I want to easily understand the main purpose of the site and learn more about the organisation.
• As a First Time Visitor, I want to be able to easily navigate throughout the site to find content.
• As a First Time Visitor, I want to locate their social media links to see their followings on social media to determine how trusted and known they are.

Returning Visitor Goals

• As a Returning Visitor, I want to find information about deals and packages.
• As a Returning Visitor, I want to find the best way to get in contact with the business with any questions I may have.

• Responsive on all devices.
• Interactive elements.

Color scheme

• Light Blue, white and Black.

Font Style

• Nunito, PT San.

Imagery

• Gym equipment/fitness related.

The header shows the name of the Personal Training business with use of a colour comination and font style which will feature throughout the website.

The Navbar is located just below the header and consists of a Home, About, Gallery and Contact Icon. These change colour when hovered over and bring you to that specific section of the website when clicked.<

For the Hero image, there is a nice minimalistic photo of Dumbells and a Welcome header welcoming customers to the website.

The About section informs potential clients about the Qualifications and Certifications of the Personal Trainer and what he specialises in. Such as:

• Being recognised by the fitness industry through REPS.
• That he is First Aid Trained.
• He specialises in Fat Loss and Muscle Building.
• He can design a personal program expertly

Icons are used to match the statements.

The Packages section shows the potential client; the packages available and the specific costs. Each package is displayed in its own column wth the consistant colour scheme of the website contrasting the columns.

The Contact section is a simple banner which show the potential client, the business email address and phone number.

The choose your package section gives the customer the option of selecting a specific package. You can enter your name and email address You are then given three options

• One Session
• One Month
• Three Months

Once selected, you can click on the submit button and your selection is sent to the business.

The footer is located on the bottom of all pages of the website. It contains a row of social media icons which when clicked will bring you the website clicked. The Icons consist of:

• Facebook
• Instagram
• Twitter
• Youtube

• The Gallery has its own page with the same Header and Footer.
• It consists of 9 Images which shows Personal Trainers and Clients working out.
• This page give a customer a feel for the atmosphere they can expect.

A simple pen and paper wireframe was used used as a guide to structure the website.

• HTML-5
• CSS-3

• Flexbox: Flexbox was used for responsiveness and to add structure to the website.
• Hover.css: Hover.css was used on the Navbar, Form and Social Media icons in the footer to change colour and underline while being hovered over.
• Google Fonts: Google fonts were used to import the 'Nunito' and 'PT Sans' font into the style.css file which is used on all pages throughout the project.
• 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 the projects code after being pushed from Git.
• Font Awesome:Font Awesome was used for icons on the About section and for social media icons on the footer.

• As a First Time Visitor, I want to easily understand the main purpose of the site and learn more about the organisation.

1. When entering the site, the user is greeted with a clear readable navigation bar to go to the section or page of their choice. Underneath there is a Hero Image with an about section underneath explaininin the business.
2. The user has two options, click on the navbar links or scroll down, both will lead to the same place, to learn more about the business.

• As a First Time Visitor, I want to be able to easily be able to navigate throughout the site to find content.

1. The site has been designed to be easily navigated. There is a clearly placed navigation bar at the top of the page, each link clearly describes what section or page they will end up at.
2. At the top of both pages there is a navbar to ensure the user always has somewhere to go and Social links at the bottom so the user doesn't feel trapped as they get to the bottom of the page.

• As a First Time Visitor, I want to research how the business is percieved by previous clients.

1. The user can locate social media links in the footer of all pages.

• As a returning user, I want to see if there are new packages available

1. All Packages are clearly defined in package section.

• As a returning user, I want immediate contact information.

1. The Navbar will bring you directly to the contact section with phone and email clearly listed.
2. Alternatively Social Media links are listed in the footer of all pages of the website.

• The website was tested in different browers such as Chrome, Firefox and Safari.
• I checked the website was responsive on all standard screens and looks professional by using devtools on Chrome and https://ui.dev/amiresponsive.
• I have confirmed that the form works perfectly, it requires entries in every box and requires email and the Submit button works confirming the user has made a submission.
• I confirmed all information text on the website is clear and easy to see and understand.

When I created the Gallery Page, the links for About and Contact were not working on the Navbar. The reason for this was I had the same href as on the Main html page, I had to change the href to link it to the Home page.

• HTML

No errors returned when passed through the official W3C Validator. W3C Markup Validator

• CSS

No errors returned when passed through the official (Jigsaw) Validator. W3C CSS Validator

I confirmed the website is easy to read, accessible and high performing by running it through PageSpeed Insights. [Click here to view live Project.] Click here to view live Project.

• No unfixed bugs.

The Site was deployed to GitHub Pages. The steps to deploy are as follows:

1. In the github repository, navigate to the settings tab.
2. From the source drop-down menu select the master branch.
3. Once the master branch was selected the page provided the link to the completed website.

The live link can be found here - Click here to view live Project.

Making a local Clone.

1. Log in to GitHub and locate the GitHub Repository.
2. Click on "Code" and the click "Clone" and copy the HTTPS URL.
3. Open Gitpod.
4. In the terminal type git clone and the paste the URL.
5. Press Enter and your clone will be created.

• The code used for the form was customized from the Love Running (Code Institute) website.
• All Images used on this website were sourced from Pexels at https://www.pexels.com/.

• My Mentor for feedback.
• Slack Community for help with problem solving.