<html>
<head>
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
   
<style>
/*custom font*/

@import url(http://fonts.googleapis.com/css?family=Montserrat);
/*basic reset*/
* {
margin: 0;
padding: 0;
}
html ,body{
      height: 100vh;
	min-height: 100%;
/*Image only BG fallback*/

/*background = gradient + image pattern combo*/
}
body,#msform div,#msform form,#msform input,#msform select,#msform p {
	padding: 0;
      margin: 0;
      outline: none;
      font-family: Roboto, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      line-height: 22px;
}
h1 {
      margin: 15px 0;
      font-weight: 400;
      color: #17684f;
      }
/*form styles*/

#msform fieldset {
height: 80vh;
background: white;
border: 0 none;
border-radius: 3px;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
padding: 20px 30px;
box-sizing: border-box;
width: 80%;
margin: 0 10%;
/*stacking fieldsets above each other*/
position: absolute;
border-left: 6px solid #17684f;
overflow-y: scroll;

}
/*Hide all except first fieldset*/
#msform fieldset:not(:first-of-type) {
display: none;
}
/*inputs*/
#msform input, #msform textarea, #msform select {
	margin-bottom: 10px;
      border: 2px solid #17684f;
      border-radius: 3px;
}
#msform input{
	
      width: calc(101% - 10px);
      padding: 5px;
    }

#msform select {
      width: 100%;
      padding: 7px 0;
      background: transparent;
      }
#msform textarea {
      width: calc(100% - 6px);
      }
/*buttons*/
#msform .action-button {
	width: 150px;
      padding: 10px;
      border: none;      
      -webkit-border-radius: 5px; 
      -moz-border-radius: 5px; 
      border-radius: 5px; 
      background-color: green;
      font-size: 16px;
      color: #fff;
      cursor: pointer;
}
#msform .action-button:hover, #msform .action-button:focus {
box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
#msform input:hover,#msform select:hover,#msform textarea:hover, .preferred-metod label:hover input {
      box-shadow: 0 0 5px 0 #17684f;
      }
#msform input[type="date"]::-webkit-inner-spin-button {
      display: none;
      }
#msform button:hover {
      background-color: #17684f;
      }
 table{
            width: 100%;
            height: 10%;
            overflow-y: hidden;
           border: 2px solid #17684f;
           border-radius: 3px;
           
        }
 table,
 th,
td {
            border: 1px solid black;
            border-collapse: collapse;
            padding: 8px 10px;
            justify-content: space-around;
            
            background-color: solid yellow;
            color: black;
            font-size: large;
            overflow-x: hidden;
        }
/*headings*/


.fs-title {
font-size: 15px;
text-transform: uppercase;
color: #2C3E50;
margin-bottom: 10px;
}
.fs-subtitle {
font-weight: normal;
font-size: 13px;
color: #666;
margin-bottom: 20px;
}
#msform .item {
      position: relative;
      margin: 10px 0;
      }
#msform .item:hover p,#msform .item:hover i {
      color: #095484;
      }
#msform input:hover,#msform select:hover,#msform textarea:hover,#msform .preferred-metod label:hover input {
      box-shadow: 0 0 5px 0 #17684f;
      }

 #msform  .preferred-metod label {
      display: block;
      margin: 5px 0;
      }
     
      #msform  .preferred-metod:hover input {
      box-shadow: none;
      }
   #msform .preferred-metod-item input,#msform .preferred-metod-item span {
      width: auto;
      vertical-align: middle;
      }
      #msform .preferred-metod-item input {
      margin: 0 5px 0 0;
   border-color: #000000  
}
#msform input[type="date"]::-webkit-inner-spin-button {
      display: none;
      }
      #msform .item i, #msform input[type="date"]::-webkit-calendar-picker-indicator {
      position: absolute;
      font-size: 20px;
      color: #a9a9a9;
      }
      #msform  .item i {
      right: 1%;
      top: 30px;
      z-index: 1;
      }
      [type="date"]::-webkit-calendar-picker-indicator {
      right: 0;
      z-index: 2;
      opacity: 0;
      cursor: pointer;
      }
      .btn-block {
      margin-top: 20px;
      text-align: center;
      }
      #msform .name-item,#msform .city-item,#msform .heading-name {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      }
      #msform .name-box{
      display: flex;
      flex-wrap: wrap;
      justify-content:space-around;
      }
      #msform .name-box input{
        width: calc(35% - 20px) ;
      }
      #msform .name-item input,#msform .city-item input {
      width: calc(50% - 20px);
      }
      #msform .city-item select {
      width: calc(50% - 8px);
      }
     #msform .container-fluid{
       padding-left: 22px;
     }

