NIBC Lot

Default

Welkom! Laten we samen op zoek gaan naar de perfecte hypotheek voor jou.

zonnepanelen
hypotheken
sparen

… een hypotheek zonder zorgen. Ik heb al genoeg aan mij hoofd.

… een voordelige rentevoet, zodat ik ook nog eens kan gaan shoppen.

… tips voor geslaagde housewarming, jij regelt de rest wel hé.


			
				<section class="c-chat ">
	<div class="c-chat__container l-container">
		<div class="c-chat__grid l-grid l-grid--with-spacing l-grid--align-middle">
			<div class="l-grid__col l-grid__col--5@desktop">
				<h3 class="c-chat__title">Welkom! Laten we samen op zoek gaan naar de perfecte hypotheek
					voor jou.</h3>
				<div class="c-question c-chat__input">
					<div class="c-question__wrapper">
						<input id="question-input" class="c-question__input" type="text" name="question-input" placeholder="Hoi lot, kan je me helpen met..." value="" />
						<div class="c-question__button">
							<span class="fal fa-paper-plane c-question__icon"></span>
						</div>
					</div>
				</div>
				<ul class="c-chat__autocomplete">
					<li class="c-chat__autocomplete__item">zonnepanelen</li>
					<li class="c-chat__autocomplete__item">hypotheken</li>
					<li class="c-chat__autocomplete__item">sparen</li>
				</ul>
			</div>
			<div class="l-grid__col l-grid__col--6@desktop l-grid__col--offset-1@desktop u-margin-top-6x@below-desktop">
				<div class="c-bubble c-chat__item c-bubble--arrow-left-responsive c-chat__item--odd">
					<div class="c-bubble__content">
						<div class="c-bubble__text">… een hypotheek <strong>zonder zorgen</strong>. Ik heb
							al genoeg aan mij hoofd.</div>
						<div class="c-bubble__visual">
							<div class="c-bubble__image-background c-bubble__image-background--pink"></div>
							<div class="c-bubble__image-container" style="background-image: url('/assets/images/general/chat/chat-01.jpg');">
								<svg class="c-bubble__image" viewBox="0 0 1 1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
									<clipPath class="c-bubble__mask" id="c-bubble__mask" clipPathUnits="objectBoundingBox">
										<path id="c-bubble__path" d="M.2337.1505.7211.1846A.3253.3253,0,0,1,.8627.2155.197.197,0,0,1,.9379.2838a.324.324,0,0,1,.0444.138L.997.5094A.2186.2186,0,0,1,.8177.761L.8043.7628.2617.82a.2185.2185,0,0,1-.24-.1945l0-.0038L.0008.3875A.2186.2186,0,0,1,.2337.1505Z" />
									</clipPath>
								</svg>
							</div>
						</div>
					</div>
				</div>
				<div class="c-bubble c-chat__item c-bubble--arrow-left-responsive c-chat__item--even">
					<div class="c-bubble__content">
						<div class="c-bubble__text">… een <strong>voordelige rentevoet</strong>, zodat ik ook
							nog eens kan gaan shoppen.</div>
						<div class="c-bubble__visual">
							<div class="c-bubble__image-background c-bubble__image-background--blue"></div>
							<div class="c-bubble__image-container" style="background-image: url('/assets/images/general/chat/chat-02.jpg');">
								<svg class="c-bubble__image" viewBox="0 0 1 1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
									<clipPath class="c-bubble__mask" id="c-bubble__mask" clipPathUnits="objectBoundingBox">
										<path id="c-bubble__path" d="M.2337.1505.7211.1846A.3253.3253,0,0,1,.8627.2155.197.197,0,0,1,.9379.2838a.324.324,0,0,1,.0444.138L.997.5094A.2186.2186,0,0,1,.8177.761L.8043.7628.2617.82a.2185.2185,0,0,1-.24-.1945l0-.0038L.0008.3875A.2186.2186,0,0,1,.2337.1505Z" />
									</clipPath>
								</svg>
							</div>
						</div>
					</div>
				</div>
				<div class="c-bubble c-chat__item c-bubble--arrow-left-responsive c-chat__item--odd">
					<div class="c-bubble__content">
						<div class="c-bubble__text">… tips voor <strong>geslaagde housewarming</strong>, jij
							regelt de rest wel hé.</div>
						<div class="c-bubble__visual">
							<div class="c-bubble__image-background c-bubble__image-background--pink"></div>
							<div class="c-bubble__image-container" style="background-image: url('/assets/images/general/chat/chat-03.jpg');">
								<svg class="c-bubble__image" viewBox="0 0 1 1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
									<clipPath class="c-bubble__mask" id="c-bubble__mask" clipPathUnits="objectBoundingBox">
										<path id="c-bubble__path" d="M.2337.1505.7211.1846A.3253.3253,0,0,1,.8627.2155.197.197,0,0,1,.9379.2838a.324.324,0,0,1,.0444.138L.997.5094A.2186.2186,0,0,1,.8177.761L.8043.7628.2617.82a.2185.2185,0,0,1-.24-.1945l0-.0038L.0008.3875A.2186.2186,0,0,1,.2337.1505Z" />
									</clipPath>
								</svg>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="c-chat__circles-container">
		<div class="c-circles c-chat__circles c-circle--color-primary">
			<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>

Result

Welkom! Laten we samen op zoek gaan naar de perfecte hypotheek voor jou.

zonnepanelen

Een duurzame woning is niet alleen een ecologisch verantwoorde keuze.

Ontdek de lot voorduurzaam hypotheek en enkele energiebesparende tips.


			
				<section class="c-chat l-section ">
	<div class="c-chat__container l-container">
		<div class="c-chat__grid l-grid l-grid--with-spacing l-grid--align-middle">
			<div class="l-grid__col l-grid__col--5@desktop">
				<h3 class="c-chat__title">Welkom! Laten we samen op zoek gaan naar de perfecte hypotheek
					voor jou.</h3>
				<div class="c-bubble c-chat__search c-bubble--theme-pink">
					<div class="c-bubble__content">
						<div class="c-bubble__text">zonnepanelen</div>
						<div class="c-bubble__close">
							<span class="fa fa-times"></span>
						</div>
					</div>
				</div>
				<div class="c-question c-chat__input">
					<div class="c-question__wrapper">
						<input id="question-input" class="c-question__input" type="text" name="question-input" placeholder="Hoi lot, kan je me helpen met..." value="" />
						<div class="c-question__button">
							<span class="fal fa-paper-plane c-question__icon"></span>
						</div>
					</div>
				</div>
			</div>
			<div class="l-grid__col l-grid__col--6@desktop l-grid__col--offset-1@screen u-margin-top-6x@below-desktop">
				<div class="c-bubble c-chat__item c-bubble--arrow-bottom pulsate-fwd ">
					<div class="c-bubble__content">
						<div class="c-bubble__text">
							<p>Een duurzame woning is niet alleen een ecologisch
								verantwoorde keuze.</p>
							<p>Ontdek de <strong>lot voorduurzaam
									hypotheek</strong> en enkele energiebesparende
								<strong>tips</strong>.</p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="c-chat__circles-container">
		<div class="c-circles c-chat__circles c-circle--color-primary">
			<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>