Responsive Gym Website Design | Fitness Center Template

Faraz

By Faraz -

Create a stunning gym website with HTML and CSS. Our responsive fitness center template ensures a user-friendly experience on all devices.

Join us on Telegram
Responsive Gym Website Design Fitness Center Template.jpg
Read AlsoStep-by-Step Guide Creating Gradient Borders with HTML and CSS.jpgStep-by-Step Guide: Creating Gradient Borders with HTML and CSS

Table of Contents

  1. Project Introduction
  2. HTML Code
  3. CSS Code
  4. Preview
  5. Conclusion

Welcome to our comprehensive guide on designing a responsive gym website using HTML and CSS. In today's digital age, it's essential for fitness centers to have an online presence that not only looks great but also caters to users on both desktop and mobile devices.

In this post, we'll take you through the essential steps to create an engaging gym landing page. Whether you're building a website for an established fitness center or launching a new one, our insights will help you craft a user-friendly and visually appealing online hub that sets you apart in the fitness industry.

Let's dive in and discover how to bring your gym's website to life with responsive design, captivating content, and effective user experience strategies.

Join My Telegram Channel to Download the Project Source Code: Click Here

Prerequisites:

Before starting this tutorial, you should have a basic understanding of HTML and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.

Source Code

Step 1 (HTML Code):

To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our Gym website.

After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.

Let's break down the code section by section:

1. <!DOCTYPE html>: This declaration specifies that the document type is HTML5.

2. <html lang="en">: This is the opening tag for the HTML document. The lang attribute is set to "en" to indicate that the document is in English.

3. <head>: This is the head section of the HTML document, which contains metadata about the page and links to external resources.

  • <meta charset="UTF-8">: Specifies the character encoding for the document as UTF-8, which supports a wide range of characters.
  • <meta http-equiv="X-UA-Compatible" content="IE=edge">: This meta tag is used to ensure compatibility with Internet Explorer.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: This meta tag sets the viewport width to the device width and specifies the initial zoom level, ensuring proper responsiveness on different screen sizes.
  • <meta name="description" content="...">: Provides a brief description of the website for search engines and social media sharing.
  • <title>Responsive Gym Website Template</title>: Sets the title of the webpage, which is displayed in the browser tab.
  • <link rel="preconnect" href="https://fonts.googleapis.com">: Specifies a preconnect link to establish a connection to a font resource.
  • <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>: Specifies a preconnect link to establish a connection to the Google Fonts server with a crossorigin attribute.
  • <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600&display=swap" rel="stylesheet">: Links to a Google Fonts stylesheet to load the "Poppins" font for the website.
  • <link rel="stylesheet" href="styles.css" />: Links an external CSS stylesheet named "styles.css" to style the webpage.

4. <body>: This is the body of the HTML document, where the visible content of the webpage is placed.

5. <header class="header" id="home">: Defines the header section of the webpage, which typically contains the site's logo and navigation menu.

Inside the header, there is a navigation menu with links to different sections of the webpage.

6. <main>: Contains the main content of the webpage, including various sections.

  • <section class="section-hero">: Represents the hero section at the top of the webpage, which often includes a large heading and a call-to-action button.
  • <section class="section-about" id="about">: Contains information about the gym, including a heading, text, and images.
  • <section class="section-courses" id="courses">: Displays information about the gym's courses, including images and descriptions.
  • <section class="section-offer" id="offer">: Promotes a special offer with a heading, text, and a button.
  • <section class="section-coaches" id="trainers">: Provides information about fitness coaches, including their names, titles, and social media links.
  • <section class="section-review" id="review">: Displays user reviews with images and quotes.
  • <section class="section-contact" id="contact">: Includes a contact form for users to get in touch, as well as a map.

7. <footer class="section-footer" id="footer">: Defines the footer section of the webpage, which includes contact details, quick links, a newsletter subscription form, and copyright information.

  • Social media icons and links are also provided in the footer.

8. Various <div> elements with class names are used to structure and style different sections of the webpage.

9. Throughout the code, there are image elements (<img>) used to display images on the webpage, and anchor elements (<a>) are used for links.

This is the basic structure of our Gym website using HTML, and now we can move on to styling it using CSS.