/*progressbar*/
#progressbar {
padding-left: 23%;
margin-bottom: 30px;
overflow: hidden;
/*CSS counters to number the steps*/
counter-reset: step;
}
#progressbar li {
list-style-type: none;
color: black;
text-transform: uppercase;
font-size: 17px;
width: 23.33%;
float: left;
position: relative;
text-align: center;

}
#progressbar li:before {
content: counter(step);
counter-increment: step;
text-align: center;
 width: 25px;
line-height: 25px;
display: block;
font-size: 15px;
color: #333;
background: white;
border-radius: 3px;
margin: 0 auto 5px auto;
}
/*progressbar connectors*/
#progressbar li:after {
content: '';
width: 100%;
height: 2px;
background: white;
position: absolute;
left: -50%;
top: 9px;
z-index: -1; /*put it behind the numbers*/
}
#progressbar li:first-child:after {
/*connector not needed before the first step*/
content: none;
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before, #progressbar li.active:after {
background: #27AE60;
color: white;
}
</style>

</head>
<body>

<h1 style="margin-top:15px" align="center">Student Application Form</h1>
<!-- multistep form -->
<form id="msform">
<!-- progressbar -->
<ul id="progressbar">
<li class="active" style="padding-left: 2%;">Personal Details</li>
<li style="padding-left: 2%;">Academic Profiles</li>
<li style="padding-left: 2%; text-indent: 1px;">Other Details</li>
</ul>
<!-- fieldsets -->
<fieldset style="left:3%">
      <h1>Student Application Form</h1>
        <h5>Additional Information Here</h5>
        <br>
	<div class="item">
		<p>Login ID</p>
		<input type="text" name="name"/>
	  </div>
	  <div class="container-fluid m-0 w-50 d-inline-block p-0" >
		<label>Area Of Interest</label>
   </div>
   <div class="container-fluid m-0 w-50 d-inline-block p-23 float-right ">
		 <label>Preferences</label>
   </div>
   
		   <div class="name-item">
   <input type="text" name="name" placeholder="1"/>
   <input type="text" name="name" placeholder="1"/>
   </div>
   <div class="name-item">
	
	 <input type="text" name="name" placeholder="2"/>
	 <input type="text" name="name" placeholder="2"/>
   </div>
   <div class="name-item">
	 <input type="text" name="name" placeholder="3"/>
	 <input type="text" name="name" placeholder="3"/>
   </div>
 
 <div class="item">
   <p>Professors Interest to work with </p>
   <input type="text" name="name" placeholder="1"/>
   <input type="text" name="name" placeholder="2"/>
   <input type="text" name="name" placeholder="3"/>
 </div>
 <h2>Personal Details</h2>
 <div class="container-fluid m-0 w-50 d-inline-block p-0" >
   <label>First Name</label>
</div>
<div class="container-fluid m-0 w-50 d-inline-block p-23 float-right ">
	<label>Last Name</label>
