Template articles

Siete Aguas__un pueblo con mucha historia__

Gallery Thumb I

Nuestro pueblo

Siete Aguas es un pueblo que tuvo gran importancia en el pasado ya que fue frontera y paso obligado entre los reinos de Castilla y Valencia. Se han hallado restos que prueban que ya estuvo habitado desde el paleolítico. También restos iberos y romanos. Lamentablemente no se conservan apenas restos porque desde siempre se construyó sobre ellos y han formado parte de masías o corrales de ganado. Algunos se hallan en el museo arqueológico de Valencia y otros en el museo de aquí. Hasta 1260 su población era principalmente musulmana. En este año Jaime l al considerarla un lugar estratégico le da la Carta Puebla y tras expulsar a los moriscos la repuebla con 30 familias cristianas seguramente castellanas.

Su situación propició que aquí se librasen varias batallas ya que la carretera actual data de 1825 y hasta entonces se tenía que atravesar un paso complicado que facilitaba las emboscadas.

Gallery Thumb II

Cruz Pairal

Esta cruz gótica fue durante siglos la hita que marcaba la frontera entre Castilla y Valencia. Estaba situada a las afueras del pueblo. Fue mandada construir en 1432 por Berenguer Mercader, dueño y señor de la Villa para conmemorar la paz entre Castilla y Aragón..

Gallery Thumb III

Puente Real

Este puente fue construido en 1780 para sustituir el que había de madera. Es el Puente Real de acceso al pueblo. No hay que olvidar que este era el camino hacia Castilla y era muy utilizado hasta el siglo XVlll. Este paso continuo de viajeros era muy importante para el pueblo por la riqueza que le generaba, de hecho al desviar la carretera y pasar menos viajeros por aquí varios vecinos prendieron fuego a la Venta de Casillas que les hacía la competencia. Desde entonces (1769) pasó a llamarse Ventaquemada


Gallery Thumb IV

Fuente de los siete caños

La fuente de los Siete Caños es emblema de nuestro pueblo.
Desde siempre abasteció de agua a la población y regó sus huertas. El manantial fue cerrado en 1883 y también entonces se pusieron los siete caños. Al lado estaba el lavadero. Hay que tener en cuenta que el pueblo terminaba aquí por lo que todo alrededor ya eran campos.
La fuente tal como la vemos actualmente, con azulejos, es de 1930, aunque fue restaurada de nuevo hace unos años.
La fuente sigue abasteciendo la balsa que sirve para el riego de huertas. Parte de las acequias de la época musulmana siguen existiendo


Gallery Thumb V

El Balneario

El balneario fue en su momento centro de la vida social de Siete Aguas. Inaugurado en 1891 acogió a importantes personalidades de la época. Aquí se celebraban bailes y fiestas y dio lugar a los primeros veraneantes que venían a tomar las aguas. (Tenemos en Siete Aguas más de cincuenta fuentes).
El balneario cayó en decadencia en la posguerra y ya no remontó cerrando definitivamente

Gallery Thumb VI

La Iglesia Parroquial de San Juan Bautista

Esta iglesia de estilo neoclásico fue terminada de construir en 1794. Para su construcción se derribaron los restos del torreón medieval y el Arco de Candilejo. En su fachada se hallaba una piedra con inscripción gótica que fue extraída en la última rehabilitación que se hizo y está expuesta en el interior de la iglesia.También existe una estupenda colección de tallas del escultor Vicente Rodilla, nacido aquí en el pueblo.

Gallery Thumb VII

Callejón de la Jordana

El callejón de la Jordana, es uno de los tres callejones cubiertos que fueron puertas secundarias de la villa. Las casas que quedaban fuera solían se habitadas por judíos y moriscos. Fueron expulsados en 1609 aunque probablemente quedasen algunos conversos.

Senderismo en la ruta de las fuentes


