Верстка + WP для сайта

Редизайн и доработка сайта cadinstructor.org

Сайт реализован на bootstrap и WP.

ТЗ в нормальном виде прикреплено отдельным файлом!!!!!!!!!!!

В ответах, пожалуйста, указывайте – стоимость и сколько потребуется времени.

Верстка

Общие требования к теме

В файле CI-elements.psd собраны все элементы, встречающиеся на сайте - верстать нужно по этому файлу. Также есть отедльные файлы для каждого раздела - чтобы представлять что будет на отдельных страницах.

Макеты: https://www.dropbox.com/sh/qqsbqq2zczhqyw8/AADQ5bD7TLHNGZIFePQQSlnEa?dl=0

По возможности отключить фреймворк bootflat, на основе которого были сделаны некоторые элементы. Я его указывал, для возможно ускорения описания стилей. Нужен только bootsrtap для адаптивности сайта.

Прилепить футер книзу экрана, когда на страницы мало контента, чтобы не было так:

Везде вертикальные отступы по бокам на листе - 40 px

Насколько сложно сделать корректное отображение знака рубля на всех устройствах и браузерах (как на сайте мегафона, например). В сети не нашел однозначного ответа. Пробовал ставить разные символы из юникода: в одном месте работает, на другом не отображает.

Можно реализовать как тут: http://artgorbunov.ru/bb/soviet/20120223/

Силь основного текста - Arial, justify last left, цвет 434a54, отступ после абзаца=line-height.

Весь остальной текст - все заголовки, подписи к кнопкам и бэйджам - шрифт Roboto.

Стиль ссылкок - синие (3bafda) без подчеркивания; при наведении ярче (85d7f5); уже открывавшиеся - чуть темнее (297b99)

ВАЖНО, т.к. в макетах правило не везде соблюдено.

H1 - широкая синяя плашка, Roboto 38px (исключение главная страницы - только там 30px); Вертикальный отступ: сверху нулевой (там задает отступ блок с хлебными крошками; исключение - главная страница), снизу 25 px.

H2 - плашка по ширине меньше, текст Roboto 28px, рядом всегда есть иконка, выравнивание текста с пиктограммой по середине. Вертикальные отступы: сверху 35px, снизу 25px; соответственно у всех блоков контента разделов - должны быть нулевые отступы по вертикали. (либо делать их с учетом общего растояния между блоками).

Хлебные крошки. Вертикальные отступы по 15px. Шрифт Roboto.

Основное меню: двухуровневое. Не у всех разделов будет подменю. при нажатии на логотип - переход на главную страницу.

Футер. Шрифт везде Roboto. При наведени цвет текста меняется на белый. Там где есть иконки - тоже становятся белыми. Иконки соцсетей - становятся ярче при наведении.

Шэринг. https://tech.yandex.ru/share/

В файле CI-elements.psd собраны все элементы, встречающиеся на сайте. Эффекты отмечены красным цветом.

Описание идет в порядке представления элементов, также указан раздел и файл - где можно посмотреть соотвествующую страницу целиком.

Главная страница (CI-main.psd)

Первый блок

Главная картинка меняется (неуправляемое пользователем слайдшоу) с эффектом затемнения (фэйд-ин - фейд-аут). Обращаю внимание, что картинка под заголовком, картинка еще проявляется в расстояние между меню и основным заголовком.

При наведении на иконку или подпись - подсветка; ссылка на раздел.

Курсы:

Обращаю внимание на заголовок - там сверху белая полоса 1 пкс, для отделения от картинки.

При наведении появлется тень и плавное смещение блока вверх на 5px, при отводе курсора - возвращается на место.

Расстояние между блоками 13px. Шрифт блока - Roboto.

Преподаватель - две колонки.

Кнонка подробнее - при наведении инвертирует цвета, шрифт Roboto. В макете показано.

Корпоративные клиенты.

При нажании на логотип - стрелка отзыва смещается на середину нажатого логотипа и появляется соответствующее содержание.

При нажании на кнопку “Посмотреть отзыв” - экран затемняется и на полный экран появляется скан отзыва (lightbox).

Новости - последняя новость, т.е. первый блок из страницы списка новостей. Подробное описание в описании макета Новости.

Контакты - тень как сейчас на сайте + плавное смещение вверх при наведении на 5px и возвращение обратно при отводе курсора.

Страница список курсов (CI-courses.psd папка All Courses)

