Dynamic Fitness Website

By Koustub Poddar, CSIT-2 3rd Semester, 2022

Table of Contents
Introduction​

Technologies Used

​Structure of Website

Working & Features of Website

​Screenshots of the Website

 Introduction
 The website we have built is a fully functioning,
scalable front-end solution for fitness chains across
the globe. It consists of multiple responsive web
pages with which we can interact without any
hassles.
 Many fitness websites lack the finesse and the
fluidity which creates a smooth and streamlined
experience for the users, but our front-end solution is
an answer to those problems. It’s appealing, works
instantaneously, and is compatible across all mobile
devices, be it laptops, tablets or smartphones.

Fitness Website 3
 Technologies used
In this website, we have used multiple industry favorite technologies that ensure the smoothness and responsiveness of
our website.
1. Tailwind CSS
2. Tailblocks
3. HTML
 1. Tailwind CSS: Introduction

 Tailwind CSS is an open-source CSS framework.

The main feature of this library is that, unlike other
CSS frameworks like Bootstrap, it does not provide a
series of predefined classes for elements such as
buttons or tables.
 A utility first CSS framework, it’s packed with
classes like flex, pt-4, text-center and rotate-90 that
can be composed to build any design, directly into
your markup.

Fitness Website 5
 1. Tailwind CSS: Features

 It has a constraint-based API design for your system by

having utility classes, so instead of littering your
stylesheets with arbitrary values, these classes make it
easy to be consistent with color choices, spacing,
typography, shadows, and everything else that makes up
a well-engineered design system.

Fitness Website 6
 1. Tailwind CSS: Features

 Because Tailwind is so low-level, it never encourages

you to design the same site twice. Even with the same
color palette and sizing scale, it's easy to build the same
component with a completely different look in the next
project.

Fitness Website 7
 1. Tailwind CSS: Features

 Tailwind automatically removes all unused CSS when

building for production, which means your final CSS
bundle is the smallest it could possibly be. In fact, most
Tailwind projects ship less than 10kB of CSS to the
client.
 By default, Tailwind uses a mobile-first breakpoint
system, like what you might be used to in other
frameworks like Bootstrap. This is the reason why it’s
highly compatible with mobile screens too, despite being
designed in a desktop environment having 16:10 aspect
ratio and having landscape orientation by default.

Fitness Website 8
 1. Tailwind CSS: Miscellaneous
Features
 Tailwind CSS also features hover state focus. Simply
insert hover: at the beginning of the class, which you
want to add. It works with states like focus, active,
disabled, focus-within, focus-visible, and even with
group-hover.
 Some other features include:
 Component driven, so duplicity of CSS used is reduced.
 Features Dark Mode
 Highly configurable
 Integrates well with VS Code
 Features a fast and aesthetic Tailwind UI

Fitness Website 9
 2. Tailblocks: Introduction
 Tailblocks are a set of pre-built, responsive
HTML/Tailwind CSS blocks that you can use to
quickly build responsive websites. Tailblocks are easy
to use and require no coding knowledge, making them
perfect for those who are new to web development.
Simply choose the block you want to use, and
Tailblocks will generate the code for you. You can
then copy and paste the code into your websites
HTML.
 Tailblocks are a great way to quickly add responsive
design to your website without having to learn how to
code. And, because they are pre-built, you do not have
to worry about building your own responsive CSS.
Simply choose the block you want to use, and
Tailblocks will do the rest.

Fitness Website 10
 2. Tailblocks: Features &
Comparison
 With Tailblocks, you can quickly and easily add responsive
CSS to your website without having to learn how to code.
Simply choose the block you want to use and paste it in
your IDE or code editor.
 Tailblocks are responsive to mobile, tablets and desktop
platforms. Most of these CSS components are created
using flexbox which is very responsive and provides best
design results.
 While Tailblocks is easier to use compared to Bootstrap,
Bootstrap offers more functionalities and flexibility as
well.

Fitness Website 11
 3. HTML
 HTML is the language in which most websites are written.
HTML is used to create pages and make them functional.
 The code used to make them visually appealing is known as
CSS and we shall focus on this in a later tutorial. For now, we
will focus on teaching you how to build rather than design.
 Hypertext means that the document contains links that allow
the reader to jump to other places in the document or to
another document altogether. The latest version is known as 
HTML5.
 A Markup Language is a way that computers speak to each
other to control how text is processed and presented. To do
this HTML uses two things: tags and attributes.

Fitness Website 12
Structure & Working of Website

Here, we will see the components used on the website,

webpages, etc.

13
 Front-end Web Development Components

Fitness Website 14
 Login Page Algorithm

Fitness Website 15
 Website Contents

 The website goes by the name “Vigorade Fitness”.

 The website consists of 14 dynamic web pages, all of
which are inter-twined with each other and 19 images, 13
of which are static, and 6 of them are dynamic and keep
changing as the webpage consisting them is refreshed.
Those images are sourced from the internet.
 All the components of the web pages have been separated
by a thematic separator, to make the website look simpler
and more appealing.

Fitness Website 16
 Website Contents
 index.html: This is the main website page. It consists of
header consisting of 4 URLs and the website name,
followed by 2 hero templates, a feature template, a
statistics template, and a testimonial template, followed by
a footer. This footer is applied to all webpages.
 about.html: This illustrates about the organization, the
founders and the team behind it. It consists of a content
template and two team templates.
 services.html: It showcases the services offered by our
fitness chain. It has a content template, followed by its
extension.

Fitness Website 17
 Website Contents
 contact.html: This page fetches the contact information of
the user. It also has the google maps in the background
consisting the location of the headquarters. It features a
contact template.
 confrm.html: It acts as a confirmation page for the user
that their contact details have been saved successfully. It
contains a confirmation message.
 login.html: This page features a CTA template which faces
the registered e-mail ID and password, and if the
credentials are correct, it lets the user login to the website.
 freetrial.html: This page is designed to fetch the
information of those users who are interested in getting a
free trial. It features an edited contact template.
Fitness Website 18
 Website Contents

 gallery.html: It showcases the images of the fitness

group. All the images are dynamically sourced from
source.unsplash.com, it consists of a gallery template.
 testimonials.html: It shows the customer testimonials.
It consists of a testimonial template.
 growth.html: It showcases the company’s growth over
a period. It consists of a statistics template.

Fitness Website 19
 Website Contents

 servicesmon.html: It shows the monthly prices of our

fitness plans. It consists of a pricing template.
 servicesann.html: It shows the annual prices of our plans
with 20% discount overall. It consists of a pricing
template.
 signup.html: This is a page for new users to register. It
consists of a CTA template.
 welcome.html: It directs to the modified home page post
sign up. It has the same structure as that of index.html web
page.

Fitness Website 20
 Screenshots

Home Page 21
 Screenshots

About Page 22
 Screenshots

Services Page 23
 Screenshots

Contact Page 24
 Screenshots

Gallery Page 25
 Screenshots

Testimonials Page 26
 Screenshots

Growth Statistics Page 27

 Screenshots

Login Page 28
 Screenshots

Sign Up Page 29
 Screenshots

Pricing Page 30
 Screenshots

Free Trial Page 31

THANK YOU