Лучшие работы фрилансеров по HTML/CSS верстке на Freelancehunt — примеры выполненных работ фрилансеров по HTML/CSS верстке в Украине ― страница 157

Switch to English version?

Yes

Переключитись на українську версію?

Так

Переключиться на русскую версию?

Да

Przełączyć się na polską wersję?

Tak

200 000 UAH
Юрба — украинская социальная сеть с анонимным следом

HTML и CSS верстка

Юрба — украинская социальная сеть, сосредоточенная на свободном общении и возможности оставлять анонимный след. Проект создавался как ответ на перегруженный и неудобный функционал Facebook и отсутствие анонимности. Основная идея — дать украинцам свою платформу для обсуждения новостей, проблем и жизни в собственном инфополе, используя инструменты, которые разработаны украинцами для украинцев.

В Юрба также активно используются AI-функции:
- анализ постов и контента для рекламодателей,
… - улучшение рекомендаций,
- помощь пользователям (например, «короткий отрывок из поста» для премиум-пользователей).

Моя роль

Я — соучредитель проекта и отвечаю за:
- UI/UX-дизайн всей платформы,
- фронтенд-разработку (HTML, CSS, JavaScript, собственная библиотека компонентов),
- десктоп-приложение на Electron (WebView + дополнительные AI-функции и интеграции).
- Фактически веду продукт от идеи и прототипов до реализации интерфейса и поведения в браузере/desktop.

Технологии:
Фронтенд: Vanilla JavaScript, HTML, CSS, собственная библиотека компонентов YurbaLib
Бэкенд: Go (Golang), MySQL
Десктоп: Electron (обертка с дополнительным функционалом, включая AI-фишки)
Инфраструктура: WebSocket-уведомления (реальное время для сообщений и части взаимодействий)

Основной функционал проекта:
- Лента записей с возможностью форматирования текста и добавления файлов.
- Профили пользователей.
- Комментарии, лайки, репосты.
- Три темы оформления: светлая, темная и темно-синяя.
- Уведомления в реальном времени через WebSocket.
- Встроенный мессенджер.
- Настройки ленты и профиля.
- Система Yurba Coins — внутренняя валюта для подарков и украшений профиля.
AI-функции:
- анализ постов,
- рекомендации,
- короткие отрывки/резюме для премиум-пользователей.

UI/UX и дизайн-система

Интерфейс построен на знакомой пользователям структуре, объединяя лучшие идеи Twitter, Facebook и других социальных сетей, но в более чистом и логичном виде.
Главный экран — это три колонки:

1. Левая колонка — навигация
меню: сообщения, новости, профиль и ключевые разделы.

2. Центральная колонка — контент
форма публикации поста с настройками форматирования и прикрепления файлов,
основная лента постов.

3. Правая колонка — настройки ленты
дополнительные фильтры, настройки отображения и т.д.

Интерфейс лаконичен и максимально чист — пользователю сложно запутаться даже при первом посещении.

Что я могу предложить вам на основе этого проекта:
- Разработка понятных и «живых» интерфейсов под любые задачи и продукты.
- Умение подбирать цвета, которые работают, с пониманием их влияния на восприятие продукта.
- Структурный подход: и код, и дизайн разбиваю на отдельные блоки/компоненты, которые потом легко масштабировать и кастомизировать.
- Полный цикл: от идеи и прототипа в Figma — до готового веб- или desktop-приложения (VS Code, Git, DevTools и т.д.).

AndreyZeralld
Адаптивная верстка лендинга "Holiday Resort"

HTML и CSS верстка

Верстка сайта по макету: удобная навигация, адаптивность, семантическая структура и базовая доступность.

Vlad_nm
Верстка сайту

HTML и CSS верстка

Верстка сайту для компании, которая занимается ремонтом домов.
#лендинг #лендингпейдж #вебдизайн #версткасайта #ремонтдомов #ремонт #строительнаякомпания #созданиесайта #html #css #uiux #адаптивныйдизайн #корпоративныйсайт #одностраничныйсайт #landingpage #webdesign #webdevelopment #ремонтдома #строительнаякомпания #ремонтдома #html #css #uiuxдизайн #адаптивный #корпоративныйсайт #фронтенд #одностраничныйсайт #WordPress

