Реализация сайта визитки | HTML | CSS | PHP | Верстка сайта с концепта

Условия:

От вас - примеры работ;

Цена - 8 usd / час;

Сроки - 5 дней.

Задачи:

1. Реализация сайта визитки (HTML, CSS, PHP);

2. Общая стилистика и концепция сайта должна выглядеть как на концепте - (swift.psd);

3. Реализация различных элементов сайта согласно плану описанному ниже ("Реализация элементов сайта п. 1-14");

4. При изменении каких либо элементов (отходя от концепта) общий стиль и гамма не должны отходить от тематики - “Финансовых услуг”(Сухая и строгая цветовая гамма сайта). Любое изменение или “новый способ реализации” какого-либо элемента - должно обсуждаться;

5. Учитывать внедренные изменения в концепт, описанные ниже ("Изменения в концепте").

Изменения в концепте:

1. https://i.imgur.com/qpeCOUv.png - раздел отобразить иконками с заголовком "Наши клиенты:";

2. https://i.imgur.com/1irJYwS.png - услуги выделить или отобразить графически;

3. https://i.imgur.com/bntiBVC.png - отчетность вывести кнопками поменьше, вряд или плиткой без наложений;

4. Разделы "Мапа" и "Статус Платежа" - это ссылки на другие ресурсы будут.

Реализация элементов сайта:

Используется четыре палитры:

 - #000000 (фон, текст, border)

 - #791610 (иконки, линии, кнопки, ссылки)

 - #f6f6f6 (фон)

 - #ffffff (текст, border)

1. Лого:

при наведении становится:

2. Меню при наведении:

(линия постепенно прорисовывается слева направо) Пример:

 https://shopjackie.com/

3. Белые кнопки на черном фоне:

  ,  

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

4. Кнопки в разделе Тарифы:

при наведении становится

пример:

  https://shopjackie.com/ 

5. В разделе “О нас”:

сделать эффект движения от мышки. Пример (фон под птичкой):

  https://www.couleecreative.com/ 

6. Все линии плавно прорисовываются при скролле:

  + +

https://www.simonleegallery.com/ ,  https://stayhideoutlodge.com/ и двигаются при скролле по отношению к фону http://www.casangelina.com/ 

7. При скролле нижний блок наезжает на хедер. пример: http://www.casangelina.com/ 

8. Весь контент при скролле плавно движется вверх https://www.couleecreative.com/ и появляется снизу http://www.casangelina.com/

9. Названия всех блоков

плавно появляются. Пример:

  https://shopjackie.com/ 

10. В разделе документы

это ссылки. При наведении линия плавно становится длиннее и толкает за собой текст (как верхнее ссылки)

11. Все слайдеры плавно переворачиваются

12. При наведении

13. На фоне терминал на весь экран и статический, а текст скролится

14. В разделе Отчетность при наведении на ссылку

Изменения в концепте:

1. https://i.imgur.com/qpeCOUv.png - раздел отобразить иконками с заголовком "Наши клиенты:";

2. https://i.imgur.com/1irJYwS.png - услуги выделить или отобразить графически;

3. https://i.imgur.com/bntiBVC.png - отчетность вывести кнопками поменьше, вряд или плиткой без наложений;

4. Разделы "Мапа" и "Статус Платежа" - это ссылки на другие ресурсы будут.