Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
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
idintroduction
classsection
Div
classcontainer
Html-bobswift
<div class="cols">
<div class="col-10">

<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>
<h1>Projectathon #1</h1>
<p class="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>
Div
idinformation
classsection
Div
classcontainer
Html-bobswift
<div class="cols">
<div class="col-10">
<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
idbox-cta-report
classsection
Div
classcontainer
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-negative" 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
idgallery
classsection
Div
classcontainer
Div
classcols
Div
classcol-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
excludeLabelno-gallery
pageOOTS:Projectathon1
sortname

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
classcols cols-video justify-content-center
Div
classcol-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%2f49qYFnMUZJY" allowfullscreen="" width="100%" height="315" frameborder="0"></iframe> 
</div> 
Div
idupcoming-projectatons
classsection
Div
classcontainer
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>
Div
idintroduction
classsection
Div
classcontainer
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>Closed</strong></p>
<!--<p class="text-right"><a class="btn primary" href="#"><span>Register</span></a></p>-->
</div>

</div>
Div
idinformation
classsection
Div
classcontainer
Div
classcols
Html-bobswift
<div class="col-8">

<!-- START PRACTICAL INFORMATION -->

<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>

<!--END PRACTICAL INFORMATION -->

<!-- START DESCRIPTION -->

<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>

<!-- END DESCRIPTION -->

<!-- START AGENDA -->

<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"><span>CCAB</span></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><strong>Keynote speaker:</strong> Veronica Gaffey, Director-General “Informatics” (DG DIGIT) <p class="label plenary"><span>Plenary</span></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 <p class="label plenary"><span>Plenary</span></p></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 <p class="label plenary"><span>Plenary</span></p></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 <p class="label ccab"><span>CCAB</span></p></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 <p class="label plenary"><span>Plenary</span></p></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 <p class="label ccab"><span>CCAB</span></p></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 <p class="label plenary"><span>Plenary</span></p></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 <p class="label plenary"><span>Plenary</span></p></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 <p class="label plenary"><span>Plenary</span></p></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 <p class="label ccab"><span>CCAB</span></p></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 <p class="label tbc"><span>TBC</span></p></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"> 

<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<p class="label ccab"><span>CCAB</span></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 2 <br><strong>Keynote speaker:</strong> Hubert Gambs, Deputy Director-General DG GROW - Internal Market, Industry, Entrepreneurship and SMEs <p class="label plenary"><span>Plenary</span></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 <p class="label plenary"><span>Plenary</span></p></div>
</div>
</li>

<li>
<div class="agenda-hour-cols">
<div class="agenda-hour-col">10:00 - 12:00</div>
<div class="agenda-hour-col">Peer-to-peer testing - Part 1 <p class="label plenary"><span>Plenary</span></p></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 <p class="label ccab"><span>CCAB</span></p></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 2<p class="label plenary"><span>Plenary</span></p></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<p class="label ccab"><span>CCAB</span></p></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 3<p class="label plenary"><span>Plenary</span></p></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 <p class="label plenary"><span>Plenary</span></p></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 2<p class="label plenary"><span>Plenary</span></p></div>
</div>
</li>

<li>
<div class="agenda-hour-cols">
<div class="agenda-hour-col">18:30 - 22:00</div>
<div class="agenda-hour-col">Informal drinks <p class="label tbc"><span>TBC</span></p></div>
</div>
</li>

</ul>

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

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

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

<li>
<div class="agenda-hour-cols">
<div class="agenda-hour-col">09:30 - 09:45</div>
<div class="agenda-hour-col">Introduction to the OOTS Projectathon <p class="label plenary"><span>Plenary</span></p></div>
</div>
</li>

<li>
<div class="agenda-hour-cols">
<div class="agenda-hour-col">10:00 - 12:30</div>
<div class="agenda-hour-col">Peer-to-peer testing - Part 1<p class="label plenary"><span>Plenary</span></p></div>
</div>
</li>

<li>
<div class="agenda-hour-cols">
<div class="agenda-hour-col">12:30 - 13:30</div>
<div class="agenda-hour-col">Lunch<p class="label ccab"><span>CCAB</span></p></div>
</div>
</li>

<li>
<div class="agenda-hour-cols">
<div class="agenda-hour-col">13:30 - 14:15</div>
<div class="agenda-hour-col">Final wrap up & introduction to June Projectathon<p class="label plenary"><span>Plenary</span></p></div>
</div>
</li>

<li>
<div class="agenda-hour-cols">
<div class="agenda-hour-col">14:15 - 14:30</div>
<div class="agenda-hour-col">Event closing<p class="label plenary"><span>Plenary</span></p></div>
</div>
</li>
</ul>

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

