Header work

V000-51

Hoe te gebruiken?

Kopieer en plak onderstaande code in je templates.

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="header-work position-relative text-white">
	<nc-image-carousel name="header" width="1600" loading="eager" quality="90" ratio="1"></nc-image-carousel>
</section>
CSS
section.header-work .carousel-item img {
	min-height: 400px;
	max-height: 700px;
	object-fit: cover;
}

section.header-work .carousel-item .carousel-caption {
	font-family: var(--font-family-heading);
	text-align: left;
	max-width: var(--container-width);
	margin: 0 auto;
	padding-left: 1rem;
	padding-right: 1rem;
	left: unset;
	right: unset;
	width: 100%;
}

@media only screen and (min-width: 768px) {
	section.header-work .carousel-item .carousel-caption {
		left: 1rem;
		right: 1rem;
	}
}

section.header-work .carousel-item .carousel-caption p:first-child {
	font-size: 3rem;
	line-height: 1;
	text-shadow: 0 3px 6px rgba(0,0,0, 0.16);
}

@media screen and (min-width: 1200px) {
	section.header-work .carousel-item img {
		max-height: 900px;
	}
}