shmatuan

1. var gsm=""

2. Лишний пробел в <br />

var l=1
var gsm=""

while (l<10) {
  gsm+=l+'x5='+(l*5)+' <br /> ';
  l++;
}

document.getElementById('math').innerHTML = gsm

https://codepen.io/shmatkoandrey/pen/powyRMm?edito...

Для быстрой вёрстки вместо notepad - vscode ( можно написать .name , нажать enter и создастся <div class="name"> </div> из коробки + куча других интересностей )
Для ускорения изучения и вёрстки JS - jQuery (но лучше знать основы js)

https://code.visualstudio.com/docs/editor/emmet

Нет проверок на наличие поля files в объекте

$('#api-wb').append(data.loads.map(n => n.files ?
`<div class="uRblock" id="song${n.id}"><div id="poster" style="background:url(${n.files[0].full})"><div class="i nner"><div id="track-fon"><div class="aPlay fa fa-play" onclick="aPlayer.call(${n.id},'${n.archive_direct_url}')"></div></div><div id="times"><i class="fa fa-clock-o"></i>${n.author_site}</div></div></div><div class="name load-response">${n.title}</div></div>` 
: '' ));

https://learn.javascript.ru/events-change

<input type="text" id="login"> 
<script>
  var input = document.getElementById("login")
  var data = {
    "login":"",
    "password":""
  }
  input.oninput = function() {
    data.login = input.value;
  };
</script>

https://codepen.io/andreysh/pen/mvwpwo?editors=1010

var dataBattle = JSON.parse('[{"stages_of_the_battle":{"my_heroes":[[{"life_of_hero":100,"faith_of_hero":100},{"life_of_hero":98,"faith_of_hero":25}],[{"life_of_hero":100,"faith_of_hero":100},{"life_of_hero":97.5,"faith_of_hero":25}],[{"life_of_hero":100,"faith_of_hero":100},{"life_of_hero":96.8,"faith_of_hero":25}]],"rival_heroes":[[{"life_of_hero":100,"faith_of_hero":100},{"life_of_hero":99,"faith_of_hero":25}],[{"life_of_hero":100,"faith_of_hero":100},{"life_of_hero":95.5,"faith_of_hero":25}],[{"life_of_hero":100,"faith_of_hero":100},{"life_of_hero":99.8,"faith_of_hero":25}]],"visual_log_of_the_battle":[{"my_hero_login":"vovkka","img":"ico_1","name_of_the_type_impact":"\u0443\u0434 1","rival_hero_login":"groza","cause_damage":-30,"part_life_hero":370,"total_life_hero":400,"counter_attack":{"rival_hero_login":"groza","img":"ico_3","my_hero_login":"vovkka","cause_damage":-45,"part_life_hero":455,"total_life_hero":500}},{"rival_hero_login":"groza","img":"ico_3","name_of_the_type_impact":"\u0443\u0434 2","my_hero_login":"vovkka","cause_damage":-45,"part_life_hero":455,"total_life_hero":500},{"rival_hero_login":"groza","img":"ico_5","name_of_the_type_impact":"\u0443\u0434 3","my_hero_login":"vovkka","cause_damage":-25,"part_life_hero":435,"total_life_hero":500}],"result_of_fight":"\u041f\u043e\u0431\u0435\u0434\u0430!"}},{"stages_of_the_battle":{"my_heroes":[[{"life_of_hero":100,"faith_of_hero":100},{"life_of_hero":98,"faith_of_hero":25}],[{"life_of_hero":100,"faith_of_hero":100},{"life_of_hero":97.5,"faith_of_hero":25}],[{"life_of_hero":100,"faith_of_hero":100},{"life_of_hero":96.8,"faith_of_hero":25}]],"rival_heroes":[[{"life_of_hero":100,"faith_of_hero":100},{"life_of_hero":99,"faith_of_hero":25}],[{"life_of_hero":100,"faith_of_hero":100},{"life_of_hero":95.5,"faith_of_hero":25}],[{"life_of_hero":100,"faith_of_hero":100},{"life_of_hero":99.8,"faith_of_hero":25}]],"visual_log_of_the_battle":[{"my_hero_login":"vovkka","img":"ico_3","name_of_the_type_impact":"\u0443\u0434 1","rival_hero_login":"zmei","cause_damage":-60,"part_life_hero":360,"total_life_hero":400,"counter_attack":{"rival_hero_login":"zmei","img":"ico_3","my_hero_login":"vovkka","cause_damage":-45,"part_life_hero":455,"total_life_hero":500}},{"rival_hero_login":"zmei","img":"ico_7","name_of_the_type_impact":"\u0443\u0434 2","my_hero_login":"vovkka","cause_damage":-45,"part_life_hero":415,"total_life_hero":500},{"rival_hero_login":"zmei","img":"ico_2","name_of_the_type_impact":"\u0443\u0434 3","my_hero_login":"vovkka","cause_damage":-55,"part_life_hero":375,"total_life_hero":500}],"result_of_fight":"\u041f\u043e\u0431\u0435\u0434\u0430!"}}]');

