Заказчик

Необходимо разработать адаптивный рекламный блок.Рекламный блок состоит из блоков-контейнеров с рекламными материалами. Каждый из контейнеров содержит изображение, заголовок и описание материала.Требования к реализации:- Блочная верстка(без таблиц!)- Использование только чистого JS без сторонних библиотек- Количество изображений в блоке может быть произвольным, но это всегда прямоугольная матрица X на Y.- Размер текста 10-20 пикселей- Изображение может располагаться в следующих местах относительно другого контента:

- слева от текста

- справа от текста

- над заголовком

- между заголовком и текстом

- под текстом

- Предусмотреть корректную работу верстки, с учетом того, что исходные размеры картинки, заголовка и описания могут находиться в следующих границах:- заголовок – 10-30 пикселей – описание – 10-30 пикселей – изображение – от 100x100 до 400x400 пикселей. Также, изображение может быть прямоугольным(например, 492 на 328 пикселей).- При уменьшении ширины экрана, рекламный блок сужается. При этом уменьшается картинка. Размер текста и шрифта может уменьшаться при необходимости, но становиться не менее 10 пикс.- Минимальная ширина одного материала: 120 пикс, в случае размещения текста над/под изображением. В случае, если текст слева/справа от изображения, то минимальная ширина 150 пикс.- Минимальный размер изображения при масштабировании – 100x100. В случае прямоугольного изображения – 100 пикселей на более узкую сторону, вторую сторону пропорционально.- Если ширина экрана меньше, чем (120 пикс. * кол-во материалов), блок нужно перестраивать. Если в блоке четное число материалов, то блок перестаивается таким образом, что в ширину в нем становится 2 материала. Если в блоке нечетное число материалов, то блок перестраивается таким образом, что в ширину в нем становится 1 материал. Общее количество материалов в блоке при этом должно сохраняться.- Вертикальное расстояние между материалами должно равняться горизонтальному.- Предусмотреть вариант блока без изображений. Только заголовок и текст. Остальные требования аналогичные.Рекомендации по тестирование блока:

В стилях задается размер изображения в диапазоне, указанном в условиях выше. Изменяется размер экрана, чтобы проверить корректность уменьшения элементов(либо перестроение, если не помещаются в рабочую область)

Изменяется стиль вывода текста, относительно изображения. Текст слева/справа/сверху/снизу. Точно также изменяется размер экрана, чтобы проверить корректность работы.

Пример частично работающего блока есть в архиве.Чего нехватает в примере:

Уменьшение блока с переносом элементов происходит корректно. Но после увеличения, размеры элементов не возвращаются в исходные значения.

Если убрать класс material-wrap-horizontal(текст относительно изображения снизу), то само изображение не центрировано относительно краев контейнера.

Результатом работы считается:5 отдельных рекламных контейнеров(на одной странице), один под одним. В каждом 4x1 материалов. Размеры изображений в блоках – 100x100, 300x300, 180x120, 260x170, 370x200. У каждого из блоков различное положение изображения, относительно текста – слева, справа, над заголовком, под текстом, между заголовком и текстом. Исходные размеры текста тоже различные – 10, 14, 16, 18, 20 пикселей.При уменьшении размеров страницы все блоки должны уменьшаться и перестраиваться, согласно условий, описанных выше. JS/CSS код этой анимации должен быть универсальным(не 5 разных решений под 5 блоков)Более детально с примерами – в личной переписке