Икотий Айтишевич

https://codepen.io/garisun/pen/ZEOoMpL
И это на почитать: https://developer.mozilla.org/ru/docs/Learn/Gettin...

Если картинка с стороннего ресурса, то загрузить её при нажатии можно только с помощью JS. Если хотите, чтобы работало правильно, то загрузите её на свой сервер.

С учётом того, что Вы новичок, можно использовать пока что готовые решения:
https://owlcarousel2.github.io/OwlCarousel2/
https://kenwheeler.github.io/slick/
https://getbootstrap.com/docs/4.5/components/carousel/

Как вариант, привязать к кнопке отправки формы ссылку с атрибутом download.

<form>
<input type="text">
<input type="text">
<a href="ссылка на файл" download><button type="submit">Отправить форму</button></a>
</form>

Потому что это цикл for и в верхнем коде он повторяет одни и те же действия. Поэтому изображение обратно не изменяется. Попробуйте подставить alert'ы в if'ы и поймёте о чём я говорю.

В принципе, ответ уже дан, но хочу добавить, что семантически неправильная вёрстка. Блок с меню должен быть в теге <nav>, а сам список в теге <ul> и каждый пункт меню обёрнут в <li>.

И вообще рекомендую почитать про семантику и вылечиться от диватоза.

<input type="text" onkeydown="this.style.width = ((this.value.length + 1) * 8) + 'px';">

Только через absolute и z-index, через box-sizing: border-box. Либо уже через JQuery или JS.

Прочитать про рамки можно тут: https://developer.mozilla.org/ru/docs/Web/CSS/border и про рамки с разных сторон смотрите свойства border-left, border-right, border-bottom и border-top.

Но если Вам надо 50% процентов блока покрыть рамкой, то лучше использовать border-image-source и border-image-slice. Подробнее тут: https://developer.mozilla.org/en-US/docs/Web/CSS/b...
А чтобы отцентровать содержимое читайте тут: https://developer.mozilla.org/en-US/docs/Web/CSS/j...

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

Для того, чтобы изменялось взавиcимости от разрешения экрана - надо задать свойству width или height

• vh - эквивалентно 1% высоты окна браузера.
  
• vw - эквивалентно 1% ширины окна браузера.
  

Да, всё можно реализовать за счёт CSS, SVG(но это долго и колхозно) или JS(выбор чего будет разумней).