Page History

Div

id	introduction
class	section

Div

class	container

Div

class	cols

Div

class	col-8 event

Html-bobswift

<h1><span class="heading-subtitle">Events</span>Events calendar</h1>
<p class="lead">Register for webinars and other events exploring the benefits of the Once-Only Technical System and its development.</p>

<h2 class="h3">Upcoming events</h2>
<p>Browse upcoming events</p>
<!--<p><span class="badge primary">Coming soon</p>-->

<div class="event-list">

<!--ACCELERATOR 4-->
<div class="col-container">

<div class="col-first">
<img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/597951745/event-accelerator-4-2024-cover.jpg" alt="" aria-hidden="true">
</div>

<div class="col-second">
<h3><span>Brussels, Belgium</span>#4 OOTS Accelerator Event 2024:</h3>
<p class="date">12 - 13 December 2024</p>
<p>“This hybrid event aims to accelerate technical readiness of Member States’ national infrastructure.”</p>
<!--<p class="event-cta"><a class="btn ghost" href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/OOTS+accelerator+event+2" aria-label="See event #2 OOTS Accelerator Event 2024"><span>See event</span><span class="ico-cta-forward"></span></a></p>-->
</div>

</div>
<!--/ACCELERATOR 4-->

<!--PROJECTATHON 5-->
<div class="col-container">

<div class="col-first">
<img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/597951745/event-p5-cover.jpg" alt="" aria-hidden="true">
</div>

<div class="col-second">
<h3><span>Brussels, Belgium</span>Projectathon #5:</h3>
<p class="date">16 - 18 October 2024</p>
<p>“A marathon of peer-to-peer interoperability and compliance tests in a structured environment”</p>
<!--<p class="event-cta"><a class="btn primary" href="https://ec.europa.eu/digital-building-blocks/sites/x/0JGvKg" aria-label="See event Projectathon #4"><span>See event</span><span class="ico-cta-forward"></span></a></p>-->
</div>

</div>
<!--/PROJECTATHON 5-->

<!--ACCELERATOR 3-->
<div class="col-container">

<div class="col-first">
<img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/597951745/event-accelerator-3-2024-cover.jpg" alt="" aria-hidden="true">
</div>

<div class="col-second">
<h3><span>Brussels, Belgium</span>#3 OOTS Accelerator Event 2024:</h3>
<p class="date">13 - 14 June 2024</p>
<p>“This hybrid event aims to accelerate technical readiness of Member States’ national infrastructure.”</p>
<!--<p class="event-cta"><a class="btn ghost" href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/OOTS+accelerator+event+2" aria-label="See event #2 OOTS Accelerator Event 2024"><span>See event</span><span class="ico-cta-forward"></span></a></p>-->
</div>

</div>
<!--/ACCELERATOR 3-->
 

<!--CAFE 10-->
<div class="col-container">

<div class="col-first">
<img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/597951745/event-10-cover.jpg" alt="" aria-hidden="true">
</div>

<div class="col-second">
<h3><span>Online event</span>Implementers Café #10:</h3>
<p class="date">4 June 2024</p>
<!--<p></p>-->
<!--<p style="display:flex; justify-content: end; align-items: end; height:48px;"><span <p><span class="badge warning"><img alt="" aria-hidden="true" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/ico-coming-soon-warning.svg"><span>Coming soon</span></span></p>-->
<!--<p class="event-cta"><a class="btn ghost" href="https://ec.europa.eu/digital-building-blocks/sites/x/l4ivKg" aria-label="See event Implementers Café #9"><span>See event</span><span class="ico-cta-forward"></span></a></p>-->
</div>

</div>
<!--/CAFE 10-->

<!--PROJECTATHON 4-->
<div class="col-container">

<div class="col-first">
<img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/597951745/event-p4-cover.jpg" alt="" aria-hidden="true">
</div>

<div class="col-second">
<h3><span>Brussels, Belgium</span>Projectathon #4:</h3>
<p class="date">15 - 17 May 2024</p>
<p>“A marathon of peer-to-peer interoperability and compliance tests in a structured environment”</p>
<p class="event-cta"><a class="btn primary" href="https://ec.europa.eu/digital-building-blocks/sites/x/0JGvKg" aria-label="See event Projectathon #4"><span>See event</span><span class="ico-cta-forward"></span></a></p>
</div>

</div>
<!--/PROJECTATHON 4-->

</div>

