observatorio-jekyll-theme 0.1.2

data/_layouts/biblioteca.html

@@ -0,0 +1,85 @@
+---
+layout: default
+---
+
+<article class="h-entry row no-gutters justify-content-center" itemscope itemtype="http://schema.org/Article">
+  {%- if page.image.path -%}
+    <div class="col-12 mb-3">
+      {%- include_cached picture.html image=page.image default_description=page.title height='50vh' -%}
+    </div>
+  {%- endif -%}
+
+  <header class="col-10 col-md-8">
+    <h1 class="p-name f-4 f-md-h1" itemprop="name headline">{{ page.title | default: '' | escape }}</h1>
+
+    {%- if page.description -%}
+      <p class="lead p-summary" itemprop="description">{{ page.description | default: '' | escape }}</p>
+    {%- endif -%}
+
+    <p>
+      <time class="dt-published" datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
+        {%- assign date_format = site.i18n.date.format | default: "%b %-d, %Y" -%}
+        {{ page.date | default: site.date | date_local: date_format }}
+      </time>
+
+      {%- for author in page.author -%}
+        <span itemprop="author" itemscope itemtype="http://schema.org/Person">
+          <span class="p-author h-card" itemprop="name">
+            {{ author | default: '' | escape }}
+          </span>
+        </span>
+      {%- endfor -%}
+    </p>
+
+    {%- unless page.categories == empty -%}
+      <p>
+        {% for category in page.categories %}
+          <a class="badge badge-primary white h-category" href="{{ category.url }}">{{ category.title }}</a>
+        {% endfor %}
+      </p>
+    {%- endunless -%}
+
+    {% if page.link %}
+      <a class="btn btn-primary" href="{{ page.link }}" target="_blank" rel="noopener">{{ site.i18n.biblioteca.link }}</a>
+    {% endif %}
+
+    {% if page.file.path %}
+      <a
+        class="btn btn-primary"
+        href="{{ page.file.path }}"
+        download="{{ page.title }}{{ page.file.path | extname }}">{{ site.i18n.biblioteca.file }}</a>
+    {% endif %}
+  </header>
+
+  <div class="e-content col-10 col-md-8 content" itemprop="articleBody">
+    {{ content | replace: '<img ', '<img loading="lazy" ' | replace: '<iframe ', '<iframe loading="lazy" ' }}
+  </div>
+
+  <footer class="col-10">
+    <a class="u-url" itemprop="url" href="{{ page.url }}" hidden>
+      {{ site.url }}/{{ page.url }}
+    </a>
+
+    {%- if page.uuid -%}
+      <span hidden itemprop="identifier">{{ page.uuid }}</span>
+    {%- endif -%}
+
+    {%- if page.license.url -%}
+      <p itemprop="license" itemtype="http://schema.org/CreativeWork">
+        <a rel="license" itemprop="url" href="{{ page.license.url }}">
+          <span itemprop="articleBody">
+            {{ page.license.description }}
+          </span>
+        </a>
+      </p>
+    {%- endif -%}
+
+    <meta
+      itemprop="keywords"
+      content="{{ page.tags | join: ',' }},{{ page.categories | map: 'title' | join: ',' }}" />
+
+    {%- for tag in page.tags -%}
+      <span hidden class="h-category">{{ tag }}</span>
+    {%- endfor -%}
+  </footer>
+</article>

data/_layouts/cart.html

