HTML елемент для відображення кількох картинок

Зараз працюємо над дизайном головної сторінки сайту. Дизайн буде у фігма. Потрібно буде зробити грамотну верстку і передати в роботу нашому програмісту. Готова відповісти на додаткові питання, щоб визначити об єм роботи та вартість Попреденій прототип сторінки https://drive.google.com/file/d/1W54_1lrGhPpaSL4HIjPgOI41TlOJagdj/view?usp=sharing ТЗ за яким працює дизайнерhttps://docs.google.com/document/d/1dSlx7i8Y12jYC3RvdtD2sx3Cwot8MmKtfdtK-mVaHMk/edit?usp=sharing

Шукаємо верстальника на весь проект, що включає окремо десктопну версію та додаток. Верстка повинна бути ідентична макету. Для початку, скільки часу знадобиться і скільки буде коштувати сверстати такий лендинг?

Завдання-верстка сайту. Є готовий розроблений макет, зверстаний на конструкторі, який треба переверстати у WP. Це невеликий (на 4-5 сторінок) двомовний інформаційний сайт з можливістю підключення WooCommerce. Сайт має бути оптимізованим для SEO.

Створити та зверстати адаптивний майстер-шаблон для email-розсилок у Stripo (для експорту в SendPulse).⚙️ Що потрібно зробити:Розробити візуальну концепцію та дизайн блоків (хедер, банери, картки товарів, футер).Зверстати адаптивний HTML-шаблон уStripoз можливістю подальшого експорту вSendPulse.Протестувати відображення у Gmail, Apple Mail, Outlook та Dark Mode. Вимоги:Впевнений рівень Figma та практичний досвід верстки у Stripo.Розуміння технічних обмежень email-маркетингу.Портфоліо з реалізованими е-mail розсилками (e-commerce/fashion).

