Div | |||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||||||||||||||||||||||||||||||||||||
|
Div | ||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||
|
Div | |||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||||||||||
| |||||||||||||||||||||||||
Div | |||||||||||||||||||||||||
| |||||||||||||||||||||||||
|
Div | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| section about-the-project
|
Div | ||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||||||||
|
Div | |||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||
|
Div | ||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||
|
Div | |||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||
|
Div | ||
---|---|---|
| ||
|
...
id | success-stories |
---|---|
class | section ss-carroussel |
HTML |
---|
<img class="sb-testing" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/640548876/sandbox-touch-section-bg.svg"/> |
...
class | container |
---|
Div | |||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|
Div | |||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||
|
Div | ||
---|---|---|
| ||
|
Div | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Div | |||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||||||||||||||||
|
CSS Stylesheet |
---|
@media screen and (max-width: 500px) {
.home-intro-content h1 { font-size: 28px; }
.home-instro-content h1 span { font-size: 28px; }
}
@media screen and (min-width: 768px) {
.home-intro-content h1 { font-size: 40px;}
.home-intro-content h1 span {font-size: 40px;}
}
@media screen and (min-width: 1360px) {
.home-intro-content h1 { font-size: 48px;}
.home-intro-content h1 span {font-size: 48px;}
.home-intro-content p { font-size:1.2rem;}
}
@media screen and ( max-width: 768px ) {
#sb-footer { padding-top: 8rem; }
.sandbox-footer-section-f-block { display: flex!important; flex-direction: column; align-items: center; }
.sandbox-footer-section-t-block { justify-content: center!important; }
.test0image { position: absolute; }
.sb-testing { top: unset; z-index: 10; bottom: 0; }
.about-the-project { background-position-y: 100%!important; background-position-x: unset!important; }
}
@media screen and ( max-width: 500px ) {
.test0image { margin-top: -7rem; }
}
@media screen and (min-width: 1700px ) {
#ss-become-a-pilot { padding-top: 10rem!important; }
}
.home-intro { position: relative; min-height:65vh; }
.home-intro-wrapper { display: flex; align-content: center; align-items: center; min-height:65vh; background: #014494;}
.sandbox-header-im { position: absolute; width: 100%; height: 100%; object-fit: cover; opacity: 0.4;}
.home-intro-content { position: relative; margin:0 auto; width:90%; text-align: center;}
.home-intro-content h1 { margin-top:1rem; margin-bottom:2rem; font-size:38px; line-height: 1}
.home-intro-content h1 span {font-size: 38px; display:block; margin:0.5rem 0 0 0; font-weight: normal;}
.home-intro-content p.lead { margin:0.5rem 0 0 0; font-size:18px;}
.home-intro-content .btn { margin:2rem 0 0 0;}
.home-intro-content h1, .home-intro-content p { color: white;}
.home-introduction-sb { background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/640548876/sandbox-bg-curve-intro.svg") no-repeat;
background-position: top right; background-position-y: 200%;}
.section-get-started { text-align: center; }
.section-get-started-box { display: flex; flex-direction: column; justify-content: space-between; height: 100%; position:relative; padding:1.5rem 3rem; box-shadow: 0px 4px 20px rgba(0, 55, 100, 0.1); border-radius: 16px;}
.section-get-started-box h3+p { flex-grow: 1; }
.about-the-project { background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/640548876/sandbox-bg-oval.svg?api=v2") no-repeat; background-position-y: 30%; background-position-x: 90%; }
.apply-now { background: linear-gradient(270deg, #BC3588 -22.05%, #17458F 41.52%, #3682C2 100%); padding-top: 5rem; padding-bottom: 6rem;}
.apply-now h3 { color: white; }
.apply-now p { color: white; }
/*--- HOME FAQ ---*/
.home-faq { padding-bottom:4rem;}
.home-faq .cols { z-index: 6; position: relative;}
.home-faq h2 { margin-bottom:3rem;}
.home-faq .btn { margin-top:2rem;}
/*--- MACRO SLIDER BY DEFAULT ---*/
.slider-default { position:relative; z-index:10; }
.slider-default .flickity-enabled { background-color: transparent; box-shadow:none;}
.slider-default .flickity-enabled.is-draggable { box-shadow:none;}
.slider-default .news-slider-root > div { padding:0;}
.slider-default .aui-item > div { margin:0; padding:0;}
.slider-default .aui-item { display:inline-block; padding:0 15px 10px 15px;}
.slider-default .aui-group>.aui-item { padding-top:0; padding-top:1rem; padding-bottom:0; width: 100%;}
.slider-default .aui-group>.aui-item+.aui-item { padding:0; width: 100%;}
.slider-default > ul { list-style: none; margin: 0; padding: 0;}
/*heading*/
.slider-default h2:first-child { display: none;}
/*arrow*/
.slider-default .flickity-button { top:38% !important; background-color: #fff !important; border:1px solid #CD1D8B; border-radius:8px !important;}
.slider-default .flickity-button:hover { background-color: #FFE7F2 !important;}
.slider-default .flickity-button:focus { outline: 2px dashed black; outline-offset: 2px; box-shadow: none;}
.slider-default .flickity-prev-next-button .flickity-button-icon { left: 30%; top: 30%; width: 40%; height: 40%; fill: rgb(205, 29, 139) !important;}
.slider-default .flickity-prev-next-button.previous { left: -15px;}
.slider-default .flickity-prev-next-button.next { right: -15px;}
/*dots*/
.slider-default .flickity-page-dots { position:relative; margin-bottom: 0; top:1rem !important; height:1rem; text-align: center !important;}
.slider-default .flickity-page-dots .dot { opacity: 1; height: 12px; width:12px; background: #CD1D8B !important; border:1px solid #CD1D8B;}
.slider-default .flickity-page-dots .dot.is-selected { height: 12px; width:48px; background: #CD1D8B !important; border:1px solid #CD1D8B; border-radius:10px;}
.slider-default .flickity-page-dots .dot:focus { outline: 2px dashed black; outline-offset: 2px;}
.slider-default .col-4 { padding-left: 0px; right: 0px; }
.slider-default .card-grid-body { display: flex; flex-direction: column; flex: unset !important;}
.flickity-viewport { min-height: 528px!important; }
.card-grid .card-grid-img{
height: 200px;
}
.card-grid .card-grid-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media screen and (min-width: 1280px) {
.slider-default .flickity-prev-next-button.previous { left: -50px;}
.slider-default .flickity-prev-next-button.next { right: -50px;}
}
/*--- HOME SS SLIDER BY DEFAULT ADD ON ---*/
.ss-carroussel { position:relative; padding-top:0; padding-bottom:0; z-index: 10;}
.ss-carroussel .slider-default { margin-top:1rem;}
/*hack*/
.ss-carroussel .slider-default > p:last-child { display: none;}
/*arrow*/
.ss-carroussel .slider-default .flickity-button { background-color: rgba(205, 29, 139, .3) !important;; border:1px solid #FFF;}
.ss-carroussel .slider-default .flickity-button:hover { background-color: #CD1D8B !important;}
.ss-carroussel .slider-default .flickity-prev-next-button .flickity-button-icon { fill: rgb(255, 255, 255) !important;}
@media screen and (min-width: 1280px) {
.ss-carroussel .slider-default .flickity-button { background-color: transparent !important; border:1px solid #FFF;}
}
/*wave top*/
.success-stories-curve-top { z-index:2; position: absolute; left: 0; right: 0; height: 100%; margin-top: 7.7rem;}
.success-stories-curve-top p { margin:0;}
.success-stories-curve-top img {width: 103%;}
/*wave bottom*/
.success-stories-wave-bottom { overflow: hidden; z-index:1; position:relative; height:10rem; background-color: #E5F7FE; margin-top: 4.5rem;}
.success-stories-wave-bottom p { margin:0;}
.success-stories-wave-bottom img { position:absolute; bottom:0; left:-1%; width: 102%;}
#ss-become-a-pilot { position: relative; z-index: 1000; padding-top: 4rem; }
#ss-become-a-pilot h3 { color: white; }
#ss-become-a-pilot p { color: white; }
#ss-become-a-pliot span { color: white; }
@media screen and ( max-width: 768px ) {
#ss-become-a-pilot h3 { color: black; }
#ss-become-a-pilot p { color: black; }
#ss-become-a-pliot span { color: black; }
}
#ss-bg-section { position:relative; height:8rem;}
#ss-bg-section p { margin: 0; }
#ss-bg-section img { position: absolute; top: -216px; right: -128px; z-index: 10;}
#ss-bg-section-dec { position:relative; height:8rem; z-index:1;}
#ss-bg-section-dec p { margin: 0; }
#ss-bg-section-dec img { position: absolute; top: -391px; right: -128px;}
#sandbox-slider-cards .card-grid-footer { text-align: right; margin-bottom: 1rem; margin-top: auto; }
#sandbox-slider-cards .card-grid .card-grid-text{min-height: 75px;}
.bg-gradient { background: linear-gradient(270deg, #BC3588 -22.05%, #17458F 41.52%, #3682C2 100%)!important; }
.sandbox-footer-section-s-block { display: flex; justify-content: center; }
.sandbox-footer-section-t-block { display: flex; justify-content: end; }
@media(max-width: 768px){
#sandbox-slider-cards > .col-4{padding-left: 1rem !important;}
}
#ss-bg-section-dec-test { display: none; position: relative; margin-top: -15.5rem; }
#ss-bg-section-dec-test img { max-width: 110%!important;}
.sb-testing { position: absolute; top: 155px; left: 0; width: 100%; min-width: fit-content; min-height: fit-content;}
.test0image { margin-top: -13rem; }
#ss-become-a-pilot { padding-top: 1rem; padding-bottom: 5rem; } |
CSS Stylesheet |
---|
/* TABS */
.tabs-container .container { max-width: 1226px; }
@media screen and ( min-width: 1101px ) {
.case-family_tabs { max-width: 850px; }
.case-family_tabs { max-height: 64px; }
}
@media screen and ( min-width: 1117px ) {
.case-family_tabs li:hover, .case-family_tabs li:active { background : #6a9ad1; border-radius: 16px; color: white; }
.case-family_tabs .active:hover, .case-family_tabs .active:active { background: #004494!important; }
}
@media screen and ( min-width: 611px ) {
#bg-about-us_nd { display: none; }
}
@media screen and ( max-width: 374px ) {
.case-family_tabs { flex-direction: column; }
}
@media screen and ( max-width: 610px ) {
.case-family_tabs a { flex-direction: column; gap: 2px!important; line-height: 24px!important; text-align: center!important; white-space: pre; }
.case-family_tabs li { height: 74px!important; padding: 12px 24px!important; }
}
@media screen and ( max-width: 1100px ) {
.case-family_tabs li { width: 100%; padding-left: 40px; }
.active { width: 100%; }
}
.tabs-container { padding-left: 16px; padding-right: 16px; padding-bottom: 40px; position: relative; z-index: 2; }
.case-family_tabs { margin-bottom: 0rem!important; }
.case-family_tabs ul { list-style: none;}
.case-family_tabs li {display: flex; align-items: center; justify-content: center; list-style: none; cursor: pointer; padding-right: 24px; padding-left: 24px; height: 48px; }
.case-family_tabs li:first-child { padding-left: 40px; padding-right: 40px; }
.case-family_tabs li:last-child { padding-right: 24px; }
.case-family_tabs a { text-decoration: none; color: black; text-align: left; line-height: 1;}
.case-family_tabs { display: flex; justify-content: space-between; align-items: center; padding: 8px; border-radius: 20px; list-style: none; background: #E6ECF4; width: 100%; }
.case-family_tabs .active {background: #004494; display: flex; align-items: center; border-radius: 16px; color: white; padding-top: 12px; padding-bottom: 12px; }
.case-family_tabs a { display: flex; align-items: center; gap: 12px; }
.case-family_tabs a img { max-width: 24px; max-height: 24px; width: 24px; height: 24px; }
.num-active { display: none; } |
HTML |
---|
<script>
const mediaQuery2 = window.matchMedia("(max-width: 1070px)")
const structureNav = () => {
const mediaQuery = window.matchMedia("(max-width: 1070px)")
const tabs = document.querySelectorAll(".case-family_tabs li")
tabs.forEach((tab) => {
if (mediaQuery.matches) {
tab.getAttribute("id") === "about-us"
? (tab.querySelector("a > span").textContent = "About us")
: tab.querySelector("a > span").textContent
tab.getAttribute("id") === "eu-expert"
? (tab.querySelector("a > span").textContent = "EGBE")
: tab.querySelector("a > span").textContent
tab.getAttribute("id") === "eu-bc-sb"
? (tab.querySelector("a > span").textContent = "Sandbox")
: tab.querySelector("a > span").textContent
} else {
tab.getAttribute("id") === "about-us"
? (tab.querySelector("a > span").textContent = "About us")
: tab.querySelector("a > span").textContent
tab.getAttribute("id") === "eu-expert"
? (tab.querySelector("a > span").textContent =
"EU Expert Group on Blockchain Ethics")
: tab.querySelector("a > span").textContent
tab.getAttribute("id") === "eu-bc-sb"
? (tab.querySelector("a > span").textContent =
"European Blockchain Sandbox")
: tab.querySelector("a > span").textContent
}
})
}
structureNav()
mediaQuery2.addEventListener("change", structureNav)
const setImageInActive = (that) => {
if (
that.getAttribute("data-index") == 0 ||
that.getAttribute("id") == "about-us"
) {
$(that.children[0].children[0]).css("display", "none")
$(that.children[0].children[1]).css("display", "block")
$(that.children[0].children[2]).css("color", "black")
}
if (
that.getAttribute("data-index") == 1 ||
that.getAttribute("id") == "eu-expert"
) {
$(that.children[0].children[0]).css("display", "none")
$(that.children[0].children[1]).css("display", "block")
$(that.children[0].children[2]).css("color", "black")
}
if (
that.getAttribute("data-index") == 2 ||
that.getAttribute("id") == "eu-bc-sb"
) {
$(that.children[0].children[0]).css("display", "none")
$(that.children[0].children[1]).css("display", "block")
$(that.children[0].children[2]).css("color", "black")
$(that.children[0].children[2]).css("fontWeight", "600") }
}
const setImageActive = (that) => {
if (
that.getAttribute("data-index") == 0 ||
that.getAttribute("id") == "about-us"
) {
$(that.children[0].children[0]).css("display", "block")
$(that.children[0].children[1]).css("display", "none")
$(that.children[0].children[2]).css("color", "white")
}
if (
that.getAttribute("data-index") == 1 ||
that.getAttribute("id") == "eu-expert"
) {
$(that.children[0].children[0]).css("display", "block")
$(that.children[0].children[1]).css("display", "none")
$(that.children[0].children[2]).css("color", "white")
}
if (
that.getAttribute("data-index") == 2 ||
that.getAttribute("id") == "eu-bc-sb"
) {
$(that.children[0].children[0]).css("display", "block")
$(that.children[0].children[1]).css("display", "none")
$(that.children[0].children[2]).css("color", "white")
$(that.children[0].children[2]).css("fontWeight", "600")
}
}
const tabs = document.querySelectorAll(".case-family_tabs li")
tabs.forEach((tab) => {
if (
tab.getAttribute("data-index") == 2 ||
tab.getAttribute("id") == "eu-bc-sb"
) {
$(tab).addClass("active")
setImageActive(tab)
}
$(tab).on("click", function (e) {
e.stopPropagation()
tabs.forEach((tab) => {
$(tab).removeClass("active")
setImageInActive(tab)
})
this.classList.toggle("active")
setImageActive(this)
if (this.getAttribute("data-index") == 0) {
window.location.href ="https://ec.europa.eu/digital-building-blocks/sites/display/EBSI/About+us"
}
if (this.getAttribute("data-index") == 1) {
window.location.href ="https://ec.europa.eu/digital-building-blocks/sites/display/EBSI/EU+Expert+Group+on+Blockchain+Ethics"
}
e.preventDefault()
})
})
</script> |
HTML |
---|
<script>
/*
* This content is licensed according to the W3C Software License at
* https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
*
* Simple accordion pattern example
*/
'use strict';
Array.prototype.slice.call(document.querySelectorAll('.collapse')).forEach(function (accordion) {
// Allow for multiple accordion sections to be expanded at the same time
var allowMultiple = accordion.hasAttribute('data-allow-multiple');
// Allow for each toggle to both open and close individually
|
...
id | ss-become-a-pilot |
---|---|
class | col |
Div | ||
---|---|---|
| ||
|
Html-bobswift |
---|
<img class="test0image img-fluid" aria-hidden="true" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/640548876/sandbox-decentralised-network.svg?api=v2" alt=""> |
Div | |||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||||||||||||||||
|
HTML |
---|
<script> /* * This content is licensed according to the W3C Software License at * https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document * * Simple accordion pattern example */ 'use strict'; Array.prototype.slice.call(document.querySelectorAll('.collapse')).forEach(function (accordion) { // Allow for multiple accordion sections to be expanded at the same time var allowMultiple = accordion.hasAttribute('data-allow-multiple'); // Allow for each toggle to both open and close individually var allowToggle = (allowMultiple) ? allowMultiple : accordion.hasAttribute('data-allow-toggle'); // Create the array of toggle elements for the accordion group var triggers = Array.prototype.slice.call(accordion.querySelectorAll('.collapse-trigger')); var panels = Array.prototype.slice.call(accordion.querySelectorAll('.collapse-panel')); accordion.addEventListener('click', function (event) { event.stopPropagation(); var target = event.target; if (target.classList.contains('collapse-trigger')) { // Check if the current toggle is expanded. var isExpanded = target.getAttribute('aria-expanded') == 'true'; var active = accordion.querySelector('[aria-expanded="true"]'); // without allowMultiple, close the open accordion if (allowMultiple && active && active !== target) { // Set the expanded state on the triggering element active.setAttribute('aria-expanded', 'false'); // Hide the accordion sections, using aria-controls to specify the desired section document.getElementById(active.getAttribute('aria-controls')).setAttribute('hidden', ''); // When toggling is not allowed, clean up disabled state if (!allowToggle) { active.removeAttribute('aria-disabled'); } } if (!isExpanded) { // Set the expanded state on the triggering element target.setAttribute('aria-expanded', 'true'); // Hide the accordion sections, using aria-controls to specify the desired section document.getElementById(target.getAttribute('aria-controls')).removeAttribute('hidden'); // If toggling is not allowed, set disabled state on trigger if (!allowToggle) { target.setAttribute('aria-disabled', 'true'); } } else if (allowToggle && isExpanded) { // Set the expanded state on the triggering element target.setAttribute('aria-expanded', 'false'); // Hide the accordion sections, using aria-controls to specify the desired section document.getElementById(target.getAttribute('aria-controls')).setAttribute('hidden', ''); } event.preventDefault(); } }); // Bind keyboard behaviors on the main accordion container accordion.addEventListener('keydown', function (event) { var target = event.target; var key = event.which.toString(); var isExpanded = target.getAttribute('aria-expanded') == 'true'; var allowToggle = (allowMultiple) ? allowMultiple : accordion.hasAttribute('data-allow-toggle'); // Create the array of // 33 = Page Up, 34 = Page Down toggle elements for the accordion group var triggers = Array.prototype.slice.call(accordion.querySelectorAll('.collapse-trigger')); var ctrlModifierpanels = (event.ctrlKey && key.match(/33|34/Array.prototype.slice.call(accordion.querySelectorAll('.collapse-panel')); accordion.addEventListener('click', function // Is this coming from an accordion header?(event) { var target = event.target; if (target.classList.contains('collapse-trigger')) { // Up/Check Downif arrowthe andcurrent Controltoggle + Page Up/ Page Down keyboard operations // 38 = Up, 40 = Down is expanded. var isExpanded if= (keytarget.match(/38|40/) || ctrlModifier) { getAttribute('aria-expanded') == 'true'; var indexactive = triggersaccordion.indexOf(targetquerySelector('[aria-expanded="true"]'); // without varallowMultiple, directionclose = (key.match(/34|40/)) ? 1 : -1; the open accordion if (allowMultiple && active && varactive length = triggers.length;!== target) { var// newIndexSet =the (index + length + direction) % length; expanded state on the triggering element triggers[newIndex].focus(active.setAttribute('aria-expanded', 'false'); // Hide the event.preventDefault(); }accordion sections, using aria-controls to specify the desired section else if document.getElementById(keyactive.match(/35|36/)) {getAttribute('aria-controls')).setAttribute('hidden', ''); // When toggling 35is =not Endallowed, 36clean =up Homedisabled keyboard operationsstate switchif (key) { !allowToggle) { // Go to first accordion active.removeAttribute('aria-disabled'); } case '36': } triggers[0].focus();if (!isExpanded) { // Set the expanded break; state on the triggering element // Go to last accordion target.setAttribute('aria-expanded', 'true'); // Hide the accordion sections, using case '35': aria-controls to specify the desired section triggers[triggers.length - 1].focus();document.getElementById(target.getAttribute('aria-controls')).removeAttribute('hidden'); // If toggling is break; not allowed, set disabled state on trigger } if event.preventDefault(!allowToggle); { } } }); target.setAttribute('aria-disabled', 'true'); // These are used to style the accordion when one of the buttons has focus accordion.querySelectorAll('.collapse-trigger').forEach(function (trigger) { trigger.addEventListener('focus', function (event } } else if (allowToggle && isExpanded) { accordion.classList.add('focus'); // Set }); the expanded state trigger.addEventListener('blur', function (event) { on the triggering element accordiontarget.classList.remove('focussetAttribute('aria-expanded', 'false'); }); }); // Minor setup: will set disabled state, via aria-disabled, to an // expanded/ active accordion which is not allowed to be toggled close if (!allowToggle) { // Get the first expanded/ active accordion var expanded = accordion.querySelector('[aria-expanded="true"]'); // If an expanded/ active accordion is found, disable if (expanded) { expanded.setAttribute('aria-disabled', 'true'); } } }); </script> |
CSS Stylesheet |
.home-intro { position: relative; min-height:65vh; } .home-intro-wrapper { display: flex; align-content: center; align-items: center; min-height:65vh; background: #014494;} .sandbox-header-im { position: absolute; width: 100%; height: 100%; object-fit: cover; opacity: 0.4;} .home-intro-content { position: relative; margin:0 auto; width:90%; text-align: center;} .home-intro-content h1 { margin:0; font-size:38px; line-height: 1} .home-intro-content h1 span {font-size: 38px; display:block; margin:0.5rem 0 0 0; font-weight: normal;} .home-intro-content p.lead { margin:0.5rem 0 0 0; font-size:18px;} .home-intro-content .btn { margin:2rem 0 0 0;} .home-intro-content h1, .home-intro-content p { color: white;} .home-introduction-sb { background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/640548876/sandbox-bg-curve-intro.svg") no-repeat; background-position: top right; background-position-y: 200%;} .section-get-started { text-align: center; } .section-get-started-box { position:relative; padding:1.5rem 3rem; box-shadow: 0px 4px 20px rgba(0, 55, 100, 0.1); border-radius: 16px;} .about-the-project { background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/640548876/sandbox-bg-oval.svg?api=v2") no-repeat; background-position-y: 30%; background-position-x: 90%; } .apply-now { background: linear-gradient(270deg, #BC3588 -22.05%, #17458F 41.52%, #3682C2 100%); padding-top: 5rem; padding-bottom: 6rem;} .apply-now h3 { color: white; } .apply-now p { color: white; } /*--- HOME FAQ ---*/ .home-faq { padding-bottom:4rem;} .home-faq .cols { z-index: 6; position: relative;} .home-faq h2 { margin-bottom:3rem;} .home-faq .btn { margin-top:2rem;} /*--- MACRO SLIDER BY DEFAULT ---*/ .slider-default { position:relative; z-index:10; } .slider-default .flickity-enabled { background-color: transparent; box-shadow:none;} .slider-default .flickity-enabled.is-draggable { box-shadow:none;} .slider-default .news-slider-root > div { padding:0;} .slider-default .aui-item > div { margin:0; padding:0;} .slider-default .aui-item { display:inline-block; padding:0 15px 10px 15px;} .slider-default .aui-group>.aui-item { padding-top:0; padding-top:1rem; padding-bottom:0; width: 100%;} .slider-default .aui-group>.aui-item+.aui-item { padding:0; width: 100%;} .slider-default > ul { list-style: none; margin: 0; padding: 0;} /*heading*/ .slider-default h2:first-child { display: none;} /*arrow*/ .slider-default .flickity-button { top:38% !important; background-color: #fff !important; border:1px solid #CD1D8B; border-radius:8px !important;} .slider-default .flickity-button:hover { background-color: #FFE7F2 !important;} .slider-default .flickity-button:focus { outline: 2px dashed black; outline-offset: 2px; box-shadow: none;} .slider-default .flickity-prev-next-button .flickity-button-icon { left: 30%; top: 30%; width: 40%; height: 40%; fill: rgb(205, 29, 139) !important;} .slider-default .flickity-prev-next-button.previous { left: -15px;} .slider-default .flickity-prev-next-button.next { right: -15px;} /*dots*/ .slider-default .flickity-page-dots { position:relative; margin-bottom: 0; top:1rem !important; height:1rem; text-align: center !important;} .slider-default .flickity-page-dots .dot { opacity: 1; height: 12px; width:12px; background: #CD1D8B !important; border:1px solid #CD1D8B;} .slider-default .flickity-page-dots .dot.is-selected { height: 12px; width:48px; background: #CD1D8B !important; border:1px solid #CD1D8B; border-radius:10px;} .slider-default .flickity-page-dots .dot:focus { outline: 2px dashed black; outline-offset: 2px;} .slider-default .col-4 { padding-left: 0px; padding: right: 0px; } .slider-default .card-grid-body { display: flex; flex-direction: column; justify-content: space-evenly; } @media screen and (min-width: 1280px) { .slider-default .flickity-prev-next-button.previous { left: -50px;} .slider-default .flickity-prev-next-button.next { right: -50px;} } /*--- HOME SS SLIDER BY DEFAULT ADD ON ---*/ .ss-carroussel { position:relative; padding-top:0; padding-bottom:0; z-index: 10;} .ss-carroussel .slider-default { margin-top:1rem;} /*hack*/ .ss-carroussel .slider-default > p:last-child { display: none;} /*arrow*/ .ss-carroussel .slider-default .flickity-button { background-color: rgba(205, 29, 139, .3) !important;; border:1px solid #FFF;} .ss-carroussel .slider-default .flickity-button:hover { background-color: #CD1D8B !important;} .ss-carroussel .slider-default .flickity-prev-next-button .flickity-button-icon { fill: rgb(255, 255, 255) !important;} @media screen and (min-width: 1280px) { .ss-carroussel .slider-default .flickity-button { background-color: transparent !important; border:1px solid #FFF;} } /*wave top*/ .success-stories-curve-top { z-index:2; position: absolute; left: 0; right: 0; height: 100%; margin-top: 7.7rem;} .success-stories-curve-top p { margin:0;} .success-stories-curve-top img {width: 103%;} /*wave bottom*/ .success-stories-wave-bottom { overflow: hidden; z-index:1; position:relative; height:10rem; background-color: #E5F7FE; margin-top: 4.5rem;} .success-stories-wave-bottom p { margin:0;} .success-stories-wave-bottom img { position:absolute; bottom:0; left:-1%; width: 102%;} #ss-become-a-pilot { position: relative; z-index: 1000; padding-top: 4rem; } #ss-become-a-pilot h3 { color: white; } #ss-become-a-pilot p { color: white; } #ss-become-a-pliot span { color: white; } #ss-bg-section { position:relative; height:8rem;} #ss-bg-section p { margin: 0; } #ss-bg-section img { position: absolute; top: -216px; right: -128px; z-index: 10;} #ss-bg-section-dec { position:relative; height:8rem; z-index:1;} #ss-bg-section-dec p { margin: 0; } #ss-bg-section-dec img { position: absolute; top: -391px; right: -128px;} .bg-gradient { background: linear-gradient(270deg, #BC3588 -22.05%, #17458F 41.52%, #3682C2 100%)!important; } .sandbox-footer-section-s-block { display: flex; justify-content: center; } .sandbox-footer-section-t-block { display: flex; justify-content: end; } #ss-bg-section-dec-test { display: none; position: relative; margin-top: -15.5rem; } #ss-bg-section-dec-test img { max-width: 110%!important;} .sb-testing { position: absolute; top: 155px; left: 0; width: 100%; min-width: fit-content; min-height: fit-content;} .test0image { margin-top: -13rem; } #ss-become-a-pilot { padding-top: 1rem; padding-bottom: 5rem; } @media screen and ( max-width: 768px ) { .test0image { position: absolute; } .sb-testing { top: unset; z-index: 10; bottom: 0; } .about-the-project { background-position-y: 100%!important; background-position-x: unset!importanta; } } @media screen and ( max-width: 500px ) { .test0image { margin-top: -7rem; } } @media screen and (min-width: 1700px ) { #ss-become-a-pilot { padding-top: 10rem; } } Hide the accordion sections, using aria-controls to specify the desired section document.getElementById(target.getAttribute('aria-controls')).setAttribute('hidden', ''); } event.preventDefault(); } }); // Bind keyboard behaviors on the main accordion container accordion.addEventListener('keydown', function (event) { var target = event.target; var key = event.which.toString(); var isExpanded = target.getAttribute('aria-expanded') == 'true'; var allowToggle = (allowMultiple) ? allowMultiple : accordion.hasAttribute('data-allow-toggle'); // 33 = Page Up, 34 = Page Down var ctrlModifier = (event.ctrlKey && key.match(/33|34/)); // Is this coming from an accordion header? if (target.classList.contains('collapse-trigger')) { // Up/ Down arrow and Control + Page Up/ Page Down keyboard operations // 38 = Up, 40 = Down if (key.match(/38|40/) || ctrlModifier) { var index = triggers.indexOf(target); var direction = (key.match(/34|40/)) ? 1 : -1; var length = triggers.length; var newIndex = (index + length + direction) % length; triggers[newIndex].focus(); event.preventDefault(); } else if (key.match(/35|36/)) { // 35 = End, 36 = Home keyboard operations switch (key) { // Go to first accordion case '36': triggers[0].focus(); break; // Go to last accordion case '35': triggers[triggers.length - 1].focus(); break; } event.preventDefault(); } } }); // These are used to style the accordion when one of the buttons has focus accordion.querySelectorAll('.collapse-trigger').forEach(function (trigger) { trigger.addEventListener('focus', function (event) { accordion.classList.add('focus'); }); trigger.addEventListener('blur', function (event) { accordion.classList.remove('focus'); }); }); // Minor setup: will set disabled state, via aria-disabled, to an // expanded/ active accordion which is not allowed to be toggled close if (!allowToggle) { // Get the first expanded/ active accordion var expanded = accordion.querySelector('[aria-expanded="true"]'); // If an expanded/ active accordion is found, disable if (expanded) { expanded.setAttribute('aria-disabled', 'true'); } } }); let userAgent = navigator.userAgent; if(userAgent.match(/chrome|chromium|crios/i)){ $("#home-architecture-video").show() $("#home-architecture-image").hide() }else if(userAgent.match(/firefox|fxios/i)){ $("#home-architecture-video").show() $("#home-architecture-image").hide() } else if(userAgent.match(/safari/i)){ $("#home-architecture-video").hide() $("#home-architecture-image").show() }else if(userAgent.match(/opr\//i)){ $("#home-architecture-video").hide() $("#home-architecture-image").show() } else if(userAgent.match(/edg/i)){ $("#home-architecture-video").show() $("#home-architecture-image").hide() }else{ $("#home-architecture-video").hide() $("#home-architecture-image").show() } </script> |