Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Excerpt
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="#"><span>See event</span><span class="ico-cta"></span></a></p>
</div>

</div>
CSS Stylesheet
/*-------------------------------------------*/
/*---OOH EVENTS CALENDAR PAGE - 20-10-2022---*/
/*------------------------------------------*/      

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

.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%;}

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

.revisit-passed-events { margin-top: 7.5rem; border:1px solid red;} 

/*
.event .news-teaser-root > div > div > div  { background-color: transparent; box-shadow: none !important;}  
.event .news-teaser-root > div > div > div > div > div { padding:0; box-shadow: 0;}
*/  

/*
div[class^="newsteaser-entry-"] { margin:0 !important; padding:0 !important;}
div[class^="newsteaser-entry-"] .aui-group .aui-item div[id^="entry-"] > p:first-child { display: none;}
div[class^="newsteaser-entry-"] .aui-group .aui-item div[id^="entry-"] > p:last-child { display: none;}
*/  

/*
.aui-item { display: block !important; margin: 0 0 2rem 0; padding:0; border:1px solid red;}
*/