You're sections headers will be used to reference location of destination.

• Description
• UX
• Technologies
• Deployment
• Testing
• References
• Features to be implemeted in the future
• Author Info

This project is created to showcase a local owned gym in Deptford, London. The goal with this website is to attract new customers, as the owners think there will be a surge in the market after the lockdowns are over, and more people wnat to have a healtier lifestyle. The website is created with HTML5 & CSS3, and made responsive with Bootstrap.

• As a user, I want to be able to see the location of the gym. (Top of each page)
• As a user, I want to be able to see a phone number to call the gym. (Top of each page)
• As a user, I want to see the the opening hours of the gym. (Top of each page)
• As a user, I want to see different pictures of people in the gym.
• As a user, I want to be able to sign up for a PT session and get an introduction at the gym. --

• Desktop:
• Index
• Gallery
• Sign-Up
• Tablet:
• Index
• Gallery
• Sign-Up
• Phone:
• Index
• Gallery
• Sign-Up

• HTML5
• CSS3
• Bootstrap
• Font Awesome
• Google Fonts

Back To The Top

This project was deployed using GitHub Pages.

To deploy this page to GitHuB Pages from its GitHub repository, the following steps were taken:

1. Log into GitHub
2. From the list of repositiores on the screen, select Tofthaslund/Deptford-Gym.
3. From the menu items near the top of the page, select Settings.
4. Scroll down to the Github Pages section.
5. Under Source, click the dropdown menu labelled None and select Master Branch.
6. On selecting Master Branch the page is automatically refreshed, the website is now deployed.
7. Scroll back down to the GitHub Pages section to retrive the link to the deployed website.

To clone this project from GitHub:

1. Log into GitHub.
2. At the top search bar, search for "Tofthaslund/Deptford-Gym".
3. You will land on the Code section of the repository.
4. Click on the Code dropdown menu, just above the README file.
5. Click on the clipboard next the the URL.
6. Paste that into our local IDE of choice

• W3C CSS validation
• W3C Markup Validation
  • The delevoper has used W3C CSS validation and W3C Markup Validation to check the validity of the website code.

Testing client stories from UX section of README.md

1. As a new vistior to the website, I want to easily navigate the site, so I can find hat I need efficiently.

   • No matter what page the visitor lands on, they can easily find the navigation bar.
   • The headline always leads back the home page (the starting place for most client stories)
   • The go back button that appears after a client has signed on to a pt session, sends the client back to the homepage.

2. As a new visitor of the website, I want to be able to see a gallery of the gym, to see if I like it before I join.

   • At the top of the website (the nav bar) the is a call to action button there leads the visitor on to the gallery page.
   • A clearly labelled Gallery page button is to be found on every website.

3. As a visitor, if i am curious about the gym and want to know more I have the option to do show.

   • At the top of every page there is a phone number for the gym, clients can call to more about it.
   • At the bottom of each page (footer) the are 3 links to the gyms external social media.

4. As a visitor I want to know the gyms location.

   • At the top of each page, the location of the gym is clearly stated.

5. As a user, I want to be able to sign up for a PT session and get an introduction at the gym.

   • at the top of each page there is a link for the Sign-up section of the website, there will guide the visitor to a sign-up form for a PT session in the gymm.

## Testing of the functionality of the website

• Action: Click on the Gallery tab.
• Expected behaviour: Browser goes to gallery page of website.
• Pass/Fail: Pass.

• Action: Click on the Sign-Up tab.
• Expected behaviour: Browser goes to Sign-up page.
• Pass/Fail: Pass

• Action: Click on the Facebook icon.
• Expected behaviour: Browser goes to Faceboog page in new tab.
• Pass/Fail: Pass

• Action: Click on the Instagram icon.
• Expected behaviour: Browser goes to Instagram page in new tab.
• Pass/Fail: Pass

• Action: Click on the Twitter Icon.
• Expected behaviour: Browser goes to Instagram page in new tab.
• Pass/Fail: Pass

• Action: Press Let's Go button on the Sign-Up page without filling out the form
• Expected behaviour: Please fill in this field pops up for the First Name tab
• Pass/Fail: Pass

• Action: Press Let's Go button on the Sign-Up page with only first name filled out
• Expected behaviour: Please fill in this field pops up for the Late Name tab
• Pass/Fail: Pass

• Action: Press Let's Go button on the Sign-Up page with first name an last name filled out
• Expected behaviour: Please fill in this field pops up for the Email tab
• Pass/Fail: Pass

• Action: Press Let's Go button on the Sign-Up page with first name, last name, email filled out with wrong email form
• Expected behaviour: Please enter a email address pops up for the Email tab
• Pass/Fail: Pass

• Action: Press Let's Go button on the Sign-Up page with first name, last name, email filled out
• Expected behaviour: Please fill in this field pops up for the Pick a Date tab
• Pass/Fail: Pass

• Action: The form is filed out correctly
• Expected behaviour: The browser takes you to a new page with the messeage Thanks for signing up
• Pass/Fail: Pass

• Action: Clicking the back button on _Thanks for signing up page.
• Expected behaviour: The browser takes you back to the home page
• Pass/Fail: Pass

A number of external sites and/or templets has been used doing this project.

• README template by Jack Q Quick
• Pictures from The Noun Project
• Icons from Font Awesome
• Font Style from Google Font

Back To The Top

• Login page for current members
• Page with Classes overview
• Ability to book a class
• Payment setup options for different memberships

Back To The Top

• Twitter - @lasse090892
• Github - Lasse Toft Haslund