</div>
<div class="name-item">
          <input type="text" name="name"/>
          <input type="text" name="name"/>
        </div>
        <div class="container-fluid m-0 w-50 d-inline-block p-0" >
          <label>Gender</label>
        </div>
         <div class="container-fluid m-0 w-50 d-inline-block p-23 float-right ">
           <label>Date</label>
           <i class="fas fa-calendar-alt"></i>
        </div>
     
        <div class="name-item">
          <input type="text" name="name"/>
          <input type="date" name="name"/>
          
        </div>
        <div class="name-item">
          <label>Email</label>
         </div>
         <div class="name">
          <input type="email" name="name"/>
         </div>
         <div class="container-fluid m-0 w-50 d-inline-block p-0" >
          <label>telephone</label>
     </div>
     <div class="container-fluid m-0 w-50 d-inline-block p-23 float-right ">
           <label>Mobile Number</label>
     </div>
        <div class="name-item">
          <input type="number" />
          <input type="number"/>
        </div>
        <div class="container-fluid m-0 w-50 d-inline-block p-0" >
          <label>Correspondence Address</label>
     </div>
     <div class="container-fluid m-0 w-50 d-inline-block p-23 float-right ">
           <label>Permanent Address</label>
     </div>
        <div class="name-item">
          <input type="text" name="name"/>
          <input type="text" name="name" placeholder="Same as Correspondence Address"/>
        </div>
        <div class="container-fluid m-0 w-50 d-inline-block p-0" >
          <label>City</label>
     </div>
     <div class="container-fluid m-0 w-50 d-inline-block p-23 float-right ">
           <label>City</label>
     </div>
        <div class="name-item">
          <input type="text" name="name"/>
          <input type="text" name="name"/>
        </div>
        <div class="container-fluid m-0 w-50 d-inline-block p-0" >
          <label>State</label>
     </div>
     <div class="container-fluid m-0 w-50 d-inline-block p-23 float-right ">
           <label>State</label>
     </div>
        <div class="name-item">
          <input type="text" name="name"/>
          <input type="text" name="name"/>
        </div>
        <div class="container-fluid m-0 w-50 d-inline-block p-0" >
          <label>Postal Code</label>
     </div>
     <div class="container-fluid m-0 w-50 d-inline-block p-23 float-right ">
           <label>Postal Code</label>
     </div>
        <div class="name-item">
          <input type="number" name="name"/>
          <input type="number" name="name"/>
        </div>
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
      <h2>Academic Details</h2>
      <br>
      <h4>SSC / Class X</h4>
      <br>
      <div class="container-fluid m-0 w-50 d-inline-block p-0" >
        <label>Institution</label>
   </div>
   <div class="container-fluid m-0 w-50 d-inline-block p-23 float-right ">
         <label>Year Of Passing</label>
   </div>
      <div class="name-item">
        <input type="text" name="name"/>
        <input type="number" name="name"/>
      </div>
      <div class="container-fluid m-0 w-50 d-inline-block p-0" >
        <label>Percentage CGPA</label>
   </div>
   <div class="container-fluid m-0 w-50 d-inline-block p-23 float-right ">
         <label>University / Board</label>
   </div>
      <div class="name-item">
        <input type="number" name="name" placeholder="<70% rejected"/>
        <input type="text" name="name"/>
      </div>
      <div class="name-item">
        <label>Majors</label>
       </div>
       <div class="name">
        <input type="text" name="name"/>
       </div>
       <br>
      <h4>HSC / PUC / Class XII</h4>
      <br>
      <div class="container-fluid m-0 w-50 d-inline-block p-0" >
        <label>Institution</label>
   </div>
   <div class="container-fluid m-0 w-50 d-inline-block p-23 float-right ">
         <label>Year Of Passing</label>
   </div>
      <div class="name-item">
        <input type="text" name="name"/>
        <input type="number" name="name"/>
      </div>
      <div class="container-fluid m-0 w-50 d-inline-block p-0" >
        <label>Percentage CGPA</label>
   </div>
   <div class="container-fluid m-0 w-50 d-inline-block p-23 float-right ">
         <label>University / Board</label>
   </div>
      <div class="name-item">
        <input type="number" name="name" placeholder="<65% rejected"/>
        <input type="text" name="name"/>
      </div>
      <div class="name-item">
        <label>Majors</label>
       </div>
       <div class="name">
        <input type="text" name="name"/>
       </div>
       <h4 style="color: red; text-align: center;">ANY PREVIOUS/CURRENT BACKLOGS(A.T.K.T.) WILL BE REJECTED. </h4><br>
       <h4>Graduation</h4>
      <br>
      <div class="name-item">
        <label>Course Name</label>
       </div>
       <div class="name">
        <input type="text" name="name"/>
       </div>
       <div class="name-item">
        <label>Institution</label>
       </div>
       <div class="name">
        <input type="text" name="name"/>
       </div>
      
      <div class="container-fluid m-0 w-50 d-inline-block p-0" >
        <label>City</label>
   </div>
   <div class="container-fluid m-0 w-50 d-inline-block p-23 float-right ">
         <label>Enrollment ID</label>
   </div>
      <div class="name-item">
        <input type="text" name="name" />
        <input type="text" name="name"/>
      </div>
      <div class="container-fluid m-0 w-50 d-inline-block p-0" >
        <label>Current Year</label>
   </div>
   <div class="container-fluid m-0 w-50 d-inline-block p-23 float-right ">
         <label>University / Board</label>
   </div>
      <div class="name-item">
        <input type="text" name="name" placeholder="<2 reject form"/>
        <input type="text" name="name"/>
      </div>
     
      <table>
        <div style="width: 50%;border-color:  white;">
       <td style="border-color:  white;">
         C.G.P.A.
       </td>
       <td  style="text-align: center;border-color: white;">
         <input style=" color: black; border: 2px solid #17684f ;" type="number" id="usr" name=""  placeholder="<7 reject form" >
         <td style="border-color:  white;">
         Out Of
        </td>
        <td  style="text-align: center;border-color: white;" placeholder="<7 reject form">
          <input style=" color: black; border: 2px solid #17684f ;" type="number" id="usr" name="" >
         <td  style="border-color: white;">
          Exp Date of Graduation
        </td>
       </div>
        <td colspan="3" style="text-align: center;">
          <input style=" color: black; border: 2px solid #17684f ;" type="date" id="usr" name="" >
          <br>
         </td>
         <br>
        </td>
       </table>
   
 
   

<table style="border: #000 3px;border-radius: 2px;">
 <td style="width:50%;">
  Semester Details
</td>
<br>

<td style="width:50%;">
  Percent S.G.P.A
</td>
</tr>

<tr>
<td style="width:50%;">
  1 <sup>st</sup> Year
</td>
<td colspan="3" style="text-align: center;width: 50%;">
<input style=" color: black; border: 2px solid #17684f ;" type="number" id="usr" name="" placeholder="1st Sem">
<br>

<input style=" color: black; border: 2px solid #17684f ;" type="number" id="usr" name="" placeholder="2nd Sem"></td>
</td>
</tr>

<tr>
<td style="width:50%;">
  2 <sup>nd</sup> Year
</td>
<td colspan="3" style="text-align: center;width: 50%;">
<input style=" color: black; border: 2px solid #17684f ;" type="number" id="usr" name="" placeholder="3rd Sem">
<br>

<input style=" color: black; border: 2px solid #17684f ;" type="number" id="usr" name="" placeholder="4th Sem"></td>
</td>
<tr>
<td style="width:50%;">
  3 <sup>rd</sup> Year
</td>
<td  style="text-align: center; width: 50%;">
<input style=" color: black; border: 2px solid #17684f ;" type="number" id="usr" name="" placeholder="5th Sem">
<br>

<input style=" color: black; border: 2px solid #17684f ;" type="number" id="usr" name="" placeholder="6th Sem"></td>
</td>
<tr>
<td style="width:50%;">
  4 <sup>th</sup> Year
</td>
<td colspan="3" style="text-align: center; width: 50%;">
  <input style=" color: black; border: 2px solid #17684f ;" type="number" id="usr" name="" placeholder="7th Sem">
  <br>
 
  <input style=" color: black; border: 2px solid #17684f ;" type="number" id="usr" name="" placeholder="8th Sem"></td>
