Архив: Нужен верстальщик, сверстать главную страницу сайта

Бюджет 50$ / 3000
руб
в месяц
Создан: 4 года назад
Закрыт
Описание
По срокам – демократично, укажите ваши
Макет – сейчас превью, заинтересовавшему вышлю оригинал для оценки

Техническое задание на верстку

Необходимо выполнить адаптивную верстку макета главной страницы сайта. Psd макеты прилагаются – в 3 вариантах:
• основной,
• для планшетов,
• мобильный.

Общее
Необходима верстка безотносительно к CMS или к фреймворку, натяжка на фремворк будет выполнена программистом, поэтому только HTML + CSS + JS (CSS и JS в отдельных файлах)
Кодировка файлов utf-8 без BOM

Приемлемое отображение и доступность всех функциональных элементов при отключении пользователем JavaScript и/или картинок, а также при увеличении/уменьшении шрифта (в том числе не блокировать изменение шрифта).
Вёрстка должна проходить тест на переполнение контентом. Вёрстка не должна ломаться:
• При добавлении в элементы большего количества текста.
• При использовании картинок с неподходящими размерами.
Текст не должен выпадать из объектов.
Переполнение контентными блоками не приводит к нарушению сетки.

Из повторяющихся однообразных участков кода в блокe достаточно сверстать только первый и размножить его для проверки корректного заполнения контейнера.

Все текстовые элементы макетов должны верстаться текстом, за исключением случаев, где подобная реализация невозможна технически.

Кроссбраузерность
Одинаковое отображение дизайна в наиболее распространенных браузерах, вёрстка должна корректно отображаться. Горизонтальная прокрутка не должна быть ни в одной из версий сайта, ни в одном браузере. Сайт должен нормально работать в IE11. FF, Opera, Safari, Chrome – 2 последние версии этих браузеров на текущий момент (в том числе мобильных).


Соответствие макету
Верстка должна соответствовать макетам. При этом верстка не выполняется методом Pixel Perfect. При накладке допустимы незначительные различия.


Требования к коду вообще
Использовать новые стандарты HTML5/CSS3.
Чистый, валидный код HTML5 и CSS3.
Код должен быть семантически корректным.
При выборе между средствами javascript и чистыми HTML5/CSS3 предпочтение должно отдаваться последним.
Использование хаков крайне нежелательно, но допустимо. 
Все файлы кодируются в кодировке UTF-8 без BOM.


HTML
Для разметки используются теги HTML5.
Форматирование HTML иерархическое. Иерархию кода нужно выделять табуляцией.
Используется блочная верстка.
Структурный, комментируемый код (обозначается начало/конец крупных блоков).
Отбивка табами.
Семантическая разметка на уровне грамотного использования тегов.
Имена классов и идентификаторов – осмысленные.
Нельзя использовать транслит в названиях классов, атрибутах и так далее.
Нельзя строить сетку с помощью таблиц и позиционирования.

CSS
Все стили должны быть прописаны во внешних файлах.
Адаптивность на фрейморке bootstrap.
Используется именование классов по БЭМ.
Комментирование css необязательно.
Иерархию кода нужно выделять табуляцией и пустыми строками.
Не использовать !important без крайней необходимости.
Допускается использование вендорных префиксов.
Стили для IE7-8 вынесены в отдельные CSS.
IE7-8 для реализации не поддерживаемых CSS свойство допустимо использование Javascript и expression.

JS
Скрипт в отдельном файле.
Использовать jQuery последней на данный момент версии.

Разьяснения по макету

Там, где текст на макете – должно быть текстом (не рисунок).

Шрифт должен быть соблюден

"Сейчас слушают на сайте" (карусель популярное) – должна быть каруселью (легковесный jQuery плагин на выбор верстальщика).

Элементы в блоке "Популярное" (слое) – кликабельны как сами большие элементы ("записи") – 1) квадраты, так и отдельно – 2) аватары пользователей на них, вместе с именем пользователя – 1) и 2) это разные ссылки. Кнопка "показать все" – открывает полный список скрытых элементов (добавить пару линий элементов).

Элементы "Записи" (квадраты в блоке "Популярное") со своим содержимым должны быть сверстаны таким образом, чтобы их можно было повторно использовать на других страницах сайта, подключив данный CSS и поместив данную разметку в другие контейнеры.

Плейер внизу (он ничего не должен проигрывать, это разметка) – должно работать изменение позиции воспроизведения при нажатии на полосу в любом месте или при перетаскивании бегунка (т.е. надо визуально передвинуть бегунок). Плейер должно быть легко скрывать и отображать программисту, просто установив нужную видимость блока плейера (т.е. на остальную разметку это не должно влиять).

