Last active
March 12, 2021 11:50
-
-
Save subaida77/0f2a0c2faa6a894ff5ddbcae7574e2e6 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
//v14 | |
<div class="mx-n4 page-dots-custom-1" data-flickity='{"pageDots": true, "prevNextButtons": false, "cellAlign": "left", "wrapAround": true, "imagesLoaded": true}'> | |
<div class="col-12 col-md-6 col-xl-4 pb-4 pb-md-7"> | |
<!-- Card --> | |
<div class="card border shadow p-2 sk-fade font-montserrat font-size-sm"> | |
<!-- Image --> | |
<div class="card-zoom position-relative"> | |
<div class="badge-float sk-fade-top top-0 right-0 mt-4 mr-4"> | |
<a href="@@webRoot/course-single-v2.html" class="btn btn-xs btn-dark text-white rounded-circle lift opacity-dot-7 mr-1 p-2 d-inline-flex justify-content-center align-items-center w-36 h-36"> | |
<!-- Icon --> | |
@@include("assets/img/icons/icon-eye.svg") | |
</a> | |
<a href="@@webRoot/course-single-v2.html" class="btn btn-xs btn-dark text-white rounded-circle lift opacity-dot-7 p-2 d-inline-flex justify-content-center align-items-center w-36 h-36"> | |
<!-- Icon --> | |
@@include("assets/img/icons/icon-heart.svg") | |
</a> | |
</div> | |
<a href="@@webRoot/course-single-v2.html" class="card-img sk-thumbnail d-block"> | |
<img class="rounded shadow-light-lg" src="assets/img/products/product-7.jpg" alt="..."> | |
</a> | |
<span class="badge sk-fade-bottom badge-lg badge-orange badge-pill badge-float bottom-0 left-0 mb-4 ml-4"> | |
<span class="text-white text-uppercase font-weight-bold font-size-xs">BEST SELLER</span> | |
</span> | |
</div> | |
<!-- Footer --> | |
<div class="card-footer px-2 pb-2 mb-1 pt-4 position-relative"> | |
<a href="#" class="d-block"> | |
<div class="avatar avatar-xl badge-float position-absolute top-0 right-0 mt-n6 mr-5 rounded-circle shadow border border-white border-w-lg"> | |
<img src="assets/img/avatars/avatar-1.jpg" alt="..." class="avatar-img rounded-circle"> | |
</div> | |
</a> | |
<!-- Preheading --> | |
<a href="@@webRoot/course-single-v2.html"><span class="mb-1 d-inline-block text-gray-800">Photography</span></a> | |
<!-- Heading --> | |
<div class="position-relative"> | |
<a href="@@webRoot/course-single-v2.html" class="d-block stretched-link"><h6 class="line-clamp-2 h-md-48 font-weight-semi-bold mr-md-6 mr-lg-10 mr-xl-4 mb-2">Fashion Photography From Professional</h6></a> | |
<div class="d-lg-flex align-items-end flex-wrap mb-n1"> | |
<div class="star-rating mb-2 mb-lg-0 mr-lg-3"> | |
<div class="rating" style="width:50%;"></div> | |
</div> | |
<div class="font-size-sm"> | |
<span>5.45 (5.8k+ reviews)</span> | |
</div> | |
</div> | |
<div class="row mx-n2 align-items-end"> | |
<div class="col px-2"> | |
<ul class="nav mx-n3"> | |
<li class="nav-item px-3"> | |
<div class="d-flex align-items-center"> | |
<div class="mr-2 d-flex icon-uxs text-secondary"> | |
<!-- Icon --> | |
@@include("assets/img/icons/icon-reader.svg") | |
</div> | |
<div class="font-size-sm">5 lessons</div> | |
</div> | |
</li> | |
<li class="nav-item px-3"> | |
<div class="d-flex align-items-center"> | |
<div class="mr-2 d-flex icon-uxs text-secondary"> | |
<!-- Icon --> | |
@@include("assets/img/icons/icon-clock.svg") | |
</div> | |
<div class="font-size-sm">8h 12m</div> | |
</div> | |
</li> | |
</ul> | |
</div> | |
<div class="col-auto px-2 text-right"> | |
<del class="font-size-sm">$959</del> | |
<ins class="h4 mb-0 d-block mb-lg-n1 font-weight-semi-bold">$415.99</ins> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
-----------v11 | |
<div class="mx-n4 mb-3 flickity-dot-light" data-flickity='{"pageDots": true, "prevNextButtons": false, "cellAlign": "left", "wrapAround": true, "imagesLoaded": true}'> | |
<div class="col-12 col-md-6 col-xl-4 pb-4 pb-md-7"> | |
<!-- Card --> | |
<div class="card border shadow p-2 sk-fade"> | |
<!-- Image --> | |
<div class="card-zoom position-relative"> | |
<div class="badge-float sk-fade-top top-0 right-0 mt-4 mr-4"> | |
<a href="@@webRoot/course-single-v3.html" class="btn btn-xs btn-dark text-white rounded-circle lift opacity-dot-7 mr-1 p-2 d-inline-flex justify-content-center align-items-center w-36 h-36"> | |
<!-- Icon --> | |
@@include("assets/img/icons/icon-eye.svg") | |
</a> | |
<a href="@@webRoot/course-single-v3.html" class="btn btn-xs btn-dark text-white rounded-circle lift opacity-dot-7 p-2 d-inline-flex justify-content-center align-items-center w-36 h-36"> | |
<!-- Icon --> | |
@@include("assets/img/icons/icon-heart.svg") | |
</a> | |
</div> | |
<a href="@@webRoot/course-single-v3.html" class="card-img sk-thumbnail img-ratio-9 d-block"> | |
<img class="rounded shadow-light-lg" src="assets/img/products/product-7.jpg" alt="..."> | |
</a> | |
<span class="badge sk-fade-bottom badge-lg badge-orange badge-pill badge-float bottom-0 left-0 mb-4 ml-4"> | |
<span class="text-white text-uppercase font-weight-bold font-size-xs">BEST SELLER</span> | |
</span> | |
</div> | |
<!-- Footer --> | |
<div class="card-footer px-2 pb-2 mb-1 pt-4 position-relative"> | |
<a href="#" class="d-block"> | |
<div class="avatar avatar-xl badge-float position-absolute top-0 right-0 mt-n6 mr-5 rounded-circle shadow border border-white border-w-lg"> | |
<img src="assets/img/avatars/avatar-1.jpg" alt="..." class="avatar-img rounded-circle"> | |
</div> | |
</a> | |
<!-- Preheading --> | |
<a href="@@webRoot/course-single-v3.html"><span class="mb-1 d-inline-block text-gray-800">Photography</span></a> | |
<!-- Heading --> | |
<div class="position-relative"> | |
<a href="@@webRoot/course-single-v3.html" class="d-block stretched-link"><h4 class="line-clamp-2 h-md-48 h-lg-58 mr-md-6 mr-lg-10 mr-xl-4 mb-2">Fashion Photography From Professional</h4></a> | |
<div class="d-lg-flex align-items-end flex-wrap mb-n1"> | |
<div class="star-rating mb-2 mb-lg-0 mr-lg-3"> | |
<div class="rating" style="width:50%;"></div> | |
</div> | |
<div class="font-size-sm"> | |
<span>5.45 (5.8k+ reviews)</span> | |
</div> | |
</div> | |
<div class="row mx-n2 align-items-end"> | |
<div class="col px-2"> | |
<ul class="nav mx-n3"> | |
<li class="nav-item px-3"> | |
<div class="d-flex align-items-center"> | |
<div class="mr-2 d-flex icon-uxs text-secondary"> | |
<!-- Icon --> | |
@@include("assets/img/icons/icon-reader.svg") | |
</div> | |
<div class="font-size-sm">5 lessons</div> | |
</div> | |
</li> | |
<li class="nav-item px-3"> | |
<div class="d-flex align-items-center"> | |
<div class="mr-2 d-flex icon-uxs text-secondary"> | |
<!-- Icon --> | |
@@include("assets/img/icons/icon-clock.svg") | |
</div> | |
<div class="font-size-sm">8h 12m</div> | |
</div> | |
</li> | |
</ul> | |
</div> | |
<div class="col-auto px-2 text-right"> | |
<del class="font-size-sm">$959</del> | |
<ins class="h4 mb-0 d-block mb-lg-n1">$415.99</ins> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
-------v13 | |
<div class="mx-n4" data-flickity='{"pageDots": true, "prevNextButtons": false, "cellAlign": "left", "wrapAround": true, "imagesLoaded": true}'> | |
<div class="col-12 col-md-6 col-xl-4 pb-4 pb-md-7"> | |
<!-- Card --> | |
<div class="card border shadow p-2 sk-fade font-montserrat font-size-sm"> | |
<!-- Image --> | |
<div class="card-zoom position-relative"> | |
<div class="badge-float sk-fade-top top-0 right-0 mt-4 mr-4"> | |
<a href="@@webRoot/course-single-v1.html" class="btn btn-xs btn-dark text-white rounded-circle lift opacity-dot-7 mr-1 p-2 d-inline-flex justify-content-center align-items-center w-36 h-36"> | |
<!-- Icon --> | |
@@include("assets/img/icons/icon-eye.svg") | |
</a> | |
<a href="@@webRoot/course-single-v1.html" class="btn btn-xs btn-dark text-white rounded-circle lift opacity-dot-7 p-2 d-inline-flex justify-content-center align-items-center w-36 h-36"> | |
<!-- Icon --> | |
@@include("assets/img/icons/icon-heart.svg") | |
</a> | |
</div> | |
<a href="@@webRoot/course-single-v1.html" class="card-img sk-thumbnail d-block"> | |
<img class="rounded shadow-light-lg" src="assets/img/products/product-7.jpg" alt="..."> | |
</a> | |
<span class="badge sk-fade-bottom badge-lg badge-orange badge-pill badge-float bottom-0 left-0 mb-4 ml-4"> | |
<span class="text-white text-uppercase font-weight-bold font-size-xs">BEST SELLER</span> | |
</span> | |
</div> | |
<!-- Footer --> | |
<div class="card-footer px-2 pb-2 mb-1 pt-4 position-relative"> | |
<a href="#" class="d-block"> | |
<div class="avatar avatar-xl badge-float position-absolute top-0 right-0 mt-n6 mr-5 rounded-circle shadow border border-white border-w-lg"> | |
<img src="assets/img/avatars/avatar-1.jpg" alt="..." class="avatar-img rounded-circle"> | |
</div> | |
</a> | |
<!-- Preheading --> | |
<a href="@@webRoot/course-single-v1.html"><span class="mb-1 d-inline-block text-gray-800">Photography</span></a> | |
<!-- Heading --> | |
<div class="position-relative"> | |
<a href="@@webRoot/course-single-v1.html" class="d-block stretched-link"><h6 class="line-clamp-2 h-md-48 font-weight-semi-bold mr-md-6 mr-lg-10 mr-xl-4 mb-2">Fashion Photography From Professional</h6></a> | |
<div class="d-lg-flex align-items-end flex-wrap mb-n1"> | |
<div class="star-rating mb-2 mb-lg-0 mr-lg-3"> | |
<div class="rating" style="width:50%;"></div> | |
</div> | |
<div class="font-size-sm"> | |
<span>5.45 (5.8k+ reviews)</span> | |
</div> | |
</div> | |
<div class="row mx-n2 align-items-end"> | |
<div class="col px-2"> | |
<ul class="nav mx-n3"> | |
<li class="nav-item px-3"> | |
<div class="d-flex align-items-center"> | |
<div class="mr-2 d-flex icon-uxs text-secondary"> | |
<!-- Icon --> | |
@@include("assets/img/icons/icon-reader.svg") | |
</div> | |
<div class="font-size-sm">5 lessons</div> | |
</div> | |
</li> | |
<li class="nav-item px-3"> | |
<div class="d-flex align-items-center"> | |
<div class="mr-2 d-flex icon-uxs text-secondary"> | |
<!-- Icon --> | |
@@include("assets/img/icons/icon-clock.svg") | |
</div> | |
<div class="font-size-sm">8h 12m</div> | |
</div> | |
</li> | |
</ul> | |
</div> | |
<div class="col-auto px-2 text-right"> | |
<del class="font-size-sm">$959</del> | |
<ins class="h4 mb-0 d-block mb-lg-n1 font-weight-semi-bold">$415.99</ins> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
--------v6 | |
<div class="mx-n4 flickity-button-outset" data-flickity='{"pageDots": true, "prevNextButtons": true, "cellAlign": "left", "wrapAround": true, "imagesLoaded": true}'> | |
<div class="col-md-6 col-xl-4 col-wd-3 pb-4 pb-md-7"> | |
<!-- Card --> | |
<div class="card border shadow p-2 rounded-lg sk-fade"> | |
<!-- Image --> | |
<div class="card-zoom position-relative"> | |
<div class="badge-float sk-fade-top top-0 right-0 mt-4 mr-4"> | |
<a href="@@webRoot/course-single-v5.html" class="btn btn-xs btn-dark text-white rounded-circle lift opacity-dot-7 mr-1 p-2 d-inline-flex justify-content-center align-items-center w-36 h-36"> | |
<!-- Icon --> | |
@@include("assets/img/icons/icon-eye.svg") | |
</a> | |
<a href="@@webRoot/course-single-v5.html" class="btn btn-xs btn-dark text-white rounded-circle lift opacity-dot-7 p-2 d-inline-flex justify-content-center align-items-center w-36 h-36"> | |
<!-- Icon --> | |
@@include("assets/img/icons/icon-heart.svg") | |
</a> | |
</div> | |
<a href="@@webRoot/course-single-v5.html" class="card-img sk-thumbnail img-ratio-9 d-block"> | |
<img class="rounded shadow-light-lg" src="assets/img/products/product-7.jpg" alt="..."> | |
</a> | |
<span class="badge sk-fade-bottom badge-lg badge-orange badge-pill badge-float bottom-0 left-0 mb-4 ml-4"> | |
<span class="text-white text-uppercase font-weight-bold font-size-xs">BEST SELLER</span> | |
</span> | |
</div> | |
<!-- Footer --> | |
<div class="card-footer px-2 pb-2 mb-1 pt-4 position-relative"> | |
<a href="@@webRoot/course-single-v5.html" class="d-block"> | |
<div class="avatar avatar-xl badge-float position-absolute top-0 right-0 mt-n6 mr-5 rounded-circle shadow border border-white border-w-lg"> | |
<img src="assets/img/avatars/avatar-1.jpg" alt="..." class="avatar-img rounded-circle"> | |
</div> | |
</a> | |
<!-- Preheading --> | |
<a href="@@webRoot/course-single-v5.html"><span class="mb-1 d-inline-block text-gray-800">Photography</span></a> | |
<!-- Heading --> | |
<div class="position-relative"> | |
<a href="@@webRoot/course-single-v5.html" class="d-block stretched-link"><h4 class="line-clamp-2 h-md-48 h-lg-58 mr-md-6 mr-lg-10 mr-xl-4 mb-2">Fashion Photography From Professional</h4></a> | |
<div class="d-lg-flex align-items-end flex-wrap mb-n1"> | |
<div class="star-rating mb-2 mb-lg-0 mr-lg-3"> | |
<div class="rating" style="width:50%;"></div> | |
</div> | |
<div class="font-size-sm"> | |
<span>5.45 (5.8k+ reviews)</span> | |
</div> | |
</div> | |
<div class="row mx-n2 align-items-end"> | |
<div class="col px-2"> | |
<ul class="nav mx-n3"> | |
<li class="nav-item px-3"> | |
<div class="d-flex align-items-center"> | |
<div class="mr-2 d-flex icon-uxs text-secondary"> | |
<!-- Icon --> | |
@@include("assets/img/icons/icon-reader.svg") | |
</div> | |
<div class="font-size-sm">5 lessons</div> | |
</div> | |
</li> | |
<li class="nav-item px-3"> | |
<div class="d-flex align-items-center"> | |
<div class="mr-2 d-flex icon-uxs text-secondary"> | |
<!-- Icon --> | |
@@include("assets/img/icons/icon-clock.svg") | |
</div> | |
<div class="font-size-sm">8h 12m</div> | |
</div> | |
</li> | |
</ul> | |
</div> | |
<div class="col-auto px-2 text-right"> | |
<del class="font-size-sm">$959</del> | |
<ins class="h4 mb-0 d-block mb-lg-n1">$415.99</ins> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
-----------v8 | |
<div class="mx-n4 mb-3" data-flickity='{"pageDots": true, "prevNextButtons": false, "cellAlign": "left", "wrapAround": true, "imagesLoaded": true}'> | |
<div class="col-12 col-md-6 col-xl-4 pb-4 pb-md-7"> | |
<!-- Card --> | |
<div class="card border shadow p-2 sk-fade"> | |
<!-- Image --> | |
<div class="card-zoom position-relative"> | |
<div class="badge-float sk-fade-top top-0 right-0 mt-4 mr-4"> | |
<a href="@@webRoot/course-single-v2.html" class="btn btn-xs btn-dark text-white rounded-circle lift opacity-dot-7 mr-1 p-2 d-inline-flex justify-content-center align-items-center w-36 h-36"> | |
<!-- Icon --> | |
@@include("assets/img/icons/icon-eye.svg") | |
</a> | |
<a href="@@webRoot/course-single-v2.html" class="btn btn-xs btn-dark text-white rounded-circle lift opacity-dot-7 p-2 d-inline-flex justify-content-center align-items-center w-36 h-36"> | |
<!-- Icon --> | |
@@include("assets/img/icons/icon-heart.svg") | |
</a> | |
</div> | |
<a href="@@webRoot/course-single-v2.html" class="card-img sk-thumbnail d-block"> | |
<img class="rounded shadow-light-lg" src="assets/img/products/product-7.jpg" alt="..."> | |
</a> | |
<span class="badge sk-fade-bottom badge-lg badge-orange badge-pill badge-float bottom-0 left-0 mb-4 ml-4"> | |
<span class="text-white text-uppercase font-weight-bold font-size-xs">BEST SELLER</span> | |
</span> | |
</div> | |
<!-- Footer --> | |
<div class="card-footer px-2 pb-2 mb-1 pt-4 position-relative"> | |
<a href="#" class="d-block"> | |
<div class="avatar avatar-xl badge-float position-absolute top-0 right-0 mt-n6 mr-5 rounded-circle shadow border border-white border-w-lg"> | |
<img src="assets/img/avatars/avatar-1.jpg" alt="..." class="avatar-img rounded-circle"> | |
</div> | |
</a> | |
<!-- Preheading --> | |
<a href="@@webRoot/course-single-v2.html"><span class="mb-1 d-inline-block text-gray-800">Photography</span></a> | |
<!-- Heading --> | |
<div class="position-relative"> | |
<a href="@@webRoot/course-single-v2.html" class="d-block stretched-link"><h4 class="line-clamp-2 h-md-48 h-lg-58 mr-md-6 mr-lg-10 mr-xl-4 mb-2">Fashion Photography From Professional</h4></a> | |
<div class="d-lg-flex align-items-end flex-wrap mb-n1"> | |
<div class="star-rating mb-2 mb-lg-0 mr-lg-3"> | |
<div class="rating" style="width:50%;"></div> | |
</div> | |
<div class="font-size-sm"> | |
<span>5.45 (5.8k+ reviews)</span> | |
</div> | |
</div> | |
<div class="row mx-n2 align-items-end"> | |
<div class="col px-2"> | |
<ul class="nav mx-n3"> | |
<li class="nav-item px-3"> | |
<div class="d-flex align-items-center"> | |
<div class="mr-2 d-flex icon-uxs text-secondary"> | |
<!-- Icon --> | |
@@include("assets/img/icons/icon-reader.svg") | |
</div> | |
<div class="font-size-sm">5 lessons</div> | |
</div> | |
</li> | |
<li class="nav-item px-3"> | |
<div class="d-flex align-items-center"> | |
<div class="mr-2 d-flex icon-uxs text-secondary"> | |
<!-- Icon --> | |
@@include("assets/img/icons/icon-clock.svg") | |
</div> | |
<div class="font-size-sm">8h 12m</div> | |
</div> | |
</li> | |
</ul> | |
</div> | |
<div class="col-auto px-2 text-right"> | |
<del class="font-size-sm">$959</del> | |
<ins class="h4 mb-0 d-block mb-lg-n1">$415.99</ins> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
----------v15 | |
<div class="mx-n4 flickity-button-outset flickity-dot-light" data-flickity='{"pageDots": true, "prevNextButtons": false, "cellAlign": "left", "wrapAround": true, "imagesLoaded": true}'> | |
<div class="col-12 col-md-6 col-xl-4 pb-4 pb-md-7"> | |
<!-- Card --> | |
<div class="card border rounded-xl shadow p-2 sk-fade font-nunito"> | |
<!-- Image --> | |
<div class="card-zoom position-relative"> | |
<div class="badge-float sk-fade-top top-0 right-0 mt-4 mr-4"> | |
<a href="@@webRoot/course-single-v4.html" class="btn btn-xs btn-dark text-white rounded-circle lift opacity-dot-7 mr-1 p-2 d-inline-flex justify-content-center align-items-center w-36 h-36"> | |
<!-- Icon --> | |
@@include("assets/img/icons/icon-eye.svg") | |
</a> | |
<a href="@@webRoot/course-single-v4.html" class="btn btn-xs btn-dark text-white rounded-circle lift opacity-dot-7 p-2 d-inline-flex justify-content-center align-items-center w-36 h-36"> | |
<!-- Icon --> | |
@@include("assets/img/icons/icon-heart.svg") | |
</a> | |
</div> | |
<a href="@@webRoot/course-single-v4.html" class="card-img sk-thumbnail d-block"> | |
<img class="rounded shadow-light-lg" src="assets/img/products/product-17.jpg" alt="..."> | |
</a> | |
<span class="badge sk-fade-bottom badge-lg badge-orange badge-pill badge-float bottom-0 left-0 mb-4 ml-4"> | |
<span class="text-white text-uppercase font-weight-bold font-size-xs">BEST SELLER</span> | |
</span> | |
</div> | |
<!-- Footer --> | |
<div class="card-footer px-2 pb-2 mb-1 pt-4 position-relative"> | |
<a href="@@webRoot/course-single-v4.html" class="d-block"> | |
<div class="avatar avatar-xl badge-float position-absolute top-0 right-0 mt-n6 mr-5 rounded-circle shadow border border-white border-w-lg"> | |
<img src="assets/img/avatars/avatar-1.jpg" alt="..." class="avatar-img rounded-circle"> | |
</div> | |
</a> | |
<!-- Preheading --> | |
<a href="@@webRoot/course-single-v4.html"><span class="mb-1 d-inline-block text-gray-800">Photography</span></a> | |
<!-- Heading --> | |
<div class="position-relative"> | |
<a href="@@webRoot/course-single-v4.html" class="d-block stretched-link"><h5 class="line-clamp-2 h-md-48 font-weight-bold mr-xl-3">Fashion Photography From Professional</h5></a> | |
<div class="d-lg-flex align-items-end flex-wrap mb-n1"> | |
<div class="star-rating mb-2 mb-lg-0 mr-lg-3"> | |
<div class="rating" style="width:50%;"></div> | |
</div> | |
<div class="font-size-sm"> | |
<span>5.45 (5.8k+ reviews)</span> | |
</div> | |
</div> | |
<div class="row mx-n2 align-items-end"> | |
<div class="col px-2"> | |
<ul class="nav mx-n3"> | |
<li class="nav-item px-3"> | |
<div class="d-flex align-items-center"> | |
<div class="mr-2 d-flex icon-uxs text-secondary"> | |
<!-- Icon --> | |
@@include("assets/img/icons/icon-reader.svg") | |
</div> | |
<div class="font-size-sm">5 lessons</div> | |
</div> | |
</li> | |
<li class="nav-item px-3"> | |
<div class="d-flex align-items-center"> | |
<div class="mr-2 d-flex icon-uxs text-secondary"> | |
<!-- Icon --> | |
@@include("assets/img/icons/icon-clock.svg") | |
</div> | |
<div class="font-size-sm">8h 12m</div> | |
</div> | |
</li> | |
</ul> | |
</div> | |
<div class="col-auto px-2 text-right"> | |
<del class="font-size-sm">$959</del> | |
<ins class="h5 font-weight-bold mb-0 d-block mb-lg-n1">$415.99</ins> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
-----v10---- | |
<div class="mx-n4 flickity-button-outset" id="courses" data-flickity='{"pageDots": true, "prevNextButtons": true, "cellAlign": "left", "wrapAround": true, "imagesLoaded": true}'> | |
<div class="col-md-6 col-xl-3 pb-4 pb-md-7"> | |
<!-- Card --> | |
<div class="card border shadow sk-fade"> | |
<!-- Image --> | |
<div class="card-zoom position-relative rounded-bottom-0"> | |
<div class="badge-float sk-fade-top top-0 right-0 mt-4 mr-4"> | |
<a href="@@webRoot/course-single-v3.html" class="btn btn-xs btn-dark text-white rounded-circle lift opacity-dot-7 mr-1 p-2 d-inline-flex justify-content-center align-items-center w-36 h-36"> | |
<!-- Icon --> | |
@@include("assets/img/icons/icon-eye.svg") | |
</a> | |
<a href="@@webRoot/course-single-v3.html" class="btn btn-xs btn-dark text-white rounded-circle lift opacity-dot-7 p-2 d-inline-flex justify-content-center align-items-center w-36 h-36"> | |
<!-- Icon --> | |
@@include("assets/img/icons/icon-heart.svg") | |
</a> | |
</div> | |
<a href="@@webRoot/course-single-v3.html" class="card-img sk-thumbnail img-ratio-10 d-block rounded-bottom-0"> | |
<img class="shadow-light-lg" src="assets/img/products/product-15.jpg" alt="..."> | |
</a> | |
<span class="badge sk-fade-top badge-lg badge-orange badge-pill badge-float top-0 left-0 mt-4 ml-4"> | |
<span class="text-white text-uppercase font-weight-bold font-size-xs">BEST SELLER</span> | |
</span> | |
<div class="card-float sk-fade-bottom bottom-0 left-0 mb-3 ml-4"> | |
<ins class="h5 mb-0 text-white">$21.99</ins> | |
</div> | |
</div> | |
<!-- Footer --> | |
<div class="card-footer p-4 position-relative"> | |
<div class="avatar avatar-lg badge-float position-absolute top-0 right-0 mt-n5 mr-5 rounded-circle shadow border border-white border-w-lg"> | |
<img src="assets/img/avatars/avatar-1.jpg" alt="..." class="avatar-img rounded-circle"> | |
</div> | |
<!-- Preheading --> | |
<a href="@@webRoot/course-single-v3.html"><span class="mb-1 d-inline-block text-gray-800">Photography</span></a> | |
<!-- Heading --> | |
<a href="@@webRoot/course-single-v3.html" class="d-block"><h5 class="line-clamp-2 h-48 h-lg-58 mb-1">Fashion Photography From Professional</h5></a> | |
<ul class="nav mx-n3"> | |
<li class="nav-item px-3"> | |
<div class="d-flex align-items-center"> | |
<div class="mr-2 d-flex icon-uxs text-secondary"> | |
<!-- Icon --> | |
@@include("assets/img/icons/icon-reader.svg") | |
</div> | |
<div class="font-size-sm">5 lessons</div> | |
</div> | |
</li> | |
<li class="nav-item px-3"> | |
<div class="d-flex align-items-center"> | |
<div class="mr-2 d-flex icon-uxs text-secondary"> | |
<!-- Icon --> | |
@@include("assets/img/icons/icon-clock.svg") | |
</div> | |
<div class="font-size-sm">8h 12m</div> | |
</div> | |
</li> | |
</ul> | |
</div> | |
</div> | |
</div> | |
----v2----- | |
<div class="mx-n4" data-flickity='{"pageDots": true, "prevNextButtons": false, "cellAlign": "left", "wrapAround": true, "imagesLoaded": true}'> | |
<div class="col-md-6 col-lg-4 col-xl-3 pb-4 pb-md-5"> | |
<!-- Card --> | |
<div class="card border shadow p-2 sk-fade"> | |
<!-- Image --> | |
<div class="card-zoom position-relative"> | |
<a href="@@webRoot/course-single-v3.html" class="card-img sk-thumbnail img-ratio-3 d-block"> | |
<img class="rounded shadow-light-lg" src="assets/img/products/product-15.jpg" alt="..."> | |
</a> | |
<span class="sk-fade-right badge-float bottom-0 right-0 mb-2 mr-2"> | |
<ins class="h5 mb-0 text-white">$415.99</ins> | |
</span> | |
</div> | |
<!-- Footer --> | |
<div class="card-footer px-2 pb-2 mb-1 pt-4 position-relative"> | |
<!-- Preheading --> | |
<a href="@@webRoot/course-single-v3.html"><span class="mb-1 d-inline-block text-gray-800">Photography</span></a> | |
<!-- Heading --> | |
<div class="position-relative"> | |
<a href="@@webRoot/course-single-v3.html" class="d-block stretched-link"><h5 class="line-clamp-2 h-md-48 h-lg-58 mr-md-8 mr-lg-10 mr-xl-4 mb-2">Fashion Photography From Professional</h5></a> | |
<div class="row mx-n2 align-items-end"> | |
<div class="col px-2"> | |
<ul class="nav mx-n3"> | |
<li class="nav-item px-3"> | |
<div class="d-flex align-items-center"> | |
<div class="mr-2 d-flex icon-uxs text-secondary"> | |
<!-- Icon --> | |
@@include("assets/img/icons/icon-reader.svg") | |
</div> | |
<div class="font-size-sm">5 lessons</div> | |
</div> | |
</li> | |
</ul> | |
</div> | |
<div class="col-auto px-2 text-right"> | |
<div class="star-rating mb-2 mb-lg-0"> | |
<div class="rating" style="width:100%;"></div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</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
//v14 | |
font-montserrat font-size-sm"> | |
font-weight-semi-bold //title css,tag | |
font-weight-semi-bold //ins rate | |
//v11 | |
img-ratio-9 /img link | |
//v13 | |
font-montserrat font-size-sm | |
font-weight-semi-bold //title css,tag | |
font-weight-semi-bold //ins rate | |
//v6 | |
rounded-lg //card div | |
img-ratio-9 | |
//v8 | |
//v15 | |
rounded-xl font-nunito | |
font-weight-bold mr-xl-3 //title css and tag | |
font-weight-bold<ins> | |
//v10 | |
img-ratio-10 rounded-bottom-0 //img linkcss | |
shadow-light-lg //img | |
sk-fade-bottom top-0 // badge | |
//v2 | |
col-md-6 col-lg-4 col-xl-3 pb-4 pb-md-5 | |
img-ratio-3 | |
mr-md-8 mr-lg-10 mr-xl-4 mb-2//title | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment