Фрилансеры › Сергей Белый

Адаптивно мобильная вёрстка мультилендинга с формой заявки, картой, слайдером и выезжающими кликабельными элементами при наведении на картинки-курсов.
Сайт сделан на HTML5/CSS3 с частичным использованием сетки Bootstrap3

Создание макета, адаптивная вёрстка, сборка ядра, заказ статей, посадка на админку Wordpress и настройка плагинов

Адаптивная кроссбраузерная вёрстка на чистом коде. Логотип меняется при наведении, меню сделано градиентом, который меняется в обратный после наведения.
Края у картинок по умолчанию закруглены.
У ненумерованных списков по умолчанию убран кружок и заменён на маленькую соту
Нумерованные списки берутся в обводку со своим фоном, внутри обводки слева мы видим картинку, а справа сам список.
Первая буква каждого абзаца выделена другим цветом и имеет другой шрифт.
Длина сайдбара и основной колонки автоподстраивается одна под другую.
На маленьких планшетах и телефонах боковая панель уходит под основнйо контент.
Все элементы оптимизированы, что вместе с подключёнными плагинами позволяет добиться скорости 96% на ПК и 87% для мобильного на момент передачи сайта
Вёрстка посажена на Wordpress последней версии
Разработано ядро под 480 статей объёмом от 5 до 10.000 СБП

Сайт заглушка в виде карусели с кликабельным логотипом и кнопкой регистрации. Кнопка регистрации свёрстана со свечением и изменением этого свечения при наведении.

Адаптивная вёрстка на Bootstrap3. Меню превращается в гамбургер, но оно не Boot, а самописное.
Многие элементы по умолчанию полупрозрачны, при наведении становятся яркими.
Блок Features с изображением мобильного адаптируется следующим образом: на планшетах надписи слева, а телефон справа, на мобильных устройствах картинка телефона сверху, а всё остальное под ней.
Блок Works при наведении на работу в портфолио получаем получаем полупрозрачное затемнение с изображением глаза, названием проекта и категорией.
Блок Team при наведении на специалиста появляется затемнение с краткой информацией и ссылки-соц сети на его профили для перехода.
Форма обратной связи: если поле заполнено корректно, справа в нём появляется зелёная галочка, некорректно - красный восклицательный знак.
Карта гугла адаптируется под размер экрана, сохраняя пропорции дизайна, при этом для мобильных устройств задана минимальная высота элемента (чтобы карта не была полоской).
Ширина сайта варьируется под экраны от 360px до 1160px

HTML письмо с подтверждением регистрации на сайте

Адаптивная кроссбраузерная вёрстка интернет магазина с рубриками новое на сайте, интересные товары, формой обратной связи и подпиской, а также картой проезда к магазину

Пример моей вёрстки HTML письма. При необходимости письмо может содержать даже видеофайлы.

Было необходимо разработать и сверстать адаптивно-резиновый сайт с формой социальных сетей facebook, гугл картой и возможность заполнения формы-анкеты участника http://www.brown.com.ua.
1)Разработку макеты выполнила член моей команды https://freelancehunt.com/freelancer/Datso.html

2)Я сверстал адаптивный сайт по сделанным Еленой PSD макетам (HTML5/CSS3 + форма обратной связи для анкеты PHP).
3) Сайт расcчитан на устройства с шириной экрана от 320px (iPhone5, Samsung Galexi).
4)Все блоки на сайте смещаются в зависимости от ширины монитора, так чтобы ничего не выпадало за область просмотра. Текст идущий в 3 колонки на компьютере на планшетах перестраивается в 2, а на телефоне в 1 и т.д.

4)Заполненная анкета уходит на хостинг с редиректом на почты владельца сайта.
5)Формат полученного письма полностью соответствует формату заполненной анкеты
6)Информация на баннере является текстовой и может легко меняться в любой момент
7)Интегрированы кнопки перемещения вверх/вниз страницы
8)вставлена гугл карта которая показывает расстояние до местонахождения объекта

Вёрстка по PSD макетам HTML баннеров для размещения в рекламной сети

составление карты сайта для дальнейшего создания по неё разделов сайта и понимания того в каких именно направлениях следует проводить парсинг

Сео аудит сайта занимающегося декоративным декором