EN TR
<div class="cookie-banner style1 dark position-bc" id="banner-1">
	<p>
		We use third-party cookies to personalize content, ads, and analyze site traffic.
		<a href="#">Learn more</a>
	</p>
	<div class="actions">
		<a href="javascript:;" onclick="hideCookieBanner('banner-1')">Decline</a>
		<a href="javascript:;" onclick="hideCookieBanner('banner-1')" class="btn">Allow cookies</a>
	</div>
</div>

<div class="cookie-banner style2 dark position-br" id="banner-2">
	<div class="icon">
		<svg width="45" height="45" viewBox="0 0 45 45" xmlns="http://www.w3.org/2000/svg">
			<path fill-rule="evenodd" clip-rule="evenodd" d="M37.6021 19.3233C39.5596 20.9915 42.1974 21.6218 44.6975 21.0187C44.737 21.5533 44.7567 22.1 44.7567 22.6589C44.7567 23.2178 44.7365 23.773 44.6959 24.3243C44.0453 33.0328 38.3799 40.5638 30.193 43.6029C22.0061 46.642 12.799 44.6321 6.62349 38.4576C0.750062 32.5832 -1.37923 23.9351 1.09537 16.0053C3.56998 8.07543 10.2399 2.17326 18.4119 0.681905C19.4918 0.487625 20.5844 0.372454 21.6811 0.337311C21.66 0.574068 21.6486 0.810824 21.6486 1.05407C21.6493 3.7219 22.9745 6.21531 25.1854 7.70839L26.1194 8.34082L25.8519 9.43704C25.1623 12.2536 26.0444 15.2231 28.1597 17.2065C30.2751 19.1898 33.2953 19.8789 36.0616 19.0095L36.9186 18.7395L37.6021 19.3233ZM17.3734 41.3189C24.0328 43.0698 31.1191 41.0994 35.9189 36.1622C39.0841 33.015 41.0367 28.8514 41.4324 24.4054C39.5365 24.1702 37.7315 23.4574 36.1865 22.3338C35.3541 22.5255 34.5027 22.6221 33.6486 22.6216C27.4338 22.6216 22.3784 17.5662 22.3784 11.3514C22.3785 10.8123 22.417 10.2739 22.4935 9.74028C20.6737 8.23592 19.3727 6.19776 18.7743 3.9138C18.9759 3.87542 19.1775 3.84001 19.3792 3.80758C19.177 3.84001 18.9754 3.87542 18.7743 3.9138C18.6889 3.58947 18.6181 3.26082 18.5619 2.92785C18.6159 3.26028 18.6867 3.58893 18.7743 3.9138C15.0368 4.6342 11.6027 6.463 8.9189 9.16218C3.98172 13.962 2.01132 21.0483 3.76218 27.7077C5.51305 34.3672 10.7139 39.568 17.3734 41.3189Z" />
			<circle cx="9.81081" cy="21.5676" r="2.67568" />
			<circle cx="20.027" cy="24.5676" r="2.83784" />
			<circle cx="31.0541" cy="28.6216" r="3.72973" />
			<circle cx="17.9189" cy="34.5406" r="1.62162" />
			<circle cx="16.2972" cy="12.6486" r="1.45946" />
			<circle cx="35.1081" cy="11.4324" r="2.18919" />
			<circle cx="33.3243" cy="2.83784" r="2.83784" />
			<circle cx="43.054" cy="15.0811" r="1.2973" />
		</svg>
	</div>
	<p>
		We use third-party cookies to personalize content, ads, and analyze site traffic.
		<a href="#">Learn more</a>
	</p>
	<div class="actions">
		<a href="javascript:;" onclick="hideCookieBanner('banner-2')">Okay</a>
	</div>
</div>

