Scribd
Upload
18 views63 pages

Ip Project

The document is an HTML and CSS code for a railway reservation system website. It includes code for the homepage, meals page, and stylesheets. The homepage allows users to book tickets by entering station codes, dates and class. It displays train schedules and holiday packages. The meals page displays various meal options that can be ordered by entering a PNR number and confirms the booking. The CSS styles the navigation, layout, buttons and other elements on the pages.

Uploaded by

manoj.s14252
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
18 views63 pages

Ip Project

The document is an HTML and CSS code for a railway reservation system website. It includes code for the homepage, meals page, and stylesheets. The homepage allows users to book tickets by entering station codes, dates and class. It displays train schedules and holiday packages. The meals page displays various meal options that can be ordered by entering a PNR number and confirms the booking. The CSS styles the navigation, layout, buttons and other elements on the pages.

Uploaded by

manoj.s14252
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 63

IP PROJECT

RAILWAY RESERVATION
NAME: MANOJKUMAR S
DEPT:CSE
REG NO:410720104041
Index html code
<!DOCTYPE html>
<html>
<head>
<title>Railway Ticket Booking</title>
<link rel="stylesheet" href="index.css"/>

</head>

<body>

<div class="main">
<h1 class="head">Railway Ticket
reservation system</h1>
<div class="navigation"> <!--
abhinandan-->
<ul>
<li><a href="index.html"
id="onlink">HOME</a></li>
<li><a
href="meal.html">MEALS</a></li>
<li><a href="holiday.html">H
PACKAGES</a></li>
<li><a
href="service.html">SERVICE</a></li>
<li><a href="contact.html">CONTACT
US</a></li>
</ul>

</div>

<div class="booking">
<section>

<h2 class="head1">Book</h2>
<h2 class="head2">Your</h2>
<h2 class="head3">Tickets</h2>
<h2 class="head4">Here</h2>

<form><!-- abhinandan-->
<ul>
<b class="fsize"> From &emsp;<input
type="text" placeholder="From [STN Code]">
</b> <br> <br>
<b class="fsize"> To &emsp;<input
type="text" placeholder="To [STN Code]">
</b> <br> <br>
<b class="fsize"> Date&emsp;<input
type="Date" placeholder="dd-mm-yy"> </b>
<br> <br>
<label class="fsize"><strong> Class
</strong> </label>
<select id="class" name="class">
<option
value="select">SELECT</option>
<option
value="1AC">1AC</option>
<option
value="2AC">2AC</option>
<option
value="3AC">3AC</option>
<option
value="Sleeper">Sleeper</option>
<option
value="Chair">Chair</option> <br>
</select>

</ul>
</form>

<button class="submit" type="button"


onclick="trainB()">Find Trains </button>

<div class="form-popup" id="bookTrain">


<div class="popup">
<h1>Due to Covid19 all trains are currently
cancelled</h1> <br>
<h2>#stayhome</h2>
<h2>#staysafe</h2>
<button type="button" class="hide"
onclick="trainC()">Close</button>
</div> </div>

</section>

</div><!-- abhinandan-->

<img class="img" src="train1.jpg"


alt="train" width="500" height="350"
align="center" />
<h1 class="holiday">HOLIDAYS</h1>

<img class="imgs" src="leave.jpg"


alt="Taj Mahal"/>

</div>
<script src="main.js"></script>
</body>
</html>

INDEX CSS CODE


body{
margin: auto;
background-color:#D3D3D3 ;
font-family: arial;
}
.navigation{
margin:auto;
width: 860px;
padding: 0px 0px 0px 130px;
height: 50px;
margin-top: 20px;

.navigation ul{
padding: 0;
list-style: none;;
}
.navigation ul li{
float: left;
font-size: 20px;
font-weight: bold;
margin-right: 10px;
}
.navigation ul li a{
text-decoration: none;
color: white;
background:black;
border-top: 1px dotted black;
border-left:1px dotted black;
border-right: 1px dotted black;
border-bottom: 1px dotted black;
padding: 10px 20px 10px 20px;
border-top-right-radius:10px;
border-top-left-radius:10px;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
display: block;
text-align: right;
}
.navigation ul li a:hover{
text-decoration: none;
color:darkred;
background: lightgreen;
}
.navigation ul li a#onlink{
background:black;
color: grey;
border-bottom: 1px solid red;
}

