<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/joining_form.css">
<script src="js/jquery-3.4.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="container imi-joingform">
<!-- Start Header -->
<div class="imc-jfheader">
<div class="row">
<div class="col-lg-6">
<div class="imc-logo">
<h3>Shyam</h3>
</div>
</div>
<div class="col-lg-6 text-right">
<div class="imc-text">
<h1>Congratulations Shyam!</h1>
<h2>Last Visited on <span id="dateandtime"> 08-May-2019 12:01 PM </span> | My Profile | <span id="logstatus"> <a href="">Logout </a> </span> </h2>
</div>
</div>
</div>
</div>
<!-- End Header -->
<!-- Start Joining Form -->
<!-- Start row -->
<div class="row">
<div class="col-md-12">
<!-- Start accordion -->
<div id="accordion" class="">
<!-- Start First collapse -->
<div class="panel checkout-step">
<div role="tab" id="headingOne" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" >
<div class="row">
<div class="col-10 col-lg-10">
<span class="checkout-step-number">1</span>
<h4 class="checkout-step-title"> <a role="button"> Personal Details</a></h4>
</div>
<div class="col-2 col-lg-2 text-right d-none d-sm-block d-md-block d-lg-block d-xl-block">
<button id="nextBtn" name="nextBtn" class="btn btn-default imc-jfeditbtn">Edit <i class="fa fa-edit"></i></button>
</div>
<div class="col-2 col-lg-2 text-right d-md-none d-lg-none">
<button id="nextBtn" name="nextBtn" class="btn btn-default imc-jfeditbtn"><i class="fa fa-edit"></i></button>
</div>
</div>
</div>
<div id="collapseOne" class="collapse in">
<!-- Start collapse body -->
<div class="checkout-step-body">
<!-- Start row -->
<div class="row">
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">First Name</label>
<input id="name" name="name" type="text" placeholder="First Name" class="form-control input-md" required="">
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Middle Name</label>
<input id="name" name="name" type="text" placeholder="Middle Name" class="form-control input-md" required="">
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Last Name</label>
<input id="name" name="name" type="text" placeholder="Last Name" class="form-control input-md" required="">
</div>
</div>
</div>
</div>
</div>
<!-- End row -->
<!-- Start row -->
<div class="row">
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Mobile No</label>
<input id="name" name="name" type="text" placeholder="+91" class="form-control input-md" required="">
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Email Id</label>
<input id="name" name="name" type="text" placeholder="Email Id" class="form-control input-md" required="">
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Address</label>
<input id="name" name="name" type="text" placeholder="Address" class="form-control input-md" required="">
</div>
</div>
</div>
</div>
</div>
<!-- End row -->
<!-- Start button row -->
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4 text-right">
<div class="form-group">
<div class="col-md-12">
<button id="nextBtn" name="nextBtn" class="btn btn-primary">Next</button>
</div>
</div>
</div>
</div>
<!-- End button row -->
</div>
<!-- End collapse body -->
</div>
</div>
<!-- End First collapse -->
<!-- Start Second collapse -->
<div class="panel checkout-step">
<div role="tab" id="headingTwo" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" >
<div class="row">
<div class="col-10 col-lg-10">
<span class="checkout-step-number">2</span>
<h4 class="checkout-step-title"> <a role="button"> Professional Details</a></h4>
</div>
<div class="col-2 col-lg-2 text-right d-none d-sm-block d-md-block d-lg-block d-xl-block">
<button id="nextBtn" name="nextBtn" class="btn btn-default imc-jfeditbtn">Edit <i class="fa fa-edit"></i></button>
</div>
<div class="col-2 col-lg-2 text-right d-md-none d-lg-none">
<button id="nextBtn" name="nextBtn" class="btn btn-default imc-jfeditbtn"><i class="fa fa-edit"></i></button>
</div>
</div>
</div>
<div id="collapseTwo" class="collapse">
<!-- Start collapse body -->
<div class="checkout-step-body">
<!-- Start row -->
<div class="row">
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">First Name</label>
<input id="name" name="name" type="text" placeholder="First Name" class="form-control input-md" required="">
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Middle Name</label>
<input id="name" name="name" type="text" placeholder="Middle Name" class="form-control input-md" required="">
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Last Name</label>
<input id="name" name="name" type="text" placeholder="Last Name" class="form-control input-md" required="">
</div>
</div>
</div>
</div>
</div>
<!-- End row -->
<!-- Start row -->
<div class="row">
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Mobile No</label>
<input id="name" name="name" type="text" placeholder="+91" class="form-control input-md" required="">
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Email Id</label>
<input id="name" name="name" type="text" placeholder="Email Id" class="form-control input-md" required="">
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Address</label>
<input id="name" name="name" type="text" placeholder="Address" class="form-control input-md" required="">
</div>
</div>
</div>
</div>
</div>
<!-- End row -->
<!-- Start button row -->
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4 text-right">
<div class="form-group">
<div class="col-md-12">
<button id="nextBtn" name="nextBtn" class="btn btn-primary">Next</button>
</div>
</div>
</div>
</div>
<!-- End button row -->
</div>
<!-- End collapse body -->
</div>
</div>
<!-- End Second collapse -->
<!-- Start Third collapse -->
<div class="panel checkout-step">
<div role="tab" id="headingThree" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" >
<div class="row">
<div class="col-10 col-lg-10">
<span class="checkout-step-number">3</span>
<h4 class="checkout-step-title"> <a role="button"> Educational Details</a></h4>
</div>
<div class="col-2 col-lg-2 text-right d-none d-sm-block d-md-block d-lg-block d-xl-block">
<button id="nextBtn" name="nextBtn" class="btn btn-default imc-jfeditbtn">Edit <i class="fa fa-edit"></i></button>
</div>
<div class="col-2 col-lg-2 text-right d-md-none d-lg-none">
<button id="nextBtn" name="nextBtn" class="btn btn-default imc-jfeditbtn"><i class="fa fa-edit"></i></button>
</div>
</div>
</div>
<div id="collapseThree" class="collapse">
<!-- Start collapse body -->
<div class="checkout-step-body">
<!-- Start row -->
<div class="row">
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">First Name</label>
<input id="name" name="name" type="text" placeholder="First Name" class="form-control input-md" required="">
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Middle Name</label>
<input id="name" name="name" type="text" placeholder="Middle Name" class="form-control input-md" required="">
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Last Name</label>
<input id="name" name="name" type="text" placeholder="Last Name" class="form-control input-md" required="">
</div>
</div>
</div>
</div>
</div>
<!-- End row -->
<!-- Start row -->
<div class="row">
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Mobile No</label>
<input id="name" name="name" type="text" placeholder="+91" class="form-control input-md" required="">
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Email Id</label>
<input id="name" name="name" type="text" placeholder="Email Id" class="form-control input-md" required="">
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Address</label>
<input id="name" name="name" type="text" placeholder="Address" class="form-control input-md" required="">
</div>
</div>
</div>
</div>
</div>
<!-- End row -->
<!-- Start button row -->
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4 text-right">
<div class="form-group">
<div class="col-md-12">
<button id="nextBtn" name="nextBtn" class="btn btn-primary">Next</button>
</div>
</div>
</div>
</div>
<!-- End button row -->
</div>
<!-- End collapse body -->
</div>
</div>
<!-- End Third collapse -->
<!-- Start Fourth collapse -->
<div class="panel checkout-step">
<div role="tab" id="headingFour" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" >
<div class="row">
<div class="col-10 col-lg-10">
<span class="checkout-step-number">4</span>
<h4 class="checkout-step-title"> <a role="button"> Nominee Details</a></h4>
</div>
<div class="col-2 col-lg-2 text-right d-none d-sm-block d-md-block d-lg-block d-xl-block">
<button id="nextBtn" name="nextBtn" class="btn btn-default imc-jfeditbtn">Edit <i class="fa fa-edit"></i></button>
</div>
<div class="col-2 col-lg-2 text-right d-md-none d-lg-none">
<button id="nextBtn" name="nextBtn" class="btn btn-default imc-jfeditbtn"><i class="fa fa-edit"></i></button>
</div>
</div>
</div>
<div id="collapseFour" class="collapse">
<!-- Start collapse body -->
<div class="checkout-step-body">
<!-- Start row -->
<div class="row">
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">First Name</label>
<input id="name" name="name" type="text" placeholder="First Name" class="form-control input-md" required="">
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Middle Name</label>
<input id="name" name="name" type="text" placeholder="Middle Name" class="form-control input-md" required="">
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Last Name</label>
<input id="name" name="name" type="text" placeholder="Last Name" class="form-control input-md" required="">
</div>
</div>
</div>
</div>
</div>
<!-- End row -->
<!-- Start row -->
<div class="row">
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Mobile No</label>
<input id="name" name="name" type="text" placeholder="+91" class="form-control input-md" required="">
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Email Id</label>
<input id="name" name="name" type="text" placeholder="Email Id" class="form-control input-md" required="">
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Address</label>
<input id="name" name="name" type="text" placeholder="Address" class="form-control input-md" required="">
</div>
</div>
</div>
</div>
</div>
<!-- End row -->
<!-- Start button row -->
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4 text-right">
<div class="form-group">
<div class="col-md-12">
<button id="nextBtn" name="nextBtn" class="btn btn-primary">Next</button>
</div>
</div>
</div>
</div>
<!-- End button row -->
</div>
<!-- End collapse body -->
</div>
</div>
<!-- End Fourth collapse -->
<!-- Start Five collapse -->
<div class="panel checkout-step">
<div role="tab" id="headingFive" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" >
<div class="row">
<div class="col-10 col-lg-10">
<span class="checkout-step-number">5</span>
<h4 class="checkout-step-title"> <a role="button"> Documents Details</a></h4>
</div>
<div class="col-2 col-lg-2 text-right d-none d-sm-block d-md-block d-lg-block d-xl-block">
<button id="nextBtn" name="nextBtn" class="btn btn-default imc-jfeditbtn">Edit <i class="fa fa-edit"></i></button>
</div>
<div class="col-2 col-lg-2 text-right d-md-none d-lg-none">
<button id="nextBtn" name="nextBtn" class="btn btn-default imc-jfeditbtn"><i class="fa fa-edit"></i></button>
</div>
</div>
</div>
<div id="collapseFive" class="collapse">
<!-- Start collapse body -->
<div class="checkout-step-body">
<!-- Start row -->
<div class="row">
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">First Name</label>
<input id="name" name="name" type="text" placeholder="First Name" class="form-control input-md" required="">
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Middle Name</label>
<input id="name" name="name" type="text" placeholder="Middle Name" class="form-control input-md" required="">
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Last Name</label>
<input id="name" name="name" type="text" placeholder="Last Name" class="form-control input-md" required="">
</div>
</div>
</div>
</div>
</div>
<!-- End row -->
<!-- Start row -->
<div class="row">
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Mobile No</label>
<input id="name" name="name" type="text" placeholder="+91" class="form-control input-md" required="">
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Email Id</label>
<input id="name" name="name" type="text" placeholder="Email Id" class="form-control input-md" required="">
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name">Address</label>
<input id="name" name="name" type="text" placeholder="Address" class="form-control input-md" required="">
</div>
</div>
</div>
</div>
</div>
<!-- End row -->
<!-- Start button row -->
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4 text-right">
<div class="form-group">
<div class="col-md-12">
<button id="nextBtn" name="nextBtn" class="btn btn-primary">Next</button>
</div>
</div>
</div>
</div>
<!-- End button row -->
</div>
<!-- End collapse body -->
</div>
</div>
<!-- End Five collapse -->
<!-- Start Six collapse -->
<div class="panel checkout-step">
<div role="tab" id="headingSix" data-toggle="collapse" data-parent="#accordion" href="#collapseSix" >
<div class="row">
<div class="col-10 col-lg-10">
<span class="checkout-step-number">6</span>
<h4 class="checkout-step-title"> <a role="button"> Reviews </a></h4>
</div>
</div>
</div>
<div id="collapseSix" class="collapse">
<!-- Start collapse body -->
<div class="checkout-step-body">
<!-- Start row -->
<div class="row">
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name"><strong>Name : </strong></label>
<label class="control-label" for="name">Shyam Manohar Sanjul</label>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name"><strong>Gender : </strong></label>
<label class="control-label" for="name">Male</label>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name"><strong>Mobile No : </strong></label>
<label class="control-label" for="name">9576116054</label>
</div>
</div>
</div>
</div>
</div>
<!-- End row -->
<!-- Start row -->
<div class="row">
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name"><strong>Email Id : </strong></label>
<label class="control-label" for="name">shyam.manohar.sanjul@gmail.com</label>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
<div class="form-group">
<div class="col-md-12">
<label class="control-label" for="name"><strong>Address : </strong></label>
<label class="control-label" for="name">Btm 1st stage bangalore, karnataka </label>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="">
</div>
</div>
</div>
<!-- End row -->
<!-- Start button row -->
<div class="row">
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
<div class="col-lg-4 text-right">
<div class="form-group">
<div class="col-md-12">
<button id="nextBtn" name="nextBtn" class="btn btn-primary">Print</button>
</div>
</div>
</div>
</div>
<!-- End button row -->
</div>
<!-- End collapse body -->
</div>
</div>
<!-- End Six collapse -->
</div>
<!-- End accordion -->
</div>
</div>
<!-- End row -->
<!-- End Joining Form -->
</div>
</body>
</html>
body
{
background: #7F7FD5; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.panel
{
margin-bottom: 0px;
}
.checkout-step
{
/*background: #e8eef1;*/
background: #83a4d4; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #b6fbff, #83a4d4); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #b6fbff, #83a4d4); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
border-top: 1px solid #607d8b21;
color: #666;
font-size: 14px;
padding: 15px 10px;
position: relative;
}
.checkout-step-number
{
border-radius: 50%;
/* border: 1px solid #ced0d2; */
display: inline-block;
background: #065c9f;
font-size: 12px;
color: #fff;
font-weight: bold;
height: 32px;
margin-right: 15px;
padding: 6px;
text-align: center;
width: 32px;
}
.checkout-step-title
{
font-size: 16px;
font-weight: 500;
vertical-align: middle;display: inline-block; margin: 0px;
color: #3d4884;
}
.checkout-step-body
{
background: #fbfbfb;
padding: 15px 0px;
margin: 20px 0px 0px;
}
/*Shyam*/
.imi-joingform
{
margin-top: 50px;
}
.imc-jfheader
{
background: #fff;
padding: 15px;
}
.imc-text h1
{
font-size: 20px;
color: #00BCD4;
}
.imc-text h2
{
font-size: 12px;
}
.imc-jfeditbtn
{
padding: 5px;
font-size: 12px;
color: #fff;
font-weight: bold;
background: #29506f;
}
