Разработка адаптивного блока

Дизайн сайтовЗакрыт3 заявки179 просмотров
Найдите исполнителя для вашего проекта прямо сейчас!
Разместите заказ на фриланс-бирже и предложения поступят уже через несколько минут.

Необходимо разработать адаптивный рекламный блок.Рекламный блок состоит из блоков-контейнеров с рекламными материалами. Каждый из контейнеров содержит изображение, заголовок и описание материала.Требования к реализации:- Блочная верстка(без таблиц!)- Использование только чистого 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 блоков)Более детально с примерами - в личной переписке 
JavascriptCSS
7 лет назад
a_shevchuk
32 годаУкраина
7 лет в сервисе
Была
7 лет назад
  • Похожие заказы

  • Необходимо нарисовать дизайн лендинга

    Тематика:  кондитерская по изготовлению тортов на заказ (свадебные, к юбилею и пр)  Сроки: до 10.09.17 г.  Стоимость: 2500 руб  Приоритет будет отдаваться фрилансерам, которые уже работали с данной тематикой.   Прикрепляйте примеры своих работ при отписке на проект.   Подробности обсудим с ...

    Дизайн лендинга
    Дизайн сайтов1 исполнитель
    Закрыт
    7 лет назад

  • Требуется web дизайнер в проект

    Требуется web дизайнер в проект для выполнения ряда задач и дальнейшего сотрудничества. О проекте: Проект является аналогом сервиса mahnem.ru Примеры сайтов которые нравятся по дизайну: Badoo.com VK.com Приложения: tinder badoo Задачи: Дизайн - для сайта (Адаптивный дизайн) - мобильного приложения - лендинги - оформление для групп вк

    Дизайн мобильного приложения
    Дизайн сайтов83 заявки
    Закрыт
    7 лет назад

  • Дизайн сайта туроператора

    $1500

    Нужен адаптивный дизайн сайта по прототипам. Концепция на примере главной страницы+адаптивы для нее. И всего около 20ти макетов страниц. На сайте размещается информация о странах, достопримечательностях, а также готовые туры. Основная страница, помимо главной - карточка тура. ...

    Дизайн сайта
    Дизайн сайтов46 заявок
    Закрыт
    7 лет назад

  • Требуется дизайн и верстка веб-приложения

    Требуется проработать дизайн и верстку html корпоративного веб-приложения. Весь функционал разработан, существует работающая версия, требуется сделать красиво Объём работ - 6 страниц. Срок - 1 неделя (напишите, если нужно больше и сколько). Версия для десктопов. Присылайте портфолио, исходя ...

    HTML
    Дизайн сайтов13 заявок
    Закрыт
    7 лет назад

  • Нарисовать дизайн лендинга

    $43

    Необходим дизайн лендинга (цементная плитка ручной работы). Срок до 8 сентября 19:00 МСК  [b]Прикрепляйте свое портфолио. [/b] Подробности только с кандидатами (приоритет за тем, кто работал с данной тематикой).

    Дизайн лендинга
    Дизайн сайтов24 заявки
    Закрыт
    7 лет назад

  • Дизайн сайта

    Требования к сайту. 1) Лендинг пейдж с корзиной. Пример какой должна быть корзина: http://www.carassistance.net/ 2) Сайт полностью аддаптивный. Должен правильно отображаться на всех стационарных и мобильных браузерах. 3) Все рисунки выполнены в векторной графике. 4) Картинки на главной странице анимированы. То ...

    Дизайн сайта
    Дизайн сайтов1 исполнитель
    Завершен
    7 лет назад

  • Редизайн LP

    $100

    Здравствуйте. Нужно нарисовать дизайн для LP для компании которая занимается продажей и обслуживанием лифтов, эскалаторов. любых подъемных оборудовании. Нужен дизайнер с опытом.

    Дизайн сайтов1 исполнитель
    Закрыт
    7 лет назад

  • Одну внутреннюю страницу для сайта на основе существующего дизайна

    $10

    Здравствуйте. [url=http://www.svarcka.ru/]http://www.svarcka.ru/[/url]  На данном портале идеальный каталог для нашего товара. Необходимо сделать такой же, обязательно  с двумя полями "оборудование" и "материалы" Также, строки каталога должны иметь функцию редактирования, добавления полос. В приложении архив с утвержденными страницами- страница каталога там уже ...

    Дизайн сайтов1 исполнитель
    Завершен
    7 лет назад