Read Alsocreate a glassmorphism calendar with html, css, and javascript.jpgCreate a Glassmorphism Calendar with HTML, CSS, and JavaScript

Step 2 (CSS Code):

Once the basic HTML structure of the Gym website is in place, the next step is to add styling to the website using CSS. CSS allows us to control the visual appearance of the website, including things like layout, color, and typography.

Next, we will create our CSS file. In this file, we will use some basic CSS rules to style our website.

Let's break down the code section by section:

1. :root pseudo-class:

  • This section defines custom CSS variables using the -- notation. These variables are used to store color values, grid gap values, and layout configurations, making it easier to manage and reuse these values throughout the stylesheet.

2. Universal reset (*, *::before, *::after):

  • This part sets default margin, padding, and box-sizing properties for all HTML elements. box-sizing: inherit; is used to ensure that the box-sizing behavior is inherited from the parent element.

3. html:

  • Sets the default font size to 62.5% of the root font size, making it easier to define font sizes in relative units like rem.
  • scroll-behavior: smooth; adds smooth scrolling behavior to anchor links.

4. body:

  • Defines the font family, weight, size, line height, text color, and overflow behavior for the entire webpage.

5. .container:

  • Sets maximum width and padding for a container element. The clamp() function is used to make the container responsive with a minimum width of 50rem, a maximum width of 85vw (viewport width), and a maximum of 114rem.

6. Styling for alternating sections:

  • section:nth-child(odd) and section:nth-child(even) apply background colors to alternate sections based on their position within the document.

7. Styling for the header:

  • .header is styled with a fixed position at the top of the page, a gradient background, and z-index to ensure it overlays other content.
  • .header-navigation and its child elements define the styling for the navigation menu, including responsive behavior for smaller screens.
  • .header-navigation .nav-icon controls the display of a navigation icon for small screens.

8. Headings:

  • .heading sets common styles for headings.
  • .heading--1 and .heading--2 define specific styles for different heading levels.

9. Buttons:

  • .btn styles are applied to buttons with common properties like text transformation, padding, border radius, and more.
  • .btn__primary and .btn__secondary define styles for primary and secondary buttons.
  • .link-button styles links that resemble buttons.

10. Forms:

  • Styles for form elements, including input fields and placeholders.

11. Section-specific styles:

  • Styles for different sections of the webpage, such as .section-about, .section-courses, .section-coaches, .section-review, .section-footer, etc.

12. Grid layouts:

  • Styles for grid-based layouts with various column and row configurations.

13. Images:

  • Styling for images, including borders, sizes, and overlays.

14. Background images:

  • Background images for specific sections, such as the hero section and offer section.

15. Miscellaneous classes:

  • Various utility classes like .yellow, .underline, .margin-right, and .margin-bottom with specific styling properties.

This will give our Gym website an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.

:root {
  --color-yellow: hsl(56, 99%, 52%);
  --color-yellow-dark: hsl(56, 99%, 32%);
  --color-yellow-light: hsl(56, 99%, 82%);
  --color-black: hsl(0, 0%, 15%);
  --color-black-light: hsl(0, 0%, 22%);
  --color-red: hsl(359, 77%, 56%);
  --grid-column-gap: clamp(2rem, 6vw, 8rem);
  --grid-row-gap: 4rem;
  --two-col-layout: 2;
  --three-col-layout: 3;
}
@media only screen and (max-width: 56.25em) {
  :root {
    --two-col-layout: 1;
  }
}
@media only screen and (max-width: 59em) {
  :root {
    --three-col-layout: 2;
  }
}
@media only screen and (max-width: 37.5em) {
  :root {
    --three-col-layout: 1;
  }
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 1.6;
  color: #fff;
  overflow-y: scroll;
}

.container {
  max-width: clamp(50rem, 85vw, 114rem);
  padding: 0 2.4rem;
  margin: 0 auto;
}

section:nth-child(odd) {
  background-color: var(--color-black-light);
}

section:nth-child(even) {
  background-color: var(--color-black);
}

.header {
  position: absolute;
  top: 0;
  right: 0;
  color: #fff;
  width: 100%;
  z-index: 100;
  background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9));
}

