Gym Website

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@600&display=swap" rel="stylesheet">
    <style>
        
        body {
            font-family: 'Baloo Bhai 2', cursive;
            color: white;
            background-image: url(images/gym.jpg);
            background-repeat: no-repeat;
        }

        img {
            height: 50px;
            width: 50px;
            margin-left: 50px;
            margin-top: 20px;
        }

        .suraj {
            margin: 0px 25px;
            font-size: 20px;
        }

        ul {
            text-align: right;
            margin-top: 0px;
            margin-left: 0px;
            margin-bottom: 0px;
            margin-right: 50px;
        }

        a {
            text-decoration: none;
            color: white;
            margin: 15px;
            
        }

        .right {
            text-align: right;
        }

        .detail {
            border: 3px solid white;
            margin-right: 700px;
            margin-left: 50px;
            margin-top: 50px;
            padding-bottom: 100px;
            border-radius: 20px;
        }

        h1 {
            text-align: center;
        }

        .detail {
            text-align: center;
            padding: 40px 40px;
        }

        .form {
            width: 80%;
            height: 30px;
            margin-top: 10px;
            border-style: none;
            border-radius: 5px;
            text-align: center;
            font-family: 'Baloo Bhai 2', cursive;
        }

        .btn {
            width: 82%;
            height: 40px;
            margin-top: 10px;
            background-color: black;
            color: white;
            border-style: none;
            border-radius: 5px;
            font-family: 'Baloo Bhai 2', cursive;
            cursor: pointer;
            border: 1px solid white;
        }

        .btns {
            border-style: none;
            background-color: black;
            color: white;
            border-radius: 5px;
            padding: 10px 20px;
            margin: 0px 10px;
            border: 1px solid white;
            cursor: pointer;
            font-family: 'Baloo Bhai 2', cursive;
            font-size: 15px;
        }

        a:hover {
            color: grey;
        }

        .mid {
            position: absolute;
            bottom: 100px;
            top: 65px;
            left: 450px;
            right: 450px;
        }

        .right {
            position: absolute;
            right: 30px;
            bottom: 570px;
        }
    
    

    </style>
</head>

<body>
    <header class="header">
        <div class="left">
            <div>
                <img src="images/logo.png" alt="">
                <div class="suraj">Suraj Fitness</div>
            </div>
            <div class="mid">
                <ul class="navbar">
                    <list class="center"><a href="">HOME</a></list>
                    <list class="center"><a href="">ABOUT</a></list>
                    <list class="center"><a href="">SERVICES</a></list>
                    <list class="center"><a href="">CONTACT</a></list>
                </ul>
            </div>
            <div class="right">
                <button class="btns">Sign in</button>
                <button class="btns">Sign up</button>
            </div>
        </div>
    </header>
    <div class="detail">
        <h1>Join the best Gym of delhi</h1>
        <form action="">
            <div class="forms">
                <input type="text" class="form" placeholder="Enter Your Name">
            </div>
            <div class="forms">
                <input type="text" class="form" placeholder="Enter Your Age">
            </div>
            <div class="forms">
                <input type="text" class="form" placeholder="Enter Your Gender">
            </div>
            <div class="forms">
                <input type="text" class="form" placeholder="Enter Your Email">
            </div>
            <div>
                <button class="btn">Submit</button>    
            </div>
        </form>
    </div>

</body>

</html>

Comments

Post a Comment

Popular posts from this blog

My 1 Project completed a Form

HTML FILE <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title>     <link rel="stylesheet" href="myfile.css"> </head> <body>     <div class="form">         <h1 class="head">Application For Permission To Date My Daughter</h1>         <div class="note">             <p><b>Note:</b>Form is to be completed at least 21 days prior to date</p>         </div>         <div class="first">             <div class="personal">                 <h2>Personal Details</h2>                 ...
Read more

Einstein tribute page

HTML FILE <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <link rel="stylesheet" href="tribute3.css">     <title>Tribute of Steve Jobs</title> </head> <body>     <div  class="upper">     <h1>Albert Einstein</h1>     <div>     <h3><i>(E=mc<sup>2</sup>)</i></h3>     </div>     <img src="C:\Users\Suraj Kumar\Desktop\blogger images\Albert_Einstein.png" alt="Einstein">     <h4>Physicist, Scientist (1879–1955)</h4>     <h4>10 Things You Didn’t Know About Albert Einstein:</h4>      </div>     <ul>         <li>             He never...
Read more