gistfile1.txt

//v4
<div class="mx-n3 mx-md-n4" data-flickity='{"pageDots": true, "prevNextButtons": false, "cellAlign": "left", "wrapAround": true, "imagesLoaded": true}'>
    <div class="col mw-xl-20 mw-md-25 text-center py-5 px-3 px-md-4" data-aos="fade-up" data-aos-delay="50">
        <div class="card">
            <!-- Image -->
            <div class="card-zoom position-relative d-flex justify-content-center">
                <div class="card-float card-hover center">
                    <ul class="nav mx-n2 justify-content-center">
                        <li class="nav-item px-2">
                            <a href="#" class="d-block text-white">
                                <i class="fab fa-facebook-f"></i>
                            </a>
                        </li>
                        <li class="nav-item px-2">
                            <a href="#" class="d-block text-white">
                                <i class="fab fa-twitter"></i>
                            </a>
                        </li>
                        <li class="nav-item px-2">
                            <a href="#" class="d-block text-white">
                                <i class="fab fa-instagram"></i>
                            </a>
                        </li>
                        <li class="nav-item px-2">
                            <a href="#" class="d-block text-white">
                                <i class="fab fa-linkedin-in"></i>
                            </a>
                        </li>
                    </ul>
                </div>

                <a href="@@webRoot/instructors-single.html" class="rounded-circle overflow-hidden card-hover-overlay position-relative d-block" style="max-width: 150px;"><img class="rounded-circle mx-auto shadow-light-lg img-fluid" src="assets/img/instructors/instructor-5.jpg" alt="..."></a>
            </div>

            <!-- Footer -->
            <div class="card-footer px-3 pt-4 pb-1">
                <a href="@@webRoot/instructors-single.html" class="d-block"><h5 class="mb-0">Jack Wilson</h5></a>
                <span class="font-size-d-sm">Developer</span>
            </div>
        </div>
    </div>
   //v5             
      <div class="mx-n3 mx-md-n4" data-flickity='{"pageDots": true, "prevNextButtons": false, "cellAlign": "left", "wrapAround": true, "imagesLoaded": true}'>
      <div class="col-6 col-md-4 col-lg-3 text-center py-5 text-md-left px-3 px-md-4" data-aos="fade-up" data-aos-delay="50">
          <div class="card rounded-lg border shadow p-2 lift">
              <!-- Image -->
              <div class="card-zoom position-relative" style="max-width: 250px;">
                  <div class="card-float card-hover right-0 left-0 bottom-0 mb-4">
                      <ul class="nav mx-n4 justify-content-center">
                          <li class="nav-item px-4">
                              <a href="#" class="d-block text-white">
                                  <i class="fab fa-facebook-f"></i>
                              </a>
                          </li>
                          <li class="nav-item px-4">
                              <a href="#" class="d-block text-white">
                                  <i class="fab fa-twitter"></i>
                              </a>
                          </li>
                          <li class="nav-item px-4">
                              <a href="#" class="d-block text-white">
                                  <i class="fab fa-instagram"></i>
                              </a>
                          </li>
                          <li class="nav-item px-4">
                              <a href="#" class="d-block text-white">
                                  <i class="fab fa-linkedin-in"></i>
                              </a>
                          </li>
                      </ul>
                  </div>

                  <a href="@@webRoot/instructors-single.html" class="card-img sk-thumbnail img-ratio-4 card-hover-overlay d-block"><img class="rounded shadow-light-lg img-fluid" src="assets/img/instructors/instructor-1.jpg" alt="..."></a>
              </div>

              <!-- Footer -->
              <div class="card-footer px-3 pt-4 pb-1">
                  <a href="#" class="d-block"><h5 class="mb-0">Jack Wilson</h5></a>
                  <span class="font-size-d-sm">Developer</span>
              </div>
          </div>
      </div>
