ink

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

вот эта строчка есть ?

.box-content:first-child ul a{
    font-size:18px!important;
}

justify-content:flex-end; или align-items:flex-end; как то так вроде

ну файл то наверно должен находится на сервере а не в системе

lokeshdhakar.com/projects/lightbox2

банер - это по сути мини слайдер только созданный в программе ,маленький список : zuxcel.com/sozdanie-bannerov

head - это вообще служебное поле , и туда ни какой разметки не надо пихать , в редком случае можно туда добавить css в теге <style></style>
то что вы хотите можно сделать одним именем для class : flex_element и везде куда поместите этот class будет flexBox , а header, middle,footer и другие семантические теги html для семантики а выполняют роль обычного блока

<div onclick="window.open('http://google.com, '_blank');"></div>

так наверно правильнее

а как скачивал ? какой инструмент применял ?

это называется не смена картинок - а слайдер изображений или курусель изображений

если к примеру не умеете писать слайдеры самостоятельно то пишите в yandex/google/rambler такую поисковую фразу : img slider html js
возможно что ссылки будут вести на github , это хранилище всего кода из сети и от туда качаете смотрите и делаете точно у них в html но с рзницей в том что вам надо поместить ваш слайдер в определённый блок

beloweb.ru/javascript-jquery/9-bibliotek-na-javasc...

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

первое что заметил - это скрол внизу появляется
второе увидел что в десктопной версии нету меню но в мобилке есть
да шрифт бы другой ...для заголовков Times New Roman для параграфов Hlvetica или что то из системных шрифтов типа serif

не видно в css вот это :

margin:0;
padding:0;

Вот смотрите просто же ?