</td>
</tr>
</table>
<br>

 <h4>Post Graduation</h4>
 <div class="name-item">
  <label>Course Name</label>
 </div>
 <div class="name">
  <input type="text" name="name"/>
 </div>
 <div class="name-item">
  <label>Institution</label>
 </div>
 <div class="name">
  <input type="text" name="name"/>
 </div>
 <div class="container-fluid m-0 w-50 d-inline-block p-0" >
  <label>City</label>
</div>
<div class="container-fluid m-0 w-50 d-inline-block p-23 float-right ">
   <label>Enrollment ID</label>
</div>
<div class="name-item">
  <input type="text" name="name" placeholder=""/>
  <input type="text" name="name"/>
</div>
<div class="container-fluid m-0 w-50 d-inline-block p-0" >
  <label>CGPA</label>
</div>
<div class="container-fluid m-0 w-50 d-inline-block p-23 float-right ">
   <label>Exp Date of graduation</label>
</div>
<div class="name-item">
  <input type="text" name="name" />
  <input   type="date" name="name"/>
</div>


<table style="border: #000 3px;border-radius: 2px;">
<td style="width:50%;">
 Semester Details
</td>
<br>

<td style="width:50%;">
 Percent S.G.P.A
</td>
</tr>

<tr>
<td style="width:50%;">
 1 <sup>st</sup> Year
</td>
<td colspan="3" style="text-align: center;">
<input style=" color: black; border: 2px solid #17684f ;" type="number" id="usr" name="" placeholder="1st Sem">
<br>

<input style=" color: black; border: 2px solid #17684f ;" type="number" id="usr" name="" placeholder="2nd Sem"></td>
</td>
</tr>

<tr>
<td style="width:50%;">
 2 <sup>nd</sup> Year
</td>
<td colspan="3" style="text-align: center;">
<input style=" color: black; border: 2px solid #17684f ;" type="number" id="usr" name="" placeholder="3rd Sem">
<br>

<input style=" color: black; border: 2px solid #17684f ;" type="number" id="usr" name="" placeholder="4th Sem"></td>
</td>
</table>

<br>
<h4>Relevent Courses</h4>
<br>
<table style="column-width: 20%;">


<tr>
<td colspan="3" >
Upload  Certificate
</td>


<td  style="text-align: center;width: 50%;">
<input style=" color: black; border: 2px solid #17684f ;" type="file" id="usr" name="" placeholder="1st Sem">
<br>

<input style=" color: black; border: 2px solid #17684f ;" type="file" id="usr" name="" placeholder="2nd Sem">
<br>
<input style=" color: black; border: 2px solid #17684f ;" type="file" id="usr" name="" placeholder="2nd Sem">
<br>
<input style=" color: black; border: 2px solid #17684f ;" type="file" id="usr" name="" placeholder="2nd Sem">
<br>
<input style=" color: black; border: 2px solid #17684f ;" type="file" id="usr" name="" placeholder="2nd Sem">
</td>
</td>
</tr>

</table>
<br>
<div class="item preferred-metod">
<p>Have you participated in any research program</p>
<div class="preferred-metod-item">
  <label><input type="radio" name="name" checked> <span>Yes</span></label>
  <label><input type="radio" name="name"> <span>No</span></label>

</div>
</div>
<div class="item">
<p>If yes, give details</p>
<textarea rows="2"></textarea>
</div>
<table style="border-color:  white;">
<tr style="border-color:  white;">
<td style="border-color:  white; width: 50%;">
  Topic Of Research
</td>
<td colspan="3" style="border-color: white; text-align: center;">
<input style=" color: black; border: 2px solid #17684f ;" type="text" id="usr" name="" >
<br>


</td>
</tr>

<tr>
<td style="border-color:  white; width: 50%;">
  Area Of Research
</td>
<td colspan="3" style="text-align: center;">
<input style=" color: black; border: 2px solid #17684f ;" type="text" id="usr" name="" >
<br>
</td>
<tr>
</table>
<table>
 <div style="width: 50%;border-color:  white;">
<td style="border-color:  white;">
   Date Of Start
