archelon

Можно просто картинкой, а можно попробовать эту штуку:
https://github.com/anseki/leader-line

woff и woff2
ttf не нужен
https://transfonter.org/formats#browser-support

Зависит от дизайна (во многих простых случаях можно и из jpg сверстать) и от pdf-файла.
Если в pdf сохранены слои, текст, векторные объекты, то без особых проблем его можно открыть в illustrator, например.
В общем, смотрите по ситуации. Если в pdf все слои слиты, требуйте исходники.

flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/
grid https://css-tricks.com/snippets/css/complete-guide...

dmi336, width и box-sizing — это разные свойства для разных целей, они нигде и никогда не заменяют друг друга. просто в определенных условиях использование этих свойств с такими значениями дало схожий результат.

блин, тут вариантов 5-6 сходу придумывается.
флекс, флоаты, инлайн-блок, таблицей, в конце-концов.
Но быстрый ответ дать не получится, потому что нужно более-менее четко представлять, ЧТО должно получиться в итоге.
самое быстрое:

.container {
display:flex;
}

подробнее: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
только у вас там .nav ul в медиа-запросах абсолютно спозиционирован, это надо переделать.

Предположу, что длинные числа преобразовываются в ссылку вида tel:123456789, т.е. номер телефона, поэтому просто не видны на зеленом фоне.
Если причина в этом, то вот решение:
https://stackoverflow.com/questions/226131/how-to-...
Нужно добавить в head:

<meta name="format-detection" content="telephone=no">

у вас <div class="fullpage">
а вызов скрипта на #fullpage
пропишите <div id="fullpage">

Есть несколько способов выровнять элемент по центру.
Если оставить как сейчас:

.logo {
    position: absolute;
    top: 0;
    left: 50%;
}

то добавьте margin-left: -Npx;, где N = половина ширины изображения.

тег author не трогайте.
потом каждый раз, когда статью шерят в фейсбуке, вместо имени автора статьи будет высвечиваться имя разработчика.
reply-to - тем более не трогайте.
и другие метатеги тоже.

легитимные варианты:
1. обычно разработчики подписываются в футере сайта. это нормальная практика.
2. human.txt
3. в комментариях в коде

<!-- 
сайт разработан студией такой-то
url, email
-->

Просто делать с учетом 12-колоночной сетки: следить, чтобы элементы вписывались в колонки (или были по всей ширине макета - т.н. "hero").
Этого достаточно.
Собственно, данное требование справедливо и для дизайна без учета бутстрапа.