Shperung's questions

* {
  margin: 0;
  padding: 0;
}

section {
  height: 100%;
  width: 100%;
}

div {
  padding-bottom: 56.25%;
  position: relative;
}

div article {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: green;
}

<section>
  <div>
    <article></article>
  </div>
</section>

section {
  display: flex;
  flex-wrap: wrap;
}

article {

 flex-basis: 150px;
  height: 100px;
  background-color: green;
  color: #fff;
  margin-right: 10px;
   margin-bottom: 10px; 
   flex-grow: 1;
}

<section>
  <article>1</article>
  <article>2</article>
  <article>3</article>
  <article>4</article>
  <article>5</article>
  <article>6</article>
  <article>7</article>
  <article>8</article>
  <article>9</article>
  <article>10</article>
  <article>11</article>
  <article>12</article>
  <article>13</article>
  <article>14</article>
  <article>15</article>
</section>

function matrix(m, n) {
  var table = document.createDocumentFragment();

  var arr = [];

  for (var i = 0; i < m; i++) {
    var tr = document.createElement('tr');
    arr[i] = [];
    var summM = 0;

    for (var j = 0; j < n; j++) {
      var td = document.createElement('td');
      td.id = "unicId-" + i + "-" + j;
      td.innerHTML = arr[i][j] = getRandom();
      tr.appendChild(td);
      summM += arr[i][j]; //сумма каждой строки
    }

    tr.setAttribute("data-summ", " → Cуммa = " + summM);
    table.appendChild(tr);
  }
  document.getElementById('matrix').appendChild(table);

  function getRandom() {
    var min = 1;
    var max = 4;
    return Math.floor(Math.random() * (max - min)) + min;
  }
}

onload = function() {
  matrix(4, 4);
}

tr {
  position: relative;
}

tr:after {
  content: attr(data-summ);
}

td {
  border: 1px solid lightgray;
  padding: 5px;
}

<section id="matrix"></section>

 <svg class="svg-icon">
    <use xlink:href="#iconarrow-big-right"></use>
 </svg>

{% for i in x %}
 {{loop.index0}} <br>
{% endfor %}

.target:not(:target),
:target ~ .target.default-target {
  display: none;
}
.target:target,
.target.default-target {
  display: block;
}

a:active, a:focus{
  background-color: #7B7B7B;
  padding:3px;
}

<ul>
  <li><a href="#id1">Блок 1</a>
  </li>
  <li><a href="#id2">Блок 2</a>
  </li>
  <li><a href="#id3">Блок 3</a>
  </li>
  <li><a href="#id4">Блок 4</a>
  </li>
</ul>

<div class="target" id="id2">
  <p>Sed lobortis placerat elit tincidunt tempor. Nam dignissim euismod quam nec tempor. Sed tortor lorem, ultricies a auctor nec, auctor ut neque. Aenean varius, urna eget adipiscing feugiat, nunc ligula molestie massa, id accumsan turpis metus ac ante.
    Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>

<div class="target" id="id3">
  <p>Pellentesque quis tortor vitae elit cursus vulputate et vel dui. Nunc commodo pretium arcu in ultricies. Nunc vel velit enim, et tincidunt leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</div>

<div class="target" id="id4">
  <p>Quisque eget tempor sapien. Cras convallis tempor orci pulvinar scelerisque. Nullam et erat eu nibh sollicitudin congue sit amet id diam. Sed in lectus ut augue euismod porta. Quisque non lacus odio. Nunc ornare adipiscing egestas.</p>
</div>

<div class="target default-target" id="id1">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempus, felis at varius eleifend, neque orci porta magna, consequat aliquam ligula velit quis erat. Aenean porttitor pellentesque risus, eu tincidunt ipsum blandit in.</p>
</div>

.target:not(:target){
   display: none;
}
      
.target:target{           
   display: block;
}

<ul>
   <li><a href="#id1">Блок 1</a></li>
   <li><a href="#id2">Блок 2</a></li>
   <li><a href="#id3">Блок 3</a></li>
   <li><a href="#id4">Блок 4</a></li>
</ul>

<div class="target" id="id1">
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempus, felis at varius eleifend, neque orci porta magna, consequat aliquam ligula velit quis erat. Aenean porttitor pellentesque risus, eu tincidunt ipsum blandit in. </p>
</div>

<div class="target" id="id2">
   <p>Sed lobortis placerat elit tincidunt tempor. Nam dignissim euismod quam nec tempor. Sed tortor lorem, ultricies a auctor nec, auctor ut neque. Aenean varius, urna eget adipiscing feugiat, nunc ligula molestie massa, id accumsan turpis metus ac ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>
		
<div class="target" id="id3">
   <p>Pellentesque quis tortor vitae elit cursus vulputate et vel dui. Nunc commodo pretium arcu in ultricies. Nunc vel velit enim, et tincidunt leo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
</div>
		
<div class="target" id="id4">
   <p>Quisque eget tempor sapien. Cras convallis tempor orci pulvinar scelerisque. Nullam et erat eu nibh sollicitudin congue sit amet id diam. Sed in lectus ut augue euismod porta. Quisque non lacus odio. Nunc ornare adipiscing egestas. </p>
</div>

    fbq('track', 'Purchase', {value: '999.00',  currency: 'UAH' });