add banner

_includes/css-imports.html

+<style>
+    #edp-cookies-banner {
+position: relative;
+ bottom: 0;
+  background-color: #034ea2;
+  padding: 1em;
+  z-index: 1000;
+}
+#edp-cookies-banner h3 {
+  margin: 0 0 0.5rem 0;
+  color: white;
+}
+@media (max-width: 991px) {
+  #edp-cookies-banner h3 {
+    text-align: center;
+  }
+}
+#edp-cookies-banner .banner-text {
+  float: left;
+  max-width: 85%;
+  max-width: calc(100% - 200px);
+}
+@media (max-width: 991px) {
+  #edp-cookies-banner .banner-text {
+    float: inherit;
+    text-align: center;
+    max-width: 100%;
+  }
+}
+#edp-cookies-banner .banner-text p {
+  margin: 0;
+  color: white;
+}
+#edp-cookies-banner .banner-text p a {
+  display: inline-block;
+  text-decoration: underline;
+  color: #84c4f1;
+}
+#edp-cookies-banner .banner-text p a:hover {
+  color: #198cdc;
+}
+#edp-cookies-banner .banner-buttons {
+  float: right;
+}
+@media (max-width: 991px) {
+  #edp-cookies-banner .banner-buttons {
+    float: inherit;
+    text-align: center;
+    max-width: 100%;
+    margin-top: 1rem;
+  }
+}
+#edp-cookies-banner .banner-buttons .edp-cookies-accept,
+#edp-cookies-banner .banner-buttons .edp-cookies-refuse,
+#edp-cookies-banner .banner-buttons .edp-cookies-more {
+  margin: 0.3rem 0.5rem;
+}
+#edp-cookies-banner .banner-buttons .edp-cookies-accept:hover,
+#edp-cookies-banner .banner-buttons .edp-cookies-refuse:hover,
+#edp-cookies-banner .banner-buttons .edp-cookies-more:hover {
+  background: white;
+  color: #198cdc !important;
+}
+
+.btn.btn-default {
+    color: #333 !important;
+}
+.btn-default {
+    color: #333;
+    background-color: #D9EDF7;
+    border-color: #85c5e5;
+}
+.btn {
+    display: inline-block;
+    margin-bottom: 0;
+    //font-weight: normal;
+    text-align: center;
+    vertical-align: middle;
+    touch-action: manipulation;
+    //cursor: pointer;
+    background-image: none;
+    border: 1px solid transparent;
+    white-space: nowrap;
+    padding: 6px 12px;
+    font-size: 14px;
+    line-height: 1.42857143;
+    border-radius: 4px;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+.epd-cookies-accept.btn, .edp-cookies-refuse.btn, .edp-cookies-more.btn {
+    padding: 10px 25px;
+    border: none;
+    font-weight: bold;
+    background-color: #198cdc;
+    color: #ffffff !important;
+    border-radius: 0;
+    transition: 0.3s ease all;
+}
+</style>
+
 {% comment %}
   Insert here CSS <link/> tags, and <style/> tags if needed.
 {% endcomment %}
\ No newline at end of file

_includes/footer.html

@@ -35,3 +35,15 @@
     </div>
   </div>
 </footer>
+<div id="edp-cookies-banner">
+    <div class="banner-text">
+    <p>This website needs some cookies and similar means to function.<br>
+If you permit us, we will use those means to collect data on your visits for aggregated statistics to improve our service.<br>
+Moreover, we use YouTube for showing videos, which will use cookies and similar means only if you decide to watch them.</p>
+  </div>
+  <div class="banner-buttons">
+    <button class="btn btn-default edp-cookies-refuse" type="button">Accept cookies for aggregated statistics</button>
+    <button class="btn btn-default edp-cookies-refuse" type="button">No thanks, only technically necessary cookies</button>
+    <a class="btn btn-default edp-cookies-more" href="/about-edps/legal-notices_en">More information</a>
+  </div>
+</div>
\ No newline at end of file