Serj-One

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

$(function(){
    $('.scroll').click(function(){
       var target = $(this).attr('href');
       $('html, body').animate({scrollTop: $(target).offset().top}, 1000);
       return false;
    });
 });

matthew.wagerfield.com/parallax

https://assets.adobe.com/files - Загружаете туда PSD и прекрасно верстаете без PS.

На новое место работы, где не говорят нелепых фраз вроде:

у нас не гигантские проекты, что бы еще и препроцессоры задействовать

Пользуюсь bootstrap'ом

Ради всего святого, перестаньте.

Что изучать?

• Чистый JS, jQ - не панацея
  
• Gulp - позволит автоматизировать огромное количество задач (на cms или нет - абсолютно не важно)
  
• SASS/SCSS
  
• Git
  
• БЭМ
  
• Учиться верстать руками, а не собирать поделки из бутстрапа
  

Буквально вчера закончил подобный проект.
Оптимальное решение - robokassa
Либо, как уже посоветовали выше - kassa.yandex.ru, но вариантов оплаты меньше.

Если "в лоб", то можно так.
codepen.io/anon/pen/xGJdKe

Нет, ошибки в этом нет. Можно использовать сколько угодно раз.

На все вопросы один ответ - блок__элемент--модификатор
Полная документация БЭМ
Краткая статья на тему

alvarotrigo.com/fullPage
www.thepetedesign.com/demos/onepage_scroll_demo.html
Погуглить не пробовали?

Гуглите, как подключать шрифты. Этот вопрос задаётся по 5 раз на дню.
И подключая из Google fonts, нужно как минимум включать кириллицу.

button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

А в целом для сброса стилей нужно использовать normalize.css , а не ту белиберду, что вы написали.

Задайте это вопрос дизайнеру, который это рисовал.

matthew.wagerfield.com/parallax

Не нужно центрировать текст паддингом сверху. Для этого есть нормальное решение.

input {
  line-height: 30px; // высота инпута
  padding: 0 15px;  // отступы по бокам
}

Вообще, макет перед работой нужно смотреть, и если область контента не соответствует стандартам, обсуждать это ещё до начала работ. Если макет не 1:1, и заказчик об этом заранее не упоминал, шлите со всеми претензиями к хренам собачьим, а за доработки требуйте доплату. На будущее, всегда требуйте от заказчика детальное ТЗ, по которому работа будет приниматься.

У вас шрифт без кириллицы, очевидно же.

#main-navigation li:last-of-type a {
    border-right: none;
}

li:last-child:after - совсем мимо.

Ввод по маске.
В сети десятки плагинов, вот неплохой -
digitalbush.com/projects/masked-input-plugin

Использовать онлайн сервисы из ответа выше - извращение, когда это делается нажатием пары клавиш в редакторе, такие плагины есть для каждого.
Отличный плагин для sublime - https://packagecontrol.io/packages/HTML-CSS-JS%20P...
И, конечно же, это умеют делать инструменты разработчика Chrome.

Вопрос обсуждался уже тысячу раз.
Для IE < 9 нужен шрифт в формате eot, IE 9+ - woff.
Подключайте все нужные форматы.

@font-face {
  font-family: 'room';
  src: url('../fonts/room_bold-webfont.eot');
  src: url('../fonts/room_bold-webfont.eot?#iefix') format('embedded-opentype'),
  url('../fonts/room_bold-webfont.woff2') format('woff2'),
  url('../fonts/room_bold-webfont.woff') format('woff'),
  url('../fonts/room_bold-webfont.ttf') format('truetype'),
  url('../fonts/room_bold-webfont.svg#roombold') format('svg');
  font-weight: 600;
  font-style: normal;
}

Конвертировать можно здесь или здесь

+ насыщенность для одного и того же шрифта , указывается не через разные font-family, а через font-weight, заданный в описании шрифта.
Пример:

@font-face {
  font-family: 'room';
  src: url('../fonts/room-webfont.eot');
  /*остальные форматы*/
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'room';
  src: url('../fonts/room_bold-webfont.eot');
  /*остальные форматы*/
  font-weight: 600;
  font-style: normal;
}

Теперь, указав font-family для всего нужного блока, можно оперировать только насыщенностью, указывая font-weight.