Vecht cards

V000-40

Een preview om 4 blokken weer te geven. 

Hoe te gebruiken?

Kopieer onderstaande HTML en CSS in je template.

Voorvertoning

Alvast beginnen met een basis opmaak?

HTML
Kopiëren<section class="vecht-cards">
	<div class="container">
		<div class="d-xl-flex align-items-start">
			<div class="card">
				<nc-text name="vecht-card-1"></nc-text>
			</div>
			<div class="card">
				<nc-text name="vecht-card-2"></nc-text>
			</div>
			<div class="card">
				<nc-text name="vecht-card-3"></nc-text>
			</div>
			<div class="card">
				<nc-text name="vecht-card-4"></nc-text>
			</div>
		</div>
	</div>
</section>

CSS
Kopiëren.vecht-cards .card {
	color: #fff;
	background-color: var(--secondary);
	border: none;
	padding: 2rem;
	min-width: 100%;
	margin-top: 1.5rem;
}

.vecht-cards .card:nth-child(1) {
	background: linear-gradient(180deg, var(--primary), var(--secondary));
}

.vecht-cards .card:nth-child(2) {
	background: linear-gradient(130deg, var(--secondary), var(--primary));
}

.vecht-cards .card:nth-child(3) {
	background: linear-gradient(130deg, var(--primary), var(--secondary));
}

.vecht-cards .card:nth-child(4) {
	background: linear-gradient(130deg, var(--secondary), var(--primary));
}

@media screen and (min-width: 768px) {
	.vecht-cards .card {
		min-width: 49%;
		width: 49%;
		display: inline-block;
	}

	.vecht-cards .card:nth-child(2) {
		margin-left: 2%;
	}

	.vecht-cards .card:nth-child(4) {
		margin-left: 2%;
	}
}

@media screen and (min-width: 1200px) {
	.vecht-cards .card {
		min-width: 25%;
	}

	.vecht-cards .card:nth-child(2) {
		margin-top: 95px;
		margin-left: 0;
		transform: translateY(40px);
	}

	.vecht-cards .card:nth-child(4) {
		margin-top: 120px;
		margin-left: 0;
		transform: translateY(10px);
	}
}