historydev

const rotate = document.querySelector("#rotate");
const container = document.querySelector(".container");

container.style.transform = `rotate(${45}deg)`;

rotate.addEventListener('input', (e) => {
  const degree = +e.target.value;
  const scaleStep = degree*0.001;
  const scale = degree === 0 && 1 || degree === 360 && 1 || scaleStep > 1 && 1 || scaleStep < 0.75 && 0.75 || scaleStep;
  container.style.transform = `scale(${scale}, ${scale}) rotate(${degree}deg)`;
});

function Video_duration(e) {
  console.log(e.target.duration);
};
video.onloadedmetadata = Video_duration;

Вот так работает:

<div>
	<div class="input-number input1">

    <button class="style_pm BTN-M" type="button">-</button>

    <input class="style_input I-1" id="I1" type="number" min="0" value="2" readonly>

    <button class="style_pm BTN-P" type="button">+</button>
  </div>
  <br>
</div>

<div class="total">
	<div class="estimation">
	<div>
    <span id="B1">2</span>- Basic (20 €)<br>
	  <span id="S1">1</span>- Senior (10 €)
    </div> 
	<div>
    <span id="sum1">40 €</span><br> 
    <span id="sum2"></span> 10 €</div> 
 </div>
 <div class="estimation_total">Total: 
   <span id="TOTAL"> 50 €</span>
   </div>
</div>

const input1 = document.querySelector('#I1'); // Получаем input
const btn_plus1 = document.querySelector('.BTN-P'); // Получаем кнопку плюс
const btn_minus1 = document.querySelector('.BTN-M'); // Получаем кнопку минус 
const span1 = document.querySelector('#B1');

// Свойства nextElementSibling и prevousElementSibling здесь не нужны

btn_minus1.addEventListener('click', () => {
  input1.stepDown(4); // Отнимаем 1 или указанное число (измените на 1)
	span1.textContent = input1.value;
});

btn_plus1.addEventListener('click', () => {
  input1.stepUp(8); // Прибавляем 1 или указанное число (измените на 1)
  span1.textContent = input1.value;
});

Либо назовите его index.php, либо:

test3.loc/IfElseInSite.php

here

Это что шутка? Не смешная)
margin: 0 2px;

Привет юный любитель знаний, вот держи.

P.S. Играйся с задержкой, пока не придёшь к нужному тебе результату.

Swiper.js examples

click

<div class='myBlock'>1</div>

.myBlock {

   width: 60px;
   height: 60px;
   display: flex;
   justify-content: center;
   align-items: center;
   background: url('./myCircle.svg');
   background-size: 100% 100%;

}

<div class='circle'><div></div></div>

.circle {

   width: 60px;
   height: 60px;
   display: flex;
   justify-content: center;
   align-items: center;
   border: 1px solid #333;
   border-radius: 50%;

}

.circle div {

  width: 100%;
  height: 100%;
  background: green;
  border-radius: 50%;

}

Костыльно. Здесь я юзал flex-box.

тык

1. Занести все ссылки в переменные
2. Перестать играть с позиционированием и выровнять всё с помощью flex-box / margin

@media only screen and (min-width: 320px) and (max-width: 768px)

Разделите текст и картинки на два разных блока, так-же их в один главный блок и задайте ему следующие параметры:

.block {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}

/* Ширину блокам картинок и текста задайте 50% */