.navigation ul li a#onlink:hover{
background:white;
color: orange;
}

.main{
margin: auto;
width: 860px;
padding: 10px;
border:1px solid red;

background: lightyellow;
min-height: 600px;
}

.booking {
margin:0px;
padding:0px 100px 0px 0px;
border:1px solid black;
width: 150px;
float: left;
height: 630px;
background: grey;
font-size: medium;
}

.img{

width:600px;
height: 340px;
padding: 0px 0px 10px 0px;
float: right;
}

.imgs{
width:600px;
height: 210px;
padding: 0px 0px 10px 0px;
float: right;
}
.head1{

margin-left: 30px;
font-family: algerian;
}
.head2{

margin-left: 60px;
font-family: algerian;
}
.head3{

margin-left: 95px;
font-family: algerian;
}
.head4{
margin-left: 160px;
font-family: algerian;
}

.submit{
margin-left: 80px;
margin-top: 20px;
padding: 0px 50px 0px 50px;
font-size:large;
background-color:tomato ;
border-radius: 20px;
text-align: center;

}
.head{
margin: 2px;
margin-left: 150px;
font-family: algerian;
}
.holiday{
margin-left: 450px;
font-family: algerian;
}

.fsize{
font-family: algerian;
font-size: x-large;
}

.hpack{
margin: 2px;
margin-left: 300px;
font-family: algerian;
}
.hpimg{
margin-top: 10px;
border:1px solid black;
margin-left: 50px;
height: 160px;
width: 400px;
}
.bookh{
float: right;
margin-right: 50px;
margin-top: 50px;
padding: 10px 10px 10px 10px;
font-size: x-large;
background-color:orange;
border-radius: 20px;
}
.bookd{
float: right;
margin-right: 50px;
margin-top: 50px;
padding: 10px 10px 10px 10px;
font-size: x-large;
background-color:lightblue;
border-radius: 20px;
}
table
{
border: 2px solid blue;
width: 800px;
margin-left: 30px;

}
th{
border: 1px solid black;

background-color: red;
font-weight: bold;
padding: 10px;
}
td{
border: 2px solid black;

font-weight: bold;
padding: 50px;
}

td:hover{
background-color: lightblue;
}
tr:hover{
background-color: #ff66ff;

}
.meald{
width: 600px;
}
.order{
padding: 10px 10px 10px 10px;
width: 200px;
background-color:#66ff66;
border-radius: 20px;
}
.service{
padding: 60px 20px 0px 20px;
margin-left: 250px;
font-family: algerian;
}
.service1{

margin-left: 250px;
font-family: algerian;
}
.service2{
border: 2px solid black;
width: 600px;
padding: 20px;
margin-bottom: 10px;
margin-left: 110px;
}
.open-button {
background-color: #555;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
opacity: 0.89;

bottom: 23px;
right: 28px;
width: 280px;
text-align: center;
align-items: center;
}

.form-popup {
width: 100%;
height:100%;
background-color: black;
opacity: 0.96;
position: fixed;

left: 0;
bottom:0;
display: flex;
justify-content: center;
align-items: center;
display: none;
}
.popup{
min-width: 500px;
min-height: 300px;
background-color: white;
border-radius: 8px;
text-align: center;
padding:10px 10px 10px 10px;
margin:0px 5px 0px 5px ;
}