( recorrido de 5 horas) La ruta temática de las Fuentes comienza en la partida de la Pieza, en el Molino del Tío Valterra, para llegar allí tenemos que acceder primero a la plaza del Cerrito y de allí coger el camino que empieza en la Joangarría, tras unos veinte minutos de andadura, se llega al Molino, de allí la primera fuente en visitar es la "Fuente del Apetito", que nace casi al ras del cauce del Río Suc, toma su nombre por ser la única fuente que tenían cerca los campesinos y que, al carecer de comida para poder almorzar, bebían hasta hartarse para no tener que comer. De allí y por una pequeña senda, accederemos a la "Fuente del Retiro", que como su nombre indica, es un buen sitio para descansar y disfrutar con la pinada que nos ofrece. Para seguir la ruta hemos de tomar la carretera en dirección al Pueblo y una vez visitado el Puente Real y Concegil (siglo XVIII) bajaremos a la "Fuente del Cañico", una de las fuentes con más tradición etnológica de la localidad. Una vez visitada ésta, hemos de cruzar la carretera y tomar otra pequeña senda que nos llevará hasta la Umbría de la "Fuente de la Tejería", un hermoso paraje natural con lago incluído, en el que podremos observar la fauna y flora de riberas de montaña. La Fuente de la Tejería toma su nombre porque éste era el lugar que destinaba la Fábrica de Tejas de Siete Aguas para secarlas al aire libre. De allí tendremos que bordear la carretera de entrada al Casco Urbano y tomar la avenida de la Gota, una vez pasado el Cementerio Municipal tenemos que seguir recto y descender por un camino asfaltado hasta encontrarnos con la primera fuente de este bello rincón natural, la "Fuente del Garbanzo", desde aquí y tras unos metros recorridos encontraremos las "Fuentes de Gota y de Roca", unas fuentes con unas aguas de gran valor medicinal y muy apropiadas para el hígado, el riñón y la piel. El fin de la ruta acaba en el paraje natural del Papán, para conseguirlo hemos de bajar por el camino que sube a la urbanización La Loma y en seguida desviarnos para visitar la última de esta Ruta, la "Fuente del Papán", sin duda alguna el mayor tesoro natural de este trazado, ya que nos ofrece, no sólo el placer de visitar una de las zonas naturales más bonitas del periurbano, sino que además, podemos conocer especies botánicas tan interesantes como las mimbreras, el boj, los espinos albares o las plantas tapizantes de prado de ribera, desde allí y a nivel optativo podemos visitar el Barranco del Papán donde encontraremos interesantes formaciones geológicas en forma de pequeños cuchillos, sin duda alguna, un interesante lugar para fotografiar. A la vuelta a la población no nos debemos olvidar del gran símbolo de Siete Aguas como es la "Fuente de los Siete Caños", que por su interés merece visitarse aparte o junto al rico patrimonio artístico-histórico que encierran las calles de esta VillA. FUENTES : (más de 100) Para visitar los manantiales más cercanos al municipio existe la "Ruta de las Fuentes" donde pasearemos por la Fuente del Retiro, de la Tejería, de la Gota o del Papán, entre muchas otra. O la vegetación salvaje de la Umbría del Fresnal-Villingordo, que conserva una extensa fauna amenazada como el tejón, el gato montés, el zorro, el águila perdicera, la ardilla, el erizo, o la cabra montés, entre muchas otras especies cinegéticas EXCURSIONES :Entre las posibilidades de excursiones se propone las rutas de la Farnera a Monedi o la del Leonar a las Arravacas y desde allí a la Vallesa. Otra ruta muy atractiva podría ser por Raydón y Mazalví hasta la Atalayuela. Visita obligada para el amante de la naturaleza, puede ser la excursión a la aldea del Reatillo, a unos 15 km. al NO del término (el camino más oportuno es el va desde el municipio de Chera).

Frontpage scroll animations

In the Steakhouse template we have implemented the animation engine based on the scrollReveal.js script. This script makes creating elements onscroll animations very simple to define.

Thanks to this script you can describe an animation using natural language.

Description of the animation is placed in the data-scroll-reveal attribute:

<!-- These 2 lines are equivalent -->
<p data-scroll-reveal="enter top move 25px"> foo </p>
<p data-scroll-reveal="enter from the top and then move 25px"> foo </p>

The full description of the syntax is available on the project documentation page

Frontpage elements

