Page tree

CEF DIGITAL home page

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Content Layer
id1
Content Column
width100%
id11
Content Block
id111
Html-bobswift
<footer class="cef-footer-main" role="contentinfo">

<!-- SERVICES AND INFORMATION-->
<div class="col-md-7">
<h3>Services & information</h3>

<div class="col-md-6">
<nav>
<ul>
<li><a href="https://ec.europa.eu/digital-building-blocks/sites/x/4ojXGw">eDelivery</a></li>
<li><a href="https://ec.europa.eu/digital-building-blocks/sites/x/hYXXGw">eID</a></li>
<li><a href="https://ec.europa.eu/digital-building-blocks/sites/x/4ojXGw">eInvoicing</a></li>
<li><a href="https://ec.europa.eu/digital-building-blocks/sites/x/rITXGw">eSignature</a></li>
<li><a href="https://ec.europa.eu/digital-building-blocks/sites/x/_wCzIQ">Once-Only Technical System (OOTS)</a></li>
</ul>
</nav>
</div>

<div class="col-md-6">
<nav>
<ul>
<li><a href="https://ec.europa.eu/digital-building-blocks/sites/x/qYTRH">About the Digital Building Blocks</a></li>
<li><a class="cef-link-external" href="https://ec.europa.eu/digital-building-blocks/tracker/plugins/servlet/desk">Support>Access Help <spanDesk<span class="cef-sr-only">(opens in a new tab)</span></a></li>
<li id="nav-footer_privacy_statement" style="font-size: 12px; width: 70%;">You can find information on how your personal data will be processed in this<a target="_blank" href="https://ec.europa.eu/digital-building-blocks/sites/display/DIGITAL/Privacy+statement?preview=/484311563/612174031/Technical%20Help%20Desk_privacy%20statement.pdf#383779101-1863730791">privacy statement</a>.</li>
</ul>
</nav>
</div>

</div>
<!-- END SERVICES AND INFORMATION-->   

<h3>Subscribe to our newsletter</h3>
<p>Find out all the latest on the building blocks and related news, from technical updates and events to exciting new examples of building block reuse and programme-wide initiatives!</p>
<p><a class="cef-footer-main-btn" href="https://ec.europa.eu/eusurvey/runner/BuildingBlocksBulletin" target="_blank" aria-label="Subscribe to our Cef Digital newsletter"><span class="cef-link-external">Subscribe</span> <span class="cef-sr-only">(opens in a new tab)</span></a></p>

<!-- LEGAL LINKS -->
<div class="col-md-12 cef-footer-main-legal-link">
<ul>
<li><a class="cef-link-external" href="https://ec.europa.eu/info/legal-notice_en">Legal notice <span class="cef-sr-only">(opens in a new tab)</span></a></li>
<li><a class="cef-link-external" href="https://ec.europa.eu/info/cookies_en">Cookies <span class="cef-sr-only">(opens in a new tab)</span></a></li>
<li><a href="https://ec.europa.eu/digital-building-blocks/sites/x/oQAHHQ">Master Service Arrangement</a></li>
<li><a href="https://ec.europa.eu/digital-building-blocks/sites/download/attachments/484311563/Accessibility%20statement%20DIGITAL.pdf">Accessibility statement</a></li>
<li><a href="https://ec.europa.eu/digital-building-blocks/sites/x/CwLeH">Privacy Statement</a></li>
</ul>

</div>
<!-- END LEGAL LINKS -->

</footer>

<!-- Europa Analytics -->
<script type="application/json">{"utility":"piwik","siteID":"457","sitePath":["ec.europa.eu\/cefdigital"]}</script>
<!-- End Europa Analytics Code -->
CSS Stylesheet
.brikit-canvas .cef-footer-main p { font-size: 16px;}

