Section floating-box-right

V000-46

Hoe te gebruiken?

Neem onderstaande markup en styling over in jouw template en stylesheet.

Voorvertoning

Alvast beginnen met een basis opmaak?

HTML
Kopiëren<section class="section-floating-box floating-right">
	<div class="floating-img">
		<nc-image name="{%name%}-backdrop" width="800" height="800" ratio="1" attributes="class=image-to-background"></nc-image>
	</div>
	<div class="container">
		<div class="row">
			<div class="col-12 col-sm-12 col-md-9 col-lg-9">
				<div class="floating-box bg-tertiary">
					<nc-partial-list partials="text,download,form,faq" name="{%name%}-content"></nc-partial-list>
				</div>
			</div>
		</div>
	</div>
</section>

CSS
Kopiërensection.section-floating-box {
	position: relative;
	overflow: hidden;
	z-index: 1;
}

section.section-floating-box .floating-img {
	position: absolute;
	width: 100%;
	height: 100%;
}

section.section-floating-box.floating-left .floating-img {
	top: 0;
	left: 0;
}

section.section-floating-box.floating-right .floating-img {
	top: 0;
	right: 0;
}

section.section-floating-box .floating-box {
	position: relative;
	display: flex;
	z-index: 1;
	flex-direction: column;
	padding: 2rem;
	margin: 12rem 0 6rem 0;
}

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

	/* Breakpoints Medium (md) */
	section.section-floating-box .floating-img {
		width: 50%;
	}

	section.section-floating-box .floating-box {
		padding: 4rem;
	}
}

/* [IMAGE BACKGROUND] */
body:not([data-editor-mode="content"]) .image-to-background {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	z-index: -1;
}

body:not([data-editor-mode="content"]) .image-to-background div {
	height: 100%;
}

body:not([data-editor-mode="content"]) .image-to-background img {
	height: 100%;
	object-fit: cover;
	object-position: 50%;
}