profesor08

$arr = array(1, 2, 3, 4);
foreach ($arr as &$value) {
    $value = $value * 2;
}

echo "end";

.row
  .col-6
    .row
      .col-12
      .col-12
      .col-12
      .col-12
  .col-6

Вот тебе структура. Внутрь .col пихай блоки с контентом.

Дело в том, что в dev окружении у тебя сначала отрисовывается страница, потом, через js, подгружаются стили. Удали transition, потом на js добавь еще класс, где будет указан transition.

Если центрировать иконку при помощи position, top, left, transform, то часто будет получаться мыло. Поэтому лучше использовать что-то другое. Можно на флексах как в примере ниже, если размер неизвестен, можно только position, top: 50%, left: 50%, margin: -[пол высоты иконки] 0 0 -[пол ширины иконки], если размер иконки известен.

.circle {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: red;
}

.circle .icon {
  line-height: 100%;
}

Как вариант можешь стилями их раскрасить, без необходимости в js.

tr:nth-child(odd) td:nth-child(odd) {
  background: white;
}

tr:nth-child(odd) td:nth-child(even) {
  background: black;
}

tr:nth-child(even) td:nth-child(even) {
  background: white;
}

tr:nth-child(even) td:nth-child(odd) {
  background: black;
}

1. Определи какие там переменные, A, B, C и тд.
   
2. Создай такие переменные
   
3. Распарси выражение и реальзуй отдельные части выражения на js, либо просто можешь заменить операторы на аналоги из js и выполни это в eval
   
4. Для каждой вариации значений, вычисляй это выражения
   
5. Как-то выводи результаты, или в консоль, или в документ
   

let A = 1;
let B = 0;
let C = 1;

console.log(eval("A&B|(!C)"));

.icon-cctv:before {
  content: "\e800";
}

Можно сделать слайдет, но без свайпа. Тебе понадобится кружкам задать ссылку с хешем, а активному слайду задать стили для :target и задать id. Каждый id соответствует хешу ссылки кружочка. Тем самым при клике на ссылку, в адрес страницы добавиться хеш из ссылки, элемент, у которого id такой-же как хеш в адресе страницы, будет задано состояние :target. Так и манипулируй слайдами, у которых не активно это состояние, те скрывай.

Если же хочешь использовать и свайпы, то тебе придется подключить какой-то слайдер на js, гуглится за 3 секунды.

Разве не гуглится: https://developer.mozilla.org/en-US/docs/Web/API/W... ?
Полный гайд, навигация слева.