<%- include('partials/top') %>
<script src="/js/contact-form.js"></script>


<div class="container-fluid">
  <h3 class="text-center" style="color: blueviolet;">Contact Me</h3><br>
<!-- <script src="/css/main.css"></script> -->
<div class="form-group bg-danger  text-light" style="background-color: rgb(141, 129, 171);">
      
      <form id="contact_form"  method="POST" action="/contact-me">
        <!-- <div class="mb-1 row"> -->
          <div class="mx-auto" style="width: 200px; padding: 7px;" >
            <label>First Name</label>
            <br>
            <input type="text" class="form-control" id="txtFirstName" name="firstName" placeholder="First Name" required>
            <span id="vFirstName" class="validation"></span>
            <br>
          </div>
        
          <div class="mx-auto" style="width: 200px; padding: 7px;">
          <label>Last Name:</label>
          <br>
          <input type="text" class="form-control"  id="txtLastName" name="lastName" placeholder="Last Name" required>
          <span id="vLastName" class="validation"></span>
          <br>
          </div>
          
            <div  class="mx-auto" style="width: 500px; padding: 7px;" >
          <label>Email:</label> 
  
          <br>
          
         
          <input type="text" id="txtEmail"  class="form-control"  name="email" placeholder="Please provide a valid email address" required>
          <span id="vEmail" class="validation"></span>
          <br>
           </div>
         
       
        <div  class="mx-auto" style="width: 507px; padding: 7px;">
          <label>Comments:</label>
          <br>
          <textarea id="txtComments" class="form-control"   name="comments" rows="4" placeholder="Feedback or Questions" required></textarea>
          <span id="vComments" class="validation"></span>
          <br>
          </div>
          <div class="btn padding: 7px;">
          <input type="submit" class="btn btn-primary  "  value="Submit" >
          </div>
          <div class="col-auto">
          <div class="form-check">
            <input class="form-check-input" type="radio" id="autoSizingCheck">
            <label class="form-check-label" for="autoSizingCheck">
              Remember me
            </label>
          </div>
        </div>
        <br>
        
</div>
      <div class="text-center bg-info" style="background-color: rgb(223, 236, 236);" >
        <img src="/images/contact.jpg" class="rounded mx-20" width="347" height="347"  alt="lets talk"   >
      </div>
    </form>
    

</div>

<%- include('partials/bottom') %>