Сергей delphinpro

<div class="img-placeholder-responsive">
  <div class="img-placeholder-responsive__box">
    <img src="" alt="">
  </div>
</div>

.img-placeholder-responsive {
  &__box {
    position: relative;
    width: 100%;
    height: 0;
    box-sizing: border-box;
    padding-bottom: percentage(3/4); // default aspect ratio

    // Можем этот плесхолдер стилизовать как-то, пока картинка не загружена
    background: gray;
    // Можем надпись добавить
    &::before {
      position: absolute;
      content: 'Картинка загружается...';
    }

    > img {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
    }
  }
}

<?php
// Получаем размер картинки
$width = getImageSize();
$height = getImageSize();
?>
<!-- Вставляем в разметку -->
<div class="img-placeholder-responsive">
  <div class="img-placeholder-responsive__box"
       style="padding-bottom: <?= $height / $width * 100 ?>%"
  >
    <img src="" alt="">
  </div>
</div>

.heading {
  position: relative;
  …
  &::before {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100vw; /* или 99999px; */
    background: rgba(blue, 0.5);
    z-index: -1;
    transform: skewX(30deg);
  }
}

я хочу научиться, но уже на готовом к моему слайдер коду.

<div class="page">
  <div class="page__main"> ... </div>
  <div class="page__side"> ... </div>
</div>

<div class="page__main">
    <div class="section">
      <div class="section__body">
        ...
      </div>
    </div>
  </div>

/*==
 *== Page layout
 *== ======================================= ==*/

.page {
  @include make-row();

  &__main,
  &__side {
    @include make-col-ready();
  }

  &__side {
    z-index: 1;
  }
  
  // <…cut>

  @include media-breakpoint-up(lg) {
    &__main {
      @include make-col(9);
    }
    &__side {
      @include make-col(3);
      order: -1;
    }
  }
}

$default-scrollbar-width: 16px;

.section {
  @include make-row();
  position: relative;

  &__body { @include make-col-ready(); }

  &::before {
    z-index: -1;
    position: absolute;
    top: 0;
    right: percentage(6/9);
    width: 100vw;
    height: 100%;
    transform: translateX(50%);
    margin-right: ($default-scrollbar-width / 2);
  }
}

App.compensateWidthScrollbar = function () {
    let width  = this.getScrollbarWidth();
    let css    = '.section::before{margin-right:'+ (width / 2) + 'px';
    let style  = document.createElement('style');
    style.type = 'text/css';
    style.appendChild(document.createTextNode(css));
    (document.head || document.getElementsByTagName('head')[0]).appendChild(style);
};

.input_boxes_flex {
    display: grid;
/*    grid-template-columns: 50% 50%; */
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

const sm = $('.side-menu');

if (!sm.length) return;

sm.on('click', 'button', function () {
    let item = $(this).closest('li');

    item.toggleClass('open');
    item.children('ul').slideToggle();
    item.closest('ul').children('li').not(item).find('ul').slideUp();
});

sm.find('.open').children('ul').show();

<ul class="side-menu">
        <li class="open">
            <span><a href="#">Металлопрокат</a><button><svg class=" i i-angle-left"><use xlink:href="/design/images/sprite.svg#angle-left"></use></svg></button></span>
            <ul class="side-menu__nested">
                <li class="open">
                    <span><a href="#">Сортовой прокат</a><button><svg class=" i i-angle-left"><use xlink:href="/design/images/sprite.svg#angle-left"></use></svg></button></span>
                    <ul class="side-menu__nested">
                        <li class="">
                            <span><a href="#">Квадратный</a><button><svg class=" i i-angle-left"><use xlink:href="/design/images/sprite.svg#angle-left"></use></svg></button></span>
                            <ul class="side-menu__nested">
                                <li class=""><span><a href="#">Балка</a></span></li>
                                <li class=""><span><a href="#">Уголок</a></span></li>
                                <li class="current"><span><a href="#">Швеллер</a></span></li>
                                <li class=""><span><a href="#">Арматура</a></span></li>
                            </ul>
                        </li>
                        <li class="">
                            <span><a href="#">Круглый</a><button><svg class=" i i-angle-left"><use xlink:href="/design/images/sprite.svg#angle-left"></use></svg></button></span>
                            <ul class="side-menu__nested">
                                <li class=""><span><a href="#">Балка</a></span></li>
                                <li class=""><span><a href="#">Уголок</a></span></li>
                                <li class="current"><span><a href="#">Швеллер</a></span></li>
                                <li class=""><span><a href="#">Арматура</a></span></li>
                            </ul>
                        </li>
                        <li class="">
                            <span><a href="#">Шестигранный</a><button><svg class=" i i-angle-left"><use xlink:href="/design/images/sprite.svg#angle-left"></use></svg></button></span>
                                <ul class="side-menu__nested">
                                    <li class=""><span><a href="#">Балка</a></span></li>

<h2 class="heading heading_red">
...
</h2>

<h2 class="heading heading_theme_red">
...
</h2>

<h2 class="heading heading_primary">...</h2>
<h2 class="heading heading_secondary">...</h2>

let data = {...};
let html = '';
for (let k in data) {
  if (!data.hasOwnProperty(k)) continue;
  let item = data[k];
  html += '<ul>';
  html += '<li>'+item['category']+'</li>';
  html += '<li>'+item['symbol']+'</li>';
  // ...
  html += '</ul>';
}
document.getElementById('differencesDiv').innerHTML = html;

.scroll_bar {
    overflow-y: scroll;
    height: 730px;
    align-content: flex-start; /* fix */
}

$('.add_item').data('id', 2);
$('.add_item').data('title', 'Справка в бассейн (взрослых)-1');

$('.add_item').data({
  id: 2,
  title: 'Справка в бассейн (взрослых)-1'
});