Александр Севиринов

Вам поможет postMessage()

1. в коде фрейма получаете размер окна (в вашем случае высоту) и передаете в сообщении postMessage() 'nb данные
   
2. в окне-приемнике (там где выводите фрейм) получаете postmessage() сообщение и прописываете в style тег фрейма полученные данные о высоте
   
3. чтобы окно было "адаптивным" нужно повесить обработчик resize в коде фрейма и в коде окна-приемника
   

Alegreya
Cormorant

https://fonts.google.com

С помощью трансформации
Первый блок "фон" его трансформируете, второй вложенный блок для текста.

Лучше конечно CSS +SVG
gif на весь экран и видео слишком громоздкие получатся.

А готовых CSS бабочек предостаточно, не думаю что потребуется заказывать на фрилансе, можно просто "подпилить" под свои нужды. Вот например отличный вариант или вот или можно взять вот эту и самому задать нужную траекторию движения.

Вариантов куча, пользуйтесь поиском

Рекомендую более актуальный материал!

<button class="addToCart" data-id="001">в массив 1</button>
<button class="addToCart" data-id="002">в массив 2</button>
<button class="addToCart" data-id="003">в массив 3</button>
<button class="addToCart" data-id="004">в массив 4</button>

var cart = {};

function addToCart(articul) {
  cart[articul] = 1;
  console.log(cart);
}

var addBtn = document.getElementsByClassName('addToCart');
[].forEach.call(addBtn, function(element) {
  element.addEventListener('click', function() {
    addToCart(this.getAttribute('data-id'));
  });
});

Используйте cookie или localStorage или sessionStorage для хранения выбранной вкладки.

Например вот так

Нужно проставить галочки в настройках

Если правильно понял, Вы хотите получить id ключа.
Тогда в массиве уберите числа 0 и 1 (из примера)
каждый объект в массиве уже будет иметь свои id
чтобы получить, например второй, используем Object.keys
console.log(Object.keys(list_items)[1]);

вот так