Fourth version of foundation template tutorial

index.html

---
layout: index-layout
subject: My Email Templates
---

<spacer size="16"></spacer>

<!-- Contenedor para el encabezado -->
<container class="container-header">
  <spacer size="50"></spacer>
  <row>
    <columns>
      <center>
        <img src="https://placehold.it/150x50?text=logo" alt="image of clever meme that made me chuckle">
      </center>
    </columns>
  </row>
  <spacer size="30"></spacer>
</container>

<!-- Contenedor para el contenido principal -->
<spacer size="20"></spacer>
<container class="container-content">
  <!-- Texto -->
  <row>
    <colums>
      <p
        class="presentation-subtitle margin-bottom--remove text-align--center"
      >
        Sem et tortor!
      </p>
      <h4 class="presentation-title text-align--center">
        Lectus arcu, bibendum.
      </h4>
    </colums>
  </row>
  <spacer size="15"></spacer>

  <!-- Imágenes -->
  <row>
    <columns small="12" large="12">
      <center>
        <img src="https://placehold.it/600?text=image" alt="Nam vestibulum accumsan nisl.">
      </center>
    </columns>
  </row>
  <row>
    <columns small="12" large="6">
      <center>
        <img src="https://placehold.it/300?text=image" alt="Nullam libero mauris, consequat quis, varius et, dictum id, arcu.">
      </center>
    </columns>
    <columns small="12" large="6">
      <center>
        <img src="https://placehold.it/300?text=image" alt="Etiam laoreet quam sed arcu.">
      </center>
    </columns>
  </row>

  <!-- Texto final -->
  <spacer size="10"></spacer>
  <row>
    <columns>
      <p class="paragraph">
        Volutpat odio facilisis mauris sit amet massa vitae tortor condimentum.
        <a href="">Nisl nunc mi ipsum, faucibus?</a>
      </p>
    </columns>
  </row>
</container>
<spacer size="20"></spacer>

<!-- Contenedor para el pie de página -->
<container class="container-footer">
  <!-- Texto -->
  <spacer size="20"></spacer>
  <row>
    <columns>
      <p class="paragraph--white">
        <small>Sed velit dignissim sodales ut eu sem integer.</small>
      </p>
    </columns>
  </row>

  <!-- Imágenes -->
  <row>
    <center>
      <menu>
        <item href="http://zurb.com">
          <img class="social-logo" src="https://placehold.it/50x50?text=social"/>
        </item>
        <item href="http://zurb.com">
          <img class="social-logo" src="https://placehold.it/50x50?text=social"/>
        </item>
        <item href="http://zurb.com">
          <img class="social-logo" src="https://placehold.it/50x50?text=social"/>
        </item>
      </menu>
    </center>
    <spacer size="15"></spacer>
  </row>
</container>

<spacer size="16"></spacer>