Gym landing page in css , html
preview
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bollywood gym centers - gym is great</title>
<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=Baloo+2&display=swap" rel="stylesheet">
</head>
<style type="text/css">
body{
margin: 0px;
padding: 0px;
background-image: url('https://thumbs.dreamstime.com/z/sport-fitness-lifestyle-people-concept-smiling-men-women-stretching-gym-sport-fitness-lifestyle-people-concept-147152548.jpg');
font-family: 'Baloo 2', cursive;
}
.header{
border: 1px solid red;
}
.right{
position: absolute;
right: 34px;
top: 20px;
}
.centers{
display: block;
width: 39%;
margin: 10px auto;
}
.left{
display: inline-block;
position: absolute;
left: 60px;
top: 20px;
}
.left img{
width: 111px;
height: 42px;
}
.left div {
line-height: 19px;
font-size: 26px;
text-align: center;
}
.list li{
display: inline-block;
}
.list li a{
display: inline-block;
padding: 20px;
color: black;
text-decoration: none;
}
.list li a:hover , .list li a.active{
display: inline-block;
padding: 20px;
color: red;
text-decoration: underline;
}
.right .btn{
padding: 4px 14px;
border-radius: 20px;
border: 1px solid red;
margin: 16px 10px;
font-family: 'Baloo 2', cursive;
}
.right .btn:hover {
background-color: black;
color: white;
cursor: pointer;
}
.container{
border: 1px solid white;
padding: 34px;
width: 40%;
margin: 161px 150px;
font-family: 'Baloo 2', cursive;
border-radius: 46px ;
}
.container h1{
text-align: center;
color: black;
}
.container .form-controll input,select{
text-align: center;
display: block;
width: 78%;
margin: 4px auto;
font-size: 30px;
font-family: 'Baloo 2', cursive;
}
.container button {
display: block;
width: 23%;
margin: 20px auto;
border: 1px solid white;
background-color: black;
cursor: pointer;
color: white;
font-family: 'Baloo 2', cursive;
}
.container button:hover{
background-color: whitesmoke;
color: red;
}
</style>
<body>
<div class="header">
<div class="left">
<img src="https://freepikpsd.com/file/2019/11/gym-fitness-logo-transparent-png-images-.png" alt="Bollywood Gym Center Free Theme">
<div>Bollywood Gym</div>
</div>
<div class="centers">
<ul class="list">
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Images</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div class="right">
<button class="btn">Call Us</button>
<button class="btn">Email Us</button>
</div>
</div>
<div class="container">
<h1>Enroll Our Bollywood Gym</h1>
<form action="#">
<div class="form-controll">
<input type="text" name="fname" placeholder="Enter your name">
</div>
<div class="form-controll">
<input type="text" name="lname" placeholder="Enter your Last Name">
</div>
<div class="form-controll">
<input type="number" name="age" placeholder="Enter your Age">
</div>
<div class="form-controll">
<select name="gender">
<option>Select your gender</option>
<option value=0>Male</option>
<option value=1>Female</option>
</select>
</div>
<div class="form-controll">
<input type="text" name="city" placeholder="Enter your City here">
</div>
<button class="btn">Submit</button>
</form>
</div>
</body>
</html>
Thanks you for commenting your questions. I will see question and respond you.