The Work Hard Gym is a new gym which will be located in Watford, Hertfordshire, England. The gym will cater for both male and females and target the local and surronding community. Located in the heart of Watford, it will offer a wide variety of new joining package deals. The website will try to attract customers online and eventually get them to join the membership online (future feature). The website will store the data and in future mailshot it to customers and alert them with new offers.

• As a user I want to be able to see online offers and membership joining packages.
• As a user I want to sign up to emails offers which the gym would send out on a monthly basis.
• As a user I want to see the location of the gym, i.e Map and contact information.
• As a user I want to view the equipment and facilities the gym has to offer.
• As a user I would like to register online and become a member.

• The header logo will be displayed at the top-left of the page.
• The header logo will be text display with letter spacing of 6px and using hex color code #3a3a3a.
• The header logo will be the displayed throughout every page of the website.

• This section introduces the user to the Work Hard Gym with an eye catching zoom animation to grab their attention and draw the user in.
• The image displays some the features and equipments available to the user when joining the Work Hard Gym.
• A further text box is inside the image alerting users of the current offers available to them

• The package deal section consists of three different deals which will be updated monthly for users to sign up from.
• The package deal section will have three card designs color coded, Pink, Black, Pink via the Hex color scheme.
• When clicked each package will take you to the signup now page for users to join with convenience.

• The map will show the location of the gym
• The address will show users postcode and the road name, for user not familiar of the area.
• The Map will be below the package deal section and take 80% of the page width

• The footer will be at the bottom of the web page.
• The footer will have social media links and navigate the user to the following pages, Twitter, Facebook, Instagram, Youtube. When clicked it will take the user to the relevant social media page.
• The footer will display a email for the Work Hard Gym, the email when clicked will be directed to the gym email address.
• The footer will dispaly a telephone for user to contact.

• Image to show the user the training available
• list of facilities available to the user, some of the benefits would be a sauna, steam room and swimming pool available 24 hours 7 days per week.
• Cancel at anytime option if your not happy.

• Form for members to sign up with their details
• Confirmation of signing up
• Options to select the package of their choice.

• A new feature we would like to add to the webpage would be a Login facility were users can login with a password of their choice. Users could view payments and accounts direct from the sign in.
• As a user logs in we would offer the options to signup to the newsletter, induction programs and excersie schedules for different weight classes and package class.
• Payonline facility were new member can payonline using online payment plans.

• #f03c15
• #fff
• #3a3a3a
• #f16c6b;

• #fff
• #3a3a3a

The Font that we would use for the design would be a combination of the following

• Arial
• Sans-Serif
• PT Serif
• Logo & Heading letter-spacing will be approx 6px
• Navigation letter-spacing will be approx 4px

• For my wireframes I was suggested to use balsamiq rather than to create a design on a paper.
• The initial design want through various changes before I came to a final design with the prefered color contrast.
• I understand my design will go through some changes as I go along, the design was created to give me some design feature and also a rough collection of the webpage design.

For my first project HTML & CSS I was able to use a wide range of programes to implement my design. A list of the technology features and programes used are listed below, with methods of use.

• HTML used to create the body structure and layout of the web page. The structure was designed using the coding language used for HTML.
• CSS used to create the design and style feature to make the web page colourful and eye cathching for the user. The CSS was used in conjuction with the HTML structure.
• GITHUB was used to create, host and deploy the web design on to the platform. The benefit of github was to create repositories, branches, commits, and pull requests. Github was also a great way to share your design to mentors and other colleagues and tutors to help view your code and seek further input and support.
• GITPOD Gitpod allows you to define your project's configuration in code so you can launch a prebuilt development environment with one click.(Source Google) Gitpod was used to code all my HTML and CSS coding.
• Font Awesome Font Awesome was used to select icons to make the images relate to the headers. Font awesome added a attractive image to my page.
• Balsamiq This was used to create the wireframes during the design phase of the project, initally my design was made on a notepad, until balsamiq was mentioned for use.
• Google Fonts - This app was used to select the LATO and PT Serif fonts, however mid way into the project i decided to use Arial and Sans Serif though out the project.
• Am I Responsive This was used in order to see responsive design throughout the process and view different responsive designs.

