<div class="enable-js">Please enable javascript and refresh page to navigate</div>

<main class="main">

  <section class="section" id="beethowen" data-animation="beethowen">
    <div class="section__title">
      <h1 class="title" data-title data-split-word>Beethowen</h1>
    </div>
    <div class="section__content" data-translate-x>
      <p class="paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque quis, qui rerum est eum blanditiis id quia natus voluptatum distinctio ad aspernatur repudiandae illum sit tempora expedita beatae vero amet.</p>
    </div>
    <div class="section__pagination" data-fade-in>
      <button data-href="#elvis" class="btn btn--left" type="button">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#242424" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M 15 12 l -6 0 l 6 0"/></svg>
      </button>
      <button data-href="#chopin" class="btn btn--right" type="button">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#242424" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M 9 12 l 6 0 l -6 0"/></svg>
      </button>
    </div>
    <div class="section__img" data-image>
      <svg class="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 307.1 446.1">
        <path fill="#333" class="svg-bet-1" d="M.01.04h307.1v446.1H.01z"/>
        <path fill="#B73917" d="M94.81 269.44l-2 20.9 20.1 76.4 30.5 7.6 32.8-35.1-50.6-45.5-30.8-24.3z" class="svg-bet-2"/>
        <path fill="#B73917" d="M167.81 282.24l-12.5 28.5-4.8 13.3 13.9 6.2 24.6-5.7 36.8-42.7 33.9-41.6-4-22.9-13.6-6.8-43.6 24.9-30.7 46.8z" class="svg-bet-3"/>
        <path fill="#E16D58" d="M256.31 227.94c-28.6 30.8-53.6 58.8-86 92.5l21.8-13.9 64.2-78.6z" class="svg-bet-4"/>
        <path fill="#E16D58" d="M241.91 228.14l-86 92.5 21.8-13.9 64.2-78.6z" class="svg-bet-5"/>
        <path fill="#FFF" d="M86.31 224.44c-5.6 3.4-11.1 7.5-16.7 13.3-1.8 16.9-9.6 25.8-15.6 37.1 3 7.4 17.2 1.2 43.6 2.3 12.7 1.4 19.1 14.3 28.3 22.1l5.1-7.1-44.7-67.7z" class="svg-bet-6"/>
        <path fill="#4D4D4D" d="M117.71 276.44l-38.7-33.1-5.9-9.2c4.7-4.6 10.3-8.8 16.7-12.1l27.9 54.4z" class="svg-bet-7"/>
        <path fill="#FFF" d="M210.71 203.64l21.2-15.2 5.6-4.4 17.6 72.8c-12.2 7-24.6 13.9-54 7.6-20.4 3-22.2 14-32.8 21.2l42.4-82z" class="svg-bet-8"/>
        <g>
          <path fill="#E8B6A6" d="M100.31 70.04l-38.6 61.9c3.9 18.1 2.7 33.3 13.8 54-2.4 11.6 4.5 21.6 8.7 34.9 8 25.4 21.3 47.9 48.3 61.6l-7.4-86.5-21.8-129.5-3 3.6z" class="svg-bet-9"/>
          <path fill="#AF7861" d="M106.01 261.34c9.3 19.7 22.2 19.2 27 35.4l30.3-6.7c5.9-5.9 8.1-12.7 12-19.2l24.3-39c4.8-6.4 10.3-25.4 10.8-36.9.1-2.7-.7-26.5-2-27.5-1.7-1.4-3.6 5.6-4.6 6.7-1.3 1.5-2.8 11.9-2.8 15.5 0 1.5-2.9 6.7-3.7 8.3-10.2 20.4-20.2 51.9-30.6 64.7l-36.1 12.7-11.3-13-13.3-1z" class="svg-bet-10"/>
          <path fill="#E8B6A6" d="M102.71 68.74c3.9 22.4-49.4 60.6-41.4 88.4.9 3.1 54.5 5.8 55 9.1 4 23.7 12 41.1 7.5 61.3-.1.4-2.2-2.2-2.5-1.7-2.7 5.5-23.1 9-28.2 15.7-.3 2.7 2.9 7.3 4.3 7.7 4.9 11 25.7 27.3 33.1 27 23.8-1.5 32.1-5.8 39.3-18.2 14.6-24.3 33.7-64.2 30-86.4l-9.8-96.5-87.3-6.4z" class="svg-bet-11"/>
          <path fill="#C98C75" d="M130.31 225.44l-7.4-52.3 19-12.9 42.6-5.2 3.1 17.3-29.6 11.4-25.5-2.2 3.6 9.7 3.6 5-.1 5.8 1.3 6.1c9.7 2.2 7.1 4.8 7.7 11.3l-18.3 6z" class="svg-bet-12"/>
          <path fill="#C98C75" d="M175.11 82.94l-87.8-5.4-21.2 51.4c19.6-13.7 38.5-28.7 61.9-17.3 5.8 2.8 29 6.8 32.6 13.3 4.8 6.9 8.4 14.5 17.5 19.2 7.7 10.8 4.4 20.2 6.6 30.2 12.2 30.8-7.3 82.5-54.3 101.7 7.8-.4 29.5-.2 40.1-10.4 5.8-8.4 11.7-19.6 16.7-28.3 12.6-21.9 21.7-44.1 21.4-66.2l-9.2-11.6-24.3-76.6z" class="svg-bet-13"/>
          <path fill="#DD4B44" d="M114.21 244.84c7.9-4.9 7.1-6.2 19.7-5.2 11.2-5.8 15.3-3.1 27.9-2.2l-8.4 1-18.7 2.6-8.4.8-12.1 3z" class="svg-bet-14"/>
          <path fill="#E1625C" d="M116.11 244.74c8.2 2.4 10.1 2.3 18.1.7 9.4.4 16.7-3.9 24.8-7.2l-32.3 3.8-10.6 2.7z" class="svg-bet-15"/>
        </g>
        <g>
          <path fill="#9C654F" d="M143.39 179.04l-12.9 1.5 4-12.3 3.7-2.1 10.2-4.1 11.8-2.5c5.4.2 14.9 5.6 19.9 5.2 0 0-5.2 3.2-12.5 6.6l-14.9-3.6-9.3 11.3z" class="svg-bet-16"/>
          <path fill="#9C654F" d="M110.89 183.04l-1.2-9.4-22.9-4.9-6.2-3-8.6.4.3 9.7 12.1 10.3 3-1.6c1.9-12.1 16.2-6.7 19.4-.1.6 1.2 3-1.5 4.1-1.4z" class="svg-bet-17"/>
          <path d="M106.09 182.64c-8-8.9-19.7-10.2-24.5 1.1l3.5 3.2 2-1.6 2-4.9 3.3-2.6 9.5 1.7 4.2 3.1z" class="svg-bet-18"/>
          <path fill="#FFF" d="M87.59 184.54c-1.1-10.3 15.6-8 18.9-.8-9.9 2.6-10.1 4.2-18.9.8z" class="svg-bet-19"/>
          <path fill="#504C60" d="M90.39 178.54c-.3 9.4 11.1 7.5 11.5.8-2.9-1.9-8.8-2.5-11.5-.8z" class="svg-bet-20"/>
          <path d="M140.69 178.74c11.1-14.7 14.4-14.7 29.2-7.2l-9.6 5.9c-.5-5.3 2.5-6.7-2.2-7.6-10.5.9-12.3 5.7-17.4 8.9z" class="svg-bet-21"/>
          <path fill="#FFF" d="M141.19 178.94c9.2-10.9 11.7-12.4 23.5-6.5l-4 4.9c-3.6 1.5-7.3 3-13 2.2l-6.2-.5-.3-.1z" class="svg-bet-22"/>
          <path fill="#504C60" d="M160.29 170.44c-2.6-1.3-8.4-2.9-12.3 1.2 2.7 8.2 12.4 5 12.3-1.2z" class="svg-bet-23"/>
          <path fill="#C98C75" d="M108.49 186.04l-11.6 3.1-13-1.3 13.9 4.8 10.7-6.6z" class="svg-bet-24"/>
          <path fill="#4D4D4D" d="M105.29 172.84l-22.1-4.4c-6.1-1.8-1.6-1.3-7.5.2l-.9-3.6c10.2-5.2 10.3-2.4 21.5.1 0 0 12.2 1.3 13 1.3.8 0 .8 7.2.8 7.2l-4.8-.8z" class="svg-bet-25"/>
          <path fill="#4D4D4D" d="M129.59 169.54c16.7-15.1 16.2-14.9 37-18l7.7 6.4-1.4 5.7c-11.3-3.8-12.6-3.8-23.5-1.6-6.8 5.2-14.9 8-19.8 7.5z" class="svg-bet-26"/>
        </g>
        <g>
          <path fill="#9C654F" d="M118.61 225.04s3.8-.6 7 .5c3.7 1.3 6.4-2.8 10-4.4 4.1-1.8 9.1-1.8 9.4-2 6.2-13.5-6.1-10.1-8.2-8.1 1.1-2.8 6.2-5.2 8.1-4.2 2.1 1.2 3.7 4.6 4 5.1 4 5.8 6.6 10.5-1.3 14-4 1.8-8.3 5.2-12.5 6.6-4.6-.1-9.6-4.9-14.5-5.1l-2-2.4z" class="svg-bet-27"/>
          <path fill="#8C4F38" d="M129.31 250.44c6.8-4.3 14.2-3 21.5-1.6l5.1 3.1-10.3 3.8c-8.5-1.8-12.7-.1-20.5 2.8" class="svg-bet-28"/>
          <path fill="#825442" d="M123.41 268.94l24.6-2.5 3.1-4.8 3.7 7.1 24.6-16.1-6.7 11.5c-1.4 4.7-11.3 8.3-22.1 10.6-10.4 1.7-24.4 3.2-27.4-1l.2-4.8z" class="svg-bet-29"/>
        </g>
        <g>
          <path fill="#4D4D4D" d="M189.91 246.84l33.2-34.4 17.9-13.6-3.4-15.4-31.3 19.4-16.4 44z" class="svg-bet-30"/>
          <path fill="#E16D58" d="M102.21 287.34l16.4 40.7 41.9 22.1-40.2-23.5-18.1-39.3z" class="svg-bet-31"/>
          <path fill="#B73917" d="M167.21 285.64c-4.2 0-39.9 7.4-39.9 7.4l-41.9 31.4-2.3 55.2 15.8 52.3 37.3 5.4 23.2-47.5-32-21.5-1.4-13.3 41.2-69.4z" class="svg-bet-32"/>
          <path fill="#79231C" d="M165.51 287.54l-43.3 58-4.2 26 28 33.1 4.5 3.4 8.5-18.1-30.8-21.2-2.5-14.7 39.8-66.5z" class="svg-bet-33"/>
          <path fill="#E16D58" d="M123.31 308.44c-.9 1.4-2.3 2.3-3.3 3.6-1.4 1.6-2.7 3.3-4 5.1-3.9 5.5-4.2 6.5-7.4 12.5-2.6 5.2-4.7 10.6-6.3 16.2-.7 2.3-1.4 5.1-1.6 7.5-.1 1.2-.1 2.4-.1 3.6.1 1.3.2 2.7.4 4 .5 3.4 1.4 6.6 2.4 9.8 1.5 4.8 3.4 9.5 5.4 14.2 1.7 4 3.6 8 5.4 12l-3.1 1.8c-1.8-4-3.7-7.9-5.4-12-1.9-4.7-3.7-9.5-5.3-14.3-1.1-3.3-2-6.4-2.6-9.8-.2-1.3-.3-2.7-.5-4 0-1.2 0-2.5.1-3.7.3-2.5 1-5.3 1.8-7.7 1.8-5.7 4-11.1 6.6-16.4 1.1-2.2 2.2-4.4 3.4-6.5 2.2-3.8 4.8-7.6 7.5-11 1-1.2 1.9-2.5 3.1-3.5 1-.7 4.6-1.9 3.5-1.4z" class="svg-bet-34"/>
          <path fill="#E16D58" d="M132.91 304.24c-5.7 8.4-12.9 16.3-17.4 24.4-11.6 28.4-4.1 57.9 13.4 76.8l7.5 1.1-16.4-26.8c-3.8-8.7-5.2-22.6-6-35.2 0 0 1.4-11 3-12.6s15.9-27.7 15.9-27.7z" class="svg-bet-35"/>
        </g>
        <g>
          <path fill="#666" d="M68.21 131.74c-1.8 19.7 12.5 44.7 6.9 67.4-2.2 3.1-8.1-.8-10.4 1.3-7.7 6.9-10.5 9.2-7 21.9-3.1-2.1-7.7-3.9-9.4-5.9-1.8-2.1-.9-4.5-2.6-8.4-3-6.9-16.1-3.6-18.8-7-3-3.7 11.5-3.5 11.3-6.8-.3-5.4 1.1-9.3-1.1-11.2-.8-.7-3.6.2-5.1.3-2.2.2-7.3-3.8-10-2.8-7 1.7-5.7-3-4.3-6.7.4-4.4-.5-11.3.3-15.1 6.1 9.6 7.9 11.3 15.6 10.1 2.2-.3 7.4-.1 9.6-1.5 1.6-25.9-4.5-23.1-8.8-38.9 1.9-29 12.4-37.1 22.4-49.6-2.5-19 11.7-43.3 22.2-53.7-4.5 9.7-10.8 27.7-7.4 27.8 33.3-43.7 113.9-44.2 150.1-10-.6-2.3 25.2 49.6 25.2 49.6 17.6 6.4 29.2 5.3 41.9 7.1-4.3 7.3-7.3 8.5-1.9 16.7 2.4 3.4.8 9 3.9 12.3 20 21.1 4.3 29.7-7.4 36.5-9 5.2-28.4 4.3-41 15.2-18.9 6.4-20-3.9-32.5 9.6l-30.5-57.7-12.4-27.2-2.2-7.7-11.8 12.7-27.3-1.1-22.6-11.9-18.1 17-16.8 17.7z" class="svg-bet-36"/>
          <path fill="#999" d="M113.31 87.74c-32.6 4.1-43.6-.1-40.2-31.8-5.7 3.9-6.5 5.1-7.8 9.2-12.9 38.7 28.1 43.2 48 22.6z" class="svg-bet-37"/>
          <path fill="#999" d="M120.91 86.84c-12.3-2.6-26.1-2.2-36.9-8-14.2-16.6-6.9-26.6 6.3-39.8-3.7 20.5-2.7 22.8 13.8 33l16.8 14.8z" class="svg-bet-38"/>
          <path fill="#999" d="M129.01 84.44c-5.8-9.2-23.3-12.5-30.2-29.7 4.4-28.6 17.9-20.9 43.4-29.8l-23.7 22.3c-5.9 12.6-1.4 17.3 4.3 25.6 2.4 3.7 3.2 6.2 6.2 11.6z" class="svg-bet-39"/>
          <path fill="#999" d="M147.71 67.64l8.1 2.2-.5 4.1c19.1-2.4 27.3 9.2 41.3 23.8l5.1-2.3-6.9-30.3c-22-25.2-42.7-14-47.1 2.5z" class="svg-bet-40"/>
          <path fill="#999" d="M200.51 118.54c-.3 1.8 17.4 28 17.4 28 14.1 3.1 14.8 2.6 12.4 16.1-13.7-4-18.2.3-21.5 7.7 2.1 4.1 2.8 5.7 4.2 11.4 11.5-.9 23.1-2.5 35.2-9.9l-9.3-31.9-28.7-25.3-9.7 3.9z" class="svg-bet-41"/>
          <path fill="#999" d="M224.81 116.24l-4.8 4.1 16 14.5c25.2-4.7 22 8.5 34.2 29.4l12-19.8c-12.7-18.7-22-23.9-43.5-26.7l-13.9-1.5z" class="svg-bet-42"/>
          <path fill="#999" d="M166.81 93.44c4.9 18.7 9.5 32.5 20 43l6.9-3s11.7 6.3 12.3.5c.4-3.8-8.8-16.6-9.3-16.6-14.8-5.6-14.2-14.5-23-31.8l-6.9 7.9z" class="svg-bet-43"/>
          <path fill="#999" d="M91.11 109.04c-22.8 10.1-30.5 17.7-43.9-3.4 14.5-.5 42.1-5.5 43.9 3.4z" class="svg-bet-44"/>
          <path fill="#999" d="M44.31 194.94c28.5-7.8 18.6-23.1 13.5-47.9l-5.1-18.8c-15.7 26.4 5.3 43-8.4 66.7z" class="svg-bet-45"/>
          <path fill="#999" d="M135.11 81.84c-19.3-37.8 6.8-52.3 35.1-52.6-18.9 14.8-28.1 25.3-35.1 52.6z" class="svg-bet-46"/>
          <path fill="#999" d="M167.11 39.24c29.2-6.8 40-.1 45.6 26.7-13.4-5.5-34.4-17.8-45.6-26.7z" class="svg-bet-47"/>
          <path fill="#999" d="M221.91 102.84c20.9 14.7 30.9 14.4 55.6 18l7.2 5.5-7.4-14.6 4-8c-9.3-4.1-27.6-1.2-41.7-4l-17.2 2.2-.2 2-.3-1.1z" class="svg-bet-48"/>
          <path fill="#999" d="M203.31 68.94c1.6 21.1-2 29.4 19.8 43.1l-8.1-18.8c-.5-18.4 1.4-13-11.7-24.3z" class="svg-bet-49"/>
          <path fill="#999" d="M45.31 171.84c-11-1.3-19.9-2.5-24.9 6.3l8.2-.1-3.2 1.7c2.6.1 4.9 1 7.4 1.7 6.3-2.4 10.9-4.4 12.5-9.6z" class="svg-bet-50"/>
          <path fill="#999" d="M61.51 187.44c-.2.4-11 12.5-11 12.5l-1.2 15.1 4.9 1.9-.4-10.3 6.4-9.1 4.4-4.8.6-10-3.7 4.7z" class="svg-bet-51"/>
          <path fill="#999" d="M43.51 112.64l-3.9 15 2.9 13.4 1.7 2.2 3.5-14.2 1.6-11.8-5.8-4.6z" class="svg-bet-52"/>
          <path fill="#999" d="M72.71 97.34l-19.9-5.8 3 9.7 16.3 2.7 11.1-2.7-10.5-3.9z" class="svg-bet-53"/>
          <path fill="#999" d="M176.41 84.44c7.3 19.2 6.8 22.1 21.2 32.3l12.7-4.1s4.3-1.4 2-2c-2.2-.6-15.7-11-15.7-11l-18-17.8-2.2 2.6z" class="svg-bet-54"/>
          <path fill="#999" d="M201.91 153.64c-3.3 9.9-2 8.6 4.1 16.9 5.2-11 11.3-12.3 21.5-12.3 1.4-2.1 2.7-4.1.9-7.2-8-.6-18.5 1.6-26.5 2.6z" class="svg-bet-55"/>
          <path fill="#999" d="M216.41 51.74c9 14.7 23.2 25 20.1 42.5-3.5-.4-7-.6-10.5-5.1-8.5-12.5-12.6-22.4-9.6-37.4z" class="svg-bet-56"/>
        </g>
      </svg>
    </div>
    <ul class="section__list">
      <li class="list-item" data-translate-y style="--kf-delay: 2100">
        <p class="list-item-title">Author</p>
        <p class="list-item-subtitle">John Doe</p>
      </li>
      <li class="list-item" data-translate-y style="--kf-delay: 2300">
        <p class="list-item-title">Category</p>
        <p class="list-item-subtitle">Art, Illustration</p>
      </li>
      <li class="list-item" data-translate-y style="--kf-delay: 2500">
        <p class="list-item-title">Source</p>
        <a href="https://pixabay.com/vectors/beethoven-classics-composer-europe-1295440/" class="list-item-subtitle" target="_blank" rel="noopener noreferrer">Pixabay</a>
      </li>
    </ul>
  </section>
  
  <section class="section" id="chopin" data-animation="chopin">
    <div class="section__title">
      <h1 class="title" data-title data-split-word>Frédéric Chopin</h1>
    </div>
    <div class="section__content" data-translate-x>
      <p class="paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque quis, qui rerum est eum blanditiis id quia natus voluptatum distinctio ad aspernatur repudiandae illum sit tempora expedita beatae vero amet.</p>
    </div>
    <div class="section__pagination" data-fade-in>
      <button data-href="#beethowen" class="btn btn--left" type="button">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#242424" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M 15 12 l -6 0 l 6 0"/></svg>
      </button>
      <button data-href="#bean" class="btn btn--right" type="button">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#242424" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M 9 12 l 6 0 l -6 0"/></svg>
      </button>
    </div>
    <div class="section__img" data-image>
      <svg class="img" viewBox="0 0 324.5 440.753" xmlns="http://www.w3.org/2000/svg">
        <path d="M55.279 172.68c5.386 10.243 15.505 10.579 23.672 11.547 0 0-6.928 1.732-14.819-1.347s-8.276-10.2-8.853-10.2zm59.276-33.487s-.137 22.973-5.004 26.751c-6.55 5.085-13.087 16.359-27.906 21.363 2.988-1.48 8.43-5.678 12.157-8.179 1.2-.804-3.514.874-6.45 1.354 4.096-1.602 7.542-5.56 5.07-5.3-5.21 1.748-8.407 1.811-9.43.385s.213-6.25-3.464-2.886-6.668 3.938-10.585.962-10.519-9.176-11.355-13.28 1.573-7.184.578-8.852-4.854.91-2.695-1.54c1.945-2.206 5.387-6.35 9.046-12.317 0 0-1.188 6.573-.193 9.623.71 2.176 3.657-.385 3.657-.385 3.425 2.528 2.107 9.67 5.581 14.627-1.493-6.41.788-8.639.962-12.702l2.695-3.272 3.271 4.427 4.812-5.389 4.041 7.12 3.465-1.346s-1.482-8.078 1.54-9.046 7.407 6.159 9.43 10.008c0 0-.32-7.798-.77-11.162-.494-3.699 3.572-5.349 4.619-2.31.622 1.807 2.768 3.533 3.464 5.197.765 1.83 3.464-3.849 3.464-3.849zm14.627 37.529c.75.463.868 3.036-.5 4.76-1.4 1.762-4.309 2.67-5.659 2.746-3.815.212-1.746-4.5-5.003-3.657s-5.631 4.5-6.351 3.657 3.6-3.641 2.502-5.004-3.618-.58-5.582-.577-4.003.28-5.773.577c-1.573.264-1.102-2.928.77-2.502 2.265.515 6.862-1.312 8.852-4.619 3.56-5.912 5.582-13.087 6.544-18.09s7.698-4.043 5.581 3.078-5.389 9.238-3.464 13.28 4.893 4.381 8.083 6.35zm14.049-42.148c.21 3.032-2.242 6.911-3.272 12.702s-.665 18.394-1.924 21.94c-.105-1.073.025-2.384-1.348-2.502s-2.532 1.979-4.234 2.502c3.496-4.866 3.873-6.589 4.042-9.43s.011-6.133-1.925-6.544-2.231 3.97-4.041 3.657-1.455-3.474-2.117-7.89 3.636-14.105 2.117-18.284-3.51-3.28-4.042-4.234c-.839-1.506.821-3.198 3.272-3.08s5.1 3.63 5.966 7.699c.846 3.973-2.34 12.931-.962 18.476 1.762-4.078 3.853-9.68 5.004-12.317s.067-6.96 2.117-7.12 1.137 1.393 1.347 4.426zm131.76 8.67c2.655 3.45-7.335 2.917-7.015 7.701s6.147 1.016 7.45 3.398 1.74 6.242-1.277 6.869c-2.699.56-1.459 2.549-.837 7.151s-3.807-2.407-5.082-.7c-1.24 1.658-1.888 9.776.546 12.164 2.905 2.85 3.612 5.498 3.327 8.749s-2.046 4.59-.111 9.975c1.594 4.439-.806 5.74-4.034 6.688-1.78.523-5.944 1.625-6.327-.27s1.124-3.719 3.046-4.06 4.43 1.83 3.045-2.791-1.277-7.823-.761-11.42-3.466-4.563-3.3-7.614-.226-9.78-1.522-14.72-6.907-10.224-4.822-12.689-.446-8.536-.167-9.477 2.865.752 3.347.511-3.348-7.296-.642-8.545 2.572 3.533 5.127 5.201 7.354.429 10.01 3.88zM204.874.004c-.332.005-.655.009-.969.03-10.049.719-6.106 4.332-15.438 6.845s-15.078-2.883-26.562 3.218-23.673 12.563-36.594 13.281-20.478 1.79-27.656 7.532-11.82 20.088-17.562 28.344-8.986 15.074-10.78 23.688 1.07 19.05 6.812 22.28 16.522 9.318 21.188 12.907 9.335 6.812 2.875 6.812-2.528 1.454.343 2.531 6.816-.004 8.97-2.875c1.526-2.035 1.692-9.57 15.56-8.01 4.373.491-2.33-7.58.595-8.521 10.05-3.23 15.08-6.442 16.875-10.031s-1.978 7.43-7.421 13.553c3.613-3.044 7.075-5.586 11.734-12.116-1.33 5.702-2.123 10.415-12.376 16.428 4.54.359 8.134-2.59 12-4.585 0 0-6.438 6.442-7.874 10.031s3.565 7.92 5.719 6.125 5.809 5.14 5.03 7.531c-2.378 7.313-1.394 13.051-1.639 19.99s-1.74 11.937-1.579 16.487c.193 5.475 3.719 18.122 16.594 27.054-10.516-10.16-13.559-19.8-11.446-21.083 1.215-.737 7.67 5.651 8.929 4.125 1.096-1.328-8.095-14.2-7.867-21.33s1.91-13.822 5.666-20.744c4.495-8.286 7.175-22.175 10.312-33.562s-8.513-15.56-9.25-22.656c-.627-6.026 11.8-6.835 7.093-30.688 3.96 3.38 14.127 7.182 18.938 11.47 4.952 4.413 12.221 4.153 21.97 5.406s6.84 11.464 9.656 15.156 8.476 3.753 10.366 5.19c2.852 2.166 11.923-.669 16.276-4.425 3.196-2.759 5.148-4.593 11.825 1.75-1.608-5.167-6.466-11.088-5.075-9.181 5.646 7.739 13.374 5.151 18.551 11.356 1.534 1.838 8.853 12.209 8.853 14.747 4.466 11.016-2.16 10.692-3.065 18.28-.321 2.692 3.41 9.8 4.425 6.502s2.03-.51 2.03 2.28.274 8.873.782 11.157 2.281-2.033 2.281-6.094 2.285-18.787 2.031-22.594-.017-8.63-3.062-12.438 5.962-6.156 10.263-10.28c4.041-3.874 8.56-12.97 10.015-27.818.942-9.61-3.847-24.243-8.871-33.933s-16.873-19.018-27.281-20.812-13.263 4.996-23.312 2.125C234.016 7.658 215.18-.164 204.877.001zm-26.812 25.219c-1.284 16.44 30.312 36.719 30.312 36.719-19.589-6.252-24.426-7.19-30.031-15.22-4.146-5.939-9.74 4.255-11.312-5.062-1.556-9.22 2.04-14.383 11.031-16.438zm-41.25 13.03c.746-.065 1.404.156 1.937.844 2.136 2.753-2.789 6.184-7.437 5.656s-8.24-.853-13.625-.78-7.782.208-15.656 1.53c2.914-4.328 13.022-8.134 17.219-6.656 4.283 1.509 6.31 2.283 9.75 2.313 2.58.022 5.573-2.709 7.812-2.906zm-19.938 27.439c.358.006.718.048 1.094.125 3.004.608 7.187 2.812 7.187 2.812l10 2.063c-.475 3.327-13.872 3.99-14.375 4.875s11.312 4.875 11.312 4.875c-4.058 1.623-20.747-.39-18.25-4.375s-3.046 1.272-3.594 2.593c-.502 1.212-3.373-.999-3.093-2.062s2.159-4.026.28-5.906-11.061 0-11.061 0 7.274-4.702 11.812-4.125c3.949.502 6.184-.917 8.687-.875zM85.093 84.38s34.639.326 37.344 5.03 12.138 1.596 11.469 6.095c-.874 5.876-4.273 2.89-10.031 3.593-4.353.531-3.594-3.937-3.594-3.937-.503-3.27-9.123.506-9.687-2.156-.407-1.92 1.062-3.594 1.062-3.594-4.494-2.298-15.529-3.668-26.562-5.031zm81.623 169.83s-24.372-15.782-28.17-20.557c-2.719-3.418-4.822-10.66-4.822-10.66 9.365 12.582 18.52 16.987 32.992 31.217zm-23.591-61.67c-5.583 3.046-10.995 7.882-14.219 8.626-3.3.76-8.63 1.008-10.406 2.53s-.759 5.08-2.281 6.095-2.789-1.014-2.281-4.313 3.042-4.568 2.28-8.375-5.59-1.01-7.874 1.781-1.61 5.643-4.063 6.344c-1.776.508-3.813-4.304-5.844-2.781s-1.771 4.062 1.782 4.062 11.923 8.612 14.969 13.688 4.312 3.815 4.312-.5.781-9.906.781-9.906 5.237 14.986 11.156 22.094c4.597 5.52 20.52 18.042 25.625 21.312 8.63 5.529 24.707 18.367 35.281 24.094-14.283-10.54-21.563-23.367-22.594-25.875-1.642-3.998 1.78-2.033-2.28-6.094s-10.65-16.99-11.157-21.812-5.844-8.904-7.875-4.844-6.844 4.062-8.875 2.032-2.042-13.451-1.281-16.75.276-7.346 4.844-11.406zm-16.562 12.563c.656-.074 1.298.096 1.594.625 1.095 1.956 1.208 7.479.25 8.375-1.148 1.072-2.954-4.08-3.813-7.094-.277-.972.876-1.785 1.97-1.906zm-54-8.503c-.518 6.56-12.229 14.467-13.869 21.413-1.552 6.572-1.385 15.663 10.062 21.984 0 0-16.905-8.13-18.273-22.08-1.269-12.942 10.466-19.395 16.75-23.855 1.794-1.274 5.613-1.057 5.33 2.538zm9.644 39.337c-9.335.217-14.766-6.906-12.943-12.435 2.405-7.295 12.435-20.303 23.602-22.841 5.077-1.154 2.03-10.66-3.807-6.852s-20.389 13.207-24.871 21.826c-3.3 6.344-3.178 14.342 1.015 18.526 3.704 3.695 17.257 2.03 17.004 1.776zm24.7-19.865c-2.422 11.264-11.755 12.063-18.188 17.406-7.604 6.316-4.624 15.66-10.781 19.469-11.927 7.375-14.694 11.505-20.344 20.438-2.318 3.664-9.06 4.644-10.75 8.594-3.253 7.603-15.915 18.923-26.72 21.5C8.277 306.304 1.344 306.476 0 312.385v128.38h179.72c-1.545-4.768-4.169-11.96-6.813-14.844-4.1-4.473-7.094-7.806-7.094-11.906s2.61-5.592 5.22-5.219 7.08.361 10.061-1.875 6.342-5.21 11.188-3.719 7.092 2.61 11.938 0c0 0-7.53 25.543-11.25 37.562H324.5l-23.062-26.969s-19.284-21.266-24.562-41c-5.557-20.776-15.306-36.639-29.25-60.406-2.63-4.483-9.327-8.943-13.625-12.875-3.33-3.046-4.502-6.064-4.219-7.5.339-1.714 2.772-2.623 6.125-2.625 1.55 0 1.255-2.505 2.47-2.812 2.504-.635 4.236-3.595 5.78-6.844-3.9 4.5-8.352 6.668-9.78 5.219-1.808-1.833-16.19 5.681-19.439 5.53-10.003-.462-18.345-3.958-34.062-16.687 10.551 12.439 23.864 17.08 31.906 19.594-8.98-.737-17.36-4.824-24.719-9.281 5.871 5.95 10.062 7.55 11.97 8.5 3.05 1.519 1.167 4.448-1.5 2.78-2.992-1.868-5.204-3.299-8.657-5.218-9.189-5.106-18.974-16.82-27.125-23.219 9.463 11.386 14.811 18.765 28.781 27.72-6.471-1.016-9.073-6.176-13.156-7.864-5.032-2.08-5.708-6.581-7.13-7.392-2.478-1.413-5.327-.672-6.214-2.432-1.379-2.74-4.811-7.515-6.406-10.125s-14.28-13.562-14.28-13.562c-13.2-11.327-27.992-20.262-37.439-37.22zm124.54 29.918c-3.314 1.917-3.303 5.737-6.954 5.737s-13.559.396-16.515-2.087c-4.346-3.65-6.258 0-3.303 2.26s10.952 6.433 14.255 8.171c2.432 1.28 8.692.174 11.126.87 3.082.88.348 5.562 1.043 8.344s5.042 5.389 7.302 3.303 1.216-4.694 3.129-5.216 3.65.174 4.867-2.433 2.782-9.91.348-12.864-7.301-6.433-9.561-6.606-3.525-.758-5.737.521zm20.556-16.873c1.67 8.953-.523 16.278-2.95 21.02-.396-7.053-.953-10.38-4.057-10.695-2.143-.217-2.202 1.16-3.319 2.95-.693 1.11-6.254.095-6.146-1.598.093-1.465-.386-3.332-1.598-3.934-5.094-2.528-12.95-.466-14.136-1.844-1.837-2.13-4.544-1.08-5.409-2.704-.997-1.871.092-2.207 1.598-2.581 1.966-.489 5.334.895 7.744 0 7.964-2.96 12.448-4.407 14.751-4.057 3.262.496 4.108 3.009 6.392 3.934 1.858.752 4.962.311 7.13-.492zm4.408-25.221c-6.627-1.51-16.09-6.242-18.413-1.896-2.316 4.332-5.777 2.208-5.812 5.803-.055 5.511 7.655 2.997 10.599 6.025 2.225 2.289-1.009 8.264 2.108 10.367 1.762 1.188 5.04-.744 7.35.8 3.592 2.403 3.626 7.964 4.95 11.982 1.567-3.97 1.387-9.177 1.562-13.806.089-2.344-1.623-3.891-.26-5.8 1.739-2.438 6.49-2.762 10.136-3.838-3.71-3.642-7.82-.997-9.218-1.78-1.242-.697-1.038-1.321-2.235-2.093-2.548-1.645-5.22-1.716-9.103-2.639 4.455-.463 7.122-.159 8.748-.691.94-.309.553-2.215-.412-2.435zm-45.727-67.98a6.362 6.362 0 00-4.219 1.594c-4.218.62-8.2 2.044-10.062 3.375 3.029-.405 5.777-.615 8.281-.782a6.244 6.244 0 00-.375 2.157c0 3.509 2.866 6.375 6.375 6.375 3.5 0 6.327-2.849 6.344-6.344 1.661-.025 3.246.55 4.781.812 0 0-2.536-3.033-6.125-4.75a6.333 6.333 0 00-5-2.437zm3.937 3.687c.61 0 1.125.752 1.125 1.688s-.514 1.687-1.125 1.687-1.093-.751-1.093-1.687.483-1.688 1.093-1.688zm-1.937 3.875c.763 0 1.406.955 1.406 2.125s-.643 2.094-1.406 2.094-1.375-.924-1.375-2.094.612-2.125 1.375-2.125zm-7.263 18.044c2.252.175 5.623 3.1 8.288 2.579s5.774-3.25 2.763-4.605-8.113.1-8.841-1.658 4.641-5.525 7.92-5.894 5.96.24 7.552 1.474c1.961-1.53-4.415-3.708-2.947-5.526s6.25 2.174 7 .184-7.791-2.599-4.422-3.683 4.458.456 7.255 2.207c2.564 1.606 5.811 2.173 6.007 6.265s-4.01 7.248-6.124 10.35c-2.58 3.785-4.018 6.516-6.807 6.235-2.072-.208-2.067 3.848-4.014 3.86s-3.347-4.6-7.368-3.13-9.937 1.726-11.05-.185 4.682-1.076 4.972-3.315-5.025-2.321-4.605-4.053 2.169-1.28 4.421-1.105zm-23.761-25.05c3.627.411 4.737 2.53 5.341 4.052.632 1.594 2.573 3.054 3.868 2.763s1.885-4.871 3.316-5.71c1.29-.756 3.412.637 5.71 0s4.84-3.85 7.551-3.868 5.408.45 6.263 2.21c.926 1.908 6.748 1.074 7.552-2.946s-2.65-4.905-5.526-4.973-3.19 1.474-4.901.968c-3.922-1.158-5.44 2.49-7.808 3.268s-5.083-.247-7.184.368-2.788 2.265-5.157 2.947-12.653.51-9.025.921zm14.944-15.343s11.094-4.04 15.616-2.575 6.308-1.779 8.146.052c2.12 2.112 5.49 4.138 10.038 2.76s12.603 2.696 12.251 10.594c1.674-5.548-1.388-9.711-4.284-12.907 3.366-.248 5.905 4.72 5.783 7.993 3.008.142 6.061-5.467 8.175-9.44 1.562 6.343-7.486 10.75-5.861 12.59s2.956-1.714 5.861-5.046c.142 4.405-1.95 8.754-3.97 11.197s-4.03 1.952-4.704 4.496c-.74 2.788-.28 6.96-1.052 9.988s-6.04 1.606-5.52-2.365c.527-4.014-.12-10.098-1.314-12.091s-4.83-2.671-6.308-3.943-.059-3.325-1.577-4.469-4.423 1.339-7.098 0-2.737-3.773-7.36-5.783-16.823-1.05-16.823-1.05z"/>
      </svg>
    </div>
    <ul class="section__list">
      <li class="list-item" data-translate-y style="--kf-delay: 2100">
        <p class="list-item-title">Author</p>
        <p class="list-item-subtitle">John Doe</p>
      </li>
      <li class="list-item" data-translate-y style="--kf-delay: 2300">
        <p class="list-item-title">Category</p>
        <p class="list-item-subtitle">Art, Illustration</p>
      </li>
      <li class="list-item" data-translate-y style="--kf-delay: 2500">
        <p class="list-item-title">Source</p>
        <a href="https://pixabay.com/vectors/pianist-chopin-delacroix-eugene-151935/" class="list-item-subtitle" target="_blank" rel="noopener noreferrer">Pixabay</a>
      </li>
    </ul>
  </section>

  <section class="section" id="bean" data-animation="bean">
    <div class="section__title">
      <h1 class="title" data-animation="kf-words" data-split-word>Mr. Beans</h1>
    </div>
    <div class="section__content" data-translate-x>
      <p class="paragraph">Beans consectetur adipisicing elit. Itaque quis, qui rerum est eum blanditiis id quia natus voluptatum distinctio ad aspernatur repudiandae illum sit tempora expedita beatae vero amet.</p>
    </div>
    <div class="section__pagination" data-fade-in>
      <button data-href="#chopin" class="btn btn--left" type="button">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#242424" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M 15 12 l -6 0 l 6 0"/></svg>
      </button>
      <button data-href="#elvis" class="btn btn--right" type="button">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#242424" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M 9 12 l 6 0 l -6 0"/></svg>
      </button>
    </div>
    <div class="section__img" data-image>
      <svg class="img" viewBox="0 0 740.8 800" xmlns="http://www.w3.org/2000/svg">
        <path d="M438.75 308.17l-180.78 61.051c-38.413 18.643-126.77 58.692-190.16 88.039-9.201-6.953-23.173 11.732-28.76 31.688C8.958 596.418 1.901 697.368.006 800.008h735.98c2.47-44.793 5.977-88.532 4.455-137.32.7-89.113-8.275-167.55-35.206-210.13-6.813-10.773-10.946-13.138-19.965-15.266 0 0-36.909-17.126-72.298-29.993-17.482-6.356-33.643-8.226-46.658-13.25-22.344-8.624-66.508-27.181-66.508-27.181-43.299-16.443-39.277-48.026-61.05-58.702z" fill="#6d6146" class="svg-bean-1"></path>
        <path d="M222.76 387.11c-21.444 29.846-42.355 60.055-63.096 90.389 23.143-28.622 42.707-59.805 63.096-90.389zM176.68 495.4l-.587 5.87c-.242 2.417 2.329 5.025 4.696 5.575l12.619 2.935c3.034-2.152 1.426-5.303-.88-6.456zM196.93 518.9l-32.282 19.663c-1.534.934-3.1 2.96-2.641 4.696l61.922 234.19 4.989 20.836-2.935-21.423-60.162-230.67c-.63-2.42 1.643-5.22 3.815-6.457l21.13-12.032c3.113-1.772 4.109-5.87 6.163-8.804zM64.15 459.3c-3.044 10.099-8.579 19.755-9.129 30.288-1.271 24.347 2.121 48.729 3.736 73.056.6 9.024 2.718 17.933 2.902 26.976.37 18.262-1.629 36.523-1.245 54.786.309 14.703 1.812 29.36 3.325 43.988 3.853 37.249 8.353 74.435 12.634 111.64h12.685c-1.427-5.662-2.878-11.313-4.147-17.012-4.584-20.579-9.673-41.063-13.289-61.834-3.446-19.796-7.197-39.685-7.883-59.767-.842-24.636 4.201-49.243 3.325-73.878-.378-10.632-6.082-20.529-7.062-31.123-2.076-22.465-3.043-45.11-2.08-67.651.43-10.03 4.152-19.644 6.227-29.466zM526.498 419.8l26.977 51.049c1.435 2.716 1.502 7.757-1.245 9.13l-41.503 20.753 18.676 14.94 31.127-14.94c5.647-2.71 3.894-12.682 2.075-18.676-.998-3.289-6.64-7.886-6.64-7.886l-1.66-3.735zM553.47 545.6l-97.515 254.41h57.174c12.231-48.411 7.969-97.063 6.728-147.33l21.172-1.656 25.73-86.743c1.23-4.146 2.198-10.931-1.67-12.865l-11.62-5.817zM659.305 518.2c-5.949 22.55-12.253 45.01-17.847 67.65-3.124 12.645-5.527 25.457-8.294 38.184 0 9.407.395 18.822 0 28.221-.99 23.538-1.825 47.109-4.16 70.552-1.405 14.1-6.798 27.754-7.049 41.92-.17 9.603 5.283 18.631 5.816 28.221.13 2.35.178 4.697.193 7.049h38.492c-3.865-9.103-7.614-18.242-10.053-27.797-5.976-23.404-10.878-47.284-12.454-71.387-1.761-26.932 1.66-53.962 2.49-80.94.416-13.28-.422-26.657 1.246-39.84 2.633-20.807 7.746-41.22 11.62-61.833z" class="svg-bean-2"></path>
        <path d="M438.89 308.24l-13.661 156.42 25.319-34.859c13.463-18.539 22.692-17.767 33.613-16.19 10.26 1.48 17.051 3.938 34.448.835h4.57l2.492 4.557c7.332-1.798 14.713-3.396 21.994-5.392 9.878-2.709 19.46-6.523 29.466-8.718 5.87-1.287 11.813-2.194 17.77-3.017-10.513-2.66-20.207-4.595-28.593-7.832-22.344-8.624-66.508-27.181-66.508-27.181-43.202-16.406-39.3-47.88-60.91-58.624z" class="svg-bean-3"></path>
        <path d="M437.58 300.88l-192.51 78.063-9.989 56.352 11.748 66.328 14.675-14.675c7.774 104.16 9.671 208.02 7.562 312.23h136.85c.904-116.58 17.518-230.87 36.361-345.69 1.37-9.978 1.736-20.14 4.109-29.929 2.347-9.682 8.715-18.3 9.976-28.182 1.147-8.98-2.534-17.945-2.94-26.988-.378-8.407 2.514-17.05.59-25.242-3.454-14.714-10.955-28.181-16.433-42.267z" fill="#dfe7e9" class="svg-bean-4"></path>
        <path d="M437.58 301.71l-191.14 77.511-1.335 4.93c1.85 5.27 2.841 10.054 12.53 19.734 2.693 2.69 6.866 4.978 10.298 9.322 4.799 6.073 7.204 13.879 11.697 20.029 4.561 6.245 10.316 11.428 19.015 13.995l-34.86 39.853c5.12-1.522 10.093-3.669 15.357-4.571 4.501-.772 9.41 1.193 13.687-.411 3.948-1.48 6.142-5.827 9.552-8.307 2.706-1.968 5.813-3.322 8.718-4.982l1.246-4.981c2.554 7.596 8.234 9.782 14.11 13.7 12.506 107.49 13.68 214.98 44.488 322.47h34.974c.042-5.478.12-10.952.23-16.422-3.768-13.094-12.97-24.512-15.368-37.94-2.272-12.723-5.13-20.666-8.295-28.632-6.355-16.002-13.7-49.804-13.7-49.804l-2.901-49.393c-.88-14.94-2.702-20.446-5.816-26.976-4.7-9.853-3.621-16.796-1.246-23.663 2.492-7.205 1.779-12.242 1.194-17.474-1.447-12.964.863-27.37 1.297-38.557 1.95-11.587.675-16.013-.834-19.914 2.359-3.879 3.322-6.826 4.57-9.964 1.1 2.715 7.791-.787 12.865-2.49l-26.154-43.989c23.688 1.415 43 19.82 62.682 31.957 3.158.965 5.003 3.228 12.441-.834 4.505-2.46 9.073-1.962 13.648-.886.582-3.569 1.16-7.138 1.747-10.708 1.37-9.978 1.735-20.141 4.108-29.93 2.347-9.681 8.715-18.3 9.976-28.181 1.147-8.98-2.533-17.945-2.94-26.988-.378-8.407 2.514-17.05.59-25.242-3.454-14.714-10.955-28.181-16.433-42.267z" fill="#796e76" class="svg-bean-5"></path>
        <path d="M455.75 384.26c-19.868 35.561-39.114 76.12-58.535 115.26-.65 1.311-2.32 1.69-4.353 1.04 1.634 1.45 3.548 1.309 4.353 0 22.853-37.155 40.269-76.082 58.637-115.67-.034-.21-.067-.419-.103-.63z" fill="#534b51" class="svg-bean-6"></path>
        <path d="M340.14 421.4c-4.845 4.937-13.694 5.862-23.175 6.163l-7.344 7.922 8.808 2.94 2.054 27.001c-2.446 7.435-5.78 14.633-7.344 22.302-3.539 17.351-7.106 34.836-7.922 52.526-1.93 41.824-2.124 83.779-.295 125.61 1.306 29.884 5.654 59.582 9.693 89.221 2.05 15.041 4.899 29.95 7.704 44.874h68.845c-2.08-3.943-4.307-7.824-5.83-12.005-8.58-23.575-16.038-47.552-24.06-71.323-8.022-23.771-8.808-26.405-8.808-27.579s-1.755-13.79-1.168-28.17c.587-14.38 1.708-28.748 1.759-43.14.047-13.411-.775-26.82-1.464-40.213-.876-17.033-2.293-34.033-3.235-51.062-.428-7.722-.94-15.455-.874-23.188.032-3.64 1.544-7.228 1.169-10.849-1.006-9.695-3.516-19.173-5.277-28.76l7.626-22.893 3.518-1.181-14.38-18.193z" fill="#571014" class="svg-bean-7"></path>
        <path d="M324.79 596.6c2.352 27.254 4.995 54.484 7.062 81.761 1.392 18.38 1.309 36.885 3.312 55.209 2.427 22.196 5.646 44.292 8.86 66.392h5.174c-1.879-11.326-3.753-22.651-5.316-34.024-2.579-18.768-4.875-37.58-6.638-56.442-2.388-25.555-2.99-51.267-5.803-76.779-1.342-12.164-4.437-24.081-6.65-36.117z" fill="#33090c" class="svg-bean-8"></path>
        <path d="M158.16 135.96l.415 7.47c-1.01 1.073-.53 4.829-.208 8.301-.793 1.83-1.142 4.883-.83 9.753-.007 2.852-1.695 4.785 1.038 9.131-.844 3.342-3.384 5.648.415 11.828-1.041 2.486-4.739 4.23.623 8.508-.687 2.214-2.017 3.223-.623 9.338l10.376 21.582c-.55 3.625 3.36 8.984 8.555 15.382-1.04 4.295-.922 6.4-.102 6.958 1.337-.083 2.586-.324 4.724-1.485l.519 5.81c-1.502.555-2.906 3.21-.311 11.726-.224 3.706-.014 10.016.311 17.016-3.163 18.905 2.088 31.312 17.016 40.05 10.734 20.787 20.103 42.428 37.353 59.142 5.2 8.515 12.299 15.792 21.997 21.374 12.677 13.35 30.241 22.532 61.632 19.92 3.625 2.01 6.35 5.619 14.734-.83l53.331-43.992c16.07-13.256 32.404-28.683 41.296-43.786 3.456-5.87 5.08-12.627 5.188-17.846.129-6.202-.767-9.534-2.075-12.451-1.247-16.08-2.301-31.848-.83-43.578l10.998-21.167 6.848-41.296-5.603-33.825-49.39-5.81-54.16-91.1-121.6 10.791z" fill="#bd947b" class="svg-bean-9"></path>
        <path d="M223.94 327.7c3.526.76 5.633 4.929 9.13 5.81 5.516 1.39 11.448-.09 17.017-1.245 6.169-1.278 11.966-3.964 17.846-6.225 2.662-1.024 5.136-2.562 7.885-3.32 7.677-2.116 25.421-3.865 25.421-3.865l-27.91 31.672-34.033 2.386-17.43-9.857-3.736-14.526s3.898-1.242 5.81-.83z" fill="#965e49" class="svg-bean-10"></path>
        <path d="M202.57 174.14c30.532-13.228 40.843-34.879 97.74-14.526-47.918-13.756-73.361 4.556-97.74 14.526zM158.64 170.53c9.099 7.138 19.653 11.386 30.081 16.141-13.64-4.108-19.569-7.673-30.081-16.141z" fill="#9b6b4e" class="svg-bean-11"></path>
        <path d="M192.39 189.46c3.155.367 6.699.382 9.684-.88 4.536-1.918 7.84-6.037 12.18-8.364 10.566-5.665 21.023-11.861 32.429-15.554 7.584-2.456 15.829-3.334 23.77-2.642 8.066.704 15.555 4.5 23.332 6.75-7.63-1.516-15.12-4.209-22.891-4.549-8.057-.352-16.357.122-24.065 2.495-11.127 3.426-21.296 9.44-31.695 14.674-4.294 2.161-7.796 5.876-12.326 7.483-3.278 1.164-6.946 1.346-10.418.587z" fill="#9b6b4e" class="svg-bean-12"></path>
        <path d="M160.4 183.15c1.516 1.418 2.784 3.162 4.549 4.255 3.812 2.362 8.044 3.967 12.032 6.016 4.767 2.45 9.101 5.936 14.233 7.484 3.842 1.16 8.228 1.72 12.032.44 6.32-2.128 11.555-6.67 17.168-10.27 4.762-3.056 8.964-6.991 13.94-9.685 6.28-3.4 12.802-6.527 19.663-8.51 5.443-1.575 11.225-2.498 16.875-2.055 5.198.407 10.212 2.409 14.967 4.549 2.216.997 3.717 3.13 5.576 4.695-1.908-1.223-3.599-2.88-5.723-3.668-4.794-1.78-9.716-3.648-14.82-3.962-5.413-.334-10.925.567-16.141 2.054-5.707 1.627-11.001 4.493-16.288 7.19-6.712 3.424-13.187 7.3-19.663 11.152-5.12 3.046-9.405 7.834-15.114 9.538-4.142 1.236-8.786.11-12.913-1.174-5.619-1.749-10.573-5.17-15.847-7.777-3.432-1.697-7.146-2.926-10.271-5.136-1.815-1.283-2.837-3.424-4.255-5.135zM161.37 192.2c5.362 4.262 12.586 11.421 19.091 12.97-6.921-.63-14.68-7.578-19.091-12.97z" fill="#9b6b4e" class="svg-bean-13"></path>
        <path d="M235.25 194.48c19.668-14.983 40.406-20.275 64.745 7.056-17.142-24.388-40.952-28.694-64.745-7.056zM233.03 147.93c22.019-7.632 39.35-7.996 63.096-1.467-24.995-4.604-44.563-2.692-63.096 1.467z" fill="#9b6b4e" class="svg-bean-14"></path>
        <path d="M202.51 239.64c-11.531-10.304-24.457-19.03-36.119-34.306-2.698-3.534-5.115-2.034-7.975-6.193-1.704.105-3.875-.284-6.09-3.962 2.498 5.521 1.85 3.485 4.99 8.51-1.722-.097-2.977-1.616-4.843-4.401 1.06 2.039.379 2.335 3.521 6.456-.884.877.844 4.365 1.761 7.043l-3.668-3.521c1.008 2.704 2.953 3.994 5.136 5.722-2.222.889-2.694.17-4.99-.146 2.7 1.142 3.903 1.884 6.75 2.494 3.661 3.046 8.416 4.201 12.473 6.603 9.5 5.625 19.214 10.741 29.054 15.701z" class="svg-bean-15"></path>
        <path d="M182.27 290.09c.794 11.973 6.552 20.656 17.808 27.245 1.817 3.518 3.596 7.053 5.38 10.592 10.266 11.612 19.1 27.45 30.365 40.405-2.732-5.57-5.422-10.967-9.54-15.703 3.894-.414 7.891-.793 8.359-2.35-5.301-8.184-4.482-9.728-5.432-13.199-7.032-6.088-7.887-8.474-9.244-11.157-10.797.427-26.449-8.614-24.356-22.893-7.83-2.464-10.663-6.22-13.34-12.942z" fill="#9b6b4e" class="svg-bean-16"></path>
        <path d="M400.5 153.76c-13.794 22.299-29.156 47.965-32.766 54.631-6.705 12.38-15.592 23.801-20.119 37.131-2.897 8.53-3.23 18.118-1.656 26.988 1.558 8.783 9.046 15.736 10.785 24.485 2.619 13.179 11.085 30.278 2.08 40.251-11.221 12.427-40.564 2.34-34.653 21.172-3.412 3.489-13.815 2.886-20.132 6.227-10.823 5.725-15.818 14.76-23.445 22.2 1.684-10.232 3.966-18.554 6.432-22.406 8.015-12.519 3.814-14.666 3.942-20.338 3.98-2.069 7.268-5.516 12.236-5.61 4.459 3.459 8.834 6.963 15.985 9.346l-4.776-12.454c-1.551-4.046-1.206-8.937-3.737-12.454-1.88-2.612-5.663-3.049-8.5-4.57-4.219.968-8.692 1.18-12.66 2.914-11.48 5.017-21.387 13.682-33.407 17.218-8.495 2.499-17.855 5.012-26.346-.603 6.571 5.674 18.226 4.269 26.963 1.848 12.403-3.436 22.593-12.374 34.243-17.847 3.268-1.535 6.915-2.07 10.374-3.107-21.512 10.93-29.716 34.306-64.543 32.78 7.226 5.932 10.659 21.998 15.985 32.996-3.32 3.553-6.644.92-9.964-.565 4.45 5.324 9.902 9.998 16.601 13.854 12.677 13.35 30.238 22.525 61.63 19.914 3.624 2.01 6.356 5.627 14.74-.821l53.334-44c16.07-13.256 32.4-28.68 41.291-43.782 3.457-5.87 5.08-12.627 5.188-17.847.128-6.202-.772-9.537-2.08-12.454-1.248-16.08-2.293-31.847-.822-43.577l10.99-21.16 6.856-41.303-5.61-33.82-44.438-5.238z" fill="#9b6b4e" class="svg-bean-17"></path>
        <path d="M266.49 400.32c8.235-.44 16.39.48 26.266-6.31 15.129-10.402 20.445-18 30.668-26.999-9.978 9.294-10.645 15.708-29.934 27.88-14.056 8.87-19.731 5.186-26.999 5.43z" class="svg-bean-18"></path>
        <path d="M228.78 295.26c4.653-7.06 10.101-12.727 17.462-12.179 3.76.28 10.87-.238 13.793 9.391 1.42 4.68-2.855 13.224-14.674 13.646-20.87.746-24.594 13.293-24.505 15.847 5.844 2.961 17.021-10.076 25.532-15.114-6.355 6.113-7.236 9.452-22.157 18.342 7.432 14.001 37.811.3 48.423-3.815-4.482-13.105-6.431-18.609-9.098-26.266 12.51 8.244 18.761 13.983 27.146 25.532l11.282-2.166c-3.925-5.96-8.867-9.512-13.776-13.388-9.245-3.723-17.276-12.132-23.624-17.315-7.31-4.436-13.602-6.635-19.369-6.897-4.567-.207-9.173-2.498-14.233 1.908-3.599 3.133-4.001 7.892-2.2 12.473z" fill="#9b6b4e" class="svg-bean-19"></path>
        <path d="M293.19 306.41c12.368 2.889 19.361 6.077 24.505 16.288-7.393-10.756-15.269-12.724-24.505-16.288zM183.95 261.21c3.634 1.144 7.473 1.157 11.886-1.98-4.233 3.513-6.932 4.202-11.886 1.98zM178.08 236.76c1.03-3.388 2.189-5.907 3.631-6.537l-1.4-.518c-1.067 1.22-1.714 3.911-2.231 7.055z" class="svg-bean-20"></path>
        <path d="M225.99 227.76c1.784 7.231 2.857 14.699 0 23.478 9.559-2.026 24.915 7.429 42.26 12.032 25.237 6.698 33.644-17.323 48.129-22.597-8.005-10.326-5.315-13.521-7.043-19.663l-43.58-18.635z" fill="#b18164" class="svg-bean-21"></path>
        <path d="M233.18 226.44c-2.56 2.231-4.26 6.338-7.63 6.75-2.508.306-5.168-2.642-5.576-5.136-.658-4.016.994-8.233 2.788-11.886 1.024-2.086 3.522-3.032 5.282-4.549l-1.32 2.201c2.69-2.543 5.265-5.214 8.07-7.63 2.142-1.845 4.374-3.603 6.75-5.136 2.188-1.411 4.644-2.361 6.897-3.668 4.157-2.412 7.635-6.433 12.326-7.483 5.591-1.252 11.769-1.04 17.168.88 5.235 1.862 9.296 6.18 13.353 9.978 2.9 2.715 4.455 6.656 7.336 9.391 2.953 2.803 6.838 4.453 9.978 7.043 1.63 1.344 2.837 3.13 4.256 4.696-3.082.293-6.302 1.84-9.244.88-6.41-2.09-11.556-7.035-17.755-9.684-5.308-2.268-10.812-4.828-16.581-4.99-5.172-.144-10.167 2.18-14.967 4.11-4.51 1.813-8.736 4.327-12.766 7.043-3.05 2.054-5.593 4.774-8.364 7.19z" class="svg-bean-22"></path>
        <path d="M248.44 241.11c10.739-22.28 26.783-23.572 46.515-10.271-10.574-14.228-37.752-15.964-46.515 10.271zM241.1 232.6c-3.766 8.696-4.568 7.418-2.201 15.701 4.999-6.228 4.22-8.523 2.201-15.701z" class="svg-bean-23"></path>
        <path d="M259.74 246.77c10.218 1.876 17.757-.52 24.593-4.039 3.875-1.995 6.902-4.765 8.61-6.648l-15.15-2.438-12.294 1.66-7.056 2.542-3.89 3.009-.208 3.631z" fill="#dccdb5" class="svg-bean-24"></path>
        <path d="M255.78 239.35c-2.035 1.43-3.89 3.191-4.255 5.576 2.944.91 5.051 1.733 8.364 1.908-3.482-1.543-7.49-4.323-3.082-7.19 13.134-8.542 26.79-4.9 38.885-3.375-18.057-4.247-30.493-3.537-39.912 3.081zM337.8 217.93c-11.282 4.393-22.381 9.204-33.456 14.087-.134 1.667-.11 1.858 1.32 2.494 11.742-3.291 22.353-4.262 34.337-4.989-11.168 1.073-21.26 2.132-33.31 5.576 2.385 7.356 18.142 6.748 24.066 7.924-9.45-1.638-15.34-2.376-24.046-3.267-4.665-.03-10.164 6.336-14.106 9.577 16.02-1.963 20.804 1.696 34.043 9.831-16.314-10.51-24.352-11.529-35.803-7.924-3.121.983-5.576 3.424-8.364 5.136 4.944-2.142 9.605-3.041 14.527-3.522-4.66 1.045-9.174 2.66-13.353 4.11 7.849-1.58 15.48-2.09 22.89-2.495-6.561.703-12.655 1.923-18.634 3.228 5.453.278 10.947.753 15.994 1.174-10.272.932-20.307-.171-29.787-1.174 8.206-.393 13.038-4.999 19.222-9.245 6.177-5.435 8.916-9.193 9.464-16.875 11.475-5.081 23.273-9.163 34.996-13.646zM416.41 171.96c3.846-1.095 24.496-5.353 26.147 17.95.133 1.877-.123 3.927-1.093 5.579-2.974 8.11-1.617 15.429-1.709 23.784-.04 3.72-2.403 7.446-5.187 10.583-4.581 5.161-4.3 1.435-2.18-.934 2.873-3.208 4.642-4.644 5.189-7.574 2.39-12.828.926-15.767.933-23.657.021-22.245-13.683-25.658-22.1-25.732z" class="svg-bean-25"></path>
        <path d="M410.19 178.29c-2.692 2.041-2.888 7.423-2.283 12.97.193 1.762 1.876 6.358 2.49 11.621.876 7.503-3.45 7.509-8.196 6.018 4.051 3.426 4.512 10.933 4.98 18.988.16 2.756-.779 5.589-2.49 8.197-1.519 2.314-2.112 5.942 3.839 2.697 1.605-.875 4.753-2.836 4.773-3.527.158-5.381 1.167-7.226 3.009-8.82 2.266-1.96 5.583-.641 8.82-1.66 8.94-2.814 3.678-8.735 3.527-13.177-.342-10.028-5.101-11.912-9.857-14.007-4.653-2.05-7.629-.976-8.508-1.453-.858-.464-1.626-4.632-.311-5.084 4.125-1.418 4.11-3.682 3.527-6.744-.944-4.969-2.174-4.567-3.32-6.018z" class="svg-bean-26"></path>
        <path d="M188.5 240.5c-.307.007-.614.02-.924.038l-.103-.012-3.236.513c-1.237.408-1.406 1.426-1.694 1.682l.577 5.816c2.284 4.228 13.487 1.86 21.891.642.28-2.31-.175-5.666-1.2-5.836-5.216-1.527-9.969-2.968-15.31-2.843z" fill="#dccdb5" class="svg-bean-27"></path>
        <path d="M184.1 241.07c-4.823 1.186-7.48 3.588-11.258 7.107 3.315-2.364 6.724-4.223 9.805-5.447z" class="svg-bean-28"></path>
        <path d="M187.42 240.55c5.81-.383 10.997 1.291 16.497 2.853-5.347 10.842-16.968 7.234-16.497-2.853z" fill="#403a22" class="svg-bean-29"></path>
        <path d="M194.53 241a1.45 1.45 0 102.131.437c-.709-.162-1.416-.31-2.131-.437z" color="#000" class="svg-bean-30"></path>
        <path d="M275.4 234.19c-2.787.055-5.59.37-8.397 1.053v.154c0 4.7 3.812 8.512 8.512 8.512s8.513-3.812 8.513-8.512c0-.246-.018-.491-.039-.732-2.822-.32-5.7-.532-8.59-.475z" color="#000" fill="#403a22" class="svg-bean-31"></path>
        <path d="M275.4 234.19c-.463.009-.923.04-1.387.064-.24.318-.398.714-.398 1.143 0 1.047.854 1.887 1.9 1.887s1.9-.84 1.9-1.887c0-.458-.178-.88-.449-1.207a50.18 50.18 0 00-1.566 0z" color="#000" class="svg-bean-32"></path>
        <path d="M156.91 115.62c3.72-11.531 6.394-12.258 9.338-15.771 1.395-4.275 2.48-6.999 3.32-8.508-.71-11.357 4.315-14.187 9.339-17.016 1.242-1.835 2.414-3.723 5.81-3.943 4.338-4.31 8.087-8.856 13.696-12.658 1.333-3.61 4.576-5.072 8.093-6.225 1.489-6.15 5.534-8.785 9.13-12.036 6.594-4.89 9.584-9.693 22.413-14.734C259.223 7.234 279.058 4.63 298.643 4.808c16.994-8.074 31.103-4.607 44.823.415 17.843-8.289 28.35 8.36 41.088 17.43 16.547 5.466 33.943 7.052 45.238 36.524 11.887 15.878 17.859 35.52 21.167 56.859 3.736 17.775 3.435 33.96 3.32 50.219.709 10.674 2.245 20.728 0 33.617 1.893 12.197-1.268 21.545-6.225 29.882-4 14.83-8.962 17.144-13.696 22.412 1.806-4.909 3.975-9.699 5.42-14.726 1.787-6.216 3.488-12.507 4.255-18.93.708-5.925-.597-11.98.147-17.901.54-4.3 3.962-8.15 3.668-12.473-2.746-40.465-37.263-30.83-48.716-9.245-1.632 3.077.388 5.22 2.935 9.978-2.064.064-3.72-.684-4.842-2.494-.38 1.053.195 4.254 2.935 12.326-2.95-1.47-5.481-2.88-5.723-3.962-.294 3.62.062 7.352-.88 10.858-1.19 4.422-1.994 9.592-5.43 12.619-4.944 4.357-11.716 9.894-18.048 8.07-8.442-2.43-13.3-11.655-18.635-18.634-3.826-5.005-4.025-12.451-8.51-16.875-10.086-9.947-25.656-13.933-34.19-25.238-7.436-9.852-8.71-23.18-11.445-35.217-2.18-9.597 2.414-26.62 1.338-36.403l-20.413 22.023c-17.96 19.376-34.862-1.44-48.423 5.869-30.175 16.264-53.195 32.607-72.194 20.25-16.387-10.658-3.031-18.94-.696-26.441zM302.18 318.36l-.116.026-.102.192c2.56 2.145 5.425 4.069 7.237 6.873 2.007 3.105 2.313 6.74 3.766 10.139 1.792 4.193 4.014 8.19 6.15 12.223l.077.026-4.776-12.454c-1.551-4.046-1.206-8.937-3.736-12.454-1.88-2.613-5.664-3.05-8.5-4.571zM298.68 319.36c-2.733.693-5.43 1.284-7.973 2.478-11.649 5.472-21.839 14.41-34.243 17.847-8.736 2.42-20.39 3.825-26.963-1.849 8.492 5.616 17.851 3.102 26.346.603 12.02-3.535 21.927-12.2 33.408-17.218 1.606-.701 6.48-1.405 9.424-1.861z" class="svg-bean-33"></path>
      </svg>
    </div>
    <ul class="section__list">
      <li class="list-item" data-translate-y style="--kf-delay: 2100">
        <p class="list-item-title">Author</p>
        <p class="list-item-subtitle">John Doe</p>
      </li>
      <li class="list-item" data-translate-y style="--kf-delay: 2300">
        <p class="list-item-title">Category</p>
        <p class="list-item-subtitle">Art, Illustration</p>
      </li>
      <li class="list-item" data-translate-y style="--kf-delay: 2500">
        <p class="list-item-title">Source</p>
        <a href="https://pixabay.com/vectors/actor-atkinson-bean-british-1295772/" class="list-item-subtitle" target="_blank" rel="noopener noreferrer">Pixabay</a>
      </li>
    </ul>
  </section>

  <section class="section" id="elvis" data-animation="elvis">
    <div class="section__title">
      <h1 class="title" data-animation="kf-words" data-split-word>Elvis Presley</h1>
    </div>
    <div class="section__content" data-translate-x>
      <p class="paragraph">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque quis, qui rerum est eum blanditiis id quia natus voluptatum distinctio ad aspernatur repudiandae illum sit tempora expedita beatae vero amet.</p>
    </div>
    <div class="section__pagination" data-fade-in>
      <button data-href="#bean" class="btn btn--left" type="button">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#242424" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M 15 12 l -6 0 l 6 0"/></svg>
      </button>
      <button data-href="#beethowen" class="btn btn--right" type="button">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#242424" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M 9 12 l 6 0 l -6 0"/></svg>
      </button>
    </div>
    <div class="section__img" data-image>
      <svg class="img" viewBox="0 0 243.62 425.2" xmlns="http://www.w3.org/2000/svg">
        <path d="M94.023 21.375c-.787 5.619 2.287 24.899 4.134 27.486l1.446.413h1.033l-.824-3.926c-.887-3.206-2.105-7.51-.828-12.194.48-1.765 2.013-2.512 2.273-4.754 3.535-.299 5.838-4.141 7.854-6.2.874-.083 2.006-.273 2.273.619 2.062-.288 3.498-1.955 4.961-2.48 4.146-1.495 12.371 2.52 15.707 4.341 1.178 2.536 4.72 14.473 3.309 18.808v3.718c4.286-1.508 5.927-18.994 6.613-25.419l.617-.412 2.896 1.651c-.288-1.001-.723-3.062-1.447-3.72.412-1.223-.424-.87-.826-1.448-.026-.018-1.407-2.825-1.24-3.099.23-.384.929-.308.617-1.446l-2.064-4.135-.414-.207c.071 1.101.14 2.203.209 3.309-1.295-1.317-1.369-4.118-2.482-5.583l-3.309-3.306c-1.469-.967-2.628.417-3.717.206l-1.859-1.444c-3.714-1.618-12.761-3.318-15.297-.825-.344-.416-.691-.83-1.032-1.244-.451-.356-.556-.37-1.45-.412-2.115 1.558-8.896.731-11.986 2.274-3.992 1.994-4.296 9.86-8.268 13.019.371 3.269 1.04 4.912 3.101 6.41zm46.919-8.68c.068.272.134.549.204.824h-.204v-.824zM109.525 1.532h.205c-.414.362-.036.451-.619.208l.414-.208zm33.067 13.847h.414c-.265-.615.01-.247-.414-.619v.619zm-32.034 7.647v-.206l-1.242-.207-1.032.62-.414 1.034 2.273-.415c.14-.272.279-.549.415-.826zm20.667 13.227c-1.446-.274-2.893-.55-4.34-.827l-.411-.207c1.836-.259 3.933-.315 4.751 1.034h1.449c.096-1.05.039-1.135-.208-2.066-3.448-2.495-8.764-.849-12.192-.619v1.239c1.45.004 1.777.055 2.688.206l-2.277 1.036c-.403 1.047-.069.939 0 2.272l2.277-.414v.208l-1.655.827v.827c.887-.366.857-.658 2.064-.827.722.552.913.623 1.032 1.859.758-.412.352.099.623-.827l1.032.207h-.826c.379.953.149.733 1.035.62l3.307-.207c.204-.276.413-.55.618-.826-.205-.552-.414-1.101-.618-1.653l1.65-.829v-1.033zm-4.751 3.722l.204-.62c.168.508.076.176-.204.62zm-3.311-2.068c.662-.639.655-.316.623-1.239l.617-.207 3.72.414c.14.412.278.826.414 1.241-1.777-.502-3.382-.26-5.374-.209zm-10.746 2.068c.397.62.037.347.828.62.363-.56.546-.766 1.237-1.033-.136-.894-.271-1.792-.41-2.687l-1.86-1.033 1.033.208v-1.242c-1.814-1.143-2.82-1.535-5.789-1.446-4.656 1.858-5.38-1.309-7.025 4.753-.011 1.865.748 2.086 2.273 2.272v2.067l5.371.207c.41-.535.301-.546 1.036-.826-.205-.483-.414-.965-.619-1.448 1.94-.567 1.615-.856 3.925-.412zm-5.374-1.446a62.656 62.656 0 00-.206-.829l1.033-.414c1.443.092 2.7.689 3.514 1.451l-4.341-.208zm5.374 9.713h-.619c-.506 1.294-1.032 2.022-1.036 3.927l.208.413c4.29 1.022 7.003-.562 10.541-.413l.205-1.034c-.4-.42-6.963-.718-9.09-1.241l-.209-1.652zm129.59 332.757c-.967-4.343-1.93-8.686-2.894-13.021.668-3.052 2.532-6.384 1.446-10.541-1.201-4.597-4.262-7.713-5.992-12.196-3.221-8.327-4.866-18.835-7.235-27.489-3.223-11.752-4.572-25.46-11.367-33.687.463-1.737 1.261-2.298 1.241-4.754-1.816-1.901-5.754-3.295-8.27-4.339-2.646-3.436-1.371-5.488-1.033-10.542-1.776-1.818-6.5-3.019-7.648-4.547-.409-1.585-.823-3.169-1.237-4.752-1.79-2.827-3.584-5.651-5.375-8.477l-22.527-32.242c2.061-2.256 11.978-15.862 10.955-19.841l-10.747-17.776c3.502-3.338 6.371-5.888 9.3-9.92 1.457-2.003 4.068-3.567 5.995-5.166 2.369-1.968 5.134-7.06 6.198-10.126 3.001-8.632-4.435-13.774-5.995-18.602-.478-3.858-.962-7.716-1.445-11.574-2.635-12.163-6.304-32.897-14.261-38.856-7.168-5.369-18.117-8.165-26.662-11.779-2.825-1.102-5.649-2.204-8.473-3.308-1.636-1.996-2.334-7.806-2.068-10.128-2.568 1.276-2.02 4.428-3.307 7.029-1.794 3.62-6.295 8.513-10.749 9.507-7.724 1.719-12.397-9.798-13.638-15.297-.479-2.121.97-3.6.619-4.958-.368-1.413-4.759-3.644-6.202-4.134.112 3.212 1.41 5.55 1.859 8.06-.136.277-.274.553-.413.826-.563 1.011-1.555 1.929-1.856 3.309.065.896.136 1.792.205 2.688-1.331 4.052-6.646 5.016-10.541 6.612-10.027 4.11-23.225 6.407-31.416 12.608-3.157 2.392-4.934 8.344-6.82 11.987-3.021 5.841-5.659 12.625-7.854 19.635-1.032 3.79-2.068 7.579-3.101 11.367-1.552 3.382-3.392 6.938-4.961 10.748-1.476 3.582-7.591 11.53-5.993 16.536 2.7 8.455 17.858 21.277 25.009 26.042l10.541 6.614c.509.974-2.505 4.85-3.306 6.2-3.102 5.786-6.202 11.577-9.303 17.36.43 4.077 4.756 5.299 6.821 7.854-5.943 11.695-14.359 20.611-20.461 32.655l-3.926 3.721c-3.179 4.75-5.834 13.33-6.201 20.254-2.042 1.256-7.006 2.224-8.472 4.134-2.002 2.607-1.249 5.822-2.273 9.715l-3.31 7.646c-1.433 4.734-1.085 9.538-2.065 15.087-1.241 6.613-2.479 13.227-3.72 19.843l-4.755 15.089.208 6.198-1.446 4.131c-.278 3.171-.553 6.338-.827 9.509-.6 3.218-3.356 11.787-2.274 15.292.619.832 1.238 1.655 1.86 2.484-.069 1.652-.139 3.308-.205 4.96 1.661 10.589-1.629 27.247 4.133 34.102 2.313 2.756 13.078 2.439 17.152 1.24 6.003-1.766 9.561-11.263 7.234-19.635-1.135-4.083-3.862-7.707-4.753-12.401-.648-3.403.741-6.175 1.034-8.886l1.859-.209c.596-4.009 2.323-8.903 1.446-13.846l-1.241-4.96a41725.7 41725.7 0 0110.957-18.188l5.371-13.019c2.069-4.483 4.396-9.527 5.58-15.091-.135-4.82-.274-9.644-.41-14.466l4.543-2.276c1.983-.394 3.611.189 4.961-.617 1.446-1.517 2.896-3.03 4.342-4.546 2.294-1.099 3.829-.162 5.166-2.068l10.336-18.806c5.711-9.316 13.393-17.979 22.113-24.391 3.064-2.252 10.167-7.95 14.468-8.267l8.063 3.514c6.746 2.843 13.413 5.018 17.564 10.335 2.022 2.585 3.184 5.573 5.166 8.06 3.528 4.422 8.963 6.812 12.609 10.749 1.585 2.753 3.17 5.511 4.753 8.266 2.558 4.058 5.927 8.265 8.68 12.401l4.343 5.992 10.126 3.514c3.197 3.594 4.177 9.322 5.993 14.26 1.854 5.041 8.499 15.065 12.4 18.188-.089 11.725-3.218 26.143 1.654 34.519 2.052 3.522 11.192 4.73 11.781 7.438 1.505 6.92-1.812 11.51-3.101 16.536-1.581 6.174 2.336 18.224 4.752 21.493 1.334 1.798 3.767 2.788 5.993 3.719 3.02 1.262 7.811 2.156 10.958.209 6.671-4.134 6.522-30.137 4.342-40.511zM65.295 149.516h-.205l-1.242-2.067 2.273-4.545c1.056-4.411.262-7.938 2.069-10.955 3.042 3.947-2.769 13.113-2.895 17.567zm94.662-41.957l1.237.208c.209.618.415 1.239.619 1.858-.204.413-.41.829-.619 1.242l-.414.205c-.039-2.014-.591-2.124-1.241-3.305l.418-.208zm-4.755 3.309c1.002.234.992.297 1.445 1.032-.067.135-.136.276-.209.413l-1.442-1.034c.069-.138.135-.276.206-.411zm-2.892 40.92c-1.874.605-4.905 1.095-7.235 1.239-.208.413-.413.829-.621 1.243h2.896c-1.918 1.615-4.545.766-6.202 3.306-.496.309-.234.124-.413-.413-1.644.55-1.626 1.664-2.688 2.685l-6.821 4.137c-1.032-2.896-2.063-5.79-3.102-8.683l10.132-4.134 10.126-.823c2.215-.119 3.176.092 3.928 1.443zm-39.478-66.343v-.415l1.859 1.241c-.34-1.712-.837-1.532-.208-2.895-.231-1.211-.662-1.261-1.237-2.067 10.501-.863 9.928-7.547 15.916-11.161.134-.137.274-.274.413-.413l.618 1.448c-1.661 4.262-5.613 6.453-8.681 9.301v.825l7.025 1.655c.619.486.611 1.201.828 2.065l-4.962 3.308c-.413.939-.247.963 0 2.067-1.716.426-3.021-.313-4.957-.415.066-.963.136-1.928.205-2.895v-1.445h-.619l-.828 4.961c-2.042-2.068-3.611-3.297-5.579-4.548l.207-.617zm16.533 22.114v.622c-5.818.294-10.451 1.249-15.916 1.238-.549-2.754-1.102-5.51-1.651-8.266 3.531-.886 8.955-.178 9.918-1.652 1.675.698 1.754 1.509 4.551 1.445l3.098 6.613zM109.73 86.892l1.447.204v-1.032c1.648.938 3.095 2.784 3.928 4.548l-4.342 1.032h-1.857l.824-4.752zm22.736 30.796l1.031.206c1.984 1.491 3.609 5.61 4.549 8.059v.207c-4.608.998-10.401 1.31-15.293 1.447-2.948.085-5.906-.7-9.507.207h-4.753c2.491-16.846 12.897-5.122 23.973-10.126zm-28.521-23.149c1.443.737 2.221 1.399 3.098 2.685-1.103-.825-2.204-1.652-3.307-2.479l.209-.206zm17.981 41.957c.281.625.297.85.827 1.238 1.625.586 16.955-.644 18.807-1.445h1.861c1.23 3.357 4.781 5.124 5.786 8.265-7.489.807-17.961.992-25.627 2.48-.348-.402-.47-.793-.619-1.443-7.108.403-15.095 1.275-22.944 1.238l3.719-8.885c6.064-.486 12.127-.969 18.19-1.448zm5.579 11.778v.208l-1.237.208c.065-.137.136-.277.206-.415h1.031zm-27.074-24.18c.688.137 1.379.274 2.064.415.348.412.688.823 1.037 1.238-.146.746-.083.626-.414 1.035-.45.799-1.006 1.059-2.068 1.241l-1.033-.416-1.033-1.86 1.447-1.653zm-14.469 31.414c.278-.343.552-.689.828-1.032 1.552.343 2.012 1.108 2.892 2.064-.066.277-.135.553-.205.829v.415c-2.138-.01-2.843-.839-3.515-2.276zm1.033 29.556v-.622h.208l-.208.622zm39.89-2.48c-.832-.092-.802-.067-1.24-.415l-1.032-1.032 3.306-4.136c.884 2.019-.357 4.393-1.034 5.583zm2.07-8.681h-2.481l2.063-2.892v-.622l-1.237.622c.323-1.213-.065-1.877-.41-2.88l-.035-.015h-.796c-.817 1.952-1.618 3.375-1.446 5.787-3.044-.028-8.256-.67-10.13-1.86h-.41c.877-.905 2.194-1.174 2.685-2.481h.416v-.618c-3.173 1.143-7.241 2.21-9.097 4.751.301 5.252 9.087 6.879 11.99 10.956-.14.413-.275.825-.414 1.241l-1.241.62c-2.386-1.769-6.628-5.581-10.954-4.963.305 1.027 1.059 1.207 1.241 2.068-.139.619-.274 1.241-.413 1.858.949 2.912 6.255 5.154 6.821 9.303-.483.413-.966.825-1.447 1.239l-.827.206c-2.902-2.434-8.141-10.312-11.368-11.159.817 5.53 5.884 8.454 6.407 13.641-.48.346-.963.689-1.446 1.032l-1.238-.206c-3.158-1.672-5.071-10.905-7.648-11.987l-.619.412c.202 5.008-.043 11.208-1.655 15.709l-1.242.415c-.482-.346-.962-.69-1.446-1.035v-9.506l-1.446-4.96c-.751.197-.424-.015-.828.413-1.88-1.57-1.608-3.434-2.479-5.788 2.594-5.381 9.094-15.065 15.911-15.709-.218-1.023.077-.695-.823-1.032-.07-.137-.14-.274-.209-.413 6.195.246 12.191 1.726 14.883-3.306v-.829c-7.199 1.276-18.692.161-22.945-3.72.484-1.102.963-2.204 1.446-3.305l14.882-.415 4.752-.619 10.126 1.651c.672 2.481.701 4.733 1.45 6.823v1.032c-1.778-.344-2.112.422-3.305.413l-3.516-1.445c-.206 1.099-.414 2.204-.623 3.306v.826c3.013-.239 4.938.797 6.998 1.654h.03l.005.015c.783.325 1.585.623 2.476.813l2.068-1.655.413.415c-.962 2.067-1.926 4.132-2.889 6.199zm-3.723-1.239l.617-1.447.624.619-1.241.828zm28.315 16.328c-.768.5-1.516.773-2.688.412-2.28-1.123-2.81-4.505-4.751-5.579-.854-.472-2.255-.334-2.894-.621-.578-2.106-1.738-3.59-1.861-5.787-1.312.137-2.021.102-3.099-.207-1.123-1.675-2.229-3.667-2.483-6.2l2.483-2.69c-.22-1.023.074-.695-.829-1.032-.939.638-.979 1.311-2.272 1.655-.97-.924-1.691-1.764-2.273-3.102 1.551-2.825 3.355-3.353 6.407-4.754 7.541-.12 11.385 3.955 13.64 9.094-.135 2.521-2.518 8.419-4.133 9.923.057 3.293 2.591 6.857 4.753 8.265v.623zm3.514-71.719c-2.213-.203-2.818-1.628-3.514-3.306l.418-2.274c1.181 1.843 1.318 4.11 3.51 4.96l-.414.62zm1.446-1.444c-.134.066-.274.134-.413.205-.156-1.333-.547-1.86-1.859-2.067v-.208l.826-1.033.828.207.827 2.273-.209.623zm1.241-4.757l-.413.207-1.033-1.034c.071-.552.137-1.102.205-1.654h.209c-.144 1.362-.161 1.207 1.032 1.654v.827zm1.446 2.895h-.206c-.277-.345-.552-.69-.826-1.034.704-1.088 1.858-1.139 2.479-2.273.478.573.576.755.622 1.858-.79.438-1.61.627-2.069 1.449zm69.857 301.336l-.411.415-1.033-1.238c.013-1.005.091-1.33.413-1.864l1.446.209c.141.623.274 1.241.415 1.861-.275.206-.554.411-.83.617zm.415-30.999c-.964-.277-1.93-.552-2.896-.826-3.021-1.321-4.92-2.72-6.612-5.374l5.169-1.447c4.096-1.664 7.845-3.937 10.747-6.821 5.622 6.212-.872 13.332-6.408 14.468zM135.153 51.135v-.825h-.826v.825h.826zm-11.367 9.919c.277-.342.549-.688.826-1.032V58.99c-2.307-3.359-9.189-3.285-13.849-4.135-.136.276-.271.552-.41.829.132 2.381 1.26 2.998 2.064 4.545 2.836 1.705 5.794-1.097 9.508 0 .663.197.815.667 1.861.825zm-4.134-3.305c-1.702.317-3.042-.087-4.752-.208l-.209-.412c.523-.343 1.056-.188 1.655-.62l3.306.62v.62zm-2.274 8.266c-1.367-.4-2.25-1.39-3.306-2.066l-.827-.208c.553 3.707 5.344 3.722 8.472 2.481-.801-1.123-2.7.275-4.339-.207zm24.182 107.888h.62l.208-1.034h-.828v1.034zm8.68 2.892h-.618c-.069.346-.141.692-.209 1.037.9-.345.613-.005.827-1.037zm-4.132 4.961l.207.208h.619c.206-.48.414-.963.619-1.447h-1.034c-.133.415-.274.826-.411 1.239zm-49.81 2.275l.622 1.652h.619a306.63 306.63 0 01-.414-1.652h-.827z" fill="#1a171b" fill-rule="evenodd"/>
      </svg>
    </div>
    <ul class="section__list">
      <li class="list-item" data-translate-y style="--kf-delay: 2100">
        <p class="list-item-title">Author</p>
        <p class="list-item-subtitle">John Doe</p>
      </li>
      <li class="list-item" data-translate-y style="--kf-delay: 2300">
        <p class="list-item-title">Category</p>
        <p class="list-item-subtitle">Art, Illustration</p>
      </li>
      <li class="list-item" data-translate-y style="--kf-delay: 2500">
        <p class="list-item-title">Source</p>
        <a href="https://pixabay.com/vectors/elvis-presley-celebrity-elvis-157006/" class="list-item-subtitle" target="_blank" rel="noopener noreferrer">Pixabay</a>
      </li>
    </ul>
  </section>
  
