Section zoeloe

V000-42

Hoe te gebruiken?

Kopieer onderstaande code in je template.

Voorvertoning

Alvast beginnen met een basis opmaak?

HTML
Kopiëren<section class="section-zoeloe position-relative">
	<div class="bg-primary split-text-block text-white">
		<div class="container">
			<div class="row">
				<div class="col-12 col-md-7 col-xl-8 offset-md-5 offset-xl-4">
					<nc-text name="split-block-text-1"></nc-text>
				</div>
			</div>
		</div>
	</div>

	<nc-image name="img-zoeloe" width="700" quality="90" attributes="class=h-100"></nc-image>

	<div class="bg-white split-text-block">
		<div class="container">
			<div class="row">
				<div class="col-12 col-md-7 offset-md-5 offset-xl-5">
					<nc-text name="split-block-text-2"></nc-text>
				</div>
			</div>
		</div>
	</div>
</section>

CSS
Kopiëren.section-zoeloe .split-text-block {
	padding: 2rem 0;
}

@media screen and (min-width: 768px) {
	.section-zoeloe div[data-partial="image"] {
		position: absolute;
		height: 100%;
		top: 0;
		left: 0;
		width: 39%;
		clip-path: polygon(0% 0, 68% 0, 100% 100%, 0 100%)
	}

	.section-zoeloe div[data-partial="image"] img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

}

@media screen and (min-width: 1200px) {

	.section-zoeloe .split-text-block {
		padding: 4rem 0;
	}

}