ThunderCat

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

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

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">, к слову, к изображениям это тоже относится.
Для проверки в хроме в панели разработчика есть закладка ресурсов(сырцов), где все прогруженные файлы отображаются. А так же проверяем какие стили поверх каких перекрываются в инспекторе элементов, как на картинке. и смотрим что к чему там относится.

проблема в том что строк second-class может быть 1000+, из-за этого они долго разворачиваются,

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

не лучше задавать селектором? типа такого, один для начала другой для конца.

По вопросу не очень понятно что вы хотите получить, если нужно рисовать фигуры на хтмл/цсс/жс есть варианты:
1) Канвас, как уже упомянула @nata-ponchik
2) CSS стили со скруглением углов для кругов
3) SVG объекты
4) тупо вставить картинку и наложить на нее текст, если надо, как написал Froggyweb, это не всегда подходит, но как вариант..
5) Извращения типа флеш и сильверлайт (привет из 2010).

Если поломать мозг пару часов можно еще вариантов настрочить - например расположить пнг с прозрачностью в нужных местах через позиционирование и z-index.