Page History

CSS Stylesheet

/*--------------------------------------------------*/
/*---OOH PROJECTATONS OVERVIEW PAGE - 23-04-2024---*/
/*------------------------------------------------*/ 

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

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

#introduction h1 { margin-bottom:40px;}
#introduction h1 .heading-subtitle {display: block; font-size: 14px; line-height: 24px; letter-spacing: 5px; font-family: Source Sans Pro SB !important; text-transform: uppercase;}
#introduction p { margin-bottom:0;}
#introduction .introduction-illu { line-height:0 !important;}
#introduction .introduction-illu img { width: 180px;}

@media screen and (min-width: 769px) {
  #introduction .introduction-illu img { width: 100%; max-width: 320px; height: auto;}
}

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

#introduction-p4 .col-5 p:first-child { display:none;}
#introduction-p4 .col-5 p.p-cta { margin-bottom:0;}

#introduction-p4 img { width: 180px;}

@media screen and (min-width: 769px) {
  #introduction-p4 .cols { display: flex; flex-flow: row-reverse; justify-content: center;}
  #introduction-p4 .introduction-illu { text-align:center;}
  #introduction-p4 img { width: 100%; max-width: 220px; height: auto;}
}

/*---PARTICIPATE---*/
#participate { background-color: #F3F4F7;}

#participate .container > p:first-child { display: none;}

/*reboot*/ 
#participate .container .cols { margin:0;}
#participate .container .cols .col-8,
#participate .container .cols .col-7,
#participate .container .cols .col-6,
#participate .container .cols .col-5 { padding:0;}

#participate h2 { margin-bottom:40px;}

#participate ul { display: flex; flex-direction: column; margin-bottom:0; padding:0; list-style:none;}
#participate ul li { position:relative; margin-top:12px; padding:0 1rem 0 1.75rem; }
#participate ul li:before { content:''; display: block; position: absolute; top:2px; left:0; height: 20px; width: 20px; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/ico-check-primary.svg") no-repeat;}

#participate .cols-cta { margin-top:40px !important; padding-top:40px; border-top:1px solid #E3E6EB;}
#participate .cols-cta .p-cta { margin-bottom:0;}

.past-insights-illu { margin-bottom:0 !important; line-height:0;}
.past-insights-illu img { width: 100px;}

@media screen and (max-width: 768px) {
  .past-insights-illu { margin-top: 40px !important;}
}

@media screen and (min-width: 769px) {
  #participate .cols-cta .col-5 { display: flex; align-items: center; justify-content: center;}
  #participate .cols .col-6:nth-child(1) ul { padding-right:20px;}
  #participate .cols .col-6:nth-child(2) ul {padding-left:20px;}
}

/*---EXPECT---*/
#expect { padding-top:0; padding-bottom:0; background-color: #F3F4F7;}

#expect .container > p:first-child { display: none;}

/*reboot*/ 
#expect .container .cols { margin:0;}
#expect .container .cols .col-7 { padding:0;}
#expect .container .cols .col-6 { padding:0;}

#expect h2 { margin-bottom:40px;}
#expect h3 { margin-bottom: 0;}
#expect .p-ico { margin-bottom:12px;}
#expect .p-ico img { margin-left:-24px;}

#expect ul { display: flex; flex-direction: column; margin-bottom:0; padding:0; list-style:none;}
#expect ul li { position:relative; margin-top:12px; padding:0 1rem 0 1.75rem; }
#expect ul li:before { content:''; display: block; position: absolute; top:2px; left:0; height: 20px; width: 20px; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/ico-check-primary.svg") no-repeat;}

@media screen and (max-width: 768px) {
  #expect .container .cols .col-6:nth-child(2) { padding-top: 24px;}
}

@media screen and (min-width: 769px) {
  #expect .container .cols .col-6:nth-child(1) { padding-right: 40px;}
  #expect .container .cols .col-6:nth-child(2) { padding-left: 40px; border-left:1px solid #E3E6EB;}
	#benefits { padding-bottom:15rem; background: #F3F4F7;}
	#benefits ul li { padding:0 3rem 0 1.75rem;}
}

