Geovani Assis

What are cookies?

Cookies are small pieces of data in text files, which are stored on your computer or other device when websites are loaded in a browser. They are widely used to 'remember' you and your preferences, whether for a single visit (via a 'session cookie') or multiple repeat visits (using a 'persistent cookie'). They ensure a seamless and efficient experience for visitors and perform essential functions such as allowing users to register and stay signed in. Cookies may be set by the website you are visiting (known as 'first party cookies') or by third parties, such as those who serve content or provide advertising or analytics services on the website ('third party cookies').

Today, we are going to create a Pop-up that stays fixed on the page, informing about the use of cookies. To create this announcement, we will use the following code:

	<!-- HTML -->
	<section id="cookie_footer">
	    <div class="container">
	        <div align="center" class="row">
	            <div class="col-lg-12">
	                <p class="font-roboto">
	                    O site da """"""NOME DO SITE"""""" utiliza cookies. De acordo com a LGPD, só coletamos os cookies necessários para o funcionamento do site, os demais cookies estão desabilitados por padrão. Clique no botão “Aceitar” para continuar navegando. Para mais informações, consulte a nossa <a href="#">Privacy Policy</a> e <a href="#">Política de Cookies</a>. 
	                </p>
	                
	                <div class="check_cookie" style="text-align: right;">
	                    <div class="btn_cookie" onclick="clickCookies()">To accept</div>
	                </div>
	            </div>
	        </div>
	    </div>
	</section>


	<!-- CSS -->
	<style type="text/css">	
	    #cookie_footer{
			position: fixed;
			width: 100%;
			bottom: 0;
			background-color: #fff;
			padding: 15px;
			z-index: 9999;
			color: white;
			box-shadow: 0 0 20px 20px #0000004a;
			display: none;
	    }
	    #cookie_footer p{
			color: #7f7d82;
			text-align: justify;
			font-size: 16px;
			margin-bottom: 15px;
	    }
	    #cookie_footer p a{ color: #05a1df; }
	    #cookie_footer .btn_cookie{
			background-color: #05a1df;
			border-radius: 50px;
			color: #fff;
			border: solid #05a1df 2px;
			width: min-content;
			padding: 10px 26px;
			cursor: pointer;
			height: 45px;
			margin: 15px 0;
			transition: ease .8s all;
	    }
	    #cookie_footer .btn_cookie:hover{
			background-color: #ffffff;
			color: #05a1df;
	    }
	    @media (min-width: 700px){
			#cookie_footer p{ margin: 0 40px 0 0; }
			#cookie_footer .col-lg-12{ display: flex; }
	    }
	</style>

	<!-- JS -->
	<script type="text/javascript">
	    var tempo = 0;
	    var d     = new Date();
	    
	    dia_hoje    = d.getDate();
	    mes_hoje    = d.getMonth() + 1;
	    dia_clicou  = localStorage.getItem('dia_aceitou_cookie');
	    mes_clicou  = localStorage.getItem('mes_aceitou_cookie');
	    
	    tempo       = dia_hoje - dia_clicou;
	    
	    if( tempo > 30 ){
	        if( mes_clicou != mes_hoje ){
	            document.getElementById("cookie_footer").style.display = "block";               
	        }       
	    }
	    if( dia_clicou == null){
	        document.getElementById("cookie_footer").style.display = "block";   
	    }
	    
	    function clickCookies() {
	      $("#cookie_footer").slideUp();
	      var d = new Date();
	      localStorage.setItem('dia_aceitou_cookie', d.getDate() );
	      localStorage.setItem('mes_aceitou_cookie', d.getMonth() + 1 );
	    };
	</script>

With this code, we have the HTML, CSS and JS, if you want we can separate each item in their respective files.