//v6                
  <div class="mx-n3 mx-md-n4 flickity-button-outset" data-flickity='{"pageDots": false,"cellAlign": "left", "wrapAround": true, "imagesLoaded": true}'>
  <div class="col-6 col-md-4 col-lg-4 mw-xl-20 text-center py-5 text-md-left px-3 px-md-4">
      <div class="card border shadow p-2 lift">
          <!-- Image -->
          <div class="card-zoom position-relative" style="max-width: 250px;">
              <div class="card-float card-hover right-0 left-0 bottom-0 mb-4">
                  <ul class="nav mx-n4 justify-content-center font-size-sm">
                      <li class="nav-item px-4">
                          <a href="#" class="d-block text-white">
                              <i class="fab fa-facebook-f"></i>
                          </a>
                      </li>
                      <li class="nav-item px-4">
                          <a href="#" class="d-block text-white">
                              <i class="fab fa-twitter"></i>
                          </a>
                      </li>
                      <li class="nav-item px-4">
                          <a href="#" class="d-block text-white">
                              <i class="fab fa-instagram"></i>
                          </a>
                      </li>
                      <li class="nav-item px-4">
                          <a href="#" class="d-block text-white">
                              <i class="fab fa-linkedin-in"></i>
                          </a>
                      </li>
                  </ul>
              </div>

              <a href="@@webRoot/instructors-single.html" class="card-img sk-thumbnail img-ratio-4 card-hover-overlay card-hover-overlay-gradient-1 d-block"><img class="rounded shadow-light-lg img-fluid" src="assets/img/instructors/instructor-1.jpg" alt="..."></a>
          </div>

          <!-- Footer -->
          <div class="card-footer px-3 pt-4 pb-1">
              <a href="@@webRoot/instructors-single.html" class="d-block"><h5 class="mb-0">Jack Wilson</h5></a>
              <span class="font-size-d-sm">Developer</span>
          </div>
      </div>
  </div>
   //v8             
  <div class="mx-n3 mx-md-n4" data-flickity='{"pageDots": false,"cellAlign": "left", "wrapAround": true, "imagesLoaded": true}'>
  <div class="col-6 col-md-4 col-lg-3 text-center py-5 text-md-left px-3 px-md-4" data-aos="fade-up" data-aos-delay="50">
      <div class="card border shadow p-2 lift">
          <!-- Image -->
          <div class="card-zoom position-relative" style="max-width: 250px;">
              <div class="card-float card-hover right-0 left-0 bottom-0 mb-4">
                  <ul class="nav mx-n4 justify-content-center">
                      <li class="nav-item px-4">
                          <a href="#" class="d-block text-white">
                              <i class="fab fa-facebook-f"></i>
                          </a>
                      </li>
                      <li class="nav-item px-4">
                          <a href="#" class="d-block text-white">
                              <i class="fab fa-twitter"></i>
                          </a>
                      </li>
                      <li class="nav-item px-4">
                          <a href="#" class="d-block text-white">
                              <i class="fab fa-instagram"></i>
                          </a>
                      </li>
                      <li class="nav-item px-4">
                          <a href="#" class="d-block text-white">
                              <i class="fab fa-linkedin-in"></i>
                          </a>
                      </li>
                  </ul>
              </div>

              <a href="@@webRoot/instructors-single.html" class="card-img sk-thumbnail img-ratio-4 card-hover-overlay coral d-block"><img class="rounded shadow-light-lg img-fluid" src="assets/img/instructors/instructor-1.jpg" alt="..."></a>
          </div>

          <!-- Footer -->
          <div class="card-footer px-3 pt-4 pb-1">
              <a href="@@webRoot/instructors-single.html" class="d-block"><h5 class="mb-0">Jack Wilson</h5></a>
              <span class="font-size-d-sm">Developer</span>
          </div>
      </div>
  </div>
