Inter

P202-15 / V202-15

Een blog template die voor het weergeven van projecten, nieuws of blog artikelen gebruikt kan worden. Klik hier voor een voorbeeld. Het veld "Categorie" is verplicht en kan als enige extra veld gebruikt worden als filter.

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.

Voor de meest overeenkomende styling moet er een font dikte van 300 en 400 ingeladen worden.

Kopieer onderstaande styling om de belangrijkste gelijk over te nemen. 

Voorvertoning

Alvast beginnen met een basis opmaak?

CSS
Kopiëren.blog-template-inter .blog-item-preview {
	position: relative;
	z-index: 0;
	margin-bottom: 2rem;
}

.blog-template-inter .blog-item-preview::after {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg,
			rgba(0, 0, 0, 0.5) 0%,
			rgba(255, 255, 255, 0.1) 100%);
	z-index: 0;
	border-radius: var(--panel-radius);
	pointer-events: none;
}

.blog-template-inter .blog-item-preview .image {
	overflow: hidden;
}

.blog-template-inter .blog-item-preview .image img {
	transition: transform 0.4s ease-in-out;
}

.blog-template-inter .blog-item-preview:hover .image img,
.blog-template-inter .blog-item-preview:focus .image img {
	transform: scale(1.075);
}

.blog-template-inter .blog-item-preview .content {
	position: absolute;
	bottom: 0;
	left: 2%;
	z-index: 1;
}

.blog-template-inter .blog-item-preview .content .intro {
	display: none;
}

.blog-template-inter .blog-item-preview * {
	border-radius: var(--panel-radius);
}

.blog-template-inter .blog-item-preview .content .title,
.blog-template-inter .blog-item-preview .content {
	color: #fff;
	text-shadow: 2px 2px 10px rgb(0 0 0);
}

.blog-template-inter .blog-item-preview .content .title {
	font-size: 1.875rem;
}

.blog-template-inter .blog-item-preview .fields ul li {
	font-size: 1.1rem;
	font-weight: 400;
}

@media only screen and (min-width: 992px) {
	.blog-template-inter.blog-item-preview .content .title {
		font-size: 2rem;
	}

	.blog-item-preview .fields ul li {
		line-height: 1.35;
		font-size: 1.5rem;
	}
}

.blog-template-inter .blog-item-preview .fields ul li::before,
.blog-template-inter.blog-item .fields ul li::before {
	display: inline-block;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font: var(--fa-font);
	color: var(--primary);
	width: 1.25em;
	font-size: 1.25rem;
}

/* Voeg meerdere childs met icoon toe bij meerdere blog velden: */

.blog-template-inter .blog-item-preview .fields ul li:nth-child(1)::before,
.blog-template-inter.blog-item .fields ul li:nth-child(1)::before {
	content: "\f3c5";
}

/* .blog-template-inter .blog-item-preview .fields ul li:nth-child(2)::before,
.blog-template-inter.blog-item .fields ul li:nth-child(2)::before {
	content: "\f3c5";
} */

.blog-template-inter .blog-header {
	position: relative;
	border-radius: var(--panel-radius);
	margin: 2.5rem 0;
}

.blog-template-inter .blog-header img {
	border-radius: var(--panel-radius);
}

.blog-template-inter.blog-item .btn-link {
	display: none;
}

.blog-template-inter .breadcrumb {
	background-color: transparent;
	align-items: center;
	padding: 0;
}

.blog-template-inter .breadcrumb .breadcrumb-item.active {
	color: var(--secondary);
}

.blog-template-inter .breadcrumb li.breadcrumb-item:not(:nth-child(1)):before {
	display: inline-block;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font: var(--fa-font);
	color: var(--primary);
	content: "\f178";
	vertical-align: middle;
	float: none;
}

.blog-template-inter .blog-content .content,
.blog-template-inter .blog-related p{
	font-size: 1.3rem;
	line-height: 1.2;
}

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

	.blog-template-inter .blog-content .content,
	.blog-template-inter .blog-related-text {
		font-size: 1.875rem;
		line-height: 1.2;
		font-weight: 300;
	}
}

.blog-template-inter.blog-item .blog-content img {
	border-radius: var(--panel-radius);
}

.blog-template-inter.blog-item .fields ul li {
	margin-bottom: 0.5rem;
}

.blog-template-inter.blog-item .image-album-item img {
	aspect-ratio: 3.5/2;
	object-fit: cover;
	border-radius: var(--panel-radius);
}

.blog-template-inter.blog-item .flex-auto-responsive>* {
	min-width: 277.5px;
}

@media only screen and (min-width: 992px) {
	.blog-template-inter.blog-item .flex-auto-responsive>* {
		min-width: 350px;
	}

	.blog-template-inter.blog-item .blog-related h2 {
		font-size: 4rem;
	}

}

.blog-template-inter.blog-item .image-album-slider-animated .flex-slider {
	animation-duration: 35s;
}

.blog-template-inter.blog-item .image-album-slider-animated a {
	margin: 0 1rem 0 0;
}

.blog-template-inter.blog-item .blog-interview-extra-content h2 {
	font-size: 1.875rem;
}