.hide{
padding: 10px 50px 10px 50px;
background-color: orange;
text-align: center;
font-size: 20px;
border-radius: 5px;
margin-top: 80px;:
}
MEAL HTML CODE
<!DOCTYPE html>
<html>
<head>
<title>Railway Ticket Booking</title>
<link rel="stylesheet" href="index.css"/>

</head>

<body>
<!-- abhinandan-->
<div class="main">
<h1 class="head">Railway Ticket
reservation system</h1>
<div class="navigation">
<ul>
<li><a href="index.html"
>HOME</a></li>
<li><a
href="meal.html"id="onlink">MEALS</a></li>
<li><a href="holiday.html">H
PACKAGES</a></li>
<li><a
href="service.html">SERVICE</a></li>
<li><a href="contact.html">CONTACT
US</a></li>
</ul>
<!-- abhinandan-->
</div>
<img src="meals1.jpg" alt="meals"
width="850px" />
<div>
<table>
<tr>
<th
colspan="9"><h1>Meals</h1></th>
</tr>
<tr>
<td class="meald"> HONEY CHILLI
POTATO at ₹100 </td>
<td><button class="order"
onclick="orderOpen()">Order
Now</button></td>

<div class="form-popup" id="avi">


<div class="popup">
Enter PNR <input type="input"
name="PNR">
<button type="button" class="hide"
onclick="orderO()">Book</button>
<button class="hide"
onclick="orderClose()">Close</button>
<div class="form-popup" id="openO">
<div class="popup">
<h1>Your Meal is Booked</h1>
<button type="button" class="hide"
onclick="orderC()">Close</button>
</div> </div>
</div> </div>

</tr>
<tr>
<td>VEG DELUXE THALI at ₹150</td>
<td ><button class="order"
type="button" onclick="orderOpen()">Order
Now</button></td>

<div class="form-popup" id="avi">


<div class="popup">
Enter PNR <input type="input"
name="PNR">
<button type="button" class="hide"
onclick="orderO()">Book</button>
<button class="hide"
onclick="orderClose()">Close</button>
<div class="form-popup" id="openO">
<div class="popup">
<h1>Your Meal is Booked</h1>
<button type="button" class="hide"
onclick="orderC()">Close</button>
</div> </div>
</div> </div>

</tr>
<tr>
<td >NON VEG THALI at ₹150 </td>
<td><button class="order"
type="button" onclick="orderOpen()">Order
Now</button></td>
<div class="form-popup" id="avi">
<div class="popup">
Enter PNR <input type="input"
name="PNR">
<button type="button" class="hide"
onclick="orderO()">Book</button>
<button class="hide"
onclick="orderClose()">Close</button>
<div class="form-popup" id="openO">
<div class="popup">
<h1>Your Meal is Booked</h1>
<button type="button" class="hide"
onclick="orderC()">Close</button>
</div> </div>
</div> </div>
</tr>
<tr>
<td >MAHARAJA THALI at ₹250 </td>
<td><button class="order"
type="button" onclick="orderOpen()">Order
Now</button></td>

<div class="form-popup" id="avi">


<div class="popup">
Enter PNR <input type="input"
name="PNR">
<button type="button" class="hide"
onclick="orderO()">Book</button>
<button class="hide"
onclick="orderClose()">Close</button>
<div class="form-popup" id="openO">
<div class="popup">
<h1>Your Meal is Booked</h1>
<button type="button" class="hide"
onclick="orderC()">Close</button>
</div> </div>
</div> </div>

</tr>
<tr>
<td >VEG MEDIUM THALI at
₹150</td>
<td><button class="order"
type="button" onclick="orderOpen()">Order
Now</button></td>

<div class="form-popup" id="avi">


<div class="popup">
Enter PNR <input type="input"
name="PNR">
<button type="button" class="hide"
onclick="orderO()">Book</button>
<button class="hide"
onclick="orderClose()">Close</button>
<div class="form-popup" id="openO">
<div class="popup">
<h1>Your Meal is Booked</h1>
<button type="button" class="hide"
onclick="orderC()">Close</button>
</div> </div>
</div> </div>

