Vlad

Добавьте к форме атрибут target.
<form target="_blank">  

Есть стилевое свойство для этого -- backdrop-filter, работает только в Safari.
https://webkit.org/demos/backdrop-filter/
Универсальных вариантов несколько. Вот пример, использующий SVG.
https://codepen.io/iamvdo/pen/VLOGdw

Задайте для .block в стиле vertical-align: top.

Это не совсем поиск. Используется этот плагин jQuery для автодополнения, затем форма отправляется на сервер, где программа на PHP решает что делать с введённым текстом.
https://www.devbridge.com/sourcery/components/jquery-autocomplete/

На htmlbook используется Quiz, это модуль для Друпала.
https://www.drupal.org/project/quiz
Чтобы такую систему установить, надо вначале поставить локальный веб-сервер, потом Друпал 7, потом Quiz 4. На первых порах будет сложно, потому что и то и другое к новичкам беспощадно. Попробуй WordPress, он проще, и под него тоже есть модули тестирования. Вот этот, к примеру.
https://wordpress.org/plugins/wp-pro-quiz/
Если тесты несложные, то можно чисто на JS сделать. Вот готовый пример.
https://codepen.io/gcarino/pen/LDgtn

Это особенность браузеров и не является проблемой. В спецификации HTML5.1 не регламентировано что текст в alt должен обязательно показываться, поэтому это отдано на откуп браузерам. Вот поэтому у них и разное поведение.
https://www.w3.org/TR/html51/semantics-embedded-content.html#alt-text
В общем, советую не напрягаться по этому поводу. Оставить обязательно alt, при необходимости продублировать текст через title.

cursor: zoom-in;

Оптимизируйте картинку в редакторе вначале. Можно через онлайновые сервисы, вроде этого.
http://optimizilla.com/ru/

Вместо top надо указать желаемое значение в px или в cm, если больше нравится. Метод Подборского вам в помощь.
Вместо center используйте calc(50% - 6cm) - здесь опять же отнимаете или прибавляете нужное значение вместо 6cm. В какой бок хотите сдвинуть вы не указали, поэтому плюс смещает вправо, а минус влево.

Именно такой найти не удалось, но вот список всплывающих окон, можно на каждый щёлкать и справа есть Try a Demo. В итоге подобрать подходящее или доработать для себя.
 
https://plugins.jquery.com/tag/tooltip/

https://www.ihor.ru/vds
3 дня бесплатно для теста.

Используй <pattern> и <image>
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_Image_Tag
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Patterns
 
http://jsfiddle.net/webref/w1yesyq5/4/

Изначально хотели чтобы значения type и rel различались и охватывали разные типы документов. На практике, type у <link> свёлся к одному значению, поэтому в HTML5 этот атрибут не обязателен, в отличие от HTML4.

Может стоит использовать относительные пути к картинке?

Если фон отноцветный, то можно часть рамки закрасить цветом фона через псевдоэлементы. Вот здесь красным закрасил для наглядности.
http://jsfiddle.net/zzm31dnt/

Советую в следующий раз выкладывать код на jsfiddle и давать на него ссылку.
 
У вас блоки inline-block, на них действует line-height (межстрочное расстояние, проще говоря). Поэтому <span> надо задать как display: block или заменить <span> на <div> или родителю задать line-height: 0.

Скобки лишние надо убрать.
$submit-color: red;@mixin dark-color($color) { background: darken($color, 5%);} .subs-submit:hover { @include dark-color($submit-color);}

Круглые уголки у внешнего блока, конечно же. Для скошенного уголка border-radius не подходит, приходится идти на хитрости.
 
http://jsfiddle.net/vb1kznrr/