Muscle Gains is a site for fitness enthusiast that are serious about becoming all round athletes. It is a site that helps to showcase all the top notch services that Muscle Gains gym has to offer. Muscle Gains is a Uk based gym with some of the best equipments that money can buy with specially designed open spaces and studios that help to elevate your workout and fitness routines in order for you to achieve your fitness goals.

Muscle Gains caters to many fitness disciplines including crossfit, boxing and martial arts. Muscle Gains is home to highly trained fitness specialists who will help you meet all your fitness targets using scientifically proven techniques.

From the Responsive Mockup image used above, it is clear that the view port of the mobile device used which is an older iphone model is very small hence the reason why the home screen might not look very responsive. The image below shows a view of the home screen from my peronal mobile device which is a Samsung Galaxy Note 20 Ultra.

I chose to go with a dark theme through out the site to express to the user a sense of professionalism and seriousness about fitness. The background images used throughout the site help to showcase the enthusiasm of gym members in general, the quality of equipments and gym floors available, and the 'no nonsense' vibe and energy surrounding the entire gym atmosphere. The red accents used throughout the site help to highlight important aspects of each page like the red buttonts and active red navigation links. All the background images used have a linear gradient opacity over them in order to make the content on them stand out even more.

I chose to use the font called Roboto Condensed from Google fonts throughout the website because it is a bold and striking font that evokes seriousness and passion. For the social media icons i chose to go with Font Awesome for their large variey of icons that are sharp and have a clean design.

Below are sketched images of how I planned to layout the website design. You will notice that the final design of the website is slightly different from my initial sketches for some pages like the about page. I felt the initial design of the About page would be too clustered not allowing enough room for te text message that is on the final product. And also I decided to go with using pricing cards instead of conventional tables on the Membership page because I felt the pricing Cards were more informative and simpler to understand making it easier for the user to make an informed decision on which plan to go for as quickly as possible.

• Navigation Bar

  • It is made up of six links including the logo. They are the Home page, About page, Membership page, Classes page, Gallery and the Contact page. It is fully responsive and features on all the pages. The Logo also links back to the home page.
  • It makes it very easy for users to navigate around the pages with multiple links back to the home page.

Favicon

• The Muscle Gains site features a Favicon created from the Muscle Gains logo.

• The home page

  • The home page features a background image of a bodybuilder carrying out a squat with a barbel at Muscle Gains gym.
  • The gym name is boldly printed on the background image with the gym mantra written underneath.

• The 'Join Us' button

  • The home page also features button which is placed underneath the mantra to draw the attention of the user to click on it.
  • It has a bold red background color with the text 'Join Us' to draw the users attention to click on it.
  • The button features a hoover effect in the form of a bacground color change from red to grey to show the user that an action is about to occur.
  • Once clicked on, it then takes the user to the contact page where they can register to become a member.

• The Footer

  • At the very bottom of the home page and every other page on the Muscle Gains website is the footer which houses the relevant social media links.
  • When clicked on, these social media links open to a new tab preventing the user from having to use the back button to go back to the page they were on before.

About Page

• It has a background image of one of the Muscle Gains gym floors with a barbel loaded with weights and a set of warrior ropes to showcase to the user one of many open spaces for carrying out various workouts.
• Written boldly on the background image are some paragraphs of text to outline what the gyn is about.

Membership Page

• This page features a background image of a man and a woman doing a work out using warrior ropes.
• It also features two cards that clearly show two different plans available to users which are the basic plan and the full plan. Each plan lists out its benefits and price enabling the user to make an informed decision on which plan to go for.
• Each card houses a red button with the text 'Join Us'. The buttons feature a hoover effect involving a change in color from red to green matching the green tick symbols beside some of the benefits on each cards. The red star symbols clearly signifies the benefits not available on the basic plan.
• Clicking on either of the buttons takes the user to the contact page where they can register.

Classes Page

• This page has a background image of some Muscle Gains gym members doing martial arts and boxing classes in the dedicated boxing and martial arts studio.
• It includes a timetable of all the available classes to members of Muscle Gains Gym. It shows the days, classes and times to enable users attend classes they are interested in.
• The main table has an opaque background color to enable users still be able to see the gym member doing a jumping kick on a punching bag.