</tr>
<tr>
<td >NON VEG DELUXE THALI at ₹200
</td>
<td><button class="order"
type="button" onclick="orderOpen()">Order
Now</button></td>
<div class="form-popup" id="avi">
<div class="popup">
Enter PNR <input type="input"
name="PNR">
<button type="button" class="hide"
onclick="orderO()">Book</button>
<button class="hide"
onclick="orderClose()">Close</button>
<div class="form-popup" id="openO">
<div class="popup">
<h1>Your Meal is Booked</h1>
<button type="button" class="hide"
onclick="orderC()">Close</button>
</div> </div>
</div> </div>

</tr>

</table>
</div>
</div>

<script src="main.js"></script>
</body>
</html>

HOLIDAY HTML CODE


<!DOCTYPE html>
<html>
<head>
<title>Railway Ticket Booking</title>
<link rel="stylesheet" href="index.css"/>

</head>
<!-- abhinandan-->
<body>

<div class="main">
<h1 class="head">Railway Ticket
reservation system</h1>
<div class="navigation">
<ul>
<li><a href="index.html"
>HOME</a></li>
<li><a
href="meal.html">MEALS</a></li>
<li><a
href="holiday.html"id="onlink">H
PACKAGES</a></li>
<li><a
href="service.html">SERVICE</a></li>
<li><a href="contact.html">CONTACT
US</a></li>
</ul>
<!-- abhinandan-->
</div>
<h1 class="hpack">Holiday
Packages</h1>
<div>
<img class="hpimg" src="goa.jpg"
alt="hpackages"/>

<button class="bookd" type="button"


onclick="h1DB()">Details</button>
<div class="form-popup" id="hBook1">
<div class="popup">
<h1>Travel to GOVINDAM</h1> <br>
<h2>3 Days Trip at TIRUPATI</h2> <br>
<h1> Price - ₹3910</h1>
<button type="button" class="hide"
onclick="h1DC()">Close</button>
</div> </div>

<button class="bookh" type="button"


onclick="h1BB()">Book Here</button>

<div class="form-popup" id="hBook2">


<div class="popup"><br>
Name <input type="input"
name="name"><br> <br>
Age &nbsp;<input type="input"
name="Age"><br><br>
Email <input type="input"
name="Email"><br><br>
Contact<input type="input"
name="Contact"><br>

<button type="button" class="hide"


onclick="orderO()">Book</button>

<button type="button" class="hide"


onclick="h1BC()">Close</button>
<div class="form-popup" id="openO">
<div class="popup"><br>
<h1>Thanks for Booking</h1><br>
<h2>We will Contact you Shortly</h2>
<button type="button" class="hide"
onclick="orderC()">Close</button>
</div> </div>
</div> </div>
</div>
<div>
<img class="hpimg" src="kerala.jpg"
alt="hpackages"/>

<button class="bookd" type="button"


onclick="h2DB()">Details</button>
<div class="form-popup" id="hBook3">
<div class="popup">
<h1>Travel New Delhi to Amritsar</h1>
<br>
<h2>2 Days Trip</h2> <br>
<h1> Price - ₹5780</h1>
<button type="button" class="hide"
onclick="h2DC()">Close</button>
</div> </div>
<button class="bookh" type="button"
onclick="h2BB()">Book Here</button>
<div class="form-popup" id="hBook4">
<div class="popup"> <br>
Name <input type="input"
name="name"><br> <br>
Age &nbsp;<input type="input"
name="Age"><br><br>
Email <input type="input"
name="Email"><br><br>
Contact<input type="input"
name="Contact"><br>

<button type="button" class="hide"


onclick="oO1()">Book</button>
<button type="button" class="hide"
onclick="h2BC()">Close</button>
<div class="form-popup" id="o1">
<div class="popup"><br>
<h1>Thanks for Booking</h1><br>
<h2>We will Contact you Shortly</h2>
<button type="button" class="hide"
onclick="oC1()">Close</button>
</div> </div>
</div> </div>
</div>
<div>