</td>
<td colspan="3" style="text-align: center;border-color: white;">
  <input style=" color: black; border: 2px solid #17684f ;" type="date" id="usr" name="" >
  <td colspan="3" style="border-color: white;">
    Date Of Finish
 </td>
</div>
 <td colspan="3" style="text-align: center;">
   <input style=" color: black; border: 2px solid #17684f ;" type="date" id="usr" name="" >
   <br>
  </td>
  <br>
 </td>
</table>
<br>
<table style="border-color:  white;">
  <tr style="border-color:  white;">
  <td style="border-color:  white;width: 50%;">
    Name of the institution
</td>
<td colspan="3" style="text-align: center; border-color: white;">
  <input style=" color: black; border: 2px solid #17684f ;" type="text" id="usr" name="" >
  <br>
 
 
</td>
</tr>

<tr style="border-color:  white;">
<td style="border-color:  white;width: 50%;">
  Name of the Professor
</td>
<td  style="text-align: center; border-color: white; width: 50%;">
  <input style=" color: black; border: 2px solid #17684f ;" type="text" id="usr" name="">
  <br>
 </td>

 </table>

 <table>
  <td colspan="3" style="border-color: white;">
    Felloship Provided
  </td>
  <td colspan="3" style="text-align: center;border-color: white;">
    <input style=" color: black; border: 2px solid #17684f ;" type="radio" id="Yes" name="button" >
    <label for="Yes">Yes</label>
   </td>
    <td style="border-color:  white;">
      <input style=" color: black; border: 2px solid #17684f ;" type="radio" id="No" name="button" >
      <label for="No">No</label>
      </td>
    <td style="border-color:  white;">
      If yes then upload Certificate
   </td>
   <td colspan="3" style="text-align: center;">
     <input style=" color: black; border: 2px solid #17684f ;" type="file" id="usr" name="" >
     <br>
    </td>
    <br>
   </td>
  </table>
  <table>
    <tr>
    <td colspan="3" style="border-color:  white;">
      Name Of the organization
  </td>
  <td colspan="3" style="text-align: center;border-color: white;">
    <input style=" color: black; border: 2px solid #17684f ;" type="text" id="usr" name="" >
    <br>
   
   
  </td>
  </tr>
  
  <tr>
  <td colspan="3" style="border-color:  white;width: 50%;">
    Upload Dissertation
  </td>
  <td colspan="3" style="text-align: center; width: 100px;">
    <input style=" color: black; border: 2px solid #17684f ;" type="file" id="usr" name="" >
    <br>
   </td>
   <tr>
   </table>
<br>
<table>
<tr>
  <td colspan="3" style="border-color:  white;">
    Other Qualification,  if any (give details)
  </td>
  <td colspan="3" style="text-align: center;width: 50%;">
    <input style=" color: black; border: 2px solid #17684f ;" type="text" id="usr" name="" >
    <br>
   </td>
   <tr>
   </table>