///v10
<div class="mx-n3 mx-md-n4" data-flickity='{"pageDots": false,"cellAlign": "left", "wrapAround": true, "imagesLoaded": true}'>
  <div class="col-md-4 col-xl-3 text-center py-5 text-md-left px-3 px-md-4">
      <div class="card bg-transparent">
          <!-- Image -->
          <div class="card-zoom position-relative mx-auto w-100" style="max-width: 270px;">
              <div class="card-float card-hover card-hover-up right-0 left-0 bottom-0 mb-4">
                  <ul class="nav mx-n4 justify-content-center font-size-sm">
                      <li class="nav-item px-4">
                          <a href="#" class="d-block text-white">
                              <i class="fab fa-facebook-f"></i>
                          </a>
                      </li>
                      <li class="nav-item px-4">
                          <a href="#" class="d-block text-white">
                              <i class="fab fa-twitter"></i>
                          </a>
                      </li>
                      <li class="nav-item px-4">
                          <a href="#" class="d-block text-white">
                              <i class="fab fa-instagram"></i>
                          </a>
                      </li>
                      <li class="nav-item px-4">
                          <a href="#" class="d-block text-white">
                              <i class="fab fa-linkedin-in"></i>
                          </a>
                      </li>
                  </ul>
              </div>

              <a href="@@webRoot/instructors-single.html" class="card-img sk-thumbnail img-ratio-one card-hover-overlay d-block"><img class="rounded shadow-light-lg img-fluid" src="assets/img/instructors/instructor-5.jpg" alt="..."></a>
          </div>

          <!-- Footer -->
          <div class="card-footer border p-4 text-center mx-5 mt-n8 shadow z-index-2 position-relative rounded bg-white">
              <a href="@@webRoot/instructors-single.html" class="d-block"><h5 class="mb-0">Jack Wilson</h5></a>
              <span class="font-size-d-sm">Developer</span>
          </div>
      </div>
  </div>
//v12               
    <div class="mx-n3 mx-md-n4" data-flickity='{"pageDots": true, "prevNextButtons": false, "cellAlign": "left", "wrapAround": true, "imagesLoaded": true}'>
    <div class="col mw-xl-20 mw-md-25 text-center py-5 px-3 px-md-4">
        <div class="card">
            <!-- Image -->
            <div class="card-zoom position-relative d-flex justify-content-center rounded-circle overflow-hidden card-hover-overlay mx-auto w-100" style="max-width: 150px;">
                <div class="card-float card-hover center">
                    <ul class="nav mx-n6 justify-content-center font-size-sm">
                        <li class="nav-item px-2">
                            <a href="#" class="d-block text-white">
                                <i class="fab fa-facebook-f"></i>
                            </a>
                        </li>
                        <li class="nav-item px-2">
                            <a href="#" class="d-block text-white">
                                <i class="fab fa-twitter"></i>
                            </a>
                        </li>
                        <li class="nav-item px-2">
                            <a href="#" class="d-block text-white">
                                <i class="fab fa-instagram"></i>
                            </a>
                        </li>
                        <li class="nav-item px-2">
                            <a href="#" class="d-block text-white">
                                <i class="fab fa-linkedin-in"></i>
                            </a>
                        </li>
                    </ul>
                </div>

                <a href="@@webRoot/instructors-single.html" class="card-img sk-thumbnail img-ratio-one d-block">
                    <img class="shadow-light-lg rounded-circle h-100 o-f-c" src="assets/img/instructors/instructor-1.jpg" alt="...">
                </a>
            </div>

            <!-- Footer -->
            <div class="card-footer px-0 pt-4 pb-0">
                <a href="#" class="d-block"><h5 class="mb-0">Jack Wilson</h5></a>
                <span class="font-size-d-sm">Developer</span>
            </div>
        </div>
    </div>
    v13
<div class="mx-n3 mx-md-n4" data-flickity='{"pageDots": true, "prevNextButtons": false, "cellAlign": "left", "wrapAround": true, "imagesLoaded": true}'>
<div class="col mw-xl-20 mw-md-25 text-center py-5 px-3 px-md-4">
    <div class="card">
        <!-- Image -->
        <div class="card-zoom position-relative d-flex justify-content-center rounded-circle overflow-hidden card-hover-overlay mx-auto w-100" style="max-width: 150px;">
            <div class="card-float card-hover center">
                <ul class="nav mx-n6 justify-content-center font-size-sm">
                    <li class="nav-item px-2">
                        <a href="#" class="d-block text-white">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                    </li>
                    <li class="nav-item px-2">
                        <a href="#" class="d-block text-white">
                            <i class="fab fa-twitter"></i>
                        </a>
                    </li>
                    <li class="nav-item px-2">
                        <a href="#" class="d-block text-white">
                            <i class="fab fa-instagram"></i>
                        </a>
                    </li>
                    <li class="nav-item px-2">
                        <a href="#" class="d-block text-white">
                            <i class="fab fa-linkedin-in"></i>
                        </a>
                    </li>
                </ul>
            </div>

            <a href="@@webRoot/instructors-single.html" class="card-img sk-thumbnail img-ratio-one d-block">
                <img class="shadow-light-lg rounded-circle h-100 o-f-c" src="assets/img/instructors/instructor-1.jpg" alt="...">
            </a>
        </div>

        <!-- Footer -->
        <div class="card-footer px-0 pt-4 pb-0 font-montserrat font-size-15">
            <a href="@@webRoot/instructors-single.html" class="d-block"><h6 class="mb-0 font-weight-semi-bold">Jack Wilson</h6></a>
            <span class="font-size-d-sm">Developer</span>
        </div>
    </div>
