Menu

Over ons

JaZZonnemaire

 

JaZZonnemaire is de combinatie van muziek, zon en een culinair hoogstandje hier en daar zal hét recept zijn voor een fantastische dag.

Jong, oud, jazzkenner of niet, muziek liefhebber, iedereen is van harte welkom! Naast de heerlijke jazzmuziek zult u kunnen genieten van diverse kraampjes met ‘jazz-food’ denk aan overheerlijke cocktails tot bijzondere pizza’s, niets is te gek tijdens deze dag.


* For parties larger than 20, please contact us at (00) 123-456-789

Our menu

Steaks menu

Prime Steaks

Chili
chilli infused vanilla vodka, passion fruit$14.49
SPARKLING PEAR
pear vodka, elderflower, champagne$21.00
ESPRESSO
vodka, Frangelico, Kahlua, espresso$8.99
LYCHEE
gin, vodka, lychee liqueur, lime$9.99
WHISPERING TED
vodka, Zubrowka, Krupnik, apple juice$8.99

Prime Steaks

Chili
chilli infused vanilla vodka, passion fruit$14.49
SPARKLING PEAR
pear vodka, elderflower, champagne$21.00
ESPRESSO
vodka, Frangelico, Kahlua, espresso$8.99
LYCHEE
gin, vodka, lychee liqueur, lime$9.99
WHISPERING TED
vodka, Zubrowka, Krupnik, apple juice$8.99
Drinks menu

DrinksDiscover our menu

Prime Steaks

Chili
chilli infused vanilla vodka, passion fruit$14.49
SPARKLING PEAR
pear vodka, elderflower, champagne$21.00
ESPRESSO
vodka, Frangelico, Kahlua, espresso$8.99
LYCHEE
gin, vodka, lychee liqueur, lime$9.99
WHISPERING TED
vodka, Zubrowka, Krupnik, apple juice$8.99

Prime Steaks

Chili
chilli infused vanilla vodka, passion fruit$14.49
SPARKLING PEAR
pear vodka, elderflower, champagne$21.00
ESPRESSO
vodka, Frangelico, Kahlua, espresso$8.99
LYCHEE
gin, vodka, lychee liqueur, lime$9.99
WHISPERING TED
vodka, Zubrowka, Krupnik, apple juice$8.99
Salads menu

SaladsDiscover our menu

Prime Steaks

Chili
chilli infused vanilla vodka, passion fruit$14.49
SPARKLING PEAR
pear vodka, elderflower, champagne$21.00
ESPRESSO
vodka, Frangelico, Kahlua, espresso$8.99
LYCHEE
gin, vodka, lychee liqueur, lime$9.99
WHISPERING TED
vodka, Zubrowka, Krupnik, apple juice$8.99

Prime Steaks

Chili
chilli infused vanilla vodka, passion fruit$14.49
SPARKLING PEAR
pear vodka, elderflower, champagne$21.00
ESPRESSO
vodka, Frangelico, Kahlua, espresso$8.99
LYCHEE
gin, vodka, lychee liqueur, lime$9.99
WHISPERING TED
vodka, Zubrowka, Krupnik, apple juice$8.99

Our menu (2)

Main dishes

Main Dishes

Lemon Chicken (Gluten-Free)
$ 30.00
Sweet & Sour Chicken
$ 25.00
Stir Fried Teriyaki Chicken
$ 80.00
Basil Shrimp
$ 45.00
Yu Shange Scallop
$ 66.00
Basil Shrimp
$ 45.00
Yu Shange Scallop
$ 66.00
Yu Shange Scallop
$ 66.00
Lemon Chicken
$ 30.00
Sweet & Sour Chicken
$ 25.00
Basil Shrimp
$ 45.00
Stir Fried Teriyaki Chicken
$ 80.00
Basil Shrimp
$ 45.00
Yu Shange Scallop
$ 66.00

Desserts

