availability.html

---
layout: default
title: "Your Holiday Dream House"
description: ""
handle: availability
---

{% include navigation.html %}

<section class="section-gray navigation-margin">
  <div class="grid grid-centered">
    <div class="grid-cell is-centered">
      <div class="section-intro fade-in">
        <h2>Prices</h2>
        <p>Prices are fixed, no matter how many guests are staying. Low season prices can be adapted to the number of guests on request. In the calendar below you can see what weeks are available.</p>
      </div>
    </div>
    <div class="grid-cell with-3col">
      <div class="container-price fade-in">
        <h3>Peak</h3>
        <p>27th June to 28th August</p>
        <h2>
          € 3995
          <span>/week</span>
        </h2>
      </div>
    </div>
    <div class="grid-cell with-3col">
      <div class="container-price fade-in">
        <h3>High</h3>
        <p>30th May to 26th June and 29th August to 4th September</p>
        <h2>
          € 3500
          <span>/week</span>
        </h2>
      </div>
    </div>
    <div class="grid-cell with-3col">
      <div class="container-price fade-in">
        <h3>Mid</h3>
        <p>2nd May to 29th May and 5th September to 16th October</p>
        <h2>
          € 1900
          <span>/week</span>
        </h2>
      </div>
    </div>
    <div class="grid-cell with-3col">
      <div class="container-price is-last fade-in">
        <h3>Low</h3>
        <p>All other dates excluding Christmas and New Year</p>
        <h2>
          On demand
          <span>/week</span>
        </h2>
      </div>
    </div>
  </div>
  <div class="grid grid-centered">
    <div class="grid-cell">
      <div class="container-calendar fade-in">
        <div class="btn-group">
          <button class="btn btn-primary button button-default" data-calendar-nav="prev"><</button>
          <button class="btn btn-default button button-default" data-calendar-nav="today">Today</button>
          <button class="btn btn-primary button button-default" data-calendar-nav="next">></button>
        </div>

        <h3 id="calendar-date" class="container-calendar-title"></h3>
        <div id="calendar"></div>
        <div class="container-calendar-legend">
          <div class="legend">
            <span></span>
            <p>Indicates a reservation</p>
          </div>
          <div class="legend is-booking">
            <span></span>
            <p>Indicates a booking</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>