CITI GLOBAL COLLEGE

CABUYAO BRANCH

FIT GRIT FORGE

Crafted Code Syndicate

ACES HAPIZ
JAMES LUIS PARTOSA
JUSTIN CLARK DEYRO
MARK KEVIN VIREÑA
RYAN EISSEL CIRINIO
o

BACHELOR OF SCIENCE COMPUTER SCIENCE

3A1
o

ROBERT DEAN K. JUNTILLA

 Table Of Contents

MISSION , VISION…………………………………………………………………………………………………………………………………... 1

PROJECT EXPLANATION……………………………………………………………………………………………………………………………2

HOW TO USE THE PROGRAM……………………………………………………………………………..…………………….……………..3

DEVELOPERS………………………………………………………………………………………………………………………………………….12
SA

Company Profile: Crafted Code Syndicate

We Craft the Web, You Shape the Future
Overview:
Crafted Code Syndicate is a dynamic and innovative web development company that specializes
in creating tailored digital solutions to propel your online success. With a passionate team of
developers, designers, and digital strategists, we bring your web projects to life with creativity
and precision.

Why Choose Crafted Code Syndicate?

Experienced Team: Our team is comprised of highly skilled and experienced professionals who
stay up-to-date with the latest web technologies.
Client-Centric Approach: We work closely with our clients, understanding their unique
requirements and goals to deliver solutions that align with their vision.
Innovation: Crafted Code Syndicate embraces innovation, and we're always exploring new
technologies to ensure you stay ahead in the digital landscape.
Quality Assurance: We maintain a stringent quality assurance process to ensure that every
project we deliver is of the highest quality and free of defects.
Affordability: Our competitive pricing ensures that you get exceptional value for your
investment.

Contact Information:
Crafted Code Syndicate
123 Web Avenue
Tech City, Digital Realm
Phone: (+63) 910 162 4281
Email: info@craftedcode.com
Website: www.craftedcode.com
 1

Mission
“Our mission is to leverage our expertise in software development to provide
innovative and reliable solutions that empower businesses and individuals in the
digital age. We are committed to delivering high-quality, user-centric software
that enhances our clients' digital presence, streamlines their operations, and
drives their success.”

Vision
“Our vision is to become a pioneering developer company at the forefront of
technological innovation. We aim to be recognized globally for our ability to
deliver cutting-edge software solutions that push the boundaries of what's
possible. We aspire to create a culture of continuous learning and growth,
nurturing the talents of our team members and fostering collaboration within the
global tech community. Ultimately, our goal is to make a positive and lasting
impact on the way technology is used and developed, improving lives and
businesses worldwide.”
 2

PROJECT EXPLANATION

Fit Grit Forge: Forge Your Grit, Shape Your Fit

In a world driven by ambition and excitement for healthier living, Fit Grit Forge emerges as a
beacon of transformation. It's a project passionately dedicated to fitness enthusiasts, gym-
goers, and anyone yearning for a healthier and stronger lifestyle. However, it's more than just a
fitness platform; it's your ultimate companion in your quest for wellness.
At the heart of Fit Grit Forge is a robust array of features, a treasure trove of fitness resources,
and a thriving community. This digital haven has been thoughtfully designed to be your primary
destination for all things related to workouts and the gym.
Our commitment to personalization shines through with Fit Grit Forge's personalized workout
plans. These plans are carefully tailored to match your unique fitness goals, experience level,
and preferences. Whether you're on a journey to build muscle, lose weight, or enhance your
endurance, our platform has customized plans to support you on your path.
We understand that the exercise landscape can sometimes be daunting, which is why we've
meticulously curated an extensive exercise library. It's a rich source of guidance, offering
detailed instructions, videos, and tips covering a wide range of exercises, from tried-and-true
classics to the latest cutting-edge techniques.
Tracking your progress is made easy with our built-in fitness tracker. You can effortlessly log
your workouts, monitor your dietary choices, and witness your improvements over time.
But it's not all about the numbers and personal achievements. We believe that fitness should
be a journey of enjoyment and challenge. Fit Grit Forge invites you to participate in exciting
workout challenges that not only test your limits but also provide you with the opportunity to
earn well-deserved rewards.
Fit Grit Forge is more than a mere website; it's your fitness partner, nutrition guide, and
personal trainer, all wrapped into one. It's the platform where you can embrace the grit, kindle
the forge, and be part of a transformative journey towards a healthier, fitter version of yourself.
So, let's start forging this path together. Your journey to a healthier, stronger you begins at Fit
Grit Forge.
 HOW TO USE 3
