ⓒⓢⓢ

Что-нибудь из такого

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">

потому что картинка (тег img) строчный элемент - сделайте его блочным

// псевдокод
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);

(псевдокод):

margin: 0 auto;
height: 69vw;
min-height: 250px;
max-height: 450px;

зря, конечно, тут абсолютом центрировать, но если хочется, то пробуйте так:

left: 50%;
transform: translateX(-50%);

в вашем случае нельзя

посмотрите на барахолке с рук в вашем регионе.

на али самое плохое, это возврат средств. Если захотите вернуть всю стоимость ноутбука, то придётся возвращать его за свой же счёт, т.к. на половину рабочий ноут вряд ли вас устроит ... это ещё 1-2 месяца ждать.

На счёт качества - как повезёт, не сказать, что прям говно, а некоторое и лучше чем у нас (Россия?), но и поломки частые. Недавно плату заказывал пришла с нерабочим модулем сетевого адаптера. В возврате предложили или копейку за цену именно модуля (его ещё перепаять надо) или вернуть продавцу ноут за свой счёт ...

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

вообще не согласен с "эсвэгэ" комментаторами, непонятно почему нельзя рисовать на css, теоретически любой свг можно описать css стилями.
практически, примеры
www.tortorse.com/demo/css3angrybirds.html
jsfiddle.net/AlexanderN/onjsw3kv/2
https://bennettfeely.com/csscreatures/

если правильно понял вопрос, то к vue мало имеет отношение, ближе к сборщику проекта.
если используете webpack, посмотрите на пакет
style-resources-loader

это вполне может быть встроенный в браузер проигрыватель.
сохраните эту страницу - она должна быть в формате музыкального файла.
а как скачивать файлы через php, тут уже не раз обсуждалось

тоже интересно стало, набросал черновик, через phantomJs
рендер промахивается частями и медленный жутко, но цвета забирает
https://codepen.io/jrkdv/pen/pZrepe?editors=0010

а вы знали, что на хабре 42 цвета используется только для текста? =)

Не понимаю структуру макета и как именно его оформить - лендингом или многостраничным сайтом

Вообще складывается впечатление что предоставлено два макета.

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

Если в архиве есть 5 макета, то от вас ждут 5 html страничек с названиями, как у макетов

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

Переходы\Ссылки между страницами в общих случаях вы и не должны знать, вы потратите своё время, время заказчика и время фронта - (спросите у заказчика куда ведут ссылки, расставите ссылки, на фронте будут удалят ссылки)

От вёрстки планируют получить внешний вид страницы, но никак не логику работы сайта

потому что && - в переводе как "и", получается аналогично такой конструкции:

$(this).find(".submenu").toggleClass("active");
$(".menu").toggleClass("active"); // <- Ищем все ".menu" и меняем класс

https://jsfiddle.net/tquLh9ys/

$('img').hover(function(){
  	var text = $(this).data('text');
    $('.img-content').html('<h1>' + text + '</h1>');	
  });

Этот кусок кода возьмёт все изображения на странице, и каждому назначит обработчик hover
Если спровоцировать ховер на любой другой картинке, то будет как результат undefined ...

jsfiddle.net/4r8jtk0b

по структуре проекта, каждому своё, например:
/public/ - тут скомпилированный проект (нужна только для github pages)
/source/ - тут проект в исходном виде (less, html, js, fonts, img, ... - всё из чего компилируется проект)
readme.md - описание репозитория
index.html - тут можно редирект сделать в папку public или оставить карту верстки (если страниц много)

Определите отображение символа, например:
display: inline-block;

https://codepen.io/anon/pen/PBGNLZ

вариант 1.
сделать иконку с абсолютным позиционированием, а стиль бордера перенести в инпут (псевдокод)

input {
  padding: 10px 10px 10px 48px;
  border: 1px solid lightgray;
}
input:focus {
  border-color: red;
}

вариант 2.
Сделать слой бордер после инпута и использовать селектор соседей (псевдокод)

input:focus + div.border {
  border-color: red;
}