Плейер всегда прикреплен к нижней части окна браузера (при прокрутке).
Категория

Похожие проекты

safe 
11 0
Нужен сайт по открытию кейсов для игры Standoff 2. Нужен самый обычный дизайн. Личный кабинет, инвентарь, авторизация через ВК. В Админке должна быть возможность создавать/удалять кейсы, редактировать шансы на выпадение какого-либо дропа, количество кейсов, устанавливать цену. В Админке должна быть возможность......
2 недели назад
 
0 2
Требуется веб дизайнер для  2х проектов:. Оптимизации существующего сайта (лендинг) по танцевальному фитнесу на wix. com. Создание онлайн магазина био добавок и его оптимизация.   Ищем профессионального дизайнера, который готов на долгосрочное сотрудничество....
 
0 0
Нужно сделать сайт просчет оффера. Верстка страницы с Figma....
2 недели назад
$33
10 0
Мне нужен бот перехватчик для программы ( taxsee driver ) чтобы брать предварительные и текущие заказы. Требования: . 1 бот перехватчик нужен для android. 2 можно писать bоt под моим аккаунтом или другие варианты. 3 функция отключения и включения бота когда он нужен или не нужен. За хорошую работу готов......
2 недели назад
 
76 1
Ищу фрилансера для создания лендингов на Битрикс24. Занятость постоянная, 1 раз в 3 месяца....
2 недели назад
 
138 1
safe 
498 3
Необходимо написать небольшую серверную часть учебного сайта для запуска под виртуальной машиной Oracle VM VirtualBox  Debian 6. 1 используя php7. 33 и базу MongoDB....
safe 
134 3
ИЩУ СПЕЦОВ – ВЫСОКОГО УРОВНЯ!   1). Уточните, какое у вас образование. 2). Обязательно предоставьте портфолио - лучшие работы. 3). Условия сотрудничества – по договоренности (сообщите ваши предварительные условия).   П. все предложения, которые меня заинтересуют – либо отвечу, либо сохраню контакты в......
3 недели назад
 
89 1
Нужно будет делать видео по примеру уже готового видео. Вы подойдете если : имеете базовые-легкие знания в трейдинге,если у вас хороший микрофон, нормальная дикция, и есть программа для снятия экрана на видео. (Себя снимать не нужно,только видео экрана) Чем выше качество тем выше оплата . Оплата за среднее......
safe$111
122 2
Добрый день заинтересовавшимся! У нас сайт на стадии разработки на ОС 3. Создано ТЗ. Необходимо выполнить все пункты в ТЗ. Предварительно 10 000 руб. Поднятие цены можно и обсудить....
$1000
286 5
TALP GROUP Мы занимаемся разработкой и продвижением IT- продуктов. В нашем арсенале множество интересных кейсов, большинство из которых реализованы на нашей собственной low/no code платформе Аltrp. Мы работаем как над внутренними проектами, так и с внешними заказчиками. Среди них: разработка швейцарской......
safe 
174 17
Добрый день. Мне необходимо скопировать действующий сайт с полным функционалом  https://gk-grupp....
4 недели назад
 
198 12
Ищем специалиста для работы над дизайном агенства недвижимости для англоязычной аудитории....
safe 
109 1
Меняли хостинг сайта поэтому имена сервера слетели, надо поменять на новые и все....
$250
315 13
Разработка продающего лендинга, ТЗ во вложенных файлах....
 
164 5
Нужно ускорить загрузку сайта....
1 месяц назад
$7
144 2
Фотографии улыбок до стоматологического лечения и после. Нужно из сопоставит а схожих ракурсах и выровнить цвет , скореекситровать детали....
1 месяц назад
 
140 1
есть форма приема заявки на тильде, необходимо проверять номер телефона заказчика перед отправкой в работу....
1 месяц назад
 
228 3
Необходимо доработать WordPress шаблон, настроить интеграцию с 1с, исправить незначительные баги. Технические задачи обсудим вместе с техническими директором заказчика. Условия: Стоимость работ от 14к, в случае быстрого выполнения работы будет премирование, а также предложим постоянное сотрудничество.......
safe$63
147 4
Нужно поднять сайт на базовой теме на связке Ghost + Gatsby + CDN. Саму CMS Ghost надо будет поставить и настроить на хостинге заказав необходимый по параметрам сервер. Что касается CDN думал о G Core Labs, но приму любой совет. Сайт ориентирован 100% на РФ. После того как поднимем сайт, нужно будет......
Смотреть все