Page History

...

Div

id	box-cta-projectathon-playbook
class	section

Div

class	container

Html-bobswift
<div class="

container

cols justify-content-center">

<div class="col-7">
<div class="projectathon-box">
<div class="projectathon-box-cols">

<div class="projectathon-box-col-

2

illu">
<img aria-hidden="true" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/581239505/illu-projectathon playbook.png" alt="">  
</div>

<div class="projectathon-box-col-

10

content">
<h3 class="

h4

h5">Projectathon Playbook</h3>

<p>The

<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

  <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-event-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 EVENTS CALENDAR PAGE - 21-11-2022---*/
/*------------------------------------------*/      

/*---INTRODUCTION---*/
#introduction {
background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/597951745/bg-illu-sigle-events.svg");
background-position: top right;
background-repeat: no-repeat;
background-size: 100%;
}

@media screen and (max-width: 769px) {
  #introduction { background-position: top right; background-size: 240%;}
}

#introduction h1 + p.lead { margin-bottom:5rem;}

/*HACK TO REMOVE EMPTY P FROM CONFLUENCE*/
#introduction .container .cols p:first-child { display: none; border:1px solid red;} 

.event-list .col-container { margin-bottom:2.5rem; padding-bottom:2.5rem;  border-bottom:1px solid #F3F4F7;}
.event-list .col-container:last-child { border:none;}  

.col-container { display: flex; justify-content: space-between; align-items: center !important;}
.col-first { width: 35%;}
.col-first img { max-width: 100%; height: auto; border-radius: 12px;}
.col-second { width: 55%;}  

.col-container h2 { display: none;} 
.col-container h3 { font-size:20px;} 
.col-container h3 span { display: block; font-size: 1rem; line-height: 1; color: #5D24A4;} 
.col-container p.date { margin-bottom:0.5rem;} 
.col-container p.event-cta { margin-bottom:0; text-align: right;}  

/*---REVISIT PAST EVENT---*/
#revisit-past-events { margin-top:-6rem; padding-top:2.5rem; border-top:1px solid #F3F4F7;}
#revisit-past-events .event-list { position: relative; z-index: 1;}
/*
#revisit-past-events .link-cta.after { color: #3D597A !important;} 
#revisit-past-events .link-cta.after span:after { position: absolute; top: 2px; right: -30px; content: ""; width: 24px; height: 24px; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/581239505/ico-arrow-forward-primary-bis.svg") left no-repeat; background-size: 24px; transition-property: transform; transition-duration: 0.3s; transition-timing-function: ease;}
*/

/*EXPAND MACRO*/
.expand-container { position: relative; z-index: 1; margin-top:-2.5rem;}
.expand-container .col-container { margin-top: 2.5rem; padding-top: 2.5rem; border-top: 1px solid #F3F4F7;} #revisit-past-events .expand-control { margin:0 !important; padding: 0 !important; text-align: right;} 
/*expand control*/
#revisit-past-events .expand-control .expand-icon { display: none;}
#revisit-past-events .expand-control[aria-expanded="true"] { display: none;}
#revisit-past-events .expand-control .expand-control-text { color: #3D597A !important; text-decoration: underline;}
#revisit-past-events .expand-control .expand-control-text:hover { text-decoration: none !important;}
/*expand content*/
#revisit-past-events .expand-content { margin:0 !important; padding: 0 !important;}
#revisit-past-events .expand-content > p:first-child, .expand-content > p:last-child { display: none;}  

/*---BOX CTA EVENTSPROJECTATHON---*/
#box-cta-projectathon-playbook { position:relative; padding-top:0;}
/*hack - remove empty p from confluence*/
#box-cta-projectathon .projectathon-playbookbox > p{ 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-projectathon-playbookevents .container > p:last-child { display: none; border:1px solid redgreen;}
#box-cta-projectathon-playbook .container { position: relative; padding: 3rem 2.5rem; background-color: #00284A; border-radius: 20px;}
#box-cta-projectathon-playbook h3 { color: white;} 


@media screen and (min-width: 769px) {
 #box-cta-projectathon .projectathon-box { padding:2.5rem;}
 #box-cta-projectathon-playbook p .projectathon-box-cols { margin-top:0.75rem; color: white; opacity:0.75;}
display: flex; align-items: center;}
 #box-cta-projectathon-playbook p:last-child .projectathon-box-col-illu { margin-bottom:0; opacity:1;padding:0 3rem 0 0}
}

@media screen and (min-width: 769px1366px) {
   #box-cta-projectathon-playbook .container { padding: 6.25rem 5rem;}
   #box-cta-projectathon-playbookbox .col-10 { padding-left: 2rem5rem;} 
}

Page tree

Versions Compared

Old Version 147

New Version 148

Key