Gym Fitness Website Using HTML & CSS

In this tutorial, we will create a Gym Fitness Website Using HTML & CSS. This step-by-step guide focuses on using HTML and CSS to build a simple, yet visually engaging, front-end template for a fitness website. Our gym fitness website design will include an immersive background, a clean navigation menu, and an interactive form.

By the end of this tutorial, you’ll know how to use HTML and CSS to develop a responsive and professional-looking website for the fitness industry.


Why Create a Gym Fitness Website Using HTML & CSS?

A Gym Fitness Website Using HTML & CSS is ideal for attracting potential members and displaying fitness services in an accessible way. With a dark theme, vibrant button interactions, and a layout that highlights content, this design captures the energy of a gym environment. Whether you’re a developer or a fitness enthusiast, this guide will help you set up a website with essential components like a navigation bar, interactive buttons, and a stylish registration form.


Setting Up the Layout for the Gym Fitness Website

This gym fitness website template is designed to provide an inviting and engaging experience for users. The layout features a full-screen background image, setting an energetic and motivational tone for visitors. The color palette consists primarily of dark tones, with accents of red, yellow, and white, giving a sleek, professional look.

The header section includes three main sections:

  • Left: Displays the gym’s logo or branding image.
  • Center: Houses the navigation menu, which links to essential sections like Home, Products, Fitness Calculator, and Contact Us.
  • Right: Includes call-to-action buttons for Instagram and Email Us, allowing users to quickly connect via social media or email.

A primary feature of the page is the container section, which introduces the gym with a bold headline: “Join the best GYM of India!” Below the headline, a simple registration form allows users to enter their name, age, gender, city, phone number, and email. Each form field is styled with yellow text on a black background and rounded borders, adding to the site’s modern look. A “Submit” button in red and black completes the form, designed to capture user details for potential membership or queries.

The website uses a font style that is casual yet elegant, enhancing readability and adding a touch of personality to the design. Additionally, subtle hover effects on navigation links and buttons provide interactivity, encouraging users to explore further. This template creates a professional yet approachable impression, likely to appeal to fitness enthusiasts and gym-goers looking for a high-quality facility.


Code Snippet

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Fitness</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Merienda:wght@300&family=Yatra+One&display=swap');

      body {
        margin: 0px; /*CSS Reset*/
        padding: 0px; /*CSS Reset*/
        background-image: url(img4.jpg);
        background-repeat: no-repeat;
        height: 100vh;
        width: 100%;
        background-position: center;
        background-size: cover;
        font-family: 'Merienda', cursive;
      }
      .left {
        display: inline-block;
        position: absolute;
        top: 20px;
        left: 24px;
        color: wheat;
        /* border: 2px solid red; */
      }
      .left img{
        width: 75px;
      }
      .mid {
        display: block;
        width: 50%;
        margin: 12px auto;
        top: 20px;
        
        color: wheat;
        /* border: 2px solid yellow; */
        list-style: none;
    }
   
    .right {
        display: inline-block;
        position: absolute;
        top: 20px;
        right: 24px;
        color: wheat;
        /* border: 2px solid blue; */
        
    }
    .navbar{
        display: inline-block;
        


}
.navbar li{
        display: inline-block;
        font-size: 17px;

    }
    .navbar li a{
        color: white;
        padding: 20px 15px;
        text-decoration: none;

    }
    .navbar li a:hover{
        color: yellow;
        text-decoration: underline;

    }
    .btn{
        border: 2px solid red;
        color: red;
        background: black;
        border-radius: 6px;
        padding: 4px 10px;
        cursor: pointer;
    }
    .btn:hover{
        color: yellow;
        background:black;
        border: 2px solid yellow;
    }
    .container{color: aliceblue;
        /* border: 2px solid wheat; */
        width: 600px;
    padding: 9px 26px;
    /* margin: 70px; */
    border-radius: 15px;
    margin-top: 163px;
    margin-left: 69px;
    }
    .group input{    display: block;
    border: 2px solid yellow;
    text-align: center;
    width: 400px;
    padding: 4px 3px;
    margin: 11px auto;
    border-radius: 15px;
    font-size: 15px;
    background: black;
    color: yellow;
    font-family: 'Merienda', cursive;
    
    }
    .container h1{
        text-align: center;
        color: yellow;
    }
    .container button{
        display: block;
        width: 50.5%;
        margin: auto;
        margin-top:5px ;
    }
    </style>
  </head>
  <body>
    <header class="header">
      <div class="left">
        <img src="img2.png" alt="">
      </div>
      <div class="mid" id="center">
        <ul class="navbar">

            <li><a href="#">Home</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Fitness Calculator</a></li>
            <li><a href="#">Contact Us</a></li>
        </ul>
      </div>
      <div class="right">
        <button class="btn">Instagram </button>
        <button class="btn">Email Us</button>
      </div>
    </header>
    <div class="container">
       <h1><u>Join the best GYM of India !</u></h1>
       <form action="noaction.php">
        <div class="group">
           <div>
            <input type="text" name="" placeholder="Enter Your Name">
           </div>
           <div>
            <input type="text" name="" placeholder="Enter Your Age">
           </div>
           <div>
            <input type="text" name="" placeholder="Enter Your Gender">
           </div>
           <div>
            <input type="text" name="" placeholder="Enter Your City">
           </div>
           <div>
            <input type="text" name="" placeholder="Enter Your Phone Number">
           </div>
           <div>
            <input type="text" name="" placeholder="Enter Your Email">
           </div>
           
        </div>
    </form>
    <button class="btn">Submit </button>

    </div>
  </body>