При навдении курсора на блок- появляется тень (включен эффект на первом блоке)

Расстояние между блоками 25px

Красная кнопка - при наведении становится ярче; при нажатии - меняет градус градиента немного смещается. Показано на первой кнопке. Все красные кнопки этого единого стиля.

Зеленые лэйблы в блоке строятся от левой части, соблюдая одинаковые промежутки.

Страница курса автокад (CI-courses.psd папка Autocad)

Стоимость и формы обучения:

Анимация свертывания/развертывания списка. Список открыт только один, при нажатии на другой - предыдущий сворачивается.

При наведении - цвет блока становится светлее (#ebeff2) (показано на первом)

Кнопка купить постоянно показывается только на выбранной-развернутой форме обучения. Остальные кнопки показываются только при наведении на соотвествующий блок!

Стрелка после иконки офрмы обучения - меняет направление и цвет, если блок раскрыт.

Слово скидка - тот же зеленый лейбл как и в курсах.

ВАЖНО! Сделать возможность давать ссылку на страницу, с определенным развернутым блоком (через # или другим способом)

Программа курса

При наведении на картинку в описании (ширина картинки всегда 320 px, высота меняется) - меняется на вторую. Обводка картинки 1 пкс.

Блок по высоте выстраивается от высоты картинки соблюдая отступы (18 px горизонталь, 20 px вертикаль)

Ссылка в блоке оформляется с питктограммой и рядом зеленой плашкой

Результат обучения

Список с пиктограммами вместо стандартных маркеров.

Слайдер с лайтбоксом - навигация по стрелкам, при клике на картинку - увеличение на весь экран. Внизу точки - показывают текующую позицию и общее кол-во картинок.

Дизайн желательно соблюдать, но не критично; возможно использование плагина. Главное чтобы не тормозил.

Отзывы учеников

юзерпики - дальний слой; след слой - рамка. (чтобы каждый юзерпик не вырезать кружком)

Дополнительные материалы - кнопки при наведени инвертируют цвета (показано на первой кнопке).

Лэндинг курса (CI-courses.psd папка Landing)

При нажатии на заголовок блока “Индивидуально” - не происходит свертывания.

При нажатии на кнопку - подробнее о курсе - переход на страницу курса с определенным развернутым блоком.

Цены (CI-prices.psd)

Таблица:

Наименование курса - ссылка на страницы описания курса

Все цены - ссылки стандартного оформления. При наведении на цену - цвет шрифта меняется на красный, кегель 18 и всплываюшая подсказка “заказать”. При клике - всплывающее окно с формой заказа курса.

Отдельный стиль для скидки - чтобы можно было указать две цены и появлялся зеленый лейбл.

Всплывающее окно заказа (папка Write_01):

Экран затемняется. При клике вне области формы - форма закрывается.

При нажатия кнопки заказать обучение - появляется сообщение “Заявка успешно отправлена” (папка Write_02)

Начертательная геометрия. Главная (CI-uchebnik NG.psd папка Main):

Зеленая плашка с шапкой - отдельный элемент; будет много где дублироваться с разным текстом; в тексте будут ссылки на страницы - нужен отедльный стиль для белого текста.

Структура комплекса (содержание) - первая строка-описание не выделяется при наведении, шрифт 12.

Начертательная геометрия. Лекция (CI-uchebnik NG.psd папка lection):

Блок - Связанные материалы - ссылки на другие разделы учебника:

Как меню, будет состоять из четырех пунктов (строк меню). Подменю - максимально из трех строк!

Основное меню - прямоугольник блока при наведении меняет цвет 3d4040; подменю - при наведени меняет цвет на 3bafda.

Каждая статья должна быть в тэге article, позволяет делать свои заголовки

h2 - без плашки, вертикальное расстояние после - такое же как у основного текста

Отдельно прописать стили для статейных страниц:

Подпись рисунка: шрифт 12, вертикальный отступ после подписи в 2 раза больше основного текста.

Понятия; слова “таблица”, “рисунок” - полужирным.

Переменные - полужирный, цвет 37bc9b

Интерактивная модель синяя обводка объекта и стиль сверху подпись. Сам объект: https://tube.geogebra.org/material/iframe/id/NYJfKjNu/width/800/height/430/border/888888/rc/false/ai/false/sdz/false/smb/false/stb/false/stbh/true/ld/false/sri/false/at/auto

Формы обучения. Главная (CI-forms.psd папка Forms)

Комментрировать нечего.

Формы обучения. Онлайн курс (CI-forms.psd папка Online)

Комментировать нечего. Состоит из элементов, которые описаны выше.

Компьютерная графика. Уроки по Solidworks (CI-uchebnik CG.psd папка solidworks):

Высота картинки-заставки - 195 px.

Блок из содержания такой же как и в описании курса Автокад.

Контакты (CI-contacts.psd)

Комментрировать нечего.

Новости (CI-news.psd)

Список новостей (CI-news.psd папка list)

Раздел новостии - статейный раздел WP, т.е. чтобы можно было писать новости из админки.

Все текстовые стили - как в разделе учебники (H2 - здесь нужна ссылка)

Заголовок - H2 ссылка на соответсвующую новость. Под заголовком - дата, бейджы-теги.

Анонс статьи - слева картинка шириной 350 px, обводка картинки 1px (d9d9d9)

Пагинация тоже самое что в учебниках - на страницу выводить по 5 новостей.

Новость (CI-news.psd папка new)

Все тоже самое что и в анонесе. Кнопка - сслыка на страницы списка новостей.

Задачи Wordpress

Создать все страницы, которые есть на макете с работающим меню и футером. На страницу не нужно добавлять все сверстанные блоки по макету. Нужно дабавить лишь те, у котороых есть интеракитив и логика (например, на странице курс Автокад - блок формы обучения и цены - есть анимация и при нажатии кнопки купить вылетает форма заказа); такой элемент нужно добавить один раз - чтобы по образу я мог сделать другие.

Переменные для цен. Возможно ли завести переменные для цен, а данные заносить через админку? (http://wp-kama.ru/id_740/blok-proizvolnyih-poley-v-adminke-wordpress-svoimi-rukami.html)

Скролл. Слева - область для скролла наверх - CI-courses.psd папка scroll. При широкоформатном разрешении прилипает к левому краю. При уменьшении - сужается до минимума оставляя только стрелку (пример тут - http://siliconrus.com/). Надпись наверх и стрелка - всегда посередине экрана, даже когда страницы листают. При наведении - белая заливка фона. Область скролла не залезает на меню и футер; появляется когда страницу начинашь скроллить (соотвественно когда страницы помещается на одном экране - там она вообще не появляется). Возможно использование плагина для WP.

Хлебные крошки - заголовки и вложенность генерируется автоматически. На основной теме указывается сверху и в конце старницы. На остальных уникальных страницах (кроме главной страницы, там их нет) - указывается только сверху.

Слайдшоу. Встречается:

главной странице (там управление и лайтбокс не нужен).Главная картинка меняется (неуправляемое пользователем слайдшоу) с эффектом затемнения (фэйд-ин - фейд-аут).

Результат обучения (Страница курса автокад (CI-courses.psd папка Autocad). Слайдер с лайтбоксом - навигация по стрелкам, при клике на картинку - увеличение на весь экран. Внизу точки - показывают текущую позицию и общее кол-во картинок. Дизайн желательно соблюдать, но не критично; возможно использование плагина. Главное чтобы не тормозил.

Лайтбокс. Главная страница (CI-main.psd). Раздел Корпоративные клиенты:

При нажании на кнопку “Посмотреть отзыв” - экран затемняется и на полный экран появляется скан отзыва (lightbox). Возможно это будет тот же плагин что и слайдшоу, обычно в слайдшоу есть лайтбокс.

Попап - форма заказа. Работает по ссылки на страницах: Страница курса автокад (CI-courses.psd папка Autocad) и Цены (CI-prices.psd)

Всплывающее окно заказа (CI-prices.psd папка Write_01):

Экран затемняется. При клике вне области формы - форма закрывается.

Поля - Курс, форма обучения и цена - генерится автоматически в зависимости от нажатой ссылки.

При нажатии на галочку я уже у вас обучался и хочу скидку - цена бы уменьшалась на 5 % от указанной. Сложно?

Было бы круто - сделать анимацию появления, любую, если не займет время.

При нажатия кнопки заказать обучение - появляется сообщение “Заявка успешно отправлена” (папка Write_02)

Пагинация страниц в осноной теме (например, раздел учебники Начертательная геометрия. Лекция (CI-uchebnik NG.psd папка lection)). Автоматическая пагинация (сейчас все ставится руками). Некритично.

Поиск по сайту. В меню есть поле поиска. Подключить Яндекс или Гугл, или если встроенный нормально работает.