Опис завдання Потрібен досвідчений frontend-розробник або верстальник для поетапного оновлення великого чинного сайту. Сайт працює багато років, містить значну кількість сторінок, різні типи контенту, форми, таблиці та інтерактивні блоки. Використовується власна серверна система, наявні legacy HTML/CSS. Повна заміна технологій або системи керування сайтом не планується. На першому етапі необхідно розробити новий адаптивний загальний шаблон сайту. Після успішного завершення першого етапу планується послідовне оновлення внутрішніх сторінок. Назва сайту, URL, дизайн-макети та поточні вихідні файли будуть надані обмеженій кількості кандидатів після попереднього відбору за портфоліо та досвідом.Що входить до першого етапу Необхідно реалізувати загальну візуальну оболонку: шапку для desktop- і mobile-версій; основну та мобільну навігацію; службові елементи шапки; загальний контейнер і сітку сторінки; навігаційний ланцюжок («хлібні крихти»); базові елементи інтерфейсу: кнопки, посилання, поля введення; загальні стилі типографіки з можливістю їх поетапного підключення; футер; адаптивну поведінку шаблону; сумісність нової оболонки зі сторінками, які тимчасово залишатимуться у старому дизайні. Унікальні внутрішні блоки окремих сторінок на першому етапі повністю переробляти не потрібно.Особливості проєкту Великий чинний сайт із багатьма типами сторінок. Наявний legacy CSS і місцями застаріла HTML-розмітка. Новий дизайн упроваджуватиметься поступово. Одночасна повна заміна всіх сторінок неможлива. Виконавець не отримує доступу до сервера, CMS і робочого проєкту. Замовник самостійно інтегрує підготовлену верстку. Виконавцю будуть надані поточні CSS-файли, макети, графічні матеріали, HTML-фрагменти та приклади сторінок у межах, необхідних для виконання роботи. Передбачається декілька ітерацій після тестової інтеграції в реальний проєкт.Технічний підхід Передбачається підключення нового CSS поверх наявних стилів із подальшою поступовою міграцією та видаленням застарілих правил. Дозволяється: створювати нові CSS/SCSS-файли; пропонувати зміни HTML загальних частин шаблону; виправляти наявні CSS-правила, які заважають реалізації; пропонувати покращення структури DOM; створювати нові повторно використовувані компоненти. Зміни наявного CSS необхідно передавати окремо у вигляді: patch/diff-файлу; окремого файлу сумісності; або документованого переліку змінених правил і селекторів. Необхідно уникати: неконтрольованого використання !important; глибоко вкладених і крихких CSS-селекторів; прив’язки стилів до тексту або порядкового номера елемента; дублювання всієї розмітки окремо для desktop- і mobile-версій; підключення важких фреймворків без попереднього погодження; глобальних правил, які можуть порушити відображення ще не оновлених сторінок.Вимоги до якості Проєкт розрахований на подальший багаторічний розвиток. Потрібне не разове «підганяння під скриншот», а чиста, професійна та зручна для підтримки верстка. Очікується: зрозуміла компонентна структура; повторно використовувані CSS-класи; CSS custom properties для кольорів, розмірів, відступів та інших дизайн-токенів; розумна специфічність селекторів; семантична HTML5-розмітка; коректна ієрархія заголовків; відсутність зайвих DOM-обгорток; відсутність дублювання контенту, що індексується; коректне використання header, nav, main, section, footer; використання кнопок і посилань відповідно до їхнього призначення; доступність інтерфейсу з клавіатури; стани hover, focus, active і disabled; відсутність горизонтального прокручування сторінки; коректна робота з динамічним контентом різної довжини; зрозумілий і професійно організований код.SEO та продуктивність Оновлення шаблону не повинно погіршувати технічні SEO-показники сайту. Необхідно: зберегти семантику основного контенту; не створювати окремі дублікати DOM для мобільної та desktop-версій без обґрунтованої потреби; не приховувати важливий для індексації контент за допомогою JavaScript; не порушувати ієрархію заголовків; не видаляти наявні SEO-, аналітичні та структурні атрибути з наданих HTML-фрагментів; мінімізувати додатковий JavaScript; не використовувати важкі бібліотеки без погодження; передбачити розміри зображень і відсутність помітних зсувів макета під час завантаження; не допускати помітного погіршення показників Lighthouse і Core Web Vitals після інтеграції. Виконавець має розуміти, що якісний CSS сам собою не виправляє структуру DOM. Якщо для професійного результату необхідно змінити розмітку, потрібно підготувати та передати замовнику відповідні HTML-фрагменти.Адаптивність Перевірка верстки має виконуватися щонайменше на таких ширинах: 1440 px; 1200 px; 1024 px; 768 px; 390 px; 360 px; 320 px. Між контрольними розмірами інтерфейс також повинен залишатися коректним і функціональним. Горизонтальне прокручування всієї сторінки не допускається. Винятки для окремих компонентів, наприклад великих таблиць, необхідно попередньо погодити.Результат першого етапу Виконавець передає: Новий CSS або SCSS разом із готовим зібраним CSS. Автономну демонстраційну HTML-сторінку. HTML-фрагменти шапки, меню та футера, якщо розмітка змінювалася. Окремий patch/diff змін legacy CSS. Нові SVG, зображення, іконки та шрифти. Інструкцію з підключення та інтеграції. Опис структури CSS і компонентів. Перелік нових і змінених класів та селекторів. Скриншоти результату на контрольних розмірах. Перелік відомих обмежень і розбіжностей із макетами. Рекомендації щодо подальшої міграції внутрішніх сторінок.Ітерації До вартості першого етапу мають входити: Узгодження загальної структури та desktop-версії. Адаптивне доопрацювання tablet- і mobile-версій. Виправлення виявлених замовником проблем після першої тестової інтеграції. Додаткові роботи поза межами погодженого першого етапу оцінюються окремо.Що потрібно вказати у заявці Просимо зазначити: досвід роботи з великими чинними сайтами та legacy CSS; приклади складної адаптивної верстки; приклади коду або посилання на репозиторії, якщо вони доступні; підхід до організації архітектури CSS; досвід поступової міграції дизайну без повної зупинки сайту;