{% extends "base.html" %} {% load static %} {% block branding %}

<main id="content">
  <section class="py-2" style="background-color: #eee6ee">
    <div class="container">
      <nav aria-label="breadcrumb">
        <ol
          class="breadcrumb breadcrumb-site py-0 d-flex justify-content-center"
        >
          <li class="breadcrumb-item">
            <a 
              class="text-decoration-none text-body" 
              href="{% url 'home' %}"
              >Home</a
            >
          </li>
          <li
            class="breadcrumb-item active pl-0 d-flex align-items-center"
            aria-current="page"
          >
            Contact Us
          </li>
        </ol>
      </nav>
    </div>
  </section>
  <section class="pt-9">
    <div class="container">
      <div class="row">
        <div class="col-12 text-center mb-8 mb-lg-10">
          <h2 class="mb-4">Keep In Touch with Us</h2>
          <p class="fs-18 lh-155 mx-auto mb-0" style="max-width: 590px">
            We’re talking about clean beauty gift sets, of course – and we’ve
            got a bouquet of beauties for yourself or someone you love.
          </p>
        </div>
        <div class="col-12">
          <iframe
            src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d7534.435388925208!2d72.858425!3d19.229342!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xcb6833b083f9821!2sSKIN%20ESSENTIAL%20MUMBAI!5e0!3m2!1sen!2sin!4v1660852806853!5m2!1sen!2sin"
            width="100%"
            height="450"
            style="border: 0"
            allowfullscreen=""
            loading="lazy"
            referrerpolicy="no-referrer-when-downgrade"
          ></iframe>
          <!-- <div id="map" class="mapbox-gl map-point-animate"
                     style="height: 530px"
                     data-mapbox-access-token="pk.eyJ1IjoiZzVvbmxpbmUiLCJhIjoiY2t1bWY4NzBiMWNycDMzbzZwMnI5ZThpaiJ9.ZifefVtp4anluFUbAMxAXg"
                     data-mapbox-options='{"center":[-106.53671888774004, 35.12362056187368],"setLngLat":[-106.53671888774004, 35.12362056187368],"zoom":5,"style":"mapbox://styles/mapbox/light-v10"}'
                     data-mapbox-marker='[{"position":[-102.53671888774004, 38.12362056187368],"className":"marker","backgroundImage":"images/marker.png","backgroundRepeat":"no-repeat","width":"70px","height":"70px"}
             ,{"position":[-109.03671888774004, 33.02362056187368],"className":"marker","backgroundImage":"images/marker.png","backgroundRepeat":"no-repeat","width":"70px","height":"70px"}]'
                ></div> -->
        </div>
      </div>
    </div>
  </section>
  <section class="py-lg-13 py-10">
    <div class="container">
      <div class="row">
        <div class="col-lg-7">
          <h2 class="fs-34 lh-129 mb-7">Sent A Message</h2>
          <form method="POST">
            {% csrf_token %}
            <div class="row mb-6">
              <div class="col-sm-6 mb-6 mb-sm-0">
                <input
                  type="text"
                  class="form-control border-0"
                  placeholder="Name"
                  name="name"
                  required
                />
              </div>
              <div class="col-sm-6">
                <input
                  type="number"
                  class="form-control border-0"
                  placeholder="Phone No."
                  name="contact"
                  required
                />
              </div>
            </div>
            <div class="form-group mb-6">
              <input
                type="email"
                class="form-control border-0"
                placeholder="Email"
                name="email"
                required
              />
            </div>
            <div class="form-group mb-4">
              <textarea
                class="form-control border-0"
                rows="6"
                placeholder="Messenger"
                name="messenger"
              ></textarea>
            </div>
            <button
              type="submit"
              class="btn btn-secondary px-7 bg-hover-primary border-hover-primary"
            >
              Submit
            </button>
          </form>
        </div>
        <div class="col-lg-4 offset-lg-1 mt-9 mt-lg-0">
          <div class="mb-7 mb-lg-8 mt-5" style="max-width: 201px">
            <h4 class="fs-20 mb-3">Address</h4>
            <p class="mb-2 mb-lg-6 fs-16">
              <b>Head Office :</b> Office No. 37, Yeshwant Shopping Center,
              Carter Road No. 7, Borivali (East), Mumbai - 4000066 (India)
            </p>
            <p class="mb-2 mb-lg-6 fs-16">
              <b>Branch Office :</b> B-704, Shirvwad Avenue, Nava Naroda,
              Ahmedabad - 382330 Gujarat (India)
            </p>
            <p class="mb-2 mb-lg-6 fs-16">
              <b>Manufacturing Unit :</b> B-704, Shirvwad Avenue, Nava Naroda,
              Ahmedabad - 382330 Gujarat (India)
            </p>
          </div>
          <div class="pt-lg-1">
            <h4 class="fs-20 mb-3">Contact</h4>
            <ul class="list-unstyled mb-0 fs-16">
              <li class="mb-1">
                Mobile:<span class="text-secondary">
                  09820514671 / 8928880663</span
                >
              </li>
              <!-- <li class="mb-1">Hotline:<span class="text-secondary"> 09:30 – 21:30</span></li> -->
              <li>E-mail:<span> skinessential143@gmail.com</span></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </section>
</main>

{% endblock %}