Alternative
Lot berekent je rente
Laat lot jouw maximale hypotheek berekenen voor 2019.
Lorem ipsum dolor sit amet, est illud commodo repudiare at, cu sonet
imperdiet theophrastus sea. At qui eros soleat, te per maiorum
consequuntur, et quidam conclusionemque usu. At qui eros soleat, te per
maiorum consequuntur, et quidam conclusionemque usu. At qui eros soleat,
te per maiorum consequuntur, et quidam conclusionemque usu.
<section class="c-highlight c-highlight--alternative l-section l-section--background-pink ">
<div class="c-highlight__content l-container">
<div class="l-grid l-grid--with-spacing l-grid--align-middle">
<div class="l-grid__col l-grid__col--7@desktop">
<h2 class="c-highlight__title">Lot berekent je rente</h2>
<div class="c-highlight__info">
<p class="c-highlight__text">Laat lot jouw maximale hypotheek berekenen voor 2019. <br> <br>
Lorem ipsum dolor sit amet, est illud commodo repudiare at, cu sonet
imperdiet theophrastus sea. At qui eros soleat, te per maiorum
consequuntur, et quidam conclusionemque usu. At qui eros soleat, te per
maiorum consequuntur, et quidam conclusionemque usu. At qui eros soleat,
te per maiorum consequuntur, et quidam conclusionemque usu.</p>
<button class="c-button c-highlight__button c-button--inverted ">
<span class="c-button__text">ontdek onze rentes</span>
</button>
</div>
</div>
<form class="c-highlight__form l-grid__col l-grid__col--4@desktop l-grid__col--offset-1@desktop u-margin-top-8x@below-desktop">
<div class="c-highlight__input-container">
<div class="c-input c-highlight__input c-input--inverted">
<label class="c-input__label " for="component-rente-1">Jouw bruto jaarinkomen:</label>
<div class="c-input__wrapper
">
<input id="component-rente-1" class="c-input__field" type="text" name="component-rente-1" placeholder="€ 45.000" value="" />
</div>
</div>
<div class="c-input c-highlight__input c-input--inverted">
<label class="c-input__label " for="component-rente-2">Bruto jaarinkomen partner:</label>
<div class="c-input__wrapper
">
<input id="component-rente-2" class="c-input__field" type="text" name="component-rente-2" placeholder="€ 45.000" value="" />
</div>
</div>
</div>
<button class="c-button c-highlight__button c-button--inverted ">
<span class="c-button__text">bereken eenvoudig</span>
</button>
</form>
</div>
</div>
<div class="c-highlight__background-container">
<div class="c-circles c-highlight__background">
<div class="c-circle__item c-circle__item-1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1130 1075">
<circle class="c-circle__path" cx="550.1" cy="523" r="500" />
<circle class="c-circle__shape" cx="993.5" cy="291.7" r="4.5" />
<path class="c-circle__shape" d="M1023.8 691.4c0.1 0.1 0.1 0.1 0.2 0.2 0.9 0.7 1.5 1.6 2 2.6 0.8 1.7 1.6 3.5 2.3 5.2 0.1 0.2 0.2 0.4 0.3 0.6l0.1 0.2c0.2 0.4 0.4 0.8 0.5 1.2 0.7 1.6 1.4 3.1 2.1 4.7 0.3 0.6 0.1 1.3-0.4 1.6 -0.3 0.2-0.6 0.3-1 0.2 -0.1 0-0.2 0-0.2-0.1 -2.9-0.8-5.7-1.5-8.6-2.3 -1.4-0.4-2.9-0.8-4.3-1.2 -0.8-0.2-1.4-0.6-2.1-1 -0.9-0.6-1.6-1.4-2.2-2.4 -0.8-1.4-1.1-2.9-0.9-4.6 0-0.4 0.1-0.7 0.2-1.1 0.4-1.3 1-2.5 2-3.4 1.2-1.2 2.7-1.9 4.4-2 0.7-0.1 1.4 0 2.2 0.1 1.1 0.2 2 0.6 2.9 1.2C1023.4 691.1 1023.7 691.3 1023.8 691.4" />
<path class="c-circle__shape" d="M45.6 466.1c0.1-0.1 0.1-0.1 0.1-0.2 0.6-1 1.3-1.8 2.2-2.4 1.6-1.1 3.1-2.1 4.7-3.2 0.2-0.1 0.4-0.3 0.6-0.4l0.2-0.1c0.4-0.3 0.7-0.5 1.1-0.7 1.4-1 2.9-1.9 4.3-2.9 0.5-0.4 1.3-0.3 1.7 0.1 0.2 0.3 0.4 0.6 0.4 0.9 0 0.1 0 0.2 0 0.2 -0.3 3-0.5 5.9-0.8 8.9 -0.1 1.5-0.3 3-0.4 4.5 -0.1 0.8-0.3 1.5-0.7 2.2 -0.5 1-1.1 1.9-2 2.6 -1.3 1-2.7 1.6-4.3 1.7 -0.4 0-0.7 0-1.1 0 -1.4-0.1-2.6-0.6-3.7-1.4 -1.4-1-2.3-2.4-2.8-4 -0.2-0.7-0.3-1.4-0.3-2.2 0-1.1 0.2-2.1 0.7-3.1C45.4 466.5 45.5 466.2 45.6 466.1" />
<circle class="c-circle__shape" cx="136.5" cy="804.7" r="7.5" />
</svg>
</div>
<div class="c-circle__item c-circle__item-2">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1129 1075">
<circle class="c-circle__path" cx="597" cy="566" r="500" />
<circle class="c-circle__shape" cx="205.2" cy="254.9" r="4" />
<circle class="c-circle__shape" cx="1052.2" cy="358.9" r="4" />
</svg>
</div>
<div class="c-circle__item c-circle__item-3">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1129 1075">
<circle class="c-circle__path" cx="566" cy="504" r="500" />
</svg>
</div>
<div class="c-circle__item c-circle__item-4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1129 1075">
<circle class="c-circle__path" cx="506" cy="566" r="500" />
</svg>
</div>
<div class="c-circle__item c-circle__item-5">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1129 1075">
<circle class="c-circle__path" cx="555" cy="503" r="500" />
</svg>
</div>
<div class="c-circle__item c-circle__item-6">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1129 1075">
<circle class="c-circle__path" cx="559" cy="544" r="500" />
</svg>
</div>
</div>
</div>
</section>