index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Cookie Consent</title>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<main class="banner">
<h2>🍪 Cookie preferences</h2>
<p class="description">We use cookies to enhance your browsing experience.</p>
<label class="option">
<div>
<div class="name">Essential</div>
<div class="sub">Always active</div>
</div>
<input type="checkbox" checked/>
<span class="toggle"></span>
</label>
<label class="option">
<div>
<div class="name">Analytics</div>
<div class="sub">Performance data</div>
</div>
<input type="checkbox"/>
<span class="toggle"></span>
</label>
<label class="option">
<div>
<div class="name">Marketing</div>
<div class="sub">Personalized ads</div>
</div>
<input type="checkbox"/>
<span class="toggle"></span>
</label>
<div class="actions">
<button class="reject">Reject all</button>
<button class="accept">Accept all</button>
</div>
</main>
</body>
</html>
styles.css
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: radial-gradient(circle at 30% 70%, rgba(139, 92, 246, .3), transparent 50%), #050507;
font-family: system-ui, sans-serif;
}
.banner {
max-width: 420px;
padding: 28px;
border-radius: 24px;
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .1);
display: flex;
flex-direction: column;
gap: 12px;
h2 {
margin: 0;
font-size: 18px;
color: #f4f4f5;
}
.description {
margin: 0;
font-size: 13px;
color: rgba(255, 255, 255, .4);
}
.actions {
display: flex;
gap: 10px;
}
.reject, .accept {
flex: 1;
padding: 12px;
border-radius: 14px;
font-size: 14px;
border: none;
cursor: pointer;
}
.reject {
background: rgba(255, 255, 255, .05);
color: rgba(255, 255, 255, .5);
}
.accept {
background: #f4f4f5;
color: #0a0a0f;
font-weight: 600;
}
}
.option {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 16px;
border-radius: 14px;
background: rgba(255, 255, 255, .04);
.name {
font-size: 14px;
color: #e4e4e7;
}
.sub {
font-size: 11px;
color: rgba(255, 255, 255, .25);
}
input {
display: none;
}
.toggle {
width: 44px;
height: 24px;
border-radius: 999px;
background: rgba(255, 255, 255, .1);
position: relative;
transition: background 0.3s;
}
.toggle::after {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 18px;
height: 18px;
border-radius: 50%;
background: #fff;
transition: transform 0.3s;
}
input:checked + .toggle {
background: #10b981;
}
input:checked + .toggle::after {
transform: translateX(20px);
}
}
