Page History

CSS Stylesheet

/*------------------------------------------------*/
/*---OOH PROJECTATONS DETAIL PAGE - 24-04-2024---*/
/*----------------------------------------------*/ 

#main-content p:empty { display: none;}
.mb-0 { margin-bottom:0;}

/*---INTRODUCTION---*/
#introduction { }

/*reboot*/ 
#introduction .container .cols { margin:0;}
#introduction .container .cols .col-10 { padding:0;}

#introduction .cols { justify-content: center;}
#introduction p.lead { margin-bottom:40px;}
#introduction .information-illu {margin-bottom:0; }
#introduction img {  max-width: 100%; height: auto; border-radius: 12px;}

/*---INFORMATION---*/
#information { margin-top:-9rem; padding-top:9rem; padding-bottom:18rem; background-color: #F3F4F7;}

/*reboot*/ 
#information .container .cols { margin:0;}
#information .container .cols .col-10 { padding:0;}

#information .cols { justify-content: center;}

@media screen and (min-width: 769px) {
  #information { margin-top:-18rem; padding-top:18rem;}
}

/*---BOX CTA REPORT---*/
#box-cta-report { margin-top:-12rem; padding-top:0; position:relative;}
#box-cta-report .projectathon-box { padding:1.5rem; background-color: #00284A; border-radius:20px;}
#box-cta-report .container .cols { margin-bottom:-1rem;}
#box-cta-report .projectathon-box-col-illu { margin-bottom:1rem;}
#box-cta-report .projectathon-box-col-illu img { width: 120px; height:auto;}
#box-cta-report h3, #box-cta-report p { color: white;}
#box-cta-report p.p-opacity { opacity: 0.75}
#box-cta-report p:last-of-type { margin-bottom:0;}
/*hack - remove empty p from confluence*/
#box-cta-report .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-report .projectathon-box { padding:2.5rem;}
 #box-cta-report .projectathon-box-cols { display: flex; align-items: center;}
 #box-cta-report .projectathon-box-col-illu { margin-bottom:0; padding:0 3rem 0 0}
}

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

/*---GALLERY---*/
#gallery { position: relative; z-index: 2; padding-top:0; padding-bottom:0;}

/*reboot*/ 
#gallery .container .cols { margin:0;}
#gallery .container .cols .col-10 { padding:0;}

#gallery .container .cols > div p:first-child, #gallery .container .cols > div p:last-child { display: none;}
#gallery .cols { justify-content: center;}
.wiki-content .gallery-p { margin:0 0 2rem 0;}
.wiki-content .gallery-cta { margin:2rem 0 0 0;}

.gallery { margin: 0 -5px!important; width:100%;}
.gallery table { width:100%;}
.gallery table td { width:25%;}
.gallery table td img { margin: 0 !important; padding: 5px; width: 100%; max-width: 400px; height: auto; border-radius: 16px;}
.gallery table td img:hover { cursor: pointer;}

/*cols video*/
.cols-video { justify-content: center;}
#gallery .cols:nth-child(2) {  padding-top:120px;}
.cols-video div p:first-child { display: none; border:1px solid yellow;}

.video-container-iframe { position: relative; z-index: 1; width: 100%; overflow: hidden; padding-top: 56.25%; /* 16:9 Aspect Ratio */}
.video-container-iframe iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; border: none; border-radius: 16px;} 

/*tabs video*/
#tabs-video-nav { list-style: none; margin: 40px 0 0 0; padding: 0; overflow: auto;}
#tabs-video-nav li a { text-decoration: none; color: #001832;}
#tabs-video-nav li a .cover-play { position: relative; display:inline-block; line-height: 0;}
#tabs-video-nav li a .cover-play:before { z-index: 1000; content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 40px; width: 40px; background: url(https://ec.europa.eu/digital-building-blocks/sites/download/attachments/581239505/ico-play-video-secondary.svg)}
#tabs-video-nav li a .cover-play img { width: 100%; max-width: 110px; height: auto; border: 2px solid transparent; border-radius:16px; opacity: 1; filter: brightness(0.7) saturate(0.7);}
#tabs-video-nav li:hover a .cover-play img { opacity: 1; filter: none;}
#tabs-video-nav li.active a .cover-play:before { display: none;}
#tabs-video-nav li.active a .cover-play img { /*border: 2px solid #842DB5;*/ opacity: 1; filter: none;}
#tabs-video-nav li a .cover-text { display: block; color: #3D597A;}
#tabs-video-nav li.active a .cover-text { color:#842DB5;}