/*---WORKING WITH---*/
#working-with { padding-bottom: 18rem; background-color: #F3F4F7;}

#working-with .container > p:first-child { display: none; border:1px solid red;}

/*reboot*/ 
#working-with .container .cols { margin:0;}
#working-with .container .cols .col-7 { padding:0;}
#working-with .container .cols .col-4 { padding:0;}

#working-with h2 { margin-bottom:40px;}
#working-with .p-ico { margin-bottom: 12px;}
#working-with .p-illu { margin-bottom: 0;}
#working-with .p-illu img { width: 100%; max-width: 220px; height: auto;}
#working-with .container .cols .col-4:nth-child(1) p:last-child, #working-with .container .cols .col-4:nth-child(2) p:last-child { width:80%;}

/*---BOX PLAYBOOK---*/
#box-cta-playbook { margin-top:-12rem; padding-top:0; position:relative;}

/*reboot*/ 
#box-cta-playbook .container .cols { margin:0;}
#box-cta-playbook .container .cols .col-8 { padding:0;}

.box-playbook { padding:1.5rem; background-color: #00284A; border-radius:20px;}

.box-playbook h4 span { display: block; font-size: 12px; letter-spacing: 5px; font-family: Source Sans Pro SB; text-transform: uppercase; color: rgba(251, 193, 29, 1);}
.box-playbook h4, #box-cta-playbook p { color: white;}
.box-playbook p.p-opacity { opacity: 0.75}
.box-playbook p:last-of-type { margin-bottom:0;}
.box-playbook ul { margin-bottom:0; padding:1rem 0 0 1rem; color: #EC8FFF;}
.box-playbook a.secondary-download { color: #EC8FFF;}
.box-playbook .box-playbook-illu img { width: 120px; height:auto;}

@media screen and (max-width: 768px) {
  .box-playbook .box-playbook-illu { margin-bottom:1rem;}
}

@media screen and (max-width: 900px) {
  #box-cta-playbook .container .cols .col-8 { width: 100%;}
}

@media screen and (min-width: 769px) {
  .box-playbook { padding:2.5rem;}
  .box-playbook-cols { display: flex; align-items: center; gap: 80px;}
}

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

/*---UPCOMING PROJECTATONS---*/
#upcoming-projectatons { padding-top: 0;}

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

#upcoming-projectatons h2 { margin-bottom:40px;}
#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.p4 .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-04.jpg"); background-size: cover; border-radius: 100% 0% 38% 62% / 0% 88% 12% 100% ;}
.card-upcoming-col.p5 .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-05.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;}
}

/*---PARTICIPANTS INSIGHTS---*/
#participants-insights { 
  background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/bg-illu-participants-insights.svg");
  background-position: top right;
  background-repeat: no-repeat;
  background-size: cover;
}

#participants-insights h2 { margin-bottom:40px;}

/*reboot*/ 
#participants-insights .container .cols { margin:0;}
#participants-insights .container .cols .col-12 { padding:0;}

/*---VIDEO---*/ 
.video-container-iframe { margin: 40px 0 0 0; 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;}

/*---CARDS QUOTE---*/
.card-quote-cols { margin:80px auto 0 auto;}
.card-quote { position: relative; display: flex; flex-direction: column; min-width: 0; height: 100% !important; padding:2rem 2rem 2rem 2rem; background-color: white; box-shadow: 0px 2px 12px rgba(0, 24, 50, 0.12); border-radius: 12px; overflow: hidden;}

.card-quote-body .quote-sentence { position:relative; margin-bottom:0; padding-top:2rem;}
.card-quote-body .quote-sentence:before { content:''; position:absolute; top: 0; left: 0; width:24px; height:24px; background-image:url(https://ec.europa.eu/digital-building-blocks/sites/download/attachments/581239505/ico-quote-primary.svg)}

.card-quote-footer { margin-top:24px;} 
.card-quote-footer .quote-author { margin-bottom: 0; font-size: 14px; color:#5E748E;}

@media screen and (max-width: 768px) {
  .card-quote-col { margin-top:40px;}
}

@media screen and (min-width: 769px) {
  .card-quote-cols { display: flex; width: 100%; gap:20px;}
  .card-quote-col { width: 33%;}
  .card-quote-body { flex: 1 1 auto;}
}

@media screen and (min-width: 992px) {
  .card-quote-cols {width: 80%;}
}

Div

id	introduction
class	section

Div

class	container

Div

class	cols justify-content-between align-items-center

Div

class	col-7

Html-bobswift

<h1><span class="heading-subtitle">what is a Projectathon</span>Accelerating the OOTS Implementation through Collaborative Testing</h1>
<p class="lead">A Projectathon is an event where different systems connect under one roof and perform a marathon of peer-to-peer interoperability and compliance tests in a structured environment for several days. The tests are supervised and verified by neutral experts acting as Monitors, with the goal being to develop the OOTS initiatives of Member States & Competent Authorities and prepare them for production.</p>

Div

class	col-4

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

Div

style	display:none;
id	introduction-p4
class	section

Div

class	container

Div

class	cols align-items-center

Div

class	col-5

Html-bobswift

<h2>Introducing the first<br> thematic Projectathons</h2>
<p>Building on our past successes, in 2024 upcoming Projectathons, we're zooming in on key areas like education and population procedures (May Projectathon), and vehicles and business procedures (October Projectathon). By targeting specific themes and set of Competent Authorities, we're making these areas of Once-Only available to citizens and businesses as soon as possible.</p>
<p class="p-cta"><a class="btn primary" href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/Projectathon4"><span>Go to Projectathon #4</span><span class="ico-cta-forward"></span></a></p>

Div

class	col-4

Html-bobswift
<p class="introduction-illu"><img alt="" aria-hidden="true" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/illu-inttroduction-p4.png"></p>

Div

id	participate
class	section

Div

class	container

Html-bobswift

<div class="cols">
<div class="col-8">
<h2>Why should you participate in a Projectathon?</h2>
<p>The Projectathon is a crucial step in the development, testing and deployment into production of the Once-Only Technical System components.</p>
</div>
</div>

<div class="cols">
<div class="col-6">
<ul>
<li>An excellent opportunity to <strong>verify</strong> that your systems or solutions <strong>effectively comply</strong> with the appropriate specifications.</li>
<li><strong>Perform peer testing</strong> with real systems using real-world scenarios and <strong>detect errors</strong> as soon as possible to reduce the cost of implementing and re-testing a fix.</li>
<li><strong>Meet relevant experts</strong> in the field to share and exchange views, experiences, and best practices.</li>
</ul>
</div>

<div class="col-6">
<ul>
<li>Your participation helps to <strong>improve and assess the proper functioning of the Technical Design Documents (TDDs)</strong> of the Once-Only Technical System.</li>
<li>You can also <strong>participate</strong> in a Projectathon <strong>as an observer</strong> and prepare yourself for the next Projectathon by getting in direct contact with active participants.</li>
</ul>
</div>
</div>


<div class="cols cols-cta">

<div class="col-7">
<p>Explore the valuable insights and reflections on Projectathon events and discover how Member States can benefit from participation before implementing the OOTS.</p>
<p class="p-cta"><a target="_blank" class="btn ghost" href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/Projectathon4+gallery"><span>Go to Projectathon #4 highlights</span><span class="ico-cta-forward"></span></a></p>
</div>

<div class="col-5 justify-content-center">
<p class="past-insights-illu"><img alt="" aria-hidden="true" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/illu-participate.png"></p>
</div>

</div>

Div

id	expect
class	section

Div

class	container

Html-bobswift

<div class="cols">
<div class="col-7">
<h2>What can you expect at the Projectathon?</h2>
<p>You will perform a marathon of tests in a structured environment using the "Gazelle" platform, as well as participate in some exploratory sessions.</p>
</div>
</div>

<div class="cols">

<div class="col-6">
<p class="p-ico"><img alt="" aria-hidden="true" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/illu-testing.png"></p>
<h3 class="h5">Test</h3>
<ul>
<li><strong>Verify</strong> that your systems or solutions effectively comply with the <a target="_blank" href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/Technical+Design+Documents">Technical Design Documents</a> of Once-Only, with the support teams from the European Commission.</li>
<li>Perform <strong>Peer-to-Peer</strong> testing with real or almost real systems using real-world scenarios end-to-end.</li>
</ul>
</div>

<div class="col-6">
<p class="p-ico"><img alt="" aria-hidden="true" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/illu-ideas.png"></p>
<h3 class="h5">Explore</h3>
<ul>
<li>Participate on the <strong>Exploratory sessions</strong> to discuss and learn more about <strong>specific topics about Once-Only</strong> from evidence mapping to eIDAS.</li>
<li>Watch the <strong>Demos</strong> by Member States of their own Once-Only project in collaboration with neighbouring countries.</li>
</ul>
</div>

</div>

Div

id	working-with
class	section

Div

class	container

Html-bobswift

<div class="cols">
<div class="col-7">
<h2>Who will you be working with?</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>

<div class="cols">

<div class="col-4">
<p class="p-ico"><img alt="" aria-hidden="true" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/ico-account-balance.svg"></p>
<h3 class="h5">European Commission and<br> Projectathon experts</h3>
<p>Organising team, Test session managers, Test module designer.</p>
</div>

<div class="col-4">
<p class="p-ico"><img alt="" aria-hidden="true" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/ico-person.svg"></p>
<h3 class="h5">Participants</h3>
<p>Observers, Active participants including System under test operators and other participants.</p>
</div>

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

</div>

Div

id	box-cta-playbook
class	section

Div

class	container

Html-bobswift

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

<div class="col-8">
<div class="box-playbook">
<div class="box-playbook-cols">

<div class="box-playbook-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="box-playbook-content">
<h4><span class="subtitle">Projectathon Playbook</span>Want to learn more?</h4>
<p class="p-opacity">Explore the Projectathon Playbook for a detailed overview of the Projectathon events organisation, teams and how to participate.</p>
<p><a class="btn primary-bis" href="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/Once-Only_Technical_System_Projectathon_Playbook_v4.00.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>

<ul>
<li>
<a class="secondary-download " href="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/Once-Only_Technical_System_Projectathon_Playbook_Appendix_Gazelle_SUT_capabilities_v4.00.pdf" onclick="_paq.push(['trackEvent','conversion','oots-projectathon-overview','oots-projectathon-playbook-appendix-gazelle'])"><span>Download Appendix: Gazelle SUT capabilities and associated concepts</span></a>
</li>
<li>
<a class="secondary-download" href="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/Once-Only_Technical_System_Projectathon_Playbook_Annex2_How_to_do_pre-tests_in_Gazelle_V4.00.pdf" onclick="_paq.push(['trackEvent','conversion','oots-projectathon-overview','oots-projectathon-playbook-annex2-gazelle'])"><span>Annex 2: how to do pre-tests in Gazelle</span></a>
</li>
</ul>

</div>

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

</div>

Div

id	upcoming-projectatons
class	section

Div

class	container

Html-bobswift

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

<h2>Past & upcoming Projectathons</h2>
<p class="mb-0">In 2024, the Commission is organising two thematic Projectathons with a focus on specific thematic areas, targeting a specific set of Competent Authorities.</p>

</div>
</div>

Html-bobswift

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

<!--CARD 01-->
<div class="card-upcoming-col p4">
<div class="card-upcoming">
<div class="card-upcoming-body">
<a href="#" style="pointer-events: none;"></a>
<h3>Projectathon #4</h3>   
<p>The May 2024 Projectathon is a thematic event with a focus on Education and Population data, targeting a set of Competent Authorities, and on linking the Once-Only Technical System with related systems such as EMREX.</p>

</div>
<div class="card-upcoming-footer">
<p class="card-upcoming-date">15 - 17 May, 2024 | Brussels</p>
<p><a class="btn ghost" href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/Projectathon4"><span>Read more</span><span class="ico-cta-forward"></span></a></p>
</div>
</div>
</div>
<!---->

<!--CARD 02-->
<div class="card-upcoming-col p5">
<div class="card-upcoming">
<div class="card-upcoming-body">
<a href="#" style="pointer-events: none;"></a>
<h3>Projectathon #5</h3> 
<p>The November 2024 Projectathon will be a thematic event with a focus on Vehicle Registries and Business-related procedures, targeting this specific set of Competent Authorities.</p>
</div>
<div class="card-upcoming-footer">
<p class="card-upcoming-date">20 - 22 November, 2024 | Brussels</p>
<p style="display:flex; justify-content: end; align-items: end; height:48px;"><span class="badge warning"><img alt="" aria-hidden="true" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/ico-coming-soon-warning.svg"><span>Coming soon</span></span></p>
</div>
</div>
</div>
<!---->

</div>

Div

id	participants-insights
class	section

Div

class	container

Html-bobswift

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

<h2>Participants insights</h2>
<p>Explore valuable insights and reflections on past Projectathon events.</p>

<div class="video-container-iframe">
<iframe src="https://europa.eu/webtools/crs/iframe/?oriurl=https%3A%2F%2Fwww.youtube.com%2fembed%2fwBT-TwtRrXE" allowfullscreen="" width="100%" height="315" frameborder="0"></iframe>
</div>
 
</div>
</div>

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

<!--CARD 01-->
<div class="card-quote-col">
<div class="card-quote">
<div class="card-quote-body">
<p class="quote-sentence">“The value of this event is immeasurable. I already saw this value at the last Projectathon […] and it was a very difficult road to nationally make the office management aware of hiring a team for this Projectathon. But after we managed to come to the #2 Projectathon in larger numbers and successfully completed most of the tests, the transfer of information […] will be much easier to integrate into the management and I believe that we have opened new national perspectives"</p>
</div>
<div class="card-quote-footer">  
<p class="quote-author">Anonymous (Satisfaction survey)</p>   
</div>
</div>
</div>
<!---->

<!--CARD 02-->
<div class="card-quote-col">
<div class="card-quote">
<div class="card-quote-body">
<p class="quote-sentence">“Thank you for organising such a wonderful event! We were very happy to participate again and learned a lot. Heading home with lots of homework... :)"</p>
</div>
<div class="card-quote-footer">
<p class="quote-author">Finland (LinkedIn)</p>   
</div>
</div>
</div>
<!---->

<!--CARD 03-->
<div class="card-quote-col">
<div class="card-quote">
<div class="card-quote-body">
<p class="quote-sentence">“Paving the road for the European Interoperability! Another successful projectathon of the technical system for the cross-border data exchange. The Once Only Technical System (OOTS) will connect public authorities across the EU, so they can exchange official documents and data at the citizen's request. Great team Portugal!!!”</p>
</div>
<div class="card-quote-footer">
<p class="quote-author">Portugal (LinkedIn)</p> 
</div>
</div>
</div>
<!---->

</div>

Div

id	introduction
class	section

Div

class	container

Div

class	cols justify-content-between align-items-center

Div

class	col-7

Html-bobswift

<h1><span class="heading-subtitle">Projectatons</span>What is a Projectathon</h1>
<p class="lead">A Projectathon is an event where different systems connect under one roof and perform a marathon of peer-to-peer interoperability and compliance tests in a structured environment for several days. The tests are supervised and verified by neutral experts acting as Monitors.</p>

Div

class	col-4

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

Div

id	benefits
class	section

Div

class	container

Div

class	cols

Html-bobswift

<div>
<h2>Benefits of participating in a Projectathon</h2>
<p>It is crucial to the development, testing and deployment into production of the Once-Only Technical System components.</p>
<ul>
<li>An excellent opportunity to verify that your systems or solutions effectively comply with the appropriate specifications.</li>
<li>Promote and increase the visibility of the status and readiness of your organisation or Member State before the go-live of the Once-Only Technical System.</li>
<li>Perform peer testing with real systems using real-world scenarios and detect an error as soon as possible to reduces the cost of implementing and re-testing a fix.</li>
<li>Your participation helps to improve and assess the proper functioning of the Technical Design Documents (TDDs) of the One-Only Technical System.</li>
<li>Meet relevant experts in the field to share and exchange views, experience, and best practices.</li>
<li>Participate in Projectathon as observers and get ready for the next Projectathon by getting in direct contact with active participants.</li>
</ul>
</div>

Div

id	teams-actors
class	section

Div

class	container

Div

class	cols

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

id	teams-actors-box
class	cols

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

id	actors
class	cols

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

class	cols

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

id	how-to-participate
class	section

Div

class	container

Div

class	cols

Div

Html-bobswift

<h2>How to participate in the OOTS Projectathons</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

<ul>
<li><div><span>1</span><p><strong>Information: </strong>Attend the Projectathon Deep-Dive session during the OOTS Implementers Cafes </p></div></li>
<li><div><span>2</span><p><strong>Registration: </strong>Register your organisation and your system to be tested in Gazelle via the EU survey</p></div></li>
<li><div><span>3</span><p><strong>Pre-projectathon test: </strong>Perform a Preparatory Test and Connectivity Test</p></div></li>
<li><div><span>4</span><p><strong>Projectathon: </strong> Connect and perform Peer-to-Peer marathon test</p></div></li>
<li><div><span>5</span><p><strong>Post-Projectathon: </strong> Publication of Test Reports and best practices</p></div></li> 
</ul>

Div

class	cols

Div

Html-bobswift

<h3>Participate as an observer</h3>
<p>Learn more about what a Projectathon is and how the peer-to-peer tests are executed, or prepare yourself for the next Projectathon event, by participating in the OOTS Projectathons as an observer. Download the Projectathon Playbook and learn more how to register as an observe.</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

class	section

Div

class	container

Html-bobswift

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

<div id="box-cta-projectathon-detail" class="col-7">
<p>19 April - 21 April  2023 Brussels, Belgium</p>
<h3>Projectathon #1</h3>
<p>Register to the first Projectathon event to test your system before the go-live of the Once-Only Technical System.</p>
<p>Registration: 7 February - 03 March 2023</p>
<a class="btn primary-bis" href="#"><span>Go to Projectathon #1</span></a>
</div>

</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-overview','oots-projectathon-playbook'])"><span>Download the Projectathon Playbook</span><span class="ico-download"></span></a></p>
</div>

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

</div>

Div

id	upcoming-projectatons
class	section

Div

class	container

Div

class	cols

Div

Html-bobswift
<h2>Upcoming Projectatons</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

Html-bobswift

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

<!--CARD 01-->
<div class="card-upcoming-col">
<div class="card-upcoming">
<div class="card-upcoming-body">
<a href="#"><img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/test.png?api=v2"></a>
<h3>Projectathon #1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="card-upcoming-date">19 - 21 April 2023</p>
</div>
<div class="card-upcoming-footer">
<a class="btn primary" href="#"><span>Read more</span><span class="ico-cta-forward"></span></a>
</div>
</div>
</div>
<!---->

<!--CARD 02-->
<div class="card-upcoming-col">
<div class="card-upcoming">
<div class="card-upcoming-body">
<a href="#"><img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/test.png?api=v2"></a>
<h3>Projectathon #1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="card-upcoming-footer"> 
<p class="label">June 2023</p>
</div>
</div>
</div>
<!---->

<!--CARD 02-->
<div class="card-upcoming-col">
<div class="card-upcoming">
<div class="card-upcoming-body">
<a href="#"></a>
<h3>Projectathon #1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="card-upcoming-footer">
<p class="label">October 2023</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;} /*---INTRODUCTION---*/ #introduction h1 { margin-bottom:2.5rem;} #introduction p { margin-bottom:0;} .introduction-illu { line-height:0 !important;} .introduction-illu img { width: 180px;} @media screen and (min-width: 769px) { .introduction-illu img { width: 100%; max-width: 320px; height: auto;} } /*---BENEFITS---*/ #benefits { background: #00284A;} #benefits h2 { color: #FFF;} #benefits p { color: rgba(255, 255, 255, 0.75);} #benefits ul { display: flex; flex-wrap: wrap; margin-bottom:0; padding:0; list-style:none;} #benefits ul li { flex-shrink: 2; position:relative; margin-top:1.5rem; padding:0 1rem 0 1.75rem; width: 50%; color: rgba(255, 255, 255, 0.75);} #benefits ul li:before { content:''; display: block; position: absolute; top:2px; left:0; height: 20px; width: 20px; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/ico-check-secondary.svg") no-repeat;} @media screen and (min-width: 769px) { #benefits ul li { padding:0 3rem 0 1.75rem;} } /*---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;} } /*---HOW TO PARTICIPATE---*/ #how-to-participate { background: #F3F4F7} #how-to-participate .cols p:first-child { display: none;} #how-to-participate ul { margin:2.5rem 0 0 0; padding: 0; list-style: none;} #how-to-participate ul li > div { display:flex; align-items: baseline; gap:10px;} #how-to-participate 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-participate h3 { margin-bottom:2.5rem;} /*---BOX CTA PROJECTATHON DETAIL---*/ #box-cta-projectathon-detail { position:relative;} #box-cta-projectathon-detail { padding:1.5rem; background-color: #00284A; border-radius:20px;} #box-cta-projectathon-detail h3 { color: #FBC11D;} #box-cta-projectathon-detail p { color: white; opacity: 0.75} @media screen and (min-width: 769px) { #box-cta-projectathon-detail { padding:2.5rem;} } @media screen and (min-width: 1366px) { #box-cta-projectathon-detail { padding:5rem;} } /*---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;} } /*---UPCOMING PROJECTATONS---*/ #upcoming-projectatons { padding-top:0;} /*---UPCOMING CARDS---*/ .card-upcoming { position: relative; display: flex; flex-direction: column; min-width: 0; height: 100% !important; padding:1rem 1rem 2rem 1rem; background-color: white; box-shadow: 0px 2px 12px rgba(0, 24, 50, 0.12); border-radius: 12px; overflow: hidden;} @media screen and (min-width: 769px) { .card-upcoming-cols { display: flex; width: 100%; gap:20px;} .card-upcoming-col:nth-child(1) { width: 42%;} .card-upcoming-col:nth-child(2) { width: 29%;} .card-upcoming-col:nth-child(3) { width: 29%;} .card-upcoming-body { flex: 1 1 auto;} } .card-upcoming-body a { display: block; margin:-1rem -1rem 0 -1rem; line-height:0; text-align: right; height: 180px; width: 100%; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/test.png?api=v2"); background-size: cover; border-radius: 100% 0% 50% 50% / 0% 0% 70% 100%;border-top-right-radius: 12px; border-top-left-radius: 12px; overflow: hidden;} .card-upcoming-body h3 { margin-top:24px; font-size:20px; line-height:24px;} .card-upcoming-body p { position:relative;} .card-upcoming-body p:last-child { margin-bottom:0;} .card-upcoming-footer { margin-top:24px; text-align: right;} .card-upcoming .label { display: inline; padding: 8px 12px; font-size: 12px; line-height: 12px; color: #842DB5; background: #F2E5F7; border-radius: 40px;}

Page tree

Versions Compared

Old Version 95

New Version Current

Key