Page History

...

Div

id	collaborate-with-us
class	section

Html-bobswift

<div class="container"> 

<h2>Collaborate with us</h2>

<div class="cols gap-lg">

<div class="col-4">
<h3 class="h5">Single Digital Gateway Coordination Group</h3>
<p class="opacity-75">The mission of this group is to coordinate the implementation work around the setup of the Once-Only Technical System. The members of this group are the Member States (and other public entities).</p>
<p><a class="btn primary-negative" target="_blank" href="https://ec.europa.eu/transparency/expert-groups-register/screen/expert-groups/consult?lang=en&do=groupDetail.groupDetail&groupID=3639"><span>Visit our space</span><span class="ico-cta"></span></a></p>
<p>Restricted space</p>
</div>

<div class="col-4 col-separator-before">
<h3 class="h5">Single Digital Gateway Coordination sub-groups</h3>
<p class="opacity-75">Six sub-groups have been set-up to examine specific topics related to the Once-Only Technical System and are expected to report to the Single Digital Gateway Coordination Group. They enable the participation of all Member States in the discussion and ensure the work done by Member State experts is monitored. The sub-groups can only be joined by experts officially nominated by their National Coordinators.</p>
<!--<p><a class="btn primary-negative" href="#"><span>Visit our space</span><span class="ico-cta"></span></a></p>-->
<p>Restricted space</p>
</div>
</div>

<div class="cols">
<div class="col-4">
<h3 class="h5">Implementers Collaboration Space</h3>
<p><span class="badge sm">In development</span></p>
</div>
</div>


</div>

Div

id	service-desk
class	section

Div

class	container

Div

class	cols justify-content-center align-items-center

Div

class	col-4 text-center

HTML Image

src	https://ec.europa.eu/digital-building-blocks/sites/download/attachments/565379323/illu-service-desk.png
alt	illustration customer service desk, a phone with message
class	img-fluid img-mobile

Html-bobswift

<div class="col-4">
<h2>Service desk</h2>
<p class="lead">The Service Desk helps users improve the performance, continuity and reliability of their Once-Only Technical System implementations.</p>
<p class="service-desk-cta"><a class="btn ghost" target="_blank" href="https://ec.europa.eu/digital-building-blocks/tracker/plugins/servlet/desk/portal/15"><span>Contact the Service Desk</span></a></p>
</div>

CSS Stylesheet

/*---------------------------------*/
/*---OOH HOME PAGE - 03-11-2022---*/
/*-------------------------------*/

@media screen and (max-width: 769px) {
  .img-mobile { width: 180px;}
  .remove-on-mobile { display:none !important;}
}  

@media screen and (max-width: 1200px) {
  .not-d-block-mobile  { display:inline !important;}
} 

/*---INTRODUCTION---*/
#introduction { padding-bottom: 26rem;
background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/565379323/bg-illu-sigle-home-introduction.svg");
background-position: bottom right;
background-repeat: no-repeat;
background-size: cover;
}

#introduction h1 { margin-bottom:2.5rem;}

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

/*---WHO HUB FOR---*/
#who-hub-for { margin-top:-23rem; padding-top: 0;}
#who-hub-for img { height: 120px;}  

@media screen and (max-width: 768px) {
	.who-hub-for-container p:last-child { margin-bottom: 0;}
}  

@media screen and (min-width: 769px) {
	.who-hub-for-container { display: flex; justify-content: space-between;}
	.who-hub-for-container p { width: 45%;} 
}    

/*---ARCHITECTURAL DESIGN---*/
#architectural-design { background: #F3F4F7;}
#architectural-design h2 { margin-bottom:2.5rem;}  
#architectural-design .cols:last-child p:last-child { margin-bottom:0;}  
/*hack - remove empty p from confluence*/
#architectural-design > p:first-child, #architectural-design > p:last-child { display: none; border:1px solid red;}
#architectural-design .technical-system_steps { list-style: none; margin:0; padding: 0;}
#architectural-design .technical-system_steps li > div { display:flex; align-items: baseline; gap:10px;}
#architectural-design .technical-system_steps li > div > span { display: flex; align-items: center; justify-content: center; background: #E3E6EB; width: 24px; height: 24px; min-width: 24px; border-radius: 24px;  color: #3D597A; font-size: 12px;}
#architectural-design .ico-download {filter: invert(99%) sepia(100%) saturate(2%) hue-rotate(141deg) brightness(110%) contrast(100%);} 

@media screen and (max-width: 768px) {
   #architectural-design .technical-system_steps.mobile { margin-top:-2rem;}  
}

@media screen and (min-width: 769px) {
    #architectural-design h3 { margin-top:3rem;}     
}       

/*---TECHNICAL DOCUMENTATION---*/
#technical-documentation { position:relative; 
background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/565379323/bg-illu-sigle-service-documentation.svg");
background-position: top right;
background-repeat: no-repeat;
background-size: cover;
background-color: white;}

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

#technical-documentation .container > p:last-child { display:none; border:1px solid red;}
#technical-documentation .card-grid small { color: #5D24A4;}
#technical-documentation .card-grid-footer { text-align: right;}
#technical-documentation .card-grid-footer p:first-child { margin-bottom:1.5rem;}
.technical-documentation-cta { margin-bottom:0 !important;}