var data = []

for (var i = 0; i < dataBattle.length; i++) {
  for (var k = 0; k < dataBattle[i].stages_of_the_battle.visual_log_of_the_battle.length; k++) {
    let str = '<div class="battle-plan-plash-step">';
    str += '<div class="step-user-one">' + dataBattle[i].stages_of_the_battle.visual_log_of_the_battle[k].my_hero_login + '</div>';
    str += '<span class="step-ico jtooltip" title="' + dataBattle[i].stages_of_the_battle.visual_log_of_the_battle[k].name_of_the_type_impact + '"><i class="ico-step-one"></i></span>';
    str += '<div class="step-user-two step-user-enemy">' + dataBattle[i].stages_of_the_battle.visual_log_of_the_battle[k].rival_hero_login + '</div>';
    str += '<div class="step-user-return">' + dataBattle[i].stages_of_the_battle.visual_log_of_the_battle[k].cause_damage + '</div>';
    str += '<div class="step-user-summary">[' + dataBattle[i].stages_of_the_battle.visual_log_of_the_battle[k].part_life_hero + ' / ' + dataBattle[i].stages_of_the_battle.visual_log_of_the_battle[k].total_life_hero + ']</div>';
    str += '</div>';

    data.push({k, str})
  }
}

var update = function(k) {
  setTimeout(function() {
    //$('.battle-plan-plash-holder').prepend(str);
    console.log( "time " + (1000 * (k + 1)) ,data[k].str);
    update(k + 1)
  }, 1000 * (k + 1));
}

update(0)

priceobj = j.data.find(e => e.market_hash_name === name)
if(priceobj) pricename = priceobj.price

UPD:
content-section содержит в себе 2 блока, которые занимают по половине ширины, поэтому profile только на второй половине

Как пример можно так (но всё зависит от того как использовать):

#particles-js {
flex: 0;
/*или сделать его position: absolute;*/
}
.profile {
width: 100%;
flex: 1;
}

https://codepen.io/andreysh/pen/vbxppY

Код скринами .-.
есть специальный тег code в составлении вопроса)

По сути вопроса - просто добавить div с position: absolute, где будет полупрозрачный фон и иконка, в стилях по наведению делать его видимым.
https://codepen.io/littlesnippets/pen/pjqaOx
https://codepen.io/littlesnippets/pen/LGpgGJ

https://codepen.io/andreysh/pen/aPgwbR?editors=1010 так?

function timer1Func() {
  timer1 = setInterval(function() {
           // выполняется действие первого таймера
    console.log("1 таймер сработал")
    timer2Func()
   }, 4000);
}
  
function timer2Func() {
  timer2 = setTimeout(function() {
           // выполняется действие второго таймера
    console.log("2 таймер сработал")
   }, 2000);
}

jQuery старая библиотека, и не стоит ее учить.

Если нужно сделать простой лендинг, то jQuery будет лучше какого-нибудь реакта и проще чем ванильный js

Опять же глубина изучения зависит от направления - для фронтенда хватит основ, после которых можно изучать JQuery и/или фреймоврк Vue (начинать лучше с него, т.к. проще, быстрее и крутая документация на русском)