Versions Compared

Old Version 87

changes.mady.by.user Virginie MANGELINCK

Saved on

compared with

New Version 88

changes.mady.by.user Virginie MANGELINCK

Saved on

Key

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

...

Div
idrevisit-passed-events
classsection
Div
classcontainer
Div
classcols
Div
classcol-8 event
Html-bobswift
<h2 class="h3">Revisit passed events</h2>
<p>Browse past events</p>

<div class="event-list">  

<!--EVENT 01--> 
<div class="col-container">

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

<div class="col-second">
<h3><span>Online event</span>Implementers Café #1:</h3>
<p class="date">24 November 2022 | 9:30 - 12:15</p>
<p>“Once-Only Technical System Guidance and Projectathon Introduction”</p>
<p class="event-cta"><a class="btn primaryghost" href="https://ec.europa.eu/digital-building-blocks/sites/x/CAWkIw"><span>See event</span><span class="ico-cta"></span></a></p>
</div>

</div> 
<!---->  

</div>
CSS Stylesheet
/*-------------------------------------------*/
/*---OOH EVENTS CALENDAR PAGE - 21-11-2022---*/
/*------------------------------------------*/      

/*---INTRODUCTION---*/
#introduction {
background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/597951745/bg-illu-sigle-events.svg");
background-position: top right;
background-repeat: no-repeat;
background-size: 100%;
}

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

.event-list .col-container { margin-bottom:2.5rem; padding-bottom:2.5rem;  border-bottom:1px solid #F3F4F7;}
.event-list .col-container:last-child { border:none;}  

.col-container { display: flex; justify-content: space-between; align-items: center !important;}
.col-first { width: 35%;}
.col-first img { max-width: 100%; height: auto; border-radius: 12px;}
.col-second { width: 55%;}  

.col-container h2 { display: none;} 
.col-container h3 { font-size:20px;} 
.col-container h3 span { display: block; font-size: 1rem; line-height: 1; color: #5D24A4;} 
.col-container p.date { margin-bottom:0.5rem;} 
.col-container p.event-cta { margin-bottom:0; text-align: right;}  

#revisit-passed-events { margin-top:-6rem; padding-top:2.5rem; padding-bottom:0; border-top:1px solid #F3F4F7;}