This article describes the Steakhouse template features used on the frontpage.

Header

Header

The header section is activated on the page with activated module on the header module position and with frontpage page suffix assignment.

It is a Custom HTML module with following content:

<h1 data-scroll-reveal="enter top over .5s after 0s">The Best Steak House is Here</h1>

<h2 data-scroll-reveal="enter bottom over .5s after .15s">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean semper orci semper tempus.</h2>

<a href="#restaurant" class="btn" data-scroll-reveal="enter bottom over .5s after .25s">Discover our restaurant</a>

<ul class="gk-short-menu">
<li data-scroll-reveal="enter bottom over .5s after .25s"><a href="#menu"><i class="gk-icon-dinner-set-solid"></i> <span>Menu</span></a></li>
<li data-scroll-reveal="enter bottom over .5s after .5s"><a href="#specials"><i class="gk-icon-bottle-glass-solid"></i> <span>Specials</span></a></li>
<li data-scroll-reveal="enter bottom over .5s after .75s"><a href="/index.php/gallery"><i class="gk-icon-gallery-solid"></i> <span>Gallery</span></a></li>
<li data-scroll-reveal="enter bottom over .5s after 1s"><a href="/index.php/reservation"><i class="gk-icon-calendar-solid"></i> <span>Reservation</span></a></li>
<li data-scroll-reveal="enter bottom over .5s after 1.25s"><a href="#location"><i class="gk-icon-map-path-solid"></i> <span>Location</span></a></li>
</ul>

The above code contains the animation code connected with the data-scroll-reveal attribute.

Icons used in the gk-short-menu can be replaced with other. Full list of the available icons:

  • gk-icon-coffee
  • gk-icon-coffee-solid
  • gk-icon-cutlery
  • gk-icon-cutlery-solid
  • gk-icon-dinner-set
  • gk-icon-dinner-set-solid
  • gk-icon-gallery
  • gk-icon-gallery-alt
  • gk-icon-gallery-alt-solid
  • gk-icon-gallery-solid
  • gk-icon-glass
  • gk-icon-glass-solid
  • gk-icon-ice-cream
  • gk-icon-ice-cream-alt
  • gk-icon-ice-cream-alt-solid
  • gk-icon-ice-cream-solid
  • gk-icon-lollipop
  • gk-icon-lollipop-alt
  • gk-icon-lollipop-alt-solid
  • gk-icon-lollipop-solid
  • gk-icon-map-path
  • gk-icon-map-path-solid
  • gk-icon-marker
  • gk-icon-marker-solid
  • gk-icon-orange
  • gk-icon-orange-solid
  • gk-icon-phone
  • gk-icon-phone-solid
  • gk-icon-tea-cup
  • gk-icon-tea-cup-solid
  • gk-icon-wine-glass
  • gk-icon-wine-glass-solid
  • gk-icon-bottle-glass
  • gk-icon-bottle-glass-solid
  • gk-icon-burger
  • gk-icon-burger-solid
  • gk-icon-calendar
  • gk-icon-calendar-solid
  • gk-icon-cheeseburger
  • gk-icon-cheeseburger-solid
  • gk-icon-clock
  • gk-icon-clock-solid

Restaurant description

Restaurant description

It is another Custom HTML module which uses the following code:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lobortis dictum elit eu placerat. Nullam vel pellentesque tortor, nec ornare enim. Praesent vehicula dapibus diam non porttitor. Etiam vel elit ante. Phasellus eleifend sollicitudin odio a varius. Donec sit amet lacinia velit, ut dignissim diam. Aliquam erat volutpat. </p>

<p class="gk-avatar">
<img src="/images/demo/chef_avatar.jpg" alt="" />
<strong>Robert, Chef cook</strong>
</p>

<img src="/images/demo/restaurant_left_bg.jpg" alt="" data-scroll-reveal="enter left over .5s" class="gk-description-left-img" />
<img src="/images/demo/restaurant_right_bg.jpg" alt="" data-scroll-reveal="enter right over .5s after .25s" class="gk-description-right-img" />

The above module uses also the bigtitle and gk-description module suffixes.

