<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profile Wizard</title>
<!-- Favicon -->
<link rel="apple-touch-icon" sizes="100x100" href="assets/img/apple-icon.png">
<link rel="icon" type="image/png" href="assets/img/favicon.png">
<!-- Bootstrap & Core CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link href="assets/css/paper-bootstrap-wizard.css" rel="stylesheet">
<link href="assets/css/themify-icons.css" rel="stylesheet">
</head>
<body>
<div class="image-container set-full-height" style="background-color:#ddd;">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="wizard-container">
<div class="card wizard-card" data-color="orange" id="wizardProfile">
<form action="" method="POST">
<div class="wizard-header text-center">
<h3 class="wizard-title">Create Your Profile</h3>
<p class="category">This information will help us know more about you.</p>
</div>
<div class="wizard-navigation">
<div class="progress-with-circle">
<div class="progress-bar" role="progressbar" style="width: 21%;"></div>
</div>
<ul>
<li><a href="#about" data-toggle="tab"><i class="ti-user"></i> About</a></li>
<li><a href="#information" data-toggle="tab"><i class="ti-id-badge"></i> Information</a></li>
<li><a href="#address" data-toggle="tab"><i class="ti-book"></i> Live</a></li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane" id="about">
<h5 class="info-text">Tell us about yourself.</h5>
<div class="form-group">
<label>First Name <small>(required)</small></label>
<input type="text" name="firstname" class="form-control" placeholder="Enter first name">
</div>
<div class="form-group">
<label>Last Name <small>(required)</small></label>
<input type="text" name="lastname" class="form-control" placeholder="Enter last name">
</div>
<div class="form-group">
<label>Mobile Phone <small>(required)</small></label>
<input type="text" name="phoneNumber" class="form-control" placeholder="Enter phone number">
</div>
<div class="form-group">
<label>Email <small>(required)</small></label>
<input type="email" name="email" class="form-control" placeholder="example.email@gmail.com">
</div>
</div>
<div class="tab-pane" id="information">
<h5 class="info-text">Student Information.</h5>
<div class="form-group">
<label>University <small>(required)</small></label>
<input type="text" name="university" class="form-control" placeholder="Enter university">
</div>
<div class="form-group">
<label>Year Start <small>(required)</small></label>
<input type="text" name="yearStart" class="form-control" placeholder="Enter start year">
</div>
<div class="form-group">
<label>Year End <small>(required)</small></label>
<input type="text" name="yearEnd" class="form-control" placeholder="Enter end year">
</div>
<div class="form-group">
<label>Position <small>(required)</small></label>
<input type="text" name="position" class="form-control" placeholder="Enter position">
</div>
</div>
<div class="tab-pane" id="address">
<h5 class="info-text">Live Address Information.</h5>
<div class="form-group">
<label>Country <small>(required)</small></label>
<input type="text" name="country" class="form-control" placeholder="Enter country">
</div>
<div class="form-group">
<label>City <small>(required)</small></label>
<input type="text" name="city" class="form-control" placeholder="Enter city">
</div>
<div class="form-group">
<label>Province <small>(required)</small></label>
<input type="text" name="province" class="form-control" placeholder="Enter province">
</div>
<div class="form-group">
<label>Village <small>(required)</small></label>
<input type="text" name="village" class="form-control" placeholder="Enter village">
</div>
</div>
</div>
<div class="wizard-footer">
<div class="pull-right">
<input type="button" class="btn btn-next btn-fill btn-warning" value="Next">
<input type="button" class="btn btn-finish btn-fill btn-warning" value="Finish">
</div>
<div class="pull-left">
<input type="button" class="btn btn-previous btn-default" value="Previous">
</div>
<div class="clearfix"></div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Core JS Files -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.bootstrap.wizard.js"></script>
<script src="assets/js/paper-bootstrap-wizard.js"></script>
<script src="assets/js/jquery.validate.min.js"></script>
</body>
</html>
