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 "";
}
toggle switch style02

toggle switch style02

Simple Table With UIKIT

Simple Table With UIKIT

Input range slider HTML style03

Input range slider HTML style03

Image hover style border top

Image hover style border top

Flat icon Responsive Boxes

Flat icon Responsive Boxes

Double Scrollbar style in table 01

Double Scrollbar style in table 01

Convertir une div en image

Convertir une div en image

Card Panel Bootstrap4 with header and footer

Card Panel Bootstrap4 with header and footer

Bootstrap modal avec un formulaire newsletter

Bootstrap modal avec un formulaire newsletter

Bloc resizable with jquery

Bloc resizable with jquery

Asidebar Menu Style01

Asidebar Menu Style01

Ajouter multiple input dynamique

Ajouter multiple input dynamique