Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Div
idbenefits
classsection
Div
classcontainer
Div
classcols
col-4
Div
classcol-7
Html-bobswift
<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
class
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.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>
</div>

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

</div>
CSS Stylesheet
/*--------------------------------------------------*/
/*---OOH PROJECTATONS OVERVIEW PAGE - 16-02-2023---*/
/*------------------------------------------------*/ 

#main-content p: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 ul { display: flex; flex-wrap: wrap; margin-bottom:2.5rem; padding:0; list-style:none;}
#benefits ul li { flex-shrink: 2; position:relative; margin-top:1.5rem; padding:0 1rem 0 1.5rem; width: 50%;}
#benefits ul li:before { content:''; display: block; position: absolute; top:0; left:0; height: 20px; width: 20px; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/604504755/ico-check-primary.svg") no-repeat;}

/*---BOX CTA PROJECTATHON---*/
#box-cta-projectathon { position:relative; padding-top:0;}
#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;}
}