@@ -0,0 +1,72 @@
+---
+layout: default
+---
+
+<section>
+  <h1>{{ page.title }}</h1>
+  <div class="content">
+    {{ content | replace: '<img ', '<img loading="lazy" ' | replace: '<iframe ', '<iframe loading="lazy" ' }}
+  </div>
+
+  <div
+    data-controller="order"
+    data-order-item-template="assets/templates/cart.html">
+
+    <div class="row no-gutters align-items-center font-weight-bold justify-content-center">
+      <div class="d-none d-lg-block col-lg-4 p-3">
+        <h4 class="m-0">{{ page.product }}</h4>
+      </div>
+
+      <div class="d-none d-lg-block col-lg-8">
+        <div class="row no-gutters align-items-center">
+          <div class="col-lg p-3">
+            <h4 class="m-0">{{ page.price }}</h4>
+          </div>
+
+          <div class="col-lg p-3">
+            <h4 class="m-0">{{ page.quantity }}</h4>
+          </div>
+
+          <div class="col-lg p-3">
+            <h4 class="m-0">{{ page.subtotal }}</h4>
+          </div>
+
+          <div class="col-lg-2 p-3">
+            <h4 class="m-0 sr-only">{{ page.remove }}</h4>
+          </div>
+        </div>
+      </div>
+
+      <div class="col-12" data-target="order.cart">
+      </div>
+    </div>
+
+    <div class="row no-gutters align-items-end">
+      <div class="order-last order-md-first col-12 col-md-6 col-lg-4 mt-3 mt-md-0">
+        <a href="?" class="btn btn-transparent black border text-uppercase">
+          {{ page.back }}
+        </a>
+      </div>
+
+      <div class="col-12 col-md-6 col-lg-8">
+        <div class="row no-gutters align-items-center">
+          <div class="col-lg"></div>
+
+          <div class="col-6 col-lg text-right">
+            <p class="font-weight-bold">{{ page.subtotal }}</p>
+          </div>
+
+          <div class="col-6 col-lg text-center">
+            <p class="font-weight-bold" data-target="order.subtotal">0</p>
+          </div>
+
+          <div class="col-lg-2"></div>
+
+          <div class="col-12">
+            <a href="{{ site.shipment.url }}" class="btn btn-block btn-primary text-uppercase">{{ site.shipment.title }}</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

data/_layouts/confirmation.html

@@ -0,0 +1,23 @@
+---
+layout: default
+---
+
+<section
+  data-controller="cart-confirmation"
+  data-template="confirmation"
+  data-clear="true">
+
+  <header>
+    <h1>{{ page.title }}</h1>
+  </header>
+
+  <div class="content">
+    {{ content }}
+  </div>
+
+  <div data-target="cart-confirmation.order"></div>
+
+  <p data-controller="cart-paypal-confirmation"></p>
+
+  <a href="?" class="btn btn-primary text-uppercase">{{ page.back }}</a>
+</section>

data/_layouts/contacto.html

@@ -0,0 +1,47 @@
+---
+layout: default
+---
+
+{%- assign form = site.data.forms.contacto -%}
+
+<article id="contacto" class="h-entry row no-gutters justify-content-center" itemscope itemtype="http://schema.org/Article">
+  {%- if page.image.path -%}
+    <div class="col-12 mb-3">
+      {%- include_cached picture.html image=page.image default_description=page.title height='50vh' -%}
+    </div>
+  {%- endif -%}
+
+  <header class="col-10 col-md-8">
+    <h1 class="p-name f-4 f-md-h1 blue text-uppercase" itemprop="name headline">{{ page.title | default: '' | escape }}</h1>
+
+    {%- if page.description -%}
+      <p class="lead p-summary" itemprop="description">{{ page.description | default: '' | escape }}</p>
+    {%- endif -%}
+  </header>
+
+  <div class="e-content col-10 col-md-8 content" itemprop="articleBody">
+    {{ content | replace: '<img ', '<img loading="lazy" ' | replace: '<iframe ', '<iframe loading="lazy" ' }}
+
+    {% include contact.html name='contacto' form=site.data.forms.contacto %}
+  </div>
+
+  <footer class="col-10">
+    <a class="u-url" itemprop="url" href="{{ page.url }}" hidden>
+      {{ site.url }}/{{ page.url }}
+    </a>
+
+    {%- if page.uuid -%}
+      <span hidden itemprop="identifier">{{ page.uuid }}</span>
+    {%- endif -%}
+
+    {%- if page.license.url -%}
+      <p itemprop="license" itemtype="http://schema.org/CreativeWork">
+        <a rel="license" itemprop="url" href="{{ page.license.url }}">
+          <span itemprop="articleBody">
+            {{ page.license.description }}
+          </span>
+        </a>
+      </p>
+    {%- endif -%}
+  </footer>
+</article>

data/_layouts/default.html

