Farm

V281-03

De footer SPNA, met bijna geen SPANnetjes er in.

Hoe te gebruiken?

In de config pas het veld 'navbar.footer.style' aan naar 'farm'.

Voorvertoning

Alvast beginnen met een basis opmaak?

Neem de onderstaande code over in de website om alvast met een basis opmaak te beginnen.
CSS
/* Footer. */
footer.nav-footer .top {
	padding-top: 5rem;
	padding-bottom: 5rem;
}

footer.nav-footer .bottom {
	padding-bottom: 0.5rem;
}

footer.nav-footer a {
	color: inherit;
}

footer.nav-footer .contact-address-content {
	display: flex;
	align-items: center;
	margin-bottom: 1rem;
}
footer.nav-footer .contact-address-content address {
	margin-bottom: 0;
}

footer.nav-footer .top .title,
footer.nav-footer .top .contact-address-title {
	font-weight: 700;
	font-size: 1.25em;
	margin-bottom: 0.375rem;
}

footer.nav-footer .top i[class^="fa-"]+a {
	margin-left: 0.375rem;
}

footer.nav-footer .top .footer-socials {
	margin-bottom: 1.5rem;
}

footer.nav-footer .top .navlist {
	margin-bottom: 1.5rem;
}
footer.nav-footer .top .navlist .nav-link {
	padding-left: 0;
	padding-right: 0;
}

footer.nav-footer .top .logo {
	display: block;
	max-width: 16rem;
	margin-left: auto;
}

@media screen and (max-width: 575px) {
	footer.nav-footer .top .logo {
		margin-right: auto;
	}
}

footer.nav-footer a:focus,
footer.nav-footer a:hover,
footer.nav-footer a:focus address,
footer.nav-footer a:hover address {
	color: var(--primary-light);
	text-decoration: underline;
}

footer.nav-footer {
	background-color: var(--primary-bg);
}

footer.nav-footer .top i[class^="fa-"] {
	color: var(--primary);
}