├── README.md ├── contact.html ├── holiday.html ├── home.jpg ├── hpack1.JPG ├── hpack10.JPG ├── hpack2.JPG ├── hpack3.JPG ├── hpack4.JPG ├── hpack5.JPG ├── hpack6.JPG ├── hpack7.JPG ├── hpack8.JPG ├── hpack9.JPG ├── img ├── index.css ├── index.html ├── main.js ├── meal.JPG ├── meal.html ├── service.html ├── slide1.jpg ├── taj.jpg ├── temple.jpg └── tower.jpg /README.md: -------------------------------------------------------------------------------- 1 | # Railway_Ticket_Reservation_System 2 | This is a code of railway ticket reservation system using HTML, CSS, and JavaScript. On this web page, there are 5 menus and so many sub-menus. From this page, you can book train tickets, Book your meal, Find holiday packages, Services which are available at the station and there is Contact Us Form. 3 | This is just like irctc.co.in(Indian railway ticket booking website) 4 | -------------------------------------------------------------------------------- /contact.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Railway Ticket Booking 5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 |

Railway Ticket reservation system

13 | 22 |
23 |

Contact US

24 | 25 |
26 | First Name     Last Name 

27 |   Email         
 
28 |   Contact No.  

29 |   Query        

30 | Gender:-
31 |   
32 |        Male 
33 |        Female
34 |        Other 

35 | 
36 |       
37 |    
38 |       
39 |
              
40 |    
41 |     
42 |     
43 |     
44 |
49 | 50 | 51 | 52 | 53 |

Email Us - helpdesk@erail.gov.in

54 |
55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /holiday.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Railway Ticket Booking 5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 |

Railway Ticket reservation system

13 | 23 |

Holiday Packages

