Сергей delphinpro

<div class="container">
    <div class="block">
        <div class="text">
            Lorem ipsum...
        </div>
    </div>
</div>

.block {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.text {
    grid-column: 2 / 3;
}

.block {
    display: flex;
}
.text {
    width: 50%;
    margin-left: auto;
}

.text {
    margin-left: 50%;
}

window.onload = () => {

  const popUp = document.getElementById('cookiePopup');

  function showPopup() {
    popUp.classList.add('show');
    popUp.classList.remove('hide');
  }

  function hidePopup() {
    popUp.classList.add('hide');
    popUp.classList.remove('show');
  }

  document.getElementById('acceptCookie').addEventListener('click', () => {
    localStorage.setItem('cookieAccepted', '1');
    hidePopup();
  });

  if (localStorage.getItem('cookieAccepted') === '1') {
    hidePopup();
  } else {
    showPopup();
  }

};

Как сверстать такой каталог?

<a class="menu">Menu item</a>
<a class="menu">Menu item</a>
<a class="menu">Menu item</a>
<a class="menu">Menu item</a>
<a class="menu">Menu item</a>

.menu {
  transform: translateX(-100%);
  opacity: 0;
  transition: all 0.5s ease;
}

.menu.ready {
  transform: translateX(0);
  opacity: 1;
}

const delay = 300;
[...document.querySelectorAll('.menu')].reverse().forEach((menu, index) => {
    setTimeout(() => {
        menu.classList.add('ready');
    }, delay * (index + 1))
});

я понимаю, что как в примере я не перебью стили,

.f2{
    position: absolute;
    right: 0;
    top: 0;
    animation: blink2 6s linear infinite;
}
@media screen and (max-width: 1200px) {
    .f2 {
        display: none; /* скрыть блок полностью */
        animation: none; /* или только убрать анимацию */
    }
}

ul {
  text-align: center;
  list-style-position: inside;
}

.circle, .circle::before {
  width: 300px;
  height: 300px;
  border-radius: 100%;
}
.circle {
  background: red;
  position: relative;
}

.circle::before {
  content: '';
  position: absolute;
  left: 30px;
  top: -30px;
  backgroud: blue;
}