1st Gym 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>Aman's Fitness Club</title>
<link rel="stylesheet" href="gym.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=Lobster&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=Gluten&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,300italic,regular,italic,500,500italic,700,700italic" rel="stylesheet" />
<style>
/* @import url(https://fonts.googleapis.com/css?family=Cedarville+Cursive:regular); */
body {
background-color: black;
padding: 0px;
margin: 0px;
}
.logo img {
position: absolute;
margin-top: 5px;
height: 32px;
width: 55px;
margin-left: 54px;
}
.center li {
position: inline;
display: inline-block;
}
.navbar {
background-color: yellow;
border-radius: 23px;
}
.navbar ul {
overflow: auto;
text-align: center;
list-style: none;
padding: 0px;
margin: 0px;
}
.navbar li {
font-family: sans-serif;
list-style: none;
margin: 13px 13px;
}
.navbar li a {
text-decoration: none;
padding: 3px 3px;
}
.navbar li a:hover {
color: red;
}
.right li {
font-family: sans-serif;
list-style: none;
margin: -31px 100px;
float: right;
border-radius: 5px;
font-size: 120%;
margin-top: -33px;
}
.right li a:hover {
background-color: rgb(104, 206, 247);
border-radius: 5px;
}
.right li a {
text-decoration: none;
padding: 4px 5px;
}
.container {
border: 2px solid white;
width: 33%;
margin: 250px 80px;
padding: 75px;
display: inline-block;
position: absolute;
border-radius: 10px;
}
div input {
border-radius: 0px;
text-align: center;
width: 348px;
height: 36px;
display: inline-block;
font-family: 'Lobster', cursive;
box-sizing: border-box;
font-size: 120%;
}
.container h2 {
color: white;
text-align: left;
font-family: 'Gluten', cursive;
}
.text {
color: greenyellow;
font-family: monospace;
font-size: 100%;
text-align: left;
display: inline-block;
}
.btn {
text-align: left;
margin: 25px 135px;
font-family: 'Ubuntu', sans-serif;
background-color: orange;
display: inline-block;
}
</style>
</head>
<body>
<header>
<nav class="navbar">
<div class="logo">
<a href="#"><img src="gymlogo1.jpg" alt="#" id="logo"></a>
</div>
<div class="center">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Gallery</a></li>
</ul>
</nav>
</div>
<div class="right">
<li><a href="#">Contact Us</a></li>
</div>
</header>
<div class="container">
<h2>Fill This Form To Join Our Team</h2>
<form action="#" class="formcss">
<div>
<input type="text" placeholder="Enter Your Name">
</div>
<div>
<input type="email" placeholder="Enter Your E-mail">
</div>
<div>
<input type="text" placeholder="Enter Your Phone Number">
</div>
<div class="text">
Enter The Time when you want to attend The Gym<br>
</div>
<div class="time">
<input type="time" placeholder="Enter The Time In Which You Want To Come">
</div>
<div class="time">
<input type="time" placeholder="Enter The Time In Which You Want To Come">
</div>
<div class="btn">
<button class=".btn">Submit</button>
</div>
</form>
</div>
</body>
<img src="https://rukminim1.flixcart.com/image/1320/1200/k6xxua80/poster/c/z/h/medium-gym-posters-gym-posters-motivational-gym-posters-for-wall-original-imafpa9pyffhbeqg.jpeg?q=70" alt="#">
</html>
Comments
Post a Comment