CTA Section Aim

V000-50

Hoe te gebruiken?

Kopieer onderstaande HTML en CSS in je template.

Voorvertoning

Alvast beginnen met een basis opmaak?

HTML
Kopiëren<section class="cta-section-aim">
	<div class="container">
		<div class="row">
			<div class="col-12">
				<div class="aim-wrap">
					<div class="row">
						<div class="col-12 col-sm-12 col-md-7 col-lg-8">
							<div class="aim-content">
								<nc-partial-list partials="text,download" name="cta-section-aim-content"></nc-partial-list>
							</div>
						</div>
					</div>
					<div class="py-3 d-block d-md-none"></div>
					<nc-image name="contact-person" ratio="1" width="400" quality="90"></nc-image>
				</div>
			</div>
		</div>
	</div>
</section>

CSS
Kopiërensection.cta-section-aim {
	position: relative;
	padding: 2rem 0;
}

section.cta-section-aim div[data-partial="image"] img {
	position: relative;
	right: unset;
	bottom: 0;
	max-width: 100%;
	text-align: center;
}

section.cta-section-aim div[data-partial="image"] img {
	max-width: 300px;
}

section.cta-section-aim .aim-wrap {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	padding: 2.5rem 2.5rem 0 2.5rem;
	border-radius: var(--panel-radius);
	background-color: var(--primary);
	box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.1);
}

section.cta-section-aim .aim-wrap .aim-content h2 {
	font-size: 1.75rem;
	line-height: 2.25rem;
	color: var(--white);
}

section.cta-section-aim .aim-wrap .aim-content p{
	font-size: 1rem;
	color: var(--white);
}

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

	section.cta-section-aim {
		padding: 7rem 0 5rem 0;
	}

	section.cta-section-aim div[data-partial="image"] {
		position: absolute;
		right: 1.5rem;
		bottom: 0;
		max-width: 300px;
	}

	section.cta-section-aim .aim-wrap {
		padding: 2.5rem 2.5rem;
		overflow: visible;
	}

	section.cta-section-aim .aim-wrap .aim-content h2{
		font-size: 2rem;
		line-height: 2.5rem;
	}
}

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

	section.cta-section-aim .aim-wrap {
		padding: 2.5rem 10rem;
		overflow: visible;
	}

	section.cta-section-aim div[data-partial="image"] {
		position: absolute;
		right: 5rem;
		bottom: -1px;
		max-width: 400px;
	}
}