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-
Div
idteams-actors
classsection
Div
classcontainer
Div
classcols
Html-bobswift
<div class="col-9">
<h2>Teams and actors in the Projectathons</h2>
<p>The preparation of the Once-Only Technical System (OOTS) Projectathons requires the combined effort and input of a diverse and evolving set of contributors.</p>
</div>
Div
idteams-actors-box
classcols
Html-bobswift
<div class="col-12">
<h3>Once-Only Technical System Projectathon Teams </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

<ul>

<li>
<h4 class="h5">OOTS team members in the European Commission</h4>
<p>Sub-group editors and their respective teams, The Commission Common Services development team, The EC OOTS Support team, The OOTS communications team, The Commission project managers</p>
</li>

<li>
<h4 class="h5">Monitors</h4>
<p>Neutral experts, familiar with the Once-Only Technical System specifications or with building blocks that are reused in the Once-Only Technical System architecture, such as eDelivery or eID.</p>
</li>

<li>
<h4 class="h5">Member State contributors</h4>
<p>Ranging from National Coordinators and sub-group experts to national or sub-national development or integration team members</p>
</li>

<li>
<h4 class="h5">Additional Projectathon experts</h4>
<p>Experts from IHE and Kereval</p>
</li> 
</ul>
</div>
Div
idactors
classcols
Html-bobswift
<div class="col-12">
<h3>Actors in a Projectathon</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

<ul>

<li>
<h4 class="h5">Organiser team</h4>
<p>The organisation with overall responsibility for the Projectathon event.</p>
<h4 class="h5">“Gazelle” platform</h4>
<p>Manages all the elements necessary for peer-to-peer interoperability tests.</p>
<h4 class="h5"></h4>
<p></p>
<h4 class="h5">Test Module Designer</h4>
<p>Defines and documents the test plan, test cases and maintains test data in the “Gazelle” platform test management tool.</p>
<h4 class="h5">Test Session Manager</h4>
<p>Hosts the technical topics related to webinars, and assists participants during the registration, preparatory test and Projectathon. </p>
</li>

<li>
<h4 class="h5">System Under Test (SUT) operator(s)</h4>
<p>Configure, connect Member States’ SUT to “Gazelle” and execute(s) the peer-to-peer tests.</p>
<h4 class="h5">Monitors</h4>
<p>Support the participants during the execution of the tests. </p>
<h4 class="h5">Observer</h4>
<p>Observe and learn what a Projectathon is and how the peer-to-peer tests are executed, to prepare themselves for the next Projectathon event.</p>
</li>

</ul>

</div>
Div
classcols
Html-bobswift
<div class="col-12">
<p>Learn more about the teams and actors in the Projectathon Playbook</p>
<p class="mb-0"><a class="btn ghost" 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-overview','oots-projectathon-playbook'])"><span>Download the Projectathon Playbook</span><span class="ico-download"></span></a></p>
</div>
<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-overview','oots-projectathon-playbook'])"><span>Download the Projectathon Playbook</span><span class="ico-download"></span></a></p> </div> </div> </div> </div> </div>
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
idbox-cta-projectathon
classsection
Div
classcontainer
Html-bobswift
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-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
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%2fkLjEdWG1MbY" 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>
CSS Stylesheet
/*--------------------------------------------------*/ /*---OOH PROJECTATONS OVERVIEW PAGE - 16-02-2023---*/ /*------------------------------------------------*/ #main-content p:empty { display: none;} /*#main-content p span:empty { display: none;}*/ .mb-0 { margin-bottom:0;}    /*---TEAMS AND ACTORS---*/ #teams-actors {} #teams-actors-box { padding:1rem; background: #F3F4F7; border-radius: 60px;} #teams-actors-box ul { margin-bottom:0; padding:0; list-style:none; } #teams-actors-box ul li { margin-top:1rem; padding:1rem 0 1.5rem 0; border-bottom: 1px solid #E3E6EB;} #teams-actors-box ul li:last-child { border-bottom: none;} #teams-actors-box ul li h4 { color:#3D597A !important;} #teams-actors-box ul li p { margin-bottom:0;} @media screen and (min-width: 1366px) {   #teams-actors-box { padding:5rem;}   #teams-actors-box ul { display: flex; flex-wrap: wrap;} #teams-actors-box ul li { flex-shrink: 2; padding:0 30px; width: 25%; border-left:1px solid #E3E6EB; border-bottom: none;}   #teams-actors-box ul li:first-child { padding-left:0; border-left:none;} } /*---ACTORS---*/ #actors { margin-top:7.5rem;} #actors ul { margin-top:2.5rem !important; margin-bottom:3rem; padding:0; list-style:none; } #actors ul li { padding:1rem;} #actors ul li:last-child { border-bottom: none;} #actors ul li h4 { margin-bottom:12px; color:#3D597A !important;} @media screen and (min-width: 1366px) { #actors ul { display: flex; flex-wrap: wrap;} #actors ul li { flex-shrink: 2; padding:0 30px; width: 50%; border-left:1px solid #E3E6EB; border-bottom: none;} #actors ul li:first-child { padding-left:0; border-left:none;} } /*---BOX CTA PROJECTATHON---*/ #box-cta-projectathon { 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;} }