<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<a href="#" target="_blank">Hyperlink</a>
<h1 class="multiple-font-header">Header Asap <span class="heart-and-soul">HeartAndSoul</span></h1> <h1 class="heart-and-soul">Header HeartAndSoul</h1>
<p>Paragraph</p>
Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.
Lorem ipsum dolor sit amet, emphasis consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.
<a class="button button-primary" href="#">button primary</a> <a class="button button-default" href="#">button default</a> <a class="button button-success" href="#">button success</a>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae augue sed ligula blandit luctus. Integer a mattis mauris. Nunc consequat finibus tempor. Sed egestas urna et magna aliquam gravida. Praesent pretium, leo id ultricies aliquet, orci ante congue ante, non maximus felis libero et magna.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae augue sed ligula blandit luctus. Integer a mattis mauris. Nunc consequat finibus tempor. Sed egestas urna et magna aliquam gravida. Praesent pretium, leo id ultricies aliquet, orci ante congue ante, non maximus felis libero et magna.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae augue sed ligula blandit luctus. Integer a mattis mauris. Nunc consequat finibus tempor. Sed egestas urna et magna aliquam gravida. Praesent pretium, leo id ultricies aliquet, orci ante congue ante, non maximus felis libero et magna.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae augue sed ligula blandit luctus. Integer a mattis mauris. Nunc consequat finibus tempor. Sed egestas urna et magna aliquam gravida. Praesent pretium, leo id ultricies aliquet, orci ante congue ante, non maximus felis libero et magna.
<div class="cols"> <div class="display-none display-sm-block sm-6 mb-5"> <div class="text-block"> <h1>HEADER H1</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae augue sed ligula blandit luctus. Integer a mattis mauris. Nunc consequat finibus tempor. Sed egestas urna et magna aliquam gravida. Praesent pretium, leo id <a class="bold" href="#">ultricies</a> aliquet, orci ante congue ante, non maximus felis liberoet magna. </p> </div> <div class="text-block"> <h1>HEADER H1</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae augue sed ligula blandit luctus. Integer a mattis mauris. Nunc consequat <a class="bold" href="#">finibus tempor</a>. Sed egestas urna et magna aliquam gravida. Praesent pretium, leo id ultricies aliquet, orci ante congue ante, non maximus felis liberoet magna. </p> </div> </div> <div class="display-none display-sm-block sm-6"> <div class="text-block"> <h1>HEADER H1</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae augue sed ligula blandit luctus. Integer a mattis mauris. Nunc consequat finibus tempor. Sed egestas urna et magna aliquam gravida. Praesent pretium, leo id <a class="bold" href="#">ultricies</a> aliquet, orci ante congue ante, non maximus felis libero et magna. </p> </div> <div class="text-block"> <h1>HEADER H1</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae augue sed ligula blandit luctus. Integer a mattis mauris. Nunc consequat <a class="bold" href="#">finibus tempor</a>. Sed egestas urna et magna aliquam gravida. Praesent pretium, leo id ultricies aliquet, orci ante congue ante, non maximus felis libero et magna. </p> </div> </div> </div>
<div class="cols sm-cols-spacing"> <div class="xs-12 mb-3"> <img class="img-responsive" src="/media/studio-marjolein-vormgeving-header-contact.jpg"> </div> </div>
<div class="cols sm-cols-spacing"> <div class="xs-12 sm-6 mb-3"> <img class="img-responsive" src="/media/studio-marjolein-vormgeving-home-ontwerp-op-maat-trouwkaarten-geboortekaartjes.jpg"> </div> <div class="xs-12 sm-6"> <img class="img-responsive" src="/media/studio-marjolein-vormgeving-home-ontwerp-op-maat-trouwkaarten-geboortekaartjes.jpg"> </div> </div>
<div class="banner banner-top"> <div class="container"> <div class="banner-wrapper"> <div class="cols cols-eq-height"> <div class="xs-6 sm-4 mb-2 mb-sm-0"> <a class="card" href="#"> <img class="card-img" src="/media/studio-marjolein-vormgeving-home-zelf-maken.jpg"/> <span class="card-btn button">LABEL</span> </a> </div> <div class="xs-6 display-sm-none"> <a class="card" href="#"> <img class="card-img" src="/media/studio-marjolein-vormgeving-home-zelf-maken.jpg"/> <span class="card-btn button">LABEL</span> </a> </div> <div class="xs-6 sm-4 mb-2 mb-sm-0"> <a class="card" href="#"> <img class="card-img" src="/media/studio-marjolein-vormgeving-home-zelf-maken.jpg"/> <span class="card-btn button">LABEL</span> </a> </div> <div class="xs-6 sm-4 mb-2 mb-sm-0"> <a class="card" href="#"> <img class="card-img" src="/media/studio-marjolein-vormgeving-home-zelf-maken.jpg"/> <span class="card-btn button">LABEL</span> </a> </div> </div> </div> </div> </div>
<div class="banner banner-happy"> <div class="container"> <div class="cols cols-eq-height"> <div class="xs-6 sm-3 mb-2 mb-sm-4"> <a class="card" href="#"> <img class="card-img" src="/media/studio-marjolein-vormgeving-home-trouwhuisstijl.jpg"/> <span class="card-btn button">LABEL</span> </a> <p class="display-none display-sm-block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae augue sed ligula blandit luctus. Integer a mattis mauris.</p> </div> <div class="xs-6 sm-3 mb-2 mb-sm-4"> <a class="card" href="#"> <img class="card-img" src="/media/studio-marjolein-vormgeving-home-trouwhuisstijl.jpg"/> <span class="card-btn button">LABEL</span> </a> <p class="display-none display-sm-block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae augue sed ligula blandit luctus. Integer a mattis mauris.</p> </div> <div class="xs-6 sm-3 mb-2 mb-sm-4"> <a class="card" href="#"> <img class="card-img" src="/media/studio-marjolein-vormgeving-home-trouwhuisstijl.jpg"/> <span class="card-btn button">LABEL</span> </a> <p class="display-none display-sm-block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae augue sed ligula blandit luctus. Integer a mattis mauris.</p> </div> <div class="xs-6 sm-3 mb-2 mb-sm-4"> <a class="card" href="#"> <img class="card-img" src="/media/studio-marjolein-vormgeving-home-trouwhuisstijl.jpg"/> <span class="card-btn button">LABEL</span> </a> <p class="display-none display-sm-block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae augue sed ligula blandit luctus. Integer a mattis mauris.</p> </div> </div> </div> </div>
<div class="cols"> <div class="xs-12 sm-4"> <div class="card mb-3"> <a class="card-thumbnail" href="#"> <img class="card-img" src="/media/studio-marjolein-vormgeving-home-veelgestelde-vragen.jpg"/> </a> <div class="card-content"> <h1>HEADER H1</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae augue sed ligula blandit luctus. Integer a mattis mauris. Nunc consequat finibus tempor.</p> </div> </div> </div> <div class="xs-12 sm-4"> <div class="card mb-3"> <a class="card-thumbnail" href="#"> <img class="card-img" src="/media/studio-marjolein-vormgeving-home-veelgestelde-vragen.jpg"/> </a> <div class="card-content"> <h1>HEADER H1</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae augue sed ligula blandit luctus. Integer a mattis mauris. Nunc consequat finibus tempor.</p> </div> </div> </div> <div class="xs-12 sm-4"> <div class="card mb-3"> <a class="card-thumbnail" href="#"> <img class="card-img" src="/media/studio-marjolein-vormgeving-home-veelgestelde-vragen.jpg"/> </a> <div class="card-content"> <h1>HEADER H1</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae augue sed ligula blandit luctus. Integer a mattis mauris. Nunc consequat finibus tempor.</p> </div> </div> </div> </div>
<div class="banner banner-design-yourself"> <div class="container"> <div class="cols"> <div class="xs-12"> <div class="banner-content"> <h4 class="banner-header">HEADER:</h4> <p class="mb-2"><span class="bold">Lorem ipsum</span> dolor sit amet, consectetur adipiscing elit. Aenean vitae augue sed ligula blandit luctus. Integer a mattis mauris.</p> </div> <div class="banner-button-group"> <a class="button button-primary" href="#">Button primary</a> </div> </div> </div> </div> </div>
<div class="cols sm-cols-spacing"> <div class="xs-4 md-2"> <a class="card" href="#"> <img class="card-img" src="/media/studio-marjolein-vormgeving-home-instagram-1.jpg"/> </a> </div> <div class="xs-4 md-2"> <a class="card" href="#"> <img class="card-img" src="/media/studio-marjolein-vormgeving-home-instagram-1.jpg"/> </a> </div> <div class="xs-4 md-2"> <a class="card" href="#"> <img class="card-img" src="/media/studio-marjolein-vormgeving-home-instagram-1.jpg"/> </a> </div> <div class="xs-4 md-2 xs-padding-t-14 pt-md-0"> <a class="card" href="#"> <img class="card-img" src="/media/studio-marjolein-vormgeving-home-instagram-1.jpg"/> </a> </div> <div class="xs-4 md-2 xs-padding-t-14 pt-md-0"> <a class="card" href="#"> <img class="card-img" src="/media/studio-marjolein-vormgeving-home-instagram-1.jpg"/> </a> </div> <div class="xs-4 md-2 xs-padding-t-14 pt-md-0"> <a class="card" href="#"> <img class="card-img" src="/media/studio-marjolein-vormgeving-home-instagram-1.jpg"/> </a> </div> </div>
<div id="reviews"> <div class="container"> <div class="reviews-wrapper"> <div class="cols"> <div class="xs-12 sm-4 md-3"> <div class="card mb-3"> <a class="card-thumbnail mb-4" href="/reviews"><img class="card-img" loading="lazy" src="/media/studio-marjolein-vormgeving-recensie-1.jpg" /> </a> <div class="card-content"> <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae augue sed ligula blandit luctus. Integer a mattis mauris. ’</p> </div> <p class="review-name">NAAM</p> </div> </div> <div class="xs-12 sm-4 md-3"> <div class="card mb-3"> <a class="card-thumbnail mb-4" href="/reviews"><img class="card-img" loading="lazy" src="/media/studio-marjolein-vormgeving-recensie-2.jpg" /> </a> <div class="card-content"> <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae augue sed ligula blandit luctus. Integer a mattis mauris. ’</p> </div> <p class="review-name">NAAM</p> </div> </div> <div class="xs-12 sm-4 md-3"> <div class="card mb-3"> <a class="card-thumbnail mb-4" href="/reviews"><img class="card-img" loading="lazy" src="/media/studio-marjolein-vormgeving-recensie-3.jpg" /> </a> <div class="card-content"> <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae augue sed ligula blandit luctus. Integer a mattis mauris. ’</p> </div> <p class="review-name">NAAM</p> </div> </div> <div class="xs-12 md-3 display-none display-md-block"> <div class="card mb-3"> <a class="card-thumbnail mb-4" href="/reviews"><img class="card-img" loading="lazy" src="/media/studio-marjolein-vormgeving-recensie-4.jpg" /> </a> <div class="card-content"> <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vitae augue sed ligula blandit luctus. Integer a mattis mauris. ’</p> </div> <p class="review-name">NAAM</p> </div> </div> </div> </div> </div> </div>