Notes

<div id="preloader-active">
<div class="preloader d-flex align-items-center justify-content-center">
<div class="preloader-inner position-relative">
<div class="preloader-circle"></div>
<div class="preloader-img pere-text">
<img src="assets/img/logo/logo.png" alt="" />
</div>
</div>
</div>
</div>
<!-- Preloader Start -->
<header>
<!-- Header Start -->
<div class="header-area header-transparrent">
<div class="headder-top header-sticky">
<div class="container">
<div class="row align-items-center">
<div class="col-lg-3 col-md-3">
<!-- Logo -->
<div class="logo">
<a href="index.html"
><img src="assets/img/logo/logo.png" alt=""
/></a>
</div>
</div>
<div class="col-lg-9 col-md-9">
<div class="menu-wrapper">
<!-- Main-menu -->
<div class="main-menu">
<nav class="d-none d-lg-block">
<ul id="navigation">
<li><a href="index.html">Home</a></li>
<li><a href="job_listing.html">Find a Jobs</a></li>
<li><a href="about.html">About</a></li>

<li>
<a href="#">Page</a>
<ul class="submenu">
<li><a href="blog.html">Register</a></li>
<li><a href="single-blog.html">Login</a></li>

</ul>
</li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</div>
<!-- Header-btn -->
<div class="header-btn d-none f-right d-lg-block">
<a
href="#"
class="btn head-btn1"
data-toggle="modal"
data-target="#exampleModal"
>Register</a
>
<div class="modal container-fluid"
id="exampleModal"
tabindex="-1"
role="dialog"
aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="row justify-content-center mt-0">
<div
class="col-11 col-sm-9 col-md-7 col-lg-6 text-center p-0 mt-3 mb-2"
>
<div class="card px-0 pt-4 pb-0 mt-3 mb-3">
<div> <button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true" style="padding-right: 30px; ">&times;</span>
</button></div>

<h2><strong>Register</strong> user Details.</h2>

<p>Fill all form field to go to next step</p>

<div class="row">
<div class="col-md-12 mx-0">
<form id="msform">
<!-- progressbar -->
<ul id="progressbar">
<li class="active" id="account"><strong>User</strong></li>
<li id="payment"><strong>Payment</strong></li>
<li id="confirm"><strong>Finish</strong></li>
</ul>
<!-- fieldsets -->
<fieldset>
<div class="form-card">
<h2 class="fs-title">User Information</h2>
<div class="form-group row">
<div class="col">
<input
class="form-control"
type="text"
name="userName"
placeholder="First Name"
/>
</div>
<div class="col">
<input
class="form-control"
type="text"
name="userName"
placeholder="Last Name"
/>
</div>
</div>
<div class="form-group">
<input
class="form-control"
type="number"
name="mobileNumber"
placeholder="Mobile number"
/>
</div>
<div class="form-group">
<input
class="form-control"
type="text"
name="fathername"
placeholder="Father Name"
/>
</div>
<div class="form-group">
<input
class="form-control"
type="text"
name="address"
placeholder="Address"
/>
</div>
<div class="form-group row">
<div class="col">
<input
class="form-control"
type="text"
name="gender"
placeholder="Male/Female"
/>
</div>
<div class="col">
<input
class="form-control"
type="date"
name="DOB"
placeholder="Date of Birth"
/>
</div>
</div>
<div class="form-group row">
<div class="col">
<input
class="form-control"
type="text"
name="adhaarNo."
placeholder="Adhaar No."
/>
</div>
<div class="col">
<input
class="form-control"
type="text"
name="panNo"
placeholder="PAN No."
/>
</div>
</div>
<div class="form-group row">
<div class="col">
<input
class="form-control"
type="text"
name="bankName"
placeholder="Bank Name"
/>
</div>
<div class="col">
<input
class="form-control"
type="text"
name="ifsc"
placeholder="IFSC Code."
/>
</div>
</div>
<div class="form-group">
<input
class="form-control"
type="text"
name="bankAccNo."
placeholder="Bank Acc. No."
/>
</div>
<div class="form-group">
<input
class="form-control"
type="text"
name="caste."
placeholder="Caste: General/OBC/ST/Others"
/>
</div>
<div
class="form-group input-group"
id="show_hide_password"
>
<input
class="form-control"
type="text"
placeholder="Password(123456)"
readonly
/>
</div>
</div>
<input
type="button"
name="next"
class="next action-button"
value="Next Step"
/>
</fieldset>
<fieldset>
<div class="form-card">
<h2 class="fs-title">Payment Information (Rs. 200)</h2>
<div class="radio-group">
<div class="radio" data-value="credit">
<img
src="https://i.imgur.com/XzOzVHZ.jpg"
width="200px"
height="100px"
/>
</div>
<div class="radio" data-value="paypal">
<img
src="https://i.imgur.com/jXjwZlj.jpg"
width="200px"
height="100px"
/>
</div>
<br />
</div>
<label class="pay">Card Holder Name*</label>
<input type="text" name="holdername" placeholder="" />
<div class="row">
<div class="col-9">
<label class="pay">Card Number*</label>
<input type="text" name="cardno" placeholder="" />
</div>
<div class="col-3">
<label class="pay">CVC*</label>
<input
type="password"
name="cvcpwd"
placeholder="***"
/>
</div>
</div>
<div class="row">
<div class="col-4">
<label class="pay">Expiry Date*</label>
</div>
<div class="col-sm-8">
<select class="list-dt" id="month" name="expmonth">
<option selected>Month</option>
<option>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select>
<select class="list-dt" id="year" name="expyear">
<option selected>Year</option>
<option>2000</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
<option>2004</option>
<option>2005</option>
</select>
</div>
</div>
</div>
<input
type="button"
name="previous"
class="previous action-button-previous"
value="Previous"
/>

<input
type="button"
name="make_payment"
class="next action-button"
value="Register"
/>
</fieldset>
<fieldset>
<div class="form-card">
<h2 class="fs-title text-center">Success !</h2>
<br /><br />
<div class="row justify-content-center">
<div class="col-3">
<img
src="https://img.icons8.com/color/96/000000/ok--v2.png"
class="fit-image"
/>
</div>
</div>
<br /><br />
<div class="row justify-content-center">
<div class="col-7 text-center">
<h5>You Have Successfully Register</h5>
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
</div>

<a
href="#"
class="btn head-btn2"
data-toggle="modal"
data-target="#Modal"
>Login</a
>

<div
class="modal fade"
id="Modal"
tabindex="-1"
role="dialog"
aria-labelledby="ModalLabel"
aria-hidden="true"
>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title" id="ModalLabel">
<strong>Login</strong>
</h2>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form method="post">
<div class="form-group">
<input
class="form-control"
type="number"
name="adhaarNo."
placeholder="Adhaar No."
/>
</div>
<div
class="form-group input-group"
id="show_hide_password"
>
<input
class="form-control"
type="text"
placeholder="Password(123456)"
readonly
/>
</div>
<div class="form-group">
<div class="form-check">
<label class="form-check-label"
><input
class="form-check-input"
type="checkbox"
/>I agree to the license terms.</label
>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-secondary"
data-dismiss="modal"
>
Close
</button>
<button type="submit" class="btn head-btn1">
Login
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Mobile Menu -->
<div class="col-12">
<div class="mobile_menu d-block d-lg-none"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Header End -->
</header>
<main>
<!-- slider Area Start-->
<div class="slider-area">
<!-- Mobile Menu -->
<!-- <div class="slider-active"> slider-height -->
<div>
<div
class="single-slider slider-height d-flex align-items-center"
data-background="assets/img/pick.png"
>
</div>
</div>
</div>
<!-- slider Area End-->
<!-- Our Services Start -->
<div class="our-services section-pad-t30">
<div class="container">
<!-- Section Tittle -->
<div class="row">
<div class="col-lg-12">
<div class="section-tittle text-center">
<span>FEATURED TOURS Packages</span>
<h2>Browse Top Categories</h2>
</div>
</div>
</div>
<div class="row d-flex justify-contnet-center">
<div class="col-xl-3 col-lg-3 col-md-4 col-sm-6">
<div class="single-services text-center mb-30">
<div class="services-ion">
<span class="flaticon-tour"></span>
</div>
<div class="services-cap">
<h5><a href="job_listing.html">Design & Creative</a></h5>
<span>(653)</span>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-3 col-md-4 col-sm-6">
<div class="single-services text-center mb-30">
<div class="services-ion">
<span class="flaticon-cms"></span>
</div>
<div class="services-cap">
<h5><a href="job_listing.html">Design & Development</a></h5>
<span>(658)</span>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-3 col-md-4 col-sm-6">
<div class="single-services text-center mb-30">
<div class="services-ion">
<span class="flaticon-report"></span>
</div>
<div class="services-cap">
<h5><a href="job_listing.html">Sales & Marketing</a></h5>
<span>(658)</span>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-3 col-md-4 col-sm-6">
<div class="single-services text-center mb-30">
<div class="services-ion">
<span class="flaticon-app"></span>
</div>
<div class="services-cap">
<h5><a href="job_listing.html">Mobile Application</a></h5>
<span>(658)</span>
</div>
</div>
</div>

