<section class='homepage-header'>
<div class='uhasselt-container'>
<div class='grid-column list-education'>
<div class='link-list-education-wrap'>
<span class="heading h2">
What are you looking for?
</span>
<div class="link-list-education">
<div class="links-nav column">
<ul class="information-links">
<li class="active">
<a href="#education-panel-0">
<span class="icon fal fa-info-square " aria-hidden="true"></span>Information for
</a>
</li>
<li class="">
<a href="#education-panel-1">
<span class="icon fal fa-graduation-cap " aria-hidden="true"></span>Programmes
</a>
</li>
<li class="">
<a href="#education-panel-2">
<span class="icon fal fa-window " aria-hidden="true"></span>Applications and admission
</a>
</li>
<li class="">
<a href="#education-panel-3">
<span class="icon fal fa-user-graduate " aria-hidden="true"></span>Information for students
</a>
</li>
</ul>
</div>
<div id="scroll-to-panel">
<div class="education-panel education-panel-0 ">
<div class="link-list white">
<ul>
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">Information for</span>
</a>
</li>
</ul>
<div class="link-list-bottom-link ">
<a href="#" class="button button-black ">
<span>
<span class="icon fal fa-envelope " aria-hidden="true"></span>
<span class="text">
This is a CTA Button
</span>
</span>
</a>
</div>
</div>
</div>
<div class="education-panel education-panel-1 hidden">
<div class="link-list white">
<ul>
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">Programmes</span>
</a>
</li>
</ul>
<div class="link-list-bottom-link ">
<a href="#" class="button button-black ">
<span>
<span class="icon fal fa-envelope " aria-hidden="true"></span>
<span class="text">
This is a CTA Button
</span>
</span>
</a>
</div>
</div>
</div>
<div class="education-panel education-panel-2 hidden">
<div class="link-list white">
<ul>
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">Applications and admission</span>
</a>
</li>
</ul>
<div class="link-list-bottom-link ">
<a href="#" class="button button-black ">
<span>
<span class="icon fal fa-envelope " aria-hidden="true"></span>
<span class="text">
This is a CTA Button
</span>
</span>
</a>
</div>
</div>
</div>
<div class="education-panel education-panel-3 hidden">
<div class="link-list white">
<ul>
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">Information for students</span>
</a>
</li>
</ul>
<div class="link-list-bottom-link ">
<a href="#" class="button button-black ">
<span>
<span class="icon fal fa-envelope " aria-hidden="true"></span>
<span class="text">
This is a CTA Button
</span>
</span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class='featured-item-wrapper'>
<div class="featured-item">
<div class="call-to-action">
<div class="wrap-info">
<div class="title">Online Infodagen 8/7 en 26/8</div>
<a href="#" class="button button-red ">
<span>
<span class="text">
Bekijk de online infodagen
</span>
</span>
</a>
</div>
</div>
<div class="image-slider">
<div class="image-slider-wrapper">
<div class="swiper-container image-slider-main" data-slides-per-view="1" data-loop="true" data-loop-additional-slides="1">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="slide-image">
<img src="https://picsum.photos/id/234/1045/850" alt="" />
</div>
</div>
<div class="swiper-slide">
<div class="slide-image">
<img src="https://picsum.photos/id/232/1045/850" alt="" />
</div>
</div>
<div class="swiper-slide">
<div class="slide-image">
<img src="https://picsum.photos/id/233/1045/850" alt="" />
</div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-prev">
<a href="#" class="prev-next prev-next-prev">
<span class="icon fal fa-angle-left fa-2x " aria-hidden="true"></span>
</a>
</div>
<div class="swiper-next">
<a href="#" class="prev-next prev-next-next">
<span class="icon fal fa-angle-right fa-2x " aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class='homepage-header'>
<div class='uhasselt-container'>
<div class='grid-column link-list-wrapper left'>
<div class="heading h2">
Informatie voor
</div>
<div class="link-list red">
<ul>
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">A USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">Another USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
</ul>
<div class="link-list-bottom-link ">
<a href="#" class="button button-black ">
<span>
<span class="icon fal fa-envelope " aria-hidden="true"></span>
<span class="text">
This is a CTA Button
</span>
</span>
</a>
</div>
</div>
</div>
<div class='grid-column link-list-wrapper right'>
<div class="heading h2">
Opleidingen
</div>
<div class="link-list red">
<ul>
<li class="link-list-li">
<a href="#" class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">A USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">Another USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
<li class="link-list-li">
<a class="link " aria-label="" title="">
<span class="icon fas fa-caret-right " aria-hidden="true"></span>
<span class="text">And a third USP for UHasselt</span>
</a>
</li>
</ul>
<div class="link-list-bottom-link ">
<a href="#" class="button button-black ">
<span>
<span class="icon fal fa-envelope " aria-hidden="true"></span>
<span class="text">
This is a CTA Button
</span>
</span>
</a>
</div>
</div>
</div>
<div class='grid-column cta'>
<a href="#" class="button button-black ">
<span>
<span class="icon fal fa-envelope " aria-hidden="true"></span>
<span class="text">
Alle opleidingen
</span>
</span>
</a>
</div>
</div>
<div class='featured-item-wrapper'>
<div class="featured-item">
<div class="call-to-action">
<div class="wrap-info">
<div class="title">Online Infodagen 8/7 en 26/8</div>
<a href="#" class="button button-red ">
<span>
<span class="text">
Bekijk de online infodagen
</span>
</span>
</a>
</div>
</div>
<div class="image-slider">
<div class="image-slider-wrapper">
<div class="swiper-container image-slider-main" data-slides-per-view="1" data-loop="true" data-loop-additional-slides="1">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="slide-image">
<img src="https://picsum.photos/id/234/1045/850" alt="" />
</div>
</div>
<div class="swiper-slide">
<div class="slide-image">
<img src="https://picsum.photos/id/232/1045/850" alt="" />
</div>
</div>
<div class="swiper-slide">
<div class="slide-image">
<img src="https://picsum.photos/id/233/1045/850" alt="" />
</div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-prev">
<a href="#" class="prev-next prev-next-prev">
<span class="icon fal fa-angle-left fa-2x " aria-hidden="true"></span>
</a>
</div>
<div class="swiper-next">
<a href="#" class="prev-next prev-next-next">
<span class="icon fal fa-angle-right fa-2x " aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class='homepage-header'>
<div class='uhasselt-container'>
<div class='grid-column list-education'>
{{render '@link-list-education'}}
</div>
</div>
<div class='featured-item-wrapper'>
{{render '@featured-item'}}
</div>
</section>
<section class='homepage-header'>
<div class='uhasselt-container'>
<div class='grid-column link-list-wrapper left'>
{{render '@heading--h2' heading-first}}
{{render '@link-list--link-list-red' link-list-first merge=true}}
</div>
<div class='grid-column link-list-wrapper right'>
{{render '@heading--h2' heading-second}}
{{render '@link-list--link-list-red' link-list-second merge=true}}
</div>
<div class='grid-column cta'>
{{render '@button' cta merge=true}}
</div>
</div>
<div class='featured-item-wrapper'>
{{render '@featured-item'}}
</div>
</section>
{
"link-list-first": {
"heading": false
},
"link-list-second": {
"heading": false
},
"heading-first": {
"text": "Informatie voor",
"tag": "div",
"modifier": "h2"
},
"heading-second": {
"text": "Opleidingen",
"tag": "div",
"modifier": "h2"
},
"cta": {
"text": "Alle opleidingen",
"icon": {
"icon": "fa-user-graduate"
}
}
}
.homepage-header {
@apply relative;
z-index: 2;
> .uhasselt-container {
@apply grid grid-cols-12 lg:pointer-events-none;
@apply md:gap-8 lg:gap-0;
@apply relative z-10;
.grid-column {
@apply col-span-12 md:col-span-6 lg:col-span-4;
}
.grid-column.list-education {
@apply col-span-12 lg:col-span-7 pointer-events-auto;
}
.cta {
@apply md:hidden;
@apply mt-4;
.button {
@apply w-full md:w-auto;
}
}
&::before {
content: url(/assets/img/triangle-big.svg);
@apply absolute hidden lg:block;
@apply top-2/4 -left-24;
width: 66px;
height: 66px;
z-index: 10;
}
}
.link-list-wrapper {
@apply relative lg:w-11/12;
@apply pointer-events-auto;
.link-list {
height: calc(100% - 4rem);
}
&.left {
&::before {
@apply absolute hidden lg:block;
@apply right-4;
@apply fill-current text-black-600;
content: url(/assets/img/square-dots.svg);
z-index: -1;
top: 20px;
width: 157px;
height: 131px;
}
&::after {
@apply absolute hidden lg:block;
content: url(/assets/img/down-arrow.svg);
width: 24px;
height: 192px;
left: 55px;
bottom: 0;
transform: translateY(calc(100% - 30px));
}
}
&.right {
@apply hidden md:block;
&::after {
@apply absolute hidden lg:block;
@apply left-4;
@apply fill-current text-black-600;
bottom: -30px;
content: url(/assets/img/square-dots.svg);
z-index: -1;
width: 157px;
height: 131px;
}
}
}
.featured-item-wrapper {
@apply relative lg:absolute right-0 top-0 z-0;
@apply w-full lg:w-2/3 xl:w-1/2;
@apply mb-16 md:mb-0;
&::before {
content: url(/assets/img/triangle-big.svg);
@apply absolute hidden lg:block;
bottom: 40px;
left: 15px;
width: 66px;
height: 66px;
z-index: 10;
}
&::after {
@apply absolute hidden lg:block;
content: url(/assets/img/down-arrow.svg);
width: 24px;
height: 192px;
left: 30%;
bottom: 0;
transform: translateY(calc(100% - 20px));
}
.prev-next {
@apply h-12 w-12;
}
.swiper-pagination {
@apply block;
@apply absolute;
@apply mt-2;
@apply md:relative;
.swiper-pagination-bullet {
@apply mr-2;
@apply opacity-100;
}
.swiper-pagination-bullet-active {
@apply bg-red;
}
}
}
}
$(function () {
'use strict';
var $header = $('.homepage-header');
var $featured = $header.find('.featured-item');
$(window).on('resize', function () {
setFeaturedItemHeight();
});
setFeaturedItemHeight(true);
function getFeaturedItemHeight() {
return $featured.outerHeight(true);
}
function setFeaturedItemHeight(initTimer = false) {
var h = getFeaturedItemHeight();
if (h == 0 && initTimer) {
setTimeout(function (e) {
setFeaturedItemHeight(true);
}, 250);
} else {
$header.css('min-height', `calc(${h}px + 75px)`);
}
}
const images = document.querySelectorAll('.logo img');
Array.from(images).forEach(image => {
image.addEventListener('load', () => fitImage(image));
if (image.complete && image.naturalWidth !== 0)
fitImage(image);
});
function fitImage(image) {
const aspectRatio = image.naturalWidth / image.naturalHeight;
if (aspectRatio > 2) {
image.classList.add('widelogo');
}
}
});
No notes defined.