<br>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="button" name="next" class="next action-button" value="Next" />
</fieldset>
<fieldset>
      <h4>Other Details</h4>
      <div class="item">
        <p>Training / projects undertaken, if any (give details)</p>
        <textarea rows="5"></textarea>
      </div>
      <div class="item">
        <p>Extra-curricular activities, if any</p>
        <textarea rows="5"></textarea>
      </div>
      <div class="item">
        <p>Research Work/Lab Skills & Experience</p>
        <textarea rows="5"></textarea>
      </div>
      <div class="item">
        <p>Elaborate Your education & Career Goals</p>
        <textarea rows="5"></textarea>
      </div>
      <div class="item">
        <p>Publication, Awards & Honours (If any)</p>
        <textarea rows="5"></textarea>
      </div>
      <div class="item">
        <p>Certifications, Talks & Seminars Attended (please add only notable ones)</p>
        <textarea rows="5"></textarea>
      </div>
      <div class="item">
        <p>A write-up (not exceeding 300 words) as to the specific area of interest of the applicant and what he/she would like to learn and achieve through this internship. It can also include the specific topics and projects that you are most interested in pursuing. What makes you an appropriate candidate for the program.</p>
        <textarea rows="5"></textarea>
      </div>
      <h4>Software Experience & level of experience</h4>
      <table style="border: black;">
        <tr>
        <td colspan="3">
         Application
        </td>
     
        <td colspan="3">
          Level Of Experience
       </td>
        <br>
       
       
      </td>
      </tr>
      
      <tr>
      <td colspan="3">
       Python
      </td>
      <td colspan="3" style="text-align: center;">
        <input style=" color: black; border: 2px solid #17684f ;" type="text" id="usr" name="">
        <br>
       </td>
       <tr>
        <td colspan="3">
          NMATLAB/Octave
        </td>
        <td colspan="3" style="text-align: center;">
          <input style=" color: black; border: 2px solid #17684f ;" type="text" id="usr" name="">
          
         </td>
         <tr>
          <td colspan="3">
            Mathematica
          </td>
          <td colspan="3" style="text-align: center;">
            <input style=" color: black; border: 2px solid #17684f ;" type="text" id="usr" name="">
            <br>
           </td>
           <tr>
            <td colspan="3">
              C
            </td>
            <td colspan="3" style="text-align: center;">
              <input style=" color: black; border: 2px solid #17684f ;" type="text" id="usr" name="" >
              <br>
             </td>
             <tr>
              <td colspan="3">
                C++
              </td>
              <td colspan="3" style="text-align: center;">
                <input style=" color: black; border: 2px solid #17684f ;" type="text" id="usr" name="">
                <br>
               </td>
               <tr>
                <td colspan="3">
                 Java
                </td>
                <td colspan="3" style="text-align: center;">
                  <input style=" color: black; border: 2px solid #17684f ;" type="text" id="usr" name="">
                  <br>
                 </td>
                 <tr>
                  <td colspan="3">
                    ANSYS
                  </td>
                  <td colspan="3" style="text-align: center;">
                    <input style=" color: black; border: 2px solid #17684f ;" type="text" id="usr" name="" >
                    <br>
                   </td>
                   <tr>
                    <td colspan="3">
                     Linux
                    </td>
                    <td colspan="3" style="text-align: center;">
                      <input style=" color: black; border: 2px solid #17684f ;" type="text" id="usr" name="">
                      <br>
                     </td>
                     <tr>
                      <td colspan="3">
                        LaTex
                      </td>
                      <td colspan="3" style="text-align: center;">
                        <input style=" color: black; border: 2px solid #17684f ;" type="text" id="usr" name="" >
                        <br>
                       </td>
                       <tr>
                        <td colspan="3">
                          Other
                        </td>
                        <td colspan="3" style="text-align: center;">
                          <input style=" color: black; border: 2px solid #17684f ;" type="text" id="usr" name="">
                          <br>
                         </td>
       </table>
       <table>
        <td colspan="3">
          Upload CV
        </td>
        <td colspan="3" style="text-align: center;">
          <input style=" color: black; border: 2px solid #17684f ;" type="file" id="usr" name="" >
          <td colspan="3">
            Upload College ID
         </td>
         <td colspan="3" style="text-align: center;">
           <input style=" color: black; border: 2px solid #17684f ;" type="file" id="usr" name="" >
           <br>
          </td>
          <br>
         </td>
         
        </table>
        <table>
        <td colspan="3">
          Upload Marksheet
        </td>
        <td colspan="3" style="text-align: center;">
          <input style=" color: black; border: 2px solid #17684f ;" type="file" id="usr" name="" >
          <td colspan="3">
            Upload Certificate
         </td>
         <td colspan="3" style="text-align: center;">
           <input style=" color: black; border: 2px solid #17684f ;" type="file" id="usr" name="" >
           <br>
          </td>
          <br>
         </td>
        </table>
        <table>
          <td colspan="3">
            Upload Photo
          </td>
          <td colspan="3" style="text-align: center;">
            <input style=" color: black; border: 2px solid #17684f ;" type="file" id="usr" name="" >
            <td colspan="3">
              Upload Signature
           </td>
           <td colspan="3" style="text-align: center;">
             <input style=" color: black; border: 2px solid #17684f ;" type="file" id="usr" name="" >
             <br>
            </td>
            <br>
           </td>
          </table>
         <table style="border: #000;">
               <td><b>Declaration:</b> I affirm that the information given above is correct. I have carefully read all the "Instructions to Applicants" as mentioned on the websites and shall abide by the same.</td>
         </table>
          <table>
            <td colspan="3" style="border-color:  white;">
              Place
            </td>
            <td colspan="3" style="text-align: center;border-color: white;">
              <input style=" color: black; border: 2px solid #17684f ;" type="text" id="usr" name="" >
              <td colspan="3" style="border-color:  white;">
                Name
             </td>
             <td colspan="3" style="text-align: center;border-color: white;">
               <input style=" color: black; border: 2px solid #17684f ;" type="text" id="usr" name="" >
               <br>
              </td>
              <br>
             </td>
             
            </table>
            <table>
            <td colspan="3" style="border-color:  white;">
              Date
            </td>
            <td colspan="3" style="text-align: center;border-color: white;">
              <input style=" color: black; border: 2px solid #17684f ;" type="date" id="usr" name="" >
              <td colspan="3" style="border-color:  white;">
                Signature
             </td>
             <td colspan="3" style="text-align: center;border-color: white;">
               <input style=" color: black; border: 2px solid #17684f ;" type="file" id="usr" name="" >
               <br>
              </td>
              <br>
             </td>
            </table>
      
    </form>
  </div>
