- 🔭 I’m currently working on BEFIT
It is a Gym Website made with HTML & CSS 😊
The purpose of my project is to provide an website for a gym that is providing the public with a different way of exercising other then lifting weights and running on dreadmills. The website's purpose is to both provide people with both a online way of signing up and showing people the different ways that we train which are both fun and have more benefits then your average local gym.
I have included a link straight to the live website here
As a new user, I want the navigation bar to be organised well, so that I can navigate through the website with ease.
As a new customer, I want to see what the gym provides to me, so that I can partipate.
As a potential customer, I want to be able to sign up easily, so I can join the gym.
As a user, I want to be able to ask any questions I have, so I can improve my understanding of Fun Fitness.
The wireframes that were created in the design phase, have been included in the project under the directory 'Wireframes'.
Inside this folder I have included wireframes for a desktop, tablet and mobile phone screen.
My aim for the design was to create a website that was easy to navigate around and access information, I also wanted an vibrant design to match the name of project.
I designed this website to show potential customers how our gym is different to others and the types of activites that we do.
I also wanted a online way for customers to sign up so that we can get them ready to join quicker and how to contact us.
The way I have structured my project is to have the sign up form on the home page so that customer can find it with ease and be able to join.
In the 'About' page, I have listed a summary of joining the gym at the top of the page and then listed the different benefits side by side that we provide.
The next page is solely based on diffrent activites that the gym provides, the page is set up with a image of the activity with a brief description of why to join and what days the activites are done.
The last page is the 'Blog' page, this is set up with the contact, timings and address details at the top of the page side by side and below is a questions form.
This will allow the user to see what different web pages that they can visit on the website and click on the different links in the navbar which will take them to the webpage they require.
This form will allow the user to fill out their details so they can join the gym.
This button will complete the sign up form.
This image is the gym logo branding and show users how they can identify the gym.
This will let the user access the different social media platforms they can visit us on and the links will take you to the chosen social media website.
This information will answer the users first question, why should they join Fun Fitness?
This will tell the user the advantages of the gym and what they will get for their money.
This will provide the user with an understanding of what types of activities are done at the gym that us so unique.
The images will show the different types of activities.
This will show the user the information needed to contact the gym, the opening times and where it is located.
This icon will appear on smaller screens such as tablets and mobile phones so that the navigation bar doesn't take up too much room.
I would like to use this feature in future projects to create a slideshow of images.
This was one of the langauges used to build the website and input the text.
This was the second language used to style the pages of the website
This was used to help structure the pages in my website.
This libary was used to include icons in my project.
This libary was used to hover when over the links in the navbar and footer.
This tool was used to include different fonts on my webpages.
I used this website to test my css file, there were no errors on the file.
I used this website to test my html files. There were errors in the files, such as there was a missing closing div in the footer which was the main error on the files as there were missing closing divs in sections for the 'index' and 'why-join' file. Another error was that the benefits list on the why join file was written as a unordered list, but there were information for each list item so it needs to be listed as a description list which has been rectified.
The navbar is very simply with four links, which will take you to the page your require
such as if you want to go to the why join page all you need to do is click on the why join link in the navbar and if you would like to visit the home page you can just click on the home link in the navbar or the title of the website and it will take you back to that main page.
A new customer's user story will be achieved by going to the why join page and reading the benefits they'll recieve and they can go on the activities page to see what activity's interest them.
A potential customer's user story will be achieved as the sign up form is on the home page so the user is able to find it and join with ease.
If you try to submit the form without filling in all fields which are 'First Name', 'Surname' and 'Email Address' and 'Password' then a pop up will appear to state that all fields need to be complete, this was done by adding 'Required' attribute.
If all fields have been filled then the webpage will re-display itself, as I haven't yet learned how to do it correctly.
A user's story will be achieved by going to the 'Contact Us' page and then going towards the bottom of the page and the user can ask any question. If the user attempts to submit the form without completing all fields then the form won't submit, the 'Required' attribute has been added to all the fields 'Full Name, 'Email Address' and the 'Question' to make this happened. If all fields are filled then the webpage will reload.
This website was tested on different devices such as a laptop and on multiple web browsers such as Google Chrome, Internet Exployer and Firefox to make sure that it was responsive and compatible. During the testing phase for this project. Another issue I found was the footer would not stay at the bottom on desktop screens larger then laptops and the Ipad Pro, but I have rectified this know by using the sticky footer method to fit the footer at the bottom of the page.
This site is hosted by GitHub Pages, 
. It is directly deployed via vercel and it will be regularly updated every time a commit is done.
To run locally.
To cut ties with this GitHub repository, type git remote rm origin into the terminal.
All content in this project was written by myteam DevCode.
Meet the awesome people who have contributed to this project:
Unmesh Ghosh[Lead] |
Tridib Roy Chowdhury |
Aditya Gope |
Akash Sadhukhan |