Elements with classes gk-description-left-img and gk-description-right-img are used for generating custom images on the left and right side of the description.

Special section

Special section

As two previous modules this section also is a Custom HTML module. It has assigned the parallax suffix with custom background-image. The module uses the following code:

<div class="bigtitle gk-special">
<figure data-scroll-reveal="enter left over .5s">
<img src="/images/demo/banner_special.jpg" alt="Summer Grill">
<figcaption data-scroll-reveal="enter bottom over .5s after .5s">
<h3><span>Summer</span> Grill</h3>
<small>Starting from <strong>$19.99</strong></small>
</figcaption>
</figure>
<div class="gk-special-content" data-scroll-reveal="enter right over .5s">
<h3 class="header">
<span>Special</span>
<small>Check out our offers</small>
</h3>

<ul class="gk-special-menu">
<li data-scroll-reveal="enter bottom over .25s after .5s"><h4>New York Strip Steak</h4><strong>$8.99</strong></li>
<li data-scroll-reveal="enter bottom over .25s after .8s"><h4>New York Strip Steak</h4><strong>$8.99</strong></li>
<li data-scroll-reveal="enter bottom over .25s after .6s"><h4>Porterhouse Steak</h4><strong>$6.49</strong></li>
<li data-scroll-reveal="enter bottom over .25s after .9s"><h4>Porterhouse Steak</h4><strong>$6.49</strong></li>
<li data-scroll-reveal="enter bottom over .25s after .7s"><h4>Salisbury Steak</h4><strong>$8.99</strong></li>
<li data-scroll-reveal="enter bottom over .25s after 1s"><h4>Salisbury Steak</h4><strong>$8.99</strong></li>
</ul>
</div>
</div>
<a href="#" class="gk-special-link button">More details</a>

Please remember that items in the gk-special-menu have 50% width so the order of the items is a little bit different than in the list.

Menu

Menu

Next section which uses the Custom HTML module - in this case with gk-menu and bigtitle module suffixes. The menu structure uses the following code:

<div class="gkCols" data-cols="3">
<div>
<h3 data-scroll-reveal="enter top over .5s after .5s">Prime Steaks</h3>
<dl data-scroll-reveal="enter bottom over .5s after .5s">
<dt>Chili</dt> 
<dd><small>chilli infused vanilla vodka, passion fruit</small><strong>$14.49</strong></dd>
<dt>SPARKLING PEAR</dt>
<dd><small>pear vodka, elderflower, champagne</small><strong>$21.00</strong></dd>
<dt>ESPRESSO</dt>
<dd><small>vodka, Frangelico, Kahlua, espresso</small><strong>$8.99</strong></dd>
<dt>LYCHEE</dt>
<dd><small>gin, vodka, lychee liqueur, lime</small><strong>$9.99</strong></dd>
<dt>WHISPERING TED</dt>
<dd><small>vodka, Zubrowka, Krupnik, apple juice</small><strong>$8.99</strong></dd>
</dl>
</div>
<div>
<h3 data-scroll-reveal="enter top over .5s after .75s">Drinks & Wines</h3>
<dl data-scroll-reveal="enter bottom over .5s after .75s">
<dt>Chili</dt> 
<dd><small>chilli infused vanilla vodka, passion fruit</small><strong>$14.49</strong></dd>
<dt>SPARKLING PEAR</dt>
<dd><small>pear vodka, elderflower, champagne</small><strong>$21.00</strong></dd>
<dt>ESPRESSO</dt>
<dd><small>vodka, Frangelico, Kahlua, espresso</small><strong>$8.99</strong></dd>
<dt>LYCHEE</dt>
<dd><small>gin, vodka, lychee liqueur, lime</small><strong>$9.99</strong></dd>
<dt>WHISPERING TED</dt>
<dd><small>vodka, Zubrowka, Krupnik, apple juice</small><strong>$8.99</strong></dd>
</dl>
</div>
<div>
<h3 data-scroll-reveal="enter top over .5s after 1s">Soups & Salads</h3>
<dl data-scroll-reveal="enter bottom over .5s after 1s">
<dt>Chili</dt> 
<dd><small>chilli infused vanilla vodka, passion fruit</small><strong>$14.49</strong></dd>
<dt>SPARKLING PEAR</dt>
<dd><small>pear vodka, elderflower, champagne</small><strong>$21.00</strong></dd>
<dt>ESPRESSO</dt>
<dd><small>vodka, Frangelico, Kahlua, espresso</small><strong>$8.99</strong></dd>
<dt>LYCHEE</dt>
<dd><small>gin, vodka, lychee liqueur, lime</small><strong>$9.99</strong></dd>
<dt>WHISPERING TED</dt>
<dd><small>vodka, Zubrowka, Krupnik, apple juice</small><strong>$8.99</strong></dd>
</dl>
</div>
</div>
<div class="gk-menu-button"><span><a href="/index.php/menu" class="button">Discover menu</a></span></div>

