How to create a website cookie popup using HTML, CSS & JavaScript. Follow these steps and improve your potentials in programming. In this case we will use HTML, CSS and JavaScript in creating this projects.
In this guide, we'll delve into the process of constructing a seamless and aesthetically pleasing cookies popup box using the powerful trio of HTML, CSS, and JavaScript. Whether you're a seasoned developer or just starting, this tutorial will walk you through the steps to implement a professional and user-centric cookies notification on your website.
Share this to your programmer friends. I hope y'all learnt something today, make sure to let me in the comments.
This tutorial empowers you to take control of your web development journey, leveraging the power of HTML, CSS, and JavaScript to create a fully functional website that offers a seamless user experience.
If interested in watching the video before running the code below, you can click the play button to get started.
First, create a folder with any name you like. Then, make the necessary files inside it.
Create a file called index.html to serve as the main file.
Create a file called style.css for the CSS code.
Create a file called script.js for the JavaScript code.
Finally, download the Images folder and put it in your project directory. This folder contains default showcase images for the website. You can also use your own images.
To start, add the following HTML codes to your index.html file. These codes include essential HTML markup with different semantic tags, such as div, form, input, button, image, etc., to build the website layout.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cookie Popup</title>
</head>
<body>
<div class="cookiebg">
<div class="hd"><img src="cookie-fill.png" alt=""> <span>We value your privacy</span></div>
<p>We use cookies to enhance your browsing experience, serve personalized ads or content and analyze our traffic. By clicking "Accept All", you consent to our use of cookies. <a href="">Cookie Policy</a></p>
<button class="f1">Accept All</button>
<button>Customize</button>
<button class="reject">Reject All</button>
</div>
</body>
</html>
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
position: relative;
height: 100vh;
background: #D2042D;
}
.cookiebg {
position: absolute;
left: 10px;
bottom: 10px;
width: 400px;
background: #fff;
padding: 20px;
display: flex;
flex-direction: column;
gap: 10px;
font: 0.9em sans-serif;
line-height: 1.5;
border-radius: 10px;
transform: translateX(-500px);
transition: 0.5s;
}
.hd {
display: flex;
align-items: center;
}
.hd img {
width: 50px;
}
.hd span {
font-size: 2em;
font-weight: 500;
margin-left: 5px;
color: #D2042D;
}
.cookiebg a {
color: #D2042D;
text-decoration: none;
}
.cookiebg button {
padding: 13px 0;
cursor: pointer;
background: transparent;
border: 1px solid #D2042D;
border-radius: 3px;
color: #D2042D;
}
.cookiebg button.f1 {
border: none;
background: #D2042D;
color: #fff;
}
.cookiebg.appear {
transform: translateX(0);
}
<script>
setTimeout(() => {
document.querySelector(".cookiebg").classList.add("appear");
}, 2000);
document.querySelector(".reject").addEventListener("click", e => {
document.querySelector(".cookiebg").classList.remove("appear");
})
</script>
0 Comments
We are happy to hear from you.