maximchaploutsky
40 000 UAH
E-зоо

HTML и CSS верстка

webpack scss pug

ixacers
10 000 UAH
Адаптивная верстка сайта хостинг провайдера

HTML и CSS верстка

Адаптивная верстка и интеграция верстки сайта хостинг-провайдера ForceVPS

lemurs
10 000 UAH
Адаптивная верстка лендинга на React

HTML и CSS верстка

Использован react+next.js

lemurs
16 000 UAH
Адаптивная верстка кондитерской мастерской

HTML и CSS верстка

Чистая адаптивная верстка кондитерской мастерской

lemurs
Волшебная Пекарня

HTML и CSS верстка

Адаптивная верстка сайта кондитерской
Использован html+css+js

Oleh_L_agency
Lite Blog WEB Верстка + Адаптивность

HTML и CSS верстка

Полностью готовый лэндинг сайт небольшого блога о странах.

Также адаптированный под все устройства включая 4К мониторы.

Vistrel
8000 UAH
Конфигуратор Nixie в стиле Millclock — HTML5/CSS3 + JS

HTML и CSS верстка

Nixie Clock Configurator — веб-страница настроек nixie-часов в стиле Millclock с живым превью ламп.

Задача
• Передать фирменный темный стиль, сделать страницу адаптивной, с живым предварительным просмотром и мгновенным применением настроек.
… • Поддержка секунд, 12/24-формата, различных режимов разделителя, яркости, подсветки, Wi-Fi и NTP-синхронизации.
• Локализация EN/DE.

Стек

HTML5, CSS3 (кастомные свойства, сетка), JavaScript (ES6)

Верстка
• Архитектура: семантический header/main/section/footer, модульные секции-карточки.
• Стили: CSS-переменные в :root (цвета, радиусы, тени, глоу), кастомные тумблеры и селекты в стиле iOS.
• JS-логика: реактивное обновление превью (форматы времени, сепаратор, яркость, цвет), мягкое мигание разделителя (~1 с).
• Адаптив: clamp-типа графика, гриды, флюидные размеры ламп и сепаратора с сохранением пропорций.

Объем функционала
• Time & Date: формат времени, часовой пояс, DST (США/ЕС/ВЫКЛ), дата, Установить время.
• Display & Lighting: яркость, LED-цвет (RGB), режим сияния/анимации, ночной режим, автозатемнение.
• Connectivity: SSID/Пароль, NTP, тест подключения.
• Sound & Alarms: часовой сигнал, будильники, громкость.
• Modes & Safety: игровой автомат, единицы температуры, отображение температуры.
• System: имя устройства, обновление, прошивка, сброс.
• Separator: мигающий/статический/выключен; отдельный «малый» nixie-разделитель с вариантами «:» и «.»
• Спец-символы: °C и °F в nixie-стиле.

#Nixie #UI #UX #WebDesign #Frontend #HTML5 #CSS3 #JavaScript #SVG #Canvas #Animation #Responsive #DarkTheme #IoT #Clock #Millclock #Accessibility #Localization

pasharadio
4000 UAH
Форма, которая генерирует картинки с помощью ИИ

HTML и CSS верстка

Можно выбрать:
- модель ИИ
- Сколько картинок
- размер картинок
…
И так же можно менять цветовую тему

Alecseyy
5000 UAH
idStudio

HTML и CSS верстка

idStudio — сайт креативного digital-агентства (Frontend)
Розробила адаптивний сайт для студії дизайну та розробки. Дизайн побудований навколо мінімалізму, ясної структури та ефективної візуальної подачі.

Що реалізовано:
…
Адаптивний дизайн для мобільних, планшетів і десктопів;
Навігація з плавною прокруткою;
Збірка Webpack з SCSS.

Технології:
HTML5, SCSS, JavaScript (ES6), Webpack

#Frontend #HTML #SCSS #JavaScript #Webpack #АдаптивнаВерстка #ФронтендРозробка

dev_anastasya

HTML и CSS верстка