Landingspagina

Component preview opent in nieuw tabblad

There are no notes for this item.

<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="" class="dso-tertiary">
                    <dso-icon icon="user"></dso-icon><span>Inloggen</span>
                </a>
            </div>
        </div>
    </div>
    <nav class="dso-navbar">

        <div class="dso-navbar-header">
            <button type="button" class="dso-navbar-toggle dso-secondary" aria-expanded="false">
                <dso-icon icon="bars"></dso-icon>
                <span class="sr-only">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="#" aria-current="page">
                    Regels op de kaart
                </a>
            </li>
            <li>
                <a href="#">
                    Mijn Omgevingsloket
                </a>
            </li>
        </ul>
    </nav>

    <nav aria-label="U bevindt zich hier:">
        <ol class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList">
            <li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem">
                <a itemprop="item" href="#">
                    <span itemprop="name">Home</span>
                </a>
                <meta itemprop="position" content="1" />
            </li>
            <li class="active" aria-current="page" itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem">
                <span itemprop="name">Checken</span>
                <meta itemprop="position" content="2" />
            </li>
        </ol>
    </nav>

</header>

<main>
    <div class="row dso-banner dso-banner-implementation-specific-image" style="background-image: url('../../dummy/images/hands-on-trackpad.jpg')">
        <!-- @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">
            <dso-highlight-box white>
                <div class="dso-rich-content">
                    <h1>Direct een aanvraag of melding indienen</h1>
                    <p>Weet u al welke activiteiten u wilt gaan uitvoeren?</p>
                    <p>
                        <a href="#" class="dso-primary">Start met aanvragen</a>
                    </p>
                </div>
            </dso-highlight-box>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-8">
            <dso-highlight-box 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 weinig vragen verplicht. Om uw aanvraag in behandeling te kunnen nemen moeten wel voldoende gegevens toegevoegd zijn. Welke dat zijn is in elke situatie anders. Vul daarom zoveel mogelijk in.</p>
                    <h3>Kosten</h3>
                    <p>De kosten van een aanvraag zijn verschillend. Kijk op de website van uw gemeente, waterschap of provincie voor de precieze kosten.</p>
                </div>
            </dso-highlight-box>
            <div class="dso-rich-content">
                <h2>Omgevingsoverleg</h2>
                <p>Is uw plan erg ingewikkeld? Dan adviseren we u een aanvraag te doen voor een Omgevingsoverleg. Het Omgevingsoverleg is een zorgvuldig proces waarin u uw plan bespreekt samen met uw gemeente, waterschap of provincie en andere relevante betrokkenen. Het uitgangspunt van het Omgevingsoverleg is 'Hoe kunnen we dit plan mogelijk maken?'. Na het Omgevingsoverleg weet u of uw project haalbaar is. Ook weet u hoe u uw verzoek het beste kunt indienen.</p>
                <p><em class="text-muted">Let op, bekijk altijd eerst de website van uw gemeente, waterschap of provincie voor beschikbaarheid en mogelijke kosten van een Omgevingsoverleg</em></p>
                <h2>Eerst een vergunningcheck?</h2>
                <p>Weet u niet goed uit welke activiteiten uw project bestaat? Doe dan eerst een Vergunningcheck. U kunt vanuit de Vergunningcheck een aanvraag klaar zetten. Dan worden uw locatie en activiteiten bewaard. Dat scheelt u veel werk in de toekomst. Start <a href="#">de Vergunningcheck</a>.</p>
            </div>
        </div>
        <div class="col-lg-4">
            <dso-highlight-box border white>
                <div class="dso-rich-content">
                    <h2>Vragen?</h2>
                    <p>Heeft u vragen over uw vergunning of melding? Neem dan contact op met uw gemeente of waterschap. Heeft u vragen over hoe de website werkt? Neem dan contact op met <a href="#" class="extern">het Informatiepunt</a>.</p>
                </div>
            </dso-highlight-box>
        </div>
    </div>
    <div class="row dso-featured">
        <div class="col-xs-12">
            <h2>De stappen</h1>
                <div class="row dso-equal-heights">
                    <div class="col-md-3 col-sm-6">
                        <dso-highlight-box step="1" white drop-shadow>
                            <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>
                        </dso-highlight-box>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <dso-highlight-box step="2" white drop-shadow>
                            <div class="dso-rich-content">
                                <h3>Locatie</h3>
                                <p>Kies de locatie voor uw bouwactiviteit(en).</p>
                            </div>
                        </dso-highlight-box>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <dso-highlight-box step="3" white drop-shadow>
                            <div class="dso-rich-content">
                                <h3>Activiteiten</h3>
                                <p>Kies de activiteiten van uw project.</p>
                            </div>
                        </dso-highlight-box>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <dso-highlight-box step="4" white drop-shadow>
                            <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>
                        </dso-highlight-box>
                    </div>
                </div>
                <div class="row dso-equal-heights">
                    <div class="col-md-3 col-sm-6">
                        <dso-highlight-box step="5" white drop-shadow>
                            <div class="dso-rich-content">
                                <h3>Documenten toevoegen</h3>
                                <p>Voeg alle benodigde documenten toe.</p>
                            </div>
                        </dso-highlight-box>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <dso-highlight-box step="6" white drop-shadow>
                            <div class="dso-rich-content">
                                <h3>Uw gegevens</h3>
                                <p>Controleer uw gegevens en vul aan waar nodig.</p>
                            </div>
                        </dso-highlight-box>
                    </div>
                    <div class="col-md-3 col-sm-6">
                        <dso-highlight-box step="7" white drop-shadow>
                            <div class="dso-rich-content">
                                <h3>Verzoek samenstellen</h3>
                                <p>In de laatste stap bepaalt u voor welke activiteit(en) een Omgevingsoverleg of definitief verzoek wordt verstuurd.</p>
                            </div>
                        </dso-highlight-box>
                    </div>
                </div>
        </div>
    </div>
    <div class="row dso-equal-heights">
        <div class="col-xs-12">
            <h2>Wat gebeurt er nadat mijn verzoek is verstuurd?</h2>
        </div>
        <div class="col-xs-12 col-sm-4">
            <dso-highlight-box white drop-shadow>
                <div class="dso-rich-content">
                    <h3>Besluitperiode</h3>
                    <p>U ontvangt een bericht van de organisatie die uw verzoek behandeld. Meestal ontvangt u binnen 8 weken een besluit van de behandelende organisatie.</p>
                </div>
            </dso-highlight-box>
        </div>
        <div class="col-xs-12 col-sm-4">
            <dso-highlight-box white drop-shadow>
                <div class="dso-rich-content">
                    <h3>Aanvullen verzoek</h3>
                    <p>Als er iets mist of niet klopt wordt u gevraagd het verzoek aan te vullen. Dit kan in <a href="#">Mijn Omgevingsloket </a>. De periode waarin er een besluit genomen wordt kan worden verlengd.</p>
                </div>
            </dso-highlight-box>
        </div>
        <div class="col-xs-12 col-sm-4">
            <dso-highlight-box white drop-shadow>
                <div class="dso-rich-content">
                    <h3>Bezwaar en beroep</h3>
                    <p>Na het besluit hebben u Γ©n andere betrokkenen 6 weken de tijd om bezwaar te maken. Het is verstandig om deze tijd te wachten met het uitvoeren van de werkzaamheden.</p>
                </div>
            </dso-highlight-box>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12 text-center">
            <h2>Klaar om uw aanvraag te starten?</h2>
            <button type="button" class="dso-primary">Start aanvraag</button>
        </div>
    </div>
