ThunderCat

гуглить:
1) формула полуокружности с заданным радиусом или синуса(и с коэффициентом например умножать)
2) кружочки - див с позишн абсолют и бордер радиусом соответствующего размера.
3) инфо - стандартный title думаю подойдет

На хостинге выключен вывод ошибок в браузер, соответственно ошибки есть, но в браузер они не выводятся.
1) логи.
2) на этапе настройки ерор репортинг включить (E_ALL), вывод ошибок включить. Можно просто в индексе первыми строчками прописать

ini_set('error_reporting', E_ALL);
ini_set('display_errors', 1);

3) На локальном сервере тоже не мешает включить отображение варнингов и ошибок, если не включено. Это помогает избежать многих проблем при переносе на хостинг.

Правильный путь: делаем роутинг с языковым параметром, site/ru и site/en например, (по уму пишете небольшой модуль "языки", хранящий настройки языка в базе). Это помогает поисковикам понять на каком языке конкретная версия сайта, с куками и сессиями будет бардак в индексации, язык надо четко прописывать в урл.
По роуту подгружаете языковой файл с используемыми на сайте В ДИЗАЙНЕ фразами. Контент(статьи, товары и тд) пишете в базе с ключом языка и группы, группа - это один товар на нескольких языках, по идентификатору языка уже делаете выборку для вывода.
Плюшки и фенечки по вкусу(например переводы фраз тоже в базу засунуть).

вроде это на жс, не на пхп... и вообще бутстрап вроде готовый, просто вы его готовить не умеете.
Читайте поваренную книгу

прям фестиваль какой-то )

UPD: Я решил вопрос вот так, возможно вам тоже подойдет такое решение.

Как правильно обрезать фото

фото резать в фотошопе, на css еще не придумали нейронных сетей распознающих значимые участки фото.

и как быть с вертикальными изображениями?

Либо так же как с горизонтальными - резать значимую часть в фотошопе под нужный формат, жертвуя деталями, либо как делают с вертикальным видео - добавляют некоторый абстрактный фон/размытый дубль изображения, кароче художественные песни и пляски, либо, если блог хоть как-то обслуживается, заранее делать фото для блога в нужной ориентации. Пока ничего другого человеческий гений не придумал.

ну, начнем с того что форм у вас не 3, а 1.
Кнопки в форме 3, хотя достаточно одной, в конце формы(или в любом другом месте внутри тега формы).
Как у вас работает аякс - загадка, ибо кода вы не привели, а то что здесь нарисовано работать нормально не должно, так как:
1) id - уникальный идентификатор элемента, что как бэ намекает на то что повторяться для нескольких элементов он не должен.
2) форма отправленная в текущем виде на сервере будет просто передавать на сервер 3 последних значения из всего набора инпутов, тк сервер примет строку в которой будут повторяющиеся имена переменных - соответственно последние полученные данные затрут предыдущие. Это можно побороть яваскриптом, который будет реализовать анальный костыль, например считывая 3 инпута перед вызывающей кнопкой. Если вы знаете толк в извращениях - флаг в руки.
3) так как все 3 имени инпутов в группах совпадают - какой смысл их различать? как угадать из какого я отправляю данные?
4) если нужно 3 раза вызвать обработчик на сервере - 3 раза вызывайте аякс запрос, каждый раз передавая последующие 3 значения из инпутов, не забывайте, что аякс - асинхронная функция, запуск следующего запроса лучше всего вешать на onsuccess предыдущего запроса. Измените ид для каждого элемента на уникальный, или уберите вообще. Проще всего сделать все инпуты одной группы с одинаковым классом, по нему и выбирать группу, например $('.firstinputs')

ctrl+f
или на jq:

$('#search').on('keyup',function(e){
    var searchStr = $(this).val();
    var list = $(".классСторкиКаталога:contains('"+searchStr+"')" );//тут будут все элементы с заданным текстом
    doSomeStuff();
})

$(document).ready(function () {
setTimeout(function() {
  $("#form1").magnificPopup.close();
}, 1000);
}

И отображается нормально. Но если пробую сделать стиль у блока
background: url('/crops/a7305823253abf7706a');

надеюсь вы понимаете, что css файлы не исполняют код пхп, если вы туда что-либо и пропишете. Данный ключ /crops/a7305823253abf7706a читает временную картинку заданного в параметрах скрипта размера, его создает скрипт, просто прописав его вы не получите результат выполнения скрипта и данный путь будет пустым. Выхода 2, оба не идеальны, но в вашем случае есть необходимость в костылях, я так понимаю используется как фон картинка из большого массива данных (типа аватарок или чего-то подобного).
- Первый вариант - подключать css через методы пхп(инклуд, реквайр или как кусок шаблона), тогда вставленный код будет работать как надо, причем весь цсс так подключать не нужно, только кусок где у вас такие хитропопые бэкграунды используются.
- Второй вариант - как написал Максим Шимко - в нужных местах шаблона заменить на инлайн стили с прописанным бэкграундом скриптом.

для начала - var data = 10; и проверяйте если доходит значение. код пхп тоже не помешает, а то гадание на логах без кода не работает.
UPD: визуально в коде нет ошибок, что конкретно нарушает работу скрипта сказать сложно. Как вы получаете, кстати, вардамп, аяксом то? в ошибке парсинга нетворк консоли? Попробуйте $_REQUEST задампить, чет ниче особо больше пока не приходит в голову, кроме неочевидных багов, настроек сервера и неверных путей.

ну, если вы передаете секретные данные ИЗ ЯВАСКРИПТА, то они будут видны в коде независимо от того будете вы что-либо передавать каким либо способом или нет. Вы задачу опишите поконкретнее, а то явно что-то не туда вас понесло.

очень просто проверить - в первой строке скриптового файла пришешь alert(1);

С файлом все в порядке - он на месте, и путь прописан правильно (все-таки не первый день "замужем)))" )

А насчет путей - я бы не был так категоричен, пропиши пути от корня сайта(если это сайт, на что как бэ намекает тег пхп), то есть если в структуре сайта скрипты лежат в корне в папке js, то путь будет "/js/somescript.js", ибо магии не бывает.
Консоль проверь, неподключенные ресурсы в ней идут с ошибками.

А на кодепене не оно? Вроде работает же? Или я не так понял...

итак, наверно что-то не так в датском королевстве, потому как стили браузера являются наименее приоритетными в любом случае. Варианта всего 2:
1) Не подгружаются стили, соответственно отрабатывается что есть, а есть у нас инлайн и браузер стили.
2) Стили подгружаются, но свойства для элементов прописаны неверно, или не для тех классов.
Как проверить в чем проблема?
Во первых, проверить загружены ли файлы стилей, такая форма записи как у вас подразумевает что файл стиля лежит в той же папке что и хтмл файл. Правильной практикой является указывать путь от корня сайта, например <link rel="stylesheet" href="/css/style.css">, к слову, к изображениям это тоже относится.
Для проверки в хроме в панели разработчика есть закладка ресурсов(сырцов), где все прогруженные файлы отображаются. А так же проверяем какие стили поверх каких перекрываются в инспекторе элементов, как на картинке. и смотрим что к чему там относится.