Page History

...

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

class	cols teams-actors-box

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

class	cols actors

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>

...

CSS Stylesheet

/*--------------------------------------------------*/
/*---OOH PROJECTATONS OVERVIEW PAGE - 16-02-2023---*/
/*------------------------------------------------*/ 

#main-content p:empty { display: none;}
#main-content p span:empty { display: none;}  

/*---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 { border:1px solid red;}
.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;}
}   

/*---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;}
}

Page tree

Versions Compared

Old Version 42

New Version 43

Key