.tabs-video-content { background-color: #FFF;}
.tabs-video-content-iframe { position: relative; width: 100%; overflow: hidden; padding-top: 56.25%; /* 16:9 Aspect Ratio */}
.tabs-video-content-iframe iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; border: none; border-radius: 16px;}

@media screen and (min-width: 769px) {
  #tabs-video-nav { list-style: none; display:flex; justify-content:center; gap: 2%; padding: 0; overflow: auto;}
  #tabs-video-nav li { width: 33%; cursor: pointer;}
  #tabs-video-nav li a .cover-play img { width: 100%; max-width: 360px; height: auto;}
}
/*---UPCOMING PROJECTATONS---*/
#upcoming-projectatons {}

/*reboot*/ 
#upcoming-projectatons .container .cols { margin:0;}
#upcoming-projectatons .container .cols .col-10 { padding:0;}

#upcoming-projectatons .cols { justify-content: center;}

#upcoming-projectatons .badge { display:flex; align-items:center; gap:4px; border-radius:4px;}

.card-upcoming-cols { display: flex; flex-direction: column; margin-top:40px; width: 100%; gap:24px;}
.card-upcoming { position: relative; display: flex; flex-direction: column; min-width: 0; height: 100% !important; padding:1rem 2rem 2rem 2rem; background-color: white; box-shadow: 0px 2px 12px rgba(0, 24, 50, 0.12); border-radius: 12px; overflow: hidden;}