</main>
//see files import in "Settings PEN"

$color-txt: #242424;

html {
  @include interpolate(font-size, 320px, 1480px, 16px, 30px);
}
html, body {
  min-height: 100vh;
}
body {
  $color-txt: #242424;
  font-family: 'Barlow', sans-serif;
  display: flex;
}
button {
  font-family: 'Barlow', sans-serif;
  > * {
    pointer-events: none;
  }
}
.title {
  @include interpolate(font-size, 320px, 1480px, 22px, 120px);
  @include interpolate((padding-bottom), 26.25rem, 75rem, 1rem, 3rem);
  font-weight: 600;
}
.paragraph {
  @include interpolate(font-size, 320px, 1480px, 14px, 18px);
  @include interpolate((padding-bottom), 26.25rem, 75rem, 1rem, 1.2rem);
  line-height: 1.4;
}
.list-item {
  @include interpolate(font-size, 320px, 1480px, 14px, 16px);
  text-align: right;
  &:not(:last-of-type) {
    @include interpolate((margin-bottom), 26.25rem, 75rem, .8rem, 1rem);
  }
  &-title {
    @include interpolate((padding-bottom), 26.25rem, 75rem, .3rem, .4rem);
    font-weight: 600;
  }
  &-subtitle {
    color: $color-txt;
  }
}


