Page History

Div

id	introduction
class	section

Div

class	container

Div

class	cols

Div

class	col-8 event

Html-bobswift

<h1><span class="d-block text-primary">Past events</span>Revisit past events</h1>
<p>Browse past events</p>

<div class="event-list">  

<!--EVENT 01--> 
<div class="col-container">

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

<div class="col-second">
<h3><span>Online event</span>Implementers Café #1:</h3>
<p class="date">24 November 2022 | 9:30 - 12:15</p>
<p>“Once-Only Technical System Guidance and Projectathon Introduction”</p>
<p class="event-cta"><a class="btn ghost" href="https://ec.europa.eu/digital-building-blocks/sites/x/CAWkIw"><span>See event</span><span class="ico-cta"></span></a></p>
</div>

</div> 
<!---->    

</div>

Div

style	display:none
id	revisit-passed-events
class	section

Div

class	container

Div

class	cols

Div

class	col-8 event

Html-bobswift

<h2 class="h3">Revisit past events</h2>
<p>Browse past events</p>

<div class="event-list">

<!--EVENT 01--> 
<div class="col-container">

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

<div class="col-second">
<h3><span>Online event</span>Implementers Café #1:</h3>
<p class="date">24 November 2022 | 9:30 - 12:15</p>
<p>“Once-Only Technical System Guidance and Projectathon Introduction”</p>
<p class="event-cta"><a class="btn ghost" href="https://ec.europa.eu/digital-building-blocks/sites/x/CAWkIw"><span>See event</span><span class="ico-cta"></span></a></p>
</div>

</div> 
<!---->  

</div>

id	box-cta-projectathon-playbook
class	section

Html-bobswift

<div class="container"> 

<div class="cols">

<div class="col-2">
<img aria-hidden="true" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/581239505/illu-projectathon playbook.png" alt="">
</div>

<div class="col-10">
<h3 class="h4">Projectathon Playbook</h3>
<p>The Projectathon Playbook provides a detailed overview of the Projectathon events organized for teams across the Member States willing to test their system before the go-live of the Once-Only Technical System.</p>
<p><a class="btn primary-negative" href="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/592642240/OOTS-PROJECTATHON-PLAYBOOK-PARTICIPANTS-12-12-2022.pdf"><span>Download the Projectathon Playbook</span><span class="ico-download"></span></a></p>
</div>

</div>

</div>

CSS Stylesheet

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

/*---INTRODUCTION---*/
#introduction { padding-bottom:0;
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%;}
}

/*HACK TO REMOVE EMPTY P FROM CONFLUENCE*/
#introduction .container .cols p:first-child { display: none; border:1px solid red;} 
#introduction h1 span { font-size: 1rem; line-height: 24px;}  

.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-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-passed-events { margin-top:-6rem; padding-top:2.5rem; padding-bottom:0; border-top:1px solid #F3F4F7;}

/*---BOX CTA EVENTS---*/
#box-cta-projectathon-playbook { padding-top:0;}
/*hack - remove empty p from confluence*/
#box-cta-projectathon-playbook > p:first-child , #box-cta-projectathon-playbook > p:last-child { display:none; border:1px solid red;}
#box-cta-projectathon-playbook .container { position: relative; padding: 3rem 2.5rem; background-color: #00284A; border-radius: 20px;}
#box-cta-projectathon-playbook h3 { color: white;} 
#box-cta-projectathon-playbook p { margin-top:0.75rem; color: white; opacity:0.75;}
#box-cta-projectathon-playbook p:last-child { margin-bottom:0; opacity:1;}

@media screen and (min-width: 769px) {
   #box-cta-projectathon-playbook .container { padding: 6.25rem 5rem;}
   #box-cta-projectathon-playbook .col-10 { padding-left: 2rem;} 
}

Page tree

Versions Compared

Old Version 2

New Version Current

Key