<img src="/templates/steakhouse/images/demo/menu_left_bg.jpg" alt=""  data-scroll-reveal="enter left over .5s" class="gk-menu-left-img">
<img src="/templates/steakhouse/images/demo/menu_right_bg.jpg" alt=""  data-scroll-reveal="enter top over .5s after .25s" class="gk-menu-right-img">

As you can see it uses the gkCols structure with data-cols attribute. The structure of the gkCols is following:

<div class="gkCols" data-cols="AMOUNT">
<div>1ST COLUMN CONTENT</div>
<div>2ND COLUMN CONTENT</div>
<div>3RD COLUMN CONTENT</div>
...
</div>

Similarly to the restaurant description section we are using in this area two images on the left and right side - with classes gk-menu-left-img and gk-menu-right-img.

Reservation

Testimonials

This area is a testimonials area generated from the Custom HTML module with bigtitle module suffix and the following code:

<div class="gk-testimonials" data-amount="3">
<div>
<div>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lobortis dictum elit eu placerat. Nullam vel pellentesque tortor, nec ornare enim. Praesent vehicula dapibus diam non porttitor. Etiam vel elit ante. Phasellus eleifend sollicitudin odio a varius. Donec sit amet lacinia velit, ut dignissim diam. Aliquam erat volutpat.</p>
<strong>Garland Noah</strong>
</blockquote>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lobortis dictum elit eu placerat. Nullam vel pellentesque tortor, nec ornare enim. Praesent vehicula dapibus diam non porttitor. Etiam vel elit ante. Phasellus eleifend sollicitudin odio a varius. Donec sit amet lacinia velit, ut dignissim diam. Aliquam erat volutpat.</p>
<strong>Garland Noah</strong>
</blockquote>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lobortis dictum elit eu placerat. Nullam vel pellentesque tortor, nec ornare enim. Praesent vehicula dapibus diam non porttitor. Etiam vel elit ante. Phasellus eleifend sollicitudin odio a varius. Donec sit amet lacinia velit, ut dignissim diam. Aliquam erat volutpat.</p>
<strong>Garland Noah</strong>
</blockquote>
</div>
</div>

<a href="/index.php/reservation" class="button button-border">Make reservation</a>
</div>

Script generates the pagination and arrows automatically. It is important to set the data-amount attribute to a value which is equal number of the blockquote elements in the gk-testimonials block.

Blog grid

Blog grid

Blog grid is an area which uses the News Show Pro GK5 module with Grid News portal mode. The module has also the bigtitle and parallax module suffixes.

Big icon

Big icon

This small module uses the Custom HTML module with big-icon module suffix and the following code:

<i class="gk-icon-phone"></i>
<a href="tel:#">+123-456-789-12</a>

The big-icon suffix creates from the i element the big icon in the background.

Newsletter

Newsletter

It is a small Custom HTML module with the newsletter module suffix and the following code:

<form action="#">
<input type="email" placeholder="Enter your e-mail..." name="email" />
<input type="submit" value="Submit" />
</form>

Map

Map

It is probably most complex Custom HTML module on the frontpage. It uses the map, bigtitle and contact-form module suffixes.

The module structure is based on the following code:

