Created
March 18, 2021 12:56
-
-
Save subaida77/c901fe0498fababd52289984492f2f7f to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//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> | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment