Увидел интересную часть макета и стало интересно, не знаю как загуглить.
Как сверстать такое, кнопки, пунктирные полоски? Возможно такое сделать адаптивным?
Раздели на три части: изображение, "пунктиры", кнопки; и создай три класса в скрипте.
Для изображения надо указать точки начала "пунктиров" и форма границ для кнопок.
"Пунктиры" берут информацию начала пути у изображения, а конец у кнопок.
Кнопки должны будут располагаться равномерно по окружности.
Пишем скрипт для всей этой красоты.
Адоптивность можно продумать в двух вариантах:
1 пунктиры пропадают, кнопки с описанием выстроены в колонку;
2 у кнопок нет описание и выстроены в ряд, описания высвечивать при клике/прикосновении.
Andrey Tsvetkov, Сейчас бы адаптировать статичное фото ))). ресайз фотографии это не адаптация )
Griboks, А если по вопросу, то вам придется сделать несколько фотографий и менять их в зависимости от размера экрана. так как данное фото с примера на мобильном устройстве сожмется и текст на ней будет не читаем.
Сергей Мурзин, я бы на мелких заменила кнопки на яркие точечки диаметром точек 20-30-40, чтобы пальцем тыкать. Либо крошечные иконки в кружках. Расположить там откуда "растут" пунктиры. По клику на них открывала бы иконку с описанием.
Порядок прост:
1. SVG для пунктиров
2. DIV-ы: 1 DIV центральный и 6 DIV для описаний
3. Относительное позиционирование 6 DIV и 6 SVG относительно центрального
4. Медиа-селекторы для создания адаптивности
Осталось сделать...
Зачем эти полоски верстать? Чтобы что?
Делать их частью картинки, текст поверх, да и всё.
Как вариант, сделать бутерброд из 2 равновеликих картинок - квадрокоптер и все полоски.
Это тот самый случай, когда мудрить нет смысла.
Простой
Простой