</main>

<footer>
    <div class="row">
        <div class="col-sm-6 col-md-3">
            <h2>Basic link</h2>
            <ul class="dso-link-list">
                <li><a href="#">Normale link</a></li>
                <li><a href="#">Test link</a></li>
            </ul>
        </div>
        <div class="col-sm-6 col-md-3">
            <h2>Externe links</h2>
            <ul class="dso-link-list">
                <li><a href="#" class="extern">Externe link</a></li>
                <li><a href="#" class="extern">Extra externe link</a></li>
                <li><a href="#" class="extern">Laatste externe link</a></li>
            </ul>
        </div>
        <div class="col-sm-6 col-md-3">
            <h2>Tekst paragraaf</h2>
            <p>
                Loop goed na welke inhoud essentieel is voor de footer. CreeΓ«r met ros en cols de gewenste indeling van uw footer.
            </p>
        </div>
        <div class="col-sm-6 col-md-3">
            <h2>Combinatie links en tekst</h2>
            <p>
                Tekst kan worden gevolgd door verscheidene <a href="#">links</a>.
            </p>
            <ul class="dso-link-list">
                <li><a href="#">Combinatie link</a></li>
                <li><a href="#">Combinatie link 2</a></li>
            </ul>
        </div>
    </div>
</footer>
{% render '@header' %}