</div>

//v14

  <div class="mx-n3 mx-md-n4" data-flickity='{"pageDots": false,"cellAlign": "left", "wrapAround": true, "imagesLoaded": true}'>
  <div class="col-6 col-md-4 col-lg-3 text-center py-5 text-md-left px-3 px-md-4">
      <div class="card border shadow p-2 lift">
          <!-- Image -->
          <div class="card-zoom position-relative" style="max-width: 250px;">
              <div class="card-float card-hover right-0 left-0 bottom-0 mb-4">
                  <ul class="nav mx-n4 justify-content-center">
                      <li class="nav-item px-4">
                          <a href="#" class="d-block text-white">
                              <i class="fab fa-facebook-f"></i>
                          </a>
                      </li>
                      <li class="nav-item px-4">
                          <a href="#" class="d-block text-white">
                              <i class="fab fa-twitter"></i>
                          </a>
                      </li>
                      <li class="nav-item px-4">
                          <a href="#" class="d-block text-white">
                              <i class="fab fa-instagram"></i>
                          </a>
                      </li>
                      <li class="nav-item px-4">
                          <a href="#" class="d-block text-white">
                              <i class="fab fa-linkedin-in"></i>
                          </a>
                      </li>
                  </ul>
              </div>

              <a href="@@webRoot/instructors-single.html" class="card-img sk-thumbnail img-ratio-4 card-hover-overlay alizarin d-block"><img class="rounded shadow-light-lg img-fluid" src="assets/img/instructors/instructor-1.jpg" alt="..."></a>
          </div>

          <!-- Footer -->
          <div class="card-footer px-3 pt-4 pb-1">
              <a href="@@webRoot/instructors-single.html" class="d-block"><h6 class="mb-0 font-montserrat font-weight-semi-bold">Jack Wilson</h6></a>
              <span class="font-size-d-sm">Developer</span>
          </div>
      </div>
  </div>
  //v15
<div class="mx-n3 mx-md-n4" data-flickity='{"pageDots": true, "prevNextButtons": false, "cellAlign": "left", "wrapAround": true, "imagesLoaded": true}'>
<div class="col mw-xl-20 mw-md-25 text-center py-5 px-3 px-md-4">
    <div class="card">
        <!-- Image -->
        <div class="card-zoom position-relative d-flex justify-content-center rounded-circle overflow-hidden card-hover-overlay mx-auto w-100" style="max-width: 150px;">
            <div class="card-float card-hover center">
                <ul class="nav mx-n6 justify-content-center font-size-sm">
                    <li class="nav-item px-2">
                        <a href="#" class="d-block text-white">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                    </li>
                    <li class="nav-item px-2">
                        <a href="#" class="d-block text-white">
                            <i class="fab fa-twitter"></i>
                        </a>
                    </li>
                    <li class="nav-item px-2">
                        <a href="#" class="d-block text-white">
                            <i class="fab fa-instagram"></i>
                        </a>
                    </li>
                    <li class="nav-item px-2">
                        <a href="#" class="d-block text-white">
                            <i class="fab fa-linkedin-in"></i>
                        </a>
                    </li>
                </ul>
            </div>

            <a href="@@webRoot/instructors-single.html" class="card-img sk-thumbnail img-ratio-one d-block">
                <img class="shadow-light-lg rounded-circle h-100 o-f-c" src="assets/img/instructors/instructor-1.jpg" alt="...">
            </a>
        </div>

        <!-- Footer -->
        <div class="card-footer px-0 pt-4 pb-0 font-nunito">
            <a href="@@webRoot/instructors-single.html" class="d-block"><h5 class="mb-0 font-weight-bold">Jack Wilson</h5></a>
            <span class="font-size-d-sm">Developer</span>
        </div>
    </div>