<input type="button" name="previous" class="previous action-button" value="Previous" />
<input type="submit" name="submit" class="submit action-button" value="Submit" />
</fieldset>
</form>

<!-- jQuery --> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- jQuery easing plugin --> 
<script src="assets/js/jquery.easing.min.js" type="text/javascript"></script> 
<script>
$(function() {

//jQuery time
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches

$(".next").click(function(){
	if(animating) return false;
	animating = true;
	
	current_fs = $(this).parent();
	next_fs = $(this).parent().next();
	
	//activate next step on progressbar using the index of next_fs
	$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
	
	//show the next fieldset
	next_fs.show(); 
	//hide the current fieldset with style
	current_fs.animate({opacity: 0}, {
		step: function(now, mx) {
			//as the opacity of current_fs reduces to 0 - stored in "now"
			//1. scale current_fs down to 80%
			scale = 1 - (1 - now) * 0.2;
			//2. bring next_fs from the right(50%)
			left = (now * 50)+"%";
			//3. increase opacity of next_fs to 1 as it moves in
			opacity = 1 - now;
			current_fs.css({'transform': 'scale('+scale+')'});
			next_fs.css({'left': left, 'opacity': opacity});
		}, 
		duration: 800, 
		complete: function(){
			current_fs.hide();
			animating = false;
		}, 
		//this comes from the custom easing plugin
		easing: 'easeInOutBack'
	});
});

$(".previous").click(function(){
	if(animating) return false;
	animating = true;
	
	current_fs = $(this).parent();
	previous_fs = $(this).parent().prev();
	
	//de-activate current step on progressbar
	$("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
	
	//show the previous fieldset
	previous_fs.show(); 
	//hide the current fieldset with style
	current_fs.animate({opacity: 0}, {
		step: function(now, mx) {
			//as the opacity of current_fs reduces to 0 - stored in "now"
			//1. scale previous_fs from 80% to 100%
			scale = 0.8 + (1 - now) * 0.2;
			//2. take current_fs to the right(50%) - from 0%
			left = ((1-now) * 50)+"%";
			//3. increase opacity of previous_fs to 1 as it moves in
			opacity = 1 - now;
			current_fs.css({'left': left});
			previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
		}, 
		duration: 800, 
		complete: function(){
			current_fs.hide();
			animating = false;
		}, 
		//this comes from the custom easing plugin
		easing: 'easeInOutBack'
	});
});

$(".submit").click(function(){
	return false;
})

});
</script>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-36251023-1']);
  _gaq.push(['_setDomainName', 'jqueryscript.net']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
</body>

</html>