Html блок с классам Bootstrap 4, разный вид на мобилке и десктопе

1 000 руб. за проект
27 сентября 2023, 17:55 • 10 откликов • 74 просмотра
Нужно решение для посадочной страницы, когда в мобильном виде первый экран содержит 100% высоты изображения на заднем фоне, заголовок h1, кнопку записи и текст. На десктопе, изображение занимает левую половину экрана и 90% высоты экрана, а заголовок, кнопка и текст располагаются в правой.
(смотри приложенный скрин)
Нюансы:
сайт на Bootstrap 4, html должен быть с его классами. WordPress, код будет вставляться прямо в страницу;
нельзя портить SEO, то есть h1 тег должен быть один и тот же на мобилке и в десктопе, нельзя иметь 2 разных h1, один прятать, второй показывать;
таких посадочных страниц много, шаблон один, но изображения и тексты будут разные. Шрифт в мобильном видео не может быть цветным, только белым (иначе его не видно на фоне изображения), а в десктопе этот шрифт не может быть белым, иначе его плохо видно на белом фоне в десктопной версии в правой половине экрана.
Пример страницы, где будет стоять такой блок. Вариант решения можно обсудить.
Файлы