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 "";
}
Timeline style04

Timeline style04

Table Responsive with css 01

Table Responsive with css 01

Planète animée style01

Planète animée style01

Input range slider HTML style03

Input range slider HTML style03

Form login b4 01

Form login b4 01

Convertir une div en image

Convertir une div en image

Buttons Styles Inspirations

Buttons Styles Inspirations

Bootstrap 3 Popover avec html contenu

Bootstrap 3 Popover avec html contenu

Asidebar Bootstrap4 style02

Asidebar Bootstrap4 style02

Asidebar Bootstrap4 style01

Asidebar Bootstrap4 style01

Ajouter une legende dans un formulaire

Ajouter une legende dans un formulaire

Ajouter supprimer dynamiquement des lignes sur un tableau

Ajouter supprimer dynamiquement des lignes sur un tableau