MAIN PAGE

When the user open the web page, the very top of your browser or tab displays the title "Main
Page." This title provides the user with a quick reference for the webpage's purpose or content.
 4

Moving down the page, the user will see the "buttons" section. Here, the user see’s various
navigation links such as "ABOUT," "WORKOUT," "CONTACT US," "BMI CALC," "CALORIE CALC,"
and "DEVS." These buttons serve as interactive elements that allow the user to move to
different sections or pages of the website with a simple click, making it easy to explore the site's
content.
Further down the webpage, the user will encounter the "socmed" section, which showcases
social media icons. These icons are likely linked to the website's social media profiles, allowing
the user to connect with the site or share its content with their own social networks.
Finally, if the user continue scrolling, the user will reach the "workout tips" section. This area is
where the user find valuable information about workout tips and advice. It contains various
elements such as headings and content, providing the user with guidance on how to improve
the user fitness and well-being through effective workout strategies.

ABOUT PAGE
Upon landing on the page, the user’s attention is immediately drawn to the logo image, which
typically serves as the visual identity of the website. Right beneath the logo, the user will

5
encounter a prominently displayed heading that reads "ABOUT." This section is designed to
provide the user with a quick overview of the website's purpose and mission. Users can engage
with it by reading the informative paragraph that follows. This is where you can learn more
about the site's goals and what it has to offer, allowing you to quickly grasp the essence of the
webpage. As you scroll down the page, you'll reach the bottom where you'll find a section
dedicated to the website's developers.

CONTACT US PAGE

This webpage prioritizes user convenience and interaction. It offers a seamless way to navigate
back to the homepage, a user-friendly contact form for inquiries and feedback, and clear
contact information with easily recognizable icons. Whether you need to return to the main
page, send a message, or find contact details, this website's design ensures a smooth and user-
centric experience.
CATEGORIES PAGE 6

When users arrive at this webpage, they encounter an organized and visually appealing layout. The
design is centered around a top-of-the-page header, which features a logo. This header not only
provides a sense of identity to the website but also serves as a starting point for users as they navigate
the content below.

Beneath this header, the page unfolds into a neat structure with three distinct sections, each 7
representing a different workout category. These categories cater to various fitness goals and
preferences, catering to a diverse audience. Users can easily identify these categories as "Workout for
Men," "Workout for Women," and "Fat Loss."

What sets this design apart is the inclusion of compelling visual elements within each category section.
Users are not just presented with text or plain descriptions but are enticed with images that showcase
the essence of each workout category. These images are not static but come to life with a captivating
overlay effect, making them visually appealing and engaging. The overlay effect adds depth and intrigue,
encouraging users to explore further.

However, the functionality doesn't stop at visual allure. Each image within the category sections is also a
link. By clicking on any of these images, users can dive deeper into that specific workout category. It's a
straightforward and intuitive way for users to access more detailed information about their preferred
workout regimen.

WORKOUT PROGRAMS PAGE

This webpage offers a well-structured and user-friendly design that ensures a smooth
experience for visitors. Here's a detailed exploration of how users can engage with its various
elements:
At the outset, users will notice a convenient "back" link at the top of the page, providing a quick
way to return to the "categories.html" page. This feature is particularly useful for users who
might want to navigate back to the previous level or explore different categories of workouts. It
simplifies the overall browsing experience and ensures that users can easily retrace their steps.
Beneath this link, a prominent header captures the attention of users. This header not only

8
Adds visual appeal but also serves a functional purpose. It features a gym logo, which serves as
a recognizable symbol for the website, offering a sense of identity and affiliation. Accompanying
the logo, there's a navigation menu that provides easy access to various sections of the website.
This menu acts as a roadmap, allowing users to quickly jump to different areas, enhancing
navigation efficiency.
In the main content section of the page, users will encounter two workout cards. These cards
are thoughtfully designed to deliver crucial workout information in a clear and concise manner.
Each card includes an image that provides a visual preview of the workout. This visual element
is crucial for users to get a sense of what to expect, ensuring that they can make informed
choices.
Furthermore, the workout title on each card succinctly describes the type of exercise or
program being featured. The inclusion of a button to "open the workout" offers an interactive
element, allowing users to delve deeper into the details of the workout. This user-friendly
approach makes it effortless for visitors to access comprehensive workout information.
Additionally, the presence of a description on each card provides users with valuable insights
into the workout's goals, benefits, or techniques. This text element acts as an informative
supplement to the visual and interactive elements, ensuring that users can make well-informed
decisions about which workout they'd like to explore.

