Page History

...

Div

id	event-detail-speakers
class	section

Div

class	container

Div

class	cols

Speakers

Div

class	cols speakers

Div

Html-bobswift

<p class="speaker-img"><img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/597951752/img-event-excerpt-01.png" alt=""></p>
<p class="speaker-name">John Doe<span>Director General of DG DIGIT</span></p>

Expand

title	About the speaker

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Div

Html-bobswift

<p class="speaker-img"><img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/597951752/img-event-excerpt-01.png" alt=""></p>
<p class="speaker-name">John Doe<span>Director General of DG DIGIT</span></p>

Expand

title	About the speaker

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Div

Html-bobswift

<p class="speaker-img"><img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/597951752/img-event-excerpt-01.png" alt=""></p>
<p class="speaker-name">John Doe<span>Director General of DG DIGIT</span></p>

Expand

title	About the speaker

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Div

Html-bobswift

<p class="speaker-img"><img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/597951752/img-event-excerpt-01.png" alt=""></p>
<p class="speaker-name">John Doe<span>Director General of DG DIGIT</span></p>

Expand

title	About the speaker

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Div

class	cols

Partners

Div

class	cols speakers

Div

Html-bobswift

<p class="speaker-img"><img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/597951752/img-event-excerpt-01.png" alt=""></p>
<p class="speaker-name">John Doe<span>Director General of DG DIGIT</span></p>

Expand

title	About the speaker

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Div

Html-bobswift

<p class="speaker-img"><img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/597951752/img-event-excerpt-01.png" alt=""></p>
<p class="speaker-name">John Doe<span>Director General of DG DIGIT</span></p>

Expand

title	About the speaker

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Div

Html-bobswift

<p class="speaker-img"><img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/597951752/img-event-excerpt-01.png" alt=""></p>
<p class="speaker-name">John Doe<span>Director General of DG DIGIT</span></p>

Expand

title	About the speaker

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Div

id	event-detail-footer
class	section

Div

class	container

Div

class	cols

Html-bobswift
<div> <p class="register-cta"><a class="btn primary" target="_blank" href="#"><span>Register for this event</span></a></p> </div>

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;}: 0rem;}

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

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

#event-detail-speakers .expandspeaker-control-textimg { color: #842DB5 !importantmargin-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;}

Div

style	display:none;

Excerpt

hidden	true

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>

Page tree

Versions Compared

Old Version 41

New Version 42

Key

Speakers

Partners