Gym Website using Tailwind Starter Kit

Photo by Luis Vidal on Unsplash

In this post, we are going to create a Gym website using a Tailwind CSS starter kit. These starter kits are great in quickly developing a site, if you are a freelancer.

First, we need to download the starter kit from this link. Just click on the Download from Github link.

Download

Once you download it, there are many versions of it with React, Angular and Vue. But we will use it with HTML, so go inside the Landing Page folder and grab the assets and landing.html from it.

landing

I have copied the assets and landing.html to a new folder gym-tailwindcss and open, it with VS Code. Also, renamed the landing.html to index.html.

After that right-clicked and Open with Live Server. I already have the awesome Live Server extension installed, which is the best way to do HTML, CSS, JS development.

Live Server

It will open the html file on http://127.0.0.1:5500/index.html and we already have a beautiful responsive site.

Beautiful Site

Now, we will start to customize it by changing the title first. After that changed the anchor tag showing the log, to a bigger text, and also changed the href to my YouTube Channel and also the logo content.

Customize

Now, we don’t want to show the DOCS and the DOWNLOAD button. So, we need to delete the below mentioned things.

Delete

Now, instead of the GitHub link, we want to show a LinkedIn link. Because, mostly developers have GitHub profiles and not Gym owners.

Github

Before, changing classes we need to update the tailwind version in this starter kit, because tailwind recently released version 2. So, in the head part link to the new tailwind css.

New Tailwind link

Now, we want to increase the images size, so we will increase the min-height to 95vh in main. I have also changed the image to a Gym image from unsplash. Beside this the text are also changed.

Image

Now, our site starts to look more like a Gym site.

Gym Site

We want to get rid of the next section completely. So, go ahead and delete the below long section.

Long Section

Now, in the next section we don’t want the polygon, which shows the tilted line. Also, will remove the gray fill from image class. We are also making the next section darker.

So, in the below the Red outline to be removed and green one to be added.

Darker

Next, we will work on this section. So, we are adding first a new Gym image from unsplash. After that removing the icon, which we don’t need.

We are also changing the header text styles and content. Beside this also changing the content for the paragraph, with a gym content and also removing the gray class, as we want our paragraph to be white.

Section

Next, we will change the icons. But before that also adding our yellow text color, to Building in h3 tag.

After that in the lis, we have changed and reduced the classes in icons. Also changed the icon name and also the text.

Changes

Now, our second section is complete and looking great.

Looking Great

In the next section, we will change the people. In the h2 and p tag, change the content and also add and remove some classes.

We have also changed the image of the person, to a Gym model. Made it only rounded and also, increased it’s width.

We have also removed the social media icons, by removing the div with class of mt-6.

People

I have also changed the other trainers in the same way and now, our trainer section looks like below.

Trainers

Now, we will create our Contact Us section. For this we are first making the section black, with white text. After that we are removing the parts, shown in red below. Also removed a large div showing different services with class of flex flex-wrap mt-12 justify-center.

Contact Us

Now, we will change the next section color to black and also the Us in Contact to our yellow.

Contact

Now, our Contact form looks like below.

Contact form

By seeing how the site was progressing, i decided to make the whole site a dark theme, with alternating black and dark grey section. So, move to the end of first section and remove the svg first. After that change the color of second section to gray.

Gray

Next, also change the Trainer section to dark and the Trainer word to yellow.

Trainer

Lastly the Contact Us section to gray.

Gray Contact

Now, we will start working on our footer. Here, we are changing the background and removing the not required things.

Footer

After that we will keep all the social media links, but will remove github. And also changing the dribble to linkedin.

We are also removing the extra texts from the footer.

Footer

Lastly, we will change the copyright and our site is done.

Copyright

Again forgot one thing to add in the footer. So, adding the yellow text and other required things.

Yellow text

Now, our footer looks like below.

Footer

Our site is complete and looks like below.

Gym site

The code for the same can be taken from this github link.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store