Gym
HTML CSS code for website
(not responsive)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<link href="https://fonts.googleapis.com/css2?family=Arimo&display=swap" rel="stylesheet">
<style>
body {
margin: 0px;
padding: 0px;
background-image: url('https://cdn.pixabay.com/photo/2017/01/09/11/30/dumbbell-1966247_960_720.jpg');
background-size: cover;
/* height: 1200px; */
color: white;
font-family: 'Arimo', sans-serif;
}
.left {
/* border: 2px solid white; */
display: inline-block;
position: absolute;
top: 20px;
margin-left: 40px;
}
.left img {
width: 100px;
height: 50px;
filter: invert(100%);
}
.mid {
/* border: 2px solid white; */
display: block;
top: 20px;
width: 40%;
margin: 20px auto;
}
.right {
/* border: 2px solid white; */
display: inline-block;
position: absolute;
right: 40px;
top: 32px;
}
.navbar {
display: inline-block;
}
.navbar li {
display: inline-block;
list-style: none;
margin: 3px auto;
padding: 2px 25px;
font-size: 18px;
}
.navbar a {
color: white;
text-decoration: none;
}
.navbar li a:active,
.navbar li a:hover {
color: gray;
/* text-decoration: underline; */
}
.text {
text-align: center;
margin-bottom: 8px;
line-height: 11px;
}
.btn {
cursor: pointer;
margin: 2px 12px;
padding: 7px 16px;
color: white;
background-color: black;
/* border: 2px solid grey; */
border-radius: 15px;
font-size: 15px;
font-family: 'Arimo', sans-serif;
}
.btn:hover {
opacity: 70%;
}
.form {
/* border: 2px solid white; */
width: 38%;
border-radius: 20px;
margin: 159px 94px;
padding: 27px 100px;
}
.form h2 {
text-align: center;
}
.fo input {
/* text-align: center; */
margin: 2px;
padding: 11px 60px;
border-radius: 15px;
font-size: 18px;
}
#name {
margin: 8px 50px;
/* padding: 5px 12px; */
}
#contact {
margin: 8px 39px;
/* padding: 5px 12px; */
}
#email {
margin: 8px 37px;
/* padding: 5px 12px; */
}
#gender {
margin: 8px 41px;
/* padding: 5px 12px; */
}
#location {
margin: 8px 36px;
/* padding: 5px 12px; */
}
.bt {
cursor: pointer;
margin: 12px -4px;
padding: 8px 14px;
color: white;
background-color: black;
border: 2px solid grey;
border-radius: 15px;
font-size: 15px;
font-family: 'Arimo', sans-serif;
width: 89%;
line-height: 22px;
text-align: center;
}
span {
padding: 2px 2px;
margin: 8px 3px;
width: 60%;
border: 2px solid white;
}
</style>
<body>
<!-- left -->
<div class="left">
<img src="https://image.flaticon.com/icons/png/512/38/38464.png" alt="logo">
<div class="text">
Join now
</div>
</div>
<!-- mid -->
<div class="mid">
<ul class="navbar">
<li> <a href="#">Home</a> </li>
<li> <a href="#">About us</a> </li>
<li> <a href="#">Contact us</a> </li>
<li> <a href="#">Fitness</a> </li>
</ul>
</div>
<!-- right -->
<div class="right">
<button class="btn">
Log in
</button>
<button class="btn">
Help
</button>
</div>
<div class="form">
<h2>Regsiter Now</h2>
<form action="noaction.php">
<div class="fo">
Name:<input type="text" placeholder="Name" id="name">
</div>
<div class="fo">
Contact:<input type="number" placeholder="Contact" id="contact">
</div>
<div class="fo">
Emai-ID:<input type="email" placeholder="Email-Address" id="email">
</div>
<div class="fo">
Location:<input type="text" placeholder="Location" id="location">
</div>
<div class="fo">
Gender: <input type="text" placeholder="Gender" id="gender">
</div>
<button class="bt">Submit</button>
<button type="reset" class="bt">Reset</button>
</form>
</div>
</body>
</html>
Comments
Post a Comment