AI_Video_LP/layouts/shortcodes/vtuberlist.html

<div>
<div class="container vt-list">
    <div class="row vt-content" 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 id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
              <div class="item active modal-imgfr">
                <div class="modal-slide-item" alt="..."></div>
              </div>
              <div class="item modal-imgfr">
                <div class="modal-slide-item" alt="..."></div>
              </div>
            </div>
          
            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
              <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
              <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
            </a>
          </div>
          <div class="modal-hashtag"></div>
          <h3 class="modal-body-title">關於</h3>
          <p></p>
          <h4 class="modal-body-demand">需求</h4>
          <div class="modal-body-demandArr"></div>
          <div class="modal-body-sample">
            <span class="modal-body-icon"><i class="fas fa-headphones" style="margin-right: 1rem;"></i>試聽</span>
            <div class="modal-body-music">
              <img src="https://i.imgur.com/gYst9TQ.png" alt=" " width="35" class="modal-body-toggleplay">
              <div class="music-progress">
                <div id="progress-bar" class="music-progress-bar"></div>
              </div>
            </div>
            <audio src=""></audio>
          </div>
          <div class="modal-socials">
            <h4 class="modal-body-follow">關注</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>