Page History

CSS Stylesheet

/*------------------------------------------------*/
/*---OOH PROJECTATONS DETAIL PAGE - 24-04-2024---*/
/*----------------------------------------------*/ 

#main-content p:empty { display: none;}
.mb-0 { margin-bottom:0;}

/*---INTRODUCTION---*/
#introduction { }

/*reboot*/ 
#introduction .container .cols { margin:0;}
#introduction .container .cols .col-10 { padding:0;}

#introduction .cols { justify-content: center;}
#introduction p.lead { margin-bottom:40px;}
#introduction .information-illu {margin-bottom:0; }
#introduction img {  max-width: 100%; height: auto; border-radius: 12px;}

/*---INFORMATION---*/
#information { margin-top:-9rem; padding-top:9rem; padding-bottom:18rem; background-color: #F3F4F7;}

/*reboot*/ 
#information .container .cols { margin:0;}
#information .container .cols .col-10 { padding:0;}

#information .cols { justify-content: center;}

@media screen and (min-width: 769px) {
  #information { margin-top:-18rem; padding-top:18rem;}
}

/*---BOX CTA REPORT---*/
#box-cta-report { margin-top:-12rem; padding-top:0; position:relative;}
#box-cta-report .projectathon-box { padding:1.5rem; background-color: #00284A; border-radius:20px;}
#box-cta-report .container .cols { margin-bottom:-1rem;}
#box-cta-report .projectathon-box-col-illu { margin-bottom:1rem;}
#box-cta-report .projectathon-box-col-illu img { width: 120px; height:auto;}
#box-cta-report h3, #box-cta-report p { color: white;}
#box-cta-report p.p-opacity { opacity: 0.75}
#box-cta-report p:last-of-type { margin-bottom:0;}
/*hack - remove empty p from confluence*/
#box-cta-report .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-report .projectathon-box { padding:2.5rem;}
 #box-cta-report .projectathon-box-cols { display: flex; align-items: center;}
 #box-cta-report .projectathon-box-col-illu { margin-bottom:0; padding:0 3rem 0 0}
}

@media screen and (min-width: 1366px) {
 #box-cta-report .projectathon-box { padding:5rem;}
}

/*---GALLERY---*/
#gallery { position: relative; z-index: 2; padding-top:0; padding-bottom:0;}

/*reboot*/ 
#gallery .container .cols { margin:0;}
#gallery .container .cols .col-10 { padding:0;}

#gallery .container .cols > div p:first-child, #gallery .container .cols > div p:last-child { display: none;}
#gallery .cols { justify-content: center;}
.wiki-content .gallery-p { margin:0 0 2rem 0;}
.wiki-content .gallery-cta { margin:2rem 0 0 0;}

.gallery { margin: 0 -5px!important; width:100%;}
.gallery table { width:100%;}
.gallery table td { width:20%;}
.gallery table td img { margin: 0 !important; padding: 5px; width: 100%; max-width: 400px; height: auto; border-radius: 16px;}
.gallery table td img:hover { cursor: pointer;}

/*cols video*/
.cols-video { justify-content: center;}
#gallery .cols:nth-child(2) {  padding-top:120px;}
.cols-video div p:first-child { display: none; border:1px solid yellow;}

/*tabs video*/
#tabs-video-nav { list-style: none; margin: 40px 0 0 0; padding: 0; overflow: auto;}
#tabs-video-nav li a { text-decoration: none; color: #001832;}
#tabs-video-nav li a .cover-play { position: relative; display:inline-block; line-height: 0;}
#tabs-video-nav li a .cover-play:before { z-index: 1000; content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 40px; width: 40px; background: url(https://ec.europa.eu/digital-building-blocks/sites/download/attachments/581239505/ico-play-video-secondary.svg)}
#tabs-video-nav li a .cover-play img { width: 100%; max-width: 110px; height: auto; border: 2px solid transparent; border-radius:16px; opacity: 1; filter: brightness(0.7) saturate(0.7);}
#tabs-video-nav li:hover a .cover-play img { opacity: 1; filter: none;}
#tabs-video-nav li.active a .cover-play:before { display: none;}
#tabs-video-nav li.active a .cover-play img { /*border: 2px solid #842DB5;*/ opacity: 1; filter: none;}
#tabs-video-nav li a .cover-text { display: block; color: #3D597A;}
#tabs-video-nav li.active a .cover-text { color:#842DB5;}

.tabs-video-content { background-color: #FFF;}
.tabs-video-content-iframe { position: relative; width: 100%; overflow: hidden; padding-top: 56.25%; /* 16:9 Aspect Ratio */}
.tabs-video-content-iframe iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; border: none; border-radius: 16px;}