.header-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem 0;
}
.header-navigation ul {
  display: flex;
  text-transform: capitalize;
  font-size: 1.7rem;
  list-style: none;
  font-weight: 700;
}
@media only screen and (max-width: 50em) {
  .header-navigation ul {
    display: none;
  }
}
.header-navigation ul li {
  padding-left: 2.8rem;
}
.header-navigation ul li a {
  text-decoration: none;
  color: #fff;
  padding: 1.8rem 0;
  border-bottom: 2px solid transparent;
  transition: border 0.5s;
}
.header-navigation ul li a:hover {
  border-bottom: 2px solid var(--color-yellow);
}
.header-navigation .logo {
  font-size: 2.5rem;
  font-weight: 700;
}
.header-navigation .nav-icon {
  display: none;
  border: 1px solid #fff;
}
@media only screen and (max-width: 50em) {
  .header-navigation .nav-icon {
    display: block;
  }
}

.heading {
  font-weight: 700;
  text-transform: uppercase;
}
.heading--1 {
  font-size: clamp(2.5rem, 4vw, 4rem);
}
.heading--2 {
  font-size: clamp(2rem, 4vw, 3rem);
}

.btn {
  text-transform: uppercase;
  padding: 1rem clamp(1.2rem, 3vw, 3rem);
  border-radius: 3px;
  font-family: inherit;
  font-size: 1.5rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
}
.btn__primary {
  background-color: var(--color-yellow);
  color: #000;
  border: 1px solid transparent;
  transition: background-color 0.3s;
}
.btn__primary:hover {
  background-color: var(--color-yellow-dark);
}
.btn__secondary {
  background-color: transparent;
  color: #fff;
  border: 1px solid var(--color-yellow);
  transition: all 0.3s;
}
.btn__secondary:hover {
  background-color: var(--color-yellow-light);
  border: 1px solid var(--color-yellow-light);
  color: #000;
}

.link-button {
  text-decoration: none;
  padding: 0.4rem 0;
  color: #fff;
  border-bottom: 2px solid var(--color-yellow);
}
.link-button:hover {
  font-style: italic;
}

.form {
  padding: 0.8rem clamp(1rem, 3vw, 3rem);
  border-radius: 3px;
  font-family: inherit;
  font-size: 1.6rem;
  border: none;
  width: 100%;
}
.form:focus {
  outline: none;
}
.form__input {
  border-bottom: 2px solid #fff;
  background-color: transparent;
  color: #fff;
  resize: none;
}
.form__input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.section-about {
  padding: clamp(4rem, 10vw, 12rem) 0rem;
}

.about-box {
  display: grid;
  grid-template-columns: repeat(
    var(--two-col-layout),
    minmax(min-content, 1fr)
  );
  align-items: flex-start;
  column-gap: var(--grid-column-gap);
  row-gap: var(--grid-row-gap);
}
.about-box__content {
  display: grid;
  gap: 2rem;
  justify-items: flex-start;
  max-height: 100%;
}
.about-box__image {
  align-self: center;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 2rem;
  justify-items: center;
  align-items: center;
}
.about-box__image img {
  background-size: cover;
  background-position: center;
  max-width: 100%;
  height: auto;
  outline: 0.2rem solid;
}
.about-box__image img:last-child {
  grid-column: 1/-1;
  max-width: 60%;
  margin-top: -5rem;
  outline: 0.5rem solid var(--color-yellow);
  outline-offset: 0.5rem;
}

.section-courses {
  padding: clamp(4rem, 10vw, 12rem) 0rem;
}

.courses-box .courses-heading {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  text-align: center;
  margin-bottom: 4rem;
  max-height: 100%;
}

.courses-box .courses-content {
  display: grid;
  grid-template-columns: repeat(
    var(--three-col-layout),
    minmax(min-content, 1fr)
  );
  gap: 3rem;
}
.courses-box .courses-content .class-card {
  position: relative;
}
.courses-box .courses-content .class-card__img {
  border-left: 2px solid var(--color-yellow);
  background-position: center;
  background-size: cover;
  max-width: 100%;
  height: 100%;
}
.courses-box .courses-content .class-card__overlay {
  position: absolute;
  top: 0%;
  left: 0%;
  height: 0%;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.7);
  transition: height 0.5s;
}
.courses-box .courses-content .class-card__overlay .text {
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 2.5rem;
  text-align: center;
}
.courses-box .courses-content .class-card__title {
  position: absolute;
  top: 0;
  left: 0;
  width: 70%;
  padding: 1rem;
  clip-path: polygon(0 0, 100% 0, 70% 100%, 0 100%);
  background: linear-gradient(
    to right,
    var(--color-yellow),
    var(--color-yellow-dark)
  );
  text-transform: capitalize;
  font-weight: 700;
  color: #000;
}
.courses-box .courses-content .class-card:hover .class-card__overlay {
  height: 100%;
}

