AI_Video_LP/layouts/shortcodes/vtuberlist.html

<div>
<div class="container vt-list">
    <div class="row" style="margin-right: 0px">
        <div class="col-6 col-sm-4 col-md-3">
          <div class="card" style="width: 100%;">
            <div class="card-img-fr"><img class="card-img-top" src="https://www.tcbla.org.tw//img/16202921382044L6QIxJYF2J.jpg" alt="Card image cap"></div>
            <div class="card-body">
              <h5 class="card-title">宇宙喵 Kuroro</h5>
              <!-- <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6> -->
              <a class="card-link" data-toggle="modal" data-target="#more1Modal">查看更多></a>
            </div>
        </div>
        </div>
        <div class="col-6 col-sm-4 col-md-3">
            <div class="card" style="width: 100%;">
                <div class="card-img-fr"><img class="card-img-top" src="https://www.tcbla.org.tw//img/162029083055025AVzgnnjV0.jpg" alt="Card image cap"></div>
                <div class="card-body">
                  <h5 class="card-title">達達與妃妃 DaiDai FeiFei</h5>
                  <!-- <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6> -->
                  <a class="card-link" data-toggle="modal" data-target="#more1Modal">查看更多></a>
                </div>
            </div>
        </div>
        <div class="col-6 col-sm-4 col-md-3">
          <div class="card" style="width: 100%;">
            <div class="card-img-fr"><img class="card-img-top" src="https://www.tcbla.org.tw//img/162679825917082cO19F1hVS.jpg" alt="Card image cap"></div>
            <div class="card-body">
              <h5 class="card-title">汪來汪趣 wdog</h5>
              <!-- <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6> -->
              <a class="card-link" data-toggle="modal" data-target="#more1Modal">查看更多></a>
            </div>
        </div>
        </div>
        <div class="col-6 col-sm-4 col-md-3">
          <div class="card" style="width: 100%;">
            <div class="card-img-fr"><img class="card-img-top" src="https://www.tcbla.org.tw//img/16198905052188k1OnWjcRae.jpg" alt="Card image cap"></div>
            <div class="card-body">
              <h5 class="card-title">左翌設計 ZoeL Design</h5>
              <!-- <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6> -->
              <a class="card-link" data-toggle="modal" data-target="#more1Modal">查看更多></a>
            </div>
        </div>
        </div>
        <div class="col-6 col-sm-4 col-md-3">
            <div class="card" style="width: 100%;">
              <div class="card-img-fr"><img class="card-img-top" src="https://www.tcbla.org.tw//img/16198905052188k1OnWjcRae.jpg" alt="Card image cap"></div>
              <div class="card-body">
                <h5 class="card-title">左翌設計 ZoeL Design</h5>
                <!-- <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6> -->
                <a class="card-link" data-toggle="modal" data-target="#more1Modal">查看更多></a>
              </div>
          </div>
          </div>
          <div class="col-6 col-sm-4 col-md-3">
            <div class="card" style="width: 100%;">
              <div class="card-img-fr"><img class="card-img-top" src="https://www.tcbla.org.tw//img/16198905052188k1OnWjcRae.jpg" alt="Card image cap"></div>
              <div class="card-body">
                <h5 class="card-title">左翌設計 ZoeL Design</h5>
                <!-- <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6> -->
                <a class="card-link" data-toggle="modal" data-target="#more1Modal">查看更多></a>
              </div>
            </div>
          </div>
          <div class="col-6 col-sm-4 col-md-3">
            <div class="card" style="width: 100%;">
              <div class="card-img-fr"><img class="card-img-top" src="https://www.tcbla.org.tw//img/16198905052188k1OnWjcRae.jpg" alt="Card image cap"></div>
              <div class="card-body">
                <h5 class="card-title">左翌設計 ZoeL Design</h5>
                <!-- <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6> -->
                <a class="card-link" data-toggle="modal" data-target="#more1Modal">查看更多></a>
              </div>
            </div>
          </div>
          <div class="col-6 col-sm-4 col-md-3">
            <div class="card" style="width: 100%;">
              <div class="card-img-fr"><img class="card-img-top" src="https://www.tcbla.org.tw//img/16198905052188k1OnWjcRae.jpg" alt="Card image cap"></div>
              <div class="card-body">
                <h5 class="card-title">左翌設計 ZoeL Design</h5>
                <!-- <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6> -->
                <a class="card-link" data-toggle="modal" data-target="#more1Modal">查看更多></a>
              </div>
            </div>
          </div>
    </div>
</div>
<div class="modal fade more-modal" id="more1Modal" tabindex="-1" role="dialog" aria-labelledby="more1Modal" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title" id="myModalLabel">宇宙喵 Kuroro</h4>
        </div>
        <div class="modal-body">
          <div class="modal-imgfr"><img src="https://s.zimedia.com.tw/s/QUQXtI-4" alt=""></div>
          <h3 class="modal-body-title">名稱</h3>
          <p>可愛的歡樂散播者-Lu's 永遠傳遞愛的正能量。2013年開始發表於Facebook，一年飆破60萬追蹤人氣。
            筆下人物擁有一張白白胖胖的臉、短短的身材臉上的圓圓粉色腮紅，讓人一眼就能認出。知名角色妃妃&達達，
            多次成為品牌及活動代言人。插畫創作擁有可愛Q萌的色彩，加上療癒的人物造型，成為台灣女生最愛的代表人物之一。</p>
          <div class="modal-socials">
            <h4>Contacts</h4>
            <div class="footer-socials">
              <a href="https://www.facebook.com/choozmo/"><img src="https://i.imgur.com/HtfL33q.png" alt="" width="32px" height="32px"></a>
              <a href="https://www.youtube.com/channel/UC2Qda9PhJWuiMTCZ-j7K_hg"><img src="https://i.imgur.com/c4VdjRJ.png" alt="" width="32px" height="32px"></a>
              <a href="https://www.instagram.com/choozmo_cmm/"><img src="https://i.imgur.com/MAObTJv.png" alt="" width="32px" height="32px"></a>
          </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
  </div>