• Gallery

  • The gallery page displays various pictures of Muscle Gains gym members doing various fitness activities that go on at the gym.
  • The pictures help to show the user the various studios, open spaces, and equipments available to them if they become members.

• The Contact Page

  • This is the page that allow users to sign up to become members of Muscle Gains. It also shows the contact details of Muscle Gains.

• Interactive Google map on the contact page.
• Hoover effect on each image on the gallery page to make each pop out when a user rolls the mouse pointer over it.
• A booking schedule form on the classes page to allow users book classes ahead.
• Hoover effect on each membership plan card on the membership page when a user rolls the mouse pointer over it.
• Add some images to the About page that help show some of the important features of Muscle Gains.

• I used HTML to design the entire frame work of the website.
• I used CSS to design the enitre website.
• I used the Favicon.io converter to compress my favicon image.
• I used Gitpod as my code editor to write all the codes used throughout the website.
• I used Github to host my repositories.
• I used Git for version control of my website.

• I confirmed that the navigation, logo, home, about, membership, classes, gallery and contact text are all readable and easy to understand.
• I have tested all the 'Join Us' buttons through out the website to make sure they link back to the contact page
• I have tested the site for responsiveness making sure that it looks easy to use across all standard screen sizes using the Google chrome development tool.

• HTML

  • No errors were returned when passing through the official W3C validator (index.html)

  • No errors were returned when passing through the official W3C validator (about.html)

  • No errors were returned when passing through the official W3C validator (membership.html)

  • No errors were returned when passing through the official W3C validator (classes.html)

  • No errors were returned when passing through the official W3C validator (gallery.html)

  • No errors were returned when passing through the official W3C validator (contact.html)

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

• I discovered that on the contact page, the Contact Us padding is not aligned with that of the Register divide.

  

The site was deployed to GitHub pages. The steps to deploy are as follows: * In the GitHub repository, navigate to the Settings tab. * From the Settings tab, scroll down until you see the 'Pages' button on the left. * From the Source section drop-down menu, select the Main branch. * Once the Main branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.

The live link can be found here - https://onabz.github.io/muscle_gains

To make a local copy of this project, you can clone it by typing the following in your IDE terminal:

• git clone https://github.com/onabz/muscle_gains.git

Alternatively, if using Gitpod, you can click the green Gitpod button, or use this link

• The text on the About page was taken from Total Fitness Gym
• Steps on how to create the pricing plans tables on the membership page was taken from How to create a Pricing Plans table
• The lines of code I used to push the footer to the bottom of the page was taken from Sticky Footer with CSS
• The lines of code i used for the hoover effect on the navigation links on the nav bar was taken from How to make a website using HTML & CSS
• The lines of code I used to make the pricing plans on the membership page more responsive was taken from CSS Responsive Card & Hover Effects with Flexbox
• Instructions on creating the table on the classes page was taken from Styling HTML tables with CSS
• Instructions on how to create my gallery layout was taken from Love Running
• Instructions on how to create the contact page was taken from How to make a Contact Us Page using HTML and CSS
• The icons in the footer were taken from Font Awesome
• The font used throughout the site called Roboto Condensed was from Google fonts Google Fonts

• The Muscle Gains logo was created using Adobe Spark logo maker
• The favicon image was generated from Favicon.io
• The background image on the Home page was taken from Pexels
• The background image on the About page was taken from Pexels
• The background image on the Membership page was taken from Pexels
• The background image on the Classes page was taken from Pexels
• The background image on the Contact page was taken from Pexels
• The gallery_1 image was taken from Pexels
• The gallery_2 image was taken from Pexels
• The gallery_3 image was taken from Pexels
• The gallery_4 image was taken from Pexels
• The gallery_5 image was taken from Pexels
• The gallery_6 image was taken from Pexels
• The gallery_7 image was taken from Pexels
• The gallery_8 image was taken from Pexels

• I would like to thank my Mentor Tim Nelson for his invaluable support all through this project. I would not have been able to put all this together if not for his patience and insight.
• I would like to thank Student Care for their regular check up on me to ensure that I was always on track to completing this project and to reassure me that they were always available if I needed any help.