Верстка лендоса с использованием HTML, CSS, и JavaScript
Описание проекта: Браузерная игра rock-paper-scissors на основе блокчейна.
Задача: разработка 3 страниц лендинга
Доступы к фигме на редактора: выдам по запросу
Платформы: Windows, MacOs.
Браузеры:
Safari
Google Chrome
Mozilla Firefox
Opera
Браузеры мобильных устройств iOS 7 и выше
Браузеры мобильных устройств Android 5 и выше, за исключением UC Browser
При верстке учитываются особенности браузеров, их ограничения внешнего вида и поведения объектов.
Стандарты: HTML5/CSS3/Jquery
Соответствие дизайну: верстка может не выполняется методом Pixel Perfect и возможны отличия с относительной погрешностью до 5% (размеры элементов, рендеринг шрифтов и межстрочных/межбуквенных расстояний, а также внутренних и внешних отступов).
Общее: Все текстовые элементы макетов должны верстаться текстом, за исключением случаев, где подобная реализация невозможна технически. Понятный, структурный код. На сайт будут добавлены скрипты трекеров типа: GTM, HotJar, Pixels и тд.
Перед стартом:
Проверить доступ к фигме
Проверить доступ к шрифтам (выдам по запросу если их нету в гугле)
Дать фидбек по доработке, предложениям и улучшению тз и лендоса.
Заранее проверить макеты на предмет возможности экспорта векторных файлов, режимов наложения и технический возможности реализации задумок дизайнера.
Проверить скрытые слои если таковые присутствуют
В процессе работы проверять стили текстов в плане line-height, letter-spacing и др. Часто это упускается из виду.
Проверить сетку макета. Иногда сетки имеют gutter space в 20px или 50px, а не стандартные 30px. Это поможет избежать необходимости в костылях в дальнейшем.
Ширина сайта: статична, сайт выровнен по центру. При 1024px должна отсутствовать горизонтальная прокрутка.
Подвал прижат к низу
Шапка статична
Расширяемость: блоки с изменяющимся содержимым подстраиваются в соответствии с дизайном при уменьшении/увеличении контента.
Для текстовых блоков, заполняемых с помощью визуальных редакторов, должны быть прописаны стили оформления c тегами.
Масштабирование страниц: страницы при масштабировании страницы в диапазоне 70 -150% в браузерах Chrome, Safari должны выглядеть так же как и при 100%. Допускаются небольшие погрешности, которые возникают из-за неправильных округлений координат браузеров.
HTML код:
Кодировка – utf-8
Структурный, комментируемый код (обозначается начало/конец крупных блоков).
На кнопках висят идентификаторы для дальнейшего использования тригеров на эти кнопки.
Имена классов и идентификаторов – на твое усмотрение.
Изображения:
Все изображения должны быть оптимизированы через сервис tinypng в целях уменьшения суммарного веса картинок.
Непрозрачные картинки необходимо экспортировать в .jpg в целях экономии размера файла.
Иконки и маленькие изображения:
Первый приоритет - использование svg спрайтов.
Второй приоритет - png спрайты через элемент <i>, <span>
Третий приоритет - html теги img
Все иконки должны быть оптимизированы для retina экранов
Шрифты: шрифты, доступные через сервис google fonts должны подключаться с CDN https://fonts.google.com/
Файловая организация: HTML файлы лежат в корне. Главная страница – index.html. Остальные – по именам макетов.
Стили в папке /css/
Javascript - /js/
Изображения оформления - /img/
Изображения содержания - /pic/
Адаптивность:
Содержимое страницы подстраивается под фактические размеры окна браузера, без рывков по ширине глобальных контейнеров на ключевых точках
При размерах более 320px не должно возникать горизонтальной прокрутки страницы.
Использование desktop first методов в подходе
За основные разрешения берем - 1920(hd+), 1440 (hd), 1200px (wide), 992 px (desktop), 568 px(mobile), 414 px(mobile-s).
Дополнительно:
При включенном adblock должен быть доступен весь контент на сайте.
В финальной версии сайта - логотип будет другой, сейчас стоит заглушка
Задачи:
index
- Можно использовать Lazy Load
- Анимация ссылок в хедере, пример - https://infinizai.webflow.io/
- Анимация кнопок Play, Play now, пример - https://axieinfinity.com/
- Анимация иконок соц сетей в футере - https://orivium.io/contact (кликабельны)
- Подгрузка контента - плавное появление
- Анимация значка “copy address” в таблице - легкое затемнение при наведении (кликабельно) (функция - по клику копирует адрес кошелька)
- Анимация адреса кошелька в таблице - легкое затемнение при наведении (кликабельно)
- Анимация монеток вокруг человечков - легкий эффект парения в воздухе как на этом примере парят сундучки. В разнобой.
- Анимация появления второго блока с текстом, таблицей и кнопкой - по примеру как тут . Таблица слева, текст и кнопка справа.
- Анимация появления третьего блока текстом и картой NFT аналогично второму.
- Анимация текста View More в таблице - легкое подсвечивание при наведении (кликабельно)
Описание проекта: Браузерная игра rock-paper-scissors на основе блокчейна.
Страницы: главная, рефералка, 3 политики, faq.
Дизайн еще в работе, но со структурой можно уже ознакомиться: https://www.figma.com/file/CdxJZAFotyjiZGh1mkgegZ/RPS?type=design&node-id=0%3A1&mode=design&t=Sh6pBVDIbeNEWn8Q-1
Нюансы:
1) Таблица. Данные для таблицы можно ajax запросом сделать на jquery без фреймворка.
2) Рефералка. Юзер вставляет адрес кошелька, автоматически происходит проверка валидности кошелька и он получает уникальную реферальную ссылку. Можно сделать регуляркой str.match(/(\b0x[a-f0-9]{40}\b)/g)
Браузеры:
Safari
Google Chrome
Mozilla Firefox
Opera
Браузеры мобильных устройств iOS 7 и выше
Браузеры мобильных устройств Android 5 и выше, за исключением UC Browser
При верстке учитываются особенности браузеров, их ограничения внешнего вида и поведения объектов.
Стандарты: HTML5/CSS3/Jquery
Соответствие дизайну: верстка может не выполняется методом Pixel Perfect и возможны отличия с относительной погрешностью до 5% (размеры элементов, рендеринг шрифтов и межстрочных/межбуквенных расстояний, а также внутренних и внешних отступов).
Общее: Все текстовые элементы макетов должны верстаться текстом, за исключением случаев, где подобная реализация невозможна технически. Понятный, структурный код. На сайт будут добавлены скрипты трекеров типа: GTM, HotJar, Pixels и тд.
Перед стартом:
Проверить доступ к фигме
Проверить доступ к шрифтам (выдам по запросу если их нету в гугле)
Дать фидбек по доработке, предложениям и улучшению тз и лендоса.
Заранее проверить макеты на предмет возможности экспорта векторных файлов, режимов наложения и технический возможности реализации задумок дизайнера.
Проверить скрытые слои если таковые присутствуют
В процессе работы проверять стили текстов в плане line-height, letter-spacing и др. Часто это упускается из виду.
Проверить сетку макета. Иногда сетки имеют gutter space в 20px или 50px, а не стандартные 30px. Это поможет избежать необходимости в костылях в дальнейшем.
Ширина сайта: статична, сайт выровнен по центру. При 1024px должна отсутствовать горизонтальная прокрутка.
Подвал прижат к низу
Шапка статична
Расширяемость: блоки с изменяющимся содержимым подстраиваются в соответствии с дизайном при уменьшении/увеличении контента.
Для текстовых блоков, заполняемых с помощью визуальных редакторов, должны быть прописаны стили оформления c тегами.
Масштабирование страниц: страницы при масштабировании страницы в диапазоне 70 -150% в браузерах Chrome, Safari должны выглядеть так же как и при 100%. Допускаются небольшие погрешности, которые возникают из-за неправильных округлений координат браузеров.
HTML код:
Кодировка – utf-8
Структурный, комментируемый код (обозначается начало/конец крупных блоков).
На кнопках висят идентификаторы для дальнейшего использования тригеров на эти кнопки.
Имена классов и идентификаторов – на твое усмотрение.
Изображения:
Все изображения должны быть оптимизированы через сервис tinypng в целях уменьшения суммарного веса картинок.
Непрозрачные картинки необходимо экспортировать в .jpg в целях экономии размера файла.
Иконки и маленькие изображения:
Первый приоритет - использование svg спрайтов.
Второй приоритет - png спрайты через элемент <i>, <span>
Третий приоритет - html теги img
Все иконки должны быть оптимизированы для retina экранов
Шрифты: шрифты, доступные через сервис google fonts должны подключаться с CDN https://fonts.google.com/
Файловая организация: HTML файлы лежат в корне. Главная страница – index.html. Остальные – по именам макетов.
Стили в папке /css/
Javascript - /js/
Изображения оформления - /img/
Изображения содержания - /pic/
Адаптивность:
Содержимое страницы подстраивается под фактические размеры окна браузера, без рывков по ширине глобальных контейнеров на ключевых точках
При размерах более 320px не должно возникать горизонтальной прокрутки страницы.
Использование desktop first методов в подходе
За основные разрешения берем - 1920(hd+), 1440 (hd), 1200px (wide), 992 px (desktop), 568 px(mobile), 414 px(mobile-s).
Дополнительно:
При включенном adblock должен быть доступен весь контент на сайте.
В финальной версии сайта - логотип будет другой, сейчас стоит заглушка
Задачи:
index
- Можно использовать Lazy Load
- Анимация ссылок в хедере, пример - https://infinizai.webflow.io/
- Анимация кнопок Play, Play now, пример - https://axieinfinity.com/
- Анимация иконок соц сетей в футере - https://orivium.io/contact (кликабельны)
- Подгрузка контента - плавное появление
- Анимация значка “copy address” в таблице - легкое затемнение при наведении (кликабельно) (функция - по клику копирует адрес кошелька)
- Анимация адреса кошелька в таблице - легкое затемнение при наведении (кликабельно)
- Анимация монеток вокруг человечков - легкий эффект парения в воздухе как на этом примере парят сундучки. В разнобой.
- Анимация появления второго блока с текстом, таблицей и кнопкой - по примеру как тут . Таблица слева, текст и кнопка справа.
- Анимация появления третьего блока текстом и картой NFT аналогично второму.
- Анимация текста View More в таблице - легкое подсвечивание при наведении (кликабельно)
-
192 1 0 Здравствуйте, заинтересованный в вашем проекте, готов выполнить его в ваши сроки и соблюдая ваши ТЗ, прикрепляю свой образец некоторых работ
https://big-viktor.github.io/Cripto
https://next-js-social-62mrayxtz-academictest.vercel.app/Home
-
445 1 1 👋 Добрый день!
Я тоже из Одессы, если что можем встретиться :)
💫 Недавно работал с похожей задачей, поэтому выполнить Вашу задачу быстро и качественно.
⏰ Готов приступить к работе как можно быстрее.
💰 Стоимость: 3000 UAH.
⏱️ Срок выполнения: 5 дней.
… 🌟 Работаю без предоплаты.
🎨 Выполненные проекты:
🔗 https://www.voxloud.com/it/en
🔗 https://www.thehomehub.net
🔗 https://www.elmont.com.ua
🔗 https://go.voxloud.com/activate_now/signup
🔗 https://vlad-yermolayev.github.io/specteh/dist
📩 Пишите, обговорим детальней.
-
572 Доброго дня! Готов к выполнению.
Я занимаюсь разработкой сайтов более 5 лет.
Есть большой опыт верстки различных объектов.
Некоторую информацию о меня Вы можете увидеть на сайте https://aleksandrkorostashivets.github.io/
Верстаю адаптивно под все расширения экранов, кросбраузерно.
Мобильный First
Google PageSpeed - зеленая зона
-
412 5 1 Доброго вечера, АлександрПознакомился по ТЗ, сделаю верстку все с чистым кодом.У меня есть опыт работы с HTML, CSS, JS и другими технологиями.Я четко по макету.Готов приступить прямо сейчас и обеспечить высокое качество работы.Гарантируем вам проект:
качественный и валидный;
адаптивный и кросбраузерный;
Чистым кодом и анимации (при желании).✔✔✔Примеры моей работы:
HTTP://zenpage.000.pe/
https://bribalko.github.io/italic/home.html
Срок исполнения: 3 до дней.✔✔Цена: 500 грн .Пишите, давайте поговорим подробнее!
-
340 6 0 Привет!
Работаю с таким стеком: HTML/CSS/SCSS/JS/Jquery/React/TailwindCSS/bootstrap5/BEM/pixel perfect/responsive design etc.
Ознакомился с вашим Т3. Готов выполнить верстку в срок. Срок работы до 6 дней. Все правки и пожелания будут учтены. Пример моего кода в портфолио (см.).
На связи в любое время.
Цена вопроса 4000грн.
Спасибо за внимание!
Буду рад сотрудничеству.
-
688 10 0 Добро пожаловать, подробно ознакомился с ТЗ. Готов приступить к выполнению вашего заказа. Я делаю все четко по ТЗ. Получите чистый структурированный код по БЕМ, адаптив к всем размерам экранов. Цены и сроки выполнения указаны по имеющимся четырем страницам, что сейчас находится в Фигме (только верстка). Буду благодарна за сотрудничество. Более подробно мы можем обсудить.
П. С Для выполнения анимации монет нужны изображения отдельно каждой монеты, а у Вас сейчас в фигуре это все одним изображением сделано.
-
285 3 0 Доброго времени суток.
По ТЗ разу видно что человек с Одессы.
Так я вам скажу: любой каприз за ваши деньги!
Примеры на которые вы ссылаетесь смонтированы в разного рода конструкторах, но Вы же наверное хотите получить неповторимый, валидный код ручной работы, который будет легче и быстрее? Jquery уже желательно не использовать.
Высылайте макет, будем посмотреть
-
212 Готов Вам помочь, сделаю 100% полный фронтенд.
Используя разнообразные технологии к выбору заказчика
-
466 13 1 Добрий день.
Надайте доступ до макету для оцінки.
------------------------------------------
-
477 2 0 Добро пожаловать! Знакомился с ТЗ, готов к работе. Для уточнения деталей пожалуйста напишите.
-
546 7 0 Доброго дня, готов выполнить.
Большой опыт в вёрстке и оптимизации .
Цена - когда увижу макет.
Сроки - когда увижу макет
-
445 8 0 Добрий день, Алекс. Прочитал ваше ТЗ, довольно интересно. С нетерпением хотеться с вами поработать.
Вот несколько примеров моих робот.
https://grays26.github.io/grants/
https://grays26.github.io/freebie/
https://grays26.github.io/alex-blog/
https://grays26.github.io/book/
https://grays26.github.io/HomeServices/
Корпоративные:
https://grays26.github.io/ship/
… https://grays26.github.io/clinic/
Для адекватной оценки работы необходимо взглянуть на макет. Пока ставлю заглушку. Моя лика открыта и ждет вас. Напишите, пожалуйста, обсудим этапы проекта.
-
4873 39 0 Обращайтесь если хотите качество
______________________________________
-
180 1 0 Дедушка, готов твой лендос сделать! Все там понятно, одно с кефремом играть нужно где монеты ливитируют) Так что рад буду сопарником! Сроки уже скажу точно, как макет смотрю
-
1705 18 0 Добро пожаловать
Я создаю сайты с адаптивом, которые прекрасно отображаются на всех устройствах.💻Пишу на чистом коде html/css(scss)/js(jquery)
Мой портфолио dimafomaa .online
Реальные сроки и стоимость можно указать после рассмотрения и обсуждения задачи 👍🏻
Некоторые из работ для быстрого осмотра:
HTTPS://leprint.com.ua
… HTTPS://ecoclean.ua/
HTTPS://dimafomaa.github.io/chef/
https://dimafomaa.github.io/nove/
https://speeddating.in.ua/
HTTPS://rudenkocenter.online🎨
-
481 6 0 Доброго вечера, ознакомился с ТЗ готов выполнить верстку лендинга, верстку чистым кодом на html, css, scss, с добавлением js функционалу, верстку кросбраузерно, адаптивно, семантично, с соблюдением ВЕМ методологии
Для более подробного обсуждения пишите в ПП
Примеры моих работ из верстки
HTTPS://vitalik-13.github.io/my-portfolio/
-
1070 33 1 4 Доброго времени суток, я фронтенд разработчик с коммерческим опытом более 6ти лет, в верстке я профессионал, обращайтесь, буду рад сотрудничеству!
-
234 Александр, здравствуйте! Хочу поблагодарить за подробное и грамотное ТЗ, читать легко и приятно, грех его не придержаться в работе. Хочу сотрудничать с Вами как минимум из-за этого)
Обычно я работаю на JS фреймворках, (React, Next.js), но работа с чистыми HTML/CSS для меня не проблема.
На счёт деталей проекта и моих предложений к нему, с удовольствием с Вами пообщаюсь в ЛС, а так ТЗ предельно ясен и вопросов практически нет. Только на макет бы взглянуть сначала)
На счёт анимаций, с удовольствием попрактикую Ваши предложения.
Пример моей работы, минималистичного анимированного сайта:
https://pur-ruby.vercel.app/
-
1988 22 0 Добро пожаловать!
Буду рад сотрудничеству. Всегда на связи. Обращайтесь .
Примеры работ https://web.khorol.com.ua
-
457 6 0 Готов взяться за работу. Более детально по цене смогу сказать когда увижу макет.
-
7160 88 0 Готов взять верстку в работу, сделаю все согласно тз, гарантирую высокое качество своей работы в указанный срок! Спасибо, обращайтесь. Для корректной оценки нужно увидеть макет
-
554 7 0 Здравствуйте, Алекс!
Спасибо за подробное ТЗ, это достойно уважения!
Прикрипите макет, для оценки сроков и цены.✅
Также предлагаю не использовать библиотеку Jquery так как она уже немного устарела, будет лучше если сможем обойтись без нее, что скажете?
С остальным ТЗ согласен, и вопросов нету!
Предлагаю боле подробно пообщаться насчёт сотрудничества, жду от вас ответ!
… Несколько моих работ:
dskasteel.com
sergiygit.github.io/detailing
odorlessrefinish.com
С уважением, Сергей!
-
420 6 0 Добро пожаловать! Можно ли получить доступ к фигме для оценки сроков и цены? Спасибо вам .
-
1821 38 1 Здравствуйте! Можно доступ к фигме для оценки сроков и цены? Буду рад сотрудничеству. Спасибо.
-
Вітаю! Дуже змістовне ТЗ, а можна побачити хоча б скріни макету?
-
Доброго вечора!
Опис проекту/ТЗ -- вище всяких похвал. Але без можливості подивитися на те, що ви маєте у фігмі — дати адекватну оцінку неможливо. Поділитесь доступом? read only буде достатньо. Або хоча б пару скріншотів..
-
"разработка 3 страниц лендинга" 😂
-
Актуальные фриланс-проекты в категории HTML и CSS верстка
Разработка интерактивной карты Palworld для сайтаНеобходимо разработать интерактивную карту Palworld по примеру: https://palworld.gg/map Нам нужна не просто статическая картинка, а полноценная интерактивная карта, где пользователь может смотреть локации, включать / выключать категории объектов, искать нужные точки и… HTML и CSS верстка, Javascript и Typescript ∙ 1 час 39 минут назад ∙ 11 ставок |
Настройка интернет-магазина тканей на WordPress + WooCommerce по шаблону Astra
14 825 UAH
Необходимо настроить и подготовить к работе интернет-магазин мебельных тканей для рынка Норвегии. Домен, хостинг и WordPress уже установлены: eximtextilnordiq.com Сайт нужно сделать не с нуля и без индивидуального программирования, а на готовом бесплатном шаблоне Astra,… CMS, HTML и CSS верстка ∙ 6 часов 32 минуты назад ∙ 46 ставок |
Сайт реберня-піцеріяКлиентская часть — динамическое меню с Firebase, категории с вкладками, карточки блюд с фото и ценами, поддержка двух размеров (пицца 30/40 см), адаптивный мобильный дизайн, боковое меню с контактами и локацией. Админ-панель — авторизация, управление категориями и блюдами… HTML и CSS верстка ∙ 10 часов 23 минуты назад ∙ 72 ставки |
Необходимо сделать доработку на сайте Modx Evolution CMS 3.1.7
1000 UAH
Разрабатывается доработка дизайна и верстка сайта, нужно будет внедрить эти работы на сайт. Также внедрить некоторые доработки на сайте. HTML и CSS верстка, PHP ∙ 11 часов 3 минуты назад ∙ 21 ставка |
Разработка карты семян Minecraft Java / просмотрщика семян для сайтаРазработка карты семян Minecraft Java / Seed Viewer для сайтаОписание проекта Необходимо разработать браузерный инструмент Minecraft Java Seed Map / Seed Viewer, который будет работать на нашем сайте и позволит пользователю ввести семя Minecraft Java Edition и просмотреть… C и C++, HTML и CSS верстка ∙ 1 день 3 часа назад ∙ 13 ставок |