{% extends 'base.html' %}
{% block content %}
{% load static %}


  <!-- contact section -->

  <section class="contact_section layout_padding" >
    <div class="container px-0">
      <div class="heading_container"">
        <h2 class="" id="contact-us">
          Con<span>ta</span>ct Us
          <br>
        </h2>
        <h3>
          
          <a href="tel:714-262-9588">
            <span onMouseOver="this.style.color='#fbac2e'" onMouseOut="this.style.color='black'" style='color:black;'>(714) 262-9588</span>
          </a>
        </h3>
      </div>

    
  

    </div>
    <div class="container container-bg">
      <div class="row">
        <div class="col-lg-8 col-md-7 px-0">
          <div class="map_container">
            <div class="map-responsive">
              <iframe src="https://www.google.com/maps/embed/v1/place?key=AIzaSyA0s1a7phLN0iaD6-UE7m4qP-z21pH0eSc&q=Candals+Martial+Arts" width="600" height="300" frameborder="0" style="border:0; width: 100%; height:100%" allowfullscreen></iframe>
            </div>
          </div>
        </div>
        <div class="col-md-5 col-lg-4 px-0">
          <form action="send_mail" method="get">
            {% csrf_token %}
            <div>
              Fill out your information and we will get into contact as soon as possible!
            </div>
            <br>
            <div>
              <input type="text" placeholder="Name" name="name" required />
            </div>
            <div>
              <input type="email" placeholder="Email" name="email" required />
            </div>
            <div>
              <input type="tel" placeholder="Phone" name="phone" required />
            </div>
            <div class="d-flex ">
              <button type="submit">
                SEND
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </section>

  <!-- end contact section -->
{% endblock %}