Бюджет: 1000 UAH Термін: 2 дні
Качественно выполним поставленную задачу.
Skype: Team ArtSystem
Mail: [email protected]
Phone: +380997983974
Доработка сайта на OpenCart. Изминения карточки товара. Мой сайт http://www.selfieboutique.com.ua
Нужно сделать:
Все должно быть адаптивно!
1. Карточка товара. Карточка товара сайта должно выглядеть в точности как на примере ниже: (рис1.)
Важно! Что бы визуально было как на примере, по отступам, размерам шрифтов, масштабу елементов.
2. “хлебные крошки” сделать как на примере, чуть больше шрифтом, черным цветом, сдвинуть ближе к центру, место “/” сделать стрелочки как на сайте KIKO. http://www.kikocosmetics.com/ru-ru/make-up/face/bronzers/Natural-Colour-Bronzer/p-KC04301051 При переходе на товар с главной страницы, в хлебных крошках тоже должен быть весь путь где лежит товар (Макияж – губы – помада – название помады.)
3. Сердечки рейтинга должны быть визуально точно, как на примере http://www.kikocosmetics.com/ru-ru/make-up/face/bronzers/Natural-Colour-Bronzer/p-KC04301051 (когда нет отзывов сердечки должны быть серым цветом без контура). Интегрировать их из сайта-примера.
4. Добавить возле рейтинга “количество отзывов/написать отзыв“ как на сайте-примере
5.Модуль выбора цвета должен визуально, по масштабу и функционально быть как на примере http://www.kikocosmetics.com/ru-ru/make-up/lips/lipsticks/Smart-Fusion-Lipstick/p-KM00201026. При выборе цвета должна меняться главная картинка (Нужно сделать что-бы в админке я к цвету мог загрузить картинки для отображения основных картинок). Если какого-то цвета нет в наличии он должен все равно отображаться, только исходя из наличия должен меняться статус, нет в наличии или под заказ. Важно! В админке нужно опцию добавления цвета сделать более продуманную (сейчас: я создаю опцию выбрать цвет и в том поле все цвета по всем товарам которые с цветом), нужно сделать чтобы для каждого товара с цветом я мог создать отдельную опцию. (Например: Для товара “А” я создаю опцию выбрать цвет для товара “А” и добавляю все цвета для товара “А” , Для товара “B” я создаю опцию выбрать цвет для товара “B” и добавляю туда цвета для товара “B” и так дальше), тоесть для каждого товара свой блок цветов, чтобы они небыли все в куче.
Под цветом должен быть статус товара (Есть в наличии, нет в наличии, под заказ до …… как на примере рис.1) Под заказ, нужно сделать что-бы можно было указать в админке количество дней под заказ, и возле этого статуса должна быть другая иконка, (иконку я предоставлю). + Когда товара нет в наличии, то цена должна быть не черная, а серая, и на кнопке вместо надписи “добавить в корзину”,, должно быть уведомить о наличии.
6. После слова обозначения валюты “грн” не должно быть точек после сокращения по всему сайту! Если товар со скидкой, то должно отображаться две цены, старая без скидки и новая со скидкой, новая должна быть красным цветом, должна отображвтся левее, а старая цена должна быть серым цветом зачеркнута и отображатся правее от новой цены. Пример как должго быть на фото ниже.
7. Под главной картинкой убрать слова галерея, маленькие доп. Картинки под главной картинкой должны быть по срредине и без рамок, как на сайте-примете. Маленькие картинки должны быть на одном уровне с кнопкой добавить в корзину (см. рис.1)
8. Поле описания должно быть уже и текст описания должен быть больше шрифт. Описание должно быть где-то 1,5см. от уровня который я отобразил выше (под маленькими картинками и кнопкой добавить в корзину) По ширине оно должно быть тоже ближе к ценру . Примерно так, как я выделил на фото.
Слово “Описание” Сделать чтобы все заглавние буквы были и убрать рамку вокруг описания. как на примере ниже
9. Под описанием сделать вкладку отзывы, так же, как на примере, вкладку под описанием сделать так же, что-бы вкладка раскрывалась и закрывалась

10. Под описанием и отзывами должно быть: “Вам также может понравиться и карусель с товарами
Бюджет: 1000 UAH Термін: 2 дні
Качественно выполним поставленную задачу.
Skype: Team ArtSystem
Mail: [email protected]
Phone: +380997983974
Створити та зверстати адаптивний майстер-шаблон для 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; досвід поступової міграції дизайну без повної зупинки сайту;
Нам потрібно зробити дизайн у фігмі з html файлів (все розміщу в документі до задачі) Щоб ми потім могли наверстати ці всі сторінки в конструктор сайтів Максимальний акцент на мобільному дизайні та адаптивності, весь трафік звідти Це буде основна сторінка сайту + чек-аут сторінка + 2 сторінки з допродажами (1 товар - 1 сторінка) Взагалі задача, щоб вони були підготовлені до верстки і з адаптацією під мобільні пристрої На диску буде головна + чек-аут + 1 сторінка допродажу + наш логотип (ставимо всюди), взагалі адаптуємо в усіх сенсах під наш бренд Останній дизайн знаходиться ось за цим посиланням https://3plus3.heroman.com.ua/upsells/t-shirt/ Футер внизу на всіх сторінках ставиться всюди, як на головній сторінці (the Rich) Логіка воронки продажів Головна сторінка чек-аут допродаж 1 допродаж 2 Сторінка дякую (вона є у нас) ССИЛКА НА АРХІВ З СТОРІНКАМИ https://drive.google.com/drive/folders/1IKh0sTVd6WCIUm0QSBFctRlaD6iEasez?usp=sharing
Потрібно зробити похожим на те що я скину з figma. не обовязково однаковим. загалом перша сторінка готова
Потрібно перенести готовий дизайн сайту ( лендінг під курс, інфобіз ) з Figma на Weblium за один день.