<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="content">
<div class="container">
<div class="row">
<div class="col-md-12 margin-bottom-30">
<!-- BEGIN Portlet PORTLET-->
<div class="portlet">
<div class="portlet-title">
<div class="caption">
<i class="glyphicon glyphicon-building"></i>
<span class="caption-subject text-uppercase">Administrative Specialist - Washington</span>
</div>
<div class="actions">
<a href="javascript:;" class="btn">
<i class="glyphicon glyphicon-record"></i> Apply
</a>
</div>
</div>
<div class="portlet-body">
<p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum. consectetur purus sit amet fermentum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
</div>
</div>
<!-- END Portlet PORTLET-->
<div class="col-sm-12 text-center">
<a href="javascript:;" class="btn btn-default btn-round-lg btn-lg">
<i class="glyphicon glyphicon-record"></i> Apply
</a>
</div>
</div>
</div>
</div>
</div>
<br>
<br>
<center>
<strong>TWITTER - LINKEDIN - FACEBOOK SHARE</strong>
</center>
<br>
<br>
<hr />
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="well well-sm">
<form class="form-horizontal" action="" method="post">
<fieldset class="portlet">
<div class="portlet-title">
<div class="caption">
<i class="glyphicon glyphicon-building"></i>
<span class="caption-subject text-uppercase">Administrative Specialist - Washington</span>
<span class="glyphicon glyphicon-map-marker caption-helper"></span>
<span class="caption-helper job-location">Washington</span>
</div>
</div>
<!-- Personal Title-->
<div class="form-group">
<label class="col-md-4 control-label" for="personal-title">Personal Title</label>
<div class="col-md-8">
<select id="personal-title" name="personal-title" class="form-control">
<option class="lt" value="--">none</option>
<option class="lt" value="Mr.">Mr.</option>
<option class="lt" value="Mrs.">Mrs.</option>
<option class="lt" value="Miss.">Miss.</option>
<option class="lt" value="Dr.">Dr.</option>
</select>
</div>
</div>
<!-- First Name input-->
<div class="form-group">
<label class="col-md-4 control-label" for="first-name">First Name</label>
<div class="col-md-8">
<input id="first-name" name="first-name" type="text" placeholder="First Name" class="form-control">
</div>
</div>
<!-- Middle Name input-->
<div class="form-group">
<label class="col-md-4 control-label" for="middle-name">Middle Name</label>
<div class="col-md-8">
<input id="middle-name" name="middle-name" type="text" placeholder="Middle Name" class="form-control">
</div>
</div>
<!-- First Name input-->
<div class="form-group">
<label class="col-md-4 control-label" for="last-name">Last Name</label>
<div class="col-md-8">
<input id="last-name" name="last-name" type="text" placeholder="Last Name" class="form-control">
</div>
</div>
<hr />
<!-- Email input-->
<!--div class="form-group">
<label for="validate-email" class="col-md-4 control-label" for="email">Your E-mail</label>
<div class="col-md-8 input-group data-validate="email"">
<input name="validate-email" id="validate-email" type="text" placeholder="Your email" class="form-control">
<span class="input-group-addon danger"><span class="glyphicon glyphicon-remove"></span></span>
</div>
</div-->
<div class="form-group">
<label for="validate-email" class="col-md-4 control-label">Validate Email</label>
<div class="col-md-8 input-group" data-validate="email">
<input type="text" class="form-control" name="validate-email" id="validate-email" placeholder="Validate Email" required>
<span class="input-group-addon danger"><span class="glyphicon glyphicon-remove"></span></span>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="phone">Your Phone Number</label>
<div class="col-md-8">
<input id="phone" name="phone" type="text" placeholder="Your Phone Number" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="birthday">Date of Birth</label>
<div class="col-md-8">
<input id="birthday" name="birthday" type="text" placeholder="Date of Birth - dd/mm/YYYY" class="form-control">
</div>
</div>
<hr />
<!-- Citizenship-->
<div class="form-group">
<label class="col-md-4 control-label" for="citizenship">Citizenship</label>
<div class="col-md-8">
<select id="Citizenship" name="Citizenship" class="form-control">
<option class="lt" value="--">none</option>
<option class="lt" value="Aruba">Aruba</option>
</select>
</div>
</div>
<!-- Education Level-->
<div class="form-group">
<label class="col-md-4 control-label" for="education-level">Education Level</label>
<div class="col-md-7">
<select id="education-level" name="education-level" class="form-control">
<option class="lt" value="--">none</option>
<option class="lt" value="B.Sc.">B.Sc.</option>
<option class="lt" value="M.Sc.">M.Sc.</option>
<option class="lt" value="Ph.D">Ph.D</option>
<option class="lt" value="Proffesor">Proffesor</option>
</select>
</div>
</div>
<!-- Address -->
<div class="form-group">
<label class="col-md-4 control-label" for="adrress">Your adrress</label>
<div class="col-md-8">
<textarea class="form-control" id="adrress" name="adrress" placeholder="Please enter your address here..." rows="5"></textarea>
</div>
</div>
<!-- City of Residence -->
<div class="form-group">
<label class="col-md-4 control-label" for="city">City of Residence</label>
<div class="col-md-8">
<input id="city" name="city" type="text" placeholder="City of Residence" class="form-control">
</div>
</div>
<!-- Zip Code -->
<div class="form-group">
<label class="col-md-4 control-label" for="zipcode">Zipcode</label>
<div class="col-md-8">
<input id="zipcode" name="zipcode" type="text" placeholder="Zipcode" class="form-control">
</div>
</div>
<!-- country-of-residence-->
<div class="form-group">
<label class="col-md-4 control-label" for="country">Country</label>
<div class="col-md-8">
<select id="country" name="country" class="form-control">
<option class="lt" value="--">none</option>
<option class="lt" value="Aruba">Aruba</option>
</select>
</div>
</div>
<!-- country-of-residence-->
<div class="form-group">
<label class="col-md-4 control-label" for="country">CV (Word or PDF)</label>
<div class="col-md-8">
<label class="btn btn-default" for="my-file-selector">
<input id="my-file-selector" type="file" style="display:none;" onchange="$('#upload-file-info').html($(this).val());"> Select
</label>
<span class='label label-info' id="upload-file-info">(Allowed File Types Are: .pdf, .doc, .docx, .jpeg, .jpg, .png )</span>
</div>
</div>
<hr />
<!-- Form actions -->
<div class="col-sm-12 text-center">
<a href="javascript:;" class="btn btn-default btn-round-lg btn-lg">
<i class="glyphicon glyphicon-record"></i> Submit application
</a>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
/***
Bootstrap Line Tabs by @keenthemes
A component of Metronic Theme - #1 Selling Bootstrap 3 Admin Theme in Themeforest: http://j.mp/metronictheme
Licensed under MIT
***/
.content {
padding: 30px;
background: #f1f3fa;
}
.margin-bottom-30 {
margin-bottom: 30px;
}
/* Portlet */
.portlet {
background: #fff;
padding: 20px;
}
.portlet.portlet-gray {
background: #f7f7f7;
}
.portlet.portlet-bordered {
border: 1px solid #eee;
}
/* Portlet Title */
.portlet-title {
padding: 0;
min-height: 40px;
border-bottom: 1px solid #eee;
margin-bottom: 18px;
}
.caption {
float: left;
display: inline-block;
font-size: 18px;
line-height: 18px;
}
.caption.caption-green .caption-subject,
.caption.caption-green i {
color: #4db3a2;
font-weight: 200;
}
.caption.caption-red .caption-subject,
.caption.caption-red i {
color: #e26a6a;
font-weight: 200;
}
.caption.caption-purple .caption-subject,
.caption.caption-purple i {
color: #8775a7;
font-weight: 400;
}
.caption i {
color: #777;
font-size: 15px;
font-weight: 300;
margin-top: 3px;
}
.caption-subject {
color: #666;
font-size: 21px;
font-weight: 600;
}
.caption-helper {
padding: 0;
margin: 0;
line-height: 13px;
color: #9eacb4;
font-size: 13px;
font-weight: 400;
}
/* Actions */
.actions {
float: right;
display: inline-block;
}
.actions a {
margin-left: 3px;
}
.actions .btn {
color: #666;
padding: 3px 9px;
font-size: 13px;
line-height: 1.5;
background-color: #fff;
border-color: #ccc;
border-radius: 50px;
}
.actions .btn i {
font-size: 12px;
}
.actions .btn:hover {
background: #f2f2f2;
}
/* Pagination */
.pagination {
margin: -3px 0 0;
border-radius: 50px;
}
.pagination > li > a,
.pagination > li > span {
padding: 4px 10px;
font-size: 12px;
color: #8775a7;
background: #f7f7f7;
}
.pagination > li:hover > a,
.pagination > li.active > a,
.pagination > li.active:hover > a {
color: #fff;
background: #8775a7;
border-color: #8775a7;
}
/* Inputs */
.inputs {
float: right;
display: inline-block;
padding: 4px 0;
margin-top: -10px;
}
.input-inline {
width: 240px;
display: inline-block;
vertical-align: middle;
}
/* Tab */
.portlet-title > .nav-tabs {
background: none;
margin: 0;
float: right;
display: inline-block;
border: 0;
}
.portlet-title > .nav-tabs > li {
background: none;
margin: 0;
border: 0;
}
.portlet-title > .nav-tabs > li > a {
background: none;
border: 0;
padding: 2px 10px 13px;
color: #444;
}
.portlet-title > .nav-tabs > li.active,
.portlet-title > .nav-tabs > li.active:hover {
border-bottom: 4px solid #f3565d;
position: relative;
}
.portlet-title > .nav-tabs > li:hover {
border-bottom: 4px solid #f29b9f;
}
.portlet-title > .nav-tabs > li.active > a,
.portlet-title > .nav-tabs > li:hover > a {
color: #333;
background: #fff;
border: 0;
}
/* Btn Circle */
.actions .btn.btn-circle {
width: 28px;
height: 28px;
padding: 3px 7px;
text-align: center;
}
.actions .btn.btn-circle i {
font-size: 11px;
}
/* Btn Grey Salsa */
.actions .btn.grey-salsa {
border: none;
margin-left: 3px;
box-shadow: none;
border-radius: 50px !important;
}
.actions .btn.grey-salsa.active {
color: #fafcfb;
background: #8e9bae;
}
.actions .grey-salsa.btn:hover,
.actions .grey-salsa.btn:focus,
.actions .grey-salsa.btn:active,
.actions .grey-salsa.btn.active {
color: #fafcfb;
background: #97a3b4;
}
/* Btn Red */
.actions .btn.btn-red.active,
.actions .btn.btn-red:hover {
color: #fff;
box-shadow: none;
background: #e26a6a;
border-color: #e26a6a;
}
/* Btn Red */
.actions .btn.btn-purple.active,
.actions .btn.btn-purple:hover {
color: #fff;
box-shadow: none;
background: #8775a7;
border-color: #8775a7;
}
.btn,
.form-control {
border-radius:0;
-webkit-appearance: none;
-moz-appearance: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.filterable select {
cursor:pointer;
}
.btn-round-lg {
border-radius: 22.5px;
margin:10px 0;
}
.label-info {
font-weight: 400;
font-size: 14px;
}
/****VALIDATION****/
.input-group-addon.primary {
color: rgb(255, 255, 255);
background-color: rgb(50, 118, 177);
border-color: rgb(40, 94, 142);
}
.input-group-addon.success {
color: rgb(255, 255, 255);
background-color: rgb(92, 184, 92);
border-color: rgb(76, 174, 76);
}
.input-group-addon.info {
color: rgb(255, 255, 255);
background-color: rgb(57, 179, 215);
border-color: rgb(38, 154, 188);
}
.input-group-addon.warning {
color: rgb(255, 255, 255);
background-color: rgb(240, 173, 78);
border-color: rgb(238, 162, 54);
}
.input-group-addon.danger {
color: rgb(255, 255, 255);
background-color: rgb(217, 83, 79);
border-color: rgb(212, 63, 58);
}
$(document).ready(function() {
$('.input-group input[required], .input-group textarea[required], .input-group select[required]').on('keyup change', function() {
var $form = $(this).closest('form'),
$group = $(this).closest('.input-group'),
$addon = $group.find('.input-group-addon'),
$icon = $addon.find('span'),
state = false;
if (!$group.data('validate')) {
state = $(this).val() ? true : false;
}else if ($group.data('validate') == "email") {
state = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test($(this).val())
}else if($group.data('validate') == 'phone') {
state = /^[(]{0,1}[0-9]{3}[)]{0,1}[-\s\.]{0,1}[0-9]{3}[-\s\.]{0,1}[0-9]{4}$/.test($(this).val())
}else if ($group.data('validate') == "length") {
state = $(this).val().length >= $group.data('length') ? true : false;
}else if ($group.data('validate') == "number") {
state = !isNaN(parseFloat($(this).val())) && isFinite($(this).val());
}
if (state) {
$addon.removeClass('danger');
$addon.addClass('success');
$icon.attr('class', 'glyphicon glyphicon-ok');
}else{
$addon.removeClass('success');
$addon.addClass('danger');
$icon.attr('class', 'glyphicon glyphicon-remove');
}
if ($form.find('.input-group-addon.danger').length == 0) {
$form.find('[type="submit"]').prop('disabled', false);
}else{
$form.find('[type="submit"]').prop('disabled', true);
}
});
$('.input-group input[required], .input-group textarea[required], .input-group select[required]').trigger('change');
});
