Applying

Name: NC-Websites CMS
Telephone: 0597 - 87 00 37
P202-18 / V202-18
Hoe te gebruiken?

Deze template vermeld standaard bij elk artikel de extra velden "uren", "locatie" en "niveau", tevens bevat elke artikel pagina een formbuilder formulier.
Kopieer onderstaande styling in je template om te beginnen.
Voorvertoning
Alvast beginnen met een basis opmaak?

Neem de onderstaande code over in de website om alvast met een basis opmaak te beginnen.
CSS
/* Blog appyling */

/* Eventuele styling header carousel */

.blog-template-applying.blog-collection .header .carousel-inner .carousel-caption {
	bottom: 0;
}

.blog-template-applying.blog-collection .header .carousel-inner .carousel-caption p:nth-child(1) {
	font-weight: bold;
	text-shadow: 2px 2px 10px rgb(0 0 0);
}

@media only screen and (min-width: 992px) {
	.blog-template-applying.blog-collection .header .carousel-inner .carousel-caption p:nth-child(1) {
		font-size: 3rem;
	}
}

/* Item previews */

.blog-template-applying .blog-item-preview {
	box-shadow: 1px 1px 10px 0px #00000030;
	transition: transform 400ms;
	margin-bottom: 1.5rem;
	background-color: var(--tertiary);
}

.blog-template-applying .blog-item-preview:hover,
.blog-template-applying .blog-item-preview:focus {
	transform: scale(0.95);
}

.blog-template-applying .blog-item-link,
.blog-template-applying .blog-item-link {
	transition: color 400ms;
	color: #000;
}


.blog-template-applying .blog-item-preview:hover .blog-item-link,
.blog-template-applying .blog-item-preview:focus .blog-item-link {
	color: var(--secondary);
}

.blog-template-applying .blog-item-preview .content {
	padding: 1rem;
}

.blog-template-applying .blog-item-preview .title {
	font-size: 1.35rem;
}

.blog-template-applying .blog-item-preview .fields {
	flex-direction: column;
}

.blog-template-applying .blog-item-preview .readmore {
	padding: 0 1rem 1rem;
	display: block;
	text-align: right;
}

.blog-template-applying .blog-item-preview .readmore::after {
	font: var(--fa-font);
	content: "\f061";
	margin-left: 0.5rem;
}

/* Filters */

.blog-template-applying div[data-partial="blog-filters"] {
	/* margin-bottom: 1rem; */
	display: none;
}

.blog-template-applying div[data-partial="blog-filters"] .form-group {
	position: relative;
}

@media only screen and (min-width: 768px) {
	.blog-template-applying div[data-partial="blog-filters"] .form-group {
		margin-bottom: 0;
	}
}


.blog-template-applying div[data-partial="blog-filters"] .form-control {
	background-color: transparent;
	outline: none !important;
	box-shadow: none !important;
}

.blog-template-applying button,
.blog-template-applying .btn {
	outline: none !important;
	box-shadow: none !important;
}

@media only screen and (min-width: 992px) {
	.blog-template-applying div[data-partial="blog-filters"] .form-control {
		height: 100%;
	}
}

.blog-template-applying div[data-partial="blog-filters"] .form-control:focus {
	border-color: var(--tertiary);
}

.blog-template-applying div[data-partial="blog-filters"] .form-control::placeholder {
	color: white;
}

.blog-template-applying div[data-partial="blog-filters"] select {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.blog-template-applying div[data-partial="blog-filters"] .form-group::after {
	content: "\f107";
	font: var(--fa-font);
	position: absolute;
	right: 50px;
	top: 50%;
	transform: translateY(-45%);
	font-size: 20px;
	pointer-events: none;
}

.blog-template-applying div[data-partial="blog-filters"] .search::after {
	content: "\f002";
	right: 50px;
	top: 50%;
	transform: translateY(-50%);
	position: absolute;
	font: var(--fa-font);
}

.blog-template-applying div[data-partial="blog-filters"] .btn-tertiary:hover {
	color: white;
	border-color: var(--primary);
	background-color: var(--primary);
}

@media screen and (min-width: 992px) {
	.blog-template-applying div[data-partial="blog-filters"] select {
		min-width: 250px;
	}
}

/* Collection en item */

.blog-template-applying .blog-collection,
.blog-template-applying.blog-item {
	padding: 2.5rem 0;
}

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

	.blog-template-applying .blog-collection,
	.blog-template-applying .blog-item {
		padding: 5rem 0;
	}
}