.card-upcoming-body a { display: block; line-height:0; text-align: right; height: 300px; border-top-right-radius: 12px; border-top-left-radius: 12px; overflow: hidden;}
.card-upcoming-col.p3 .card-upcoming-body a { margin:-1rem 0 0 -3rem; width: 130%; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/illu-card-projectathon-03.png"); background-size: cover; border-radius: 100% 0% 38% 62% / 0% 88% 12% 100% ;}
.card-upcoming-col.p2 .card-upcoming-body a { margin:-1rem 0 0 -3rem; width: 130%; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/illu-card-projectathon-02.jpg"); background-size: cover; background-position: top center; border-radius: 100% 0% 38% 62% / 0% 88% 12% 100% ;}

.card-upcoming-body h3 { margin-top:24px; font-size:20px; line-height:24px;}
.card-upcoming-body p:last-child { margin-bottom:0;}
.card-upcoming-date { font-size: 14px !important; color: #5E748E !important;}

.card-upcoming-footer { margin-top:24px;}
.card-upcoming-footer p:last-child { margin-bottom:0; text-align:right;}

@media screen and (min-width: 992px) {
  .card-upcoming-cols { flex-direction:row; margin-left:auto; margin-right: auto; width: 80%; gap:24px;}
  .card-upcoming-col:nth-child(1) { width: 50%;}
  .card-upcoming-col:nth-child(2) { width: 50%;}
  .card-upcoming-body { flex: 1 1 auto;}
  .card-upcoming-body a { height: 220px;}
}

Div

id	introduction

Div

id	introduction
class	section

Div

class	container

Html-bobswift

<p><a class="link-cta primary before" href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/Projectathons"><span>Back to projectathons</span></a></p>

<div class="introduction-box">

<div class="introduction-box-cover">
</div>

<div class="introduction-box-content">
<p class="h5">19 - 21 April 2023 | Brussels, Belgium</p>
<h1 class="h2"><span class="heading-subtitle">projectathon</span>Projectathon #1</h1>
<p>A marathon of peer-to-peer interoperability and compliance tests in a structured environment.</p>
<p>Registration: <strong>7 February - 03 March 2023</strong></p>
<p class="text-right"><a class="btn primary" href="#"><span>Register</span></a></p>
</div>

</div>

Div

id	information
class	section

Div

class	container

Div

class	cols

Html-bobswift

<div class="col-8">

<h2 class="h3">Practical information</h2>

<ul class="information-list">

<li>
<div class="information-cols">
<div class="information-col"><p>Location</p></div>
<div class="information-col"><p>Conference Center Albert Borschette (CCAB)<br>Rue Froissart 36<br>1040 Brussels, Belgium</p></div>
</div>
</li>

<li>
<div class="information-cols">
<div class="information-col"><p>Date</p></div>
<div class="information-col"><p>19 April - 21 April 2023</p></div>
</div>
</li>

<li>
<div class="information-cols">
<div class="information-col"><p>Registration</p></div>
<div class="information-col"><p>Closed</p></div>
</div>
</li>

<li>
<div class="information-cols">
<div class="information-col"><p>Target groups</p></div>
<div class="information-col"><p>All Member States teams relevant for implementing the Once-Only Technical System (to be coordinated with the National Coordinator).</p></div>
</div>
</li>

<li>
<div class="information-cols">
<div class="information-col"><p>Fees</p></div>
<div class="information-col"><p>No fees are charged to participate to the actual Projectathon event itself.</p></div>
</div>
</li>

<li>
<div class="information-cols">
<div class="information-col"><p>Accommodation</p></div>
<div class="information-col"><p>Any hotel reservation is the responsibility of the participants. Member State reimbursement is possible but limited up to one public and one private sector expert per Member State.</p></div>
</div>
</li>

</ul>

<h2 class="h3">Description</h2>

<p>The April 2023 Projectathon will be based on the OOTS TDDs (Technical Design Documents) version Q4 2022. For this event, an overview of a mix of test cases has been prepared, in sync with those specifications and tailored to the development status of the Member States. It consists of the following elements:</p>

<ul>
<li>5 Evidence Exchange scenarios without preview,</li>
<li>5 Evidence Exchange scenarios with preview,</li>
<li>2 Maintenance flow scenarios (Common Service updates).</li>
</ul>

<p>A high-level overview and summary of test cases is available to the Testing and deployment sub-group (restricted to relevant users on the wiki). The full test cases detailed will be visible in Gazelle (restricted to users that registered as participants to the Projectathon).</p>

<p>The tests will start with static and pre-agreed data. This is to be discussed in and shared through the relevant subgroup (Testing and deployment) and/or collaborative space on Teams.</p>

<p style="margin-top:2.5rem;"><a class="link-download primary" href="#"><span>Download the privacy statement</span></a></p>

<h2 class="h3">Projectathon agenda</h2>

<ul class="agenda-list">

<li>
<div class="agenda-cols">
<div class="agenda-col"><p>Day 1</p></div>
<div class="agenda-col">

<ul class="agenda-hour">
<li>
<div class="agenda-hour-cols">
<div class="agenda-hour-col">08:00 - 09:30</div>
<div class="agenda-hour-col"> Welcome coffee & registration <p class="label">CCAB</p></div>
</div>
</li>

<li>
<div class="agenda-hour-cols">
<div class="agenda-hour-col">09:30 - 09:50</div>
<div class="agenda-hour-col">Welcome to the OOTS Projectaton (keynote speech) - day 1<br><br> <strong>Keynote speaker:</strong> Veronica Gaffey, Director-General “Informatics” (DG DIGIT) <p class="label">CCAB</p></div>
</div>
</li>

<li>
<div class="agenda-hour-cols">
<div class="agenda-hour-col">09:50 - 10:10</div>
<div class="agenda-hour-col">Introduction to the OOTS Projectathon</div>
</div>
</li>

<li>
<div class="agenda-hour-cols">
<div class="agenda-hour-col">10:10 - 12:00</div>
<div class="agenda-hour-col">Technical set-up</div>
</div>
</li> 

<li>
<div class="agenda-hour-cols">
<div class="agenda-hour-col">12:00 - 13:00</div>
<div class="agenda-hour-col">Lunch</div>
</div>
</li>  

<li>
<div class="agenda-hour-cols">
<div class="agenda-hour-col">13:00 - 15:00</div>
<div class="agenda-hour-col">Peer-to-peer testing - Part 1</div>
</div>
</li>

<li>
<div class="agenda-hour-cols">
<div class="agenda-hour-col">15:00 - 15:30</div>
<div class="agenda-hour-col">Coffee break</div>
</div>
</li>

<li>
<div class="agenda-hour-cols">
<div class="agenda-hour-col">15:00 - 17:00</div>
<div class="agenda-hour-col">Peer-to-peer testing - Part 2</div>
</div>
</li>

<li>
<div class="agenda-hour-cols">
<div class="agenda-hour-col">17:00 - 17:20</div>
<div class="agenda-hour-col">Wrap-up of the day + intro to next day</div>
</div>
</li>

<li>
<div class="agenda-hour-cols">
<div class="agenda-hour-col">17:20 - 17:30</div>
<div class="agenda-hour-col">Closing of day 1</div>
</div>
</li>

<li>
<div class="agenda-hour-cols">
<div class="agenda-hour-col">17:30 - 19:00</div>
<div class="agenda-hour-col">Cocktail</div>
</div>
</li>

<li>
<div class="agenda-hour-cols">
<div class="agenda-hour-col">19:30 - 22:00</div>
<div class="agenda-hour-col">Informal dinner</div>
</div>
</li>

</ul>

</div>
</div>
</li>

<li>
<div class="agenda-cols">
<div class="agenda-col"><p>Day 2</p></div>
<div class="agenda-col">

</div>
</div>
</li>

<li>
<div class="agenda-cols">
<div class="agenda-col"><p>Day 3</p></div>
<div class="agenda-col">

</div>
</div>
</li>

</ul>

<h2 class="h3">Projectathon timeline</h2>

<ul class="timeline-list">

<li>
<div class="timeline-cols">
<div class="timeline-col"><p>13 December 2022</p></div>
<div class="timeline-col">
<p>Information</p>
<p>Attend the Projectathon Deep-Dive session during the OOTS Implementers Cafe on 13 December 2022.</p>
<p>Signal your intention to participate to the April 2023 Projectathon as Members States (can be with multiple teams)</p>
<p><i>Implementers cafe #2 “eDelivery & OOTS Projectathon Process” 13/12/2022</i><br>
<i>Implementers cafe #3 “eID & OOTS Projectathon Registration” 31/01/2023</i></p>
</div>
</div>
</li>

<li>
<div class="timeline-cols">
<div class="timeline-col"><p>7 February-3 March 2023</p></div>
<div class="timeline-col">
<p>Registration</p>
<p>Register for the event via the EU survey and provide your consent to the Projectathon personal data privacy statement.</p>
<p>Register your organisation, system under test (SUT), SUT organisator(s) and features to be tested in Gazelle.</p>
<p><i>Implementers cafe #4 “OOTS preview area & OOTS Projectathon Preparation” 21/02/2023</i></p>
</div>
</div>
</li>

<li>
<div class="timeline-cols">
<div class="timeline-col"><p>15 March-14 April 2023</p></div>
<div class="timeline-col">
<p>Pre-projectathon test</p>
<p>Perform Preparatory Test to get your system, test data and yourself ready before Projectathon.</p>
</div>
</div>
</li>

<li>
<div class="timeline-cols">
<div class="timeline-col"><p>03 March-14 April 2023</p></div>
<div class="timeline-col">
<p>Pre-projectathon test</p>
<p>Perform Connectivity Test to ensure network connection of SUTs are well configured before Projectathon.</p>
<p><i>Projectathon Kick-off session with all participants</i><br>
<i>Hybrid event on 14 March together with GCG meeting</i><br>
<i>Q&A session for Participants before the Projectahon 12/04/2023</i>
</p>
</div>
</div>
</li>

<li>
<div class="timeline-cols">
<div class="timeline-col"><p>19 April-21 April 2023</p></div>
<div class="timeline-col">
<p>Projectathon</p>
<p>Game on!  Connect and perform Peer-to-Peer marathon test!</p>
</div>
</div>
</li>

<li>
<div class="timeline-cols">
<div class="timeline-col"><p>5 May 2023</p></div>
<div class="timeline-col">
<p>Post Projectathon</p>
<p>Publication of Test Reports, lessons learned and best practices</p>
<p><i>Implementers cafe #5 “Common Services Admin App & Projectathon debrief (April event) and Preparation (June event)” 05/05/2023</i></p>
</div>
</div>
</li>

</ul>  

</div>

Div

id	perform
class	section

Div

class	container

Html-bobswift

<div class="cols justify-content-center align-items-center">

<div ">
<div class="col-410">

<p<p><a class="performlink-illu"><img alt="" aria-hidden="true" srccta primary before" href="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/illu-perform.png"></p>
</div>

<divdisplay/OOTS/Projectathons"><span>Back to projectathons</span></a></p>
<h1>Projectathon #1</h1>
<p class="col-4">

<h2 class="h3">Perform Peer-to-Peer test</h2>
<ul>
<li><div><span>1</span><p>Search potentional Test Partner through Gazelle</p></div></li>
<li><div><span>2</span><p>Meet Test Partner and Schedule test</p></div></li>
<li><div><span>3</span><p>Execute Tests and upload evidence in Gazelle</p></div></li>
<li><div><span>4</span><p>Monitor examine evidence and evaluate test result</p></div></li>
<li><div><span>5</span><p>Fix bug (if any)</p></div></li>
</ul>lead">A marathon of peer-to-peer interoperability and compliance tests in a structured environment.</p>
<p><span class="badge neutral">Past event</span></p>
<p class="information-illu"><img aria-hidden="true" alt="" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/647954663/illu-introduction-projectathon-01-2024.jpg"></p>

</div>

</div>

display:none;

Div

style

id	how-to-registerinformation
class	section

Div

class	container

Html-bobswift

<div idclass="cols">
<div class="how-to-register-boxcol-10">

<h3>How to register to the OOTS Projectathons</h3>
<ul>
<li><div><span>1</span><p>The Organising Team invites the National Coordinators who express an interest in participating in the April Projectathon event to register for this event via email.</p></div></li>

<li><div><span>2</span><p>National Coordinators register for the Projectathon event via an event registration form provided by the Organising Team (using EU Survey). They share the link to the event registration form with each person joining the Projectathon from their team. It is mandatory for every participant of a Member State to fill in the event registration form (it is a pre-condition for getting access to the Gazelle platform).</p></div></li>

<li><div><span>3</span><p>The organising Team invites each of the persons registered in EU survey as participants to register in Gazelle. The MS team then identifies the MS Gazelle admin that will encode the organisation and users (team members) in the Gazelle platform (active participants only).</p></div></li>

<li><div><span>4</span><p>The MS Gazelle admin then select the relevant test session (April 2023) and add your System(s) Under Test (SUT) in the Gazelle platform (active participants only).</p></div></li>

</ul>

</div>

Div

id	box-cta-projectathon
class	section

Div

class	container

Html-bobswift

<div class="cols justify-content-center">

<div class="col-7">
<div class="projectathon-box">
<div class="projectathon-box-cols">

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

<div class="projectathon-box-col-content">
<h3 class="h5">Projectathon Playbook</h3>
<p class="p-opacity">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-bis" href="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/592642240/Once-Only_Technical_System_Projectathon_Playbook_v1.01.pdf" onclick="_paq.push(['trackEvent','conversion','oots-projectathon-detail-page-01','oots-projectathon-playbook'])"><span>Download the Projectathon Playbook</span><span class="ico-download"></span></a></p>
</div>

</div>
</div>
</div>

</div>

<h2>Once-Only Technical System Projectathon #1 Insights</h2>

<p>From 19-21 April 2023, the first Once-Only Technical System (OOTS) <a href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/Projectathon1" target="_blank">Projectathon</a> brought together 25 EU Member States in Brussels in a marathon of peer-to-peer interoperability testing. A Projectathon is a crucial step in the development, testing and deployment into production of the Once-Only Technical System components that underpin a national Once-Only implementation.</p>

<p>Once-Only will help to ease administrative burden on companies, with resource savings even greater for smaller companies with more limited resources.</p>

<p>It will also have great benefits for European citizens. The Once-Only Technical System means that when completing an online procedure, citizens will be able to give their explicit request to retrieve evidence from a competent authority in another Member State. This explicit request triggers the retrieval of evidence from competent authorities across many different sectors through the Once-Only Technical System (education, vehicles, population registers and more).</p>

<p>This Projectathon provided EU countries with an excellent opportunity to verify that their national Once-Only systems or solutions effectively comply with the appropriate specifications, laid out in the Once-Only Technical System <a href="https://eur-lex.europa.eu/legal-content/EN/TXT/?uri=uriserv%3AOJ.L_.2022.231.01.0001.01.ENG&toc=OJ%3AL%3A2022%3A231%3ATOC" target="_blank">Implementing Regulation</a> and <a href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/Technical+Design+Documents" target="_blank">Technical Design Documents</a>.</p>

<p>Neutral experts, acting as Monitors, supervised and verified the tests over the three days. The Once-Only Technical System Projectathons are not pass/fail type examinations. Rather, they are a collaborative exercise in understanding technical and operational issues and working together to solve them.</p>

<p>Ahead of the December 2023 legal deadline to implement the Once-Only Technical System, the European Commission is organising two more Projectathons, allowing the participating teams to build on their experiences.</p>

</div>
</div>

Div

id	box-cta-report
class	section

Div

class	container

Html-bobswift

<div class="cols justify-content-center">

<div class="col-7">
<div class="projectathon-box">
<div class="projectathon-box-cols">

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

<div class="projectathon-box-col-content">
<h3 class="h5">Projectathon #1 Report</h3>
<p class="p-opacity">This report summarises key results from the testing that took place from 19-21 April 2023. </p>
<p><a class="btn primary-bis" href="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/647954663/Once_Only_Technical_System_Projectathon_Event_Report_April_v1.00.pdf" onclick="_paq.push(['trackEvent','conversion','oots-projectathon-detail-page-01','oots-projectathon-report'])"><span>Download the Report</span><span class="ico-download"></span></a></p>
</div>

</div>
</div>
</div>

</div>

Div

id	gallery
class	section

Div

class	container

Div

class	cols

Div

class	col-10

Html-bobswift
<h2>Gallery</h2> <p class="gallery-p">Experience the event in its entirety and relive every moment with our gallery.</p>

Gallery

excludeLabel	no-gallery
page	OOTS:Projectathon1
sort	name

Html-bobswift

<p class="gallery-cta"><a target="_blank" class="btn ghost" href="https://ec.europa.eu/digital-building-blocks/wikis/display/OOTSICS/Projectathon+1+-+Gallery"><span>See all gallery images (restricted space)</span><span class="ico-cta-forward"></span></a></p>

Div

class	cols cols-video justify-content-center

Div

class	col-10

Html-bobswift

<h2>Video</h2>
<p class="gallery-p">Watch the official April 2023 Projectathon ‘aftermovie’.</p>
<div class="video-container-iframe">
<iframe src="https://europa.eu/webtools/crs/iframe/?oriurl=https%3A%2F%2Fwww.youtube.com%2fembed%2fkLjEdWG1MbY" allowfullscreen="" width="100%" height="315" frameborder="0"></iframe> 
</div>

Div

id	upcoming-projectatons
class	section

Div

class	container

Html-bobswift

<div class="cols">
<div class="col-10">

<h2>Other Past Projectathons</h2>
<p class="mb-0">Since 2023, the Commission has been organising Once-Only Technical System Projectathons. These are three-day events where national teams connect various systems and perform a marathon of peer-to-peer interoperability and compliance tests in a structured environment.</p>

</div>
</div>

Html-bobswift

<div class="card-upcoming-cols">

<!--CARD 01-->
<div class="card-upcoming-col p3">
<div class="card-upcoming">
<div class="card-upcoming-body">
<a href="#" style="pointer-events: none;"></a>
<h3>Projectathon #3</h3>   
<p>The October Projectathon is the final such event in 2023, just ahead of the legal deadline for EU Member States to implement the Once-Only Technical System. It builds on the work and experiences of the April and June Projectathons.</p>

</div>
<div class="card-upcoming-footer">
<p class="card-upcoming-date">18 - 20 October 2023</p>
<p><a class="btn ghost" href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/Projectathon3"><span>Read more</span><span class="ico-cta-forward"></span></a></p>
</div>
</div>
</div>
<!---->

<!--CARD 02-->
<div class="card-upcoming-col p2">
<div class="card-upcoming">
<div class="card-upcoming-body">
<a href="#" style="pointer-events: none;"></a>
<h3>Projectathon #2</h3>   
<p>The June Projectathon provided a valuable moment for national implementation teams to perform interoperability tests prior to the summer recess.</p>

</div>
<div class="card-upcoming-footer">
<p class="card-upcoming-date">14 - 16 June 2023 | Brussels</p>
<p><a class="btn ghost" href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/Projectathon2"><span>Read more</span><span class="ico-cta-forward"></span></a></p>
</div>
</div>
</div>
<!---->

</div>

CSS Stylesheet

/*------------------------------------------------*/ /*---OOH PROJECTATONS DETAIL PAGE - 09-03-2023---*/ /*----------------------------------------------*/ #main-content p:empty { display: none;} .mb-0 { margin-bottom:0;} /*---INTRODUCTION---*/ #introduction { padding-bottom:0;} .introduction-box { display: flex; border-radius: 16px; overflow: hidden; } .introduction-box-cover { width: 50%; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/647954663/illu-introduction-projectathon-01.jpg"); background-size: cover;} .introduction-box-content { position:relative; padding: 3.5rem 7rem 2.5rem 0; width: 50%; background-color: #F3F4F7;} .introduction-box-content * { position: relative;} .introduction-box-content:before { position:absolute; top: -10%; left:-110px; display: inline-block; content:""; background-color: #F3F4F7; width: 200px; height: 120%; border-radius: 50% 50% 52% 48% / 50% 50% 50% 50% ;} .heading-subtitle { display: block; font-size: 14px; line-height: 24px;} @media screen and (max-width: 768px) { .introduction-box { display: block;} .introduction-box-cover { height: 12rem; width: 100%;} .introduction-box-content { padding: 2rem; width: 100%;} .introduction-box-content:before { width: 0;} } /*---INFORMATION---*/ #information { padding-top:0;} #information h2 { margin:7.5rem 0 2.5rem 0;} .information-list { margin: 0; padding: 0;} .information-list li { margin:2rem 0 0 0; padding-bottom:1rem; list-style-type: none; border-bottom: 1px solid #E3E6EB;} .information-list li:first-child { margin-top:0;} .information-list li:last-child { padding-bottom:0; border-bottom: none;} .information-col:nth-child(1) p { font-size: 18px; color: #001832;} .information-list li:last-child .information-col:nth-child(2) p { margin-bottom:0;} @media screen and (min-width: 769px) { .information-cols { display: flex; align-items: center;} .information-col:nth-child(1) { width: 30%;} .information-col:nth-child(2) { width: 70%} } .timeline-list { margin: 0; padding: 0;} .timeline-list li { margin:2rem 0 0 0; padding-bottom:1rem; list-style-type: none; border-bottom: 1px solid #E3E6EB;} .timeline-list li:first-child { margin-top:0;} .timeline-list li:last-child { padding-bottom:0; border-bottom: none;} .timeline-col:nth-child(1) p { font-size: 18px; color: #001832;} .timeline-col:nth-child(2) p:first-child { font-size: 18px; font-weight: bold; color: #001832;} .timeline-list li:last-child .timeline-col:nth-child(2) p:last-child { margin-bottom:0;} @media screen and (min-width: 769px) { .timeline-cols { display: flex; align-items: center;} .timeline-col:nth-child(1) { width: 30%;} .timeline-col:nth-child(2) { width: 70%} } .agenda-list { margin: 0; padding: 0;} .agenda-list > li { margin:2rem 0 0 0; padding-bottom:1rem; list-style-type: none; border-bottom: 1px solid #E3E6EB;} .agenda-list > li:first-child { margin-top:0;} .agenda-list > li:last-child { padding-bottom:0; border-bottom: none;} .agenda-cols { display: flex;} .agenda-col:nth-child(1) { width: 30%;} .agenda-col:nth-child(1) p { font-size: 18px; color: #001832;} .agenda-col:nth-child(2) { width: 70%} .agenda-list > li:last-child .information-col:nth-child(2) p { margin-bottom:0;} .agenda-list .label { display: inline; padding: 8px 12px; font-size: 12px; line-height: 12px; color: #842DB5; background: #F2E5F7; border-radius: 40px;} .agenda-list li:last-child .agenda-col:nth-child(2) p:last-child { margin-bottom:0;} .agenda-hour { margin: 0; padding:0; } .agenda-hour li { padding:0.75rem 0; list-style: none; border-bottom: 1px dashed #F2E5F7;} .agenda-hour li:last-child { border-bottom: none;} .agenda-hour li .agenda-hour-cols { display: flex;} .agenda-hour li .agenda-hour-col:nth-child(1) { width: 25%; font-family: Source Sans Pro SB;} .agenda-hour li .agenda-hour-col:nth-child(2) { width: 75%;} #perform { margin-top:-2rem; padding-top:0;} #perform ul { margin:2.5rem 0 0 0; padding: 0; list-style: none;} #perform ul li > div { display:flex; align-items: baseline; gap:10px;} #perform ul li > div > span { display: flex; align-items: center; justify-content: center; background: #E3E6EB; width: 24px; height: 24px; min-width: 24px; border-radius: 24px; color: #3D597A; font-size: 12px;} #perform ul li:last-child > div > p { margin-bottom:0;} #perform h3 { margin-bottom:2.5rem;} .perform-illu { margin-bottom:0; line-height:0 !important;} .perform-illu img { width: 180px;} @media screen and (min-width: 769px) { .perform-illu img { width: 100%; max-width: 270px; height: auto;} } /*---HOW TO REGISTER---*/ #how-to-register { margin-top:-2rem; padding-top:0;} #how-to-register-box { padding:3rem 1rem; background: #F3F4F7; border-radius: 60px;} #how-to-register-box .cols p:first-child { display: none;} #how-to-register-box ul { margin:2.5rem 0 0 0; padding: 0; list-style: none;} #how-to-register-box ul li > div { display:flex; align-items: baseline; gap:10px;} #how-to-register-box ul li > div > span { display: flex; align-items: center; justify-content: center; background: #E3E6EB; width: 24px; height: 24px; min-width: 24px; border-radius: 24px; color: #3D597A; font-size: 12px;} #how-to-register-box ul li:last-child > div > p { margin-bottom:0;} #how-to-register-box h3 { margin-bottom:2.5rem;} @media screen and (min-width: 1366px) { #how-to-register-box { padding:5rem;} } /*---BOX CTA PROJECTATHON---*/ #box-cta-projectathon { padding-top:0; position:relative;} #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 135

New Version Current

Key