.offer-box {
  display: grid;
  grid-template-columns: repeat(
    var(--two-col-layout),
    minmax(min-content, 1fr)
  );
  column-gap: var(--grid-column-gap);
  row-gap: var(--grid-row-gap);
  align-items: center;
}

.offer {
  max-height: 100%;
  padding: 4rem 2.4rem;
}

.offer-img {
  background-image: linear-gradient(
      to right,
      rgba(254, 239, 27, 0.5),
      rgba(254, 239, 27, 0.3),
      rgba(254, 239, 27, 0.1)
    ),
    url('https://raw.githubusercontent.com/Manoranjan-D/responsive-website-gym/master/img/offer-img.jpg');
  filter: brightness(1.1);
  background-position: center;
  background-size: cover;
  max-width: 100%;
  height: 50rem;
}

.section-coaches {
  padding: clamp(4rem, 10vw, 12rem) 0rem;
}

.coaches-box .coache-heading {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  text-align: center;
  margin-bottom: 4rem;
  max-height: 100%;
}

.coaches-box .coache-content {
  display: grid;
  grid-template-columns: repeat(
    var(--three-col-layout),
    minmax(min-content, 1fr)
  );
  gap: 3rem;
}
.coaches-box .coache-content .c-card {
  position: relative;
}
.coaches-box .coache-content .c-card__img {
  background-position: center;
  background-size: cover;
  max-width: 100%;
  height: 100%;
  border-left: 2px solid var(--color-yellow);
}
.coaches-box .coache-content .c-card .overlay {
  position: absolute;
  top: 0%;
  right: 0;
  color: #fff;
  width: 0%;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: rgba(43, 43, 43, 0.9);
  transition: width 0.4s;
}
.coaches-box .coache-content .c-card .overlay * {
  flex: 1;
}
.coaches-box .coache-content .c-card__content {
  position: absolute;
  bottom: 0;
  background: linear-gradient(
    to right,
    var(--color-yellow),
    var(--color-yellow-dark)
  );
  color: #000;
  clip-path: polygon(0 0, 100% 0, 70% 100%, 0 100%);
  width: 70%;
  padding: 0.5rem 1rem;
}
.coaches-box .coache-content .c-card__content .c-name {
  color: #e5383b;
  text-transform: uppercase;
  font-weight: 700;
}
.coaches-box .coache-content .c-card__content .c-title {
  text-transform: capitalize;
}
.coaches-box .coache-content .c-card:hover .overlay {
  width: 16%;
}
.coaches-box .coache-content .c-card:hover .c-card__img {
  filter: brightness(0.8);
}

.section-review {
  padding: clamp(4rem, 10vw, 12rem) 0rem;
}

.review-box {
  display: grid;
  grid-template-columns: repeat(
    var(--two-col-layout),
    minmax(min-content, 1fr)
  );
  column-gap: var(--grid-column-gap);
  row-gap: var(--grid-row-gap);
}

.review-card {
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.review-card__image {
  max-width: 100%;
  height: auto;
  background-position: center;
  background-size: cover;
  border-radius: 50%;
}
.review-card__content {
  padding: 2rem 0rem;
  display: flex;
  flex-direction: column;
  text-align: center;
  position: relative;
}
.review-card__content .text {
  font-style: italic;
}
.review-card__content .name {
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.2rem;
  padding-top: 1.5rem;
}
.review-card__content::before {
  content: '\201F';
  display: block;
  font-size: 12rem;
  color: rgba(0, 0, 0, 0.8);
  position: absolute;
  top: -7rem;
  left: -1rem;
}

.contact-box {
  display: grid;
  grid-template-columns: repeat(
    var(--two-col-layout),
    minmax(min-content, 1fr)
  );
  column-gap: var(--grid-column-gap);
  row-gap: var(--grid-row-gap);
}

.form-grp {
  display: grid;
  row-gap: 3rem;
  padding: 4rem 2.4rem;
}

.form-flex {
  justify-self: flex-start;
}

#mapid {
  height: 55rem;
  width: 100%;
}