</div>
                
                

gistfile2.txt

//v4
col mw-xl-20 mw-md-25 text-center py-5 px-3 px-md-4
card
card-zoom position-relative d-flex justify-content-center
card-float card-hover center
nav mx-n2 justify-content-center
"rounded-circle overflow-hidden card-hover-overlay position-relative d-block //rounded-circle mx-auto shadow-light-lg img-fluid
card-footer px-3 pt-4 pb-1

//v5
col-6 col-md-4 col-lg-3 text-center py-5 text-md-left px-3 px-md-4
card rounded-lg border shadow p-2 lift
card-zoom position-relative
card-float card-hover right-0 left-0 bottom-0 mb-4
nav mx-n4 justify-content-center
card-img sk-thumbnail img-ratio-4 card-hover-overlay d-block // rounded shadow-light-lg img-fluid
card-footer px-3 pt-4 pb-1

//v6
col-6 col-md-4 col-lg-4 mw-xl-20 text-center py-5 text-md-left px-3 px-md-4
card border shadow p-2 lift
card-zoom position-relative
card-float card-hover right-0 left-0 bottom-0 mb-4
nav mx-n4 justify-content-center font-size-sm
card-img sk-thumbnail img-ratio-4 card-hover-overlay card-hover-overlay-gradient-1 d-block //rounded shadow-light-lg img-fluid
card-footer px-3 pt-4 pb-1

//v8
col-6 col-md-4 col-lg-3 text-center py-5 text-md-left px-3 px-md-4
card border shadow p-2 lift
card-zoom position-relative
card-float card-hover right-0 left-0 bottom-0 mb-4
nav mx-n4 justify-content-center
card-img sk-thumbnail img-ratio-4 card-hover-overlay coral d-block //rounded shadow-light-lg img-fluid
card-footer px-3 pt-4 pb-1

///v10
col-md-4 col-xl-3 text-center py-5 text-md-left px-3 px-md-4
card bg-transparent
card-zoom position-relative mx-auto w-100
card-float card-hover card-hover-up right-0 left-0 bottom-0 mb-4
nav mx-n4 justify-content-center font-size-sm
card-img sk-thumbnail img-ratio-one card-hover-overlay d-block //rounded shadow-light-lg img-fluid
card-footer border p-4 text-center mx-5 mt-n8 shadow z-index-2 position-relative rounded bg-white

//v12
col mw-xl-20 mw-md-25 text-center py-5 px-3 px-md-4
card
card-zoom position-relative d-flex justify-content-center rounded-circle overflow-hidden card-hover-overlay mx-auto w-100
card-float card-hover center
nav mx-n6 justify-content-center font-size-sm
card-img sk-thumbnail img-ratio-one d-block //shadow-light-lg rounded-circle h-100 o-f-c
card-footer px-0 pt-4 pb-0

//v13
col mw-xl-20 mw-md-25 text-center py-5 px-3 px-md-4
card
card-zoom position-relative d-flex justify-content-center rounded-circle overflow-hidden card-hover-overlay mx-auto w-100
card-float card-hover center
nav mx-n6 justify-content-center font-size-sm
card-img sk-thumbnail img-ratio-one d-block //shadow-light-lg rounded-circle h-100 o-f-c
card-footer px-0 pt-4 pb-0 font-montserrat font-size-15

//v14
col-6 col-md-4 col-lg-3 text-center py-5 text-md-left px-3 px-md-4
card border shadow p-2 lift
card-zoom position-relative
card-float card-hover right-0 left-0 bottom-0 mb-4
nav mx-n4 justify-content-center
card-img sk-thumbnail img-ratio-4 card-hover-overlay alizarin d-block //rounded shadow-light-lg img-fluid
card-footer px-3 pt-4 pb-1

//v15
col mw-xl-20 mw-md-25 text-center py-5 px-3 px-md-4
card
card-zoom position-relative d-flex justify-content-center rounded-circle overflow-hidden card-hover-overlay mx-auto w-100
card-float card-hover center
nav mx-n6 justify-content-center font-size-sm
card-img sk-thumbnail img-ratio-one d-block //shadow-light-lg rounded-circle h-100 o-f-c
card-footer px-0 pt-4 pb-0 font-nunito