<header>
    <div class="dso-logo-bar">
        <img src="../../images/omgevingsloket.png" alt="Omgevingsloket" class="logo" />
        <div class="dso-tools-bar">
            <div class="dso-login">
                <a href="">
                    <span class="login-icon" aria-hidden="true"></span>
                    Inloggen
                </a>
            </div>
        </div>
    </div>
    <nav class="dso-navbar">
        <div class="dso-navbar-header">
            <button type="button" class="dso-navbar-toggle">
                <span class="fas fa-bars" aria-hidden="true"></span>
                <span class="sr-only">Ga naar menu</span>
            </button>
        </div>
        <ul class="dso-nav dso-nav-main">
            <li>
                <a href="#">
                    Home
                </a>
            </li>
            <li>
                <a href="#">
                    Vergunningcheck
                </a>
            </li>
            <li>
                <a href="#">
                    Aanvragen
                </a>
            </li>
            <li class="dso-active">
                <a href="#">
                    Regels op de kaart
                </a>
            </li>
            <li>
                <a href="#">
                    Mijn Omgevingsloket
                </a>
            </li>
        </ul>
    </nav>
    <ol class="breadcrumb">
        <li>
            <a href="#">Home</a>
        </li>
        <li class="active">Checken</li>
    </ol>
</header>