.section-footer {
  background-color: var(--color-black);
  padding: clamp(4rem, 10vw, 12rem) 0rem;
}

.footer-box {
  display: grid;
  grid-template-columns: repeat(
    var(--three-col-layout),
    minmax(min-content, 1fr)
  );
  column-gap: var(--grid-column-gap);
  row-gap: var(--grid-row-gap);
  color: #fff;
}

.contact-details .contact-data {
  list-style: none;
  display: flex;
  flex-direction: column;
}
.contact-details .contact-data * {
  padding: 0.4rem 0;
}
.contact-details .contact-data .social {
  display: flex;
}
.contact-details .contact-data .social * {
  padding-right: 1rem;
}

.footer-nav .nav-name {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 2rem;
}

.footer-nav ul {
  display: flex;
  flex-direction: column;
}

.footer-nav ul li {
  list-style: none;
  padding: 1.5rem 0;
}

.footer-nav ul li a {
  text-decoration: none;
  color: #fff;
}

.footer-nav ul li a::before {
  content: '\2192';
  display: inline-block;
  margin-right: 10px;
  margin-top: -4px;
  color: var(--color-yellow);
}

.newsletter__title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 2rem;
}

.newsletter__text {
  margin-bottom: 1.6rem;
}

.newsletter__input {
  display: flex;
}

.send-icon {
  padding: 0.9rem;
  background-color: #000;
  cursor: pointer;
}

.legel {
  border-top: 2px solid #fff;
  padding: 1.5rem 0;
  grid-column: 1/-1;
  text-align: center;
}
.legel .text {
  padding: 1rem 0;
}

.grid-center {
  grid-column: 1/-1;
  text-align: center;
}

.margin-right {
  margin-right: 2rem;
}

.margin-bottom {
  margin-bottom: 2rem;
}

.yellow {
  color: var(--color-yellow);
}

.underline::after {
  content: '';
  display: block;
  width: 80px;
  height: 2px;
  margin: auto;
  background-color: var(--color-yellow);
}

.section-hero {
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
    url('https://raw.githubusercontent.com/Manoranjan-D/responsive-website-gym/master/img/header-bg-img.jpg');
  background-size: cover;
  background-position: top;
  height: max(100vh, 60rem);
}

.hero-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  height: 100%;
  letter-spacing: 0.1rem;
}
.hero-box .description {
  font-size: 1.7rem;
}

Final Output:

Responsive Gym Website Design Fitness Center Template.gif
Read AlsoHow to Create a Trending Animated Button Using HTML and CSS.webpHow to Create a Trending Animated Button Using HTML and CSS

Conclusion:

In the ever-evolving digital landscape, a responsive gym website is not just a luxury—it's a necessity. We've explored the crucial elements of creating an inviting and functional gym landing page using HTML and CSS. By following the steps outlined in this guide, you're well on your way to building a website that not only showcases your fitness center but also provides an exceptional user experience.

Remember that your website is often the first interaction potential members have with your gym. It's your digital storefront, your virtual welcome mat. Make it count by ensuring it's mobile-friendly, visually appealing, and user-focused.

As technology advances and design trends evolve, don't forget to stay updated and continuously optimize your gym website. Monitor user feedback, analyze traffic data, and adapt to changing user preferences. By doing so, you'll not only attract more members but also retain them by providing an online experience that mirrors the quality of service they'll receive in your gym.

Now, armed with the knowledge of HTML, CSS, and responsive design principles, it's time to get started. Craft that outstanding gym landing page, make your fitness center shine online, and watch your membership numbers grow.

Best of luck with your gym website project! If you have any questions or need further assistance, feel free to reach out. Your online success story begins now.

Credit: Manoranjan-D

That’s a wrap!

I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.

Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.

And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!

Thanks!
Faraz 😊

Tags: gym website, responsive design, fitness center template, html and css, mobile-friendly gym site, user-friendly gym landing page, gym website structure, source code, creating a responsive gym website with html and css
End of the article

Subscribe to my Newsletter

Get the latest posts delivered right to your inbox

Latest Post