24 |
25 | hpackages 26 | 27 | 28 | 29 |
30 |
36 | 37 | 38 | 39 |
40 |
56 | 57 |
58 |
59 | hpackages 60 | 61 | 62 |
63 |
69 | 70 | 71 |
72 |
87 |
88 |
89 | hpackages 90 | 91 | 92 |
93 |
99 | 100 | 101 |
102 |
118 |
119 |
120 | hpackages 121 | 122 | 123 |
124 |
130 | 131 | 132 |
133 |
149 |
150 |
151 | hpackages 152 | 153 | 154 |
155 |
161 | 162 |
163 |
179 |
180 | 181 |
182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | -------------------------------------------------------------------------------- /home.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iam-abhijha/Railway_Ticket_Reservation_System/113ee0fba8f855a9c97be2dbd1b371610a0cf141/home.jpg -------------------------------------------------------------------------------- /hpack1.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iam-abhijha/Railway_Ticket_Reservation_System/113ee0fba8f855a9c97be2dbd1b371610a0cf141/hpack1.JPG -------------------------------------------------------------------------------- /hpack10.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iam-abhijha/Railway_Ticket_Reservation_System/113ee0fba8f855a9c97be2dbd1b371610a0cf141/hpack10.JPG -------------------------------------------------------------------------------- /hpack2.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iam-abhijha/Railway_Ticket_Reservation_System/113ee0fba8f855a9c97be2dbd1b371610a0cf141/hpack2.JPG -------------------------------------------------------------------------------- /hpack3.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iam-abhijha/Railway_Ticket_Reservation_System/113ee0fba8f855a9c97be2dbd1b371610a0cf141/hpack3.JPG -------------------------------------------------------------------------------- /hpack4.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iam-abhijha/Railway_Ticket_Reservation_System/113ee0fba8f855a9c97be2dbd1b371610a0cf141/hpack4.JPG -------------------------------------------------------------------------------- /hpack5.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iam-abhijha/Railway_Ticket_Reservation_System/113ee0fba8f855a9c97be2dbd1b371610a0cf141/hpack5.JPG -------------------------------------------------------------------------------- /hpack6.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iam-abhijha/Railway_Ticket_Reservation_System/113ee0fba8f855a9c97be2dbd1b371610a0cf141/hpack6.JPG -------------------------------------------------------------------------------- /hpack7.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iam-abhijha/Railway_Ticket_Reservation_System/113ee0fba8f855a9c97be2dbd1b371610a0cf141/hpack7.JPG -------------------------------------------------------------------------------- /hpack8.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iam-abhijha/Railway_Ticket_Reservation_System/113ee0fba8f855a9c97be2dbd1b371610a0cf141/hpack8.JPG -------------------------------------------------------------------------------- /hpack9.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iam-abhijha/Railway_Ticket_Reservation_System/113ee0fba8f855a9c97be2dbd1b371610a0cf141/hpack9.JPG -------------------------------------------------------------------------------- /img: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /index.css: -------------------------------------------------------------------------------- 1 | body{ 2 | margin: auto; 3 | background-color:lightgrey; 4 | font-family: arial; 5 | 6 | } 7 | .navigation{ 8 | margin:auto; 9 | width: 860px; 10 | padding: 0px 0px 0px 130px; 11 | height: 50px; 12 | margin-top: 20px; 13 | 14 | } 15 | 16 | .navigation ul{ 17 | padding: 0; 18 | list-style: none;; 19 | } 20 | .navigation ul li{ 21 | float: left; 22 | font-size: 20px; 23 | font-weight: bold; 24 | margin-right: 10px; 25 | } 26 | .navigation ul li a{ 27 | text-decoration: none; 28 | color: darkblue; 29 | background:lightpink; 30 | border-top: 1px dotted black; 31 | border-left:1px dotted black; 32 | border-right: 1px dotted black; 33 | border-bottom: 1px dotted black; 34 | padding: 10px 20px 10px 20px; 35 | border-top-right-radius:10px; 36 | border-top-left-radius:10px; 37 | border-bottom-right-radius:10px; 38 | border-bottom-left-radius:10px; 39 | display: block; 40 | text-align: right; 41 | } 42 | .navigation ul li a:hover{ 43 | text-decoration: none; 44 | color:darkred; 45 | background: lightgreen; 46 | } 47 | .navigation ul li a#onlink{ 48 | background:grey; 49 | color: orange; 50 | border-bottom: 1px solid red; 51 | } 52 | 53 | .navigation ul li a#onlink:hover{ 54 | background:white; 55 | color: orange; 56 | } 57 | 58 | 59 | 60 | .main{ 61 | margin: auto; 62 | width: 860px; 63 | padding: 10px; 64 | border:1px solid red; 65 | 66 | background: lightyellow; 67 | min-height: 600px; 68 | } 69 | 70 | .booking { 71 | margin:0px; 72 | padding:0px 100px 0px 0px; 73 | border:1px solid black; 74 | width: 150px; 75 | float: left; 76 | height: 630px; 77 | background: lightblue; 78 | font-size: medium; 79 | } 80 | 81 | .img{ 82 | 83 | width:600px; 84 | height: 340px; 85 | padding: 0px 0px 10px 0px; 86 | float: right; 87 | } 88 | 89 | .imgs{ 90 | width: 190px; 91 | height: 220px; 92 | padding: 0px 1px 0px 0px; 93 | margin-left: 5px; 94 | border:1px solid black; 95 | } 96 | .head1{ 97 | 98 | margin-left: 30px; 99 | font-family: algerian; 100 | } 101 | .head2{ 102 | 103 | margin-left: 60px; 104 | font-family: algerian; 105 | } 106 | .head3{ 107 | 108 | margin-left: 95px; 109 | font-family: algerian; 110 | } 111 | .head4{ 112 | 113 | margin-left: 160px; 114 | font-family: algerian; 115 | } 116 | 117 | .submit{ 118 | margin-left: 80px; 119 | margin-top: 20px; 120 | padding: 0px 50px 0px 50px; 121 | font-size:large; 122 | background-color:tomato ; 123 | border-radius: 20px; 124 | text-align: center; 125 | 126 | } 127 | .head{ 128 | margin: 2px; 129 | margin-left: 150px; 130 | font-family: algerian; 131 | } 132 | .holiday{ 133 | margin-left: 450px; 134 | font-family: algerian; 135 | } 136 | 137 | .fsize{ 138 | font-family: algerian; 139 | font-size: x-large; 140 | } 141 | 142 | 143 | .hpack{ 144 | margin: 2px; 145 | margin-left: 300px; 146 | font-family: algerian; 147 | } 148 | .hpimg{ 149 | margin-top: 10px; 150 | border:1px solid black; 151 | margin-left: 50px; 152 | height: 160px; 153 | width: 400px; 154 | } 155 | .bookh{ 156 | float: right; 157 | margin-right: 50px; 158 | margin-top: 50px; 159 | padding: 10px 10px 10px 10px; 160 | font-size: x-large; 161 | background-color:orange; 162 | border-radius: 20px; 163 | } 164 | .bookd{ 165 | float: right; 166 | margin-right: 50px; 167 | margin-top: 50px; 168 | padding: 10px 10px 10px 10px; 169 | font-size: x-large; 170 | background-color:lightblue; 171 | border-radius: 20px; 172 | } 173 | table 174 | { 175 | border: 2px solid blue; 176 | width: 800px; 177 | margin-left: 30px; 178 | 179 | 180 | 181 | 182 | } 183 | th{ 184 | border: 1px solid black; 185 | 186 | background-color: red; 187 | font-weight: bold; 188 | padding: 10px; 189 | } 190 | td{ 191 | border: 2px solid black; 192 | 193 | 194 | font-weight: bold; 195 | padding: 50px; 196 | } 197 | 198 | 199 | td:hover{ 200 | background-color: lightblue; 201 | } 202 | tr:hover{ 203 | background-color: #ff66ff; 204 | 205 | } 206 | .meald{ 207 | width: 600px; 208 | } 209 | .order{ 210 | padding: 10px 10px 10px 10px; 211 | width: 200px; 212 | background-color:#66ff66; 213 | border-radius: 20px; 214 | } 215 | .service{ 216 | padding: 60px 20px 0px 20px; 217 | margin-left: 250px; 218 | font-family: algerian; 219 | 220 | 221 | } 222 | .service1{ 223 | 224 | margin-left: 250px; 225 | font-family: algerian; 226 | } 227 | .service2{ 228 | border: 2px solid black; 229 | width: 600px; 230 | padding: 20px; 231 | margin-bottom: 10px; 232 | margin-left: 110px; 233 | } 234 | 235 | 236 | 237 | 238 | 239 | .open-button { 240 | background-color: #555; 241 | color: white; 242 | padding: 16px 20px; 243 | border: none; 244 | cursor: pointer; 245 | opacity: 0.89; 246 | 247 | bottom: 23px; 248 | right: 28px; 249 | width: 280px; 250 | text-align: center; 251 | align-items: center; 252 | 253 | 254 | } 255 | 256 | 257 | .form-popup { 258 | width: 100%; 259 | height:100%; 260 | background-color: black; 261 | opacity: 0.96; 262 | position: fixed; 263 | 264 | left: 0; 265 | bottom:0; 266 | display: flex; 267 | justify-content: center; 268 | align-items: center; 269 | display: none; 270 | } 271 | 272 | 273 | 274 | 275 | 276 | 277 | .popup{ 278 | min-width: 500px; 279 | min-height: 300px; 280 | background-color: white; 281 | border-radius: 8px; 282 | text-align: center; 283 | padding:10px 10px 10px 10px; 284 | margin:0px 5px 0px 5px ; 285 | } 286 | 287 | .hide{ 288 | padding: 10px 50px 10px 50px; 289 | background-color: orange; 290 | text-align: center; 291 | font-size: 20px; 292 | border-radius: 5px; 293 | margin-top: 80px;: 294 | } 295 | 296 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Railway Ticket Booking 5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 |

Railway Ticket reservation system

13 | 23 | 24 | 25 | 26 |
27 |
28 | 29 |

Book

30 |

Your

31 |

Tickets

32 |

Here

33 | 34 |
35 |
    36 | From  

    37 | To  

    38 | Date 

    39 | 40 | 48 | 49 |
50 |
51 | 52 | 53 | 54 |
55 |
61 | 62 | 63 | 64 | 65 |
66 | 67 |
68 | 69 | train 70 | 71 |

HOLIDAYS

72 | 73 | Taj Mahal 74 | Golden Temple 75 | Eiffel Tower 76 | 77 |
78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | /* These Functions are for showing popup Windows */ 2 | 3 | function openForm() { 4 | document.getElementById("myForm").style.display = "flex"; 5 | } 6 | 7 | function closeForm() { 8 | document.getElementById("myForm").style.display = "none"; 9 | } 10 | 11 | function orderOpen(){ 12 | document.getElementById("avi").style.display = "flex"; 13 | } 14 | 15 | function orderClose(){ 16 | document.getElementById("avi").style.display = "none"; 17 | } 18 | 19 | function orderO(){ 20 | document.getElementById("openO").style.display = "flex"; 21 | } 22 | 23 | function orderC(){ 24 | document.getElementById("openO").style.display = "none"; 25 | } 26 | function oO1(){ 27 | document.getElementById("o1").style.display = "flex"; 28 | } 29 | 30 | function oC1(){ 31 | document.getElementById("o1").style.display = "none"; 32 | } 33 | 34 | function oO2(){ 35 | document.getElementById("o2").style.display = "flex"; 36 | } 37 | 38 | function oC2(){ 39 | document.getElementById("o2").style.display = "none"; 40 | } 41 | 42 | function oO3(){ 43 | document.getElementById("o3").style.display = "flex"; 44 | } 45 | 46 | function oC3(){ 47 | document.getElementById("o3").style.display = "none"; 48 | } 49 | 50 | function oO4(){ 51 | document.getElementById("o4").style.display = "flex"; 52 | } 53 | 54 | function oC4(){ 55 | document.getElementById("o4").style.display = "none"; 56 | } 57 | 58 | 59 | function trainB(){ 60 | document.getElementById("bookTrain").style.display = "flex"; 61 | } 62 | 63 | function trainC(){ 64 | document.getElementById("bookTrain").style.display = "none"; 65 | } 66 | 67 | function h1DB(){ 68 | document.getElementById("hBook1").style.display = "flex"; 69 | } 70 | function h1DC(){ 71 | document.getElementById("hBook1").style.display = "none"; 72 | } 73 | 74 | function h1BB(){ 75 | document.getElementById("hBook2").style.display = "flex"; 76 | } 77 | function h1BC(){ 78 | document.getElementById("hBook2").style.display = "none"; 79 | } 80 | 81 | function h2DB(){ 82 | document.getElementById("hBook3").style.display = "flex"; 83 | } 84 | function h2DC(){ 85 | document.getElementById("hBook3").style.display = "none"; 86 | } 87 | 88 | function h2BB(){ 89 | document.getElementById("hBook4").style.display = "flex"; 90 | } 91 | function h2BC(){ 92 | document.getElementById("hBook4").style.display = "none"; 93 | } 94 | 95 | 96 | function h3DB(){ 97 | document.getElementById("hBook5").style.display = "flex"; 98 | } 99 | function h3DC(){ 100 | document.getElementById("hBook5").style.display = "none"; 101 | } 102 | 103 | function h3BB(){ 104 | document.getElementById("hBook6").style.display = "flex"; 105 | } 106 | function h3BC(){ 107 | document.getElementById("hBook6").style.display = "none"; 108 | } 109 | 110 | 111 | 112 | function h4DB(){ 113 | document.getElementById("hBook7").style.display = "flex"; 114 | } 115 | function h4DC(){ 116 | document.getElementById("hBook7").style.display = "none"; 117 | } 118 | 119 | function h4BB(){ 120 | document.getElementById("hBook8").style.display = "flex"; 121 | } 122 | function h4BC(){ 123 | document.getElementById("hBook8").style.display = "none"; 124 | } 125 | 126 | 127 | function h5DB(){ 128 | document.getElementById("hBook9").style.display = "flex"; 129 | } 130 | function h5DC(){ 131 | document.getElementById("hBook9").style.display = "none"; 132 | } 133 | 134 | function h5BB(){ 135 | document.getElementById("hBook10").style.display = "flex"; 136 | } 137 | function h5BC(){ 138 | document.getElementById("hBook10").style.display = "none"; 139 | } -------------------------------------------------------------------------------- /meal.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iam-abhijha/Railway_Ticket_Reservation_System/113ee0fba8f855a9c97be2dbd1b371610a0cf141/meal.JPG -------------------------------------------------------------------------------- /meal.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Railway Ticket Booking 5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 |