.cef-footer-main h3 { font-weight: bold; color: #003764;}
.cef-footer-main nav {margin-top:1rem; margin-bottom: 1.5rem;}
.cef-footer-main nav li {margin-bottom:0.50rem;}
.cef-footer-main nav li a {border-bottom: 2px solid transparent !important;}

.cef-footer-main-social-media { margin-top:1rem;}
.cef-footer-main-social-media li { margin-right:5px; display:inline-block;}
.cef-footer-main-social-media a { display:inline-block !important; line-height: 0; border: none !important;}
.cef-footer-main-social-media a:hover { background-color: #003764 !important; border: none !important; border-radius: 50%;}
.cef-footer-main-social-media a svg { width: 48px;}
.cef-footer-main-social-media a:hover svg .cef-logo-social-media-st1 { fill:#fff !important; stroke:#fff !important;}

.cef-footer-main-legal-link { padding-top:1.5rem; text-align: center; border-top:1px solid #DBDBDB;}
.cef-footer-main-legal-link ul li { display:inline-block; margin-right:10px;}

/*----------------------------------------*/
/*--- FOLLOWING STYLES ARE DUPLICATED WILL BE REMOVED WHEN THE CSS WILL BE APPLY ON MAIN CSS---*/
/*--------------------------------------*/

/*--- CEF 2020 LINK ---*/
/*--------------------*/
.cef-footer-main a, .cef-footer-main a:link { display: inline; position: relative; padding-left: 2px; padding-right: 2px; font-weight:bold; text-decoration: none !important; color: #003764; border-top: 2px solid transparent; border-right: 2px solid transparent; border-bottom: 2px solid #003764; border-left: 2px solid transparent;
-webkit-transition: 120ms linear; transition: 120ms linear; transition-property: all;}
.cef-footer-main a:hover { color: white; background-color: #003764; border: 2px solid #003764;}
.cef-footer-main a:focus { color: inherit; background-color: inherit; border: 2px solid transparent; outline: 2px dashed black; outline-offset: 2px;}

/*--- BUTTON ---*/
/*-------------*/
.cef-footer-main-btn { margin-bottom: 1.5rem; display:inline-block !important; padding:0.75rem 1rem !important; min-width:100px !important; font-weight: bold; line-height:1.2em; text-align:center; text-transform: uppercase; text-decoration:none !important; border: 2px solid transparent; background: #FFCF00 !important; border-color:#FFCF00 !important; border-radius:7px; box-shadow: none;}
.cef-footer-main-btn:hover { background: #FFCF00 !important; border-color:#FFCF00 !important; box-shadow: none;}
.cef-footer-main-btn:focus { outline: 2px dashed black !important; outline-offset: 2px !important;}
.cef-footer-main-btn span { padding-left:2px; padding-right:2px; color:#003764 !important; border: 2px solid transparent;}
.cef-footer-main-btn:hover span { border-top: 2px solid transparent; border-right: 2px solid transparent; border-bottom: 2px solid #003764; border-left: 2px solid transparent; border-bottom-color: #003764;}

/*--- SCREEN READER ---*/
/*--------------------*/
.cef-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.cef-sr-only-focusable:active,
.cef-sr-only-focusable:focus { position:static; width:auto; height:auto; overflow:visible; clip:auto; white-space:normal}

HTML
<button onclick="topFunction()" id="scrollToTopBtn" title="Go to top"></button>
<script>
// Show or hide Scrolltotop button
function ToggleScrollToTop() {
  if (document.body.scrollTop > 1000 || document.documentElement.scrollTop > 1000) {
    document.getElementById("scrollToTopBtn").style.display = "block";
  } else {
    document.getElementById("scrollToTopBtn").style.display = "none";
  }
}

// Check every defined value millisecond 
setInterval( ToggleScrollToTop, 250 );
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
  document.body.scrollTop = 0; // For Safari
  document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}
</script>
CSS Stylesheet
#scrollToTopBtn{
  background:url("https://ec.europa.eu/digital-building-blocks/sites/download/attachments/607781201/BackToTop.svg") no-repeat left center;
  display: none;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: #bbb;
  color: white;
  cursor: pointer;
  width: 50px;
  height: 50px;
  border-radius: 10px;
  font-size: 18px;
}

#scrollToTopBtn:hover{background-color: #555;}