<main>
    <div class="row dso-banner dso-banner-implementation-specific-image" style="background-image: url('../../dummy/images/hero.png')">
        <!-- @Developers: Voeg dus geen inline styling toe maar genereer de betreffende styling in een class, zoals bv. `.dso-banner-implementation-specific image`. Inline styling doet het niet goed bij de Webrichtlijnen -->
        <div class="col-lg-6 col-sm-8">
            <div class="dso-highlight-box dso-white">
                <div class="dso-rich-content">
                    <h1>Direct een aanvraag of melding indienen</h1>
                    <p>Weet u al voor welke activiteiten u een vergunning moet aanvragen of een melding moet doen?</p>
                    <p>
                        <a href="#" class="btn btn-primary">Start met aanvragen</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-8">
            <div class="dso-highlight-box dso-yellow">
                <div class="dso-rich-content">
                    <h2>Vul uw aanvraag zo compleet mogelijk in</h2>
                    <p>Zo voorkomt u dat uw aanvraag vertraging oploopt. Er zijn slechts een aantal vragen verplicht, maar om uw aanvraag in behandeling te kunnen nemen moeten er voldoende gegevens over uw activiteit(en) bekend zijn. Welke dat zijn is in elke situatie anders. Controleer daarom extra op de volledigheid van uw aanvraag.</p>
                </div>
            </div>
            <br><!-- Is dit de bedoeling? -->
            <div class="dso-rich-content">
                <h2>Proefverzoek</h2>
                <p>Ben u niet zeker over uw aanvraag? Vraag u zich bijvoorbeeld af of die extra meter voor de aanbouw wel mag? Dan kunt u gebruik maken van een proefverzoek. Door uw aanvraag in te dienen als proefverzoek kunt u samen met de gemeente, waterschap of provincie kijken wat er nodig is voor een passende vergunning of melding van iw activiteit(en).</p>
                <p><em>Let op, bekijk altijd eerst de website van uw gemeente, waterschap of provincie voor de beschikbaarheid en mgelijke kosten van een proefverzoek.</em></p>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="dso-highlight-box dso-border dso-white">
                <div class="dso-rich-content">
                    <h2>Vragen?</h2>
                    <h3>Bel 088 - 79 70 790</h3>
                    <p>Bereikbaar op werkdagen van 9.00-12.00 uur en van 13.00-16.30 uur. Kijk op de website <a href="#">www.aandeslagmetdeomgevingswet.nl</a> of neem <a href="#">contact</a> met ons op.</p>
                </div>
            </div>
        </div>
    </div>
    <div class="row dso-featured">
        <div class="col-xs-12">
            <h2>De stappen</h1>

                <div class="row">
                    <div class="col-md-3 col-sm-6">
                        <div class="highlight-box dso-white dso-drop-shadow dso-has-counter">
                            <div class="dso-step-counter">
                                1
                            </div>
                            <div class="dso-rich-content">
                                <h3>Project aanmaken</h3>
                                <p>Maak eerst een project aan. Deze vindt u daarna terug in <a href="#">Mijn omgevingsloket</a>.</p>
                            </div>

                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="highlight-box dso-white dso-drop-shadow dso-has-counter">
                            <div class="dso-step-counter">
                                2
                            </div>
                            <div class="dso-rich-content">
                                <h3>Locatie</h3>
                                <p>Kies de locatie voor uw bouwactiviteit(en).</p>
                            </div>

                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="highlight-box dso-white dso-drop-shadow dso-has-counter">
                            <div class="dso-step-counter">
                                3
                            </div>
                            <div class="dso-rich-content">
                                <h3>Activiteiten</h3>
                                <p>Kies de activiteiten van uw project. Wanneer u een aanvraag start vanuit de vergunningscheck worden deze vooringevuld.</p>
                            </div>

                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="highlight-box dso-white dso-drop-shadow dso-has-counter">
                            <div class="dso-step-counter">
                                4
                            </div>
                            <div class="dso-rich-content">
                                <h3>Vragen beantwoorden</h3>
                                <p>Beantwoord alle vragen die nodig zijn voor uw aanvraag. Vragen die in uw situatie niet meer relevant zijn vallen vanzelf weg.</p>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-3 col-sm-6">
                        <div class="highlight-box dso-white dso-drop-shadow dso-has-counter">
                            <div class="dso-step-counter">
                                5
                            </div>
                            <div class="dso-rich-content">
                                <h3>Documenten toevoegen</h3>
                                <p>Voeg alle benodigde documenten toe.</p>
                            </div>

                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="highlight-box dso-white dso-drop-shadow dso-has-counter">
                            <div class="dso-step-counter">
                                6
                            </div>
                            <div class="dso-rich-content">
                                <h3>Uw gegevens</h3>
                                <p>Controleer uw gegevens en vul aan waar nodig.</p>
                            </div>

                        </div>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <div class="highlight-box dso-white dso-drop-shadow dso-has-counter">
                            <div class="dso-step-counter">
                                7
                            </div>
                            <div class="dso-rich-content">
                                <h3>Verzoek samenstellen</h3>
                                <p>In de laatste stap bepaalt u voor welke activiteit(en) een (proef)verzoek wordt verzonden.</p>
                            </div>

                        </div>
                    </div>
                </div>
        </div>
    </div>
</main>

<footer>
    <div class="row">
        <div class="col-sm-6 col-md-3">
            <h2>Service</h2>
            <ul>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Sitemap</a></li>
                <li><a href="#">Help</a></li>
            </ul>
        </div>
        <div class="col-sm-6 col-md-3">
            <h2>Over deze site</h2>
            <ul>
                <li><a href="#">Copyright</a></li>
                <li><a href="#">Privacy</a></li>
                <li><a href="#">Cookies</a></li>
                <li><a href="#">Toegankelijkheid</a></li>
            </ul>
        </div>
        <div class="col-sm-6 col-md-3">
            <h2>Volg ons ook op</h2>
            <ul>
                <li><a href="#">Twitter</a></li>
                <li><a href="#">LinkedIn</a></li>
            </ul>
        </div>
    </div>
</footer>
{{render '@header' }}