</ul>

<!-- END AGENDA -->

<!-- START ROOMS -->
<h2 class="h3">Projectathon rooms</h2>

<ul class="room-list">

<!--START DAY 2-->
<li>
<div class="room-cols">

<div class="room-col"><p>Day 2</p></div>
<div class="room-col">
<ul class="room-hour">

<li>
<div class="room-hour-cols">
<div class="room-hour-col">00:00 - 00:00</div>
<div class="room-hour-col">Text <p class="label room1"><span>room1</span></p></div>
</div>
</li>

<li>
<div class="room-hour-cols">
<div class="room-hour-col">00:00 - 00:00</div>
<div class="room-hour-col">Text <p class="label room1"><span>room1</span></p></div>
</div>
</li>

<li>
<div class="room-hour-cols">
<div class="room-hour-col">00:00 - 00:00</div>
<div class="room-hour-col">Text <p class="label room1"><span>room1</span></p></div>
</div>
</li>

</ul>
</div>

</div>
</li> 
<!--END DAY 2-->

</ul>
<!-- END ROOMS -->

</div>
Div
idperform
classsection
Div
classcontainer
Html-bobswift
<div class="cols justify-content-center align-items-center">

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

<div 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>

</div>

</div>
Div
idtimeline
classsection
Div
classcontainer
Html-bobswift
<div class="cols">

<div class="col-8">

<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>
Div
styledisplay:none;
idhow-to-register
classsection
Div
classcontainer
Html-bobswift
<div id="how-to-register-box">

<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
idbox-cta-projectathon
classsection
Div
classcontainer
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>
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%} }   .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-col:nth-child(1) p { font-size: 18px; color: #001832;} .agenda-list > li:last-child .information-col:nth-child(2) p { margin-bottom:0;} .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:1rem 0; list-style: none; border-bottom: 1px dashed #F2E5F7;} .agenda-hour li:first-child { padding-top:0;} .agenda-hour li:last-child { padding-bottom:0; 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%;} .agenda-list .label { margin-bottom:0;} .agenda-list .label span { padding:4px 10px; font-size: 12px; line-height: 12px; background: #E3E6EB; border-radius: 40px;} .agenda-list .label.plenary span { color: #842DB5; background: #F2E5F7;} .agenda-list .label.ccab span { color: #995E00; background: #FFEECC;} .agenda-list .label.tbc span { background: #E3E6EB;} @media screen and (min-width: 769px) { .agenda-cols { display: flex;} .agenda-col:nth-child(1) { width: 30%;} .agenda-col:nth-child(2) { width: 70%} } /*---PERFORM---*/ #perform { margin-top:-2.5rem; margin-bottom:1.5rem; padding-top:0; padding-bottom:0;} #perform .cols { margin-bottom: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 DISPLAY NONE FOR THE MOMENT---*/ #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;} } /*---TIMELINE---*/ #timeline .cols { margin-bottom:0;} .timeline-list { margin: 0 !important; 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%} } /*---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;} } /*---ROOM---*/ .room-list { margin: 0; padding: 0;} .room-list > li { margin:2rem 0 0 0; padding-bottom:1rem; list-style-type: none; border-bottom: 1px solid #E3E6EB;} .room-list > li:first-child { margin-top:0;} .room-list > li:last-child { padding-bottom:0; border-bottom: none;} .room-col:nth-child(1) p { font-size: 18px; color: #001832;} .room-list > li:last-child .room-col:nth-child(2) p { margin-bottom:0;} .room-list li:last-child .room-col:nth-child(2) p:last-child { margin-bottom:0;} .room-hour { margin: 0; padding:0; } .room-hour li { padding:1rem 0; list-style: none; border-bottom: 1px dashed #F2E5F7;} .room-hour li:first-child { padding-top:0;} .room-hour li:last-child { border-bottom: none;} .room-hour li .room-hour-cols { display: flex;} .room-hour li .room-hour-col:nth-child(1) { width: 25%; font-family: Source Sans Pro SB;} .room-hour li .room-hour-col:nth-child(2) { width: 75%;} .room-list .label { margin-bottom:0;} .room-list .label span { padding:4px 10px; font-size: 12px; line-height: 12px; background: #E3E6EB; border-radius: 40px;} .room-list .label.room1 span { color: #842DB5; background: #F2E5F7;} .room-list .label.room2 span { color: #995E00; background: #FFEECC;} @media screen and (min-width: 769px) { .room-cols { display: flex;} .room-col:nth-child(1) { width: 30%;} .room-col:nth-child(2) { width: 70%} }