BMI CALCULATOR
How to Use the BMI Calculator Program:

9
Open the Web Page:

Open this BMI Calculator web page in your web browser by opening the HTML file provided or
hosting it on a web server.
Input Your Data:

You'll see two input fields labeled "Weight (kg)" and "Height (cm)."
In the "Weight (kg)" field, enter your weight in kilograms (e.g., 70).
In the "Height (cm)" field, enter your height in centimeters (e.g., 175).
Calculate BMI:

After entering your weight and height, click the "Calculate BMI" button.
View the Result:

The BMI (Body Mass Index) calculation will be performed using the entered data.
The result will be displayed on the page below the button, in the <div> with the ID "result."
Interpret the Result:
The result will show your calculated BMI value. BMI is a measure of body fat based on weight
and height.
You can interpret your BMI value based on commonly accepted categories, such as
underweight, normal weight, overweight, and obesity. These categories may vary depending on
your age and gender.
Reset or Calculate Again:

If you want to calculate the BMI again with different data, you can clear the input fields and
enter new values.
Click the "Calculate BMI" button again to recalculate.
This BMI Calculator web page provides a quick and easy way to estimate your BMI. It's a useful
tool for assessing your body weight relative to your height. Keep in mind that BMI is a simplified
metric and does not take into account all factors related to health, so consult with a healthcare
professional for a comprehensive health assessment.

CALORIE MAINTENANCE CALCULATOR 10

How to Use the Calorie Maintenance Calculator Program:

Access the Web Page:

Open this Calorie Maintenance Calculator web page in your web browser by opening the HTML
file provided or hosting it on a web server.
Navigate Back (Optional):

If you want to return to the previous page, you can click the "<< Back" link at the top of the
page. It will take you back to the "index.html" page.
Enter Personal Information:

On the page, you'll find a form for entering your personal information:
Weight: Enter your weight in either kilograms (KG) or pounds (LBS).
Height: Enter your height in either centimeters (CM) or feet & inches (Feet & Inches).
Age: Enter your age in years.
Gender: Select your gender from the provided options (Male or Female).
Activity Level: Choose your activity level from the options that range from "Sedentary" (little or
no exercise) to "Super active" (very hard exercise/sports, physical job, or training twice a day).

Calculate Calorie Maintenance: 11

After entering all the required information, click the "Calculate" button.
View the Result:

The program will calculate your estimated daily calorie maintenance level based on the
information you provided.
The result will be displayed on the page below the button, in the <div> with the ID "result."
Interpret the Result:

The result will show an estimate of the number of calories you should consume daily to
maintain your current weight based on your activity level.
This estimate can be useful for planning your diet and fitness goals.
Reset or Calculate Again (Optional):

If you want to calculate your calorie maintenance level with different data, you can clear the
input fields and enter new values.
Click the "Calculate" button again to recalculate.
This Calorie Maintenance Calculator web page is a handy tool for estimating your daily calorie
needs based on your individual factors. It can help you make informed decisions about your
diet and fitness routine. Remember that the result is an estimate, and individual calorie needs
may vary.

DEVELOPERS 12
ACES S. HAPIZ

AGE: 20
GENDER: MALE
CIVIL STATUS: SINGLE
ADDRESS: BRGY. LANGKIWA, SOUTHVILLE 5A BINAN,LAGUNA
—---------------------------------------------------------------------------------------------------------
 JAMES LUIS E. PARTOSA

AGE: 20
GENDER: MALE
CIVIL STATUS: SINGLE
ADDRESS: BRGY TAGAPO STA ROSA,LAGUNA
RYAN IESSEL M. CIRINIO 13

AGE: 20
GENDER: MALE
CIVIL STATUS: SINGLE
ADDRESS: BRGY. TIMBAO BINAN,LAGUNA
—---------------------------------------------------------------------------------------------------------
 MARK KEVIN D. VIREÑA

AGE: 20
GENDER: MALE
CIVIL STATUS: SINGLE
ADDRESS: BRGY. LANGKIWA, SOUTHVILLE 5A BINAN,LAGUNA

JUSTIN CLARK S. DEYRO 14

AGE: 21
GENDER: MALE
CIVIL STATUS: SINGLE
ADDRESS: BRGY. STO. NINO BINAN,LAGUNA