Creating A GYM Website
index.HTML
codes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome to my gym classes</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav id="navbar">
<div class="logo">
<img src="logo2.png" alt="Error">
</div>
<div class="navbar">
<ul>
<li><a href="#">Home </a></li>
<li><a href="#">Features</a></li>
<li><a href="#">classes</a></li>
<li><a href="#">Trainers</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>
<button class="btn">
<h1>Email Me</h1>
</button>
<button class="btn">
<h1>Call Me</h1>
</button>
<div class="container">
Time <span id="time"></span>
</div>
</nav>
<section id="container">
<H1>Join The Best GYM Of Varansi</H1>
<div class="contain">
<form action="noaction">
<div class="form-group">
<input class="name" type="text" placeholder="Enter your Name">
</div>
<div class="form-group">
<input class="name" type="text" placeholder="Enter your Age">
</div>
<div class="form-group">
<input class="name" type="text" placeholder="Enter your Gender">
</div>
<div class="form-group">
<input class="name" type="text" placeholder="Enter your Localtiy">
</div>
<button class="bte">Submit</button>
</form>
</div>
</section>
</body>
</html>
Images
style.CSS
Codes:
/* navigation bar */
#navbar{
display: flex;
position: absolute;
align-items: center;
top: 0px;
}
/* navigation bar logo */
.logo{
margin: 5px 10px;
}
/* navigation bar logo img */
.logo img{
height: 80px;
width: 60px;
}
/* navigation bar list styling */
#navbar{
display: flex;
position: relative;
align-items: center;
top: 0px;
}
#navbar ul{
display: flex;
align-items: center;
}
#navbar ul li {
list-style: none;
font-size: 1.3rem;
}
#navbar ul li a{
display: flex;
color: black;
padding: 3px 22px;
text-decoration: none;
}
#navbar::before{
content: "";
position: absolute;
background-color: green;
top: 0px;
left: 0px;
height: 100%;
width: 100%;
z-index: -1;
opacity: 0.4;
}
.btn{
margin: 0px 50px;
padding: 1px 43px;
color: black;
border-radius: 12px;
cursor: pointer;
border: none;
}
.btn:hover{
color: green;
background-color: aquamarine;
}
/* home (continer) section */
#container h1{
display: block;
padding: 35px 350px;
margin: 30px -34px;
font-size: 3rem;
}
.contain{
display: flex;
align-items: center;
position: absolute;
}
.name{
display: inline-block;
color:black;
padding: 20px 40px;
margin: 10px 230px;
text-align: center;
}
#container::before{
content: "";
position: absolute;
background:url(back2.jpg) no-repeat center center/cover;
top: 102px;
left: 4px;
height: 100%;
width: 100%;
z-index: -4;
}
.bte{
background-color: green;
border: none;
color: navajowhite;
padding: 15px 32px;
text-align: center;
text-decoration: none;
font-size: 2.5rem;
display: inline-block;
}
.bte:hover{
color: rgb(23, 26, 25);
background-color: rgb(14, 247, 247);
cursor: pointer;
}