@media screen and (min-width: 769px) {
  #tabs-video-nav { list-style: none; display:flex; justify-content:center; gap: 2%; padding: 0; overflow: auto;}
  #tabs-video-nav li { width: 33%; cursor: pointer;}
  #tabs-video-nav li a .cover-play img { width: 100%; max-width: 360px; height: auto;}
}
/*---UPCOMING PROJECTATONS---*/
#upcoming-projectatons {}

/*reboot*/ 
#upcoming-projectatons .container .cols { margin:0;}
#upcoming-projectatons .container .cols .col-10 { padding:0;}

#upcoming-projectatons .cols { justify-content: center;}

#upcoming-projectatons .badge { display:flex; align-items:center; gap:4px; border-radius:4px;}

.card-upcoming-cols { display: flex; flex-direction: column; margin-top:40px; width: 100%; gap:24px;}
.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: 300px; border-top-right-radius: 12px; border-top-left-radius: 12px; overflow: hidden;}
.card-upcoming-col.p2 .card-upcoming-body a { margin:-1rem 0 0 -3rem; width: 130%; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/668541448/illu-card-projectathon-02.png"); background-size: cover; border-radius: 100% 0% 38% 62% / 0% 88% 12% 100% ;}
.card-upcoming-col.p1 .card-upcoming-body aimg { margin:-1rem 0 0 -3rem; width: 130%; background: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/647954663/illu-card-projectathon-01.jpg"); background-size: cover; background-position: top center; border-radius: 100% 0% 38% 62% / 0% 88% 12% 100% ;}

height: 220px; object-fit: cover; clip-path: ellipse(80% 142% at 71% -46%);}
.card-upcoming-body h3 { margin-top:24px; font-size:20px; line-height:24px;}
.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;}
.card-upcoming-footer p:last-child { margin-bottom:0; text-align:right;}

@media screen and (min-width: 992px) {
  .card-upcoming-cols { flex-direction:row; margin-left:auto; margin-right: auto; width: 80%; gap:24px;}
  .card-upcoming-col:nth-child(1) { width: 50%;}
  .card-upcoming-col:nth-child(2) { width: 50%;}
  .card-upcoming-body { flex: 1 1 auto;}
  .card-upcoming-body a { height: 220px;}
}

...

Div

id	upcoming-projectatons
class	section

Div

class	container

Html-bobswift

<div class="cols">
<div class="col-10">

<h2>Other Past Projectathons</h2>
<p class="mb-0">Since 2023, the Commission has been organising Once-Only Technical System Projectathons. These are three-day events where national teams connect various systems and perform a marathon of peer-to-peer interoperability and compliance tests in a structured environment.</p>

</div>
</div>

Html-bobswift

<div class="card-upcoming-cols">

<!--CARD 01-->
<div class="card-upcoming-col p2">
<div class="card-upcoming">
<div class="card-upcoming-body">
<a href="#" style="pointer-events: none;"></a><img loading="lazy" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/668541448/illu-card-projectathon-02.png" alt="" aria-hidden="true">
<h3>Projectathon #2</h3>   
<p>The June Projectathon provided a valuable moment for national implementation teams to perform interoperability tests prior to the summer recess.</p>

</div>
<div class="card-upcoming-footer">
<p class="card-upcoming-date">14 - 16 June 2023 | Brussels</p>
<p><a class="btn ghost" href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/Projectathon2"><span>Go to Projectathon #2</span><span class="ico-cta-forward"></span></a></p>
</div>
</div>
</div>
<!---->

<!--CARD 02-->
<div class="card-upcoming-col p1">
<div class="card-upcoming">
<div class="card-upcoming-body">
<a<img hrefloading="#lazy" style="pointer-events: none;"></a>src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/647954663/illu-card-projectathon-01.jpg" alt="" aria-hidden="true">
<h3>Projectathon #1</h3>   
<p>The April Projectathon brought together participants and observers to perform key tests on their national Once-Only Technical System implementations, ahead of the June and October sessions.</p>

</div>
<div class="card-upcoming-footer">
<p class="card-upcoming-date">19 - 21 April 2023 | Brussels</p>
<p><a class="btn ghost" href="https://ec.europa.eu/digital-building-blocks/sites/display/OOTS/Projectathon1"><span>Go to Projectathon #1</span><span class="ico-cta-forward"></span></a></p>
</div>
</div>
</div>
<!---->

</div>

...

Page tree

Versions Compared

Old Version 150

New Version Current

Key