New: Model template
This commit is contained in:
@@ -1,6 +1,63 @@
|
||||
const isMobile = window.innerWidth < 992;
|
||||
|
||||
AOS.init({
|
||||
once: true,
|
||||
offset: 100,
|
||||
easing: 'ease',
|
||||
duration: 1200
|
||||
useClassNames: false,
|
||||
disableMutationObserver: false,
|
||||
|
||||
offset: isMobile ? 50 : 120,
|
||||
duration: 800,
|
||||
once: true,
|
||||
});
|
||||
|
||||
if (isMobile) {
|
||||
document.querySelectorAll('[data-aos="fade-left"], [data-aos="fade-right"]').forEach(el => {
|
||||
el.setAttribute('data-aos', 'fade-up');
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
const observerOptions = {
|
||||
root: null,
|
||||
rootMargin: '0px',
|
||||
threshold: 0.3
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries, observer) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('is-visible');
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
const targets = document.querySelectorAll('.scroll-trigger, .scroll-draw-svg, .modellen-sectie');
|
||||
targets.forEach(target => observer.observe(target));
|
||||
});
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
var splide = new Splide('#model-splide', {
|
||||
type : 'loop',
|
||||
perPage: 2,
|
||||
focus : 'center',
|
||||
perMove: 1,
|
||||
padding: '1rem',
|
||||
gap : '2rem',
|
||||
autoplay: true,
|
||||
interval: 4000,
|
||||
arrows : false,
|
||||
pagination: true,
|
||||
breakpoints: {
|
||||
1200: {
|
||||
perPage: 2,
|
||||
padding: '1rem',
|
||||
},
|
||||
768: {
|
||||
perPage: 1,
|
||||
padding: '2rem',
|
||||
gap: '1rem',
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
splide.mount();
|
||||
});
|
||||
@@ -82,12 +82,24 @@ $headings-color: #212121;
|
||||
background-color: $van-emous-blue !important;
|
||||
}
|
||||
|
||||
body,
|
||||
html {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: $font-family-sans-serif;
|
||||
font-weight: 400;
|
||||
line-height: 1.8em;;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.row {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
.h1, .h2, .h3, .h4, .h5, .h6,
|
||||
[class^="display-"] {
|
||||
@@ -126,7 +138,7 @@ h6 {
|
||||
p {
|
||||
font-family: $mukta-font;
|
||||
font-size: 18px;
|
||||
line-height: 30px;
|
||||
line-height: 1.8em !important;
|
||||
font-weight: normal;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
@@ -137,6 +149,14 @@ p {
|
||||
}
|
||||
}
|
||||
|
||||
.text-dark {
|
||||
color:#212121;
|
||||
}
|
||||
|
||||
.numbers {
|
||||
font-size: 1.15em;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.panel {
|
||||
border-radius: 40px;
|
||||
@@ -164,6 +184,10 @@ p {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.py-10 {
|
||||
padding: 4em 0 12em 0;
|
||||
}
|
||||
|
||||
.rounded-img {
|
||||
border-radius: 20px;;
|
||||
}
|
||||
@@ -214,6 +238,15 @@ p {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
[data-aos="zoom-in"] {
|
||||
transform: scale(0.9) !important;
|
||||
transition-property: transform, opacity;
|
||||
|
||||
&.aos-animate {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
border: none;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||||
@@ -306,6 +339,46 @@ p {
|
||||
}
|
||||
}
|
||||
|
||||
.hero-image-single {
|
||||
width: 100%;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
border-radius: 40px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
|
||||
|
||||
min-height: 200px;
|
||||
max-height: 200px;
|
||||
height: 200px;
|
||||
|
||||
@media (min-width: 992px) {
|
||||
min-height: 300px;
|
||||
max-height: 300px;
|
||||
height: 300px;
|
||||
aspect-ratio: 21 / 9;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-image-model {
|
||||
width: 100%;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
border-radius: 40px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
|
||||
|
||||
min-height: 300px;
|
||||
max-height: 300px;
|
||||
height: 300px;
|
||||
|
||||
@media (min-width: 992px) {
|
||||
min-height: 400px;
|
||||
max-height: 400px;
|
||||
height: 400px;
|
||||
aspect-ratio: 21 / 9;
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons
|
||||
.btn-cta {
|
||||
display: inline-block;
|
||||
@@ -335,10 +408,11 @@ p {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #ffffff;
|
||||
color: #ffffff !important;
|
||||
padding-right: 80px;
|
||||
|
||||
&::after {
|
||||
@@ -413,6 +487,22 @@ p {
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease !important;
|
||||
|
||||
&:hover {
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
|
||||
transform: translateY(-10px) rotate(.5deg);
|
||||
}
|
||||
}
|
||||
|
||||
.card-secondary {
|
||||
background-color: $van-emous-blue;
|
||||
border-radius:30px;
|
||||
min-height:200px;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.modellen-sectie {
|
||||
.model-card {
|
||||
min-height: 480px;
|
||||
@@ -562,6 +652,342 @@ p {
|
||||
}
|
||||
|
||||
// Scrollstops
|
||||
#vergunningscheck {
|
||||
#vergunningscheck,
|
||||
#modellen {
|
||||
scroll-margin-top: 100px;
|
||||
}
|
||||
|
||||
#map canvas {
|
||||
touch-action: pan-y !important;
|
||||
}
|
||||
|
||||
.info-image {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: cover;
|
||||
background-position: 50%;
|
||||
transition: transform .6s cubic-bezier(.165,.84,.44,1);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
// SVG
|
||||
.modellen-sectie {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.svg-bg-container {
|
||||
// position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
opacity: 0.15;
|
||||
}
|
||||
|
||||
.drawing-line {
|
||||
stroke-dasharray: 10000;
|
||||
stroke-dashoffset: 10000;
|
||||
transition: stroke-dashoffset 10s ease-in, opacity 1s ease;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.is-visible .drawing-line,
|
||||
.is-visible.drawing-line {
|
||||
stroke-dashoffset: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// Forms
|
||||
.form-control:focus {
|
||||
border-color: #b95913;
|
||||
box-shadow: 0 0 0 0.25rem rgba(185, 89, 19, 0.25);
|
||||
}
|
||||
|
||||
.form-check-input {
|
||||
border: 1px solid #999 !important;
|
||||
height: 1.2em;
|
||||
width: 1.2em;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.form-check-input:checked {
|
||||
background-color: #b95913;
|
||||
border-color: #b95913 !important;
|
||||
}
|
||||
|
||||
.form-check-input:focus {
|
||||
border-color: #b95913 !important;
|
||||
box-shadow: 0 0 0 0.25rem rgba(185, 89, 19, 0.25);
|
||||
}
|
||||
|
||||
#contactModal .btn-primary {
|
||||
background-color: #b95913;
|
||||
border-color: #b95913;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#contactModal .btn-primary:hover,
|
||||
#contactModal .btn-primary:active {
|
||||
background-color: #964810;
|
||||
border-color: #964810;
|
||||
}
|
||||
textarea {
|
||||
resize: none;
|
||||
border-radius: 30px !important;
|
||||
}
|
||||
|
||||
// Slider
|
||||
#model-splide {
|
||||
padding-bottom: 3rem;
|
||||
|
||||
.splide__pagination {
|
||||
bottom: 0;
|
||||
|
||||
&__page {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: darken($van-emous-blue, 20%);
|
||||
border: none;
|
||||
margin: 0 6px;
|
||||
opacity: 0.5;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&.is-active {
|
||||
background: $van-emous-orange;
|
||||
transform: scale(1.4);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
background: $van-emous-orange;
|
||||
}
|
||||
}
|
||||
}
|
||||
.splide__track {
|
||||
overflow: visible !important;
|
||||
}
|
||||
.splide__list {
|
||||
cursor: grab;
|
||||
&:active { cursor: grabbing; }
|
||||
}
|
||||
}
|
||||
|
||||
#gallery-splide {
|
||||
overflow: hidden; // Zorgt dat alles wat buiten de slider valt onzichtbaar is
|
||||
padding-bottom: 40px;
|
||||
.splide__slide {
|
||||
transition: transform 0.3s ease;
|
||||
&:hover {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.splide__arrow {
|
||||
background: $van-emous-orange;
|
||||
color: white;
|
||||
opacity: 1;
|
||||
&:hover { background: darken($van-emous-orange, 10%); }
|
||||
}
|
||||
|
||||
.splide__pagination {
|
||||
|
||||
|
||||
&__page {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: $van-emous-blue;
|
||||
border: none;
|
||||
margin: 0 6px;
|
||||
opacity: 1;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
&.is-active {
|
||||
background: $van-emous-orange;
|
||||
transform: scale(1.4);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
background: $van-emous-orange;
|
||||
}
|
||||
}
|
||||
}
|
||||
.splide__track {
|
||||
overflow: visible !important;
|
||||
}
|
||||
.splide__list {
|
||||
cursor: grab;
|
||||
&:active { cursor: grabbing; }
|
||||
}
|
||||
}
|
||||
|
||||
#lightboxModal {
|
||||
.modal-content {
|
||||
background: transparent;
|
||||
}
|
||||
.modal-backdrop.show {
|
||||
opacity: 0.9; // Lekker donker zodat de foto knalt
|
||||
}
|
||||
#lightboxImage {
|
||||
max-height: 90vh; // Voorkomt dat de foto buiten beeld valt op kleine schermen
|
||||
box-shadow: 0 0 50px rgba(0,0,0,0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.gallery-trigger {
|
||||
transition: opacity 0.3s ease;
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-lightbox-close {
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
right: -20px;
|
||||
z-index: 1060;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
background-color: $van-emous-orange; // Je primary kleur
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: transform 0.2s;
|
||||
&:hover { transform: scale(1.1); color: #fff; }
|
||||
}
|
||||
|
||||
#lightbox-splide {
|
||||
.splide__arrow {
|
||||
background-color: $van-emous-orange !important;
|
||||
color: #fff !important;
|
||||
opacity: 1;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
svg { fill: #fff; } // Als je de standaard Splide pijltjes gebruikt
|
||||
i { font-size: 1.5rem; } // Als je Bootstrap Icons gebruikt
|
||||
}
|
||||
|
||||
.splide__track {
|
||||
overflow: visible; // Zorgt dat pijltjes buiten de foto kunnen vallen indien gewenst
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.icon-box {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #fff;
|
||||
opacity: .5;
|
||||
border-radius: 10px;
|
||||
color: $van-emous-orange;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
|
||||
|
||||
i {
|
||||
font-size: 2em;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// FAQ
|
||||
.faq-accordion {
|
||||
.accordion-item {
|
||||
border-radius: 25px !important;
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
overflow: hidden;
|
||||
border: none;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.accordion-button {
|
||||
padding: 2rem 3rem;
|
||||
font-weight: 600;
|
||||
font-size: 1.25rem;
|
||||
color: #212121;
|
||||
background-color: #fff;
|
||||
box-shadow: none;
|
||||
transition: background-color 0.3s, border-radius 0.3s;
|
||||
|
||||
&::after {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212121'%3e%3cpath d='M8 0a1 1 0 0 1 1 1v6h6a1 1 0 1 1 0 2H9v6a1 1 0 1 1-2 0V9H1a1 1 0 0 1 0-2h6V1a1 1 0 0 1 1-1z'/%3e%3c/svg%3e");
|
||||
background-size: 1.25rem;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
&:not(.collapsed) {
|
||||
background-color: $van-emous-orange;
|
||||
color: #fff;
|
||||
border-bottom-left-radius: 0 !important;
|
||||
border-bottom-right-radius: 0 !important;
|
||||
|
||||
&::after {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M0 8a1 1 0 0 1 1-1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z'/%3e%3c/svg%3e");
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
box-shadow: none;
|
||||
border-color: rgba(0,0,0,.125);
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-body {
|
||||
background-color: $van-emous-orange;
|
||||
color: #fff;
|
||||
padding: 0 3rem 2rem 3rem;
|
||||
border-bottom-left-radius: 25px;
|
||||
border-bottom-right-radius: 25px;
|
||||
|
||||
a {
|
||||
color: #fff !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
.accordion-button {
|
||||
font-size: 1.5rem !important;
|
||||
font-weight:500;
|
||||
}
|
||||
}
|
||||
|
||||
// Footer
|
||||
.contact-icon-circle {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background-color: $van-emous-orange; // Gebruik je variabele
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0; // Voorkomt dat de cirkel platgedrukt wordt bij lange tekst
|
||||
|
||||
i, img {
|
||||
color: white;
|
||||
font-size: 1.5rem;
|
||||
width: 24px; // Mocht je SVG's gebruiken
|
||||
}
|
||||
}
|
||||
|
||||
#contact-info {
|
||||
h5 {
|
||||
font-size: 1.25rem;
|
||||
color: #212121;
|
||||
}
|
||||
p {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user