MorfLess - Gallery Example

///META:
title={ MorfLess - Gallery Example }:
url={ /morfless/examples/gallery-example/ }:
description={ Example of using a Section with the MorfLess serverless application }:
thumbnail={ /images/Polimorf-shapes-background-yellow.jpg }:
extract={
This page demonstrates how to create a simple gallery out of three sets of boxes. It forms a grid pattern that can be further manipulated with css and JavaScript.
}:

///HEADER:
%%HEADER_ADDITIONS::
content={
<link rel="stylesheet" href="/css/polimorfic-basic-style.css" type="text/css" media="screen">
<link rel="stylesheet" href="/css/morfless-stylesheet.css" type="text/css" media="screen">
<link rel="stylesheet" href="/css/polimorf-gallery-example-style.css" type="text/css" media="screen">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">
}:

%%NAV::
logo={ src="/images/PoliMorfic-Main-LogoWIcon.png"}:
mlk={ href="/morfless/" name="MorfLess" }:
mlk={ href="/morfless/examples/gallery-example/" name="Gallery Example" }:
mlk={ href="/polimorf-theme/" name="Polimorf" src="/images/PoliMorf-Main-Icon.png" class="theme-icon" }:
searchbar={}:

///MAIN:
%%CONTENT_META::
title={}:

%%3_BOX_CUSTOM: image-gallery row1 ::
BOX1:
TEXT=[ <h2>Title 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p> ]:
BOX2:
TEXT=[ <h2>Title 2</h2> <p>Sed do eiusmod tempor incididunt ut labore...</p> ]:
BOX3:
TEXT=[ <h2>Title 3</h2> <p>Et dolore magna aliqua.</p> ]:

%%3_BOX_CUSTOM: image-gallery row2 ::
BOX1:
TEXT=[ <h2>Title 4</h2> <p>Ut enim ad minim veniam, quis nostrud exercitation... </p> ]:
BOX2:
TEXT=[ <h2>Title 5</h2> <p>Nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in...</p> ]:
BOX3:
TEXT=[ <h2>Title 6</h2> <p>Voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> ]:

%%3_BOX_CUSTOM: image-gallery row3 ::
BOX1:
TEXT=[ <h2>Title 7</h2> <p>Sed ut perspiciatis, unde omnis iste natus error... </p> ]:
BOX2:
TEXT=[ <h2>Title 8</h2> <p>Sit voluptatem accusantium doloremque laudantium...</p> ]:
BOX3:
TEXT=[ <h2>Title 9</h2> <p>totam rem aperiam eaque ipsa...</p>

///FOOTER:
%%DEFAULT::