.main {
  display: grid;
  grid-template-columns: 10px 1fr 10px;
  grid-gap: 0px;
  max-width: 1380px;
  margin: auto;
  height: 100%;
  overflow: hidden;
}
.section {
  grid-area: 2 / 2 / 3 / 3;

  display: grid;
  grid-template-columns: 5fr 5fr 3fr;
  grid-gap: 15px;
  height: 100%;
  .img {
    width: 100%;
    max-height: 100%;
    display: block;
  }
  &__title {
    z-index: 1;
    grid-area: 1 / 1 / 3 / 4;
    align-self: center;
  }
  &__content {
    grid-area: 2 / 1 / 6 / 2;
    align-self: center;
  }
  &__pagination {
    grid-area: 4 / 1 / 6 / 2;
    align-self: flex-end;
    display: flex;
    justify-content: space-around;
    justify-content: space-evenly;
  }
  &__img {
    grid-area: 1 / 2 / 6 / 3;
    align-self: flex-end;
    max-height: calc(100vh - 20px);
    overflow: hidden;
  }
  &__list {
    grid-area: 1 / 3 / 6 / 4;
    align-self: flex-end;
  }
  &:not(:last-of-type) {
    display: none;
    visibility: hidden;
  }
  
  @media (max-width: 814px) and (orientation: portrait) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    &__title {
      grid-area: 1 / 1 / 2 / 3;
      
    }
    &__content {
      grid-area: 2 / 1 / 3 / 2;
      
    }
    &__pagination {
      grid-area: 4 / 1 / 5 / 3;
    }
    &__img {
      grid-area: 1 / 2 / 3 / 3;
    }
    &__list {
      grid-area: 3 / 1 / 4 / 3;
      display: flex;
      justify-content: space-between;
    }
    
  }
}
View Compiled
const ioHandler = (entries, self) => {
  for (let entry of entries) {
    const target = entry.target;

    if (entry.intersectionRatio > 0.7) {
      target.classList.add('active', target.getAttribute("data-animation"))
      //self.unobserve(target);
    }
  }
}

