Service

V000-25

Een sectie om te gebruiken als header.

Hoe te gebruiken?

Kopieer onderstaande HTML en CSS in je template

Voorvertoning

Alvast beginnen met een basis opmaak?

HTML
Kopiëren<section class="header-service">
	<div class="position-relative">
		<div class="clipped-shadow">
			<div class="position-relative header-split-left z-2 service-clipped-content">
				<div class="container-max">
					<nc-module-output></nc-module-output>
				</div>
			</div>
		</div>
		<div class="header-split-right service-clipped-img">
			<nc-image name="header-split-right" width="800" loading="eager"></nc-image>
		</div>
	</div>
</section>

CSS
Kopiëren.header-service{
	overflow: hidden;
}
@media screen and (min-width: 992px) {
	.header-service {
		overflow: visible;
	}
}

.header-service .container-max {
	padding: 0 15px;
}

.header-service .service-clipped-content {
	padding: 3rem 2rem;
}

@media only screen and (min-width: 992px){
	.header-service .service-clipped-content {
		padding: 8rem 3rem;
	}
}

.header-service h1 {
	margin-bottom: 30px;
	position: relative;
}

.header-service h1::after {
	content: "";
	position: absolute;
	background-color: #122435;
	height: 3px;
	width: 95px;
	bottom: -15px;
	left: 0;
}

.header-service .service-clipped-content h1::after {
	background-color: #fff;
}

.header-service .header-split-right {
	min-height: 600px;
	margin-top: -160px;
}

.header-service .header-split-right .img-fluid {
	height: 100%;
	width: 100%;
	object-fit: cover;
	min-height: 600px;
}

.header-service .clipped-shadow {
	filter: drop-shadow(0px 7px 16px rgba(1, 32, 85, 0.53));
}

.header-service .service-clipped-content {
	width: 120vw;
	height: 100%;
	clip-path: polygon(0% 0, 100% 0, 78% 100%, 0 100%);
	color: #fff;
	background-color: var(--primary);
}

.header-service .header-split-left .container-max .content {
	width: 80%;
}

@media screen and (min-width: 992px) {
	.header-service .service-clipped-content{
		width: 60%;
	}

	.header-service .header-split-right {
		min-height: 0;
		top: 0;
		position: absolute;
		right: 0;
		bottom: -10%;
		width: 52%;
		margin-top: 0;
	}

	.header-service .header-split-right * {
		width: 100%;
		height: 100%;
	}

	.header-service .service-clipped-img .img-fluid {
		width: 100%;
		height: 100%;
		clip-path: polygon(28% 0, 100% 0, 100% 100%, 00% 100%);
	}

	.header-service .header-split-left {
		min-height: 550px;
	}
}

@media screen and (min-width: 1200px) {
	.header-service .header-split-right {
		width: 47.5%;
	}

	.header-service .service-clipped-img .img-fluid {
		clip-path: polygon(34% 0, 100% 0, 100% 100%, 00% 100%);
	}

	.header-service .service-clipped-content {
		width: 67%;
	}

	.header-service .service-clipped-content {
		padding-top: 150px;
		padding-bottom: 80px;
	}
}

@media screen and (min-width: 1400px) {
	.header-service .header-split-left {
		min-height: 600px;
	}

	.header-service .container-max {
		padding-left: calc((100vw - 1150px) / 2 + 15px);
		max-width: none;
	}
}