Адаптивная верстка (натяжка на WordPress? )
3923 UAHТребуется сверстать приложенный дизайн.
ВНИМАНИЕ: В ДАЛЬНЕЙШЕМ ТРЕБУЕТСЯ НАТЯНУТЬ ВЕРСТКУ НА ВОРДПРЕСС, ПОЭТОМУ ИСПОЛНИТЕЛИ, КОТОРЫЕ В СОСТОЯНИИ ПРЕДЛОЖИТЬ ОБЕ УСЛУГИ СРАЗУ, БУДУТ ИМЕТЬ ПРИОРИТЕТ!
ТЗ ВЕРСТКА:
1. Верстка "резиновая" и трехступенчатая, версия для ПК применяется для ширины экрана 992 и выше, версия для планшета применяется для разрешения 991 и ниже до 768, версия для телефона: 767 и ниже
2. Тело сайта всегда занимает 100% ширины экрана.
3. Версия для ПК структурно состоит из четырех столбцов, каждый по 25% ширины окна браузера, для планшета из 2-х по 50% и для смартфона из 1-го.
4. Хедер сайта (белая полоса с меню) всегда виден вверху окна браузера в версии для ПК и планшета.
5. Сайт состоит из прямоугольных "окошек", для удобства объяснения будет использован также термин "блок", который обозначает пространство равное группе из 12-ти базовых окошек, 4 в ширину и 3 в высоту. На главной странице у нас два блока: первый - это слайдер, второй - это ряд из 4-х квадратов, карта, и все, что слева от карты. На странице второго типа 1 блок из трех строк. На странице четвертого типа 2 блока, первый: галерея и карта с названием, второй: описание, форма заказа и список привилегий. На пятой, наверное, понятно и без объяснений.
6. Слайдер. Присутствует только на главной странице и только в версии для ПК и планшетов. Состоит из меню, которое находится в левой четверти на фоне черно-белого снимка и собственно слайдера, на котором название раздела и кружочки-индикаторы слайдов. Соответствующий раздел меню при этом подчеркнут. Прокрутка слайдера происходит автоматически. При переходе, следующий слайд едет сверху, сдвигая нижний, одновременно с ним двигается вниз подчеркивание под пунктом меню слева. Индикатор слайда меняется на следующий. Очень желательно, чтобы для эффектов использовался CSS3.
7. Окошки - при наведении на окошко из центра до его краев разъезжается белая рамка (пример такого эффекта здесь: http://www.relaisblu.com/ ). При этом все, что внутри рамки немного затемняет фото, чтобы текст лучше читался. Название окошка съезжает чуть вверх, в нижней половине окошка появляется кнопка.
8. В формах текст полей должен пропадать когда курсор находится в поле и появляться опять, если поле осталось не заполнено.
9. Соотношение сторон базового окошка 4:3 вне зависимоти от размеров экрана, таким образом соотношение сторон блока 16:9.
10. Высота слайдера такова, чтобы при загрузке сайта в горизонтально ориентированном окне браузера идеально помещалось верхнее меню и слайдер.
11. В галерее (страница четвертого типа) миниатюры должны быть такие же по пропорциям, как и окошки 4:3, не так, как сейчас в дизайне.
12. На страницах четвертого и пятого типа фотографии, занимающие 1 окошко должны быть черно-белые. Имеется ввиду, что грузить пользователь будет обычные цветные снимки, нужно, если это возможно, наложить на эти окошки эффект, чтобы фото отображались в монохроме.
13. на странице пятого типа в версии для телефона, от коллажа остаются только три удлиненных элемента, каждый в соотношении 12:3.
14. Шрифты из гугл-библиотеки: Roboto: latin, latin-ext, cyrillic и font awesome для иконок соцсетей.
15. Нажатие на номер телефона приводит к совершению звонка, а на адрес - к открытию почтовой программы.
ТЗ ПО ВОРДПРЕССУ в личку или в следующем проекте.
Добавлю, что требуется, разумеется, закоментить весь код, желательно на английском. Чистый код, сайт должен функционировать без ошибок в основных браузерах: Chrome, Firefox, Opera, IE8+, Safari, в их версиях для Windows, Linux, Android, iOS, macOS.
Додатки 19