<?php   

/*Template Name: Contact Us  */ 

get_header(); 
?>


  <!-- Start main-content -->
  <div class="main-content">
    <!-- Section: inner-header -->
    <section class="inner-header divider parallax layer-overlay overlay-dark-5" data-bg-img="<?php echo get_template_directory_uri()?>/myassets/images/bg/bg1.jpg">
      <div class="container pt-60 pb-40">
        <!-- Section Content -->
        <div class="section-content pt-100">
          <div class="row"> 
            <div class="col-md-12">
              <h3 class="title text-white">Become a Volunteer</h3>
              <ul class="breadcrumb white">
                <li><a href="index-mp-layout1.html">Home</a></li>
                <li class="active">Become a Volunteer</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Section: Features -->
    <section class="bg-lighter"> 
      <div class="container">
        <div class="section-content">
          <div class="row mtli-row-clearfix">
            <div class="col-xs-12 col-sm-6 col-md-3 pb-sm-20">
              <div class="icon-box text-center p-10">
                <a href="#" class="icon icon-gray icon-bordered icon-rounded icon-border-effect effect-rounded mb-10">
                  <i class="fa fa-user-plus font-30 text-theme-colored"></i>
                </a>
                <h4 class="icon-box-title"><a href="#">Create an account</a></h4>
                <p class="text-gray">Lorem ipsum dolor sit amet consecte adipisicing elit. Molestias nnulla placeat, odioqui dict</p>
              </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3 pb-sm-20">
              <div class="icon-box text-center p-10">
                <a href="#" class="icon icon-gray icon-bordered icon-rounded icon-border-effect effect-rounded mb-10">
                  <i class="fa fa-magic font-30 text-theme-colored"></i>
                </a>
                <h4 class="icon-box-title"><a href="#">Join to a new campaign</a></h4>
                <p class="text-gray">Lorem ipsum dolor sit amet consecte adipisicing elit. Molestias nnulla placeat, odioqui dict</p>
              </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3 pb-sm-20">
              <div class="icon-box text-center p-10">
                <a href="#" class="icon icon-gray icon-bordered icon-rounded icon-border-effect effect-rounded mb-10">
                  <i class="fa fa-globe font-30 text-theme-colored"></i>
                </a>
                <h4 class="icon-box-title"><a href="#">Discover</a></h4>
                <p class="text-gray">Lorem ipsum dolor sit amet consecte adipisicing elit. Molestias nnulla placeat, odioqui dict</p>
              </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3 pb-sm-20">
              <div class="icon-box text-center p-10">
                <a href="#" class="icon icon-gray icon-bordered icon-rounded icon-border-effect effect-rounded mb-10">
                  <i class="fa fa-life-ring font-30 text-theme-colored"></i>
                </a>
                <h4 class="icon-box-title"><a href="#">Support</a></h4>
                <p class="text-gray">Lorem ipsum dolor sit amet consecte adipisicing elit. Molestias nnulla placeat, odioqui dict</p>
              </div>
            </div>
          </div>
        </div> 
      </div>
    </section>

    <section>
      <div class="container">
        <div class="row">
          <div class="col-md-8">
            <div class="heading-line-bottom mt-0 mb-30">
              <h3 class="heading-title">Job List Style</h3>
            </div>
            <div class="icon-box mb-0 p-0">
              <a href="#" class="icon icon-gray pull-left mb-0 mr-10">
                <i class="pe-7s-users"></i>
              </a>
              <h3 class="icon-box-title pt-15 mt-0 mb-40">Job Title Here</h3>
              <hr>
              <p class="text-gray">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi id perspiciatis facilis nulla possimus quasi, amet qui. Ea rerum officia, aspernatur nulla neque nesciunt alias repudiandae doloremque, dolor, quam nostrum laudantium earum illum odio quasi excepturi mollitia corporis quas ipsa modi nihil, ad ex tempore.</p>
              <a class="btn btn-theme-colored btn-sm mt-15" href="#">Apply Now</a>
            </div>
            <div class="icon-box mt-80 mb-0 p-0">
              <a href="#" class="icon icon-gray pull-left mb-0 mr-10">
                <i class="pe-7s-users"></i>
              </a>
              <h3 class="icon-box-title pt-15 mt-0 mb-40">Job Title Here</h3>
              <hr>
              <p class="text-gray">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi id perspiciatis facilis nulla possimus quasi, amet qui. Ea rerum officia, aspernatur nulla neque nesciunt alias repudiandae doloremque, dolor, quam nostrum laudantium earum illum odio quasi excepturi mollitia corporis quas ipsa modi nihil, ad ex tempore.</p>
              <a class="btn btn-theme-colored btn-sm mt-15" href="#">Apply Now</a>
            </div>
          </div>
          <div class="col-md-4">
            <div class="heading-line-bottom mt-0 mb-30">
              <h3 class="heading-title">Become a <span class="text-theme-colored">Volunteer</span></h3>
            </div>
            <form id="volunteer_apply_form" name="job_apply_form" action="https://kodesolution.com/html/2016/ecocharity-html/demo/includes/become-volunteer.php" method="post" enctype="multipart/form-data">
              <div class="row">
                <div class="col-sm-6">
                  <div class="form-group">
                    <label for="form_name">Name <small>*</small></label>
                    <input id="form_name" name="form_name" type="text" placeholder="Enter Name" required="" class="form-control">
                  </div>
                </div>
                <div class="col-sm-6">
                  <div class="form-group">
                    <label for="form_email">Email <small>*</small></label>
                    <input id="form_email" name="form_email" class="form-control required email" type="email" placeholder="Enter Email">
                  </div>
                </div>
              </div>
              <div class="row">               
                <div class="col-sm-6">
                  <div class="form-group">
                    <label for="form_sex">Sex <small>*</small></label>
                    <select id="form_sex" name="form_sex" class="form-control required">
                      <option value="Male">Male</option>
                      <option value="Female">Female</option>
                    </select>
                  </div>
                </div>
                <div class="col-sm-6">
                  <div class="form-group">
                    <label for="form_branch">Choose Branch <small>*</small></label>
                    <select id="form_branch" name="form_branch" class="form-control required">
                      <option value="UK">UK</option>
                      <option value="USA">USA</option>
                      <option value="Australia">Australia</option>
                    </select>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <label for="form_message">Message <small>*</small></label>
                <textarea id="form_message" name="form_message" class="form-control required" rows="5" placeholder="Your cover letter/message sent to the employer"></textarea>
              </div>
              <div class="form-group">
                <label for="form_attachment">C/V Upload</label>
                <input id="form_attachment" name="form_attachment" class="file" type="file" multiple data-show-upload="false" data-show-caption="true">
                <small>Maximum upload file size: 12 MB</small>
              </div>
              <div class="form-group">
                <input id="form_botcheck" name="form_botcheck" class="form-control" type="hidden" value="" />
                <button type="submit" class="btn btn-block btn-dark btn-theme-colored btn-sm mt-20 pt-10 pb-10" data-loading-text="Please wait...">Apply Now</button>
              </div>
            </form>
            <!-- Job Form Validation-->
            <script type="text/javascript">
              $("#volunteer_apply_form").validate({
                submitHandler: function(form) {
                  var form_btn = $(form).find('button[type="submit"]');
                  var form_result_div = '#form-result';
                  $(form_result_div).remove();
                  form_btn.before('<div id="form-result" class="alert alert-success" role="alert" style="display: none;"></div>');
                  var form_btn_old_msg = form_btn.html();
                  form_btn.html(form_btn.prop('disabled', true).data("loading-text"));
                  $(form).ajaxSubmit({
                    dataType:  'json',
                    success: function(data) {
                      if( data.status == 'true' ) {
                        $(form).find('.form-control').val('');
                      }
                      form_btn.prop('disabled', false).html(form_btn_old_msg);
                      $(form_result_div).html(data.message).fadeIn('slow');
                      setTimeout(function(){ $(form_result_div).fadeOut('slow') }, 6000);
                    }
                  });
                }
              });
            </script>
          </div>
        </div>
      </div>
    </section>
  </div>
  <!-- end main-content -->
  

<?php get_footer();?>