<main>
  <div class="row dso-banner dso-banner-implementation-specific-image" style="background-image: url('{{ '/dummy/images/hands-on-trackpad.jpg' | path }}')">
    <!-- @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">
      <dso-highlight-box white>
        <div class="dso-rich-content">
          <h1>Direct een aanvraag of melding indienen</h1>
          <p>Weet u al welke activiteiten u wilt gaan uitvoeren?</p>
          <p>
            <a href="#" class="dso-primary">Start met aanvragen</a>
          </p>
        </div>
      </dso-highlight-box>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-8">
      <dso-highlight-box 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 weinig vragen verplicht. Om uw aanvraag in behandeling te kunnen nemen moeten wel voldoende gegevens toegevoegd zijn. Welke dat zijn is in elke situatie anders. Vul daarom zoveel mogelijk in.</p>
          <h3>Kosten</h3>
          <p>De kosten van een aanvraag zijn verschillend. Kijk op de website van uw gemeente, waterschap of provincie voor de precieze kosten.</p>
        </div>
      </dso-highlight-box>
      <div class="dso-rich-content">
        <h2>Omgevingsoverleg</h2>
        <p>Is uw plan erg ingewikkeld? Dan adviseren we u een aanvraag te doen voor een Omgevingsoverleg. Het Omgevingsoverleg is een zorgvuldig proces waarin u uw plan bespreekt samen met uw gemeente, waterschap of provincie en andere relevante betrokkenen. Het uitgangspunt van het Omgevingsoverleg is 'Hoe kunnen we dit plan mogelijk maken?'. Na het Omgevingsoverleg weet u of uw project haalbaar is. Ook weet u hoe u uw verzoek het beste kunt indienen.</p>
        <p><em class="text-muted">Let op, bekijk altijd eerst de website van uw gemeente, waterschap of provincie voor beschikbaarheid en mogelijke kosten van een Omgevingsoverleg</em></p>
        <h2>Eerst een vergunningcheck?</h2>
        <p>Weet u niet goed uit welke activiteiten uw project bestaat? Doe dan eerst een Vergunningcheck. U kunt vanuit de Vergunningcheck een aanvraag klaar zetten. Dan worden uw locatie en activiteiten bewaard. Dat scheelt u veel werk in de toekomst. Start <a href="#">de Vergunningcheck</a>.</p>
      </div>
    </div>
    <div class="col-lg-4">
      <dso-highlight-box border white>
        <div class="dso-rich-content">
          <h2>Vragen?</h2>
          <p>Heeft u vragen over uw vergunning of melding? Neem dan contact op met uw gemeente of waterschap. Heeft u vragen over hoe de website werkt? Neem dan contact op met <a href="#" class="extern">het Informatiepunt</a>.</p>
        </div>
      </dso-highlight-box>
    </div>
  </div>
  <div class="row dso-featured">
    <div class="col-xs-12">
      <h2>De stappen</h1>
      <div class="row dso-equal-heights">
        <div class="col-md-3 col-sm-6">
          <dso-highlight-box step="1" white drop-shadow>
            <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>
          </dso-highlight-box>
        </div>
        <div class="col-md-3 col-sm-6">
          <dso-highlight-box step="2" white drop-shadow>
            <div class="dso-rich-content">
              <h3>Locatie</h3>
              <p>Kies de locatie voor uw bouwactiviteit(en).</p>
            </div>
          </dso-highlight-box>
        </div>
        <div class="col-md-3 col-sm-6">
          <dso-highlight-box step="3" white drop-shadow>
            <div class="dso-rich-content">
              <h3>Activiteiten</h3>
              <p>Kies de activiteiten van uw project.</p>
            </div>
          </dso-highlight-box>
        </div>
        <div class="col-md-3 col-sm-6">
          <dso-highlight-box step="4" white drop-shadow>
            <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>
          </dso-highlight-box>
        </div>
      </div>
      <div class="row dso-equal-heights">
        <div class="col-md-3 col-sm-6">
          <dso-highlight-box step="5" white drop-shadow>
            <div class="dso-rich-content">
              <h3>Documenten toevoegen</h3>
              <p>Voeg alle benodigde documenten toe.</p>
            </div>
          </dso-highlight-box>
        </div>
        <div class="col-md-3 col-sm-6">
          <dso-highlight-box step="6" white drop-shadow>
            <div class="dso-rich-content">
              <h3>Uw gegevens</h3>
              <p>Controleer uw gegevens en vul aan waar nodig.</p>
            </div>
          </dso-highlight-box>
        </div>
        <div class="col-md-3 col-sm-6">
          <dso-highlight-box step="7" white drop-shadow>
            <div class="dso-rich-content">
              <h3>Verzoek samenstellen</h3>
              <p>In de laatste stap bepaalt u voor welke activiteit(en) een Omgevingsoverleg of definitief verzoek wordt verstuurd.</p>
            </div>
          </dso-highlight-box>
        </div>
      </div>
    </div>
  </div>
  <div class="row dso-equal-heights">
    <div class="col-xs-12">
      <h2>Wat gebeurt er nadat mijn verzoek is verstuurd?</h2>
    </div>
    <div class="col-xs-12 col-sm-4">
      <dso-highlight-box white drop-shadow>
        <div class="dso-rich-content">
          <h3>Besluitperiode</h3>
          <p>U ontvangt een bericht van de organisatie die uw verzoek behandeld. Meestal ontvangt u binnen 8 weken een besluit van de behandelende organisatie.</p>
        </div>
      </dso-highlight-box>
    </div>
    <div class="col-xs-12 col-sm-4">
      <dso-highlight-box white drop-shadow>
        <div class="dso-rich-content">
          <h3>Aanvullen verzoek</h3>
          <p>Als er iets mist of niet klopt wordt u gevraagd het verzoek aan te vullen. Dit kan in <a href="#">Mijn Omgevingsloket </a>. De periode waarin er een besluit genomen wordt kan worden verlengd.</p>
        </div>
      </dso-highlight-box>
    </div>
    <div class="col-xs-12 col-sm-4">
      <dso-highlight-box white drop-shadow>
        <div class="dso-rich-content">
          <h3>Bezwaar en beroep</h3>
          <p>Na het besluit hebben u Γ©n andere betrokkenen 6 weken de tijd om bezwaar te maken. Het is verstandig om deze tijd te wachten met het uitvoeren van de werkzaamheden.</p>
        </div>
      </dso-highlight-box>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12 text-center">
      <h2>Klaar om uw aanvraag te starten?</h2>
      <button type="button" class="dso-primary">Start aanvraag</button>
    </div>
  </div>
</main>

{% render '@footer' %}
/* No context defined for this component. */