Зверстати форму по дизайну
1500 UAHЗверстати та стилізувати форму перевірки статусу замовлення згідно з дизайном у Фігма: https://www.figma.com/file/eQqN8jW9ZmTVOVeNEbeYAU/Order-Track-for-Vlad?node-id=0%3A1&t=lpzMVFkiq5iopxFo-1
Дизайн є у двох версіях, для десктопу та для моб девайсів.
Треба зверстати адаптивно для дефолтних bootstrap брейкпоінтів (576, 768, 992, 1200, 1400).
Також, зробити анімацію руху синьої смуги між "етапами" замовлення. Етап на якому анімація має завершитись - має завдаватись CSS класом.
Кожний етап може мати три статуси "не розпочато" (сірий кружок), "в процесі" (синій кружок) та "виконано" (синя галочка). Статус має задаватись класом для кожного етапу окремо.
Статус замовлення (блок з Order #....) має бути в окремому елементі, тому що він буде додаватися скриптом після обробки форми.
Теж саме для відображення похибок - мають бути в окремих елементах.
На виході треба:
- HTML файл з версткою та стилями у <style> тегу. Якщо для демонстрації проєкту потрібні допоміжні файли (reset.css, bootstrap breakpoints тощо) - можна додати окремими файлами.
- Чистий CSS та HTML, без препроцесорів та шаблонізаторів.
- Всі кольори мають бути легко сконфігуровані, тому краще зробити як CSS variables.
- Семантична верстка (треба урахувати що ця форма буде вбудовуватись в сторінки існуючих сайтів, наприклад не використовувати <h1> )
- Зрозумілі та логічні назви атрибутів англійською. По BEM або аналогічним методом
- WCAG - АА (https://accessibleweb.com/rating/aa/). Основна мета - щоб Lighthouse та wave.webaim.org не лаялись.
- Без логіки. Скрипт обробки форми вже є.
Відгук замовника про співпрацю з Миколою Мацком
Зверстати форму по дизайнуВсе виконанно згідно з вимогами. Дякую за співпрацю.
Відгук фрилансера про співпрацю з Владом Думою
Зверстати форму по дизайнудуже приємно було працювати. чітко поставлене тз, незначні точечні правки по ділу, приємне спілкування. сподіваюсь на подальшу співпрацю
-
макет топ)
-
переключити з обгортки в мокап не пробували?) а взагалі шкода, що забули поставити read only. пішла вакханалія
-
🤷♂️ вже полагодили.
Сподіваюсь за бутером всі встигли )
-
Да да, я)
-
Так нічого не змінилось)
-
Актуальні фриланс-проєкти в категорії HTML та CSS верстання
Веб-дизайн та розробкаПривіт! Для поточного проекту шукаю двох окремих спеціалістів: веб-дизайнера (Figma) веб-розробника (Frontend / WordPress) Проект включає завдання типу: лендинги, інтернет-магазин, адмін-панелі, сайт на WordPress, а також за необхідності невеликі завдання на React / Next.js та… HTML та CSS верстання, Дизайн сайтів ∙ 2 дні 15 годин тому ∙ 106 ставок |
Потрібний розробник Друпал Dupal для правок на кількох сайтах.Потрібний розробник Друпал Dupal для правок на кількох сайтах. Сайт розбух і заповнив весь хостинг .. HTML та CSS верстання, Веб-програмування ∙ 2 дні 22 години тому ∙ 37 ставок |
Оптимізація швидкості сайту WordPress
5092 UAH
повні деталі надішлемо в особисті повідомлення Мета Максимально прискорити завантаження сайту, особливо на мобільних пристроях. KPI (обов'язково) Після завершення робіт необхідно досягти наступних показників. Mobile Performance 90+ LCP менше 2.2 сек INP менше 200 мс CLS менше… HTML та CSS верстання, Javascript та Typescript ∙ 3 дні 13 годин тому ∙ 67 ставок |
Сверстати сайт і підв'язати його до Shopifyзверстати сайт і підв'язати його до shopify на макеті основна сторінка сторінки товарів не буде, буде модальне вікно з вибором обсягу баночки крему та його кількості після вікно доставки та оплати замовлення повинно йти в shopify з повною інформацією про замовлення… HTML та CSS верстання, Веб-програмування ∙ 3 дні 16 годин тому ∙ 77 ставок |
Оптимізація сайту
Оптимізація сайту jdgreta.co.uk на Shopify. Сео аудит додано до проекту. Основні завдання - - Виправити всі мета дані - Виконати ТЗ для програміста (оскільки в цьому проекті поєднані завдання для програміста та СЕО, якщо ви не компанія - можете скористатися допомогою) -… HTML та CSS верстання, PHP ∙ 4 дні 16 годин тому ∙ 33 ставки |
Київ