Створіть міні-сайт/лендос на 3 сторінки HTML/CSS/Jquery
Ваш досвід
Кейси
Приближчі терміни
Ціна
У відповідь обов'язково додайте, що ознайомилися з завданням, щоб я розумів, що ви хотіли б дочитати до цього пункту)
Опис проекту: Браузерна гра rock-paper-scissors на основі блокчейна.Задача: Серія міні сайту з використанням HTML5/CSS3/Jquery.Сторінки: 3 (пк+моб) - головна, референтна, faq.Доступ до фігму: https://www.figma.com/file/jqqMijb48BpWbxuupLxfYi/FRONT-TZ?type=design&node-id=0%3A1&mode=design&t=QzGTUBdkeRgvdrfN-1 Доступ до всіх зображень і необхідних файлів видання вже на запит.Платформи: Windows, MacOs.Браузери: SafariGoogle ChromeMozilla FirefoxOpera Браузери мобільних пристроїв iOS 7 і вищеБраузери мобільних пристроїв Android 5 і вище, за винятком UC Browser При верстиці враховуються особливості браузерів, їх обмеження зовнішнього вигляду і поведінки об'єктів.Стандарти: HTML5/CSS3/Jquery Сумісність дизайну: верстка може не виконуватися методом Pixel Perfect і можливі відмінності з відносною помилкою до 5% (розмір елементів, рендеринг шрифтів і міжзвукових/межзвукових відстаней, а також внутрішніх і зовнішніх відступів).Все: Всі текстові елементи макетів повинні верститися текстом, за винятком випадків, коли така реалізація технічно неможлива.Зрозумілий і структурний код.На сайт будуть додані скрипти трекерів типу: GTM, HotJar, Pixels і т.д.Перед запуском: Перевірте доступ до фігми Перевірте доступ до шрифтів (видаю за запитом, якщо їх нету в Google)Дайте фідбек по додобуванню, пропозиціям і поліпшенню тз і лендоса.Зараз перевірте макети на тему можливості експорту векторних файлів, режимів накладання і технічні можливості реалізації ідеї дизайнера.Перевірте приховані шари, якщо такі присутніВ процесі роботи перевіряйте стилі текстів у плані line-height, letter-spacing і т.д.Часто це пропускається з виду.Перевірте мережу макету.Іноді мережі мають gutter space в 20px або 50px, а не стандартні 30px.Це допоможе уникнути необхідності в костях в подальшому.Гайд для дизайнерів по верстиці
Ширина сайту: статична, сайт рівний по центру.При 1024px повинна бути відсутня горизонтальна прокрутка.Підвал притягнути донизуШапка статичнаПоширеність: блоки з змінюваним вмістом налаштуються відповідно до дизайну при зменшенні/збільшенні контенту.Для текстових блоків, заповнених за допомогою візуальних редакторів, повинні бути прописані стилі оформлення с тегами.Масштаблення сторінок: сторінки при масштабуванні сторінки в діапазоні 70-150% в браузеріх Chrome, Safari повинні виглядати так само, як і при 100%.Допускаються невеликі помилки, які виникають внаслідок неправильних круглих координат браузерів.HTML код:Кодування - utf-8Структурний, коментуючий код (означається початок / кінець великих блоків).На кнопках повісять ідентифікатори для подальшого використання тригерів на цих кнопках.Імена класів і ідентифікаторів - на ваш розгляд.Зображення:Всі зображення повинні бути оптимізовані через сервіс tinypng з метою зменшення сукупного ваги зображень.Непрозорі зображення повинні експортуватися в .jpg з метою заощадження розміру файлу.Ікони та дрібні зображення:Перший пріоритет - використання svg спрейтів.Другий пріоритет - png зупині через елемент , Третій пріоритет - html теги img Всі ікони повинні бути оптимізовані для retina екранів
Шрифти: шрифти, доступні через сервіс google fonts повинні підключатися з CDN https://fonts.google.com/ Файлова організація: HTML файли лежать в корені.Головна сторінка - index.html Інші - за іменами макетів.Стилі в папці /css/Javascript - /js/Зображення оформлення - /img/Зображення вмісту - /pic/Адаптивність: Контент сторінки підготується до фактичних розмірів вікна браузера, без щіток по ширині глобальних контейнерів на ключових точках При розмірах більше 320px не повинно виникати горизонтального прокрутку сторінки.Використання десктоп-першого методів в підходіЗа основні розлаштування беремо - 1920(hd+), 1440 (hd), 1200px (wide), 992 px (desktop), 568 px(mobile), 414 px(mobile-s).Додатково: При включенні adblock повинен бути доступний весь контент на сайті.У кінцевій версії сайту - логотип буде іншим, тепер стоїть заголовкаДодати мета-тегиДодати favicon Перевірте, щоб при share посилання нашого сайту - був передвигляд зображення (лого) і тексту з тегів.Задачі :
Загальні рекомендації для всіх сторінок:Можна використовувати Lazy Load, плавний вигляд контенту (моб + пк)Анімація посилань в заголовку, приклад - https://infinizai.webflow.io/ (пк).Моб версія - класичний бургер меню.Посилання ведуть на https://www.google.com/.Анімація всіх кнопок, приклад - https://axieinfinity.com/ (пк+моб)Анімація іконів соцмереж - https://orivium.io/contact.Посилання ведуть на https://www.google.com/. (пк + моб)
Головна сторінка :
- Анімація адреси кошика в таблиці - легке затемнення при нахиленні.Посилання адреси веде на Etherscan транзакцію (подаю).(пк+моб)- Анімація монет навколо людей - легкий ефект парання в повітрі як на цьому прикладі парають сундучки.У різноманітності.(пк+моб)- Анімація з'явитися другого блоку з текстом, таблицею і кнопкою - наприклад як тут .Таблиця ліворуч, текст і кнопка праворуч (пк).Анімація на моб версії відсутня - застосовується звичайний вигляд.- Анімація появи третього блоку текстом і карткою NFT аналогічно другому.Анімація на моб версії відсутня - застосовується звичайний вигляд.- Анімація тексту View More в таблиці - легке підсвітлення при нахиленні.Посилання веде на Etherscan.На моб версії ця кнопка відсутня.- Таблиця реалізується методом ajax.Видаю файл для завантаження інформації, посилань і т.д.ФАК сторінка:
анімації відсутні, крім тих, що вказані в основних для всіх сторінок.Referral page:Анімація блискавки між пальцями рук.Можна здійснити легку анімацію світлом.Таке ж анімація параючих монет як на головній.(пк+мобРеалізувати реферальну програму з функцією валідація адреси.Приклад :
str.match(/(\b0x[a-f0-9]{40}\b)/g)Коли користувач вводить адресу в поле для адреси, то автоматично генерується і виводиться унікальна посилання (параметри скину) в поле.Користувач може натиснути на кнопку Копіювати, щоб її копіювати або просто виділити.
Відгук замовника про співпрацю з Андреєм Соиним
Створіть міні-сайт/лендос на 3 сторінки HTML/CSS/JqueryОтличная оперативная работа, качественная верстка! Все в срок!
Відгук фрилансера про співпрацю з Alex Smirnov
Створіть міні-сайт/лендос на 3 сторінки HTML/CSS/JqueryОтлично поработали!
Норм заказчик, норм требования.
По ходу были вопросы и предложения, все оперативно решали и т.д
Рекомендую к сотрудничеству)
-
Привітання, завдання зрозуміло, готуватися почати.
Мій стік: JS, TS, ReactJS, Redux, HTML, SCSS, адаптив під всі пристрої.
Пишіть, я з радістю допоможу.
-
11062 99 0 1 Здоров’я
Як варіант все можна зробити на webflow
Відповідає на всі запити,
крім
Реалізувати реферальну програму з функцією валідації адреси. Приклад :
str.match(/(\b0x[a-f0-9]{40}\b)/g)
Коли користувач вводить адресу в поле для адреси, то автоматично генерується і виводиться унікальна посилання (параметри скину) в поле. Користувач може натиснути на кнопку Копіювати, щоб її копіювати або просто виділити.
Це окремий back.
-
17318 387 3 2 Добрий день . Готовий працювати, має великий досвід роботи. Зверніться
-
262 Доброго дня, Alex!
Ми Webevery - інноваційна IT-компанія, яка готова взяти на себе весь цикл розробки Вашого веб-сайту, від дизайну до SEO. Наш колектив експертів включає дизайнерів, фронтенд та бекенд розробників, QA-фахівців та SEO-експертів.
Що ми пропонуємо:
- Унікальний дизайн: Виділений візуальний стиль для Вашого сайту. - Технічна експертиза: Висока продуктивність і функціональність.
- Тестування якості: Ретельне тестування для бездоганної роботи.
- SEO оптимізація: Підняття в результатах пошуку Google.
Проєкти - https://webevery.dev/ourProjects
Ми готові до співпраці для успішного запуску Вашого проєкту.
Вас зацікавила наша пропозиція? З нетерпінням чекаємо можливості обговорити деталі Вашого проєкту. Напишіть нам!
… З повагою!
WebEvery - Empowering your success
webevery.dev
-
Правильно ли я понимаю, что после валидации инпута регуляркой, нужно будет конкатинироваать к некой ссылке, некие параметры -- на выходе это и будет реферальной ссылкой которая будет копироваться в буфер?
что то на бек будет уходить? инфа о сгенерированой ссылке или что то типа такого?
-
Актуальні фриланс-проєкти в категорії Java
Скрипт для модифікації APKУ мене є скрипт під старі версії APK Minecraft, який дозволяв робити версію гри з меншим вагою за рахунок того, що там видалялася музика. Також, скрипт робив клон Minecraft (щоб можна було мати дві гри майнкрафт на своєму пристрої...), а також у вкладку "сервера" в грі… Java, Розробка під Android ∙ 22 години 46 хвилин тому ∙ 12 ставок |
Реалізувати клієнтську конвертацію та оптимізацію зображень (включаючи HEIC) перед AJAX-відправкою на
3145 UAH
Сайт дошки оголошень (Тамаранга v2 Оточення rocky linux8 php 7,2 nginx 1,28,2 mysql 8,00,44 Yi 1 bootstrap 3,3,7 vps 8 потоків ,24 озу,2000nyme Впровадити в JS-завантажувач фото перехоплення події вибору файлів (change на input[type=file] або хук AJAX-завантажувача). Якщо… Java ∙ 1 день 3 години тому ∙ 14 ставок |
Кастомізація екрана завантаження та меню Minecraft 1.12.2 (Tech Survival)
891 UAH
Потрібно доопрацювати готовий клієнт Minecraft 1.12.2 з модами та впровадити власний дизайн інтерфейсу в стилі технічного виживання (Industrial / Tech Survival).Що потрібно зробити1. Кастомний екран завантаження модів Необхідно замінити стандартний екран завантаження… Java, Розробка ігор ∙ 5 днів 21 година тому ∙ 6 ставок |
Інтеграція в CRM модулів сканерів стоматологій
27 000 UAH
Ми розробили CRM систему для взаємодії з зубними лікарями та лабораторіями. Потрібно інтегрувати сервіси iTero, sirona, medit та інші, щоб файли підтягуються автоматично AI та машинне навчання, Java ∙ 5 днів 22 години тому ∙ 27 ставок |
Розробка простих 2D-ігор (Змійка, Галактика тощо) під Google Play MarketВітаю! Шукаю розробника (або початківця з хорошою базою), який зможе створити кілька простих класичних 2D-ігор під мобільну платформу Android з подальшою публікацією в Play Market.Для старту потрібно розробити одну-дві гри. Приклади сеттингу та механік: класична «Змійка»… Java, Розробка ігор ∙ 8 днів 1 година тому ∙ 19 ставок |