Full Width

<header>
    <nav class="dso-navbar">
        <div class="dso-navbar-header">
            <button type="button" class="dso-navbar-toggle">
                <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 class="dso-active">
                <a href="#">
                    Home
                </a>
            </li>
            <li>
                <a href="#">
                    Vergunningcheck
                </a>
            </li>
            <li>
                <a href="#">
                    Aanvragen
                </a>
            </li>
            <li>
                <a href="#">
                    Regels op de kaart
                </a>
            </li>
            <li>
                <a href="#">
                    Mijn Omgevingsloket
                </a>
            </li>
        </ul>
    </nav>

</header>
<main>
    <div class="row dso-featured">
        <div class="col-md-6">
            <div class="dso-rich-content">
                <h2>Welkom</h2>
                <p>Op deze testpagina</p>
                <h3>What is Lorem Ipsum?</h3>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard
                    dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type
                    specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining
                    essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
                    passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
            </div>
        </div>
        <div class="col-md-6">
            <dl class="dl-horizontal">
                <dt>Description lists:</dt>
                <dd>A description list is perfect for defining terms.</dd>
                <dt>Euismod:</dt>
                <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
                <dd>Donec id elit non mi porta gravida at eget metus.</dd>
                <dt>Malesuada porta:</dt>
                <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
                <dt>Felis euismod semper eget lacinia:</dt>
                <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
            </dl>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <div class="dso-rich-content">
                <ul class="list-group">
                    <li class="list-group-item">
                        Cras justo odio
                    </li>
                    <li class="list-group-item">
                        Dapibus ac facilisis in
                    </li>
                    <li class="list-group-item">
                        Morbi leo risus
                    </li>
                    <li class="list-group-item">
                        Porta ac consectetur ac
                    </li>
                    <li class="list-group-item">
                        <p>Vestibulum at eros</p>
                    </li>
                </ul>

            </div>
        </div>
        <div class="col-md-6">
            <table class="table">
                <caption class="sr-only">Overzicht van gebruikersnamen</caption>
                <thead>
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">Voornaam</th>
                        <th scope="col">Achternaam</th>
                        <th scope="col">GitHub gebruikersnaam</th>
                        <th scope="col">Modifier</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row">1</th>
                        <td><a href="#fabien">Fabien</a></td>
                        <td>Potencier</td>
                        <td>fabpot</td>
                        <td>
                            <code>tr</code>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">2</th>
                        <td><a href="#andrew">Andrew</a></td>
                        <td>Nesbitt</td>
                        <td>andrew</td>
                        <td>
                            <code>tr</code>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">3</th>
                        <td><a href="#taylor">Taylor</a></td>
                        <td>Otwell</td>
                        <td>taylorotwell</td>
                        <td>
                            <code>tr</code>
                        </td>
                    </tr>
                    <tr class="active">
                        <th scope="row">4</th>
                        <td><a href="#hugo">Hugo</a></td>
                        <td>Giraudel</td>
                        <td>HugoGiraudel</td>
                        <td>
                            <code>tr.active</code>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">5</th>
                        <td><a href="#thibault">Thibault</a></td>
                        <td>Duplessis</td>
                        <td>ornicar</td>
                        <td>
                            <code>tr</code>
                        </td>
                    </tr>
                    <tr class="success">
                        <th scope="row">6</th>
                        <td><a href="#juho">Juho</a></td>
                        <td>Vepsäläinen</td>
                        <td>bebraw</td>
                        <td>
                            <code>tr.success</code>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">7</th>
                        <td><a href="#alex">Alex</a></td>
                        <td>Crichton</td>
                        <td>alexcrichton</td>
                        <td>
                            <code>tr</code>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">8</th>
                        <td><a href="#josh">Josh</a></td>
                        <td>Abernathy</td>
                        <td>joshaber</td>
                        <td>
                            <code>tr</code>
                        </td>
                    </tr>
                    <tr class="info">
                        <th scope="row">9</th>
                        <td><a href="#mike">Mike</a></td>
                        <td>McNeil</td>
                        <td>mikermcneil</td>
                        <td>
                            <code>tr.info</code>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">10</th>
                        <td><a href="#ben">Ben</a></td>
                        <td>Balter</td>
                        <td>benbalter</td>
                        <td>
                            <code>tr</code>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">11</th>
                        <td><a href="#brandon">Brandon</a></td>
                        <td>Keepers</td>
                        <td>bkeepers</td>
                        <td>
                            <code>tr</code>
                        </td>
                    </tr>
                    <tr class="warning">
                        <th scope="row">12</th>
                        <td><a href="#brent">Brent</a></td>
                        <td>Jackson</td>
                        <td>jxnblk</td>
                        <td>
                            <code>tr.warning</code>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">13</th>
                        <td><a href="#yegor">Yegor</a></td>
                        <td>Bugayenko</td>
                        <td>yegor256</td>
                        <td>
                            <code>tr</code>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">14</th>
                        <td><a href="#kenneth">Kenneth</a></td>
                        <td>Reitz</td>
                        <td>kennethreitz</td>
                        <td>
                            <code>tr</code>
                        </td>
                    </tr>
                    <tr class="danger">
                        <th scope="row">15</th>
                        <td><a href="#graham">Graham</a></td>
                        <td>Campbell</td>
                        <td>GrahamCampbell</td>
                        <td>
                            <code>tr.danger</code>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">16</th>
                        <td><a href="#kamran">Kamran</a></td>
                        <td>Ahmed</td>
                        <td>kamranahmedse</td>
                        <td>
                            <code>tr</code>
                        </td>
                    </tr>
                    <tr>
                        <th scope="row">17</th>
                        <td><a href="#katrina">Katrina</a></td>
                        <td>Owen</td>
                        <td>kytrinyx</td>
                        <td>
                            <code>tr</code>
                        </td>
                    </tr>
                </tbody>
            </table>

        </div>
    </div>

    <div class="row dso-featured">
        <div class="col-md-12">
            <div class="dso-jumbotron">
                <h2 class="dso-jumbotron-title">Aan de slag met de Omgevingswet</h2>
                <div class="dso-jumbotron-body">
                    <p>Data en services van het digitaal stelsel Omgevingswet zijn in ontwikkeling en worden gedurende het project via het Ontwikkelaarsportaal ter beschikking gesteld voor derden. De datasets op dit platform zijn benaderbaar vie RESTfull APIs. In onze API store zijn de volgende services in beta versie beschikbaar.</p>
                    <div class="dso-jumbotron-cta">
                        <button type="button" class="btn btn-link">
                            <svg class="di di-angle-right">
                                <use href="../../dso-icons.svg#angle-right" />
                            </svg><span>Aan de slag</span>
                        </button>
                    </div>
                </div>
                <div class="dso-jumbotron-image">
                    <img src="../../dummy/images/avatar.png" alt="Alternatieve tekst"> </div>
            </div>

        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="dso-rich-content">
                <h2>History (h2)</h2>
                <p>See also:
                    <a href="https://en.wikipedia.org/wiki/Timeline_of_The_Hague" class="extern" target="_blank">Timeline of The Hague</a>
                </p>
                <h3>Early history (h3)</h3>
                <p>The Hague originated around 1230, when Count Floris IV of Holland purchased land alongside a pond, the present-day
                    Hofvijver, in order to build a hunting residence. In 1248, his son and successor William II, King of the Romans,
                    decided to extend the residence to a palace, which would later be called the Binnenhof (Inner Court). He died in
                    1256 before this palace was completed but parts of it were finished by his son Floris V, of which the Ridderzaal
                    (Knights' Hall), still intact, is the most prominent.</p>
                <h4>Trivia (h4)</h4>
                <ul>
                    <li>The village that originated around the Binnenhof was first mentioned as Haga in a charter dating from 1242. In the
                        15th century, des Graven hage came into use, literally "The Count's Wood", with connotations like "The Count's
                        Hedge, Private Enclosure or Hunting Grounds".</li>
                    <li>'s-Gravenhage was officially used for the city from the 17th century onwards. Today, this name is only used in some
                        official documents like birth and marriage certificates. The city itself uses "Den Haag" in all its communication.</li>
                </ul>
                <h5>More information (h5)</h5>
                <p>See
                    <a href="https://en.wikipedia.org/wiki/The_Hague" class="extern" target="_blank">Wikipedia</a>
                </p>
                <h3>Modern history (h3)</h3>
                <p>Only in 1806, when the
                    <a href="https://en.wikipedia.org/wiki/Kingdom_of_Holland" class="extern" class="_blank">Kingdom of Holland</a> was a puppet state of the First French Empire, was the settlement granted city rights by Louis
                    Bonaparte. After the Napoleonic Wars, modern-day Belgium and the Netherlands were combined in the United Kingdom
                    of the Netherlands to form a buffer against France. As a compromise, Brussels and Amsterdam alternated as capital
                    every two years, with the government remaining in The Hague. After the separation of Belgium in 1830, Amsterdam remained
                    the capital of the Netherlands, while the government was situated in The Hague. When the government started to play
                    a more prominent role in Dutch society after 1850, The Hague quickly expanded. Many streets were specifically built
                    for the large number of civil servants employed in the country's government and for the Dutchmen who were retiring
                    from the administration of the Netherlands East Indies.</p>
                <h4>World War II (h4)</h4>
                <p>The city sustained heavy damage during World War II. Many Jews were killed during the German occupation. Additionally,
                    the Atlantic Wall was built through the city, causing a large quarter to be torn down by the Nazi occupants. On 3
                    March 1945, the Royal Air Force mistakenly bombed the Bezuidenhout quarter. The target was an installation of V-2
                    rockets in the nearby Haagse Bos park, but because of navigational errors, the bombs fell on a heavily populated
                    and historic part of the city. The bombardment wreaked widespread destruction in the area and caused 511 fatalities.</p>
                <h5>More information (h5)</h5>
                <p>See
                    <a href="https://en.wikipedia.org/wiki/The_Hague" class="extern" target="_blank">Wikipedia</a>
                </p>
            </div>
        </div>
    </div>

    <div class="row dso-featured">
        <div class="col-md-12">
            <div class="dso-jumbotron">
                <h2 class="dso-jumbotron-title">Aan de slag met de Omgevingswet</h2>
                <div class="dso-jumbotron-body">
                    <p>Data en services van het digitaal stelsel Omgevingswet zijn in ontwikkeling en worden gedurende het project via het Ontwikkelaarsportaal ter beschikking gesteld voor derden. De datasets op dit platform zijn benaderbaar vie RESTfull APIs. In onze API store zijn de volgende services in beta versie beschikbaar.</p>
                </div>
                <div class="dso-jumbotron-image">
                    <img src="../../dummy/images/avatar.png" alt="Alternatieve tekst"> </div>
            </div>

        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="dso-jumbotron">
                <h2 class="dso-jumbotron-title">Aan de slag met de Omgevingswet</h2>
                <div class="dso-jumbotron-body">
                    <p>Data en services van het digitaal stelsel Omgevingswet zijn in ontwikkeling en worden gedurende het project via het Ontwikkelaarsportaal ter beschikking gesteld voor derden. De datasets op dit platform zijn benaderbaar vie RESTfull APIs. In onze API store zijn de volgende services in beta versie beschikbaar.</p>
                    <div class="dso-jumbotron-cta">
                        <button type="button" class="btn btn-link">
                            <svg class="di di-angle-right">
                                <use href="../../dso-icons.svg#angle-right" />
                            </svg><span>Aan de slag</span>
                        </button>
                    </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>