Html5+css3 верстка

Алексей12 лет в сервисе
Данные заказчика будут вам доступны после подачи заявки
25.01.2014

Приветствую.

Нужна html5+css3 верстка, которая позволит хорошо смотреть страничку, как на маленьких, так и на больших мониторах.

В psd макете по сути 3 основных элемента:

1) Логотип

2) Изображение по центру с текстом в круге

3) Футер

Необходимо:

+ чтобы изображение по центру центровалось в зависимости от экрана монитора

+ логотип всегда должен быть вверху слева при ширине рабочей зоны 1024px

+футер должен быть внизу слева, но таким образом, чтобы он никогда не попадал в зону видимости юзера, т.е. не был виден без прокрутки т.к. информация там в общем не самая нужная. Футер всегда ниже зоны видимости нужен, чтобы юзер не отвлекался от основного контента по центру.

+ как и упоминалось выше, ширина рабочей зоны 1024. Поскольку цвет фона однороден – он должен растягиваться в оба конца экрана.

Из других элементов:

Галочка рядом с текстом “согласен с политикой конфиденциальности” ставится и убирается при клике.

В поле ввода e-mail адреса центрируется надпись “введите email в это поле”. Когда копкой мыши кликаешь в это поле – ввод email адреса начинается с левого края тем же шрифтом и цветом, что и фраза “не хочу, мой e-mail”. Если e-mail длинее чем длина поля ввода, то справа около конца поля будут находится последние символы, а первые символы уйдут “внутрь” поля ввода.

Если кто-то пытается нажать кнопку под полем ввода e-mail’а без ввода самого e-mail’а текст “введите email в это поле” становится красным. Если e-mail вводится некорректно - он тоже загорается красным и нажать на кнопку ниже нельзя. Нужна проверка на правильность ввода email'а.

В фразе “согласен с политикой конфиденциальности”, “ политикой конфиденциальности ” является ссылкой, которая всегда подчеркнута. Цвет ссылки после клика не меняется.

В футере “политика конфиденциальности” также является ссылкой, но только в отличие от предыдущего варианта она должна подчеркиваться при наведении. Цвет ссылки после клика не меняется.

Что касается всего текста в круге – он должен быть именно текстом, а не картинками.

Макет для ознакомлении в прикрепленных файлах.

Заявки фрилансеров