<div class="gk-map" data-latitude="-34.397" data-longitude="150.644" data-zoom="8" data-ui="yes"></div>
<div class="gk-over-map gkCols" data-cols="2">
<div data-scroll-reveal="enter left over .5s">
<h3>Contact Form</h3>
{GKCONTACT}
</div>
<div class="contact-form-info"  data-scroll-reveal="enter right over .5s">
<h3>Information</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lobortis dictum elit eu placerat. Nullam vel pellentesque tortor, nec ornare enim. Phasellus lobortis dictum elit.</p>

<address>
<strong>Address</strong>
<p>Steak House<br />
South Place Street, Chicago, CH 123456<br />
Chicago 00-000, USA</p>
<a href="https://www.google.com/maps/place/Calgary,+Alberta,+Kanada/@51.013117,-114.0741555,11z/" class="gk-locate"><i class="gk-icon-map-path-solid"></i>Locate Us</a>
</address>
</div>
</div>

There are few important elements in the above code:

<div class="gk-map" data-latitude="-34.397" data-longitude="150.644" data-zoom="8" data-ui="yes"></div>

This is a code responsible for creating the background map. The data attributes specifies the location (based on the latitude and longitude), map zoom and usage of the map interface (data-ui attribute).

The map is hidden under the overlay area created by the element with gk-over-map class (which additionally uses the previously mentioned gkCols feature).

In the first column of the map overlay there is a {GKCONTACT} string which is replaced by the GK Contact plugin for a contact form which can be configured under the plugin manager in the plugin settings (it is possible to hide some fields and also specify the recipents of the messages).

Please remember that you have to enable the reCAPTCHA plugin and configure it, before enabling it in the GK Contact plugin!

The second column contains the address data and a special button which triggers the map to display as overlay:

<a href="https://www.google.com/maps/place/Calgary,+Alberta,+Kanada/@51.013117,-114.0741555,11z/" class="gk-locate"><i class="gk-icon-map-path-solid"></i>Locate Us</a>

The above code will create a button which will activate the map. The href attribute is set optionally for the case when the button will be clicked before the JavaScript code will load.

Template features

This article describes the Steakhouse template additional features.

One-page layout for articles

While creating a menu item it is possible to select two non-standard menu item types - one-page layout and one-page wide layout:

One-page menu item type

Thanks to these two additional layouts it is possible to create pages which will look like the below page:

One-page layout

The above page uses standard one-page layout. The header is created from the article title (use two underscores to create the second line in the title). Background of the header is created from the article full image.

The one-page wide layout is very similar to the one-page layout one, but it offers wider area for the article.

It is also possible to use narrower module positions - in this case please assign the narrow-page suffix for the menu item with the specific article.

Menu subpage

Menu subpage

The above subpage uses the one-page wide layout and the following code:

<div class="gk-menu-container">
<img src="images/demo/menu_main_image.jpg" alt="Steaks menu" />

<div class="gkCols" data-cols="2">
<div>
<h3>Prime Steaks</h3>
<dl>
<dt>Chili</dt> 
<dd><small>chilli infused vanilla vodka, passion fruit</small><strong>$14.49</strong></dd>
<dt>SPARKLING PEAR</dt>
<dd><small>pear vodka, elderflower, champagne</small><strong>$21.00</strong></dd>
<dt>ESPRESSO</dt>
<dd><small>vodka, Frangelico, Kahlua, espresso</small><strong>$8.99</strong></dd>
<dt>LYCHEE</dt>
<dd><small>gin, vodka, lychee liqueur, lime</small><strong>$9.99</strong></dd>
<dt>WHISPERING TED</dt>
<dd><small>vodka, Zubrowka, Krupnik, apple juice</small><strong>$8.99</strong></dd>
</dl>
</div>
<div>
<h3>Prime Steaks</h3>
<dl>
<dt>Chili</dt> 
<dd><small>chilli infused vanilla vodka, passion fruit</small><strong>$14.49</strong></dd>
<dt>SPARKLING PEAR</dt>
<dd><small>pear vodka, elderflower, champagne</small><strong>$21.00</strong></dd>
<dt>ESPRESSO</dt>
<dd><small>vodka, Frangelico, Kahlua, espresso</small><strong>$8.99</strong></dd>
<dt>LYCHEE</dt>
<dd><small>gin, vodka, lychee liqueur, lime</small><strong>$9.99</strong></dd>
<dt>WHISPERING TED</dt>
<dd><small>vodka, Zubrowka, Krupnik, apple juice</small><strong>$8.99</strong></dd>
</dl>
</div>
</div>
<section>
<header class="bigtitle">
<img src="images/demo/menu_drinks.jpg" alt="Drinks menu" />
<h3 class="header">
<span>Drinks</span>
<small>Discover our menu</small>
</h3>
</header>

