Kweek-section

V000-35

Hoe te gebruiken?

Kopieer onderstaande HTML en CSS in je template.

Voorvertoning

Alvast beginnen met een basis opmaak?

Neem de onderstaande code over in de website om alvast met een basis opmaak te beginnen.
HTML
<section class="kweek-section position-relative">
	<div class="container-fluid">
		<nc-image name="img" width="1399" height="368" attributes="class=kweek-section-image" fit="contain"></nc-image>
	</div>
	<div class="container">
		<div class="text-center">
			<div class="kweek-section-content">
				<nc-partial-list name="planten-kopen" partial-attributes="width=960" partials="text,download,image,youtube" default-partials="text" limit="2"></nc-partial-list>
			</div>
		</div>
	</div>
	<div class="py-5"></div>
</section>
CSS
section.kweek-section::before {
	background-color: var(--primary);
	content: "";
	position: absolute;
	display: flex;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 90%;
	z-index: -1;
}

@media only screen and (min-width: 768px) {
	section.kweek-section::before {
		height: 80%;
	}
}

@media only screen and (min-width: 992px) {
	section.kweek-section::before {
		height: 75%;
	}
}

section.kweek-section div[data-partial="image"] {
	width: 100%;
}

html[data-logged="false"] section.kweek-section .kweek-section-image div[data-partial="image"] {
	display: flex;
	justify-content: center;
}

section.kweek-section .kweek-section-image,
section.kweek-section .kweek-section-image div[data-partial="image"]>div {
	max-width: 1800px;
	flex-grow: 1;
	margin: auto;
}

section.kweek-section .kweek-section-image img {
	border-radius: var(--panel-radius);
}

section.kweek-section .kweek-section-content {
	margin-top: 1.5rem;
}

@media only screen and (min-width: 992px) {
	section.kweek-section .kweek-section-content {
		margin-top: 3rem;
	}
}