Ольга

Выслушав критику по предыдущей версии своего сайта, я предприняла шаги, чтобы исправить недостатки.
Вот мой сайт:
lingvo-lang.com

Исправлено:
1) Убрала margin-left и margin-right, заменив на left и right.
2) Сделала sticky указатель на меню.
3) Сделала отступ между блоками (почему-то на мобильных девайсах они слишком большие, хотя выставляла в процентах)
4) Изменила шрифт в некоторых местах (в поле отправки сообщений, в первых двух секциях, и так по мелочи)
5) Добавила логотоп в head и там, где должен быть footer.
6) Сделала акцент на первых нескольких блоках: выбрала фоновые картинки и разместила на их фоне текст, предварительно затемнив картинку при помощи тегов.
7) Добавила отступы у заголовках в тех блоках, где их не было.

По-прежнему 94% по адаптиватору, 1 ошибка в html (не могу убрать, там тег, который мне нужен, а валидатор воспринимает его за ошибку), хорошая responsiveness, а вот performance score по gtmetrix упал до 79%. :(

Это у всех, или только у меня?
Хотела зайти на хостинг, а не могу.

Только благодаря помощи сообщества MODX и своим кривым ручкам, я добилась:
Ни одной ошибки в html
94 % адаптивности ресурса
Великолепная респонсивность
81 % PageSpeed Score

Хочу сразу предупредить, что я новичок (что многие уже поняли по моим странноватым вопросам), очень многое делаю неправильно, поэтому всегда нуждаюсь в небольших подсказках. Безмерно благодарна сообществу, хостингу, и магазину MODX. Если бы не Вы, у меня бы ничего никогда не получилось!!!

Покритикуйте, пожалуйста, что нужно еще исправить на сайте?

Простите, если вопрос глупый.
Вроде на моем сайте все скрипты из безопасных источников, но браузеры ругаются.
Выдает сообщение: :«Insecure content blocked. This page is trying to load scripts from unauthenticated sources».
При этом на отображении страницы это особо не отражается (либо я не заметила).
Есть ли какой-либо checker на проверку скриптов, которые считаются небезопасными и их стоит отключить?
Так как свою landing page я переделывала из бесплатной темы для modx, очень много там поменяла, но многие сссылки на бесполезные, и возможно не очень безопасные скрипты остались.
Я думаю, браузеры пытаются загрузить javascript, который я не использую.
Как посмотреть\проверить это?
Пыталась делать через view-source:https://, особо ничего небезопасного/ненужного не заметила.

Меню получается сделать либо sticky, либо toggle, но не одновременно.
Как можно это решить?

Есть меню:

<div class="outer-wrapper">
 <div class="decisive">
     <div class="inner-wrapper">
      <div class="left">  <nav><span> <ul>
   
             <li><a title="portfolio" href="#portfolio" style="font-family:'Oswald'; color: black;">Текст</a></li>
             <li><a title="news" href="#news" style="font-family:'Oswald'; color: black;">Текст</a></li>
<li><a title="services" href="#services" style="font-family:'Oswald'; color: black;">Текст</a></li>
                <li><a title="team" href="#team" style="font-family:'Oswald'; color: black;">Текст</a></li>
 </ul>          
</span>     </nav>


</div>
 </div>
 </div>
 </div>

ul {
  display: flex;
  flex-direction: row;
  font-size: 22px;
}

li {
  position: relative;
  list-style-type: none;
  margin-right: 50px;
  cursor: pointer;
  color: black;
}
li:last-child {
  margin-right: 0px;
}
li:after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  transform: translateX(-50%) rotate(0deg);
}

li:nth-child(1):after {
  background: #ED4337;
}

li:nth-child(2):after {
  background: #A1D3A2;
}

li:nth-child(3):after {
  background: #50B8E7;
}

li:nth-child(4):after {
  background: #efe200;
}

li:nth-child(1):after {
  clip-path: polygon(6% 10%, 100% 0, 64% 65%, 28% 65%);
  height: 85px;
  width: 75px;
  bottom: -47px;
  animation: stretch 2s ease infinite;
}
@keyframes stretch {
  25% {
    transform: translateX(-50%) rotate(2deg) scaleY(0.93);
  }
  50% {
    transform: translateX(-50%) rotate(-2deg) scaleX(0.93);
    clip-path: polygon(6% 20%, 100% 0, 64% 65%, 28% 65%);
  }
  75% {
    transform: translateX(-50%) rotate(3deg) scale(1.05);
  }
}
li:nth-child(2):after {
  clip-path: polygon(61% 0%, 100% 19%, 71% 100%, 0% 100%);
  height: 55px;
  width: 75px;
  bottom: -18px;
  animation: stretch2 1.5s ease infinite;
}
@keyframes stretch2 {
  25% {
    transform: translateX(-50%) rotate(-2deg) scaleY(1.05);
  }
  50% {
    transform: translateX(-50%) rotate(2deg) scaleY(0.93) scaleX(1.06);
    clip-path: polygon(61% 0%, 100% 19%, 71% 100%, 12% 100%);
  }
  75% {
    transform: translateX(-50%) rotate(3deg) scale(1.05);
    clip-path: polygon(61% 0%, 80% 19%, 71% 100%, 12% 100%);
  }
}

Ищу плагин или готовое решение

Есть код:

<div class="navbar-wrapper">
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </a>
<h1 class="brand"><a href="#top" style="font-family:East Sea Dokdo">English!</a></h1>
<nav class="pull-right nav-collapse collapse">
<ul id="menu-main" class="nav">
<li><a title="текст" href="#portfolio" style="font-family:Oswald">текст</a></li>
<li><a title="текст" href="#news" style="font-family:Oswald">текст</a></li>
<li><a title="текст" href="#services" style="font-family:Oswald">текст</a></li>
<li><a title="текст" href="#team" style="font-family:Oswald">текст</a></li>
<li><a title="текст" href="#contact" style="font-family:Oswald">текст</a></li>
</ul>
</nav>
</div>
<!-- /.container -->
</div>
<!-- /.navbar-inner -->
</div>
<!-- /.navbar -->
</div>
<!-- /.navbar-wrapper -->
<div id="top"></div>

Как можно это меню адаптировать для мобильных?

Подчистила все основные html ошибки.
Проблема с viewport по-прежнему сохраняется.
Как это можно решить?
UPD: Частично решила проблему, на мобильных теперь все в порядке, но на десктопе видео расползается на весь экран.
Реально ли это как-то уладить?

Element p not allowed as child of element span in this context.
Чем можно заменить?