portfolio-b.liquid

<script src="https://cdn.shopify.com/s/files/1/0065/5074/9253/files/jquery.min.js?v=1596581720"></script>
<script src="https://cdn.shopify.com/s/files/1/0065/5074/9253/files/bs.min.js?v=1596581690"></script>
<script src="https://cdn.shopify.com/s/files/1/0065/5074/9253/files/provincias.js?v=1596583586"></script>
<link rel="stylesheet" type="text/css"
  href="https://cdn.shopify.com/s/files/1/0065/5074/9253/files/bs.css?v=1596582732">

{% section 'b-01' %}




<div class="libro-reclamaciones">
  <div class="container">
    <div class="row mb-20">
      <div class="col text-center">
        <h2>{{ page.title }}</h2>
      </div>
    </div>
    <div class="row mb-20">
      {% if section.blocks.size > 0 %}
      {% for block in section.blocks %}
      {% if block.type == "proyecto" %}
      <div class="col-{{ section.settings.mcols }} col-md-{{ section.settings.cols }} text-center mb-20">
        <div class="mb-05">
        {% render 'responsive-image' with block.settings.image, alt: '{{ block.settings.title }}' %}
        </div>
        <h5 class="mb-03">{{ block.settings.title }}</h5>
        <p class="mb-01">{{ block.settings.subtitle }}</p>
        <a href="{{ block.settings.button_link }}"><button class="btn-proyect btn-bloc">{{ block.settings.button_text }}</button></a>
      </div>
      {% endif %}
      {% endfor %}
      {% endif %}

    </div>
    {% if section.settings.show_contact %}
    <div class="row my-20 mw-600">
      {% form 'contact' %}
      <div class="form-row mb-20" style="text-align: center;">
        <div class="col">
          {% if form.posted_successfully? %}
          <hr style="color: transparent;border-style: none;">
          <p>Solicitud enviada con éxito</p>
          {% endif %}
          {% if form.errors %}
          <hr style="color: transparent;border-style: none;">
          <p>Hubo un error en tu solicitud, intenta nuevamente</p>
          <ul class="center">
            {% for field in form.errors %}
            <li>
              Error en {{ field }}
            </li>
            {% endfor %}
          </ul>
          {% endif %}

        </div>
      </div>

      <div class="form-row mb-20">
        <div class="col text-center">
          <hr style="color: transparent;border-style: none;">
          <p>Contáctanos<br></p>
        </div>
        <div class="form-row">
          <input type="hidden" name="contact[tipo-contacto]" value="{{page.title}}">
          <div class="col-12 col-md-12">
            <input class="form-control" type="text" placeholder="Nombre completo" name="contact[nombres]" required="">
          </div>
          <div class="col-12 col-md-6">
            <input class="form-control" type="tel" placeholder="DNI" name="contact[dni]" required="">
          </div>
          <div class="col-12 col-md-6">
            <input class="form-control" type="text" placeholder="Dirección" name="contact[direccion]" required="">
          </div>
          <div class="col-12 col-md-6">
            <input class="form-control" type="email" placeholder="Correo electrónico" name="contact[email]" required="">
          </div>
          <div class="col-12 col-md-6">
            <input class="form-control" type="tel" placeholder="Teléfono celular" name="contact[celular]" required="">
          </div>
          <div class="col-12 col-md-12">
            <textarea class="form-control" placeholder="Espacios a intervenir con el metraje de cada uno" name="contact[detalle]"
                      required=""></textarea>
          </div>
        </div>
        <div class="form-row">
          <div class="col-12 col-md-12">
            <button class="btn-block btn--secondary" type="submit">Enviar</button>
          </div>
          <hr style="border-style: none;">
        </div>
      {% endform %}
    </div>
    {% endif %}
  </div>
</div>

<style>
  .mw-600 {
    max-width: 800px;
    margin: 0 auto!important;
  }
  .libro-reclamaciones a:hover, .libro-reclamaciones a, .btn-proyect, .btn-proyect:hover {
    text-decoration: none !important;
    border: 0px;
  }
  .my-20 {
    margin-bottom: 20px;
    margin-top: 20px;
  }
  .mb-03 {
    margin-bottom: 0.3rem !important;
  }
  .mb-05 {
    margin-bottom: 0.5rem !important;
  }
  .mb-01 {
    margin-bottom: 1rem !important;
  }
  .mb-10 {
    margin-bottom: 10px;
  }
  .mb-20 {
    margin-bottom: 20px;
  }
</style>

{% schema %}
  {
    "name": "Categoría Proyectos",
	"max_blocks": 50,
    "settings": [
		{
           "type": "select",
           "id": "cols",
           "options": [
              { "value": "6", "label": "2"},
              { "value": "4", "label": "3"},
              { "value": "3", "label": "4"}
           ],
           "label": "Proyectos por fila"
        },
		{
           "type": "select",
           "id": "mcols",
           "options": [
              { "value": "12", "label": "1"},
              { "value": "6", "label": "2"}
           ],
           "label": "Fotos por fila mobile"
        },
		{
          "type": "checkbox",
          "id": "show_contact",
          "label": "Mostrar formulario contacto"
        }
	],
	"blocks": [
      {
        "type": "proyecto",
        "name": "Listado proyectos",
        "settings": [
          {
            "type": "image_picker",
            "id": "image",
            "label": "Imagen proyecto"
          },
		  {
            "type": "text",
            "id": "title",
            "label": "Nombre proyecto",
            "default": "Título"
          },
		  {
            "type": "text",
            "id": "subtitle",
            "label": "Subtitulo proyecto",
            "default": "Subtítulo"
          },
		  {
            "type": "text",
            "id": "button_text",
            "label": "Texto boton"
          },
		  {
            "type": "url",
            "id": "button_link",
            "label": "Link botón"
          }
        ]
      }
	]
  }
{% endschema %}