Join Now

Responsive Gym Website using Html And Css

  • By CodingManish
  • Responsive Gym Website using Html And Css

    Get ready to immerse yourself in the captivating world of web development! In this thrilling tutorial, we'll equip you with the essential skills to construct a dynamic Gym Website using HTML and CSS. Step-by-step, we'll guide you through the process, empowering you to design and develop a website that not only showcases the vitality of your gym but also engages visitors with its dynamic features.

  • Video Tutorial of Complete Responsive Gym Website.
  • Why Build a Gym Website?

    A Gym Website serves as a powerful tool for attracting new members, showcasing your facilities, and promoting your services. By creating a dynamic and visually appealing website, you can effectively communicate your gym's brand identity and values while engaging potential customers.

    Key Highlights

    • HTML Structure: Learn how to structure your website's content to ensure clarity and accessibility.
    • CSS Styling: Dive into CSS to customize the appearance of your website and create a visually appealing design.
    • Responsive Design: Ensure that your website looks great and functions seamlessly across various devices and screen sizes.


    Steps to Create Your Gym Website

      Set Up Your Project:

    • Create a folder named "my_gym_website" or any preferred name.
    • Inside the folder, create two files: index.html and style.css.

    HTML Structure (index.html):
      
           
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>fitness website</title>
            <link rel="stylesheet" href="style.css">
            <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
            <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
        </head>
        <body>
        
        
            <section class="hero">
                <div class="container">
                    <div class="logo">FITNESS CLUB</div>
        
                    <div class="content">
                        <h2 class="main-heading">Push<span>yourself</span></h2>
        
                        <button class="btn">
                            <a href="#">Join today</a>
                        </button>
                    </div>
                </div>
            </section>
        
            <section class="about">
                <div class="container">
                    <div class="row">
                        <div class="col about-content">
                            <h2 class="heading">About our fit <br>family</h2>
        
                            <p class="para-line white">
                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis nostrum tempora velit sint, asperiores necessitatibus veniam tenetur fugit voluptatibus odio, rerum ex mollitia, illum enim?
                            </p>
        
                            <button class="btn-link">
                                <a href="#">Learn more</a>
                            </button>
                        </div>
                        <div class="col about-img">
                            <img src="img/about.png" alt="About image" class="aboutImg">
                        </div>
                    </div>
                </div>
            </section>
        
            <section class="offer">
                <div class="container">
                    <h2 class="heading">What we offer</h2>
                    <p class="sub-heading white">
                        We're committed to bringing you the best workout experience.
                    </p>
        
                    <div class="row">
                        <div class="col">
                            <div class="offer-card offer-tour">
                                <h2 class="offer-name">
                                    Tour our gym
                                </h2>
                            </div>
                        </div>
                        <div class="col">
                            <div class="offer-card offer-classes">
                                <h2 class="offer-name">
                                    Check out our <br>
                                    group classes
                                </h2>
                            </div>
                        </div>
                        <div class="col">
                            <div class="offer-card offer-training">
                                <h2 class="offer-name">
                                    Ask about <br>
                                    personal training
                                </h2>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        
            <section class="testimonial">
                <div class="container">
                    <h2 class="heading">
                        What they say
                    </h2>
        
                    <div class="row">
                        <div class="col">
                            <div class="review-card">
                                <div class="author-pic author-pic-a"></div>
                                <div class="review-content">
                                    <p class="review para-line">
                                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium corporis .
                                    </p>
                                    <p class="author-name">Donna Bleaker, 31</p>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="review-card">
                                <div class="author-pic author-pic-b"></div>
                                <div class="review-content">
                                    <p class="review para-line">
                                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium corporis .
                                    </p>
                                    <p class="author-name">Lauren Cross, 28</p>
                                </div>
                            </div>
                        </div>
                        <div class="col">
                            <div class="review-card">
                                <div class="author-pic author-pic-c"></div>
                                <div class="review-content">
                                    <p class="review para-line">
                                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium corporis .
                                    </p>
                                    <p class="author-name">Thomas Xue, 44</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        
            <footer class="footer-widget">
                <div class="container">
                    <h2 class="heading">
                        Get in touch <br>
                        today
                    </h2>
                </div>
            </footer>
        
            <footer class="footer-bottom">
                <div class="container">
                    <div class="row">
                        <div class="col">
                            <div class="address">
                                <h2 class="contact-heading">
                                    Mailing address
                                </h2>
                                <p class="contact-para-line">
                                    360005 Rajkot, Gujarat - 60
                                </p>
                            </div>
                        </div>
                        <div class="col">
                            <div class="mail">
                                <h2 class="contact-heading">
                                    Email address
                                </h2>
                                <p class="contact-para-line">
                                    fitnessclub@gmail.com
                                </p>
                            </div>
                        </div>
                        <div class="col">
                            <div class="number">
                                <h2 class="contact-heading">
                                    Phone number
                                </h2>
                                <p class="contact-para-line">
                                    (+91) 8829186794
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </footer>
        
        </body>
        </html>
        
            
            
        
      
      
    CSS Styling (style.css):
        
      
        
        /*--------- Google fonts ------------*/
        @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,700;1,800;1,900&display=swap');
        
        
        :root
        {
            --primary-font: 'Poppins', sans-serif;
        
            --primary-color: #f9ef23;
            --secondry-color: #141414;
            --third-color: #ffffff;
        }
        
        
        *
        {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        html
        {
            font-size: 16px;
            font-weight: 400;
        }
        
        body
        {
            background-color: var(--secondry-color);
            font-family: var(--primary-font);
        }
        
        .container
        {
            padding: 1rem;
        }
        
        img
        {
            max-width: 100%;
            height: auto;
        }
        
        .heading
        {
            color: var(--primary-color);
            font-size: 2rem;
            font-weight: 900;
            font-style: italic;
            line-height: 1;
            text-transform: uppercase;
            margin-bottom: 1.5rem;
        }
        
        .white
        {
            color: var(--third-color);
        }
        
        
        .hero
        {
            height: 100vh;
            background-image: url(img/main.jpg);
            background-position: top center;
            background-size: cover;
        }
        
        .logo
        {
            color: var(--third-color);
            font-weight: 800;
        }
        
        .content
        {
            height: 90vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        
        .main-heading
        {
            color: var(--third-color);
            font-size: 2.5rem;
            font-weight: 900;
            font-style: italic;
            text-transform: uppercase;
        }
        
        .main-heading span
        {
            color: var(--primary-color);
        }
        
        .btn
        {
            margin-top: 1rem;
            background-color: var(--primary-color);
            border: none;
            outline: none;
            padding: 0.8rem 2rem;
            transition: .5s;
        }
        
        .btn:hover
        {
            transform: scale(1.1);
            cursor: pointer;
        }
        
        .btn a
        {
            color: var(--secondry-color);
            text-decoration: none;
            font-size: 0.9rem;
            text-transform: uppercase;
        }
        
        
        .about .container
        {
            padding: 3rem 1rem;
        }
        
        .about .container .row
        {
            display: flex;
            flex-direction: column-reverse;
            justify-content: center;
            align-items: center;
            gap: 2rem;
        }
        
        .btn-link
        {
            margin-top: 2rem;
            font-size: 1rem;
            text-transform: capitalize;
            border: none;
            outline: none;
            background-color: #ffffff00;
        }
        
        .btn-link a
        {
            color: var(--third-color);
            text-decoration: none;
        }
        
        .offer .container
        {
            padding: 3rem 1rem;
        }
        
        .offer-card
        {
            height: 60vh;
            width: 100%;
            margin: 2rem 0;
            background-size: cover;
            position: center center;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .offer-tour
        {
            background-image: url(img/tour.png);
        }
        
        .offer-classes
        {
            background-image: url(img/classes.png);
        }
        
        .offer-training
        {
            background-image: url(img/training.png);
        }
        
        .offer-name
        {
            color: var(--third-color);
            text-transform: uppercase;
            font-size: 1.5rem;
            font-style: italic;
            text-align: center;
        }
        
        .testimonial .container
        {
            padding: 2rem 1rem;
        }
        
        .review-card
        {
            margin: 1.5rem 0;
        }
        
        .author-pic
        {
            height: 45vh;
            background-size: cover;
            background-position: top center;
        }
        
        .author-pic-a
        {
            background-image: url(img/author-a.png);
            background-position: center center;
        }
        
        .author-pic-b
        {
            background-image: url(img/author-b.png);
        }
        
        .author-pic-c
        {
            background-image: url(img/author-c.png);
        }
        
        .review-content
        {
            background-color: var(--primary-color);
            padding: 1rem;
        }
        
        .author-name
        {
            font-size: 1.2rem;
            font-style: italic;
        }
        .footer-widget
        {
            height: 60vh;
            background-image: url(img/footer.avif);
            background-size: cover;
            background-position: center center;
        }
        
        .footer-widget .container
        {
            padding: 2rem 2rem;
        }
        
        .footer-bottom
        {
            background: var(--primary-color);
        }
        
        .footer-bottom .container
        {
            padding: 2rem 1.5rem;
        }
        
        .footer-bottom .container .row .col
        {
            margin: 1.5rem 0;
        }
        
        .contact-heading
        {
            text-transform: uppercase;
            font-style: italic;
        }
        
        @media screen and (min-width: 768px)
        {
            .container
            {
                max-width: 1300px;
                margin: 0 auto;
            }
        
            .heading
            {
                font-size: 3.5rem;
            }
        
        
            .hero .container
            {
                padding: 2.5rem 5rem;
            }
        
            .logo
            {
                font-size: 1.5rem;
                font-weight: 700;
            }
        
            .main-heading
            {
                font-size: 6.5rem;
                font-weight: 800;
            }
        
            .btn a
            {
                font-size: 1.5rem;
            }
        
            .about .container
            {
                padding: 6rem 4rem;
            }
        
            .about .container .row
            {
                flex-direction: row;
                gap: 5rem;
            }
        
            .about-content
            {
                width: 40%;
            }
        
            .about-img
            {
                width: 55%;
            }
        
            .btn-link
            {
                font-size: 1.3rem;
            }
        
            .offer .container
            {
                padding: 1rem 4rem;
            }
        
            .offer .container .heading, .offer .container .sub-heading
            {
                text-align: center;
            }
        
            .offer .container .row
            {
                display: flex;
                flex-direction: row;
                gap: 4rem;
                width: 100%;
            }
        
            .offer .container .row .col
            {
                width: 100%;
            }
        
        
            .testimonial .container
            {
                padding: 6rem 4rem;
            }
        
            .testimonial .container .heading
            {
                text-align: center;
            }
        
            .testimonial .container .row
            {
                display: flex;
                flex-direction: row;
                gap: 4rem;
                width: 100%;
            }
        
        
            .footer-widget
            {
                height: 70vh;
            }
        
            .footer-widget .container
            {
                padding: 6rem 4rem;
            }
        
        
            .footer-bottom .container
            {
                padding: 2rem 4rem;
            }
        
            .footer-bottom .container .row
            {
                display: flex;
                justify-content: space-between;
            }
        }
        
      
      
      

    Download the source code files for this project for free by clicking the Download button.

    Total projects



    Related Projects


  •   Gym Website Using HTML, CSS & JavaScript
    14 mins read

    Gym Website Using HTML, CSS & JavaScript

    codingmanish

    26 Oct 2023

    Read more

  •  Simple Responsive Website Using Html and Css
    12 mins read

    Simple Responsive Website Using Html and Css

    codingmanish

    14 Dec 2023

    Read more

  • ...

    your source for awesome coding projects! Let's dive into the world of code together! 🚀