</html>

OUTPUT

GYM FITNESS WEBSITE


Styling the Form in Your Gym Fitness Website

The CSS part of this gym fitness website code controls the visual layout, styling, and user interaction effects. Here’s a breakdown of each CSS section:

1. Global Styles and Resets

body {
   margin: 0px; /* Removes default margin */
   padding: 0px; /* Removes default padding */
   background-image: url(img4.jpg); /* Sets background image */
   background-repeat: no-repeat; /* Prevents image repetition */
   height: 100vh; /* Full viewport height */
   width: 100%; /* Full width */
   background-position: center; /* Centers the background image */
   background-size: cover; /* Scales image to cover the entire background */
   font-family: 'Merienda', cursive; /* Applies custom font */
}

The global styles remove default margins and paddings, creating a uniform appearance across browsers. Additionally, the background image covers the whole page, contributing to an immersive and visually appealing layout. By setting the font-family to a Google font, the design gains a personalized touch.

2. Header Layout and Sections

.left, .mid, .right {
   color: wheat; /* Text color */
}
.left {
   display: inline-block;
   position: absolute;
   top: 20px;
   left: 24px;
}
.left img {
   width: 75px; /* Logo size */
}

The .left class places the logo on the top-left corner of the page, with a bit of spacing from the edges for readability. Meanwhile, .left img resizes the logo image to keep it well-proportioned within the header.

.mid {
   display: block;
   width: 50%;
   margin: 12px auto;
   top: 20px;
   list-style: none; /* Removes bullets from list items */
}

In the center section, .mid displays the navigation menu. It removes list item bullets for a cleaner look.

.right {
   display: inline-block;
   position: absolute;
   top: 20px;
   right: 24px;
}

The .right class aligns the contact buttons (Instagram and Email) on the top-right side of the header, balancing the layout.

3. Navbar Styling

.navbar li {
   display: inline-block; /* Aligns nav items horizontally */
   font-size: 17px;
}
.navbar li a {
   color: white;
   padding: 20px 15px; /* Padding for clickable area */
   text-decoration: none;
}
.navbar li a:hover {
   color: yellow; /* Changes color on hover */
   text-decoration: underline;
}

In the navbar, each list item displays horizontally, creating a visually appealing menu. Padding between links increases clickable area, while the hover effect changes the color to yellow and underlines the text, providing a clear interactive cue for users.

4. Button Styling

.btn {
   border: 2px solid red;
   color: red;
   background: black;
   border-radius: 6px;
   padding: 4px 10px;
   cursor: pointer;
}
.btn:hover {
   color: yellow;
   border: 2px solid yellow;
}

The .btn class styles buttons such as Instagram and Email with a bold red color scheme. When users hover over a button, the color changes to yellow, providing an instant visual response.

5. Container and Form Styling

.container {
   color: aliceblue;
   width: 600px; /* Limits container width */
   padding: 9px 26px; /* Adds padding for content spacing */
   border-radius: 15px;
   margin-top: 163px;
   margin-left: 69px;
}

The .container class defines the main section for user interaction, including the title and form. Its padding and rounded border make it distinct from the background, drawing users’ attention.

.group input {
   display: block;
   border: 2px solid yellow;
   text-align: center;
   width: 400px;
   padding: 4px 3px;
   margin: 11px auto; /* Centers inputs horizontally */
   border-radius: 15px;
   font-size: 15px;
   background: black;
   color: yellow;
   font-family: 'Merienda', cursive; /* Applies the same font to inputs */
}

Each input field within .group input has a yellow border, black background, and centered text. These styles keep the form consistent with the site’s overall design.

.container h1 {
   text-align: center;
   color: yellow;
}
.container button {
   display: block;
   width: 50.5%;
   margin: auto;
   margin-top: 5px;
}

Finally, the title heading is centered, and the button aligns horizontally within the container to maintain a well-balanced design.


Bringing It All Together: Your Gym Fitness Website Using HTML & CSS

By following this guide, you’ll gain hands-on experience with HTML and CSS to create a functional Gym Fitness Website Using HTML & CSS. From setting up headers and navigation to styling buttons and forms, each step enhances your skills and prepares you for real-world web design projects in the fitness industry.

 

Some useful links to learn HTML & CSS for beginners :

 

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top