.png)
Hello There !! , This is basic clone of railway reservation Portal that is made using HTML and CSS only,
Source Code For HTML and CSS is Attached here, where you can have look and can also use in your project work also.
Github Link is given here : Click Here
View The live Website by Clicking Here
Full HTML Code is:-
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./index.css">
<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>Clonepage</title>
</head>
<body>
<div class="container">
<div class="azadi"><img src="./azadikaamritmahotsav.jpg"></div>
<div class="containerleft">
<img src="./Background.png">
<h1> Indian Railways</h1>
<h2>भारतीय रेल सेवा</h2>
</div>
<div class="containerright">
<div class="containerrightbox">
<h2>Check Availability</h2>
<hr class="hr">
<label for="city">Choose Your Route: </label>
<form>
<div class="form">
<label>From:</label>
<select name="city">
<option >Jaunpur</option>
<option >Gorakhpur</option>
<option >Varanshi</option>
<option >Prayagraj</option>
<option >Gonda</option>
</select>
<label>To:</label>
<select name="city">
<option >Gorakhpur</option>
<option >Jaunpur</option>
<option >Varanshi</option>
<option >Prayagraj</option>
<option >Gonda</option>
</select>
</div>
<label>Select Your Class </label>>
<select>
<option >AC First Class</option>
<option >AC 2-Tier</option>
<option >AC 3-Tier</option>
<option >First Class</option>
<option >AC Chair Car</option>
<option >Sleeper</option>
<option >Second Sitting</option>
</select><br>
<label>Type</label>
<select>
<option >GENERAL</option>
<option >LADIES</option>
<option >LOWER BERTH/SR.CITIZEN</option>
<option >PERSON WITH DISABILITY</option>
<option >TATKAL</option>
<option >PREMIUM TATKAL</option>
</select>
<div class="checkbox">
<input type="checkbox">
<label>Divyaang Concession</label>
<input type="checkbox">
<label>Flexible With Date</label><br>
<input type="checkbox">
<label>Train with Available Berth</label>
<input type="checkbox">
<label>Railway Pass Concession</label>
</div>
<div class="submitbutton">
<button>Search</button>
</div>
</form>
</div>
</div>
</div>
<footer>
<h2>Made by -- Vaibhav Yadav --</h2>
</footer>
</body>
</html>
// Full CSS Code is: -
body{
font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
margin: 0%;
width: 100%;
height: 100%;
padding: 0;
background-image: url(./rail2.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
font-weight: bolder;
}
.container{
height: 100%;
width: 100%;
display: flex;
flex-direction: row;
}
.containerleft{
padding: 10%;
margin: 2% auto;
}
.containerleft h1 h2{
}
.azadi{
width:1%;
}
.containerleft img{
text-align: center;
width: 50%;
backdrop-filter: blur(5px);
}
.containerright{
padding: 5% 20% 0 0;
}
.containerrightbox{
backdrop-filter: blur(5px);
border-radius: 15px;
padding: 1% 7% 15% 7%;
box-shadow: 0px 0px 50px black;
border-top: 2px solid black;
border-bottom: 2px solid black;
}
.containerrightbox .form{
display: flex;
}
.containerrightbox form select{
margin: 1% 4% 5% 2%;
color: gray;
}
.submitbutton{
text-align: center;
margin: 10% 0 0 5%;
}
.hr{
color: black;
}
footer{
text-align: center;
font-size: large;
animation: vaibhav 2s infinite ;
padding: 2% 0 0 0;
}
@keyframes vaibhav {
0%{color: violet;}
25%{color: blueviolet;}
50%{color: green;}
75%{color: yellow;}
100%{color: red;}
}
// Made by Vaibhav Yadav
.png)
No comments:
Post a Comment