Creating a Gym website using HTML and CSS

Creating a Gym website using HTML and CSS

In this article, We will be Creating a Gym website using HTML and CSS.

So, Let’s first look at the HTML part of the website.

HTML

Firstly, We will link the style sheet in the head section.

Then we will import the font, we want to use on our website in the head section.

Then we will write the desired code to structure our website.

In this, We will make 2 sections, a header section and the main section called a container.

In the header section, we will make 3 partitions(headerLeft, headerMid, headerRight).

In headerLeft section, We will add the logo of Gym and the name of Gym.

In headerMid section, We will make a navigation menu.

In headerRight section, 2 buttons.

And In the main section, we will add 2 headings followed by a form that is used to get the basic information from the user and at the last, we will add 2 buttons to submit the form or reset the form.

That’s all about the HTML part.

You can get the image and logo from https://github.com/Avdhesharma21/Gym-website.

<html>

<head>
    <link rel="stylesheet" href="style.css">     <!-- Linking stylesheet in HTML page -->
    <link rel="preconnect" href="https://fonts.gstatic.com">     <!-- Importing font from google fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@500&display=swap" rel="stylesheet">
</head>

<body>
    <header>

        <div class="headerLeft">
            <div>
                <img src="gym_logo.jpg" alt="Logo">
            </div>
            <p>Avdhesh's Fitness Centre</p>
        </div>

        <div class="headerMid">
            <ul class="navbar">
                <li> <a href="#" class="active">Home</a></li>
                <li> <a href="#">About</a></li>
                <li> <a href="#">Help</a></li>
                <li> <a href="#">Service</a></li>
            </ul>
        </div>

        <div class="headerRight">
            <button class="btn">Contact Us</button>
            <button class="btn">Email Us</button>
        </div>

    </header>

    <div class="container">

        <h1>Join The Best Gym of Udaipur Now !!</h1>
        <h2>hurry up guys !!!</h2>

        <form action="noaction.php">

            <div class="form-group">
                <input type="text" placeholder="Enter Your Name">
            </div>

            <div class="form-group">
                <input type="text" placeholder="Enter Your Age">
            </div>

            <div class="form-group">
                <input type="text" placeholder="Enter Your Mobile No.">
            </div>

            <div class="form-group">
                <input type="text" placeholder="Enter Your Address">
            </div>

            <div>
                <button class="btn1" type="submit">Submit</button>
                <button class="btn1" type="reset">Reset</button>
            </div>

        </form>

    </div>
</body>

</html>

Output:

Our website will look like this(without CSS).

Gym-Website-only-HTML

CSS

Firstly, We will reset the CSS by setting the value of margin and padding as 0.

Then, We will write the desired code to make our website look good.

The * selector in CSS is used to select all the elements that are present in the HTML document. So in this, we have stated that the font of the whole website will be Baloo Bhai 2 (https://fonts.google.com/specimen/Baloo+Bhai+2?query=baloo+bhai+2).

Then, We applied the background to the body to set the background of our website. and used no-repeat so that the image doesn’t repeat itself.

You can download the image from https://github.com/Avdhesharma21/Gym-website.

Then, we will write the CSS for the sections as required to beautify our website.

* {
  font-family: "Baloo Bhai 2", cursive;
  margin: 0;
  padding: 0;
}

body {
  background-image: url(gym.jpg);
  background-repeat: no-repeat;
}

.left {
  display: inline-block;
  text-align: center;
  position: absolute;
  margin: 10px;
  margin-top: 0;
}

.left p {
  color: white;
  font-size: 20px;
}

.left img {
  width: 175px;
  filter: invert(100%);
}

.mid {
  text-align: center;
  display: block;
  width: 36%;
  margin: auto;
}

.right {
  display: inline-block;
  position: absolute;
  top: 8px;
  right: 10px;
  margin: 5px;
}

.navbar {
  margin: 20px 0px;
}

.navbar li {
  border-radius: 10px;
  font-size: 30px;
  display: inline-table;
  padding: 0px 12px;
  margin: 7px;
}

.navbar li a {
  color: white;
  text-decoration: none;
}

.navbar li a:hover,
.navbar li a.active {
  color: #007a4d;
  cursor: pointer;
}

.btn {
  color: white;
  background-color: #007a4d;
  font-size: 17px;
  margin: 17px 10px;
  padding: 2px 14px;
  border-radius: 10px;
}

.btn:hover {
  cursor: pointer;
  color: black;
}

.container {
  font-size: 40px;
  margin: 80px 90px 0 90px;
  padding: 10px 30px 0 30px;
}

h1 {
  font-size: 70px;
  color: white;
}

h2 {
  color: white;
}

.form-group input {
  font-size: 22px;
  height: 35px;
  width: 370px;
  border-radius: 5px;
  padding: 0 10px;
}

.form-group ::placeholder {
  font-size: 22px;
}

.btn1 {
  color: white;
  background-color: #007a4d;
  font-size: 27px;
  margin: 0px 15px;
  padding: 0px 40px;
  border-radius: 10px;
}

.btn1:hover {
  cursor: pointer;
  color: black;
}

Output:

Finally, Our website will look like this.

Gym Website using HTML and CSS

Hope this article will help you to create your first website using HTML and CSS and if you have any problem or queries regarding this, post them in the comments section and we will be glad to assist you.

Leave a Reply