<div class="cookie-banner style2 vertical position-tl" id="banner-3">
	<div class="icon">
		<svg width="45" height="45" viewBox="0 0 45 45" xmlns="http://www.w3.org/2000/svg">
			<path fill-rule="evenodd" clip-rule="evenodd" d="M37.6021 19.3233C39.5596 20.9915 42.1974 21.6218 44.6975 21.0187C44.737 21.5533 44.7567 22.1 44.7567 22.6589C44.7567 23.2178 44.7365 23.773 44.6959 24.3243C44.0453 33.0328 38.3799 40.5638 30.193 43.6029C22.0061 46.642 12.799 44.6321 6.62349 38.4576C0.750062 32.5832 -1.37923 23.9351 1.09537 16.0053C3.56998 8.07543 10.2399 2.17326 18.4119 0.681905C19.4918 0.487625 20.5844 0.372454 21.6811 0.337311C21.66 0.574068 21.6486 0.810824 21.6486 1.05407C21.6493 3.7219 22.9745 6.21531 25.1854 7.70839L26.1194 8.34082L25.8519 9.43704C25.1623 12.2536 26.0444 15.2231 28.1597 17.2065C30.2751 19.1898 33.2953 19.8789 36.0616 19.0095L36.9186 18.7395L37.6021 19.3233ZM17.3734 41.3189C24.0328 43.0698 31.1191 41.0994 35.9189 36.1622C39.0841 33.015 41.0367 28.8514 41.4324 24.4054C39.5365 24.1702 37.7315 23.4574 36.1865 22.3338C35.3541 22.5255 34.5027 22.6221 33.6486 22.6216C27.4338 22.6216 22.3784 17.5662 22.3784 11.3514C22.3785 10.8123 22.417 10.2739 22.4935 9.74028C20.6737 8.23592 19.3727 6.19776 18.7743 3.9138C18.9759 3.87542 19.1775 3.84001 19.3792 3.80758C19.177 3.84001 18.9754 3.87542 18.7743 3.9138C18.6889 3.58947 18.6181 3.26082 18.5619 2.92785C18.6159 3.26028 18.6867 3.58893 18.7743 3.9138C15.0368 4.6342 11.6027 6.463 8.9189 9.16218C3.98172 13.962 2.01132 21.0483 3.76218 27.7077C5.51305 34.3672 10.7139 39.568 17.3734 41.3189Z" />
			<circle cx="9.81081" cy="21.5676" r="2.67568" />
			<circle cx="20.027" cy="24.5676" r="2.83784" />
			<circle cx="31.0541" cy="28.6216" r="3.72973" />
			<circle cx="17.9189" cy="34.5406" r="1.62162" />
			<circle cx="16.2972" cy="12.6486" r="1.45946" />
			<circle cx="35.1081" cy="11.4324" r="2.18919" />
			<circle cx="33.3243" cy="2.83784" r="2.83784" />
			<circle cx="43.054" cy="15.0811" r="1.2973" />
		</svg>
	</div>
	<p>
		We use third-party cookies to personalize content, ads, and analyze site traffic.
		<a href="#">Learn more</a>
	</p>
	<div class="actions">
		<a href="javascript:;" onclick="hideCookieBanner('banner-3')">Okay</a>
	</div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Mulish:[email protected];600;700;900&display=swap');

* {
  padding: 0;
  margin: 0;
  list-style: none;
  border: none;
  text-decoration: none;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  font-family: 'Mulish', sans-serif;

  &:focus {
    outline: 0;
  }
}

body {
  background: #F7F8FC;
}

.cookie-banner {

  --color1: #10182F;
  --color2: #fff;
  --color3: #306BF3;

  box-shadow: 0 15px 45px -12px rgba(#001D93, .15);
  border-radius: 5px;
  background: var(--color2);
  opacity: 0;
  visibility: hidden;
  transform: scale(.8);
  transition: 500ms opacity, 500ms transform;

  &.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    &.position-bc, &.position-tc {
      transform: translateX(-50%) scale(1) !important;
    }
  }

  p {
    font-size: 16px;
    line-height: 25px;
    color: var(--color1);

    a {
      display: block;
      text-decoration: underline;
      color: var(--color1);
    }
  }

  &.dark {
    --color1: #fff;
    --color2: #10182F;
    --color3: #fff;
  }

  &.style1 {
    width: 410px;
    height: 196px;
    padding: 35px 35px 25px;

    .actions {
      display: flex;
      justify-content: flex-end;
      margin-top: 25px;

      a {
        height: 36px;
        display: flex;
        align-items: center;
        padding: 0 20px;
        border-radius: 5px;
        font-size: 14px;
        font-weight: bold;
        width: 132px;
        color: var(--color1);

        &.btn {
          background: var(--color1);
          color: var(--color2);
        }
      }
    }
  }

  &.style2 {
    width: 410px;
    height: 304px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 39px 40px 35px;

    .icon {
      text-align: center;
      fill: var(--color3);
    }

    p {
      text-align: center;
    }

    .actions {
      text-align: center;

      a {
        display: inline-block;
        border-radius: 5px;
        font-size: 16px;
        font-weight: bold;
        width: 110px;
        height: 50px;
        line-height: 50px;
        background: var(--color1);
        color: var(--color2);
      }
    }

    &.vertical {
      flex-direction: row;
      width: 731px;
      height: 145px;
      align-items: center;
      padding: 0 35px;
      justify-content: normal;

      .icon {
        margin-left: 5px;
        margin-right: 45px;
        text-align: center;
      }

      p {
        max-width: 330px;
        text-align: left;
      }

      .actions {
        margin-left: auto;
      }
    }
  }

  &.position {

    &-tr {
      position: fixed;
      top: 20px;
      right: 20px;
    }

    &-tl {
      position: fixed;
      top: 20px;
      left: 20px;
    }

    &-tc {
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%) scale(.8);
    }

    &-br {
      position: fixed;
      bottom: 20px;
      right: 20px;
    }

    &-bl {
      position: fixed;
      bottom: 20px;
      left: 20px;
    }

    &-bc {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%) scale(.8);
    }
  }
}
function setCookie(name, value, days) {
    var date = new Date();
    date.setDate(date.getDate() + days);
    document.cookie = name + '=' + escape(value) + '; expires=' + date.toUTCString();
    console.log('cookie ' + name + ' created');
}

function getCookie(cookieName) {
    var pattern = cookieName + '=(?<value>[0-9a-zA-Z\s]+);?';
    var regex = new RegExp(pattern);
    var result = document.cookie.match(regex);
    if (result) {
        return result.groups.value;
    }
}

function showCookieBanner(id) {
    if (!getCookie(id)) {
        document.getElementById(id).classList.add('active');
    }
}

function hideCookieBanner(id) {
    document.getElementById(id).classList.remove('active');
    setCookie(id, true, 5);
}

showCookieBanner('banner-1');
showCookieBanner('banner-2');
showCookieBanner('banner-3');