Div | |||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||
Div | |||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||
Div | |||||||||||||||||||||||||||||||
| |||||||||||||||||||||||||||||||
|
Div | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Div | ||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||
|
Div | ||||
---|---|---|---|---|
| ||||
|
Div | |||||||
---|---|---|---|---|---|---|---|
| |||||||
|
Div | |||||||||
---|---|---|---|---|---|---|---|---|---|
| |||||||||
|
Div | |||||||
---|---|---|---|---|---|---|---|
| |||||||
|
Div | |||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||||||||||||
|
Div | ||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||||||||
|
Div | ||||
---|---|---|---|---|
| ||||
|
Div | |||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||||
|
Div | |||||||
---|---|---|---|---|---|---|---|
| |||||||
|
CSS Stylesheet | |||||||
---|---|---|---|---|---|---|---|
/*---------------------------------*/
/*---OOH HOME PAGE - 27-03-2024---*/
/*-------------------------------*/
.mb-0 { margin-bottom: 0;}
@media screen and (max-width: 769px) {
.img-mobile { width: 180px;}
}
@media screen and (max-width: 1200px) {
.not-d-block-mobile { display:inline !important;}
}
/*---INTRODUCTION---*/
#introduction .introduction-text { z-index: 3; position: relative;}
#introduction h1 { margin-bottom:2.5rem;}
#introduction p.lead { margin-bottom:0;}
#introduction .introduction-illu { position: relative;}
.introduction-illu-img { z-index: 2; position: relative; width: 180px;}
.introduction-illu p { margin-bottom:0;}
@media screen and (max-width: 768px) {
#introduction { overflow:visible;}
.introduction-illu-bg { display:none;}
}
@media screen and (min-width: 769px) {
#introduction { overflow:hidden;}
.introduction-illu-img { width: 100%; max-width: 390px; height: auto;}
.introduction-illu-bg { z-index: 1; position:absolute; top: -8%; left:-8%;}
}
/*---ARCHITECTURAL DESIGN---*/
#architectural-design { padding-bottom:16rem; background: #F3F4F7;}
#architectural-design h2 { margin-bottom:2.5rem;}
#architectural-design .cols:last-child p:last-child { margin-bottom:0;}
/*hack - remove empty p from confluence*/
#architectural-design > p:first-child, #architectural-design > p:last-child { display: none; border:1px solid red;}
#architectural-design .technical-system_steps { list-style: none; margin:0; padding: 0;}
#architectural-design .technical-system_steps li > div { display:flex; align-items: baseline; gap:10px;}
#architectural-design .technical-system_steps 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;}
#architectural-design .ico-download {filter: invert(99%) sepia(100%) saturate(2%) hue-rotate(141deg) brightness(110%) contrast(100%);}
#architectural-design .diagram { margin-top:2.5rem;}
.architectural-design-illu { width: 100px;}
/*---LATEST NEWS---*/
/*hack margin top 1rem + 1.5rem natural space from the newsteaser = 2.5rem spacing*/
.news-teaser-deprecated ~ p { margin-top:1rem; margin-bottom: 0; text-align:center;}
/*hack - remove empty p from confluence*/
#latest-news .container > p:first-child, #latest-news .container > p:last-child { border:1px solid red;}
#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 { display:none;}
@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;}
}
/*---GUIDANCE BOX---*/
#guidance-box { position:relative; margin-top:-13rem; padding-top:0; padding-bottom:0;}
#guidance-box .guidance-box { padding:1.5rem; background-color: #00284A; border-radius:20px;}
#guidance-box .container .cols { margin-bottom:-1rem;}
#guidance-box .guidance-box-col-illu { margin-bottom:1rem;}
#guidance-box .guidance-box-col-illu img { width: 82px; height:auto;}
@media screen and (min-width: 769px) {
#guidance-box { margin-top:-12rem;}
#guidance-box .guidance-box { padding:2.5rem;}
#guidance-box .guidance-box-cols { display: flex; align-items: center;}
#guidance-box .guidance-box-col-illu { margin-bottom:0; padding:0 3rem 0 0}
}
@media screen and (min-width: 1366px) {
#guidance-box .guidance-box { padding:5rem;}
}
#guidance-box h3, #guidance-box p { color: white;}
#guidance-box p.p-opacity { opacity: 0.75}
#guidance-box p:last-of-type { margin-bottom:0;}
/*hack - remove empty p from confluence*/
#guidance-box .container > p:first-child, #guidance-box .container > p:last-child { display: none; border:1px solid green;}
/*---DOCUMENTATION AND SERVICES---*/
#documentation-services { background-color: #F3F4F7; /*background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/565379323/bg-illu-sigle-documentation-services.svg") no-repeat 100% 10%*/}
#documentation-services .common-supporting-services h2 { margin-bottom:2.5rem;}
#documentation-services .technical-design-documentation { padding-top: 2.5rem; margin-bottom:-1rem;}
#documentation-services .technical-design-documentation h2 { margin-bottom:2.5rem;}
.technical-design-documentation-illu img { width: 180px;}
@media only screen and (max-width: 768px) {
#documentation-services .cols:nth-child(2) { display: flex; flex-direction: column-reverse;}
}
@media screen and (min-width: 769px) {
.technical-design-documentation-illu img { width: 100%; max-width: 270px; height: auto;}
}
#documentation-services .cols p:last-child { margin-bottom:0;}
/*hack - remove empty p from confluence*/
#documentation-services .container > p:first-child, #documentation-services .container > p:last-child { display: none; border:1px solid green;}
@media screen and (min-width: 769px) {
#documentation-services .technical-design-documentation div:first-child { padding: 1.5rem;}
}
/*---COLLABORATE WITH US---*/
#collaborate-with-us { position:relative; padding-top: 0; padding-bottom: 0; background: linear-gradient(to right, #00284A 0%, #00284A 50%, transparent 50%, transparent 100%);}
#collaborate-with-us .container { position: relative; padding: 3rem 3rem 9rem 0; background-color: #00284A; border-top-right-radius: 60px; border-bottom-right-radius: 60px;
}
@media screen and (min-width: 769px) {
#collaborate-with-us .container { padding: 6rem 3rem 6rem 0;}
}
.collaborate-with-us-img { position: absolute; bottom: 0; right: 1.5rem; width: 100%; max-width: 200px; height: auto;}
@media screen and (min-width: 769px) {
.collaborate-with-us-img { max-width: 320px;}
}
#collaborate-with-us h2 { margin-bottom:2.5rem;}
#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 { color: rgba(255, 255, 255, 0.75);}
#collaborate-with-us h2, #collaborate-with-us h3, #collaborate-with-us p { color: white;}
#collaborate-with-us .p-badge {}
#collaborate-with-us .badge { margin-bottom:0; color: #995E00; background: #FFEECC;}
#collaborate-with-us a, #collaborate-with-us .restricted-space-link { color: #EC8FFF;}
.collaborate-with-us-list-link { margin:0; padding: 0;}
.collaborate-with-us-list-link li { margin-bottom: 1rem;}
.collaborate-with-us-list-link li:last-child { margin-bottom: 0;}
/*hack - remove empty p from confluence*/
#collaborate-with-us > p:first-child, #collaborate-with-us > p:last-child { display:none;}
/*---SERVICE DESK---*/
#service-desk { position:relative;}
#service-desk .service-desk-cta { margin-top: 2.5rem; margin-bottom:0;}
.service-desk-p-img { margin-bottom:0;}
.service-desk-p-img img { width: 100%; max-width: 200px; height: auto;}
/*---LATEST NEWS DEPRECATED BACKUP---*/
/*hack - remove empty p from confluence*/
.news-teaser-deprecated > p:first-child, .news-teaser-deprecated > p:last-child { display:none; border:1px solid green;}
.news-teaser-deprecated { padding-top:0; padding-bottom:0;}
.news-teaser-deprecated .newsteaser-entry { display: inline-block; margin-top:0.5rem; box-shadow:none;}
.news-teaser-deprecated .newsteaser-entry .aui-group { display: inline-block; margin-top:1rem; background: #FFFFFF; border-radius: 12px; box-shadow: 0px 2px 12px rgba(0, 24, 50, 0.12);}
/*LINK*/
.news-teaser-deprecated .newsteaser-entry a,
.news-teaser-deprecated .newsteaser-entry a:link { display:inline-block; background-color: transparent !important; border:none !important; }
.news-teaser-deprecated .newsteaser-entry .news-image a img { border-radius:0% 100% 0% 100% / 24% 0% 100% 76%; border-top-left-radius: 12px; border-top-right-radius: 12px;}
.news-teaser-deprecated .newsteaser-entry .news-metadata { font-size:14px !important; line-height: 20px; color: #5E748E !important;}
.news-teaser-deprecated .newsteaser-entry h2 a { font-size: 20px; line-height: 24px; text-transform: initial; text-decoration:none; color: #001832 !important;}
.news-teaser-deprecated .newsteaser-entry h2 a:hover { color: #842DB5 !important; text-decoration: underline !important;}
.news-teaser-deprecated .newsteaser-entry p a { font-weight: normal; color: inherit !important;}
.news-teaser-deprecated .newsteaser-entry p a:hover { text-decoration: underline !important;}
/*CONTENT*/
.news-teaser-deprecated .newsteaser-entry .aui-group > div:first-child { padding: 0;}
.news-teaser-deprecated .newsteaser-entry .aui-group > div:last-child { padding: 1rem 2.5rem 0 2.5rem;}
.news-teaser-deprecated .newsteaser-entry .aui-group > div:first-child a,
.news-teaser-deprecated .newsteaser-entry .aui-group > div:last-child a,
.news-teaser-deprecated .newsteaser-entry .aui-group > div:last-child p { margin-bottom: 0;}
@media screen and (max-width: 768px) {
.news-teaser-deprecated .newsteaser-entry { position:relative !important; top: 0 !important; left: 0 !important; float: none !important;; display: block !important; width: 100% !important;}
}
@media screen and (min-width: 769px) {
.news-teaser-deprecated .newsteaser-entry .aui-group > div:last-child { display:flex !important; flex-direction: column !important; justify-content: space-between !important; padding: 1rem 2.5rem 1rem 2.5rem; min-height: 260px;}
.news-teaser-deprecated .newsteaser-entry .aui-group > div:last-child p:last-child { display: none; }
}
@media screen and (min-width: 1366px) {
.news-teaser-deprecated .newsteaser-entry .aui-group > div:last-child { min-height: 200px;}
}
/*---SLIDER HIGHLIGHT---*/
#slider-highlight { padding:0; background-color: #00284A;}
.slider-highlight-bg { padding:6px 1.5rem 36px 1.5rem;}
#slider-highlight > p:first-child, #slider-highlight > p:last-child { display: none; border:1px solid red;}
#slider-highlight .container .cols { margin-top: 0; margin-bottom: 0;}
#slider-highlight .container .cols > div > p:first-child, #slider-highlight .container .cols > div > p:last-child { display: none;}
#slider-highlight .cols .slider-highlight-content > p:first-child, #slider-highlight .cols .slider-highlight-content > p:last-child{ display: none; border:1px solid green;}
#slider-highlight .cols .slider-highlight-content .slider-highlight-content-left p { margin-top:1rem; font-size: 20px; line-height: 24px; color: white;}
@media screen and (min-width: 1280px) {
.slider-highlight-bg { padding:36px 1.5rem 60px 1.5rem;}
#slider-highlight .cols .slider-highlight-content { display: flex; gap:40px; justify-content: space-between;}
#slider-highlight .cols .slider-highlight-content .slider-highlight-content-left { display: flex; gap:12px; align-items:center; width:70%;}
#slider-highlight .cols .slider-highlight-content .slider-highlight-content-left p { margin-top:0; margin-bottom:0; }
}
/*MACRO SLIDER*/
#slider-highlight .news-slider-root { width: 100%;}
#slider-highlight .news-slider-root > div { padding:0;}
#slider-highlight .news-slider-root div div { background-color: transparent; box-shadow:none;}
#slider-highlight .aui-group .aui-item:first-child { display: none;}
#slider-highlight .aui-item { padding:0;}
/*heading*/
#slider-highlight h2:first-child, #slider-highlight h2:first-child +div { display: none;}
/*dots*/
#slider-highlight .flickity-page-dots { position:absolute; top:auto; bottom:20px; margin-bottom: 0; height:1rem; text-align: center !important;}
#slider-highlight .flickity-page-dots .dot { opacity: 1; height: 12px; width:12px; background: #EC8FFF !important; border:1px solid #EC8FFF;}
#slider-highlight .flickity-page-dots .dot.is-selected { height: 12px; width:48px; background: #EC8FFF !important; border:1px solid #EC8FFF; border-radius:10px;}
#slider-highlight .flickity-page-dots .dot:focus { outline: 2px dashed black; outline-offset: 2px;}
/*---PROJECTATHON---*/
#projectathon { background: url( Html-bobswift | "https://ec.europa.eu/digital-building-blocks/sites/download/attachments/565379323/ diagrambg-how-does-it-work.png" alt=""></div> </div> </div> | ||||||
Div | |||||||
| |||||||
Div | | ||||||
|
Div | |||||||
---|---|---|---|---|---|---|---|
| |||||||
|
style | margin-top:-3rem; |
---|---|
class | cols |
class | col-4 |
---|
illu-projectathon.svg") no-repeat bottom left;} #projectathon h2, #projectathon .p-spacing { margin-bottom:2.5rem;} .card-upcoming-cols { margin-top: -1rem;} .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 -3rem; width: 140%; background: url("https://ec.europa.eu/digital-building-blocks/sites/x/WoUvHQ"><span>View chapter</span><span class="ico-cta"></span></a></p> </div> </div>
class | col-4 |
---|
download/attachments/645595199/illu-card-projectathon-04.jpg"); background-size: cover; border-radius: 100% 0% 38% 62% / 0% 88% 12% 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/x/mYUvHQ"><span>View chapter</span><span class="ico-cta"></span></a></p> </div> </div>
Div | ||
---|---|---|
| ||
|
class | cols |
---|
Div | ||
---|---|---|
| ||
|
class | col-4 |
---|
-building-blocks/sites/download/attachments/645595199/illu-card-projectathon-03.png"); 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.label { margin-bottom:12px; display: inline-block;} .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-footer .label { display: inline;} .card-upcoming .label { padding: 8px 12px; font-size: 12px; line-height: 12px; border-radius: 40px;} .card-upcoming .label.available-soon { color: #842DB5; background: #F2E5F7;} .card-upcoming .label.past { color: #3D597A; background: #E3E6EB;} .card-upcoming .label.upcoming { color: #995E00; background: #FFEECC;} @media screen and (max-width: 991px) { .card-upcoming-col { margin-bottom: 1.5rem;} } @media screen and (min-width: 992px) { .card-upcoming-cols { display: flex; margin:0 auto; width: 80%; gap:24px;} .card-upcoming-col:nth-child(1) { width: 50%;} .card-upcoming-col:nth-child(2) { width: 50%;} /*.card-upcoming-col:nth-child(3) { width: 29%;}*/ .card-upcoming-body { flex: 1 1 auto;} } /*---MONITORING---*/ #monitoring { margin-top:-6rem; padding-top:9rem; background: url("https://ec.europa.eu/digital-building-blocks/sites/x/T4YvHQ"><span>View chapter</span><span class="ico-cta"></span></a></p> </div> </div>
class | col-4 |
---|
download/attachments/565379323/bg-illu-sigle-monitoring.svg") no-repeat top right;} #monitoring .cols { margin-bottom: 0;} #monitoring .cols > div {padding-top:0; padding-bottom:0;} #monitoring h2, #monitoring h2 + p { margin-bottom:2.5rem;} /*---MONITORING CARDS---*/ .card-monitoring { position: relative; display: flex; flex-direction: column; gap:24px; min-width: 0; height: 100% !important; padding:24px; background-color: white; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/x/P4CYI"><span>View chapter</span><span class="ico-cta"></span></a></p> </div> </div>
Html-bobswift |
---|
<div class="cols text-right">
<div>
<p class="technical-documentation-cta"><a class="btn ghost" target="_blank" href="https://ec.europa.eu/digital-building-blocks/sites/x/PQF1Fg"><span>View all latest chapter releases</span><span class="ico-cta"></span></a></p>
</div>
</div> |
Div | |||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||||||||||||||||||||||||||||
|
Div | |||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||
|
Div | |||||||||||||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||||||||||||||||||||||||||||||||||||||
|
Html-bobswift |
---|
<div id="collaborate-with-us" class="section">
<div class="container">
<h2>Collaborate with us</h2>
<div class="cols gap-lg">
<div class="col-4">
<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>
<div class="col-4 col-separator-before">
<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>
</div>
</div>
</div>
</div> |
Div | |||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| |||||||||||||||||||||||||
|
attachments/677518598/bg-monitoring-card.svg") no-repeat bottom left white; box-shadow: 0px 4px 20px 0px rgba(0, 55, 100, 0.10); border-radius: 16px; overflow: hidden;}
.card-monitoring-header h3 { position: relative; margin-bottom: 12px; font-size:20px; line-height:22px;}
.card-monitoring-header h3:after { content:""; position:absolute; bottom: -12px; left: 0; width: 44px; height: 2px; background-color: #5D24A4;}
.card-monitoring-body { display: flex; align-items: center; align-self: stretch; gap:20px;}
div.card-monitoring-body-number { display:flex; align-items:center; flex: 0 160px; padding:16px 24px; height:100px; color: #842DB5; background: #F2E5F7; border-radius: 16px;}
div.card-monitoring-body-number-inner { width: 100%;}
div.card-monitoring-body-number span { display: block; width: 100%; text-align: center;}
div.card-monitoring-body-number span:first-child { font-size: 44px; line-height: 32px; font-weight: 700;}
div.card-monitoring-body-number span:last-child { font-size: 14px; line-height: 20px;}
div.card-monitoring-body-content { flex:1;}
div.card-monitoring-body-content p { margin-bottom: 0; font-size: 14px; line-height: 20px;}
.card-monitoring-footer { text-align: right;}
@media screen and (max-width: 768px) {
.card-monitoring-cols { margin-top: 1.5rem;}
}
@media screen and (max-width: 991px) {
.card-monitoring-col { width: 100%;}
.card-monitoring-col { margin-bottom: 1.5rem;}
}
@media screen and (min-width: 992px) {
.card-monitoring-cols { display: flex; width: 100%; gap:20px;}
.card-monitoring-col { width: 33%;}
.card-monitoring-body { flex: 1 1 auto;}
}
/*---MONITORING CARDS---*/
.monitoring-cta { padding-top:2.5rem; text-align:center;}
/*---VIDEO---*/
#video {}
#video h2 { margin-bottom:2.5rem;}
/*hack remove empty p from confluence*/
#video .container .cols:first-child p:first-child { display: none; border:1px solid red;}
.video-container-iframe { position: relative; z-index: 1; width: 100%; overflow: hidden; padding-top: 56.25%; /* 16:9 Aspect Ratio */}
.video-container-iframe iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; border: none; border-radius: 16px;}
|
CSS Stylesheet |
---|
/* updated news section */
#latest-news h2 { margin-bottom: 2.5rem;}
#latest-news .content-by-label{display: none; visibility: 'hidden';}
#latest-news .news-wrapper{display: flex; flex-direction: column;}
#latest-news .news-wrapper > .btn{margin: auto; margin-top: 32px;}
#latest-news .news-grid{display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px;}
#latest-news .news-grid .news-item{overflow: hidden; border-radius: 12px;
box-shadow: 0px 2px 12px 0px rgba(0, 24, 50, 0.08); display: flex; flex-direction: column; gap: 24px; background: white;}
#latest-news .news-grid .news-item .article-details{padding-inline: 40px; padding-bottom: 40px; display: flex; flex-direction: column; flex: 1;}
#latest-news .news-grid .news-item .article-preview{width: 100%; height: 200px; object-fit: cover; clip-path: ellipse(70% 142% at 71% -46%);}
#latest-news .news-grid .news-item .article-title{font-size: 20px; font-style: normal; font-weight: 400; line-height: 24px;}
#latest-news .news-grid .news-item .article-date{font-size: 14px; font-style: normal; font-weight: 400; line-height: 20px; display: flex;
align-items: center; gap: 8px;}
#latest-news .news-grid .news-item .article-link{margin-left: auto; margin-top: auto;} |
HTML |
---|
<script>
document.addEventListener('DOMContentLoaded', ev => {
const items = [];
const contentByLabel = document.querySelector('#latest-news .content-by-label');
const newsList = document.querySelector('#latest-news .news-grid');
populateArray();
sortFun('desc');
addDomElements();
contentByLabel.remove();
// functions -----------------------------
function populateArray() {
Array.from(contentByLabel.children).forEach(element => {
try {
const arTitle = element.querySelector('.details > a').innerText;
const arLink = `https://ec.europa.eu${element.querySelector('.details > a').getAttribute('href')}`;
const arTime = formatTime(element.querySelector('.details time').getAttribute('datetime'));
const sortableTime = new Date(element.querySelector('.details time').getAttribute('datetime'));
const arPreview = element.querySelector('.details .exc-preview').innerText;
const domElement = document.createElement('div');
domElement.classList.add('news-item');
domElement.innerHTML = `
<img loading="lazy" class="article-preview" src="${arPreview}" alt="" aria-hidden="true">
<div class="article-details">
<h5 class="article-title">${arTitle}</h5>
<p class="article-date"><img src="/ |
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/565379323760938508/bg-illu-sigle-home-introductionico-date.svg"); background-position: bottom right; background-repeat: no-repeat; background-size: cover; } #introduction h1 { margin-bottom:2.5rem;} /*---WHO HUB FOR---*/ #who-hub-for { margin-top:-23rem; padding-top: 0;} #who-hub-for img { height: 120px;} @media screen and (min-width: 769px) { .who-hub-for-container { display: flex; justify-content: space-between;} .who-hub-for-container p { width: 45%;} } /*---ARCHITECTURAL DESIGN---*/ #architectural-design { background: #F3F4F7;} #architectural-design > p:first-child, #architectural-design > p:last-child { display: none; border:1px solid red;} /*---TECHNICAL DOCUMENTATION---*/ #technical-documentation { background: white;} #technical-documentation .container p:last-child { border:1px solid red;} #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:1.5rem;} .technical-documentation-cta { margin-bottom:0 !important;} @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:11.25rem; 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 h2 { margin-bottom:2.5rem;} #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 .container > p:first-child, #latest-news .container > p:last-child { display:none; border:1px solid red;} #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 { position:relative; z-index: 5; margin-bottom: -16rem; padding-top: 0; padding-bottom: 0; background: linear-gradient(to right, #00284A 0%, #00284A 50%, transparent 50%, transparent 100%);} #collaborate-with-us .container { padding: 6rem 3rem 6rem 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 h2 { margin-bottom:2.5rem;} #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 { position:relative; z-index: 4; padding-top: 21rem; background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/565379323/bg-illu-sigle-service-desk.svg"); background-position: top right; background-repeat: no-repeat; background-size: cover;} #service-desk p.p-btn { margin-top: 2.5rem; margin-bottom:0;}/> ${arTime}</p> <a class="article-link link-cta primary after" href="${arLink}"><span>Read article</span></a> </div> `; items.push({ arTitle: arTitle, arLink: arLink, arTime: arTime, sortableTime: sortableTime, arPreview: arPreview, arDOMElement: domElement }); } catch (err) { } }); } function formatTime(timetxt) { const date = new Date(timetxt); const monthName = date.toLocaleString('en-US', { month: 'long' }); const datetxt = `${date.getDate()} ${monthName} ${date.getFullYear()}`; return datetxt; } function sortFun(type) { if (type === 'desc') { items.sort((a, b) => { return a.sortableTime < b.sortableTime ? 1 : -1 }); return; } items.sort((a, b) => { return a.sortableTime > b.sortableTime ? 1 : -1 }); } function addDomElements() { let num = 3; for (let index = 0; index < num; index++) { let element = items[index]; if(!element) break; newsList.appendChild(element.arDOMElement); } } }); </script> |