Giter VIP home page Giter VIP logo

workout_website's Introduction

Workout_Website

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.

User story:

  1. As a user, I want to be able to Signup up for the membership for the gym.
  2. As a user , I want to know where are the different centers of gym in Zurich.
  3. As a user, I want to know what are the different levels of trainings provided by the gym depending on the Intensity level
  4. As a user, I want to able to do the workout remotely if I cant go to gym
  5. As a user, I would like access the social media links for the gym

Features

This wesite has three pages overall.

  1. Landing Page/Home Page
  2. Trainings Page
  3. SignUpPage

LandingPage

It has four different sections

  1. Section 1: Header and Navigation Bar: It has logo and three options to navigate the Home Page, Trainings page and the SignUp page image

  2. 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 image

  3. 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 image

  4. 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. image

Trainings Page

It consists of three sections

  1. Section 1:Header and Navigation Bar: Same as Landing Page

  2. Workout Video Section: It shows different kinds of videos ranging from streching exercies, Semi- Intensive workout to Intensive workout image

  3. Section 3: Footer Section:Same as Footer Section in Landing Page

SignUp Page

This Page also has three sections

  1. Section 1:Header and Navigation Bar: Same as Landing Page
  2. 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

image

  1. Section 3: Footer Section:Same as Footer Section in Landing Page

Testing

CSS

No errors were found when passing through the official (Jigsaw) validator

HTML

There were no errors when using official W3C validator but there were some warnings regarding the use of headers

Manual Testing:

Accessibilty test results were found to be 93%.

Testing of Userstories:

  1. 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

  2. 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

  3. 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

  4. 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

  5. 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.

Deployment

The site was deployed to GitHub pages. The steps are as follows:

  1. In the GitHub repository, navigate to the Settings Tab
  2. Select the main branch
  3. 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/

Credits

Media:

  1. The media/videos on the training page was taken from Youtube.
  2. https://www.youtube.com/embed/g_tea8ZNk5A
  3. https://www.youtube.com/embed/jpizoUy4K9s
  4. https://www.youtube.com/embed/Amj0PAfhGIk
  5. The logos are taken from Font-awesome
  6. The Images are taken from:Google Images and from some gym centres websites such as
  7. https://www.sweatfxbg.com/
  8. https://www.stacylelfitness.com/
  9. 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
  10. Zurich Image from Wikipedia:https://en.wikipedia.org/wiki/Z%C3%BCrich

workout_website's People

Contributors

gaganbehrh avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.