...

CSS Stylesheet

/*-------------------------------------------*/
/*---OOH EVENTS CALENDAR PAGE - 21-11-2022---*/
/*------------------------------------------*/      

/*---INTRODUCTION---*/
#introduction {
background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/597951745/bg-illu-sigle-events.svg");
background-position: top right;
background-repeat: no-repeat;
background-size: 100%;
}

@media screen and (max-width: 769px) {
  #introduction { background-position: top right; background-size: 240%;}
}

#introduction h1 + p.lead { margin-bottom:5rem;}

/*HACK TO REMOVE EMPTY P FROM CONFLUENCE*/
#introduction .container .cols p:first-child { display: none; border:1px solid red;} 

.event-list .col-container { margin-bottom:2.5rem; padding-bottom:2.5rem;  border-bottom:1px solid #F3F4F7;}
.event-list .col-container:last-child { border:none;}  

.col-container { display: flex; justify-content: space-between; align-items: center !important;}
.col-first { width: 35%;}
.col-first img { max-width: 100%; height: auto; border-radius: 12px;}
.col-second { width: 55%;}
.col-second .badge { display:flex; align-items:center; gap:4px; border-radius:4px;}

.col-container h2 { display: none;} 
.col-container h3 { font-size:20px;} 
.col-container h3 span { display: block; font-size: 1rem; line-height: 1; color: #5D24A4;} 
.col-container p.date { margin-bottom:0.5rem;} 
.col-container p.event-cta { margin-bottom:0; text-align: right;}  

/*---REVISIT PAST EVENT---*/
#revisit-past-events { margin-top:-6rem; padding-top:2.5rem; border-top:1px solid #F3F4F7;}
#revisit-past-events .event-list { position: relative; z-index: 1;}
/*
#revisit-past-events .link-cta.after { color: #3D597A !important;} 
#revisit-past-events .link-cta.after span:after { position: absolute; top: 2px; right: -30px; content: ""; width: 24px; height: 24px; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/581239505/ico-arrow-forward-primary-bis.svg") left no-repeat; background-size: 24px; transition-property: transform; transition-duration: 0.3s; transition-timing-function: ease;}
*/

/*EXPAND MACRO*/
.expand-container { position: relative; z-index: 1; margin-top:-2.5rem;}
.expand-container .col-container { margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid #F3F4F7;} #revisit-past-events .expand-control { margin:0 !important; padding: 0 !important; text-align: right;} 
/*expand control*/
#revisit-past-events .expand-control .expand-icon { display: none;}
#revisit-past-events .expand-control[aria-expanded="true"] { display: none;}
#revisit-past-events .expand-control .expand-control-text { color: #3D597A !important; text-decoration: underline;}
#revisit-past-events .expand-control .expand-control-text:hover { text-decoration: none !important;}
/*expand content*/
#revisit-past-events .expand-content { margin:0 !important; padding: 0 !important;}
#revisit-past-events .expand-content > p:first-child, .expand-content > p:last-child { display: none;}  

/*---BOX CTA PROJECTATHON---*/
#box-cta-projectathon { position:relative; padding-top:0;}
#box-cta-projectathon .projectathon-box { padding:1.5rem; background-color: #00284A; border-radius:20px;}
#box-cta-projectathon .container .cols { margin-bottom:-1rem;}
#box-cta-projectathon .projectathon-box-col-illu { margin-bottom:1rem;}
#box-cta-projectathon .projectathon-box-col-illu img { width: 120px; height:auto;}
 #box-cta-projectathon h3, #box-cta-projectathon p { color: white;}
#box-cta-projectathon p.p-opacity { opacity: 0.75}
#box-cta-projectathon p:last-of-type { margin-bottom:0;}
/*hack - remove empty p from confluence*/
#box-cta-projectathon .container > p:first-child, #box-cta-events .container > p:last-child { display: none; border:1px solid green;}

@media screen and (min-width: 769px) {
 #box-cta-projectathon .projectathon-box { padding:2.5rem;}
 #box-cta-projectathon .projectathon-box-cols { display: flex; align-items: center;}
 #box-cta-projectathon .projectathon-box-col-illu { margin-bottom:0; padding:0 3rem 0 0}
}

@media screen and (min-width: 1366px) {
 #box-cta-projectathon .projectathon-box { padding:5rem;}
}

Page tree

Versions Compared

Old Version 226

New Version 227

Key