A fully responsive website using CSS and HTML5. Workout Website is a site that hopes to keep people healthy and shows different kinds of workouts possible both at gym and at home with no equipments in Zurich Switzerland.There is a possibilty to join the community both online or on the gym site by registering themselves on the SignUp page at different centres in Zurich Switzerland. Target Audience: The site will be targeted toward people who are interested to workout, to socialise and keep themselves fit.
- As a user, I want to be able to Signup up for the membership for the gym.
- As a user , I want to know where are the different centers of gym in Zurich.
- As a user, I want to know what are the different levels of trainings provided by the gym depending on the Intensity level
- As a user, I want to able to do the workout remotely if I cant go to gym
- As a user, I would like access the social media links for the gym
This wesite has three pages overall.
- Landing Page/Home Page
- Trainings Page
- SignUpPage
It has four different sections
-
Section 1: Header and Navigation Bar: It has logo and three options to navigate the Home Page, Trainings page and the SignUp page
-
Section 2: Next section describes that there are two ways to workout, either it can be carried out in the gym which is presented by the gym image of it can be done anywhere remotely at home without equipment
-
Section3:Centres in Zurich in Switzerland This section shows where are the various gym centres located in Zurich Switzerland also showing the image of Zurich in the background
-
Section 4: Footer Section:The footer section includes links to the relevant social media sites for Workout group. The links will open to a new tab to allow easy navigation for the user.
It consists of three sections
-
Section 1:Header and Navigation Bar: Same as Landing Page
-
Workout Video Section: It shows different kinds of videos ranging from streching exercies, Semi- Intensive workout to Intensive workout
-
Section 3: Footer Section:Same as Footer Section in Landing Page
This Page also has three sections
- Section 1:Header and Navigation Bar: Same as Landing Page
- SignUp Section: It has the image a working out in the gym where people can signup if they want to join different centers in Zurich Switzerland
- Section 3: Footer Section:Same as Footer Section in Landing Page
No errors were found when passing through the official (Jigsaw) validator
There were no errors when using official W3C validator but there were some warnings regarding the use of headers
Accessibilty test results were found to be 93%.
-
As a user, I want to be able to Signup up for the membership for the gym. Test Result: Pass, reason:I found a Signup page for this userstory
-
As a user , I want to know where are the different centers of gym in Zurich. Test Result:Pass, reason: There is a section in Home page which shows different areas in Zurich where gyms are present
-
As a user, I want to know what are the different levels of trainings provided by the gym depending on the Intensity level Test Result: Pass, reason:This is found in Trainings page
-
As a user, I want to able to do the workout remotely if I cant go gym Test Result: Pass, reason:There are videos found in Trainings Page, so I can train myself remotely from anywhere
-
As a user, I would like access the social media links for the gym Test Result: Pass, reason:There are social media links found in the footer section of each page
The website is responsive on different screen sizes.
The site was deployed to GitHub pages. The steps are as follows:
- In the GitHub repository, navigate to the Settings Tab
- Select the main branch
- Once the main branch is provided, the following link to the website was provided.The live link can be found here - https://gaganbehrh.github.io/Workout_Website/
- The media/videos on the training page was taken from Youtube.
- https://www.youtube.com/embed/g_tea8ZNk5A
- https://www.youtube.com/embed/jpizoUy4K9s
- https://www.youtube.com/embed/Amj0PAfhGIk
- The logos are taken from Font-awesome
- The Images are taken from:Google Images and from some gym centres websites such as
- https://www.sweatfxbg.com/
- https://www.stacylelfitness.com/
- https://www.popsugar.co.uk/fitness/25-Minute-Total-Body-Strength-Workout-46384359?utm_medium=redirect&utm_campaign=US:CH&utm_source=www.google.com
- Zurich Image from Wikipedia:https://en.wikipedia.org/wiki/Z%C3%BCrich