<div class="gkCols" data-cols="2">
<div>
<h3>Prime Steaks</h3>
<dl>
<dt>Chili</dt> 
<dd><small>chilli infused vanilla vodka, passion fruit</small><strong>$14.49</strong></dd>
<dt>SPARKLING PEAR</dt>
<dd><small>pear vodka, elderflower, champagne</small><strong>$21.00</strong></dd>
<dt>ESPRESSO</dt>
<dd><small>vodka, Frangelico, Kahlua, espresso</small><strong>$8.99</strong></dd>
<dt>LYCHEE</dt>
<dd><small>gin, vodka, lychee liqueur, lime</small><strong>$9.99</strong></dd>
<dt>WHISPERING TED</dt>
<dd><small>vodka, Zubrowka, Krupnik, apple juice</small><strong>$8.99</strong></dd>
</dl>
</div>
<div>
<h3>Prime Steaks</h3>
<dl>
<dt>Chili</dt> 
<dd><small>chilli infused vanilla vodka, passion fruit</small><strong>$14.49</strong></dd>
<dt>SPARKLING PEAR</dt>
<dd><small>pear vodka, elderflower, champagne</small><strong>$21.00</strong></dd>
<dt>ESPRESSO</dt>
<dd><small>vodka, Frangelico, Kahlua, espresso</small><strong>$8.99</strong></dd>
<dt>LYCHEE</dt>
<dd><small>gin, vodka, lychee liqueur, lime</small><strong>$9.99</strong></dd>
<dt>WHISPERING TED</dt>
<dd><small>vodka, Zubrowka, Krupnik, apple juice</small><strong>$8.99</strong></dd>
</dl>
</div>
</div>
</section>

<section>
<header class="bigtitle">
<img src="images/demo/menu_salad.jpg" alt="Salads menu" />
<h3 class="header">
<span>Salads</span>
<small>Discover our menu</small>
</h3>
</header>

<div class="gkCols" data-cols="2">
<div>
<h3>Prime Steaks</h3>
<dl>
<dt>Chili</dt> 
<dd><small>chilli infused vanilla vodka, passion fruit</small><strong>$14.49</strong></dd>
<dt>SPARKLING PEAR</dt>
<dd><small>pear vodka, elderflower, champagne</small><strong>$21.00</strong></dd>
<dt>ESPRESSO</dt>
<dd><small>vodka, Frangelico, Kahlua, espresso</small><strong>$8.99</strong></dd>
<dt>LYCHEE</dt>
<dd><small>gin, vodka, lychee liqueur, lime</small><strong>$9.99</strong></dd>
<dt>WHISPERING TED</dt>
<dd><small>vodka, Zubrowka, Krupnik, apple juice</small><strong>$8.99</strong></dd>
</dl>
</div>
<div>
<h3>Prime Steaks</h3>
<dl>
<dt>Chili</dt> 
<dd><small>chilli infused vanilla vodka, passion fruit</small><strong>$14.49</strong></dd>
<dt>SPARKLING PEAR</dt>
<dd><small>pear vodka, elderflower, champagne</small><strong>$21.00</strong></dd>
<dt>ESPRESSO</dt>
<dd><small>vodka, Frangelico, Kahlua, espresso</small><strong>$8.99</strong></dd>
<dt>LYCHEE</dt>
<dd><small>gin, vodka, lychee liqueur, lime</small><strong>$9.99</strong></dd>
<dt>WHISPERING TED</dt>
<dd><small>vodka, Zubrowka, Krupnik, apple juice</small><strong>$8.99</strong></dd>
</dl>
</div>
</div>
</section>
</div>