• Lighthouse Test I tested via the Google Developer Lighthouse check. Below is a screenshot of my results.

• The W3C Markup Validation Service https://validator.w3.org The coding was checked via W3 validator, My check revealed I had no errors or warnings

• The W3C CSS Validation Service - Jigsaw The CSS code was check via The W3C CSS Validation Service - Jigsaw https://jigsaw.w3.org/css-validator/. My check revealed I had no errors or warnings

• Chrome Stimulator The app was used to test the website on different browsers and devices. Test were operated repeatedly during all devleopment stages.

• Supported browsers and platforms Google Chrome (latest version) — Windows, Mac OS X, iOS, Android Mozilla Firefox (latest version) — Windows

• Home Page - The main page will be the home page when clicked will navigate the user to the home page. The Home page will consists of a zoom animation image, package deals, which when clicked on will take the user onto the sign up page. The Home page will also display a map of the gym location.
• Why Join us page - This page when clicked will navigate the user to the why join us page?. This page will display a image followed by a list of why the user should join the Work Hard Gym.
• Sign up Now Page This page when clicked will navigate the user to the sign up now page. This page will have a backgrounbd image. The page main feature will be a form with required input. The user will need to enter they're First Name, Last Name, if these fields are not completed then a error message will be displayed, showing the following message "!Please fill out this field". The email address will need to have the correct input i.e [email protected] otherwise this will also show the following "!Please include an @ in the email address". Contact Number a number will need to be entered into this field as this will be a required field. If a telephone number has not been entered then the following error messsage will be displayed "!Please fill out this field" Choose your package a package will have a radio selection, one package must be entered as this is also a required field. If a package has not been selected then the following error messsage will be displayed "!Please select one of these options"

• Spacing for HTML & CSS - after chekcing my coding for both HTML and CSS I realised I had unnecessary spacing. These were deleated and the structure made tidy for viewing.
• Media Screen Sizes - I realised that my media screen sizes were not displaying the correct layout for mobile devices. These were fixed and checked via Am I responsive app and the google developer tool.

There was no unfixed bugs by the time this was written.

To deploy pages to Github the following steps were taken.

1. Login into your GITHUB account if you do not have one, you will need to create one
2. Find Repository button and open page
3. Locate the setting button and then locate the pages button.
4. You will then need to click the source button, on the tab labelled "none" select "main"
5. Once "main" has been selected the page will start to deploy, this will take a few minutes to deploy.
6. Once the link turns green, your link will be deployed.

• Some useful feature and pathways to note for Gitpod are as follows open pre-design of webpage(browser) "python3 -m http.server".
• To save work git add .
• To commit git commit -m TYPE MESSAGE i.e "added image to front page"
• push your work to GITHUB repositories git push.

A list of my credits are below

• Code Institue Learning guide and past coding examples
• Love Running Tutorial
• Font Awesome - used for Icons
• Learn Code academy YouTube Video - On how to use Github
• Pump Gym - https://www.pumpgyms.com/watfordtolpitslane - This was to get a brief idea on what feature and facilities gyms offer and membership packaages.
• https://www.fitness4less.co.uk/location/watford/ - structure and design
• Google Map
• W3schools.com - Help with CSS coding
• stackoverflow.com - help with coding, by visiting past forums.
• https://github.com/JorgenBrattang/staying-healthy - I was shared this repository from my colleagues on slack who guided me on a similar project.

• My mentor Rohit Sharma @rohit_mentor - Great advice and support throughout my project journey, I was guided well with plenty of advise and support.
• Tutor Suport - So much help from a wide diversity of tutors. They were able to support me in good time and made me realise when things became difficult.
• Slack - Always so much help from colleagues, the level of support is undoubtedly amazing.