Burb

P202-17 / V202-17

Een blog template die voor het weergeven van personeel/medewerkers of teamleden gebruikt kan worden. De verwachte/ondersteunde extra velden zijn: Functie, E-mail, Telefoonnummer en Linkedin. Deze blog is gebouwd zonder vervolgpagina.

Hoe te gebruiken?

Wanneer dit product verkocht is kan je dit in het NASA systeem aanvinken en kan je deze template gebruiken voor jouw project.

Kopieer onderstaande styling om het belangrijkste gelijk over te nemen. 

Voorvertoning

Alvast beginnen met een basis opmaak?

CSS
Kopiëren/* Blog template burb */

.blog-template-burb .blog-item-preview {
	position: relative;
	background-color: var(--secondary);
	padding: 2rem 1rem 10rem;
	margin: 5rem 0;
	border-radius: var(--panel-radius);
}

.blog-template-burb .blog-item-link {
	pointer-events: none;
}

#adminbar+* .blog-template-burb .blog-item-link {
	pointer-events: all;
}

.blog-template-burb .blog-item-preview .blog-item-logo {
	background-color: #fff;
	position: absolute;
	top: 0;
	left: 0;
	width: 90px;
	height: 90px;
	padding: 0.5rem;
	border-radius: 50%;
	box-shadow: 0 3px 6px #00000029;
	transform: translate(0, -75%);
	display: flex;
	align-items: center;
}

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

	.blog-template-burb .blog-item-link {
		pointer-events: none;
		display: block;
		width: 50%;
	}

	.blog-template-burb .blog-item-preview {
		padding: 3rem;
	}

	.blog-template-burb .blog-item-preview .blog-item-logo {
		transform: translate(-50%, -50%);
	}
}

.blog-template-burb .blog-item-preview .image {
	text-align: right;
}

.blog-template-burb .blog-item-preview .image img {
	max-width: 200px;
	position: absolute;
	right: 1rem;
	bottom: 0;
}


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

	.blog-template-burb .blog-item-preview .image img {
		position: absolute;
		right: 0;
		bottom: 0;
		transform: translate(25%, 15%);
	}
	.blog-template-burb .blog-item-preview .image img {
		max-width: 260px;
	}
}

.blog-template-burb .blog-item-preview .title {
	font-size: 2rem;
}

.blog-template-burb a {
	text-decoration: none;
}

.blog-template-burb .blog-item-preview .blog-item-contact,
.blog-template-burb .blog-item-preview .blog-item-contact .socials {
	margin-top: 1rem;
}

.blog-template-burb .blog-item-preview .blog-item-contact .blog-field-e-mail::before {
	font: var(--fa-font);
	content: "\f0e0";
	margin-right: 0.5rem;
}

.blog-template-burb .blog-item-preview .blog-item-contact .blog-field-telefoonnummer::before {
	font: var(--fa-font);
	content: "\f095";
	margin-right: 0.5rem;
}

/* Blog collection */

.blog-template-burb.blog-collection{
	overflow: hidden;
}

.blog-template-burb.blog-collection .header div[data-partial="partial-list"] {
	margin-bottom: 3rem;
}

.blog-template-burb .blog-collection-items {
	margin-top: 6rem;
}

@media only screen and (min-width: 992px) {
	.blog-template-burb .row [class^="col-"] {
		padding-right: 3rem;
	}
}