Необходимо сверстать одну web страницу с использованием языка разметки HTML не выше 4.01 и также CSS не выше 2.1.
Страница не должна содержать какие либо Framework.
Главные условия: адаптивность под разные разрешения экранов + корректное открытие через кастомные браузеры как captive portal + обычные браузеры так же. Страница должна умещаться в один фрейм (нужно попробовать по возможности избежать появления скрола)
Элементы страницы:
1 – Логотип. Логотип является загружаемой картинкой и не является обязательным элементом страницы, то есть его может и не быть.
Размер логотипа если есть варьируется от X до X1 по ширине и от Y до Y1 по высоте. Необходимо определить максимально допустимые значения (X,X1 и Y,Y1) так что бы страница везде корректно отображалась.
2 – Заголовок. Определить и задать максимально возможное кол-во символов.
3 – Параграф. Определить и задать максимально возможное кол-во символов.
4 – Иконки социальных сетей. Всего 4 – Вконтакте, Фейсбук, Инстаграм, Твиттер. Под иконки будут подкладываться ссылки. Иконки берите из любого фришного пака. Главное в стиле Flat. Пример во вложении.
Иконки не являются постоянным элементом страницы, при определенных условиях они могут отсутствовать. Соответственно при их отсутствии остальные элементы плыть не должны.
5 – Текст: "Используйте для входа ваш номер"
6 – Форма ввода номера и кнопка "получить код". Не является постоянным элементом.
7 – Форма ввода кода. Появляется после отправки номера телефона. Не является постоянным элементом.
8 – Пункт принятия условий пользования сервисом. При любых других значениях выше описанных переменных, этот элемент является постоянным и только он активен при загрузке страницы в браузер пользователя. Суть – обычная галочка "принять условия", ссылка на эти условия. Если галочка не установлена то остальные элементы на странице не активны (Нельзя нажать на иконки соц сетей, нельзя ввести номер телефона.
9 – Рандомный текст, по ним рандомная ссылка.
Пример страницы и примерный макет элементов во вложении.
Почему HTML4? – Это не обязательное условие. Если вы знаете как сделать страницу иначе и таким образом чтобы она открывалась как captive portal то можно использовать и другие версии выше.