vf-site/pages/contact.html

{% extends "layouts/layout.html" %} {% block content %}
<!-- Header -->
<header class="ex-header bg-gray">
  <div class="container">
    <div class="row">
      <div class="col-xl-10 offset-xl-1">
        <h1 class="green">Nous contacter</h1>
      </div>
      <!-- end of col -->
    </div>
    <!-- end of row -->
  </div>
  <!-- end of container -->
</header>
<!-- end of ex-header -->
<!-- end of header -->

<!-- Form -->
<div class="ex-form-1 bg-gray pb-6">
  <div class="container">
    <div class="row">
      <div class="col-xl-10 offset-xl-1">
        <p class="mb-5">
          Voici l'occasion de nous contacter si vous êtes à la recherche d'une
          location capable d'offrir une expérience étonnante en termes de
          confort et de détente
          <a href="mailto:location.villafleurie@gmail.com"
            >location.villafleurie@gmail.com</a
          >
          ou appelez-nous quand vous le pouvez
          <a href="tel:+33658961279">+33 6 58 96 12 79</a>.
        </p>
        <p>
          <!-- Contact Form -->
        </p>

        <form
          id="contactForm"
          name="contactForm"
          data-toggle="validator"
          data-focus="false"
          method="post"
          action="/reservation.html"
          netlify
        >
          <div class="form-group">
            <input
              type="text"
              class="form-control-input"
              id="cname"
              name="name"
              required
            />
            <label class="label-control" for="cname">Nom complet</label>
            <div class="help-block with-errors"></div>
          </div>
          <div class="form-group">
            <input
              type="email"
              class="form-control-input"
              id="cemail"
              name="email"
              required
            />
            <label class="label-control" for="cemail">Email</label>
            <div class="help-block with-errors"></div>
          </div>
          <div class="form-group">
            <textarea
              class="form-control-textarea"
              id="cmessage"
              name="message"
              required
            ></textarea>
            <label class="label-control" for="cmessage">Votre message</label>
            <div class="help-block with-errors"></div>
          </div>
          <div class="form-group">
            <button type="submit" class="form-control-submit-button">
              Envoyer
            </button>
          </div>
          <div class="form-message">
            <div id="cmsgSubmit" class="h3 text-center hidden"></div>
          </div>
        </form>
        <!-- end of contact form -->
      </div>
      <!-- end of col -->
    </div>
    <!-- end of row -->
  </div>
  <!-- end of container -->
</div>
<!-- end of ex-form-1 -->
<!-- end of form -->

<!-- Basic -->
<div class="ex-basic-1 pt-5">
  <div class="container">
    <div class="row">
      <div class="col-xl-10 offset-xl-1">
        <h2 class="mt-3 mb-4">Où nous trouver</h2>
        <p class="mb-5">
          Notre mission à VillaFleurie est de nous concentrer sur tous les
          détails pour faire de votre séjour une expérience extraordinaire. une
          expérience inoubliable. Nous avons formé notre personnel pour qu'il
          réponde à vos attentes et les dépasse, afin que votre expérience à la
          VillaFleurie ne soit pas un simple souvenir, mais l'un de vos
          meilleurs souvenirs. Nous sommes passionnés et nous ne vous décevrons
          pas.
        </p>

        <div class="map-responsive mb-5">
          <iframe
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3831.2598078323063!2d-61.48991482394046!3d16.20707768449259!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x8c134f148764f5d5%3A0x981bb218cee8b16c!2sVillaFleurie!5e0!3m2!1sfr!2sde!4v1685258248016!5m2!1sfr!2sde"
            width="600"
            height="450"
            style="border: 0"
            allowfullscreen=""
            loading="lazy"
            referrerpolicy="no-referrer-when-downgrade"
          ></iframe>
        </div>

        <a class="btn-solid-reg mb-6" href="index.html#header">Réserver</a>
      </div>
      <!-- end of col -->
    </div>
    <!-- end of row -->
  </div>
  <!-- end of container -->
</div>
<!-- end of ex-basic-1 -->
<!-- end of basic -->
{% endblock %}