Page History

...

Div

id	event-detail-footer
class	section

Div

class	container

Div

class	cols

Div

Html-bobswift

<p class="social-media-cta">Don’t forget to follow the Once-Only Technical System <a href="https://twitter.com/EU_OnceOnly" target="_blank">Twitter</a> account to keep up to date with the latest news.</p>
<p><a href="https://twitter.com/EU_OnceOnly" target="_blank"><img src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/581239505/ico-twitter.svg" alt="OOH on Twitter"></a></p>

Div

id	box-cta-projectathon-playbook
class	section

Html-bobswift

<div class="container"> 

<div class="cols">

<div class="col-2">
<img aria-hidden="true" src="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/581239505/illu-projectathon playbook.png" alt="">
</div>

<div class="col-10">
<h3 class="h4">Projectathon Playbook</h3>
<p>The Projectathon Playbook provides a detailed overview of the Projectathon events organized for teams across the Member States willing to test their system before the go-live of the Once-Only Technical System.</p>
<p><a class="btn primary-negative" href="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/592642240/OOTS-PROJECTATHON-PLAYBOOK-PARTICIPANTS-12-12-2022.pdf"><span>Download the Projectathon Playbook</span><span class="ico-download"></span></a></p>
</div>

</div>

</div>

CSS Stylesheet

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

.mt-h2 { margin-top:2.5rem !important;}  

/*---INTRODUCTION---*/
.event-detail-introduction-cover {
background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/610468539/event-02-cover-page-detail.png");
background-position: center center; background-repeat: no-repeat; background-size: 100%;
}

.event-detail-introduction-content { position:relative; padding-top:2.5rem !important;; padding-bottom:2.5rem !important; background-color: #F3F4F7;}
.event-detail-introduction-content:before { content:''; display:block; z-index: 2; position:absolute; top:0; left:-2.5rem;; width:100%; height:100%; background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/597951745/event-detail-introduction-content-shape.svg"); background-repeat: no-repeat; background-size: 100%; background-position: center left;}

.event-detail-introduction-content h1, .event-detail-introduction-content p { z-index: 3; position:relative;}
.event-detail-introduction-content h1 { margin-left:auto; margin-right:auto; width:80%;}
.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:80%;}
.event-detail-introduction-content .register-cta { text-align: right}

@media screen and (min-width: 769px) {
	.event-detail-introduction-cover {border-top-left-radius: 12px; border-bottom-left-radius: 12px;}

CSS Stylesheet

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

.mt-h2 { margin-top:2.5rem !important;}  

/*---INTRODUCTION---*/
.event-detail-introduction-cover {
background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/610468539/event-02-cover-page-detail.png");
background-position: center center; background-repeat: no-repeat; background-size: 100%;
}

.event-detail-introduction-content { position:relative; padding-top:2.5rem !important;; padding-bottom:2.5rem !important; background-color: #F3F4F7;}
.event-detail-introduction-content:before { content:''; display:block; z-index: 2; position:absolute; top:0; left:-2.5rem;; width:100%; height:100%; background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/597951745/event-detail-introduction-content-shape.svg"); background-repeat: no-repeat; background-size: 100%; background-position: center left;}

.event-detail-introduction-content h1, .event-detail-introduction-content p { z-index: 3; position:relative;}
.event-detail-introduction-content h1 { margin-left:auto; margin-right:auto; width:80%;}
.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:80%;}
.event-detail-introduction-content .register-cta { text-align: right}

@media screen and (min-width: 769px) {
	.event-detail-introduction-cover {border-top-left-radius: 12px; border-bottom-left-radius: 12px;}
	.event-detail-introduction-content { border-top-right-radius: 12px; border-bottom-right-radius: 12px;} 
}

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

/*---FOOTER---*/
#event-detail-footer { padding-top: 0rem;
background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/597951745/event-detail-footer-shape.svg");
background-position: bottom left;
background-repeat: no-repeat;
background-size: 100%;
}
#event-detail-footer .container { border-top:1px solid #E3E6EB;}
#event-detail-footer .register-cta { margin-top:2.5rem; text-align: right;}
#event-detail-footer .social-media-cta { margin-bottom:1rem;} border-top-right-radius: 12px; border-bottom-right-radius: 12px;} 
}

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

/*---FOOTER---*/
#event-detail-footer { padding-top: 0rem; padding-bottom:3rem;
/*
background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/597951745/event-detail-footer-shape.svg");
background-position: bottom left;
background-repeat: no-repeat;
background-size: 100%;
*/
}
#event-detail-footer .container { border-top:1px solid #E3E6EB;}
#event-detail-footer .register-cta { margin-top:2.5rem; text-align: right;}
#event-detail-footer .social-media-cta { margin-bottom:1rem;} 

/*
@media screen and (max-width: 769px) {
  #event-detail-footer { background-position: bottom left; background-size: 240%;}
}
*/

CSS Stylesheet

/*---BOX CTA EVENTS---*/
#box-cta-projectathon-playbook { padding-top:0;}
/*hack - remove empty p from confluence*/
#box-cta-projectathon-playbook > p:first-child , #box-cta-projectathon-playbook > p:last-child { display:none; border:1px solid red;}
#box-cta-projectathon-playbook .container { position: relative; padding: 3rem 2.5rem; background-color: #00284A; border-radius: 20px;}
#box-cta-projectathon-playbook h3 { color: white;} 
#box-cta-projectathon-playbook p { margin-top:0.75rem; color: white; opacity:0.75;}
#box-cta-projectathon-playbook p:last-child { margin-bottom:0; opacity:1;}

@media screen and (maxmin-width: 769px) {
    #event#box-cta-detail-footerprojectathon-playbook .container { background-positionpadding: bottom6.25rem left; background-size: 240%;}
}5rem;}
   #box-cta-projectathon-playbook .col-10 { padding-left: 2rem;} 
}

Page tree

Versions Compared

Old Version 30

New Version 31

Key