Lemon Chicken (Gluten-Free)
$ 30.00
Sweet & Sour Chicken
$ 25.00
Stir Fried Teriyaki Chicken
$ 80.00
Basil Shrimp
$ 45.00
Yu Shange Scallop
$ 66.00
Basil Shrimp
$ 45.00
Yu Shange Scallop
$ 66.00
Yu Shange Scallop
$ 66.00
Lemon Chicken
$ 30.00
Sweet & Sour Chicken
$ 25.00
Basil Shrimp
$ 45.00
Stir Fried Teriyaki Chicken
$ 80.00
Basil Shrimp
$ 45.00
Yu Shange Scallop
$ 66.00
Desserts
Drinks

Drinks

Lemon Chicken (Gluten-Free)
$ 30.00
Sweet & Sour Chicken
$ 25.00
Stir Fried Teriyaki Chicken
$ 80.00
Basil Shrimp
$ 45.00
Yu Shange Scallop
$ 66.00
Basil Shrimp
$ 45.00
Yu Shange Scallop
$ 66.00
Yu Shange Scallop
$ 66.00
Lemon Chicken
$ 30.00
Sweet & Sour Chicken
$ 25.00
Basil Shrimp
$ 45.00
Stir Fried Teriyaki Chicken
$ 80.00
Basil Shrimp
$ 45.00
Yu Shange Scallop
$ 66.00

PhotoSwipe configuration

The v.1.0.1 version of the Quark template introduces support for the PhotoSwipe gallery.

Demo gallery is available here.

In order to create the gallery, you will need to use a special structure based on the gk-cols structure enhanced by few elements:

<div class="gk-cols gk-gallery" data-cols="3">
<div>
CONTENT OF THE FIRST COLUMN
</div>
<div>
CONTENT OF THE SECOND COLUMN
</div>
<div>
CONTENT OF THE THIRD COLUMN
</div>
</div>

In the above code the structure of the gk-cols is different due adding additional CSS class - gk-gallery. This class is necessary for the PhotoSwipe script.

The content of the columns is generated by adding following links:

<a 
   href="/images/demo/gallery/image1.jpg" 
   data-size="1280x1280" 
   data-title="Modern clock" 
   data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."
>
   <img src="/images/demo/gallery/thumb1.jpg" alt="Thumbnail I" />
</a>

Every link contains few important elements:

  • Url to the full image in the href attribute.
  • Thumbnail image as the img tag inside the link.
  • Dimensions of the full image in the data-size attribute of the link.
  • Title of the slide (optional) as the data-title attribute of the link.
  • Description of the slide (optional) as the data-desc attribute of the link.

Full gallery code is visible below:

<div class="gk-cols gk-gallery" data-cols="3">
<div>
<a href="/images/demo/gallery/image1.jpg" data-size="1280x1280" data-title="Modern clock" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="/images/demo/gallery/thumb1.jpg" alt="Thumbnail I" /></a>
<a href="/images/demo/gallery/image2.jpg" data-size="1280x853" data-title="Painting love" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="/images/demo/gallery/thumb2.jpg" alt="Thumbnail II" /></a>
<a href="/images/demo/gallery/image3.jpg" data-size="1164x872" data-title="Green Barrel" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="/images/demo/gallery/thumb3.jpg" alt="Thumbnail III" /></a>
<a href="/images/demo/gallery/image4.jpg" data-size="1280x853" data-title="Wooden doors" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="/images/demo/gallery/thumb4.jpg" alt="Thumbnail IV" /></a>
<a href="/images/demo/gallery/image5.jpg" data-size="852x1280" data-title="Japanese dinner" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="/images/demo/gallery/thumb5.jpg" alt="Thumbnail V" /></a>
</div>
<div>
<a href="/images/demo/gallery/image6.jpg" data-size="853x1280" data-title="Photography art" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="/images/demo/gallery/thumb6.jpg" alt="Thumbnail VI" /></a>
<a href="/images/demo/gallery/image7.jpg" data-size="1280x853" data-title="Sailing in the fog" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="/images/demo/gallery/thumb7.jpg" alt="Thumbnail VII" /></a>
<a href="/images/demo/gallery/image8.jpg" data-size="1280x853" data-title="Travel time" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="/images/demo/gallery/thumb8.jpg" alt="Thumbnail VIII" /></a>
<a href="/images/demo/gallery/image9.jpg" data-size="960x1280" data-title="For ged" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="/images/demo/gallery/thumb9.jpg" alt="Thumbnail IX" /></a>
<a href="/images/demo/gallery/image10.jpg" data-size="1280x853" data-title="Summer time" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="/images/demo/gallery/thumb10.jpg" alt="Thumbnail X" /></a>
</div>
<div>
<a href="/images/demo/gallery/image11.jpg" data-size="1280x853" data-title="Mobile music" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="/images/demo/gallery/thumb11.jpg" alt="Thumbnail XI" /></a>
<a href="/images/demo/gallery/image12.jpg" data-size="1155x1280" data-title="Guitar artist" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="/images/demo/gallery/thumb12.jpg" alt="Thumbnail XII" /></a>
<a href="/images/demo/gallery/image13.jpg" data-size="873x1280" data-title="Typewriter" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="/images/demo/gallery/thumb13.jpg" alt="Thumbnail XIII" /></a>
<a href="/images/demo/gallery/image14.jpg" data-size="1280x853" data-title="Morning coffee" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="/images/demo/gallery/thumb14.jpg" alt="Thumbnail XIV" /></a>
<a href="/images/demo/gallery/image15.jpg" data-size="1280x848" data-title="Fitness time" data-desc="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit."><img src="/images/demo/gallery/thumb15.jpg" alt="Thumbnail XV" /></a>
</div>
</div>

Gallery Showcase

This item was created only for creating a menu item purpose.

How to create our team page?

The our team page contains few elements not described in the other articles.

Hiring offers

Code for the above module is following:

<div class="gk-desc">
<h2>We are hiring</h2>
<dl>
<dt data-sr="enter bottom and move 50px" >Project Manager</dt>
<dd data-sr="enter bottom and move 50px wait .2s"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit. Ut varius purus lectus, a pharetra mi blandit at. Integer ante leo, iaculis ut odio sit amet, dignissim pretium quam.</p><a href="#">Apply</a></dd>
<dt data-sr="enter bottom and move 50px wait .5s">Support Engineer</dt>
<dd data-sr="enter bottom and move 50px wait .7s"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consectetur dui at tempor elementum. Aenean convallis metus nec nibh varius hendrerit. Ut varius purus lectus, a pharetra mi blandit at. Integer ante leo, iaculis ut odio sit amet, dignissim pretium quam.</p><a href="#">Apply</a></dd>
</dl>
</div>

Text and parallax photo

Above module uses the following code:

<div class="gk-big-text">
<h2 data-sr="enter top and move 50px" >Everything is designed <br />Few things are designed well</h2>
<small data-sr="enter bottom and move 50px">Our philosophy</small>
</div>

It is a module with big-spaces parallax-bg suffixes and background-image.

Logotypes

This module uses below HTML code:

<div class="gk-desc">
<p><em>We've been featured in the press by these great websites</em></p>
<p>
<img src="/images/demo/logo1.jpg" alt="Logo I" data-sr="enter bottom and move 50px wait .2s" />
<img src="/images/demo/logo2.jpg" alt="Logo II" data-sr="enter bottom and move 50px wait .3s" />
<img src="/images/demo/logo3.jpg" alt="Logo III" data-sr="enter bottom and move 50px wait .4s" />
<img src="/images/demo/logo4.jpg" alt="Logo IV" data-sr="enter bottom and move 50px wait .5s" />
<img src="/images/demo/logo5.jpg" alt="Logo V" data-sr="enter bottom and move 50px wait .6s" />
</p>
</div>
×
×

Log in