Antony Bark

поясните термин "отступы", line-height это межстрочный интервал. А лучше киньте пример сюда )

при использовании в content национальных символов, кодировка должна быть указана в самом css :

@charset "windows-1251";
@charset "UTF-8";
...

спецификация

p.s. дополнение: возможны проблемы с подгрузкой шрифта (у вас font-family: "CirceRegular";), желательно расширить варианты для перекрытия глюков и подтягивания системного шрифта, например

font-family: "CirceRegular", Helvetica, Arial, sans-serif;

скилл неплохо оттачивается на вёрстке стандартного раздела "каталог товаров", включая страницу товара, корзину и форму заказа.
Тут и сетка и медиа-блоки и формы, развитая логика. Плюс в том, что вам обязательно попадётся магазин в дальнейшей практической работе.

p.s. Мой личное: работа над абстрактными проектами, для себя, - не имеет большого смысла, если вы не в самом начале изучения азов. Выгоднее за бесплатно, но поднимать реальный проект, живой. Пусть даже не масштабный и не интересный именно вам. Идите волонтёром, получите правильный опыт работы в команде )

проверьте ваш пример, по ссылке он пустой

если без хаков, то это стандартное выпадающее (вверх) меню, только иная стилизация
самый чистый по вёрстке способ, - применить на button JS (click) на замену класса стиля ( display: none > display: inline-block )
если не умеете, скажите, скину код

Требование работодателя ради тестирования на вакансию что-то сверстать яркий признак проблем с работодателем в будущем.

Вариантов причин подобного подхода немного:

• В конторе либо нет программиста(ов), способных провести классическое собеседование с будущим коллегой, либо они есть, но в конторе бардак с дисциплиной и ролями. (будет крайне тяжело работать)
  
• Это не контора, а чел "набрал по объявлению", как правило "под идею", в надежде либо развиться во что-то за счёт стартового энтузиазма новичков, либо тупо ставя на использование рабского труда, типа, "не платили и я сам ушёл". (нормальной работы не получится вообще, наниматель вначале немного может и заплатит)
  
• Чистое мошенничество "на доверии", посредничество между заказчиками и разовыми исполнителями. (работы много, вся без оплаты, много нервов)
  
  Любой другой вариант -- из области фантастики.
  
  По стандарту, кандидата просят что-то предъявить, какие-то образцы его работ (если нет портфолио), проводят собеседование (часто не одно). Солидные конторы изучают кандидатов и их скилы ещё до всякого собеседования :)
  
  p.s. имейте свои заготовки, выполненные самостоятельно(не копипаст) и залитые вами на какой-то доступный хостинг, с использованием разных технологий и сеток, например:
  //на чистом CSS //с bootstrap //с *SS(препроцессоры);
  реализация этого добра в виде //трёх-страничного сайта //леддинга //+ какая-нибудь сложная форма (корзина интернет-магазина тут выигрывает)
  Это и показывайте, пары-тройки примеров вполне должно хватить работодателю для оценки культуры и мастерства верстальщика.
  заодно натренируетесь ;)
  Удачи!

table же :)
Пример на table

p.s. заточено под ваши условия

https://learn.javascript.ru/mousemove-mouseover-mo...

единственно вменяемый способ вёрстки, если монитор меньше, чем макет:

1. из фотошоп сохраняем макет 1:1 в jpg\png
2. вставляем его подложкой

html{min-width:1600px;background:red url('maket1600.png') left top no-repeat;}

3. далее верстаем как обычно, подложка неплохо помогает видеть несовпадения вёрстки с макетом, а для просмотра вёрстки, не входящей по ширине в окно, тягаем гориз.скролл*

* т.к. у нас принудительный гор.скрол, то для оценки ошибок вёрстки по ширине даём red, если косяк - справа появится красный край
** учитываейте, что body и остальные слои поверх подложки на время вёрстки обязательно надо background-color: transparent

Есть работа. Реальный сайт в количестве 1шт.
Советы получите в процессе производства.
скайп antonybark

может быть так? preserveAspectRatio="none"

история моих редакторов за 15 лет:
notepad*, php editor, notepad+, sublime*, shorm, idea
* использую и сейчас

тема годная )
если верстак не умеет "писать код руками", применение им бутстрап и прочих "ускоряющих дело" технологий только во вред делу.
от "яростных" поборников технологий бывает потом ох как немало проблем

Г-да, не ломайте копий )

Верстальщик владеет профессионально HTML{XML}\CSS

+ хорошо знаком с рядом графических программ и базовых технологий для уверенной работы с макетами от дизайнеров: иконки, растрово-векторные дела{PNG\SVG}, спрайты.. понимание основ типографики и "usability" очень приветствуется ;-)

+ верстак способен не накосячить в применении шаблонов JS (счётчики, эффекты и проч.)

+ также надо уметь не косячить, верстая в "смешанном" коде, с пересекающимися технологиями (PHP, JAVA, NODEJS ..), понимая основные языки программирования на уровне простейшего синтаксиса, и не более того (понимать механизмы работы "программерского" кода - лишнее, главное понимать, где начинается и где кончается "чужой" код, применение "''" и тд. )
-- в последнем верстальщику вполне помогают специализированные инструменты, подсвечивающие синтаксис и ошибки, например верстать в среде IntelliJ IDEA )

Естественно, знание VCS SFTP/SCP основ работы с хостингом всегда приветствуется

Вообще, умение быстро "раскусывать" проблемы и грамотный подбор инструментария для работы, по-моему, самые важные вещи для верстальщика

всем бобра!