toppage-customize-counter.html

<section>
  <h6 id="リンクＩＤ">Page Content Percentage</h6>
  <div class="special-wrap">
    <!-- 棒グラフのブロック -->
    <div class="skills">
      <dl>
        <dt>HTML</dt>
        <dd style="background: #f06429" data-target="90" class="skill-percent html">
        </dd>
        <dt>CSS</dt>
        <dd style="background: #2864f0" data-target="85" class="skill-percent css">
        </dd>
        <dt>jQuery</dt>
        <dd style="background: #ffa000" data-target="70" class="skill-percent jquery">
        </dd>
        <dt>SCSS</dt>
        <dd style="background: #f06292" data-target="60" class="skill-percent scss">
        </dd>
        <dt>JavaScript</dt>
        <dd style="background: #efd81d" data-target="50" class="skill-percent javascript">
        </dd>
        <dt>PHP</dt>
        <dd style="background: #303f9f" data-target="30" class="skill-percent php">
        </dd>
        <dt>XML</dt>
        <dd style="background: #27ae60" data-target="40" class="skill-percent xml">
        </dd>
      </dl> </div>
    <!-- スキル詳細のブロック -->
    <div class="skill-details">
      <div>
        <span class="special-icons">
          <i class="fa-regular fa-heart"></i>
        </span>
        <span>
          <p class="special-heading">タイトル</p>
          <p class="special-text">ディスクリプション</p>
        </span>
      </div>
      <div>
        <span class="special-icons">
          <i class="fa-solid fa-cake-candles"></i>
        </span>
        <span>
          <p class="special-heading">タイトル</p>
          <p class="special-text">ディスクリプション</p>
        </span>
      </div>
      <div>
        <span class="special-icons">
          <i class="fa-solid fa-utensils"></i>
        </span>
        <span>
          <p class="special-heading">タイトル</p>
          <p class="special-text">ディスクリプション</p>
        </span>
      </div>
    </div>
  </div>
  <!-- カウンターのブロック -->
  <div id="counter">
    <div class="counter">
      <div class="counter-item">
        <i class="fa-solid fa-code"></i>
        <div class="counter-value" data-target="9999"></div>
        <div class="counter-text">キャプション</div>
      </div>
      <div class="counter-item">
        <i class="fa-solid fa-face-laugh-wink"></i>
        <div class="counter-value" data-target="99"></div>
        <div class="counter-text">キャプション</div>
      </div>
      <div class="counter-item">
        <i class="fa-solid fa-mug-hot"></i>
        <div class="counter-value" data-target="999"></div>
        <div class="counter-text">キャプション</div>
      </div>
      <div class="counter-item">
        <i class="fa-solid fa-award"></i>
        <div class="counter-value" data-target="9999"></div>
        <div class="counter-text">キャプション</div>
      </div>
    </div>
  </div>
</section>