Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Reverted from v. 224

...

Div
idlatest-news
classsection
Div
classcontainer
Div
classcols
Div
classcol-7

Latest news

Div
classcol-5 text-right
Html-bobswift
<p><a class="link-cta text-primary" href="https://ec.europa.eu/digital-building-blocks/sites/x/iAJTIw"><span>Go to news room</span></a></p>
Div
classcols
Div
News Teaser
cql
filterStartDatenewsTextshort_excerpt
colorwhite
showCreatedDatefalse
columnsfilterByDate3false
showStatsopenLinksInNewWindowfalse
linkspacesSelectedtrueOOTS
showDatetrue
showErrorfalse
maxResults3
promotedLabel
columns3
showStatsfalse
linktrue
showSpacefalse
showAuthorfalse
showDatetrue
contentTypepage, blogpost
imageLabelsooh-news-highlight
showCreatorfalse
filterByDatefalse
openLinksInNewWindowfalse
spacesSelectedOOTS
showSpacefalse
showAuthorfalse
labelColor#0049B0timeFrame
filterEndDatelabelsooh, news
layoutcards
showErrorfalse
maxResults3
sortOrderlastmodified desc
promotedFirsttrue
contentTypepage, blogpost
imageLabelsooh-news-highlight
showCreatorfalse


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

Collaborate with us

Div
classcols gap-lg
Div
classcol-4
Html-bobswift
<h3 class="h5">As part of the SDG coordination group</h3>
<p class="opacity-75">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>
<p><a class="btn primary-negative" href="#"><span>Visit our space</span><span class="ico-cta"></span></a></p>
Div
classcol-4 col-separator-before
Html-bobswift
<h3 class="h5">As an expert in our subgroups</h3>
<p class="opacity-75">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>
<p><a class="btn primary-negative" href="#"><span>Visit our space</span><span class="ico-cta"></span></a></p>

...

CSS Stylesheet
/*---------------------------------*/
/*---OOH HOME PAGE - 05-10-2022---*/
/*-------------------------------*/ 

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

/*---ARCHITECTURAL DESIGN---*/
#architectural-design { background: #F3F4F7;}

/*---TECHNICAL DOCUMENTATION---*/
#technical-documentation { background: white;} 
#technical-documentation .card-grid {}
#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 { padding-bottom:9rem; 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 .cols:last-child { margin-top:-3rem;}
#supporting-services hr { margin:2rem 0 3rem 0; border:none; border-top:1px solid #E3E6EB; height: 1px;}

@media screen and (min-width: 769px) {
  .supporting-services-container { display: flex; justify-content: space-between;}
  .supporting-services-container p:first-child { width: 70%;}
  .supporting-services-container p:last-child { width: 30%; text-align: right;}
  .supporting-services-container .btn { margin-left:1rem;}
}  

/*---LATEST NEWS---*/
#latest-news { padding-bottom: 12rem;
background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/565379323/bg-illu-sigle-service-desk.svg");
background-position: bottom right;
background-repeat: no-repeat;
background-size: cover;   
}
#latest-news .cols:last-child { margin-top:-3rem;}

#latest-news .news-teaser-root > div > div > div {display: inline-block; margin-top:1rem; background: #FFFFFF; border-radius: 12px; box-shadow: 0px 2px 12px rgba(0, 24, 50, 0.12);}
#latest-news .news-teaser-root a img {  border-radius:0% 100% 0% 100% / 24% 0% 100% 76%; border-top-left-radius: 12px; border-top-right-radius: 12px;}
#latest-news .news-teaser-root > div > div > div > div > div > div:last-child { padding:0 2rem 0.25rem 2rem;}
#latest-news .news-teaser-root a h2 {font-size: 1.2rem; line-height: 1.4; text-transform: initial; text-decoration:none;}
#latest-news .news-teaser-root a, #latest-news .news-teaser-root a:link { display: inline-block; margin-bottom:0; color: #001832; text-decoration: none;}
#latest-news .news-teaser-root a:hover { text-decoration: underline;}
#latest-news .news-teaser-root .aui-group span { font-size: initial; color: #001832; }
#latest-news .news-teaser-root > div > div:last-child button { color: #001832 !important; background-color: transparent; border: 1px solid #B7C2CF; border-radius: 6px;}
#latest-news .news-teaser-root > div > div:last-child button:hover { text-decoration: underline;}

@media screen and (max-width: 768px) {
#latest-news .news-teaser-root > div > div > div  { position:relative !important; width: auto !important; left: auto !important; top: auto !important;}
#latest-news .news-teaser-root .aui-group { min-height: auto !important;}
}

/*---COLLABORATE WITH US---*/
#collaborate-with-us { margin-top:-12rem; padding-top: 0; padding-bottom: 0; background: linear-gradient(to right, #00284A 0%, #00284A 50%, transparent 50%, transparent 100%);}
#collaborate-with-us .container { padding: 3rem 3rem 5rem 0; background-color: #00284A; border-top-right-radius: 60px; border-bottom-right-radius: 60px;
background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/565379323/illu-launch-rocket.png");
background-position:  90% bottom;
background-repeat: no-repeat;
}
#collaborate-with-us .col-separator-before:before, 
#collaborate-with-us .col-separator-after:after { border-left:1px solid rgba(255, 255, 255, 0.12);}  
#collaborate-with-us .opacity-75 { opacity: 0.75;}
#collaborate-with-us h2, #collaborate-with-us h3, #collaborate-with-us p { color: white;}

/*---SERVICE DESK---*/
#service-desk p.p-btn { margin-top: 2.5rem; margin-bottom:0;}