.blog-template-applying.blog-item .btn-link {
	background-color: var(--primary);
	color: #fff;
	border-color: var(--primary);
}

.blog-template-applying.blog-item .btn-link::after,
.blog-template-applying.blog-item .btn-link::after {
	display: none;
}

.blog-template-applying.blog-item .btn-link:hover,
.blog-template-applying.blog-item .btn-link:focus {
	background-color: #fff;
	color: var(--primary);
}

.blog-template-applying.blog-item .table-striped th::before {
	display: inline-block;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font: var(--fa-font);
	margin-right: 0.5rem;
}

.blog-template-applying.blog-item .table-striped .blog-field-uren th::before {
	content: "\f017";
}

.blog-template-applying.blog-item .table-striped .blog-field-niveau th::before {
	content: "\f19d";
}

.blog-template-applying.blog-item .table-striped .blog-field-locatie th::before {
	content: "\f3c5";
}

.blog-template-applying .blog-content .table-striped tbody tr {
	background-color: var(--tertiary);
}

.blog-template-applying .blog-content .table-striped tbody th,
.blog-template-applying .blog-content .table-striped tbody td {
	padding: 0;
	vertical-align: middle;
}

.blog-template-applying .blog-content .table-striped tbody th::before {
	background-color: var(--secondary);
	padding: 1rem;
	color: #fff;
	min-width: 3.25em;
	text-align: center;
}

.blog-template-applying .blog-content .form-control {
	outline: none !important;
	box-shadow: none !important;
}

.blog-template-applying .blog-content .form-control {
	position: relative;
	border-color: var(--primary);
}

.blog-template-applying .blog-content .form-group:has(input[type="file"]) .form-control::after {
	content: "\e09a";
	font: var(--fa-font);
	color: var(--primary);
}

.blog-template-applying .blog-content .form-group:has(input[type="file"]) .form-control .btn-link {
	margin-right: 1rem;
}

.blog-template-applying.blog-item .function-requirements {
	position: relative;
	padding: 1rem;
	left: 5%;
	right: 5%;
	background-color: #fff;
	color: #000;
	width: 90%;
	margin-top: -3rem;
	box-shadow: 0px 4px 10px 0px #00000040;
}

.blog-template-applying.blog-item #applying-form {
	background-color: var(--tertiary);
	padding: 2rem;
	border-radius: var(--panel-radius);
	margin-bottom: 1.5rem;
}

.blog-template-applying.blog-item label {
	color: var(--primary);
	font-weight: 600;
	font-size: 1.25rem;
}



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

body[data-editor-mode="content"] .blog-template-applying.blog-item .function-requirements {
	margin-top: 0;
}

.blog-template-applying.blog-item .function-requirements ul,
.blog-template-applying.blog-item .blog-applying-info ul {
	padding-inline-start: 0px;
	list-style-type: none;
}

.blog-template-applying.blog-item .function-requirements ul li::before,
.blog-template-applying.blog-item .blog-applying-info ul li::before {
	font: var(--fa-font);
	content: "\f14a";
	color: var(--primary);
	margin-right: 0.5rem;
}

.blog-template-applying.blog-item .function-requirements h2::before {
	font: var(--fa-font);
	content: "\f0ae";
	color: var(--primary);
	margin-right: 0.5rem;
}

.blog-template-applying.blog-item .blog-applying-info {
	background-color: #fff;
	color: #000;
	padding: 2rem;
}

@media only screen and (min-width: 992px) {
	.blog-template-applying.blog-item .blog-applying-info {
		height: 100%;
	}
}

.blog-template-applying.blog-item #applying-moreinfo .row .col-12:nth-child(1) .blog-applying-info h2::before {
	font: var(--fa-font);
	content: "\f2b5";
	color: var(--primary);
	margin-right: 0.5rem;
}

.blog-template-applying.blog-item #applying-moreinfo .row .col-12:nth-child(2) .blog-applying-info h2::before {
	font: var(--fa-font);
	content: "\e4e3";
	color: var(--primary);
	margin-right: 0.5rem;
}