CSS Main Assignment: Fitness Heroes Gym

Brainnest: Frontend Development Industry Training

This repository contains 1 assignment about CSS for the Frontend Development industry training program taught by Brainnest.

You can visit this website by clicking here.

---

Contents

1. Project Purpose
2. Features
3. Technologies Used
   • Languages
   • Libraries
   • Tools Used
4. Deployment
   • Clone Project from GitHub Website
   • Clone Project from terminal
   • Deploy this Project using GitHub pages
5. Testing
6. Credits
   • Content
   • Media
   • Code

---

Project Purpose

The main goal of this project is to test your knowledge of CSS and create a web site of maximum 3 pages that is as close as possible to the template presented by the mentor of this course. The template simulates the requirements of a hypothetical client.

Mentor's Template	My Version

Color Scheme

Background and Text	Background, Hero secondary text and links	Hero Main text	Background and button
#1F2937	#E5E7EB	#F9FAF8	#3882F6

Features

The website has the following features:

1. Navigation bar: Contains the company logo and three links that will take you to the following pages:

   • Home
   • Our Gym
   • Membership

2. Footer: Contains the website's copyright information.

3. Home Page: This is the starting page of this website and it consists of the following sections:

   • Hero: contains a summary of what the website offers, plus a button to try the gym's membership plus an image.
   • Information: this section shows in pictures all what this gym has to offer to future customers.
   • Quote: this section shows a customer's review about the service provided by the company.
   • Sign up: this little section is in charge of emphasizing the importance of future users to join this gym.

4. Our Gym Page: This is the one in charge of talking a little more about the company, and it is also composed of the following sections:

   • Banner : which contains a background image and the page title.
   • Information about the gym : It is in charge of presenting this company, as well as showing its mission and philosophy.
   • Classes: this section shows all the classes the gym offers, each one with an image and a description.

5. Membership Page: this page invites prospective users to try the services offered by this fitness center, in addition to displaying contact information. This page is composed of:

   • Banner : which contains a background image and page title.
   • FREE Trial Memberships : This is composed of a form which users must fill out to request their free trial.
   • Plans: this section shows all the plans and prices offered by the gym.
   • Contact: Shows information about the opening hours as well as ways to contact the company, either by phone, email or social networks

Project Structure

Technologies Used

Languages

• HTML 5
• CSS 3

Libraries

• Font Awesome version 6.1.1
• Google Fonts

Tools Used

• VS Code
• GitHub
• Git
• Adobe Photoshop portable version 13.0.0
• Adobe Illustrator CS6 portable version 16.0.0

Deployment

Clone Project from GitHub Website 📁

1. Follow this link to the Project GitHub repository.
2. Scroll to the top of this repository and click on the "clone or download button".
3. Decide whether you want to clone the project using HTTPS or an SSH key and do the following:
   • HTTPS: click on the checklist icon to the right of the URL.
   • SSH key: first click on 'Use SSH' then click on the same icon as above.

Clone Project from terminal 💻

1. Open the 'Terminal'.

2. Choose the location for the cloned directory.

3. Type git clone, and then paste the clone URL.

   $ git clone https://github.com/USERNAME/REPOSITORY
   

4. Press 'Enter' to create your local clone.

5. Well done!, you've cloned this repository.

Deploy this Project using GitHub pages ✅

To deploy this page to GitHub Pages from its GitHub repository, the following steps were taken:

1. Log into GitHub.
2. Open the 'Settings' section of the project repository in GitHub.
3. Scroll down to the GitHub Pages section.
4. Under Source click the drop-down menu labelled None and select Master Branch or Marter Branch/docs folder.
5. On selecting Master Branch the page is automatically refreshed, the website is now deployed.
6. Scroll back down to the GitHub Pages section to retrieve the link to the deployed website.
7. Well done!, you've deployed this project.

Testing

Validation Services

HTML 5

I used W3C HTML Validator to validate my HTML files by direct input.

• All .html files were tested and no errors were found.

CSS

I used W3C CSS Validator to validate my CSS files by direct input.

• All the .css files were checked.
• All the .css passed without an error.

Chrome's DevTools Lighthouse Report

The website is performing quite well as reported by this tool.

Links and Buttons

In this test, all buttons and links were tested to ensure that all buttons and links worked correctly, and that no links were broken.

keep in mind: The form on the membership page does not work because this project only contains css and html.

Credits

Content

The content used for this website was consulted from these resources

• Better Body Gym
• West Wood Club

Media

The images used in this project were obtained mainly from these sources:

• Unsplash
• Better Body Gym website
• Iconfinder

Most of the images used were edited and enhanced using Photoshop.

Code

These websites were really useful to troubleshooting the issues I faced:

• w3schools
• Stackoverflow
• MDN Web Docs

These YouTube channels were very helpful to guide me during the development of this project, mainly everything related to FlexBox.

• Wes Bos
• Bluuweb

Back to top

---