Muscle Gym is a website for anyone that is looking for a really clean and modern gym in central Stockholm. The gym just opened it doors to the public and wants with this website to try to get more customers. On this website, you can find all information you need to become a new member.
This website can not be used as a template for a business since it's a project for educational purposes. This website has been build with HTML and CSS.
Live website: Muscle Gym
- Increase the number of customers
- Promote the business
- Make it easy for customers to keep in contact with the business
- Display types of classes
- Show the location of the gym and opening hours
- Find the location of the gym
- Find what type of classes are offered
- Be introduce to the profile of the personal trainers
- View the membership prices
- People that are looking to join a gym
- People that is looking for a good gym experience
- Groups of people looking for a place to train together
- People that is looking to train with an experienced personal trainer
- Links and functions that always work
- A simple navigation system
- Relevant information is easy and quick to find
- Presentation is visually appealing on all screen sizes
- Contact the business easily
- New user can easy navigate the website
- New user can find promotional membership deals easily
- New user can easily find personal trainer and classes information
- New user can see where the gym is located
- New user can contact the gym about questions
- Returning user can obtain clear information about type of classes
- Returning user can see information about different personal trainers
- Returning user can access or share links to different social media.
The website is made so it should be easy for anyone to use the website on any devices. There should not be any differens for the user to use desktop, mobile or tablet on the website.
I used website wireframe.cc to create a wireframe.
As the wireframes are just basic sketches for each page I made some changes over the course of the project.
- I took away the "discount box" that I had orignal included on the wireframe.
- I made a hamburger menu for tablet and mobile instead of having the nav-bar links under the logo.
- I removed the location map on the wireframe homepage and have it placed only on the contact us page.
For the best impact I use this colors.
- Background color: #FFFFF and #000000
- Font colors: #3A3A3A, #FFFFFF and #B8100A
- Membership box color: Gold rbg(255,215,0) and silver rbg(192,192,192)
I match #3A3A3A font color with the #FFFFFF background here is the result in contrast check:
I match #FFFFFF font color with the #000000 background. Here is the result in contrast check:
This color would not be suitable for smaller text but it works fine with big text. I know it would be wrong to use it on small text.
- As a main font I used Cairo and Rubik, and as backup font sans-serif
- I used free images from google.com and pexels.com
The website has the following features:
- Navigation bar is visible on the top of each website for big screens.
- Navigation bar will turn to a burger menu on smaller screen. (Tried to get the menu under the logo but since I have 4 links it was to tight so I decided to get a burger menu instead)
- Navigation scheme:
- Home
- About us
- Classes and Membership
- Contact us
The home page contains a big hero picture with full width for all screens. Below the picture there is a lot of information about the gym. The topics are weight training, general fitness and functional training.
In this section we go delve a little further into our story for the gym, what we do and what our customers can expect from the gym. It contains four subheadings. Our story, Customer service, What we do and Culture. We display images of our personal trainers with some information about them.
Classes and Membership section starts with a presentation of our three popular classes. These are spinning, circuit training and zumba. Each box has information about what they can expect from the class. Finally we displayed the membership section where the customer has two choices. Either they can sign up for the silver membership or the gold membership. Both memberships show information on what you get and prices. I decided to give the gold membership a slightly more exclusive look then the silver with the intention of getting as many customers as possible to choose the gold membership.
The contact us page is just a simple contact form so the customer easy can get in contact with the gym. It contains first name, last name, email and phone number that is optional for the customer. After that we have 3 radio buttons that the customer can click to indicate their information preference. They are "general information, classes and personal trainers". Last is a required text box where the customer can write all there questions inside. On the bottom they will see a google maps to show where the gym is located (fake location for this project).
The success page of the form is proof for the customer to know that we have received their message. We also explain that we will get in touch with them as soon as possible. It also have a link so the customer can easily get back to the home website.
The footer contains the opening hours, social media links and opening times.
- HTML
- CSS
- JavaScript for burger menu and google maps (Credits for the code in the credits section)
- GitHub
- Gitpod
- Google Fonts
- Font Awesome
- Flex box
- W3C HTML Validator
- H3C CSS Validator
- Am I responsive
- WebAim
- Maps-website.com
- As a user, I want to easily determine the purpose of the website.
- Result: TEST PASSED
- It's very clear that the site is a gym business providing number of service and visuals to show the customer what to expect. On the home side we explain the different training activities we hold.
- As a user, I want to be able to know how much the membership costs and types.
- Result: TEST PASSED
- The cost of each membership is very clear and visual on the "Classes and Membership" side.
- As a user, I want to see what type of different classes the gym have and some information about it.
- Result: TEST PASSED
- We highlight three of our most popular classes with a text explaining how each class works.
- As a user, I want to be able to contact the business without have to exit the website and go to my personal mail program.
- Result: TEST PASSED
- A separate contact form is provided for those users who wish to make contact. This contact page is clearly shown on the top right side of the navigation bar.
- As a user, I want to be able to view the website on any of my devices without any loss of functionality.
- Result: TEST PASSED
- Chrome dev tools was used to check that the website remained responsive across different screen sizes and devices. The site was also checked on iPhone 11, iPhone 10 and Galaxy S9.
- Am I Responsive was also used to check responsiveness on different devices.
- As a user, I want to be able to find the business contact details and opening hours.
- Result: TEST PASSED
- In the footer you will find both phone number to the gym and a separate email address if you would like to contact the gym that way. You will also find the opening hours to the gym in the footer.
- As a user, I want to be able to connect to the business through social media.
- Result: TEST PASSED
- You will find all the gym's social media icons in the footer. All icons will have a direct link to the gym's Facebook, Twitter and Instagram.
The W3C Markup Validation Service was used to validate the HTML on every page of the project. On the first validation some issues were flagged on the contact-us.html and these were resolved as explained below:
index.html with no problems found:
contact-us.html was flagged on some issues with the the code inside the iframe that is to display the google maps. After checking the errors they where fixed and had after that no errors.
form-success.html with no problems found
The W3C CSS Validation Service was used to validate the CSS file used for the project. There were no errors found.
I was using Chrome as my main browser and the website have been tested on my iPhone 11 Pro and Macbook Pro 13¨.
I also tested the website inside of Chrome Dev Tools. With different px sizes to make sure the website will work on all different devices.
- I had an issue with the navigation bar after the size screen went smaller than 800px width the navigation link could not really fit even if I put it under the icon, so I decided to change it to a burger menu to have it looks sleek.
-
One other problem was the right side picture in the home section. After the screen size went down to 1200px the picture start to shrink on the height and did not really look good. I decided that the picture will jump down under the home text after 1200px and then for mobile phones I choice to change the picture to a smaller one to really fit the mobile size.
-
I decided to use radio buttons instead of checkboxs so the customer only had one choise to choose from in the contact us form. If I went with checkboxes I would need to use more javascript to be able to choose how many boxes the customer was able to click and since I tried to use HTML and CSS as much as possible I decided radio buttons was better. You can see the result here Contact Us
-
I wanted to be able to make all of the nav-bar links a .active status but since "Home, About us and Classes & Membership" is on the same page it was tricky. After talking with a tutor he told me it's not possible to do it without using even more JavaScript. Since it's outside of the scope for this project I decided to only highlight the home button on the index.html. You can see the result here Home
The site was developed on Gitpod, using GitHub for version control and hosting the repository and final site. The repository for this project, and the associated workspace, was created from the Code Institute template.
- Log in to GitHub and navigate to this project's respository Muscle Gym
- On the navigation bar of the repository, go to "Settings" tab
- Find on the left-hand side menu and locate "Pages"
- Under "Source", select Branch: main and click Save
- The page will refresh automatically and a link to the page is published Website
- Log in to GitHub and navigate to this project's respository Muscle Gym
- Click on "Code" and then copy the HTTPS address.
- Open Git terminal
- Type git clone and paste in the URL copied in step 2 and press enter
- Log in to GitHub and navigate to this project's respository Muscle Gym
- In the top right of the page, below your profile you should see a "Fork" button. Simply click on this.
- A copy of the repository will then be added to your own Repositories Page.
- I learned how to make a burger menu from this tutorial on Youtube
- I learned how to make a iframe map from the HTML Essentials (Code Institute) tutorial.
- I took some information about the hero-image from this tutorial from W3Schools
- I learned how to make the nav-bar icons to smooth scroll from this tutorial from W3Schools
- I learned how to make a fixed menu from this tutorial from W3Schools
- I use flexbox for all the box structure on the site. I learned it from this tutorial from CSS-tricks