const ioConfig = {
  threshold: 0.7
};

const elFactory = (type, attributes, ...children) => {
  const el = document.createElement(type)

  for (key in attributes) {
    el.setAttribute(key, attributes[key])
  }

  children.forEach(child => {
    if (typeof child === 'string') el.appendChild(document.createTextNode(child))
    else el.appendChild(child)
  })

  return el
}

const createFrameSlides = chars => {
  const delayStart = 25;
  const fragment = new DocumentFragment();
  chars = chars.split('');
  let length = chars.length;
  chars.forEach((char, index) => {
    const el = elFactory(
      'span',
      { 
        'data-char': `${char === ' ' ? 'space' : char}`,
        class: `${char === ' ' ? 'space' : 'char'}`,
        style: `--char-index:${index+delayStart};--char-index-reverse:${length-index}`
      },
      `${char}`
    );
    fragment.appendChild(el);
  })
  
  return fragment;
}



document.addEventListener('DOMContentLoaded', () => {

  let splits = document.querySelectorAll('[data-split-word]');

  splits.forEach(split => {
    let splitTextContent = split.textContent;

    split.innerHTML = '';
    split.appendChild(createFrameSlides(splitTextContent))
  })

  const blocks = document.querySelectorAll("[data-animation]");

  const io = new IntersectionObserver(ioHandler, ioConfig);

  [].forEach.call(blocks, block => io.observe(block));

  const goto = document.querySelectorAll('.btn');
  goto.forEach(frame => {
    frame.addEventListener('click', () => {
      event.preventDefault();
      const sectionCurrent = frame.closest('.section');
      sectionCurrent.classList.add('reverse');
      setTimeout(() => {
        document.querySelectorAll('.section').forEach(article => {
          article.style.display = 'none';
          article.style.visibility = 'hidden';
        });
        const sectionTo = document.querySelector(frame.getAttribute('data-href'));
        sectionTo.style.display = 'grid';
        sectionTo.style.visibility = 'visible';
        sectionCurrent.classList.remove('active', 'reverse', sectionCurrent.getAttribute('data-animation'));
      }, 1800);
    });
  });

});

External CSS

  1. https://raw.githubusercontent.com/ivanalbizu/slides-svg/master/css/_reset.scss
  2. https://raw.githubusercontent.com/ivanalbizu/slides-svg/master/css/_mixins.scss
  3. https://raw.githubusercontent.com/ivanalbizu/slides-svg/master/css/_animation.scss

External JavaScript

This Pen doesn't use any external JavaScript resources.