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 "";
}
Vidéo background en html5 style02

Vidéo background en html5 style02

Titre section avec une bande style01

Titre section avec une bande style01

Texte Block Posts Style01

Texte Block Posts Style01

Radio button style

Radio button style

Page construction avec compte à rebours style02

Page construction avec compte à rebours style02

Manual Slideshow

Manual Slideshow

Lightbox gallery style01

Lightbox gallery style01

Input range slider HTML style01

Input range slider HTML style01

Geocoded Locations

Geocoded Locations

Form Création de compte

Form Création de compte

Bootstrap 3 Popover avec html contenu

Bootstrap 3 Popover avec html contenu

Background overlay

Background overlay