Sallymelek I decided to take a further look into the cookie banner you suggested, and after a bit of fiddling, came up with this
It’s simplistic in view, and the below inline footer would work fine - it’s what I’m currently using on this site.
<div id="cookie-notice"><div id="cookie-text">We use cookies to give you the best experience of the Metabullet platform. Please let us know if you agree to all of these cookies being used.
<a target="_blank" class="cookie-link" href="https://metabullet.com/p/10-policies">Learn More</a></div><button class="cookie-notice-button" onclick="acceptCookie();">OK</button></div><div>
<style>
#cookie-notice {
color: #fff;
font-family: inherit;
background: #434343;
padding: 15px;
position: fixed;
width: 100%;
visibility: hidden;
z-index: 1000000;
bottom: 0;
transition: background .2s;
}
#cookie-text {
display: inline-block;
margin-left: 20px;
margin-top: 12px;
}
.cookie-notice-button {
color: inherit;
background: #f05c1d linear-gradient(90deg, #faa00d, #f05c1d);
border-width: 0px;
border: 0;
padding: 10px;
margin-top: 0;
cursor: pointer;
float: right;
}
.cookie-notice-button:hover {
background: #F05D1D;
}
.cookie-link:hover {
color: #F15F1D;
border-bottom: none;
text-decoration: none;
}
.cookie-link{
border-bottom: none;
color: #f99c0e;
}
@media screen and (max-width: 768px) {
.cookie-notice-button {
color: inherit;
background: #f05c1d linear-gradient(90deg, #faa00d, #f05c1d);
border-width: 0px;
border: 0;
padding: 10px;
margin-top: 20px;
cursor: pointer;
width: 100%;
}
}
</style>
<script>function acceptCookie(){document.cookie="cookieaccepted=1; expires=365; path=/",document.getElementById("cookie-notice").style.visibility="hidden"}document.cookie.indexOf("cookieaccepted")<0&&(document.getElementById("cookie-notice").style.visibility="visible");</script>
