index.html

<!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>fitness website</title>
</head>
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap" rel="stylesheet">
    <style>
      body{
        margin:0px;
        padding:0px;
        background-image: url(p2.jpg);
         height: 2000px;
         background-size: 1500px 1500px;
         background-repeat: no-repeat;
         color:white;
         font-family: 'Oswald', sans-serif;
         
      }
      .left{
             display:inline-block;
            border:3px solid rgb(44, 42, 42);
            position:absolute;
              left:30px;
            top:5px;
      }
      .left img{
        width: 100px;
      }
      .right{
        display:inline-block;
        border:3px solid rgb(44, 56, 160);
        position:absolute;
        right:45px;
        top:5px;
        
      }
      .mid{
        
        display:block;
        width: 33%;
        margin: 12px auto;
        border:3px solid rgb(81, 82, 72);
        border-radius: 10px;
        background-color: black; 
      }
     .nav{
              display:inline-block;  
             
     }
      .nav li{
                display:inline-block;
                font-size: 15px;
      }
     .nav li a{
        color: aliceblue;
        text-decoration: none;
        padding:10px;
     }
     .nav li a:hover, .nav li a.active{
        text-decoration: underline;
        color:grey;
     }
     .btn{
        margin:0px 7px;
        background-color: black;
        color:azure;
        padding:3px 4px;
        border:2px solid grey;
        border-radius: 23px;
        font-size: 16px;
        cursor:pointer;
        font-family: 'Oswald', sans-serif;

     }
     .btn:hover{
        background-color: grey;
     }
     .container{
        border:2px solid rgb(241, 223, 223);
        margin:108px 82px;
        padding:83px 76px;
        width:33%;
        border-radius: 45px;
     }
    </style>



<body>
    <header class="header">
        <div class="left">
         <img src="images.png" alt="">
         <div class="fitness">
            
         </div>
        </div>
        <div class="mid">
           
            <ul class="nav">
                <li><a href="" >Home</a></li>
                <li><a href="" >About us</a></li>
                <li><a href="" >Fitness streak</a></li>
                <li><a href="" >Fitness excercises</a></li>
            </ul>
        
        </div>
        <div class="right">
        <button class="btn">Call us now</button>
        <button class="btn">email us</button>
        </div>
    </header> 
    <div class="container">
        <h1>TO JOIN BEST GYM</h1>
        <form action="no action.php">
            <div class="formgroup">
                <input type="text" name="" placeholder="enter yur name">
                <input type="email" name="" placeholder="enter yur email">
                <input type="text" name="" placeholder="enter yur name">
                <input type="text" name="" placeholder="enter yur name">
                <input type="text" name="" placeholder="enter yur name">
            </div>
        </form>
        
    </div>
</body>
</html>