Зверстати форму по дизайну
33 USDЗверстати та стилізувати форму перевірки статусу замовлення згідно з дизайном у Фігма: 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 не лаялись.
- Без логіки. Скрипт обробки форми вже є.
Client's review of cooperation with Mykola Matsko
Зверстати форму по дизайнуEverything is done according to the requirements. Thank you for cooperation.
Freelancer's review of cooperation with Vlad Duma
Зверстати форму по дизайнуIt was very pleasant to work. clearly set tz, small point directions on the work, pleasant communication. I hope for further cooperation.
-
макет топ)
-
переключити з обгортки в мокап не пробували?) а взагалі шкода, що забули поставити read only. пішла вакханалія
-
🤷♂️ вже полагодили.
Сподіваюсь за бутером всі встигли )
-
Да да, я)
-
Так нічого не змінилось)
-
Current freelance projects in the category HTML & CSS
Web design and developmentHello! For the current project, I am looking for two separate specialists: web designer (Figma) web developer (Frontend / WordPress) The project includes tasks such as: landing pages, online store, admin panels, WordPress site, as well as small tasks on React / Next.js and… HTML & CSS, Web Design ∙ 2 days 3 hours back ∙ 105 proposals |
A modern website is needed for a stretch ceiling company in Poland.
634 USD
Need a modern premium design, mobile device adaptation, fast loading, SEO, animations, calculator, portfolio, application form. Experience in creating websites in Poland, landing pages for construction or renovation companies is preferred. Please be sure to send examples of your… HTML & CSS, Web Programming ∙ 2 days 4 hours back ∙ 158 proposals |
A Drupal developer is needed for edits on several websites.A Drupal developer is needed for edits on several websites. The site has bloated and filled up all the hosting.. HTML & CSS, Web Programming ∙ 2 days 10 hours back ∙ 37 proposals |
Optimization of WordPress site speed
113 USD
We will send full details in private messages Goal Maximize website loading speed, especially on mobile devices. KPI (mandatory) After the work is completed, the following metrics must be achieved. Mobile Performance 90+ LCP less than 2.2 sec INP less than 200 ms CLS less than… HTML & CSS, Javascript and Typescript ∙ 3 days 1 hour back ∙ 66 proposals |
Create a website and connect it to Shopifyto create a website and connect it to Shopify the main page is in the mockup there will be no product pages, there will be a modal window for selecting the size of the cream jar and its quantity after that, a delivery and payment window the order must be sent to Shopify with… HTML & CSS, Web Programming ∙ 3 days 4 hours back ∙ 76 proposals |
Kyiv