House

P202-25 / V202-25

Een blog template die voor het weergeven van projecten, nieuws of blog artikelen gebruikt kan worden. 

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. 

Ook staat hier de code voor een eventuele blog feed op een andere pagina.

Voorvertoning

Alvast beginnen met een basis opmaak?

Neem de onderstaande code over in de website om alvast met een basis opmaak te beginnen.
HTML
<div class="container">
	<nc-blog-feed name="blog-feed" columns="1" collection="TODO:" rows="99" attributes="class=blog-template-house" view="slider"></nc-blog-feed>
</div>
CSS
/* BLOG FEED*/

@media only screen and (min-width: 768px) {
	div[data-partial="blog-feed"].blog-template-house .flex-slider .blog-item-preview {
		min-width: 85%;
	}
}

/* BLOG*/

.blog-template-house.blog-item {
	overflow: hidden;
	padding-bottom: 3rem;
}

.blog-template-house.blog-item .blog-content .btn-link {
	color: #fff;
	text-transform: none;
	text-decoration: underline;
	padding-left: 0;
	font-size: 90%;
}

.blog-template-house.blog-item .blog-content .btn-link:hover {
	text-decoration: none;
}

.blog-template-house.blog-item .blog-content {
	background-color: var(--primary);
}

@media only screen and (min-width: 768px) {
	.blog-template-house.blog-item .blog-content {
		background-color: transparent;
	}

	.blog-template-house .blog-content .unclamp-left-clamp-right {
		gap: 1rem;
	}
}

.blog-template-house.blog-item .blog-content .blog-content-text {
	padding: 1.5rem;
	color: #fff;
	background-color: var(--primary);
}

.blog-template-house.blog-item .blog-extra-content {
	padding-bottom: 4rem;
}

@media only screen and (min-width: 1200px) {
	.blog-template-house.blog-item .blog-content {
		margin-right: 12.5%;
	}

	.blog-template-house.blog-item .blog-content .blog-content-text {
		padding: 6rem 3rem 6rem 6rem;
		color: #fff;
		background-color: var(--primary);
	}

	.blog-template-house.blog-item .blog-extra-content {
		margin-left: 12.5%;
		margin-top: 0.5rem;
	}

}

.blog-template-house.blog-item .blog-extra-content .image-album-item img {
	aspect-ratio: 3.5/2;
	object-fit: cover;
}

.blog-template-house.blog-item .blog-content .blog-content-text h1,
.blog-template-house.blog-item .blog-content .blog-content-text p {
	color: #fff;
}

.blog-template-house.blog-item .blog-content .blog-content-text h1 {
	font-size: 1.75rem;
}

/* Collection */

.blog-template-house.blog-collection {
	padding: 2rem 0;
}

.blog-template-house .blog-item-preview {
	background-color: var(--secondary);
	position: relative;
	margin: 1rem 0;
}

.blog-template-house .blog-item-preview .title,
.blog-template-house .blog-item-preview p {
	color: #fff;
}

.blog-template-house .blog-item-preview .title {
	font-size: 1.25rem;
}

.blog-template-house .blog-item-preview .content {
	position: relative;
	padding: 2rem;
}

.blog-template-house .blog-item-preview .blog-item-preview-image img {
	object-fit: cover;
	aspect-ratio: 1/1;
}

@media only screen and (min-width: 992px) {
	.blog-template-house .blog-item-preview .blog-item-link {
		display: flex;
	}

	.blog-template-house .blog-item-preview .blog-item-preview-image,
	.blog-template-house .blog-item-preview .blog-item-preview-content {
		width: 50%;
	}

	.blog-template-house .blog-item-preview .title {
		font-size: 1.75rem;
	}

	.blog-template-house .blog-item-preview .blog-item-preview-image img {
		height: 100%;
	}

	.content-subtemplate-home .blog-template-house .blog-item-preview {
		margin: 1rem 2rem;
	}
}

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

	.blog-template-house .blog-item-preview .blog-item-preview-content {
		padding: 6rem 4rem;
	}

}

.blog-template-house .blog-item-preview .readmore {
	position: absolute;
	bottom: 0;
	right: 0;
	transform: translateY(10%);
	background-color: var(--primary);
	padding: 0.5rem 1rem;
	font-family: var(--font-family-heading);
	text-transform: uppercase;
	transition: background-color 0.3s;
	z-index: 1;
	border: 2px solid var(--primary);
}

@media only screen and (min-width: 992px) {
	.blog-template-house .blog-item-preview .readmore {
		transform: translate(10%, 10%);
	}
}

.blog-template-house .blog-item-preview:hover .readmore {
	background-color: var(--tertiary);
	color: var(--primary);
	border-color: var(--primary);
}