Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
CSS Stylesheet
/*---------------------------------------*/
/*---OOH ABOUT OOTS PAGE - 17-11-2022---*/
/*-------------------------------------*/
.hack-remove-p > p:first-child, 
.hack-remove-p > p:last-child { display:none; border:1px solid red;}

@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 h1 { margin-bottom:2.5rem;} 
#introduction p { margin-bottom:0;}
/*hack - remove empty p from confluence*/
#introduction p:first-child ,#introduction p:last-child { display:none; border:1px solid red;}

/*---TECHNICAL DOCUMENTATION---*/
#technical-documentation { position:relative; 
background-color: white;
}

#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;}
}

/*---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%;}
} 
Div
idintroduction
classsection
Div
classcontainer
Div
classcols justify-content-between align-items-center
Div
classcol-7
Html-bobswift
<h1>Documentation and<br> common services</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse rutrum consectetur convallis. Donec libero nunc, dictum sed venenatis et, vestibulum nec urna. Nulla sed dui sagittis, iaculis felis quis, luctus massa.</p>
Div
classcol-4
HTML Image
srchttps://ec.europa.eu/digital-building-blocks/sites/download/attachments/61046807/illu-introduction.png
altillustration Once Only Technical System (OOTS)
classimg-fluid img-mobile

...