自定义页面

<div class="trm-counter-up trm-scroll-animation">
  <div class="trm-counter-number">
    <span class="trm-counter">140</span>
    <span class="trm-counter-symbol">+</span>
  </div>
  <div class="trm-divider trm-mb-20 trm-mt-20"></div>
  <div class="trm-label">Honors and Awards</div>
</div>

<a data-fancybox="portfolio" href="/demosite/img/1.jpg" class="trm-portfolio-item trm-scroll-animation">
  <div class="trm-cover-frame">
    <img class="trm-cover" src="/demosite/img/1.jpg" alt="item">
  </div>
  <div class="trm-item-description">
    <h6>Branded cup</h6>
    <div class="trm-zoom-icon"><i class="fas fa-search-plus"></i></div>
  </div>
</a>

<div class="trm-price trm-popular trm-scroll-animation">
  <!-- card header -->
  <div class="trm-price-header">
    <h6>Hourly Payment</h6>
  </div>
  <!-- card header end -->
  <!-- price -->
  <div class="trm-price-number"><sup>$</sup>29<sup>h</sup></div>
  <!-- price end -->
  <div class="trm-divider trm-mb-40 trm-mt-40"></div>
  <!-- price list -->
  <ul class="trm-price-list">
    <li class="trm-label">Amet lorem.</li>
    <li class="trm-label">Dolor ipsum</li>
    <li class="trm-label trm-label-light">Sit amet</li>
    <li class="trm-label trm-label-light">Lorem dolor</li>
  </ul>
  <!-- price list end -->
  <a href="#trm-order" class="trm-btn">Order now <i class="fas fa-arrow-right"></i></a>
</div>

<div class="trm-skill-card trm-scroll-animation">
  <div class="trm-mb-40">
    <div class="trm-skill-header">
      <h6 class="trm-mb-15">Html</h6>
      <span class="trm-label trm-label-light">100%</span></div>
    <div class="trm-progressbar-frame">
      <div class="trm-progressbar p100"></div>
    </div>
  </div>
  <div class="trm-mb-40">
    <div class="trm-skill-header">
      <h6 class="trm-mb-15">CSS</h6>
      <span class="trm-label trm-label-light">100%</span></div>
    <div class="trm-progressbar-frame">
      <div class="trm-progressbar p100"></div>
    </div>
  </div>
  <div>
    <div class="trm-skill-header">
      <h6 class="trm-mb-15">SCSS</h6>
      <span class="trm-label trm-label-light">80%</span></div>
    <div class="trm-progressbar-frame">
      <div class="trm-progressbar p80"></div>
    </div>
  </div>
</div>

 <div class="trm-older-publications-card trm-scroll-animation">
  <div class="trm-older-publication trm-mb-20">
    <a class="trm-op-top trm-anima-link" href="publication.html">
      <span class="trm-op-cover">
        <img src="/demosite/img/1.jpg" alt="cover">
      </span>
      <h6 class="trm-op-title">Make a resume for yourself today</h6>
    </a>
    <div class="trm-divider trm-mb-15 trm-mt-20"></div>
    <ul class="trm-card-data trm-label">
      <li>17 JULYS</li>
      <li>14:32</li>
      <li>Emma T.</li>
    </ul>
  </div>
  <div class="trm-older-publication">
    <a class="trm-op-top trm-anima-link" href="publication.html">
      <span class="trm-op-cover">
        <img src="/demosite/img/2.jpg" alt="cover">
      </span>
      <h6 class="trm-op-title">Make a resume for yourself today</h6>
    </a>
    <div class="trm-divider trm-mb-15 trm-mt-20"></div>
    <ul class="trm-card-data trm-label">
      <li>17 JULYS</li>
      <li>14:32</li>
      <li>Emma T.</li>
    </ul>
  </div>
  <div class="trm-older-publication">
    <a class="trm-op-top trm-anima-link" href="publication.html">
      <span class="trm-op-cover">
        <img src="/demosite/img/1.jpg" alt="cover">
      </span>
      <h6 class="trm-op-title">Create your own beauty blog with Trueman</h6>
    </a>
    <div class="trm-divider trm-mb-15 trm-mt-20"></div>
    <ul class="trm-card-data trm-label">
      <li>17 JULYS</li>
      <li>14:32</li>
      <li>Emma T.</li>
    </ul>
  </div>
</div>

<div class="trm-video trm-scroll-animation">
  <div class="trm-video-content trm-overlay">
    <img src="/demosite/img/3.gif" alt="video-cover">
    <div class="trm-button-puls"></div>
    <a data-fancybox="" href="https://cdn.moji.com/websrc/video/autumn20190924.mp4" class="trm-play-button">
      <i class="fas fa-play"></i>
    </a>
  </div>
</div>

<img class="trm-light-icon" src="/demosite/img/1.jpg" alt="item">
<img class="trm-dark-icon" src="/demosite/img/2.jpg" alt="item">

<!-- 或者 -->

{% imgs trm-cover /img/1.jpg /img/2.jpg  item %}