cookie banner

[selimerunkut]

we need a cookie banner for the website

CSS Design from Aalap:

/* Cookie-Banner */

position: relative;
width: 1440px;
height: 241px;

background: #F4076D;
border-radius: 100px 100px 0px 0px;

/* Description */

position: absolute;
width: 783px;
height: 88px;
left: 87px;
top: calc(50% - 88px/2 + 4.5px);

font-family: Manrope;
font-style: normal;
font-weight: normal;
font-size: 24px;
line-height: 24px;
/* or 100% */
font-feature-settings: 'liga' off;

color: #FFFFFF;

/* Button Accept */

position: absolute;
left: 80.83%;
right: 5.28%;
top: 36.81%;
bottom: 31.45%;

/* Background */

position: absolute;
left: 0%;
right: 0%;
top: 0%;
bottom: 0%;

background: #000000;
border-radius: 15px;

/* Text */

position: absolute;
height: 22px;
left: 25px;
right: 24px;
top: calc(50% - 22px/2 - 0.25px);

font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 18px;
line-height: 21px;
display: flex;
align-items: center;
text-align: center;

color: #FFFFFF;

/* Button Reject */

position: absolute;
left: 65%;
right: 21.11%;
top: 36.81%;
bottom: 31.45%;

/* Background */

position: absolute;
left: 0%;
right: 0%;
top: 0%;
bottom: 0%;

background: #C1C1C4;
border-radius: 15px;

/* Text */

position: absolute;
height: 22px;
left: 25px;
right: 24px;
top: calc(50% - 22px/2 - 0.25px);

font-family: Roboto;
font-style: normal;
font-weight: normal;
font-size: 18px;
line-height: 21px;
display: flex;
align-items: center;
text-align: center;

color: #FFFFFF;

[vosaul]

I will use these styles, but they cannot be applied directly - it will work only for the 1440px screen

[selimerunkut]

Yes, it's probably only a css guide for the cookie banner design and needs to be adjusted for different screens