</div>

<script src="main.js"></script>
</body>
</html>
SERVICE HTML CODE
<!DOCTYPE html>
<html>
<head>
<title>Railway Ticket Booking</title>
<link rel="stylesheet" href="index.css"/>
<!-- abhinandan-->
</head>

<body>

<div class="main">
<h1 class="head">Railway Ticket
reservation system</h1>
<div class="navigation">
<ul><!-- abhinandan-->
<li><a
href="index.html">HOME</a></li>
<li><a
href="meal.html">MEALS</a></li>
<li><a href="holiday.html">H
PACKAGES</a></li>
<li><a href="service.html"
id="onlink">SERVICE</a></li>
<li><a href="contact.html">CONTACT
US</a></li>
</ul>
</div>
<div>
<h1 class="service">Service at
station</h1>

<div class="service2">
<h2 class="service1">Book Wheel chair
</h2>
<form><!-- abhinandan-->
<ul>
<b>Enter Station&emsp;<input
type="text" placeholder=" [STN Code]">
</b> <br> <br>
<b>PNR
No.&emsp;&emsp;&emsp;<input type="text"
placeholder=" [PNR]"> </b> <br> <br>
<b>Contact No.&emsp;<input
type="text" placeholder=" [Contact]">
</b> <br> <br>
<b>Price - ₹500</b>
<button class="submit"
type="button" onclick="openForm()">Book
Now</button>

<div class="form-popup"
id="myForm">
<div class="popup">
<h1>Your Service is Booked</h1>
<h2>You will get SMS</h2>
<button type="button" class="hide"
onclick="closeForm()">Close</button>
</div> </div>

</ul>
</form>
</div>
<div class="service2">
<h2 class="service1">Book Rest
Rooms</h2>
<form><!-- abhinandan-->
<ul>
<b>Enter Station&emsp;<input
type="text" placeholder=" [STN Code]">
</b> <br> <br>
<b>PNR
No.&emsp;&emsp;&emsp;<input type="text"
placeholder=" [PNR]"> </b> <br> <br>
<b>Contact No.&emsp;<input
type="text" placeholder=" [Contact]">
</b> <br> <br>
<b>Price - ₹1000 for 24hrs</b>

<button class="submit"
type="button" onclick="openForm()">Book
Now</button>

<div class="form-popup" id="myForm">


<div class="popup">
<h1>Your Service is Booked</h1>
<h2>You will get SMS</h2>
<button type="button" class="hide"
onclick="closeForm()">Close</button>
</div> </div>

</ul>
</form>
</div>
</div>

</div>

<script src="main.js"></script>
</body>
</html>

CONTACT HTML CODE


<!DOCTYPE html>
<html>
<head>
<title>Railway Ticket Booking</title>
<link rel="stylesheet" href="index.css"/>

</head>

<body>

<div class="main">
<h1 class="head">Railway Ticket
reservation system</h1>
<div class="navigation">
<ul>
<li><a href="index.html"
>HOME</a></li>
<li><a
href="meal.html">MEALS</a></li>
<li><a href="holiday.html">H
PACKAGES</a></li>
<li><a
href="service.html">SERVICE</a></li>
<li><a
href="contact.html"id="onlink">CONTACT
US</a></li>
</ul><!-- abhinandan-->
</div>
<div class="head">
<h1><center><mark>Contact
US</main></h1> </center>

<form>
First Name&emsp;<input type="text"
name="First_Name" >
&nbsp;&nbsp;&nbsp;Last Name&emsp;<input
type="name" name="Last_Name"> <br>
<pre></pre>
Email
&emsp;&emsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input type="Email"> <br> <pre></pre>
Contact No. <input type="text"
name="Contact"> <br> <pre></pre>
Query
&emsp;&emsp;&nbsp;&nbsp;&nbsp;<input
type="text" name="Query"> <br>
<pre></pre>
<i>Gender:-</i><!-- abhinandan-->

<input type="radio" name="gender"


value="male"> Male
<input type="radio" name="gender"
value="female"> Female
<input type="radio" name="gender"
value="other"> Other <br> <pre></pre>

</form>

<pre></pre>&emsp;&emsp;&emsp;&emsp;&
emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
&emsp;&emsp;&emsp;&emsp;
<button class="open-button"
onclick="openForm()">Submit</button>

<div class="form-popup" id="myForm">


<div class="popup">
<h1>Thanks for Contacting US</h1> <br>
<h2>We will Contact You Shortly</h2>
<button type="button" class="hide"
onclick="closeForm()">Close</button>
</div> </div>

<h1 style="font-family: calibiri">Email


Us&nbsp;-&nbsp;[email protected]</h1>
</div><!-- abhinandan-->
<script src="main.js"></script>
</body>
</html>

JAVASCRIPT
/* These Functions are for showing popup
Windows */

function openForm() {

document.getElementById("myForm").style.di
splay = "flex";
}

function closeForm() {
document.getElementById("myForm").style.di
splay = "none";
}

function orderOpen(){

document.getElementById("avi").style.display
= "flex";
}

function orderClose(){

document.getElementById("avi").style.display
= "none";
}

function orderO(){

document.getElementById("openO").style.dis
play = "flex";
}

function orderC(){

document.getElementById("openO").style.dis
play = "none";
}
function oO1(){

document.getElementById("o1").style.display
= "flex";
}

function oC1(){
document.getElementById("o1").style.display
= "none";
}

function oO2(){
document.getElementById("o2").style.display
= "flex";
}

function oC2(){
document.getElementById("o2").style.display
= "none";
}

function oO3(){

document.getElementById("o3").style.display
= "flex";
}

function oC3(){
document.getElementById("o3").style.display
= "none";
}

function oO4(){

document.getElementById("o4").style.display
= "flex";
}

function oC4(){
document.getElementById("o4").style.display
= "none";
}

function trainB(){

document.getElementById("bookTrain").style.
display = "flex";
}
function trainC(){

document.getElementById("bookTrain").style.
display = "none";
}

function h1DB(){

document.getElementById("hBook1").style.di
splay = "flex";
}
function h1DC(){

document.getElementById("hBook1").style.di
splay = "none";
}

function h1BB(){
document.getElementById("hBook2").style.di
splay = "flex";
}
function h1BC(){

document.getElementById("hBook2").style.di
splay = "none";
}

function h2DB(){

document.getElementById("hBook3").style.di
splay = "flex";
}
function h2DC(){

document.getElementById("hBook3").style.di
splay = "none";
}
function h2BB(){

document.getElementById("hBook4").style.di
splay = "flex";
}
function h2BC(){

document.getElementById("hBook4").style.di
splay = "none";
}

function h3DB(){

document.getElementById("hBook5").style.di
splay = "flex";
}
function h3DC(){

document.getElementById("hBook5").style.di
splay = "none";
}

function h3BB(){

document.getElementById("hBook6").style.di
splay = "flex";
}
function h3BC(){

document.getElementById("hBook6").style.di
splay = "none";
}

function h4DB(){

document.getElementById("hBook7").style.di
splay = "flex";
}
function h4DC(){

document.getElementById("hBook7").style.di
splay = "none";
}

function h4BB(){

document.getElementById("hBook8").style.di
splay = "flex";
}
function h4BC(){

document.getElementById("hBook8").style.di
splay = "none";
}

function h5DB(){
document.getElementById("hBook9").style.di
splay = "flex";
}
function h5DC(){

document.getElementById("hBook9").style.di
splay = "none";
}

function h5BB(){

document.getElementById("hBook10").style.d
isplay = "flex";
}
function h5BC(){

document.getElementById("hBook10").style.d
isplay = "none";
}

You might also like