Виктор Кожухарь

Метод называется checkbox hack.
Мы на самом деле используем checkbox и его превосходное свойство работать даже при нажатии на метку, которая с ним ассоциирована. Таким образом мы скрываем сам нативный checkbox, а его метку стилизуем так, как нам надо, хоть в виде кнопки, хоть в виде чего угодно. И вместо :active у кнопки проверяем :checked у чекбокса
https://css-tricks.com/the-checkbox-hack/

А вот ещё набор идей
https://codepen.io/
В поиске наберите "toggle-switch"

И вот что-то похожее на ваш случай

Вопрос в том, насколько вы задолбались копипастить и как часто вы меняете дизайн и структуру вашего сайта. Если просто делать всё индивидуальными страничками, то поменять дизайн, даже если изменения совсем небольшие, будет болью в одном месте. Поэтому, что-то бэкендо-подобное вам надо будет изучать. Это вам не повредит, поверьте. React сейчас полным ходом несётся в сторону рендеринга на сервере, поэтому вам придётся это учить.

Итого, есть три пути:

1. Беспроигрышный. Это Wordpress. Берете, делаете, все счастливы. Туториалов миллиарды, плагинов ещё больше, всё будет зашибись. Проблема одна: если надо будет тонко настраивать, то надо будет хоть немного изучить PHP.

2. Когда надо быстро что-то добавить, даже с мобилы или с компьютера девушки, и чтобы оно сразу отобразилось на сайте, то либо смотрим в сторону п.1, либо если не хотите изучать PHP, выбираете себе CMS на базе Javascript. Есть даже так называемые headless cms, которые генерируют вам только JSON, а вы у себя на фронтенде сами его обрабатываете и рисуете всё на основе полученных данных.

Это самый сложный вариант из трёх

Вот список некоторых из таких CMS
https://jamstack.org/headless-cms/

3. Если вам не нужна молниеносная публикация новых материалов, и вы можете потерпеть до доступа к рабочему ноуту, то можно выбрать генератор статических сайтов.

Сразу посоветую вам Astro https://astro.build/

Прелесть Astro в том, что новый контент вы можете писать в Markdown. Это такой простейший язык разметки текстовых документов. Вы сможете его выучить за час, не больше. Там всё настолько интуитивно и просто, что больше времени вам не понадобится. При этом формат мощный, убедиться в этом можно, посмотрев почти любой репозиторий на Гитхабе. Практически каждый из них имеет файл README.MD, где как раз всё написано в Markdown (MD)

В Astro вам надо будет создать несколько шаблонов astro (html). Шаблон хедера, футера, сайдбара, основного контента, разных типов страниц (статья, список статей, и т.д.). И в этих шаблонах будет указано, где нужно выводить сгенерированный из Markdown контент. И далее новые странички вы будете добавлять путём добавления в соответствующие папки файликов с Markdown разметкой. Это очень просто, быстро и не напряжно.

После добавления этих файликов вы запустите генерацию сайта, и Astro сгенерирует вам кучу готовых html страничек, которые вы просто зальёте на сервак. Профит!

Берите youtube, набирайте там "Astro markdown", и изучайте туториалы. Процесс всего этого чрезвычайно прост, вы много времени не потеряете, зато сэкономите себе массу времени на создании новых материалов на сайте

Можете посмотреть и другие генераторы статических сайтов тут https://jamstack.org/generators/

Это может быть оверкилл, но попробуйте библиотеку joint.js, которая помогает создавать подобные диаграммы.
Она создаёт интерактивные диаграммы, но если там есть возможность их зафиксировать, то вы сможете быстро сделать ту самую адаптивную диаграмму, что вам нужна.

https://github.com/clientIO/joint

Примеры:
https://codepen.io/jointjs

В обычном CSS у нас марджины не ограничиваются границами родителя, они как-бы проникают сквозь его границы. Это очень толковое решение, но не всегда оно нам полезно. Как с этим бороться? Нам надо "обмануть" движок, и дать ему знать, что после последнего дочернего элемента у нас есть ещё какой-то контент, и чтобы марджин нашего последнего дочернего элемента не вылазил наружу, а "спотыкался" об этот невидимый контент.

Добавляем в начало и в конец родительского блока невидимый контент нулевой высоты при помощи ::after и ::before. При этом идеальным значением свойства display этого невидимого контента будет table, т.к. оно работает именно так, как нам надо, а именно, имеет нулевую высоту по умолчанию.



Если же, вдруг, вас по каким-то причинам не устраивает этот псевдо-контент внутри блока, то подобного поведения можно добиться при помощи обычного свойства overflow со значением hidden. (Однако при этом мы лишаемся некоторых других возможностей, потому что всё, что находится внутри этого блока, но должно выходить за его границы, будет скрываться.)



Ну, и на самый крайний случай, если уж и предыдущие два не устроят, то старый добрый float: left; никто не отменял ))))



Ну и, наконец, модерновое супер-дупер решение на флексах. Однако тут нам придётся "городить" стили для внешнего контейнера, который содержит ваши блоки внутри себя. Мне кажется, что это введение ненужных лишних сущностей, которые могут обернуться сюрпризом когда-нибудь потом, т.к. мы связываем намертво основной родительский контейнер с дочерними...

Вижу, что у вас это при помощи шрифта сделано.
Можете используемый шрифт скачать и посмотреть, что там внутри. fa - это скорей всего font awesome.
f263: https://fontawesome.com/v4/icon/odnoklassniki
f189: https://fontawesome.com/v4/icon/vk

Вы можете также:
- Найти другой шрифт, в утром есть все нужные вам иконки
- Сделать такой шрифт самостоятельно. Это не так сложно. Вы просто находите SVG изображения социальных сетей, а потом на каком-то сервисе типа https://icomoon.io/, https://fontello.com/ (тут, похоже, уже есть нужные иконки) генерируете из этих иконок кастомный шрифт. И в CSS там где нужно показать иконку, указываете этот шрифт.

Гугл быстро дал ответ)
https://stackoverflow.com/questions/72037432/css-p...

Вот идея кастомного чекбокса на CSS без всякого JS.
https://codepen.io/vitiok78/pen/pmbyzE