Eco

P202-19 / V202-19

Een blog template die voor het weergeven van projecten, nieuws of blog artikelen gebruikt kan worden. Klik hier voor een voorbeeld. Het gebruiken van minimaal 3 blog velden wordt aangeraden.

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 de belangrijkste gelijk over te nemen. 

Voorvertoning

Alvast beginnen met een basis opmaak?

CSS
Kopiëren/* Blog Eco item */

.blog-template-eco.blog-item .breadcrumb{
	display: none;
}

.blog-template-eco.blog-item {
	overflow: hidden;
}

body:not([data-editor-mode="layout"], [data-editor-mode="content"]) .blog-template-eco.blog-item div.header h1 {
	color: var(--white);
	font-size: 45px;
}

body:not([data-editor-mode="layout"], [data-editor-mode="content"]) .blog-template-eco .header .header-content {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	color: #000;
}

@media screen and (min-width: 768px) {
	.blog-template-eco.blog-item div.header h1 {
		font-size: 65px;
	}
}

@media screen and (min-width: 992px) {
	.blog-template-eco.blog-item div.header h1 {
		font-size: 70px;
		width: 50%;
		margin-bottom: 2rem;
	}
}

/* Zet op display "block" om eventueel velden onder de h1 weer te geven */

.blog-template-eco.blog-item div.header .header-fields {
	margin-bottom: 2rem;
	color: #fff;
	display: none;
}

.blog-template-eco div.header div[data-partial="partial-list"] div[data-partial="image"] img,
.blog-template-eco div.header div[data-partial="partial-list"] video,
.blog-template-eco div.header div[data-partial="partial-list"] .embed-responsive {
	max-height: 90vh;
	min-height: 500px;
	object-fit: cover;
}

.blog-template-eco.blog-item .fields .fields-block-title {
	font-weight: bold;
	color: var(--primary);
}

/* Blog Eco sections */

.blog-template-eco section{
	padding: 0 0 2.5rem;
}

.blog-template-eco section+section {
	padding-top: 0!important;
}

.blog-template-eco section.eco-first-content {
	padding: 2.5rem 0;
}

.blog-template-eco section.eco-first-content .content{
	font-size: 23px;
	padding: 1rem 0;
}

.blog-template-eco div[data-partial="partial-list"] section.eco-img-wide:nth-last-child(1){
	padding-bottom: 0!important;
}

.blog-template-eco .project-eco-item section.image-background {
	padding: 9rem 0 3rem 0;
	margin-bottom: 5rem;
}

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

	.blog-template-eco section {
		padding: 0 0 5rem;
	}

	.blog-template-eco section.eco-first-content .content {
		padding: 0;
	}

	.blog-template-eco .eco-home-intro img {
		border-radius: var(--panel-radius) 0 0 var(--panel-radius);
	}

	section.eco-text-9-image-3 .image-wrapper-eco img {
		border-radius: 0 var(--panel-radius) var(--panel-radius) 0;
	}

}

.blog-template-eco section.eco-text-9-image-3 {
	position: relative;
}

body:not([data-editor-mode="content"]) .blog-template-eco section.eco-text-9-image-3 .image-wrapper-eco * {
	width: 100%;
	height: 100%;
	max-height: 650px;
	object-fit: cover;
}

.blog-template-eco .image-background {
	padding: 2.5rem 0 !important;
}

.blog-template-eco .image-to-background-text p {
	color: #fff;
}

.blog-template-eco section.eco-text-9-image-3 .text-wrapper-eco {
	padding: 1.5rem 0;
}

@media screen and (min-width: 992px) {
	.blog-template-eco section.eco-text-9-image-3 .text-wrapper-eco {
		display: flex;
        flex-direction: column;
        justify-content: end;
		height: 100%;
		font-size: 23px;
	}

	.blog-template-eco .image-background {
		padding: 5rem 0 !important;
	}
}

body:not([data-editor-mode="content"]) .blog-template-eco .image-to-background {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	z-index: -1;
}
body:not([data-editor-mode="content"]) .blog-template-eco .image-to-background div {
	height: 100%;
}
body:not([data-editor-mode="content"]) .blog-template-eco .image-to-background img {
	height: 100%;
	object-fit: cover;
	object-position: 50%;
}

.blog-template-eco section.image-background::after {
	content: "";
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	background: linear-gradient(90deg, black 0%, rgba(0,0,0.44) 5% ,rgb(0, 0, 0, 0) 100%);
	top: 0;
	left: 0;
	z-index: -1;
}

/* Eco collection */

.blog-template-eco.blog-collection {
    padding: 2.5rem 0;
}

@media only screen and (min-width: 992px) {
	.blog-template-eco.blog-collection {
		padding: 5rem 0;
	}
}

.blog-template-eco .blog-item-preview {
	position: relative;
	overflow: hidden;
	border-radius: var(--panel-radius);
	margin-bottom: 35px;
}

.blog-template-eco .blog-item-preview .image {
	position: relative;
}

.blog-template-eco .blog-item-preview .image::after {
	content: "";
	display: block;
	background-color: var(--primary);
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	pointer-events: none;
	opacity: 0;
	transition: opacity .2s ease-in-out;
}

.blog-template-eco .blog-item-preview:hover .image::after {
	opacity: 0.5;
}

.blog-template-eco .blog-item-preview .title {
	font-size: 2.2rem;
	line-height: 2.5rem;
	color: var(--white);
	text-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
	margin-bottom: 0;
	transition: transform .2s ease-in-out;
	font-weight: 300;
}

.blog-template-eco.blog-collection .blog-item-preview:hover .title {
	transform: translateY(-35px);
}

.blog-template-eco.blog-collection .blog-item-preview .title::after {
	content: "\f178";
	font: var(--fa-font);
	margin-left: 1rem;
}

.blog-template-eco.blog-collection .fields span[class^="blog-field"],
.blog-template-eco .blog-item-preview .intro,
.blog-template-eco .blog-item-preview .readmore {
	display: none;
}

.blog-template-eco.blog-collection .fields span[class^="blog-field"]:nth-child(1){
	display: block;
	opacity: 0;
	position: absolute;
	bottom: 1rem;
	transition: opacity .2s ease-in-out;
}

.blog-template-eco.blog-collection .blog-item-preview:hover .fields span[class^="blog-field"]:nth-child(1) {
	opacity: 1;
}

.blog-template-eco .blog-item-preview .content {
	position: absolute;
	bottom: 0;
	width: 100%;
	padding: 1rem 1.2rem;
	color: var(--white);
}

.blog-template-eco .blog-collection .blog-item-preview img.img-fluid {
	aspect-ratio: 746 / 652;
	object-fit: cover;
}

@media screen and (min-width: 576px) {
	.blog-template-eco .blog-item-preview .content {
		padding: 1.25rem 1.75rem;
	}
}