Railway Ticket reservation system

13 | 23 | meals 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 |
36 |
46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 |
54 |
64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 |
72 |
82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 |
91 |
101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 |
109 |
119 | 120 | 121 | 122 | 123 | 124 | 125 |
126 |
136 | 137 | 138 | 139 | 140 |

Meals

HONEY CHILLI POTATO at ₹100
VEG DELUXE THALI at ₹150
NON VEG THALI at ₹150
MAHARAJA THALI at ₹250
VEG MEDIUM THALI at ₹150
NON VEG DELUXE THALI at ₹200
141 |
142 |
143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | -------------------------------------------------------------------------------- /service.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Railway Ticket Booking 5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 |

Railway Ticket reservation system

13 | 22 |
23 |

Service at station

24 | 25 |
26 |

Book Wheel chair

27 |
28 |
    29 | Enter Station 

    30 | PNR No.   

    31 | Contact No. 

    32 | Price - ₹500 33 | 34 | 35 |
    36 |
    41 | 42 | 43 |
44 |
45 |
46 |
47 |

Book Rest Rooms

48 |
49 |
    50 | Enter Station 

    51 | PNR No.   

    52 | Contact No. 

    53 | Price - ₹1000 for 24hrs 54 | 55 | 56 | 57 |
    58 |
    63 | 64 |
65 |
66 |
67 |
68 | 69 |
70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | -------------------------------------------------------------------------------- /slide1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iam-abhijha/Railway_Ticket_Reservation_System/113ee0fba8f855a9c97be2dbd1b371610a0cf141/slide1.jpg -------------------------------------------------------------------------------- /taj.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iam-abhijha/Railway_Ticket_Reservation_System/113ee0fba8f855a9c97be2dbd1b371610a0cf141/taj.jpg -------------------------------------------------------------------------------- /temple.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iam-abhijha/Railway_Ticket_Reservation_System/113ee0fba8f855a9c97be2dbd1b371610a0cf141/temple.jpg -------------------------------------------------------------------------------- /tower.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/iam-abhijha/Railway_Ticket_Reservation_System/113ee0fba8f855a9c97be2dbd1b371610a0cf141/tower.jpg --------------------------------------------------------------------------------