Артур Левенсон

Или можно воспользоваться каким-нибудь плагином бэкапа, типа duplicator. Просто если в тупую скопировать файлы и поменять url в базе могут сбиться какие-нибудь сериализационные данные, например активные виджеты и т.п.

делаете каждой кнопке активный класс(css) с фоном, по клику снимаете активный класс со всех кнопок и ставите на текущей.

$(function() {
    $('.btn').on('click', function() {
        $('.btn').removeClass('down');
        $(this).addClass('down');
    });
});

Из-за !important не видите изменений.

когда нажимаю на другой блок, то цвет кнопки не становится прежним

Становится. Проявите немного терпения, вам и четырёх месяцев ждать не придётся:

transition: background 9999999s;

Правда, происходит это вовсе не по причине нажатия на другой блок - что такое псевдокласс :active вы, очевидно, не разобрались.

Cделайте скрытые радиокнопки, которые будут нажиматься через label, и стилизуйте в качестве "нажатых" элементы, расположенные после :checked.

export const copyToClipboard = function (text, onComplete) {
  if (navigator.clipboard) {
    navigator.clipboard.writeText(text)
      .then(() => {
        if (typeof onComplete === 'function') onComplete();
      })
      .catch(err => {
        console.warn('Copy fail', err);
      });
  } else {
    let area = document.createElement('textarea');
    document.body.appendChild(area);
    area.value = text;
    area.select();
    document.execCommand('copy');
    document.body.removeChild(area);
    if (typeof onComplete === 'function') onComplete();
  }
};

const element = document.querySelector('...');
copyToClipboard(element.innerText, () => {
    alert('Copied to clipboard!' + '\n' + element.innerText);
});

Это вариант с многоразовым использованием textarea


Если вам надо разово скопировать, вот вариант подчищающий за собой
(но при повторном вызове он вынужден будет заново пересоздать элемент):


Есть еще новое API navigator.clipboard.writeText, но не везде работает, и запрашивает разрешение на работу с буфером. А старый добрый execCommand('copy') запрашивает разрешение только в IE.

Возможно. flex-direction: column; здесь не нужен

Чтобы блоки переместились на новую строку, а не вжимались в одной, нужно указать свойство flex-wrap: wrap;, в данном случае для дива с классом column и так же для него указать justify-content: space-between;, если ты хочешь, чтобы они были прижаты по сторонам

Для кнопки указываешь следующие свойства:

.column button {
  width: 100%; /* растягивает на всю ширину блока .column */
  align-self: flex-end; /* прижимает к низу, дабы кнопка не растягивалась в высоту */
}

В твоем примере column-item всего 100px, они маленькие и разместятся в column в одну строку, но если прибавишь им ширины, например, в 200px или уменьшишь ширину column, то увидишь, как column-item будут перемещаться на новые строчки

Вообще, рекомендую поиграть в flexbox froggy, качнешься очень даже хорошо

можно так
или как то так, если ширина блоков имеет не фиксированную величину

https://codepen.io/rasul312312/pen/oNwNEqw   чутка переделаl твой html css
у тебя не правильно стояли слои.
я так понял у тебя должны быть планеты, теперь в зависимости от того какая планета будет выше, можешь zindex item дать через nth-child

Для движения лучше менять атрибут transform группы со зрачком.
Маской сделать видимость зрачка только внутри формы глаза.

CSS правила обычных HTML-элементов для элементов SVG не работают.

Сумел восстановить код, вам немного повезло.
Вот пример, а как сделать из него глаза - это уже сами

https://codepen.io/lastuniverse/pen/VwbNeVq


ЗЫ: Пример слегка переусложнен, но зато он включает в себя базовые обязательные моменты для анимации

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Вы используете только одно свойство display:flex и не используете свойства для стилизации такие justify-content и другие
Почитайте

Вот так, проверяй.

Скажите мне, нахрена лезть туда, где ничего не понимаешь?
Ну ты возьми книжку, почитай, изучи. Потом лезь.
Ну ладно, книжки – архаизм. Элеметанрно – почитай документацию

Кстати, по ссылке – решение вашей проблемы.

сравните

class="input-in"
и
document.querySelector(".input-it")

и будьте внимательней

class="input-in" vs. ".input-it"