@media screen and (min-width: 769px) {
	#technical-documentation .card-grid-body p:last-child { margin-bottom: 0;}
	.technical-documentation-cta { margin-top:2.5rem !important;} 
}

/*---SERVICES---*/
#services { background: #00284A;}
#services h2, #services h3, #services p { color: white;}
#services .card-grid { padding: 0; background: transparent;}
#services .col-separator-before:before, 
#services .col-separator-after:after { border-left:1px solid rgba(255, 255, 255, 0.12);}  
#services .opacity-75 { opacity: 0.75;}
#services .opacity-50 { opacity: 0.50;}
#services .badge { margin-bottom:0.5rem; color: #995E00; background: #FFEECC;}
/*HACK remove empty p from Confluence*/
#services .col-4 > p:first-child { border:1px solid green; display: none;}

@media screen and (min-width: 769px) {
  #services { padding-bottom:6rem;}
  #services .card-grid-body p:last-child { margin-bottom:0;}
}    

/*---SUPPORTING SERVICES---*/
#supporting-services { padding-bottom:11.25rem; background: #F3F4F7;
background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/565379323/bg-illu-sigle-supporting-services.svg");
background-position: bottom right;
background-repeat: no-repeat;
background-size: cover;
}
#supporting-services .cols:last-child { margin-top:-3rem;}
#supporting-services h2 { margin-bottom:2.5rem;}
#supporting-services hr { margin:2rem 0 3rem 0; border:none; border-top:1px solid #E3E6EB; height: 1px;}

@media screen and (min-width: 769px) {
  .supporting-services-container { display: flex; justify-content: space-between;}
  .supporting-services-container p:first-child { width: 70%;}
  .supporting-services-container p:last-child { width: 30%; text-align: right;}
  .supporting-services-container .btn { margin-left:1rem;}
}     

/*---LATEST NEWS---*/
#latest-news .news-teaser-root > div > div > div {display: inline-block; margin-top:1rem; background: #FFFFFF; border-radius: 12px; box-shadow: 0px 2px 12px rgba(0, 24, 50, 0.12);}
#latest-news .news-teaser-root a img {  border-radius:0% 100% 0% 100% / 24% 0% 100% 76%; border-top-left-radius: 12px; border-top-right-radius: 12px;}
#latest-news .news-teaser-root > div > div > div > div > div > div:last-child { padding:0 2rem 0.25rem 2rem;}
#latest-news .news-teaser-root a h2 {font-size: 1.2rem; line-height: 1.4; text-transform: initial; text-decoration:none;}
#latest-news .news-teaser-root a, #latest-news .news-teaser-root a:link { display: inline-block; margin-bottom:0; color: #001832; text-decoration: none;}
#latest-news .news-teaser-root a:hover { text-decoration: underline;}
#latest-news .news-teaser-root .aui-group span { font-size: initial; color: #001832; }
#latest-news .news-teaser-root > div > div:last-child button { color: #001832 !important; background-color: transparent; border: 1px solid #B7C2CF; border-radius: 6px;}
#latest-news .news-teaser-root > div > div:last-child button:hover { text-decoration: underline;}

@media screen and (max-width: 768px) {
#latest-news .news-teaser-root > div > div > div  { position:relative !important; width: auto !important; left: auto !important; top: auto !important;}
#latest-news .news-teaser-root .aui-group { min-height: auto !important;}
}

/*hack - remove empty p from confluence*/
#latest-news .container > p:first-child, #latest-news .container > p:last-child { display:none; border:1px solid red;}

/*---COLLABORATE WITH US---*/
#collaborate-with-us { position:relative; z-index: 5; margin-bottom: -16rem; padding-top: 0; padding-bottom: 0; background: linear-gradient(to right, #00284A 0%, #00284A 50%, transparent 50%, transparent 100%);}
#collaborate-with-us .container { padding: 6rem 3rem 6rem 0; background-color: #00284A; border-top-right-radius: 60px; border-bottom-right-radius: 60px;
background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/565379323/illu-launch-rocket.png");
background-position:  90% bottom;
background-repeat: no-repeat;
}
#collaborate-with-us h2 { margin-bottom:2.5rem;}
#collaborate-with-us .col-separator-before:before, 
#collaborate-with-us .col-separator-after:after { border-left:1px solid rgba(255, 255, 255, 0.12);}  
#collaborate-with-us .opacity-75 { opacity: 0.75;}
#collaborate-with-us h2, #collaborate-with-us h3, #collaborate-with-us p { color: white;}
#collaborate-with-us .badge { margin-bottom:0.5rem; color: #995E00; background: #FFEECC;}

/*hack - remove empty p from confluence*/
#collaborate-with-us > p:first-child,  #collaborate-with-us > p:last-child { display:none; border:1px solid red;}

/*---SERVICE DESK---*/
#service-desk { position:relative; z-index: 4; padding-top: 21rem;
background-image: url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/565379323/bg-illu-sigle-service-desk.svg");
background-position: top right;
background-repeat: no-repeat;
background-size: cover;}  
#service-desk .service-desk-cta { margin-top: 2.5rem; margin-bottom:0;} 

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

Page tree

Versions Compared

Old Version 360

New Version 361

Key