Home Workout Website HTML & CSS With Source Code

Hello Geeks! When you are in school or college then you have to study coding in computer science. Are you learning HTML and CSS? Then of course you are given to make projects on it in school or college. And if you are confused which project you should work on? That's why we are going to give you the idea of ​​a coding project here, as well as provide you its complete source code for free.

If you want to make website project for school using HTML and CSS then Home Workout Website will be a good project for you. In this article I have taught you to make Home Workout website with HTML and CSS. But let's get to know a little bit about HTML and CSS.

What is HTML?

The full form of HTML is Hypertext Markup Language. It is used to define the structure of any website. Generally HTML makes up the block structure of a website. As you are visiting this website (neerajyadav.com) right now, it has many elements like Header Content Part and Footer etc. We make all these by coding through the tags of HTML.

What is CSS?

As an example, the neerajyadav.com website has been designed in different ways, such as colors, fonts, alignments, etc. Styling is provided to the website through CSS. Let's say HTML is a house which is made of bricks only and CSS is the paint applied to the house to give it a good look.

Home Workout Website with HTML, CSS

home workout website using html css source code

Now let's start building our project. For this, we will follow some steps which are given below.

Step 1: Installing HTML Editor

To write and edit HTML code, we need a code editor, so first we will download and install it. Here we are suggesting you some good HTML code editors, download and install them.

Windows/Mac Users- Microsoft VS Code

Android/iOS Users- Spck Editor

Step 2: Writing Code

We have given you the code of home workout website below. Run it by copying and pasting it in your code editor.

HTML, CSS code of Home Workout Website

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fire Fitnes</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Architects+Daughter&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Acme&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Balsamiq+Sans&display=swap" rel="stylesheet">
    <style>
        html,
        body {
            box-sizing: border-box;
            height: 100%;
            margin: 0;
            background-color: rgba(85, 85, 85, 0.219);
        }
        
        *,
        *:before,
        *:after {
            box-sizing: inherit;
        }
        /* Header + Navigation Menu */
        
        header {
            background-color: #000000;
            position: sticky;
        }
        
        .inner-header {
            width: 90%;
            margin: auto;
        }
        
        .logo {
            display: inline-block;
        }
        
        .logo img {
            width: 70px;
            filter: invert();
            margin: 2px 5px;
        }
        
        .right_btn {
            float: right;
            margin: 17px 10px 0;
        }
        
        .right_btn button {
            border: 2px;
            border-radius: 5px;
            background-color: rgb(255, 255, 255);
            padding: 7px 15px;
            cursor: pointer;
            font-family: 'Acme', sans-serif;
            font-size: 20px;
        }
        
        .right_btn button:hover {
            background-color: rgba(177, 217, 250, 0.863);
        }
        /* Background Image CSS */
        
        .bgimg {
            background-image: url("https://thepoetryline.b-cdn.net/img/banner-1.jpg");
            height: 120%;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            margin-bottom: 20px;
        }
        /* Bsox */
        
        .box {
            position: absolute;
            left: 0;
            margin: 20px;
            max-width: 500px;
            padding: 16px;
        }
        
        .box .stay_fit {
            font-size: 40px;
            color: white;
            margin: 30px 0 20px;
            font-family: 'Acme', sans-serif;
        }
        
        .box .join_us {
            font-size: 35px;
            margin: 10px 0 60px;
            color: #fff;
            font-family: 'Acme', sans-serif;
        }
        
        .box img {
            width: 150px;
            transform: rotate(15deg);
            /* filter: invert(); */
            margin-top: 5px;
        }
        
        @media only screen and (max-width: 600px) {
            .box img {
                margin-left: -25px;
            }
        }
        /* Middile Text */
        
        .m_text {
            text-align: center;
            padding: 20px 0px;
            background-color: rgba(0, 0, 0, 0.089);
        }
        
        .quote {
            text-align: center;
            font-size: 20px;
            text-decoration: wavy;
            border-radius: 2px;
            color: rgb(255, 0, 0);
            font-family: 'Architects Daughter', cursive;
            font-weight: bold;
            text-shadow: rgb(58, 55, 55);
        }
        /* Plans CSS */
        
        .column {
            float: left;
            width: 33.3%;
            margin-bottom: 16px;
            padding: 0 8px;
        }
        
        @media screen and (max-width: 650px) {
            .column {
                width: 100%;
                display: block;
            }
        }
        
        .card {
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.651);
            border-radius: 5px;
            background-color: white;
        }
        
        img {
            border-radius: 5px;
        }
        
        .container {
            padding: 0 16px;
            text-align: center;
            border-radius: 5px;
        }
        
        .container::after,
        .row::after {
            content: "";
            clear: both;
            display: table;
        }
        
        .title {
            color: grey;
        }
        
        .button {
            border: none;
            outline: 0;
            display: inline-block;
            padding: 8px;
            color: white;
            background-color: #000;
            text-align: center;
            cursor: pointer;
            width: 100%;
            border-radius: 5px;
        }
        
        .button:hover {
            background-color: #555;
        }
        
        footer {
            background-color: #000;
            color: #fff;
            font-size: 16px;
            min-height: 20px;
            text-align: center;
            padding: 5px;
        }
    </style>

</head>

<body>

    <header class="header-section">

        <div class="inner-header">
            <div class="logo">

                <img src="https://thepoetryline.b-cdn.net/img/logo.png" alt="bg_image">

            </div>

            <div class="right_btn">

                <button class="contact_btn">Contact Us</button>

            </div>
        </div>

    </header>



    <!-- Background Image -->
    <div class="bgimg">

        <div class="box">

            <p class="stay_fit">Stay Fit Stay Hit</p>
            <p class="join_us">Join us now</p>

            <img src="https://thepoetryline.b-cdn.net/img/gifimg.gif" alt="">

        </div>



    </div>


    </div>

    </div>

    <!-- Checkout our Plans -->
    <div class="middle_text">

        <h2 class="m_text">Choose Your Training</h2>

        <p class="quote">"All progress takes place outside the comfort zone."</p>

    </div>

    <!-- Plans Starts From Here -->
    <div class="row">
        <div class="column">
            <div class="card">
                <img src="https://thepoetryline.b-cdn.net/img/arm.png" alt="Jane" style="width:100%">
                <div class="container">
                    <h2>Arm Workout</h2>

                    <p><button class="button">Start Now <i class="fa fa-arrow-circle-right"></i></button></p>
                </div>
            </div>
        </div>

        <div class="column">
            <div class="card">
                <img src="https://thepoetryline.b-cdn.net/img/legs.png" alt="Mike" style="width:100%">
                <div class="container">
                    <h2>Legs Workout</h2>

                    <p><button class="button">Start Now <i class="fa fa-arrow-circle-right"></i></button></p>
                </div>
            </div>
        </div>

        <div class="column">
            <div class="card">
                <img src="https://thepoetryline.b-cdn.net/img/full.png" alt="John" style="width:100%">
                <div class="container">
                    <h2>Full Body</h2>

                    <p><button class="button">Start Now <i class="fa fa-arrow-circle-right"></i></button></p>
                </div>
            </div>
        </div>
    </div>
    <!-- Plans End -->

    <!-- Footer Starts -->

    <footer>

        <p> Made By ❤️ <b>Neeraj Yadav<b> </p>

    </footer>

</body>

</html>

Download Source Code/download/button

Step 3: Running Code

Now to see the output of this code, start the live server in Microsoft VS Code. View the output by clicking on the Run button in Android.

Give us a feedback about our content...

Post a Comment

Give us a feedback about our content...

Post a Comment (0)

Previous Post Next Post