Versions Compared

Key

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

...

Div
idcollaborate-with-us
classsection
Div
classcontainer
Div
classcols
Div

Collaborate with us

Div
classcols gap-lg
Div
classcol-5
Html-bobswift
<div class="card-grid">
<div class="card-grid-body">
<h3 class="h5">As part of the SDG coordination group</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="card-grid-footer">
<p><a class="btn primary" href="#"><span>Visit our space</span><span class="ico-cta"></span></a></p>
</div>
</div>
Div
classcol-5
Html-bobswift
<div class="card-grid">
<div class="card-grid-body">
<h3 class="h5">As partan ofexpert thein SDGour coordination group<subgroups</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div class="card-grid-footer">
<p><a class="btn primary" href="#"><span>Visit our space</span><span class="ico-cta"></span></a></p>
</div>
</div>

...

CSS Stylesheet
@media screen and (min-width: 769px) {
  .col-separator-before, .col-separator-after { position:relative;}
  .col-separator-before:before, .col-separator-after:after { content:''; position:absolute; top:0; height:100%; border-left:1px solid #F2E5F7;}
  .col-separator-before:before { left:-0.25rem;}
  .col-separator-after:after { right:-0.25rem;}
}

/*---------------------------------*/
/*---OOH HOME PAGE - 05-10-2022---*/
/*-------------------------------*/
@media screen and (min-width: 769px) { 
  .wiki-content h1, .wiki-content .h1, #title-text { font-size:56px; line-height: 64px;}
}  

/*---INTRODUCTION---*/
#introduction { padding-bottom: 26rem;
background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/565379323/bg-illu-sigle-home-introduction.svg");
background-position: bottom right;
background-repeat: no-repeat;
background-size: cover;
}

/*---WHO HUB FOR---*/
#who-hub-for { margin-top:-23rem; padding-top: 0;}
#who-hub-for img { height: 120px;}
#who-hub-for .col-4 p:nth-child(3) { margin-bottom:0;}

/*---TECHNICAL DOCUMENTATION---*/
#technical-documentation { background: white;} 
#technical-documentation .card-grid { background-color: #F9F5FB;}
#technical-documentation .card-grid small { color: #5D24A4;}
#technical-documentation .card-grid-footer { text-align: right;}
#technical-documentation .card-grid-footer p:first-child { margin-bottom:1rem;}

@media screen and (min-width: 769px) {
  #technical-documentation .card-grid-body p:last-child { margin-bottom: 0;}
}

/*---SERVICES---*/
#services { background: #00284A;}
#services h2, #services h3, #services p { color: white;}
#services .card-grid { padding: 0; background: transparent;}
#services .col-separator-before:before, 
#services .col-separator-after:after { border-left:1px solid rgba(255, 255, 255, 0.12);}  
#services .opacity-75 { opacity: 0.75;}
#services .opacity-50 { opacity: 0.50;}
#services .badge { margin-bottom:0.5rem; color: #995E00; background: #FFEECC;}
/*HACK remove empty p from Confluence*/
#services .col-4 > p:first-child { border:1px solid green; display: none;}

@media screen and (min-width: 769px) {
  #services { padding-bottom:6rem;}
  #services .card-grid-body p:last-child { margin-bottom:0;}
}

/*---SUPPORTING SERVICES---*/
#supporting-services { background: #F3F4F7;
background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/565379323/bg-illu-sigle-supporting-services.svg");
background-position: bottom right;
background-repeat: no-repeat;
background-size: cover;
}
.supporting-services-container { display: flex; justify-content: space-between;}
.supporting-services-container p:first-child { width: 75%;}
.supporting-services-container p:last-child { width: 25%; text-align: right;}

/*---LATEST NEWS---*/
#latest-news {}

/*---COLLABORATE WITH US---*/
#collaborate-with-us { padding-top: 0; padding-bottom: 0;background: linear-gradient(to right, #00284A 0%, #00284A 50%, white 50%, white 100%);}
#collaborate-with-us .container { padding-top:3rem; padding-bottom:3rem; background-color: #00284A; border-top-right-radius: 60px; border-bottom-right-radius: 60px;}
#collaborate-with-us .card-grid { padding: 0; background-color: transparent;}
#collaborate-with-us .card-grid-body p { opacity: 0.75;}
#collaborate-with-us h2, #collaborate-with-us h3, #collaborate-with-us p { color: white;}

/*---SERVICE DESK---*/
#service-desk {}