Bootstrap Cookie Alert pages

<!DOCTYPE html>
<html>
<head>
    <title>Afficher la barre d'alerte de notification de cookie Bootstrap lors du chargement de la page - Plugin d'alerte de cookie JQuery | Par MEZGANI SAID</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="keyword" content="Afficher la barre d'alerte de notification de cookie Bootstrap lors du chargement de la page - Plugin d'alerte de cookie JQuery">
	<meta name="author" content="Mezgani said">
	<meta name="copyright" content="NGLESSON">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="style.css" rel="stylesheet" type="text/css">	
</head>
<body>
    <div class="container">
        <div class="card" style="margin-top: 70px">
            <div class="card-body">
                <div id="fillme"></div>
            </div>
        </div>
    </div>
    <!-- COOKIES -->
    <div class="alert alert-dismissible text-center cookiealert" role="alert">
        <div class="cookiealert-container">
            <b>En poursuivant votre navigation sur nos sites, vous acceptez l'installation et l'utilisation de cookies sur votre poste, 
                dans le respect de notre politique de protection de votre vie privée. <a href="http://bglesson.com/" target="_blank">Plus de details</a></b>
            <button type="button" class="btn btn-primary btn-sm acceptcookies" aria-label="Close">
                J'accepte
            </button>
        </div>
    </div>
    <!-- /COOKIES -->
<!-- JAVASCRIPT -->
<script>
    for (var i = 1; i <= 150; i++)
        document.querySelector("#fillme").innerHTML += "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor " 
        +"ut labore et dolore magna aliqua. ";
</script>
<!-- jQuery 3.2.1 + JS-Cookie 2.1.4 - Only needed if you are using the script version with dependencies -->
<!--<script src="https://cdn.jsdelivr.net/g/jquery@3.2.1,js-cookie@2.2.0"></script>-->
<script type="text/javascript" src="script.js"></script>
</body>
</html>
.cookiealert {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0 !important;
    z-index: 999;
    opacity: 0;
    border-radius: 0;
    background: #212327 url("cubes.png");
    transform: translateY(100%);
    transition: all 500ms ease-out;
    color: #ecf0f1;
}

.cookiealert.show {
    opacity: 1;
    transform: translateY(0%);
    transition-delay: 1000ms;
}

.cookiealert a {
    text-decoration: underline
}

.cookiealert .acceptcookies {
    margin-left: 10px;
    vertical-align: baseline;
}
(function () {
    "use strict";

    var cookieAlert = document.querySelector(".cookiealert");
    var acceptCookies = document.querySelector(".acceptcookies");

    cookieAlert.offsetHeight; // Force browser to trigger reflow (https://stackoverflow.com/a/39451131)

    if (!getCookie("acceptCookies")) {
        cookieAlert.classList.add("show");
    }

    acceptCookies.addEventListener("click", function () {
        setCookie("acceptCookies", true, 60);
        cookieAlert.classList.remove("show");
    });
})();

// Cookie functions stolen from w3schools
function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    var expires = "expires=" + d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) === ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) === 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}
Background overlay

Background overlay

Buttons Styles Inspirations

Buttons Styles Inspirations

Card Bootstrap4 02

Card Bootstrap4 02

Flat icon Responsive Boxes

Flat icon Responsive Boxes

Footer Responsive avec Bootstrap4

Footer Responsive avec Bootstrap4

Geocoded Locations

Geocoded Locations

Image hover Inspiration styles

Image hover Inspiration styles

Input range slider HTML style04

Input range slider HTML style04

Page construction avec compte à rebours style01

Page construction avec compte à rebours style01

Timeline style02

Timeline style02

Vers le haut

Vers le haut

input radio checkbox b4 style

input radio checkbox b4 style