AngReload

Ратую за SVG

Ты вставил код до того места, где подключается jQuery.

<script type="text/javascript">

		$(document).ready(function() {
		    let mainBlock = $('.navbar-collapse');

			mainBlock.find('ul').on('click', function() {
			  mainBlock.removeClass('in');
			});
		});

	</script>






    <!--Vendor-JS-->
    <script src="js/vendor/jquery-1.12.4.min.js"></script>
    <script src="js/vendor/bootstrap.min.js"></script>
    <!--Plugin-JS-->
    <script src="js/owl.carousel.min.js"></script>
    <script src="js/contact-form.js"></script>
    <script src="js/jquery.parallax-1.1.3.js"></script>
    <script src="js/scrollUp.min.js"></script>
    <script src="js/magnific-popup.min.js"></script>
    <script src="js/wow.min.js"></script>
    <!--Main-active-JS-->
    <script src="js/main.js"></script>
</body>

</html>

Magnific Popup создаёт iframe у которого для gmaps указан url
https://maps.google.com/ и так далее

а для vimeo и youtube url имеет вид //youtube.com/..., где вначале пропущен протокол. В этом случае браузер должен установить такой же протокол как у текущей страницы, будь то http или https. Но при когда страница загружена с диска, у неё адрес типа такого file:///C:/temp/index.html и, соответственно, ютуб и вимео с таким протоколом не загрузятся.

Но, лучше не использовать градиенты как вы просите, а сделать SVG.

https://jsfiddle.net/k4d07rv9/

Если добавить стиль

body {
  overflow: hidden;
}

то всё нормально становится. Видимо что-то не влазит.

Наверное Fluid Design
https://medium.com/@space.alpaca/so-what-exactly-i...

PS, ещё видел Viewport Sized Typography

У тебя f, s и t проверяются только один раз. Нужно сделать чтобы их значения обновлялись при каждом нажатии на кнопку.

var ev = document.getElementById('e');
ev.addEventListener("click", function () {
  var f = document.getElementById('first').value;
  var s = document.getElementById('second').value;
  var t = document.getElementById('third').value;
  var rest = Number(f) + Number(s) + Number(t);
  document.getElementById("result").value = rest;
});

SVG

Зачем класс, если нет ни полей ни методов? Тут только одна функция:

function initBlock(name) {
  $("#" + name + "__btn").on("click", function() {
    var Ups = parseInt($("#" + name + "__val").val());
    var Val = parseInt($("#" + name + "__record").html());
    var Max = $("#" + name + "__record");

   if (Ups >= Val) {
      $(Max).html(Ups);
   }
  });
}

initBlock("one");
initBlock("two");

Можно так:

<h2>Example 1: Embedded data</h2>
<svg id="example1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <image x="0" y="0" width="5" height="5" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="/>
</svg>

<h2>Example 2: Remote image</h2>
<svg id="example2" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <image x="0" y="0" width="275" height="95" xlink:href="http://www.google.co.uk/images/srpr/logo3w.png" />
</svg>

<h2>Example 3: Local image</h2>
<svg id="example3" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <image x="0" y="0" width="136" height="23" xlink:href="/img/logo.png" />
</svg>

А можно так:

<svg width="700" height="660">
  <defs>
    <pattern id="image" x="0" y="0" patternUnits="userSpaceOnUse" height="1" width="1">
      <image x="0" y="0" xlink:href="url.png"></image>
    </pattern>
  </defs>
  <circle id='top' cx="180" cy="120" r="80" fill="url(#image)"/>
</svg>

https://jsfiddle.net/7uc2pohg/1/