<main>
  <div class="row dso-banner dso-banner-implementation-specific-image" style="background-image: url('{{path '/dummy/images/hero.png' }}')">
    <!-- @Developers: Voeg dus geen inline styling toe maar genereer de betreffende styling in een class, zoals bv. `.dso-banner-implementation-specific image`. Inline styling doet het niet goed bij de Webrichtlijnen -->
    <div class="col-lg-6 col-sm-8">
      <div class="dso-highlight-box dso-white">
        <div class="dso-rich-content">
          <h1>Direct een aanvraag of melding indienen</h1>
          <p>Weet u al voor welke activiteiten u een vergunning moet aanvragen of een melding moet doen?</p>
          <p>
            <a href="#" class="btn btn-primary">Start met aanvragen</a>
          </p>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-8">
      <div class="dso-highlight-box dso-yellow">
        <div class="dso-rich-content">
          <h2>Vul uw aanvraag zo compleet mogelijk in</h2>
          <p>Zo voorkomt u dat uw aanvraag vertraging oploopt. Er zijn slechts een aantal vragen verplicht, maar om uw aanvraag in behandeling te kunnen nemen moeten er voldoende gegevens over uw activiteit(en) bekend zijn. Welke dat zijn is in elke situatie anders. Controleer daarom extra op de volledigheid van uw aanvraag.</p>
        </div>
      </div>
      <br><!-- Is dit de bedoeling? -->
      <div class="dso-rich-content">
        <h2>Proefverzoek</h2>
        <p>Ben u niet zeker over uw aanvraag? Vraag u zich bijvoorbeeld af of die extra meter voor de aanbouw wel mag? Dan kunt u gebruik maken van een proefverzoek. Door uw aanvraag in te dienen als proefverzoek kunt u samen met de gemeente, waterschap of provincie kijken wat er nodig is voor een passende vergunning of melding van iw activiteit(en).</p>
        <p><em>Let op, bekijk altijd eerst de website van uw gemeente, waterschap of provincie voor de beschikbaarheid en mgelijke kosten van een proefverzoek.</em></p>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="dso-highlight-box dso-border dso-white">
        <div class="dso-rich-content">
          <h2>Vragen?</h2>
          <h3>Bel 088 - 79 70 790</h3>
          <p>Bereikbaar op werkdagen van 9.00-12.00 uur en van 13.00-16.30 uur. Kijk op de website <a href="#">www.aandeslagmetdeomgevingswet.nl</a> of neem <a href="#">contact</a> met ons op.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="row dso-featured">
    <div class="col-xs-12">
      <h2>De stappen</h1>

      {{#each rows as |value key| }}
        <div class="row">
          {{#each cols }}
            <div class="col-md-3 col-sm-6">
              {{#highlightBox modifier="dso-white dso-drop-shadow" step=(add @index 1 (multiply key 4))}}
                <div class="dso-rich-content">
                  <h3>{{ header }}</h3>
                  <p>{{{ body }}}</p>
                </div>
              {{/highlightBox}}
            </div>
          {{/each}}
        </div>
      {{/each}}
    </div>
  </div>
</main>

{{render '@footer' }}
rows:
  - cols:
      - header: Project aanmaken
        body: >-
          Maak eerst een project aan. Deze vindt u daarna terug in <a
          href="#">Mijn omgevingsloket</a>.
      - header: Locatie
        body: Kies de locatie voor uw bouwactiviteit(en).
      - header: Activiteiten
        body: >-
          Kies de activiteiten van uw project. Wanneer u een aanvraag start
          vanuit de vergunningscheck worden deze vooringevuld.
      - header: Vragen beantwoorden
        body: >-
          Beantwoord alle vragen die nodig zijn voor uw aanvraag. Vragen die in
          uw situatie niet meer relevant zijn vallen vanzelf weg.
  - cols:
      - header: Documenten toevoegen
        body: Voeg alle benodigde documenten toe.
      - header: Uw gegevens
        body: Controleer uw gegevens en vul aan waar nodig.
      - header: Verzoek samenstellen
        body: >-
          In de laatste stap bepaalt u voor welke activiteit(en) een
          (proef)verzoek wordt verzonden.

There are no notes for this item.