@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="{{ site.lang }}" dir="{{ site.dir }}">
+  <head>
+    <meta charset="UTF-8">
+    <base href="{% base %}" />
+    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
+    <meta content="width=device-width, initial-scale=1.0" name="viewport">
+    <meta name="theme-color" content="white"/>
+    <meta name="color-scheme" content="light"/>
+    <meta name="referrer" content="strict-origin-when-cross-origin"/>
+
+    {% comment %}
+    No tenemos forma de hashear SASS aún, por lo que renovamos la caché
+    aplicando la hora de compilación del sitio.  Es importante que los
+    CSS se renueven cuando se regenera el sitio, porque pueden contener
+    variables dinámicas (como personalización de colores y tipografía) o
+    minificarse distinto dependiendo del contenido.
+    {% endcomment %}
+    <link href="assets/css/styles.css?{{ site.time | date: '%s' }}" rel="stylesheet">
+
+    {% comment %}
+    Webpack.  La configuración se pasa por variables de entorno, en
+    desarrollo hay que evitar el archivo .env (copiarlo de .env.example
+    si no existe.
+    {% endcomment %}
+    <link rel="preload" as="script" type="text/javascript" href="env.js" />
+    <script type="text/javascript" src="env.js?{{ site.time | date: '%s' }}"></script>
+    {% include_cached pack.html %}
+
+    {% comment %}
+    Agregar otras tipografías.  Esto hace que las tipografías se carguen
+    lo más rápido posible y minimizar el tiempo en que se ven las del
+    navegador.  En Firefox todavía no está soportado.
+
+    Fork Awesome lleva la hora de generación para poder renovarlo si
+    agregamos íconos nuevos, de lo contrario puede quedar cacheado para
+    siempre y les visitantes van a ver íconos rotos.
+    {% endcomment %}
+    {% include_cached preload_font.html font='assets/fonts/forkawesome-webfont.woff2' %}
+
+    <link rel="icon" type="image/svg+xml" href="public/favicon.svg">
+    <link rel="alternate icon" href="public/favicon.ico">
+    <link rel="mask-icon" href="public/favicon.svg" color="white">
+
+    {% seo %}
+    {% feed_meta %}
+  </head>
+  <body>
+    <div data-turbo-permanent>
+      <a href="#content" data-turbo="false" class="sr-only sr-only-focusable">
+        {{ site.i18n.accessibility.skip_to_content }}
+      </a>
+
+      {%- include_cached notification.html -%}
+    </div>
+
+    {%- assign active_cache_key = page.url | menu_active_item | default: 'none' -%}
+    {%- include_cached navbar.html active_cache_key=active_cache_key %}
+
+
+    <main tabindex="-1" role="main" id="content" data-controller="scroll stock" data-per-page="100" class="mt-3">
+      {{ content }}
+    </main>
+
+    {% include_cached footer.html %}
+    {% include_cached floating_alert.html %}
+
+    <div data-turbo-permanent>
+      {% include_cached device_detector.html %}
+    </div>
+  </body>
+</html>

data/_layouts/dona.html

@@ -0,0 +1,20 @@
+---
+layout: default
+---
+
+{%- assign form = site.data.forms.dona -%}
+
+<section id="participa" class="row justify-content-center no-gutters">
+	<div class="col-7 mt-5 mb-5">
+		<form id="{{ name }}" class="update-domain" autocomplete="off" data-attr="action" action="https://api.{{ site.hostname }}/v1/sites/{{ site.hostname }}/contact/{{ name }}" method="post">
+			<div class="row justify-content-center">
+				{%- for field in form -%}
+					{% assign template = field[1].type | append: '.html' %}
+					<div class="col{{ field[1].col | default: 12 | prepend: '-' }}">
+						{% include {{ template }} field=field %}
+					</div>
+				{%- endfor -%}
+			</div>
+		</form>
+	</div>
+</section>

data/_layouts/home.html

@@ -0,0 +1,142 @@
+---
+layout: default
+---
+
+{%- assign about = site.posts | find: 'layout', 'about' -%}
+{%- assign posts = site.posts | where: 'layout', 'post' -%}
+{%- assign logros = site.posts | where: 'layout', 'banner_1' -%}
+{%- assign acciones = site.posts | where: 'layout', 'banner_2' -%}
+
+<section id="portada">
+	<div class="row no-gutters justify-content-center row-cols-1 row-cols-md-2 row-cols-lg-3">
+		{% for post in posts limit: 2 %}
+      {%- include_cached post.html post=post height=30 overlap=true -%}
+		{% endfor %}
+	</div>
+
+  {% comment %}
+  Usamos container y row con gutters para poder tener divisiones en la
+  grilla de noticias.
+  {% endcomment %}
+  <div class="container">
+    <div class="row justify-content-center row-cols-1 row-cols-md-3">
+      {% for post in posts limit: 6 offset: 3 %}
+        {%- include_cached post.html post=post -%}
+      {% endfor %}
+    </div>
+  </div>
+</section>
+
+
+<section id="mision">
+  <div class="d-flex w-100 h-80vh flex-column">
+    {%- include_cached picture.html image=about.image default_description=about.title height='80vh' -%}
+
+    <div class="d-flex align-items-center justify-content-center w-100 mt-n80vh h-80vh">
+      <div class="text-center white">
+        <h1 class="font-weight-bold text-uppercase f-md-8">{{ about.title }}</h1>
+        <p class="lead f-md-5">{{ about.tagline }}</p>
+      </div>
+    </div>
+  </div>
+
+	<div class="d-flex background-blue vh-50 align-items-center justify-content-center pt-8 pb-8">
+		<div class="text-white text-center">
+      <div class="mb-3">
+        {{ about.mision }}
+      </div>
+
+			<a class="btn btn-outline-light" href="{{ about.url }}">{{ site.i18n.more }}</a>
+		</div>
+	</div>
+
+	<div class="h-80vh">
+    {%- include_cached picture.html image=about.image_2 default_description=about.title height='80vh' -%}
+	</div>
+</section>
+
+{% unless logros == empty %}
+  <section id="logros">
+    <header class="pt-5 pb-5">
+      <h1 class="text-uppercase text-center">{{ site.i18n.logros.title }}</h1>
+    </header>
+
+    <div class="w-100 row no-gutters row-cols-1 row-cols-md-3 flex-nowrap no-scrollbar overflow-y-hidden snap-mandatory-y">
+      {% for logro in logros %}
+        <article
+          id="{{ logro.slug }}"
+          class="snap-start position-relative d-flex flex-column justify-content-start align-items-center"
+          itemscope itemprop="SpecialAnnouncement" itemtype="https://schema.org/SpecialAnnouncement">
+          <a class="stretched-link" href="{{ logro.post.url }}"></a>
+
+          {%- include_cached picture.html image=logro.image default_description=logro.title height='15' -%}
+
+          <header class="text-center">
+            <h1 class="f-3 text-uppercase">{{ logro.title }}</h1>
+            <p class="lead">{{ logro.description }}</p>
+          </header>
+
+          <a
+            href="#{{ logro | infinite_prev: logros, 1 | map: 'slug' | first }}"
+            class="carousel-control-prev d-md-none"
+            role="button">
+            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+            <span class="sr-only">{{ site.i18n.accessibility.previous }}</span>
+          </a>
+
+          <a
+            href="#{{ logro | infinite_next: logros, 1 | map: 'slug' | first }}"
+            class="carousel-control-next d-md-none"
+            role="button">
+            <span class="carousel-control-next-icon" aria-hidden="true"></span>
+            <span class="sr-only">{{ site.i18n.accessibility.next }}</span>
+          </a>
+        </article>
+      {% endfor %}
+    </div>
+  </section>
+{% endunless %}
+
+{% unless acciones == empty %}
+  <section id="acciones" class="mt-5">
+    <div class="w-100 row no-gutters row-cols-1 row-cols-md-4 flex-nowrap no-scrollbar overflow-y-hidden snap-mandatory-y">
+      {% for accion in acciones %}
+        <article
+          id="{{ accion.slug }}"
+          class="snap-start position-relative d-flex flex-column justify-content-start align-items-center pb-8"
+          style="background-color: {{ accion.background_color | default: 'transparent' }}; color: {{ accion.color | default: 'black' }}"
+          itemscope itemprop="SpecialAnnouncement" itemtype="https://schema.org/SpecialAnnouncement">
+          <a
+            class="stretched-link"
+            {{ accion.link | start_with: 'http' | value_if: 'rel="noopener" target="_blank"' }}
+            href="{{ accion.link | present | ternary: accion.link, accion.post.url }}"></a>
+
+          {%- include_cached picture.html image=accion.image default_description=accion.title height='15' -%}
+
+          <header class="text-center text-uppercase">
+            <h1 class="f-3">{{ accion.title }}</h1>
+            <p class="lead">{{ accion.description }}</p>
+
+            <p>{{ site.i18n.more }}</p>
+          </header>
+
+          <a
+            href="#{{ accion | infinite_prev: acciones, 1 | map: 'slug' | first }}"
+            class="carousel-control-prev d-md-none"
+            role="button">
+            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+            <span class="sr-only">{{ site.i18n.accessibility.previous }}</span>
+          </a>
+
+          <a
+            href="#{{ accion | infinite_next: acciones, 1 | map: 'slug' | first }}"
+            class="carousel-control-next d-md-none"
+            role="button">
+            <span class="carousel-control-next-icon" aria-hidden="true"></span>
+            <span class="sr-only">{{ site.i18n.accessibility.next }}</span>
+          </a>
+        </article>
+      {% endfor %}
+    </div>
+  </section>
+{% endunless %}

data/_layouts/integrante.html

@@ -0,0 +1,26 @@
+---
+layout: default
+---
+
+<section id="integrante">
+	<div class="row justify-content-center">
+		<div class="col-12 flex-column text-center">
+			<p class="blue font-weight-bold h1 m-5">¿Quiénes somos?</p>
+			<p>Las caras de nuestra organización</p>
+		</div>
+	</div>
+	
+	<div class="row mt-5 mb-5 justify-content-center">
+		{% assign integrantes = site.posts | where: 'layout', 'integrante' %}
+		{% for i in integrantes %}
+			<div class="col-3 m-2">
+				<img
+					class="img-fluid rounded-circle"
+					src="{{ i.foto.path }}"
+					alt="{{ i.foto.description }}" />
+				<p class="blue text-center m-3 font-weight-bold">{{i.title}}</p>
+				<p>{{ i.description }}</p>
+			</div>
+		{% endfor %}
+	</div>
+</section>

data/_layouts/layout-categories.html

@@ -0,0 +1,5 @@
+---
+layout: default
+---
+
+{% include archive.html page=page -%}

data/_layouts/layout.html

@@ -0,0 +1,6 @@
+---
+layout: default
+---
+
+{%- assign template = page.title | slugify: 'latin' | append: '.html' | prepend: 'archive_layout_' -%}
+{%- include {{ template }} page=page -%}

data/_layouts/page.html

@@ -0,0 +1,5 @@
+---
+layout: default
+---
+
+{{ content }}

data/_layouts/participa.html

@@ -0,0 +1,12 @@
+---
+layout: default
+---
+
+<section class="d-flex vh-100 align-items-center justify-content-center opacidad" style="background-image: url({{ page.foto.path }});background-size: cover; background-position: center center;">
+	<div class="row fondo-nov p-7 vw-100">
+		<div class="col text-center text-white">
+			<h1 class="font-weight-bold">{{ page.title }}</h1>
+			<p>{{ page.description }}</p>
+		</div>
+	</div>
+</section>

data/_layouts/payment.html

@@ -0,0 +1,21 @@
+---
+layout: default
+---
+
+<section class="">
+  <header class="">
+    <h1>{{ page.title }}</h1>
+  </header>
+
+  <div class="content">
+    {{ content }}
+  </div>
+
+  <div
+    id="cart-payment-methods"
+    data-controller="cart-payment-methods"
+    data-cart-payment-methods-next-url="{{ site.confirmation.url }}"
+    data-cart-payment-methods-back-url="{{ site.shipment.url }}"
+    data-cart-payment-methods-template="payment_methods">
+  </div>
+</section>

data/_layouts/peticiones.html

@@ -0,0 +1,24 @@
+---
+layout: default
+---
+
+<section id="peticiones">
+		{%- assign peticion = site.posts | where: 'layout', 'peticiones' -%}
+		{% for i in peticion %}
+		<div class="row justify-content-center mb-4">
+			<div class="col-3">
+				<img class="img-fluid" src="{{ i.foto.path }}" alt="{{ i.foto.description }}" />
+			</div>
+			<div class="col-5">
+				<h2 class="petitle text-uppercase font-weight-bolder">{{ i.title }}</h2>
+				
+				<p>{{ i.description }}</p>
+				
+				<div class="d-flex justify-content-around">
+					<a href="{{ i.url }}" class="btn btn-light text-uppercase font-weight-bolder">{{ site.i18n.more }}</a>
+					<a href="{{ i.firmar }}" class="btn btn-light text-uppercase font-weight-bolder">{{ site.i18n.firmar }}</a>
+				</div>
+			</div>
+		</div>
+		{% endfor %}
+</section>

data/_layouts/post.html

@@ -0,0 +1,91 @@
+---
+layout: default
+---
+
+<article class="h-entry row no-gutters justify-content-center" itemscope itemtype="http://schema.org/Article">
+  <div class="col-12 mb-3 text-center">
+    {%- if page.video -%}
+      {%- include_cached video.html video=page.video -%}
+    {%- elsif page.image.path -%}
+      {%- include_cached picture.html image=page.image default_description=page.title height='50vh' width='auto' cover=false -%}
+    {%- endif -%}
+  </div>
+
+  <header class="col-10 col-md-8">
+    <h1 class="p-name f-4 f-md-h1" itemprop="name headline">{{ page.title | default: '' | escape }}</h1>
+
+    {%- if page.description -%}
+      <p class="lead p-summary" itemprop="description">{{ page.description | default: '' | escape }}</p>
+    {%- endif -%}
+
+    <p>
+      <time class="dt-published" datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
+        {%- assign date_format = site.i18n.date.format | default: "%b %-d, %Y" -%}
+        {{ page.date | default: site.date | date_local: date_format }}
+      </time>
+
+      {%- for author in page.author -%}
+        <span itemprop="author" itemscope itemtype="http://schema.org/Person">
+          <span class="p-author h-card" itemprop="name">
+            {{ author | default: '' | escape }}
+          </span>
+        </span>
+      {%- endfor -%}
+    </p>
+
+    {%- unless page.categories == empty -%}
+      <p>
+        {% for category in page.categories %}
+          <a class="badge badge-primary white h-category" href="{{ category.url }}">{{ category.title }}</a>
+        {% endfor %}
+      </p>
+    {%- endunless -%}
+
+    {%- include share_box.html url=page.url title=page.title description=page.description -%}
+
+    {% if page.link %}
+      <a class="btn btn-primary" href="{{ page.link }}" target="_blank" rel="noopener">{{ site.i18n.biblioteca.link }}</a>
+    {% endif %}
+
+    {% if page.file.path %}
+      <a
+        class="btn btn-primary"
+        href="{{ page.file.path }}"
+        download="{{ page.title }}{{ page.file.path | extname }}">{{ site.i18n.biblioteca.file }}</a>
+    {% endif %}
+  </header>
+
+  <div class="e-content col-10 col-md-8 content" itemprop="articleBody">
+    {{ content | replace: '<img ', '<img loading="lazy" ' | replace: '<iframe ', '<iframe loading="lazy" ' }}
+  </div>
+
+  <footer class="col-10">
+    <a class="u-url" itemprop="url" href="{{ page.url }}" hidden>
+      {{ site.url }}/{{ page.url }}
+    </a>
+
+    {%- if page.uuid -%}
+      <span hidden itemprop="identifier">{{ page.uuid }}</span>
+    {%- endif -%}
+
+    {%- if page.license.url -%}
+      <p itemprop="license" itemtype="http://schema.org/CreativeWork">
+        <a rel="license" itemprop="url" href="{{ page.license.url }}">
+          <span itemprop="articleBody">
+            {{ page.license.description }}
+          </span>
+        </a>
+      </p>
+    {%- endif -%}
+
+    <meta
+      itemprop="keywords"
+      content="{{ page.tags | map: 'title' | join: ',' }},{{ page.categories | map: 'title' | join: ',' }}" />
+
+    <p>
+      {%- for tag in page.tags -%}
+        <a class="h-category badge badge-primary" href="{{ tag.url }}">{{ tag.title }}</a>
+      {%- endfor -%}
+    </p>
+  </footer>
+</article>