Versions Compared

Key

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

...

CSS Stylesheet
/*-----------------------------------------*/
/*---OOH EVENT DETAIL PAGE - 25-10-2022---*/
/*---------------------------------------*/      

/*---INTRODUCTION---*/
.event-detail-introduction-cover {
background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/597951752/img-event-excerpt-01.png");
background-position: center center; background-repeat: no-repeat; background-size: 100%; border-top-left-radius: 12px; border-bottom-left-radius: 12px;
}

.event-detail-introduction-content {background-color: #F3F4F7; border-top-right-radius: 12px; border-bottom-right-radius: 12px;}
.event-detail-introduction-content h1 { margin-left:auto; margin-right:auto; width:75%;}
.event-detail-introduction-content h1 span { display: block; margin-bottom:0.5rem; font-size: 1rem; line-height: 1; color: #5D24A4;}
.event-detail-introduction-content p { margin-left:auto; margin-right:auto; width:75%;}
.event-detail-introduction-content .register-cta { text-align: right}

/*---DESCRIPTION---*/
#event-detail-description { padding-top: 0rem;}
#event-detail-description h2 { margin-bottom: 2.5rem;}
#event-detail-description p:last-child { margin-bottom: 0rem;}  

/*---AGENDA---*/
#event-detail-agenda { padding-top: 0rem;
background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/597951752/bg-illu-sigle-event-detail-agenda.svg");
background-position: bottom right;
background-repeat: no-repeat;
background-size: 100%;
}

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

#event-detail-agenda h2 { margin-bottom: 2.5rem;}

#event-detail-agenda .col-container { display: flex; justify-content: space-between; align-items: center !important; margin-bottom:2.125rem; padding-bottom: 2.125rem; border-bottom:1px solid #E3E6EB;}
#event-detail-agenda .col-container:last-child { margin-bottom:0; padding-bottom:0; border-bottom:none;}   
#event-detail-agenda .col-container .col-first { padding-right:1rem; width: 25%; font-size:18px; color: #001832;} 
#event-detail-agenda .col-container .col-second { width: 75%;}
#event-detail-agenda .col-container .col-second h3 { font-size:18px; font-family: Source Sans Pro SB; } 
#event-detail-agenda .col-container .col-second h3 span { display: block; margin-bottom:0.75rem; font-size: 1rem; line-height: 1; color: #5D24A4;} 
#event-detail-agenda .col-container .col-second p:last-child { margin-bottom:0; width: 90%} 

/*---SPEAKERS---*/
#event-detail-speakers { padding-top: 0rem;}

#event-detail-speakers h2 { margin-bottomtop:0;}
#event-detail-speakers .cols:nth-child(3) h2 { margin-top:1.5rem1rem; margin-bottom:0;}

#event-detail-speakers .speakers { text-align: center;}

#event-detail-speakers .speaker-img { margin-bottom:0;}
#event-detail-speakers .speaker-img img { width: 100px; height: 100px; border-radius: 50%;}

#event-detail-speakers .speaker-name { margin-bottom:-1rem; font-size: 18px !important;}
#event-detail-speakers .speaker-name span { display: block; font-size: 16px !important; color: #5E748E;}

#event-detail-speakers .expand-control {}
#event-detail-speakers .expand-control, #event-detail-speakers .expand-control-text { color: #842DB5 !important;}
#event-detail-speakers .expand-content { text-align:left; color: red !important;}

/*---FOOTER---*/
#event-detail-footer .container { border-top:1px solid #E3E6EB;}
#event-detail-footer .register-cta { text-align: right;}
Div
styledisplay:none;
Excerpt
hiddentrue
Html-bobswift
<div class="col-container">

<div class="col-first">
<img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/597951752/img-event-excerpt-01.png" alt="">
</div>

<div class="col-second">
<h3><span>Online event</span>OOTS launch event</h3>
<p class="date">16 November | 9:00 - 14:00</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p class="event-cta"><a class="btn primary" target="_blank" href="https://ec.europa.eu/digital-building-blocks/sites/x/CAWkIw"><span>See event</span><span class="ico-cta"></span></a></p>
</div>

</div>