Website for a GYM : Tutorial #2
Hello Folks :)
Hope you are doing well in your coding field. Again I am here with one more tutorial in which I have made a website for a gym named "Health Hub".
In previous tutorial, we made a travel guide website in which we added some images, header and footer, some external links, and we did some experiments with background of the title text.
if you haven't seen yet, here's the link to that post : https://codingatess.blogspot.com/2023/07/basic-travel-guide-website-for-beginners.html
In this website, I have added some more CSS attributes, including transitions and animations, some more links and tags.
the website includes two pages :
1. homepage
2. registration page
here's the code for the website :
HTML CODE (Homepage) :
<!DOCTYPE html>
<html lang="en">
<head>
<link href="website.css" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GYM</title>
</head>
<body>
<div id="backdrop">
</div>
<header>
<div id="left">
<img src="gym.jpg" alt="">
<div id="healthhub">HEALTH<br>HUB</div>
</div>
<div id="mid">
<nav id="navbar">
<ul>
<li><a href="#" target="_blank">HOME</a></li>
<li><a href="#" target="_blank">WORKOUTS</a></li>
<li><a href="#" target="_blank">JOIN</a></li>
<li><a href="#" target="_blank">CONTACT US</a></li>
</ul>
</nav>
</div>
<div id="right">
<a href="https://www.google.com/" target="_blank"><img src="srch.png" target="_blank"></a>
<div id="srchbar">
<input type="search">
</div>
</div>
</header>
<div id="regnow" align="center">
<a href="register.html" target="_blank">REGISTER NOW</a>
</div>
<div id="connect">
<a href="https://www.instagram.com" target="_blank"><img src="insta.png" id="insta"></a>
<a href="https://twitter.com/i/flow/login?redirect_after_login=%2Flogin%3Flang%3Den"target="_blank"><img src="twitter.png" id="twitter"></a>
<a href="https://www.facebook.com/" target="_blank"><img src="fb.png" id="fb"></a>
<a href="https://www.youtube.com/" target="_blank"><img src="yt.png" id="yt"></a>
<a href="https://mail.google.com/" target="_blank"><img src="gmail.png" id="gmail"></a>
</div>
</body>
</html>
code explanation : https://www.mediafire.com/file/emgd3c5qaq91xxb/WebsiteCodeHTML.txt/file
CSS CODE (Homepage) :
body {
margin: 0px;
padding: 0px;
background-image: url("https://images.pexels.com/photos/669576/pexels-photo-669576.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1");
background-size: cover;
color: aliceblue;
}
#left {
display: inline-block;
position: absolute;
top: 11px;
left: 2.9%;
}
#left img {
width: 120px;
border: 9px rgb(251, 6, 6);
border-style: double;
}
#healthhub {
text-align: center;
font-size: 30px;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
color: #edb90d;
-webkit-text-stroke: 2px;
-webkit-text-stroke-color: black;
letter-spacing: 2px;
}
#mid {
border: rgb(60, 255, 0) double 4px;
display: block;
background-color: #02020454;
margin: 10px auto;
width: max-content;
}
#navbar li {
display: inline-block;
}
#navbar a {
text-decoration: none;
color: red;
-webkit-text-stroke: 1px black;
padding: 20px;
font-size: larger;
font-family: fantasy;
letter-spacing: 1px;
font-weight: 200;
position: sticky;
}
#navbar a:hover {
color: rgb(30, 0, 255);
}
#right {
display: block;
display: inline-block;
top: 11px;
position: absolute;
left: 92%;
}
#right img {
width: 40px;
position: absolute;
left: 50px;
}
#srchbar {
position: relative;
right: 3.5cm;
top: 8px;
}
#srchbar input {
height: 0.7cm;
}
#backdrop {
background-image: linear-gradient(270deg, black, grey, black);
position: absolute;
z-index: -1;
opacity: 0.9;
top: 0px;
width: 40.65cm;
height: 5.5cm;
}
#regnow {
border: 9px solid rgb(5, 19, 1);
background-color: black;
display: inline-block;
position: absolute;
margin: 8cm 13cm;
width: 500px;
text-justify: distribute;
font-size: 50px;
font-family: fantasy;
padding-left: 20px;
padding-right: 20px;
padding-top: 5px;
padding-bottom: 5px;
transition: background-color 100ms, font-size 100ms;
}
#regnow:hover {
background-color: aliceblue;
font-size: 70px;
}
#regnow a {
text-decoration: none;
color: red;
-webkit-text-stroke: 3px;
-webkit-text-stroke-color: black;
}
#connect {
display: inline-block;
width: 7cm;
height: 50px;
position: absolute;
left: 5.5cm;
top: 19px;
}
#insta {
position: relative;
width: 44.29px;
top: -30px;
left: -8px;
}
#fb {
position: relative;
width: 50.4px;
left: -65.7px;
top: -65%;
}
#twitter {
position: relative;
width: 35px;
left: 14.5px;
top: -30px;
}
#yt {
position: relative;
width: 67.8px;
left: -60px;
bottom: 26%;
}
#gmail {
position: relative;
width: 54.5px;
left: 126.4px;
bottom: 158%;
}
code explanation : https://www.mediafire.com/file/l74bi71u7vyntmo/WebsiteCodeCSS.txt/file
HTML CODE (Registration Page) :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Register now</title>
<link href="register.css" rel="stylesheet">
</head>
<body>
<div id="title">
REGISTRATION FORM
</div>
<div id="GetStrong">
<div id="regimg">
<img src="reg.png">
</div>
<div id="options">
<b>Name</b> : <input type="text"> <br><br>
<b>Age</b> : <input type="number"> <br> <br>
<b>Email</b> : <input type="email"> <br><br>
<b>Phone no.</b> : <input type="tel">
<br><br>
<b>Body Weight</b> : <input type="number"> <input type="radio" name="w">Kgs
<input type="radio" name="w">Lbs
<br><br>
<b>Body type</b> : <input type="radio" name="type">Ectomorph
<input type="radio" name="type">Endomorph
<input type="radio" name="type">Mesomorph
<br><br>
<b>Target Physique</b> : <select>
<option>Ripped</option>
<option>Jacked</option>
<option>Swole</option>
<option selected>Aesthetic</option>
<option>Powerlifter</option>
<option>Crossfit</option>
</select>
<br> <br>
<b>Training Mode</b><input type="radio" name="mode">Offline
<input type="radio" name="mode">Online
<br><br>
<b>Personal Trainer</b> <select>
<option selected>I want</option>
<option>I don't want</option>
</select>
<br><br><br
<b>Upload yout passport size picture</b> : <input type="file"> (Accepted formats are .png and .jpeg) <br><br><br><br>
<input type="checkbox">I have read your terms and conditions and ready to register.
<br><br>
<input type="submit">
</div>
</div>
</body>
</html>
code explanation : https://www.mediafire.com/file/9a60nn1kyhxcuht/RegPageHTML.txt/file
CSS CODE (Registration Page) :
body{
background-image: url(regbg.jpg);
background-size: cover;
width: fit-content;
}
#options{
color: antiquewhite;
display: inline-block;
width: 20cm;
padding-top: 0.7cm;
padding-bottom: 0.7cm;
padding-left: 0.7cm;
position: absolute;
left: 3cm;
top: 4cm;
background-color: rgb(30, 27, 27);
background-blend-mode:screen;
opacity: 0.8;
border: 15px double white;
}
#title {
position: relative;
color: crimson;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
-webkit-text-stroke: 2px;
-webkit-text-stroke-color: white;
font-size: 89px;
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
left: 425px;
}
#regimg img{
display: inline-block;
width: 510px;
position: absolute;
left: 25cm;
top: 4cm;
}
code explanation : https://www.mediafire.com/file/7fl14snpffh13xv/RegPageCSS.txt/file
___________________________________________________________________________________
tutorial file : https://www.mediafire.com/file/5v9nait7rg0ly8y/tutorial.txt/file
website video : https://www.mediafire.com/file/xrcdt7oj753iwvd/CodinGatesJW.mp4/file
> I have attached a txt file having the explanation of the code, a file with tutorial of how you can use these codes to make changes according to your choice and a video in which you can see to experience the website view.
___________________________________________________________________________________
HAPPY CODING :)
Post a Comment