Gallery subpage

Gallery subpage

The gallery subpage can be used for creating an article with the following popup effect:

Gallery popup

This effect is created thanks to the following structure:

<figure class="gk-photo gk-photo-left">
<a href="/images/demo/gallery1.jpg"><img src="/images/demo/gallery_thumb1.jpg" alt="Gallery Thumb I" /></a>
<figcaption>
<h3>Risus Ullamcorper Mollis</h3>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Cras justo odio, dapibus ac facilisis in, egestas eget quam. </p>
</figcaption>
</figure>

The position of the image can be changed by replacing the gk-photo-left class to gk-photo-right (image on the right side) or gk-photo-center (image over the text) class.

It is important to put in the href attribute of the link the full-size version of the thumbnail.

Contact subpage

Contact subpage

It is a standard Joomla! single contact page with small improvement: if the Other information block contains the map code like the below one:

<div class="gk-map static" data-latitude="-34.397" data-longitude="150.644" data-ui="yes" data-zoom="8"></div>

Then the map is displayed under the contact title. The map code is very similar to the map code used on the frontpage with one difference - in this case the map container has also the static CSS class.

Reservation subpage

Reservation subpage

The above page uses the one-page layout and the following code:

<h2>Online Reservation</h2>
<p class="gk-subtitle">Please complete the submission form below to make a reservation.</p>

{GKRESERVATION}

The {GKRESERVATION} string is replaced by the GK Reservation plugin.

Reservation plugin

It is a simple plugin - very similar to the GK Contact plugin. It generates a reservation form from the {GKRESERVATION} string in the article and it sends an e-mail with the reservation details based on the form input.

Every form element can be disabled:

GK Reservation Config - Tab I

It is possible to add short text under the form and specify the e-mail recipent:

GK Reservation Config - Tab II

Please remember that you have to enable the reCAPTCHA plugin and configure it, before enabling it in the GK Reservation plugin!

Page Break

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin posuere nisi quis odio egestas non tempus est sollicitudin. Nulla facilisi. Pellentesque tempus suscipit nulla sed tempor. Phasellus et lorem id libero fermentum molestie sit amet sit amet mi. Quisque ultrices, neque et laoreet dictum, arcu sapien pulvinar odio, in aliquam mi dui eu leo. Nullam posuere, arcu et egestas fermentum, enim purus fermentum diam, quis porta mauris lectus ut odio. In tincidunt dapibus malesuada. Integer a lorem ligula. In tincidunt augue eget velit convallis nec pharetra eros tincidunt. Maecenas et tortor libero, vel malesuada est.

Quisque magna tellus, condimentum a porttitor eu, fermentum nec enim. Aenean et erat nec lectus adipiscing auctor. Sed tellus sapien, condimentum eget tristique ac, faucibus sed nisi. Curabitur pretium porta pulvinar. Integer cursus venenatis dictum. Morbi massa est, ultricies ut ultrices vitae, hendrerit vitae tellus. Duis a nulla quis tellus lacinia tristique.



Quisque magna tellus, condimentum a porttitor eu, fermentum nec enim. Aenean et erat nec lectus adipiscing auctor. Sed tellus sapien, condimentum eget tristique ac, faucibus sed nisi. Curabitur pretium porta pulvinar. Integer cursus venenatis dictum. Morbi massa est, ultricies ut ultrices vitae, hendrerit vitae tellus. Duis a nulla quis tellus lacinia tristique.

Donec libero urna, cursus vitae sollicitudin sit amet, elementum et massa. Donec feugiat, turpis a dictum vulputate, dui diam faucibus nunc, ac sodales augue magna id augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sit amet nisi felis. Morbi faucibus nunc id elit aliquam ac condimentum leo laoreet. Sed nec risus sed nulla mattis volutpat in eget diam. In leo nisl, eleifend vel lobortis vel, tincidunt a ligula. Nulla placerat gravida laoreet. In lobortis, ligula in sagittis pellentesque, orci magna venenatis neque, eu sagittis lacus ante et tellus. Morbi vel semper augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam erat volutpat.