Артур Левенсон

innerHTML = перезатирает всё что внутри и потому надо иметь две разные сущности куда выводит текст из первого value и другая сущность для вывода второго value

document.querySelector("button").onclick = myClick;

    function myClick(){
        let a = document.querySelector(".input-test");
        document.querySelector(".out").innerHTML = a.value;
        a.value = "";
    }

Для этого есть полноценный API для Youtube Iframe. Вот ссылка:
https://developers.google.com/youtube/iframe_api_r...

const list = document.querySelectorAll('.list .test')
window.addEventListener('click', (e)=> {
  const target = e.target;
  if(target.classList.contains('test')){
    resetActiveItem()
    target.classList.add('active')
  }
  
   if(target.classList.contains('reset')) {
     resetActiveItem()
   }
})
function resetActiveItem() {
  list.forEach(item=>item.classList.remove('active'));
}

const button = document.querySelector('.reset');
button.addEventListener('click', () => {
    document.querySelectorAll('.active').forEach(element => element.classList.remove('active'));
});

ну и <div class="reset">сброс цвета</div> заменить на

<button type="button" class="reset">сброс цвета</button>

li:first-child

https://docs.modx.com/current/en/extras/getresourc...

<div class="wrapper">
            <h1 class="title">Заголовок</h1>
        </div>

.wrapper {
            position: relative;
            z-index: 0;
            display: flex;
            justify-content: center;
        }

        .wrapper:after {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            height: 1px;
            width: 100%;
            background-color: red;
            z-index: -1;
            margin: auto;
        }

        .title {
            background-color: #fff;
            padding: 0 10px;
        }

mongodb.so подключить надо
mongodb.installation.pecl

в вызове AjaxForm укажите в параметре `&successMessage` следующее:

successMessage=`Ваше сообщение успешно отправлено <script>document.getElementById('xxx').reset(); </script>`

, где "xxx" - ID вашей формы из модального окна. Ну или аналогичное реализуйте через jQuery или что там у вас.

https://jsfiddle.net/hpunL9ta/

Вам нужно изменить кодировку с Windows 1251 на utf-8.
В нижнем правом углу на панели отображается кодировка текущего файла, жмете туда и выбираете вариант Save with encoding

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

В правой части статус бара есть VS Code есть показатель кодировки. Нажмите и смотрите выше - там появится предложение открыть файл заново в нужной кодировке. Когда файл будет выглядеть приемлемо, ещё разок на кодировке, но уже надо будет выбрать "сохранить в кодировке', где желательно указать utf-8.
После этих манипуляций файл будет сохранен в utf-8, и проблема будет решена.

Изменил немного стили

.from-me {
       position: relative;
       display: none; // добавил свойство
       padding: 10px 20px;
       color: white;
       background: #0b93f6;
       border-radius: 25px;
       float: right;
  }

 .loud {
       display: block; // добавил свойство
       animation-duration: 1.5s;
       animation-fill-mode: both;
       animation-timing-function: ease-in-out;
       transform-origin: center center;
       animation-name: loud;
  }
.content {
  width: 100%; // и тут у тебя ошибка widht
  height: 500px
}

javascrpt код по которому при прокрутке до конца страницы выскакивает блок

const sms = document.querySelector('.from-me');
    
const scrollHeight = Math.max(
    document.body.scrollHeight, document.documentElement.scrollHeight,
    document.body.offsetHeight, document.documentElement.offsetHeight,
    document.body.clientHeight, document.documentElement.clientHeight
  );

  document.addEventListener('scroll',()=>{
    window.pageYOffset+document.documentElement.clientHeight===scrollHeight&&sms.classList.add('loud');
  })

.icon-head {
  text-align: center;
  padding: 20px;
  width: 100px;
  position: relative;
}

.icon-text span {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: red;
  z-index: 100;
  box-shadow: 0 5px 7px #000
}

.text p {
  display: inline-block;
  position: relative;
}

.text p::before {
  content: '';
  position: absolute;
  left: -30px;
  right: -30px;
  top: -10px;
  height: 6px;
  background: radial-gradient(circle, #000 2px, transparent 3px) space center / 10px 6px;
  opacity: 0.3;
}

Сервисов для действительно хорошей верстки писем нет. Но есть фреймворки. Хорошим на сегодняшний день считается zurb.com/ink , но у него есть ряд косяков.
Могу предложить мой фреймворк https://github.com/dudeonthehorse/Email о работе с которым я планирую писать в своем блоге habrahabr.ru/users/dudeonthehorse/topics

Меняется, начните вводить текст и увидите.
Цвет placeholder меняется через псевдоэлемент ::placeholder

P.S. Чтобы по сто раз не писать цвет: белый, можно использовать слово inherit, тогда поля унаследуют цвета от родителя (у вас белый задан форме, от него и унаследуют)

Обычное центрирование абсолютов

position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);

Либо родителю, если хочется оставить его в потоке

display: flex;
justify-content: center;
align-items: flex-end;

только убрать нижний padding