Versions Compared

Key

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

...

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.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
classsection
Div
classcontainer
Div
classcols
Div
classcol-4
Html-bobswift
<div class="card-interview">
<div class="card-interview-body">
<a class="test" href="#"><img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/631047320/illu-news-oots-13-01-2023.png"></a>
<h3>France</h3>
<p class="ms-name">Jonathan J. Attia<span>French CTO for European Single Digital Gateway</span></p>
</div>
<div class="card-interview-footer">
<a class="link-cta primary after" href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTSSDBX/The+Once-Only+view+from+France"><span>Read interview</span></a>
</div>
</div>
Div
classcol-3
Html-bobswift
<div class="card-interview coming-soon">
<div class="card-interview-body">
<a class="test" href="#"><img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/633340347/illu-news-oots-flag-portugal.jpg"></a>
<h3>Portugal</h3>
<p class="ms-name">Jorge Sousa<span>Portuguese National Coordinator for the implementation of the Single Digital Gateway</span></p>
</div>
<div class="card-interview-footer">
<p class="label">Coming soon</p>
</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;}
}

/*---INTERVIEW CARDS---*/
.card-interview { 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;}

@media screen and (min-width: 769px) {
  .card-interview-body { flex: 1 1 auto;}
}

.card-interview-body a { display: block; margin:-1rem -1rem 0 -1rem; line-height:0; border-top-right-radius: 12px; border-top-left-radius: 12px; overflow: hidden;}
.card-interview-body a img { margin:-2rem 0 0 -1.50rem; width: 110%; height: auto; border-radius: 100% 0% 50% 50% / 0% 0% 70% 100%;}
.card-interview-body h3 { margin-top:24px; margin-bottom:12px; padding-bottom:12px; font-size:20px; line-height:24px; border-bottom:1px solid #E3E6EB; }
.card-interview-body p.ms-name { position:relative; margin-bottom:0; padding-left:2rem;}
.card-interview-body p.ms-name:before { content:""; display: inline-block; position: absolute; top:4px; left:0; width: 24px; height: 24px; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/581239505/ico-person-primary-bis.svg"); background-size: 24px;}

.card-interview-body p.ms-name span { display: block; font-size:14px; line-height: 20px}
.card-interview-footer { margin-top:24px; text-align: right;}

.card-interview.coming-soon { background: #F3F4F7;}
.card-interview.coming-soon .label { display: inline; padding: 8px 12px; font-size: 12px; line-height: 12px; background: #E3E6EB; border-radius: 40px;}