Landingspagina

<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="btn btn-link"><svg class="di di-user">
                        <use href="../../dso-icons.svg#user" />
                    </svg><span>Inloggen</span></a>
            </div>
        </div>
    </div>
    <nav class="dso-navbar">

        <div class="dso-navbar-header">
            <button type="button" class="dso-navbar-toggle btn btn-default">
                <svg class="di di-bars">
                    <use href="../../dso-icons.svg#bars" />
                </svg>
                <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>
    <nav aria-label="U bevindt zich hier:">
        <ol class="breadcrumb" itemscope itemtype="//schema.org/BreadcrumbList">
            <li itemscope="" itemprop="itemListElement" itemtype="//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="//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">
            <div class="dso-highlight-box dso-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="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 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>
            </div>
            <br><!-- Is dit de bedoeling? -->
            <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">
            <div class="dso-highlight-box dso-border dso-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>
            </div>
        </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">
                        <div class="dso-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="dso-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="dso-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.</p>
                            </div>

                        </div>

                    </div>

                    <div class="col-md-3 col-sm-6">
                        <div class="dso-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 dso-equal-heights">

                    <div class="col-md-3 col-sm-6">
                        <div class="dso-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="dso-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="dso-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 Omgevingsoverleg of definitief verzoek wordt verstuurd.</p>
                            </div>

                        </div>

                    </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">
            <div class="dso-highlight-box dso-white dso-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>
            </div>
        </div>
        <div class="col-xs-12 col-sm-4">
            <div class="dso-highlight-box dso-white dso-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>
            </div>
        </div>
        <div class="col-xs-12 col-sm-4">
            <div class="dso-highlight-box dso-white dso-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>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12 col-sm-8">
            <h2>Top 5 veelgestelde vragen</h2>
            <div class="dso-accordion dso-accordion-compact">
                <div class="dso-accordion-section ">
                    <h3 class="dso-section-handle">
                        <button type="button" aria-hidden="true" tabindex="-1">Wanneer kan ik hier ‘echt’ een aanvraag doen </button>
                    </h3>
                </div>
                <div class="dso-accordion-section ">
                    <h3 class="dso-section-handle">
                        <button type="button" aria-hidden="true" tabindex="-1">Waarom moet ik een vergunning aanvragen, een melding doen of informatie aanleveren? </button>
                    </h3>
                </div>
                <div class="dso-accordion-section ">
                    <h3 class="dso-section-handle">
                        <button type="button" aria-hidden="true" tabindex="-1">Wat is het verschil tussen een aanvraag, een melding en informatie aanleveren? </button>
                    </h3>
                </div>
                <div class="dso-accordion-section ">
                    <h3 class="dso-section-handle">
                        <button type="button" aria-hidden="true" tabindex="-1">Moet ik inloggen als ik een aanvraag wil doen </button>
                    </h3>
                </div>
                <div class="dso-accordion-section ">
                    <h3 class="dso-section-handle">
                        <button type="button" aria-hidden="true" tabindex="-1">Wat heb ik allemaal nodig voor het aanvragen van een vergunning, het doen van een melding of het aanleveren van informatie?</button>
                    </h3>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12 text-center">
            <h2>Klaar om uw aanvraag te starten?</h2>
            <button type="button" class="btn btn-primary">Start aanvraag</button>
        </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>