WEB | Glatos.RU

index.html

<html><head>

<link rel='stylesheet' id='wp-block-library-css'  href='style.css' type='text/css' media='all' />


</head>
<body>
<div class="content">
  Контент
  <div class="cookie">
    <p>Пользуясь сайтом, вы соглашаетесь на всю херню в соответсвии с <a href="#">политикой cookie файлов</a>.</p>
    <div class="close">X</div>
  </div>
</div>
</body>
<script src="js.js"></script>
</html>

</head>

<body>

Контент

<p>Пользуясь сайтом, вы соглашаетесь на всю херню в соответсвии с <a href="#">политикой cookie файлов</a>.</p>

</div>

</body>

</html>

js.js

const cookieEl = document.querySelector('.cookie')
const closeEl = document.querySelector('.close')
closeEl.addEventListener('click', function(e) {
	cookieEl.style.display = 'none'
})

const cookieEl = document.querySelector('.cookie')

const closeEl = document.querySelector('.close')

closeEl.addEventListener('click', function(e) {

cookieEl.style.display = 'none'

})

style.css

.content {
  position: relative;
  height: 100%;
  width: 100%;
}

.cookie {
  padding: 0 10px;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 40px;
  width: 100%;
  background-color: #1d1c28;
  color: #fff;
  font-family: Source Sans Pro,sans-serif;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.5;
  display: flex;
  align-items: center;
}

.cookie a {
  color: #329dff;
}

.close {
  cursor: pointer;
  position: absolute;
  right: 32px;
  top: 5px;
}

.content {

position: relative;

height: 100%;

width: 100%;

}

.cookie {

padding: 0 10px;

position: fixed;

bottom: 0;

left: 0;

height: 40px;

width: 100%;

background-color: #1d1c28;

color: #fff;

font-family: Source Sans Pro,sans-serif;

font-size: 1.125rem;

font-weight: 400;

line-height: 1.5;

display: flex;

align-items: center;

}

.cookie a {

color: #329dff;

}

.close {

cursor: pointer;

position: absolute;

right: 32px;

top: 5px;

}

Glatos.RU

Записки Системного администратора

Архив рубрики: WEB

Уведомление cookie внизу окна сайта