Page History

...

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

id	projectathon-detail
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>

...

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 { padding-bottom:10rem; background: #F3F4F7;} 
 
#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%;}
#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-primary.svg") no-repeat;}

@media screen and (min-width: 769px) {
	#benefits { padding-bottom:18rem; background: #F3F4F7;}
	#benefits ul li { padding:0 3rem 0 1.75rem;}
}

/*---BOX CTA PROJECTATHON---*/
#box-cta-projectathon { margin-top:-8rem; padding-left:1.5rem; padding-right:1.5rem; 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 { margin-top:-12rem;}  
	#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;}
}

/*---TEAMS AND ACTORS---*/
#teams-actors {} 
#teams ul { margin-bottom:0; padding:0; list-style:none; }
#teams ul li { margin-top:1rem; padding:1rem 0 1.5rem 0; border-bottom: 1px solid #E3E6EB;} 
#teams ul li:last-child { border-bottom: none;} 
#teams ul li h4 { color:#3D597A !important;} 
#teams ul li p { margin-bottom:0;}

@media screen and (min-width: 1366px) {   
	#teams ul { display: flex; flex-wrap: wrap;}
	#teams ul li { flex-shrink: 2; padding:0 30px; width: 25%; border-left:1px solid #E3E6EB; border-bottom: none;}   
	#teams ul li:first-child { padding-left:0; border-left:none;}
}  

/*---ACTORS---*/
#actors { margin-top:2.5rem;}
#actors ul { margin-top:2.5rem !important; margin-bottom:2.5rem; padding:0; list-style:none; }
#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 { padding:1rem; 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 { padding-bottom:10rem; 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;}  

/*---PROJECTATHON DETAIL---*/
#projectathon-detail {margin-top:-8rem; padding-left:1.5rem; padding-right:1.5rem; position:relative;}

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

/*---UPCOMING PROJECTATONS---*/
#upcoming-projectatons { padding-top:0;}
.card-upcoming-cols { margin-top: 1.5rem;}

/*---UPCOMING CARDS---*/
.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: 170px; border-top-right-radius: 12px; border-top-left-radius: 12px; overflow: hidden;}
.card-upcoming-col:nth-child(1) .card-upcoming-body a { margin:-1rem 0 0 0; width: 115%; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/test.png?api=v2"); background-size: cover; border-radius: 100% 0% 47% 53% / 0% 76% 24% 100% ;}
.card-upcoming-col:nth-child(2) .card-upcoming-body a { margin:-1rem 0 0 0; width: 115%; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/test.png?api=v2"); background-size: cover; border-radius: 100% 0% 38% 62% / 0% 88% 12% 100% ;}
.card-upcoming-col:nth-child(3) .card-upcoming-body a { margin:-1rem 0 0 -3rem; width: 140%; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/645595199/test.png?api=v2"); background-size: cover; 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 { position:relative;}
.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; text-align: right;} 
.card-upcoming .label { display: inline; padding: 8px 12px; font-size: 12px; line-height: 12px; color: #842DB5; background: #F2E5F7; border-radius: 40px;}

@media screen and (max-width: 991px) {
  .card-upcoming-col { margin-bottom: 1.5rem;}
}

@media screen and (min-width: 992px) {
  .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;}
}

Page tree

Versions Compared

Old Version 126

New Version 127

Key