14

Design a Cookies Message Popup Template using HTML and CSS

 1 year ago
source link: https://www.geeksforgeeks.org/design-a-cookies-message-popup-template-using-html-and-css/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Design a Cookies Message Popup Template using HTML and CSS

Courses

In this article, we will design a Cookies Message Popup template using HTML and CSS. Cookies play a pivotal role in enhancing user experiences on websites by storing information about user preferences and interactions. The “Cookies Message Popup Template” is a simple and customizable solution for websites to inform users about using cookies.

We will explore the above approaches for designing a Cookies Message Popup with the help of examples.

Simple Cookie Consent

  • The HTML document defines a simple cookie consent popup with a clear message and an acknowledgment button.
  • CSS styles are applied to create an aesthetically pleasing and responsive design for the popup, featuring a fixed position at the bottom, a dark background, and contrasting text and button colors.
  • The popup is fixed at the bottom of the screen, covering the entire width. It includes padding, a subtle box shadow, and a noticeable message to grab the user’s attention.
  • The “Got it!” button is styled with a distinctive color scheme and a hover effect to enhance user experience

Example 1: We will design a Simple Cookies Message Popup using HTML and CSS in this example.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" 
content="width=device-width, 
initial-scale=1.0">
<title>Cookie Consent Popup</title>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
}
#cookie-popup {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #333;
color: #fff;
text-align: center;
padding: 15px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
#cookie-popup p {
margin: 0;
}
#cookie-popup button {
margin-top: 10px;
background-color: #16bb24;
color: #fff;
border: none;
padding: 10px 20px;
font-size: large;
cursor: pointer;
}
#cookie-popup button:hover {
background-color: #357ae8;
}
</style>
</head>
<body>
<div id="cookie-popup">
<p>
This website uses cookies to ensure you get
the best experience on our website.
</p>
<button>
Got it!
</button>
</div>
</body>
</html>

Output:

cookies1

Cookie Message with Options

  • In HTML, the structure of a cookie message popup, featuring an icon, descriptive text, and buttons, are defined.
  • CSS styles are applied to ensure an appealing and responsive design for the cookie popup. This includes setting the position, size, background color, and button styles.
  • The popup is fixed at the bottom left of the screen using CSS, ensuring it remains visible without interfering with the main content.
  • Three buttons are designed for user interaction: “Accept All Cookies,” “Necessary Cookies Only,” and “Customize Settings.” Each button has distinct styling and a hover effect to enhance the visual effect.

Example 2: In this example, we will design a more advanced and styled Cookies Message Popup.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" 
content="width=device-width,
initial-scale=1.0">
<title>Cookies Message Popup</title>
<link rel="stylesheet" href=
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
#cookies-popup {
position: fixed;
bottom: 20px;
left: 20px;
width: 450px;
background: #333;
color: #fff;
padding: 40px;
text-align: center;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.5);
z-index: 1000;
border-radius: 8px;
}
.btn-cont {
display: flex;
margin: 20px 20px;
}
#cookies-popup p {
margin-top: 20px;
margin-bottom: 10px;
}
.btn-cont button {
background: #fff;
color: #333;
border: none;
width: 50%;
padding: 8px 20px;
cursor: pointer;
font-weight: bold;
margin: 5px;
border-radius: 4px;
}
.btn-cust {
padding: 15px 30px;
font-weight: bold;
color: #333;
border: none;
cursor: pointer;
font-size: 15px;
font-weight: bold;
border-radius: 4px;
}
button:hover {
background-color: rgba(196, 218, 214, 0.76);
}
</style>
</head>
<body>
<div id="cookies-popup">
<i class='fas fa-cookie-bite'
style='font-size:80px;'>
</i>
<p>
This website uses cookies to ensure you get
the best experience on our website.
</p>
<div class="btn-cont">
<button>Accept All Cookies</button>
<button>Necessary Cookies Only</button>
</div>
<button class="btn-cust">
Customize Settings
</button>
</div>
</body>
</html>

Output:

cookies2
Last Updated : 29 Dec, 2023
Like Article
Save Article
Share your thoughts in the comments

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK