Ingernirated

Нет.
Для новой вкладки есть window.open

window.open('http://www.ya.ru', '_blank');

вот из google fonts берите а остальное если без свободной лицензии нельзя

Романыч!

Если речь идёт о кириллице, то с бесплатными шрифтами проблема: вроде то, но как-то не то.

это будет считаться, как правонарушением прав или чего-либо?

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

Хороший шрифт делает любой интерфейс приятным а текст удобным. И он не стоит сотни тысяч.
Сейчас недорого можно приобрести 1-2 начертаний на сайт:

Совет бюро, как приобрести шрифт чтобы не было про...
Паратайп каталог платных шрифтов с демократичными ценами, от 1900 рублей можно купить хороший шрифт (одно начертание) +бывают распрожади

потому что у родителя position: relative, убери его и будет как тебе нужно
https://jsfiddle.net/r896y5xL/1/

absolute относителен по отношению к родительскому relative

Во-первых, это бесплатно и при этом совершенно легально.

Во-вторых, Linux потребляет гораздо меньше аппаратных ресурсов.

В-третьих, хорошо настроенный Linux практически не нуждается во вмешательстве системного администратора, эксплуатируются по принципу «настроил и забыл».

Соглашусь с profesor08
Сами используем krpano. Писать с нуля смысла нет.
Добавлю только, что снимать с коптера нужно не абы как, а по определенном алгоритму.

Чекай WebGl думаю там ты найдешь ответ

Сфорткали панораму, с помощью коптера нарпимер, и нарисовали на canvas на webgl. Используется вот это: https://krpano.com/docu/html5/

Хороша статья по скроллу: https://evilmartians.com/chronicles/scroll-to-the-...

window.scrollTo({
    top: 1000,
    behavior: "smooth" // плавно
});

Без JS вовсе: якорь и scroll-behavior smooth https://developer.mozilla.org/ru/docs/Web/CSS/scro...

Вот хороший пример: https://jsfiddle.net/jmzpvm2e/4/

Надо использовать visibility и opacity

Есть 3 блока, которые хранятся в массиве
let block = document.querySelectorAll(".block");

NodeList - это не массив.

const index = Array.prototype.indexOf.call(block, e.target);

или

const index = [...block].findIndex(n => n === e.target);

или

let index = block.length;
while (index-- > 0 && block[index] !== e.target) ;

float: right или если через absolute, то right: 0;

Надо передавать в removeEventListener ту же функцию, что вы передавали в addEventListener. То есть, все color.bind(null, i) надо сохранить - в какой-нибудь массив, например.

Однако, раз вы используете bind ради передачи индекса, можно поступить иначе - уберите bind, вместо этого назначайте элементам атрибут, значение которого затем надо будет достать из целевого элемента внутри вашего color'а.

А на самом деле, не надо ничего - ни bind, ни дополнительных атрибутов, индекс вообще передавать не надо. Вы ведь используете индекс для того, чтобы обратится к элементу, на котором и произошёл клик. Он будет доступен в обработчике как this и как event.target (event.currentTarget, если клик был на дочернем элементе).

Смотря что ты хочешь сделать. Стилями можно управлять, если немного пошевелиться.

https://codepen.io/kris-iris/pen/MPJjgo

let wrap = document.querySelector('.wrap');

wrap.onclick = ()=> wrap.classList.toggle('noMagic');

.wrap{
  position: relative;
  width: 500px;
  height: 200px;
  background: lightblue;
  margin: 0 auto;
}

.wrap::before{
  position: absolute;
  content: 'Кликни на меня, детка!';
  height: 50px;
  width: 100%;
  background: lightgreen;
  transition: 2s;
}

.noMagic.wrap::before{
  content: 'А ты молодец!';
  display: flex;
  justify-content: center;
  align-items: center;
  animation: move 1s forwards;
}

@keyFrames move{
  100% {
    height: 100%;
  }
}

let x = document.querySelectorAll(".x")

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms))
}

async function move() {
  x.forEach((e) => {
	await sleep(1000)
	e.style.display = "block"
  }
}

const elements = document.querySelectorAll('.x');
const delay = 1000;
const updateElement = el => el.style.display = 'block';

Вариант раз - таймауты сразу для всех элементов:

elements.forEach((n, i) => setTimeout(updateElement, (i + 1) * delay, n));

Вариант два - интервал:

const intervalId = setInterval(i => {
  const el = elements.item(++i[0]);
  if (el) {
    updateElement(el);
  } else {
    clearInterval(intervalId);
  }
}, delay, [ -1 ]);

Вариант три - рекурсивные таймауты:

(function next(i) {
  if (i < elements.length) {
    setTimeout(() => {
      updateElement(elements[i]);
      next(-~i);
    }, delay);
  }
})(0);