</div>
<!-- More Btn -->
<!-- Section Button -->
<div class="row">
<div class="col-lg-12">
<div class="browse-btn2 text-center mt-50">
<a href="job_listing.html" class="border-btn2"
>Browse All Sectors</a
>
</div>
</div>
</div>
</div>
</div>
<!-- Online CV Area End-->
<!-- Featured_job_start -->
<section class="featured-job-area feature-padding">
<div class="container">
<!-- Section Tittle -->
<div class="row">
<div class="col-lg-12">
<div class="section-tittle text-center">
<span>Recent Job</span>
<h2>Featured Jobs</h2>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-xl-10">
<!-- single-job-content -->
<div class="single-job-items mb-30">
<div class="job-items">
<div class="company-img">
<a href="job_details.html"
><img src="assets/img/icon/job-list1.png" alt=""
/></a>
</div>
<div class="job-tittle">
<a href="job_details.html"><h4>Digital Marketer</h4></a>
<ul>
<li>Creative Agency</li>
<li>
<i class="fas fa-map-marker-alt"></i>Athens, Greece
</li>
<li>$3500 - $4000</li>
</ul>
</div>
</div>
<div class="items-link f-right">
<a href="job_details.html">Full Time</a>
<span>7 hours ago</span>
</div>
</div>
<!-- single-job-content -->
<div class="single-job-items mb-30">
<div class="job-items">
<div class="company-img">
<a href="job_details.html"
><img src="assets/img/icon/job-list2.png" alt=""
/></a>
</div>
<div class="job-tittle">
<a href="job_details.html"><h4>Digital Marketer</h4></a>
<ul>
<li>Creative Agency</li>
<li>
<i class="fas fa-map-marker-alt"></i>Athens, Greece
</li>
<li>$3500 - $4000</li>
</ul>
</div>
</div>
<div class="items-link f-right">
<a href="job_details.html">Full Time</a>
<span>7 hours ago</span>
</div>
</div>
<!-- single-job-content -->
<div class="single-job-items mb-30">
<div class="job-items">
<div class="company-img">
<a href="job_details.html"
><img src="assets/img/icon/job-list3.png" alt=""
/></a>
</div>
<div class="job-tittle">
<a href="job_details.html"><h4>Digital Marketer</h4></a>
<ul>
<li>Creative Agency</li>
<li>
<i class="fas fa-map-marker-alt"></i>Athens, Greece
</li>
<li>$3500 - $4000</li>
</ul>
</div>
</div>
<div class="items-link f-right">
<a href="job_details.html">Full Time</a>
<span>7 hours ago</span>
</div>
</div>
<!-- single-job-content -->
<div class="single-job-items mb-30">
<div class="job-items">
<div class="company-img">
<a href="job_details.html"
><img src="assets/img/icon/job-list4.png" alt=""
/></a>
</div>
<div class="job-tittle">
<a href="job_details.html"><h4>Digital Marketer</h4></a>
<ul>
<li>Creative Agency</li>
<li>
<i class="fas fa-map-marker-alt"></i>Athens, Greece
</li>
<li>$3500 - $4000</li>
</ul>
</div>
</div>
<div class="items-link f-right">
<a href="job_details.html">Full Time</a>
<span>7 hours ago</span>
</div>
</div>
</div>
</div>
</div>
</section>
</main>