Card
Geek's cards provide a flexible and extensible content container with multiple variants and options.
Course Card
$199
<div class="card card-lift col-lg-3">
<a href="#!">
<img src="../assets/images/course/aws.jpg" alt="figma" class="card-img-top img-fluid w-100" />
</a>
<div class="card-body d-flex flex-column gap-4">
<div class="d-flex flex-column gap-2">
<div>
<span class="badge text-light-emphasis bg-light-subtle border border-light-subtle rounded-pill">Web Development</span>
</div>
<h3 class="mb-0 h4">
<a href="#!" class="text-inherit">AWS Fundamentals Specialization</a>
</h3>
<small class="text-secondary">Anita Parmar</small>
<div class="lh-1">
<span class="text-secondary fw-semibold">4.5</span>
<span class="align-text-top">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"></path>
</svg>
</span>
<span class="text-gray-500">(13,245)</span>
</div>
</div>
<div>
<span class="fw-semibold text-dark">$199</span>
</div>
</div>
</div>Icon Card
Data Science
10 Courses <div class="card-hover-svg card card-body d-flex flex-column gap-4 col-lg-3">
<div>
<span class="icon-shape icon-xxl">
<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_7928_12745)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M49.4989 31.4999C49.4989 21.8218 41.677 13.9999 31.9989 13.9999C22.3207 13.9999 14.4989 21.8218 14.4989 31.4999C14.4989 41.178 22.3207 48.9999 31.9989 48.9999C41.677 48.9999 49.4989 41.178 49.4989 31.4999ZM50.4989 31.4999C50.4989 21.2695 42.2293 12.9999 31.9989 12.9999C21.7684 12.9999 13.4989 21.2695 13.4989 31.4999C13.4989 41.7303 21.7684 49.9999 31.9989 49.9999C42.2293 49.9999 50.4989 41.7303 50.4989 31.4999Z" fill=""></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M34.1998 15.1444C33.4223 14.3344 32.6786 13.9999 31.9989 13.9999C31.3192 13.9999 30.5758 14.3344 29.7983 15.1444C29.018 15.9574 28.2695 17.1869 27.62 18.7892C26.323 21.9888 25.4991 26.4804 25.4991 31.5C25.4991 36.5195 26.323 41.0111 27.62 44.2107C28.2695 45.8131 29.018 47.0426 29.7983 47.8555C30.5758 48.6656 31.3192 48.9999 31.9989 48.9999C32.6786 48.9999 33.4223 48.6656 34.1998 47.8555C34.9802 47.0426 35.7286 45.8131 36.3782 44.2107C37.6751 41.0111 38.4991 36.5195 38.4991 31.5C38.4991 26.4804 37.6751 21.9888 36.3782 18.7892C35.7286 17.1869 34.9802 15.9574 34.1998 15.1444ZM39.4991 31.5C39.4991 21.2695 36.1478 12.9999 31.9989 12.9999C27.8499 12.9999 24.4991 21.2695 24.4991 31.5C24.4991 41.7304 27.8499 49.9999 31.9989 49.9999C36.1478 49.9999 39.4991 41.7304 39.4991 31.5Z" fill=""></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M50.0821 31.8786C50.0821 31.5549 49.8393 31.3122 49.5157 31.3122H14.4007C14.077 31.3122 13.8343 31.5549 13.8343 31.8786C13.8343 32.2022 14.077 32.4449 14.4007 32.4449H49.5157C49.7584 32.4449 50.0012 32.2831 50.0821 31.8786Z" fill=""></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M31.5001 13.4836C31.5001 13.7786 31.7143 13.9999 32 13.9999C32.2143 13.9999 32.4286 13.7786 32.5001 13.4836V5.51631C32.5001 5.22123 32.2858 4.99993 32 4.99993C31.7143 4.99993 31.5001 5.22123 31.5001 5.51631V13.4836Z" fill=""></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M33.5471 3.07461C33.5471 2.17051 32.8621 1.48547 31.958 1.48547C31.0539 1.48547 30.3689 2.17049 30.3689 3.07461C30.3689 3.97872 31.0539 4.66372 31.958 4.66372C32.8621 4.66372 33.5471 3.9787 33.5471 3.07461ZM34.5471 3.07461C34.5471 1.61823 33.4144 0.485474 31.958 0.485474C30.5016 0.485474 29.3689 1.61823 29.3689 3.07461C29.3689 4.53099 30.5016 5.66372 31.958 5.66372C33.4144 5.66372 34.5471 4.53099 34.5471 3.07461Z" fill=""></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M44.3854 18.5726C44.1427 18.7344 44.1427 19.0581 44.3854 19.3008C44.4288 19.3225 44.4663 19.3442 44.5012 19.3643C44.5964 19.4193 44.6715 19.4626 44.79 19.4626C44.9518 19.4626 45.0327 19.4626 45.1136 19.3008L50.891 13.6738C51.1337 13.512 51.1337 13.1884 50.891 12.9456C50.7292 12.7029 50.4055 12.7029 50.1628 12.9456L44.3854 18.5726Z" fill=""></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M53.4877 12.6575L53.5018 12.6433C54.0822 12.0629 54.0822 10.997 53.5018 10.4166C52.8241 9.7389 51.8626 9.78126 51.3027 10.3878L51.2892 10.4025L51.2751 10.4166C50.6947 10.997 50.6947 12.0629 51.2751 12.6433L51.2892 12.6575L51.3027 12.6722C51.8777 13.295 52.8991 13.295 53.4741 12.6722L53.4877 12.6575ZM54.2089 13.3504C55.1798 12.3795 55.1798 10.6804 54.2089 9.70948C53.1571 8.65765 51.5389 8.65765 50.5679 9.70948C49.597 10.6804 49.597 12.3795 50.5679 13.3504C51.5389 14.4023 53.238 14.4023 54.2089 13.3504Z" fill=""></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M58.8208 31.8786C58.8208 31.5549 58.5781 31.3122 58.2544 31.3122H49.5157C49.192 31.3122 48.9498 31.5549 48.9498 31.8786C48.9498 32.2022 49.192 32.4449 49.5157 32.4449H58.2544C58.5781 32.4449 58.7399 32.2831 58.8208 31.8786Z" fill=""></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M60.8443 33.5487C61.7484 33.5487 62.4334 32.8637 62.4334 31.9596C62.4334 31.0555 61.7484 30.3705 60.8443 30.3705C59.9402 30.3705 59.2551 31.0555 59.2551 31.9596C59.2551 32.8637 59.9402 33.5487 60.8443 33.5487ZM60.8443 34.5487C62.3007 34.5487 63.4334 33.416 63.4334 31.9596C63.4334 30.5032 62.3007 29.3705 60.8443 29.3705C59.3879 29.3705 58.2551 30.5032 58.2551 31.9596C58.2551 33.416 59.3879 34.5487 60.8443 34.5487Z" fill=""></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M44.5612 43.8203C44.3185 43.9821 43.6627 44.4526 43.9054 44.6953L50.5027 51.2774L51.2098 50.5703" fill=""></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M53.4877 53.517L53.5018 53.5029C54.0822 52.9225 54.0822 51.8565 53.5018 51.2761L53.4877 51.262L53.4741 51.2473C52.9143 50.6408 51.9527 50.5984 51.2751 51.2761C50.6947 51.8565 50.6947 52.9225 51.2751 53.5029L51.2892 53.517L51.3027 53.5317C51.8777 54.1546 52.8991 54.1546 53.4741 53.5317L53.4877 53.517ZM54.2089 50.569C53.238 49.5172 51.6198 49.5172 50.5679 50.569C49.597 51.5399 49.597 53.239 50.5679 54.21C51.5389 55.2618 53.238 55.2618 54.2089 54.21C55.1798 53.239 55.1798 51.5399 54.2089 50.569Z" fill=""></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M32.5248 58.2627C32.4439 58.5821 32.2012 58.8217 31.9585 58.8217C31.6348 58.8217 31.3921 58.5821 31.3921 58.2627V49.5589C31.3921 49.2395 31.6348 49 31.9585 49C32.2821 49 32.5248 49.2395 32.5248 49.5589V58.2627Z" fill=""></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M30.3689 60.8445C30.3689 61.7487 31.0539 62.4337 31.958 62.4337C32.8016 62.4337 33.5471 61.7285 33.5471 60.8445C33.5471 59.9404 32.8621 59.2554 31.958 59.2554C31.0539 59.2554 30.3689 59.9404 30.3689 60.8445ZM29.3689 60.8445C29.3689 62.3009 30.5016 63.4337 31.958 63.4337C33.3335 63.4337 34.5471 62.3009 34.5471 60.8445C34.5471 59.3882 33.4144 58.2554 31.958 58.2554C30.5016 58.2554 29.3689 59.3882 29.3689 60.8445Z" fill=""></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.9455 50.1643C12.7028 50.3261 12.7028 50.6498 12.9455 50.8925C12.9889 50.9142 13.0264 50.9358 13.0613 50.956C13.1565 51.0109 13.2316 51.0543 13.3501 51.0543C13.431 51.0543 13.5928 51.0543 13.6737 50.8925L19.9038 44.6624C20.1466 44.5006 20.1466 44.1769 19.9038 43.9342C19.742 43.6915 19.4183 43.6915 19.1756 43.9342L12.9455 50.1643Z" fill=""></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.4184 53.5023L10.4456 53.5317C11.0054 54.1382 11.9669 54.1805 12.6446 53.5029C13.225 52.9225 13.225 51.8565 12.6446 51.2761L12.6305 51.262L12.6169 51.2473C12.0571 50.6408 11.0956 50.5984 10.4179 51.2761L10.4037 51.2902L10.389 51.3038C9.76617 51.8788 9.76617 52.9002 10.389 53.4752L10.4184 53.5023ZM9.71077 54.21C8.65893 53.239 8.65893 51.5399 9.71077 50.569C10.7626 49.5172 12.3808 49.5172 13.3517 50.569C14.3227 51.5399 14.3227 53.239 13.3517 54.21C12.2999 55.2618 10.6817 55.2618 9.71077 54.21Z" fill=""></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.58174 32.4449L14.4007 32.4449C14.7243 32.4449 14.8864 32.2831 14.8864 31.8786C14.8864 31.555 14.6437 31.3122 14.32 31.3122H5.58174C5.2581 31.3122 5.01536 31.555 5.01536 31.8786C5.01536 32.2022 5.2581 32.4449 5.58174 32.4449Z" fill=""></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.07461 30.3705C2.1705 30.3705 1.48547 31.0555 1.48547 31.9596C1.48547 32.8637 2.17051 33.5487 3.07461 33.5487C3.97869 33.5487 4.6637 32.8637 4.6637 31.9596C4.6637 31.0555 3.9787 30.3705 3.07461 30.3705ZM3.07461 29.3705C1.61823 29.3705 0.485474 30.5032 0.485474 31.9596C0.485474 33.416 1.61823 34.5487 3.07461 34.5487C4.531 34.5487 5.6637 33.416 5.6637 31.9596C5.6637 30.5032 4.531 29.3705 3.07461 29.3705Z" fill=""></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.8646 12.9456C12.6219 13.1075 12.6219 13.4311 12.8646 13.6738L18.8021 19.3477C18.8454 19.3694 18.883 19.3911 18.9179 19.4112C19.0131 19.4662 19.0882 19.5095 19.2066 19.5095C19.3685 19.5095 19.5302 19.5095 19.5302 19.3477C19.773 19.1859 19.773 18.8622 19.5302 18.6195L13.5928 12.9456C13.431 12.7029 13.1074 12.7029 12.8646 12.9456Z" fill=""></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.4037 10.4307L10.389 10.4443C9.76617 11.0192 9.76617 12.0407 10.389 12.6156L10.4184 12.6428L10.4456 12.6722C11.0205 13.295 12.042 13.295 12.6169 12.6722L12.6305 12.6575L12.6446 12.6433C13.225 12.0629 13.225 10.997 12.6446 10.4166L12.6305 10.4025L12.6169 10.3878C12.0571 9.78126 11.0956 9.7389 10.4179 10.4166L10.4037 10.4307ZM13.3517 13.3504C14.3227 12.3795 14.3227 10.6804 13.3517 9.70948C12.3808 8.65765 10.7626 8.65765 9.71077 9.70948C8.65893 10.6804 8.65893 12.3795 9.71077 13.3504C10.6817 14.4023 12.3808 14.4023 13.3517 13.3504Z" fill=""></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.2422 18.485C18.8978 18.3057 18.6395 18.485 18.4673 18.754C18.2951 19.1125 18.4673 19.3815 18.7256 19.5608C23.1164 21.6227 27.0067 23.0001 31.8279 23.0001C36.6492 23.0001 40.7255 21.5327 45.1163 19.4708C45.3746 19.2916 45.5468 18.9329 45.3746 18.664C45.2024 18.3951 44.858 18.2158 44.5997 18.3951C40.4672 20.457 36.477 21.8347 31.8279 21.8347C27.1789 21.8347 23.4608 20.5469 19.2422 18.485Z" fill=""></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M44.6787 43.8655C44.9214 44.0273 45.0832 44.2701 44.9214 44.5937C44.7596 44.7555 44.5978 44.9173 44.436 44.9173C44.3551 44.9173 44.2741 44.9173 44.1932 44.8365C40.2286 42.9755 36.3282 42.4778 31.9591 42.4778C27.5899 42.4778 23.7371 42.9286 19.8534 44.7896C19.6106 44.9514 19.287 44.7896 19.1252 44.5468C18.9634 44.3041 19.1252 43.9805 19.3679 43.8186C23.4134 41.9577 27.3472 41.426 31.9591 41.426C36.49 41.426 40.5523 42.0046 44.6787 43.8655Z" fill=""></path>
</g>
<defs>
<clipPath id="clip0_7928_12745">
<rect width="64" height="64" fill="white"></rect>
</clipPath>
</defs>
</svg>
</span>
</div>
<div>
<h3 class="mb-0">Data Science</h3>
<span class="text-gray-500">
<span class="fw-bold">10</span>
Courses
</span>
</div>
</div>Category
<a href="#!" class="card card-border-primary rounded-4">
<!--card body-->
<div class="card-body d-flex flex-column gap-4 text-center">
<div>
<!--icon-->
<div class="icon-shape icon-xxl bg-light-primary rounded-circle">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-gear text-primary" viewBox="0 0 16 16">
<path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492M5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0"></path>
<path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115z"></path>
</svg>
</div>
</div>
<!--content-->
<div>
<h3 class="mb-0">Engineering</h3>
<span>21 Mentors</span>
</div>
</div>
</a>Card Image Styled Webinar
<section class="py-6">
<div class="container">
<div class="row">
<div class="col-xxl-4 col-xl-6 col-lg-12">
<div class="card mb-4 mb-xl-0 card-hover border">
<a href="#!">
<img src="../assets/images/education/edu-webinar-1.jpg" alt="webinar-1" class="img-fluid w-100 rounded-top-3">
</a>
<div class="card-body">
<h3 class="mb-4 text-truncate">
<a href="#!" class="text-inherit">Education Edition Deployment And Set Up</a>
</h3>
<div class="mb-4">
<div class="mb-3 lh-1">
<span class="me-1">
<i class="bi bi-calendar-check"></i>
</span>
<span>Thu, November 10, 2023</span>
</div>
<div class="lh-1">
<span class="align-text-top me-1">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor" class="bi bi-clock" viewBox="0 0 16 16">
<path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/>
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"/>
</svg> </span>
<span>6:00 PM – 8:00 PM GMT</span>
</div>
</div>
<a href="#!" class="btn btn-light-primary text-primary">Register Now</a>
</div>
</div>
</div>
</div>
</div>
</section>Card Top Image
<section class="py-6">
<div class="container">
<div class="row">
<div class="col-xxl-3 col-xl-6 col-12">
<div class="card mb-4 card-hover border">
<a href="#!">
<img src="../assets/images/education/edu-img-1.jpg" alt="writing"
class="img-fluid card-img-top">
</a>
<div class="card-body">
<h4 class="mb-3">
<a href="#!" class="text-inherit">Content Writing</a>
</h4>
<div class="d-flex align-items-center mb-5 lh-1">
<div>
<span class="text-inherit fw-semibold">4.9</span>
<span class="ms-1"><svg xmlns="http://www.w3.org/2000/svg" width="12"
height="12" fill="var(--gk-success)"
class="bi bi-star-fill align-baseline" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z">
</path>
</svg>
(31)
</span>
</div>
<div class=" mx-1"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="var(--gk-gray-400)" class="bi bi-dot" viewBox="0 0 16 16">
<path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"></path>
</svg></div>
<div>
<span class="text-inherit fw-semibold me-1">8</span> Hours
</div>
</div>
<a href="#!">Enroll Today <span class=""><svg xmlns="http://www.w3.org/2000/svg"
width="20" height="20" fill="currentColor" class="bi bi-arrow-right-short"
viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z">
</path>
</svg></span></a>
</div>
</div>
</div>
<div class="col-xxl-3 col-xl-6 col-12">
<div class="card mb-4 card-hover border">
<a href="#!">
<img src="../assets/images/education/edu-img-2.jpg" alt="design"
class="img-fluid card-img-top">
</a>
<div class="card-body">
<h4 class="mb-3">
<a href="#!" class="text-inherit">UI / UX Design</a>
</h4>
<div class="d-flex align-items-center mb-5 lh-1">
<span class="badge bg-success me-2">New</span>
<div>
<span class="text-inherit fw-semibold">4.9</span>
<span class="ms-1"><svg xmlns="http://www.w3.org/2000/svg" width="12"
height="12" fill="var(--gk-success)"
class="bi bi-star-fill align-baseline" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z">
</path>
</svg>
(23)
</span>
</div>
<div class=" mx-1"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
fill="var(--gk-gray-400)" class="bi bi-dot" viewBox="0 0 16 16">
<path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"></path>
</svg></div>
<div>
<span class="text-inherit fw-semibold me-1">12</span>Hours
</div>
</div>
<a href="#!">Enroll Today <span class=""><svg xmlns="http://www.w3.org/2000/svg"
width="20" height="20" fill="currentColor" class="bi bi-arrow-right-short"
viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M4 8a.5.5 0 0 1 .5-.5h5.793L8.146 5.354a.5.5 0 1 1 .708-.708l3 3a.5.5 0 0 1 0 .708l-3 3a.5.5 0 0 1-.708-.708L10.293 8.5H4.5A.5.5 0 0 1 4 8z">
</path>
</svg></span></a>
</div>
</div>
</div>
</div>
</div>
</section>Card icon with hover
Browse Category
Discover jobs across popular roles
Select a role and we'll show you relevant jobs for it!
<div class="py-lg-14 bg-light pt-8 pb-8">
<!-- container -->
<div class="container">
<div class="row">
<!-- col -->
<div class="col-md-12 col-12">
<div class="row text-center">
<div class="col-md-12 px-lg-8 mb-8 mt-6">
<!-- text -->
<span class="text-uppercase text-primary fw-semibold ls-md">Browse Category
</span>
<!-- heading -->
<h2 class="h1 fw-bold mt-3">Discover jobs across popular roles
</h2>
<!-- text -->
<p class="mb-0 fs-4">Select a role and we'll show you relevant jobs for it!</p>
</div>
</div>
<div class="row gy-4">
<div class="col-xl-3 col-lg-6 col-md-6 col-12">
<!-- card -->
<div class="card border-top border-muted border-4 card-hover-with-icon">
<!-- card body -->
<div class="card-body">
<!-- icon -->
<div class="icon-shape icon-lg rounded-circle bg-light mb-3 card-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-activity" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M6 2a.5.5 0 0 1 .47.33L10 12.036l1.53-4.208A.5.5 0 0 1 12 7.5h3.5a.5.5 0 0 1 0 1h-3.15l-1.88 5.17a.5.5 0 0 1-.94 0L6 3.964 4.47 8.171A.5.5 0 0 1 4 8.5H.5a.5.5 0 0 1 0-1h3.15l1.88-5.17A.5.5 0 0 1 6 2Z"></path>
</svg></div>
<div class="d-flex align-items-center justify-content-between">
<div>
<!-- heading -->
<h4 class="mb-0">Analtyics</h4>
<!-- text -->
<p class="mb-0 ">2k Jobs</p>
</div>
<!-- arrow -->
<a href="#" class="text-inherit">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-6 col-md-6 col-12">
<!-- card -->
<div class="card border-top border-muted border-4 card-hover-with-icon">
<!-- card body -->
<div class="card-body">
<!-- icon -->
<div class="icon-shape icon-lg rounded-circle bg-light mb-3 card-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-palette" viewBox="0 0 16 16">
<path d="M8 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zm4 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM5.5 7a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm.5 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"></path>
<path d="M16 8c0 3.15-1.866 2.585-3.567 2.07C11.42 9.763 10.465 9.473 10 10c-.603.683-.475 1.819-.351 2.92C9.826 14.495 9.996 16 8 16a8 8 0 1 1 8-8zm-8 7c.611 0 .654-.171.655-.176.078-.146.124-.464.07-1.119-.014-.168-.037-.37-.061-.591-.052-.464-.112-1.005-.118-1.462-.01-.707.083-1.61.704-2.314.369-.417.845-.578 1.272-.618.404-.038.812.026 1.16.104.343.077.702.186 1.025.284l.028.008c.346.105.658.199.953.266.653.148.904.083.991.024C14.717 9.38 15 9.161 15 8a7 7 0 1 0-7 7z"></path>
</svg></div>
<div class="d-flex align-items-center justify-content-between">
<div>
<!-- heading -->
<h4 class="mb-0">UI / UX Design</h4>
<!-- text -->
<p class="mb-0 ">1k Jobs</p>
</div>
<!-- icon -->
<a href="#" class="text-inherit">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-6 col-md-6 col-12">
<!-- card -->
<div class="card border-top border-muted border-4 card-hover-with-icon">
<!-- card body -->
<div class="card-body">
<div class="icon-shape icon-lg rounded-circle bg-light mb-3 card-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-code-slash" viewBox="0 0 16 16">
<path d="M10.478 1.647a.5.5 0 1 0-.956-.294l-4 13a.5.5 0 0 0 .956.294l4-13zM4.854 4.146a.5.5 0 0 1 0 .708L1.707 8l3.147 3.146a.5.5 0 0 1-.708.708l-3.5-3.5a.5.5 0 0 1 0-.708l3.5-3.5a.5.5 0 0 1 .708 0zm6.292 0a.5.5 0 0 0 0 .708L14.293 8l-3.147 3.146a.5.5 0 0 0 .708.708l3.5-3.5a.5.5 0 0 0 0-.708l-3.5-3.5a.5.5 0 0 0-.708 0z"></path>
</svg></div>
<div class="d-flex align-items-center justify-content-between">
<div>
<!-- heading -->
<h4 class="mb-0">Developer</h4>
<!-- text -->
<p class="mb-0 ">800 Jobs</p>
</div>
<a href="#" class="text-inherit">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-6 col-md-6 col-12">
<!-- card -->
<div class="card border-top border-muted border-4 card-hover-with-icon">
<!-- card body -->
<div class="card-body">
<!-- icon -->
<div class="icon-shape icon-lg rounded-circle bg-light mb-3 card-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-people" viewBox="0 0 16 16">
<path d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8zm-7.978-1A.261.261 0 0 1 7 12.996c.001-.264.167-1.03.76-1.72C8.312 10.629 9.282 10 11 10c1.717 0 2.687.63 3.24 1.276.593.69.758 1.457.76 1.72l-.008.002a.274.274 0 0 1-.014.002H7.022zM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816zM4.92 10A5.493 5.493 0 0 0 4 13H1c0-.26.164-1.03.76-1.724.545-.636 1.492-1.256 3.16-1.275zM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"></path>
</svg></div>
<div class="d-flex align-items-center justify-content-between">
<div>
<!-- heading -->
<h4 class="mb-0">Product Manager</h4>
<!-- text -->
<p class="mb-0 ">1.2K Jobs</p>
</div>
<!-- icon -->
<a href="#" class="text-inherit">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-6 col-md-6 col-12">
<!-- card -->
<div class="card border-top border-muted border-4 card-hover-with-icon">
<!-- card body -->
<div class="card-body">
<div class="icon-shape icon-lg rounded-circle bg-light mb-3 card-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"></path>
</svg></div>
<div class="d-flex align-items-center justify-content-between">
<div>
<!-- heading -->
<h4 class="mb-0">SEO</h4>
<!-- text -->
<p class="mb-0 ">1200 Jobs</p>
</div>
<!-- icon -->
<a href="#" class="text-inherit">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-6 col-md-6 col-12">
<!-- card -->
<div class="card border-top border-muted border-4 card-hover-with-icon">
<!-- card body -->
<div class="card-body">
<!-- icon -->
<div class="icon-shape icon-lg rounded-circle bg-light mb-3 card-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-bar-chart" viewBox="0 0 16 16">
<path d="M4 11H2v3h2v-3zm5-4H7v7h2V7zm5-5v12h-2V2h2zm-2-1a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1h-2zM6 7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V7zm-5 4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1v-3z"></path>
</svg></div>
<div class="d-flex align-items-center justify-content-between">
<div>
<!-- heading -->
<h4 class="mb-0">Data Analytics</h4>
<p class="mb-0 ">200 Jobs</p>
</div>
<!-- icon -->
<a href="#" class="text-inherit">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-6 col-md-6 col-12">
<!-- card -->
<div class="card border-top border-muted border-4 card-hover-with-icon ">
<!-- card body -->
<div class="card-body">
<div class="icon-shape icon-lg rounded-circle bg-light mb-3 card-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-phone" viewBox="0 0 16 16">
<path d="M11 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h6zM5 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H5z"></path>
<path d="M8 14a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"></path>
</svg></div>
<div class="d-flex align-items-center justify-content-between">
<div>
<!-- heading -->
<h4 class="mb-0">Mobile Developer
</h4>
<!-- text -->
<p class="mb-0 ">120 Jobs</p>
</div>
<a href="#" class="text-inherit">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-6 col-md-6 col-12">
<!-- card -->
<div class="card border-top border-muted border-4 card-hover-with-icon">
<!-- card body -->
<div class="card-body">
<!-- icon -->
<div class="icon-shape icon-lg rounded-circle bg-light mb-3 card-icon"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-bank" viewBox="0 0 16 16">
<path d="M8 .95 14.61 4h.89a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5H15v7a.5.5 0 0 1 .485.379l.5 2A.5.5 0 0 1 15.5 17H.5a.5.5 0 0 1-.485-.621l.5-2A.5.5 0 0 1 1 14V7H.5a.5.5 0 0 1-.5-.5v-2A.5.5 0 0 1 .5 4h.89L8 .95zM3.776 4h8.447L8 2.05 3.776 4zM2 7v7h1V7H2zm2 0v7h2.5V7H4zm3.5 0v7h1V7h-1zm2 0v7H12V7H9.5zM13 7v7h1V7h-1zm2-1V5H1v1h14zm-.39 9H1.39l-.25 1h13.72l-.25-1z"></path>
</svg></div>
<div class="d-flex align-items-center justify-content-between">
<div>
<!-- heading -->
<h4 class="mb-0">Finance
</h4>
<!-- text -->
<p class="mb-0 ">5k Jobs</p>
</div>
<div>
<!-- icon -->
<a href="#" class="text-inherit">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- button -->
<div class="col-12 mt-8 text-center">
<a href="#" class="btn btn-outline-primary">View All Category</a>
</div>
</div>
</div>
</div>
</div>
</div>Card Thumbnail V2
<div class="py-8">
<div class="container">
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<!-- Card -->
<div class="card card-hover">
<a href="../course-single.html"><img
src="../assets/images/course/course-javascript.jpg" alt=""
class=" card-img-top"></a>
<!-- Card Body -->
<div class="card-body">
<div class="d-flex justify-content-between align-items-center mb-3">
<span class="badge bg-info-soft">Intermediate</span>
<a href="#" class=" fs-5"><i class="fe fe-heart align-middle"></i></a>
</div>
<h4 class="mb-2 text-truncate-line-2 "><a href="../course-single.html"
class="text-inherit">How to
easily create a website with JavaScript </a></h4>
<small>By: Claire Evans</small>
<div class="mt-3 d-flex align-baseline lh-1">
<span class="fs-6">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>
</span>
<span class="text-warning mx-1">4.5</span>
<span class="fs-6 ">(9,300)</span>
</div>
</div>
<!-- Card Footer -->
<div class="card-footer">
<div class="row align-items-center g-0">
<div class="col">
<h5 class="mb-0">$39.00</h5>
</div>
<div class="col-auto">
<a href="#" class="text-inherit">
<i class="fe fe-shopping-cart text-primary align-middle me-2"></i>Get Enrolled
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<!-- Card -->
<div class="card card-hover">
<a href="../course-single.html"><img
src="../assets/images/course/course-css.jpg" alt=""
class="card-img-top "></a>
<!-- Card Body -->
<div class="card-body">
<div class="d-flex justify-content-between align-items-center mb-3">
<span class="badge bg-danger-soft">Beginner</span>
<a href="#" class=" fs-5"><i class="fe fe-heart align-middle"></i></a>
</div>
<h4 class="mb-2 text-truncate-line-2 "><a href="../course-single.html"
class="text-inherit">CSS:
ultimate CSS course from beginner to advanced</a></h4>
<small>By: Carolyn Welborn</small>
<div class="mt-3 d-flex align-baseline lh-1">
<span class="fs-6">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>
</span>
<span class="text-warning mx-1">4.5</span>
<span class="fs-6 ">(8,890)</span>
</div>
</div>
<!-- Card Footer -->
<div class="card-footer">
<div class="row align-items-center g-0">
<div class="col">
<h5 class="mb-0">$30.00</h5>
</div>
<div class="col-auto">
<a href="#" class="text-inherit">
<i class="fe fe-shopping-cart text-primary align-middle me-2"></i>Get Enrolled
</a>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<!-- Card -->
<div class="card card-hover">
<a href="../course-single.html"><img
src="../assets/images/course/course-gatsby.jpg" alt=""
class="card-img-top "></a>
<!-- Card Body -->
<div class="card-body">
<div class="d-flex justify-content-between align-items-center mb-3">
<span class="badge bg-info-soft">Intermediate</span>
<a href="#" class=" fs-5"><i class="fe fe-heart align-middle"></i></a>
</div>
<h4 class="mb-2 text-truncate-line-2 "><a href="../course-single.html"
class="text-inherit">The
Gatsby
Course: build web application</a></h4>
<small>By: Floyd Amall</small>
<div class="mt-3 d-flex align-baseline lh-1">
<span class="fs-6">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>
</span>
<span class="text-warning mx-1">4.5</span>
<span class="fs-6 ">(8,890)</span>
</div>
</div>
<!-- Card Footer -->
<div class="card-footer">
<div class="row align-items-center g-0">
<div class="col">
<h5 class="mb-0">$34.00</h5>
</div>
<div class="col-auto">
<a href="#" class="text-inherit">
<i class="fe fe-shopping-cart text-primary align-middle me-2"></i>Get Enrolled
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Card 2 Column
Course Description
What will you learn?
Vanilla JS is a fast, lightweight, cross-platformframework for building incredible, powerful JavaScript applications.
Introduction to JavaScript Free
Courses - 1 6 Lessons 1 Hour 12 Min
In et tempus dui, in porta dolor. Donec molestie a purus ut interdum. Donec quis felis dignissim, luctus libero ornare.
View Chapter Details
JavaScript Beginning
Courses - 2 4 Lessons 32 Min
Malesuada fames ac turpis egesta mpor tempus tincidunt. Aliquam congue lacus ac tellus consectetur malesuada.
View Chapter Details
Variables and Constants
Courses - 3 8 Lessons 10 Min
Aliquam pulvinar eros a dictur vitae diam imperdiet, ornare turpis vequet elit nec, imperdiet lectuna liquam qs.
View Chapter Details
Types and Operators
Courses - 4 10 Lessons 32 Min
In lobortis quam eu augue spendisse imperdiet nec orci ipsum, tempus pharetra posuere imperdiet, lacinia a nisl.
View Chapter Details<div class="py-8 bg-light">
<div class="container">
<div class="row mb-8 justify-content-center">
<div class="col-lg-8 col-md-12 col-12 text-center">
<!-- caption -->
<span class="text-primary mb-3 d-block text-uppercase fw-semibold ls-xl">Course Description</span>
<h2 class="mb-2 display-4 fw-bold">What will you learn?</h2>
<p class="lead">
Vanilla JS is a fast, lightweight, cross-platformframework for building incredible, powerful JavaScript applications.
</p>
</div>
</div>
<!-- row -->
<div class="row">
<div class="col-lg-6 col-md-12 col-12">
<!-- Features -->
<div class="card mb-4">
<!-- Card body -->
<div class="card-body p-6">
<div class="d-md-flex mb-4">
<div class="mb-3 mb-md-0">
<!-- Img -->
<img
src="../assets/images/svg/feature-icon-1.svg"
alt="icon"
class="bg-primary icon-shape icon-xxl rounded-circle">
</div>
<!-- Content -->
<div class="ms-md-4">
<h2 class="fw-bold mb-1">
Introduction to JavaScript
<span class="badge bg-warning ms-2">Free</span>
</h2>
<p class="text-uppercase fs-6 fw-semibold mb-0">
<span class="text-dark">Courses - 1</span>
<span class="ms-3">6 Lessons</span>
<span class="ms-3">1 Hour 12 Min</span>
</p>
</div>
</div>
<p class="mb-4 fs-4">
In et tempus dui, in porta dolor. Donec molestie a purus ut interdum. Donec quis felis dignissim, luctus libero ornare.
</p>
<a href="#" class="btn-link" data-bs-toggle="modal" data-bs-target="#courseModal">
View Chapter Details
<i class="fe fe-plus"></i>
</a>
</div>
</div>
</div>
<div class="col-lg-6 col-md-12 col-12">
<!-- features -->
<div class="card mb-4">
<div class="card-body p-6">
<div class="d-md-flex mb-4">
<div class="mb-3 mb-md-0">
<img
src="../assets/images/svg/feature-icon-2.svg"
alt="icon"
class="bg-primary icon-shape icon-xxl rounded-circle">
</div>
<div class="ms-md-4">
<h2 class="fw-bold mb-1">JavaScript Beginning</h2>
<p class="text-uppercase fs-6 fw-semibold mb-0">
<span class="text-dark">Courses - 2</span>
<span class="ms-3">4 Lessons</span>
<span class="ms-3">32 Min</span>
</p>
</div>
</div>
<p class="mb-4 fs-4">
Malesuada fames ac turpis egesta mpor tempus tincidunt. Aliquam congue lacus ac tellus consectetur malesuada.
</p>
<a href="#" class="btn-link" data-bs-toggle="modal" data-bs-target="#courseModal">
View Chapter Details
<i class="fe fe-plus"></i>
</a>
</div>
</div>
</div>
<div class="col-lg-6 col-md-12 col-12">
<!-- features -->
<div class="card mb-4">
<div class="card-body p-6">
<div class="d-md-flex mb-4">
<div class="mb-3 mb-md-0">
<img
src="../assets/images/svg/feature-icon-3.svg"
alt="icon"
class="bg-primary icon-shape icon-xxl rounded-circle">
</div>
<div class="ms-md-4">
<h2 class="fw-bold mb-1">Variables and Constants</h2>
<p class="text-uppercase fs-6 fw-semibold mb-0">
<span class="text-dark">Courses - 3</span>
<span class="ms-3">8 Lessons</span>
<span class="ms-3">10 Min</span>
</p>
</div>
</div>
<p class="mb-4 fs-4">
Aliquam pulvinar eros a dictur vitae diam imperdiet, ornare turpis vequet elit nec, imperdiet lectuna liquam qs.
</p>
<a href="#" class="btn-link" data-bs-toggle="modal" data-bs-target="#courseModal">
View Chapter Details
<i class="fe fe-plus"></i>
</a>
</div>
</div>
</div>
<div class="col-lg-6 col-md-12 col-12">
<!-- features -->
<div class="card mb-4">
<div class="card-body p-6">
<div class="d-md-flex mb-4">
<div class="mb-3 mb-md-0">
<img
src="../assets/images/svg/feature-icon-4.svg"
alt="icon"
class="bg-primary icon-shape icon-xxl rounded-circle">
</div>
<div class="ms-md-4">
<h2 class="fw-bold mb-1">Types and Operators</h2>
<p class="text-uppercase fs-6 fw-semibold mb-0">
<span class="text-dark">Courses - 4</span>
<span class="ms-3">10 Lessons</span>
<span class="ms-3">32 Min</span>
</p>
</div>
</div>
<p class="mb-4 fs-4">
In lobortis quam eu augue spendisse imperdiet nec orci ipsum, tempus pharetra posuere imperdiet, lacinia a nisl.
</p>
<a href="#" class="btn-link" data-bs-toggle="modal" data-bs-target="#courseModal">
View Chapter Details
<i class="fe fe-plus"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>Card with Icon
Make Education Accessible
Quis cursus turpis in habitant sagittis amet dolor malesuada ut. Volutpat nunc id blanvolutpat nunc.
Learn and Grow
Quis cursus turpis in habitant sagittis amet dolor malesuada ut. Volutpat nunc id blanvolutpat nunc.
Make Education Accessible
Quis cursus turpis in habitant sagittis amet dolor malesuada ut. Volutpat nunc id blanvolutpat nunc.
<div class="container">
<div class="row">
<div class="col-md-4 col-12">
<!-- card -->
<div class="card mb-4 mb-lg-0">
<!-- card body -->
<div class="card-body p-5">
<!-- icon -->
<div class="mb-3"><svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"
fill="currentColor" class="bi bi-mortarboard text-primary" viewBox="0 0 16 16">
<path
d="M8.211 2.047a.5.5 0 0 0-.422 0l-7.5 3.5a.5.5 0 0 0 .025.917l7.5 3a.5.5 0 0 0 .372 0L14 7.14V13a1 1 0 0 0-1 1v2h3v-2a1 1 0 0 0-1-1V6.739l.686-.275a.5.5 0 0 0 .025-.917l-7.5-3.5ZM8 8.46 1.758 5.965 8 3.052l6.242 2.913L8 8.46Z" />
<path
d="M4.176 9.032a.5.5 0 0 0-.656.327l-.5 1.7a.5.5 0 0 0 .294.605l4.5 1.8a.5.5 0 0 0 .372 0l4.5-1.8a.5.5 0 0 0 .294-.605l-.5-1.7a.5.5 0 0 0-.656-.327L8 10.466 4.176 9.032Zm-.068 1.873.22-.748 3.496 1.311a.5.5 0 0 0 .352 0l3.496-1.311.22.748L8 12.46l-3.892-1.556Z" />
</svg></div>
<h3 class="mb-2">Make Education Accessible</h3>
<p class="mb-0">Quis cursus turpis in habitant sagittis amet dolor malesuada ut.
Volutpat nunc id
blanvolutpat nunc.</p>
</div>
</div>
</div>
<div class="col-md-4 col-12">
<!-- card -->
<div class="card mb-4 mb-lg-0">
<!-- card body -->
<div class="card-body p-5">
<!-- icon -->
<div class="mb-3">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="currentColor"
class="bi bi-people-fill text-primary" viewBox="0 0 16 16">
<path
d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1H7Zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm-5.784 6A2.238 2.238 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.325 6.325 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1h4.216ZM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5Z" />
</svg>
</div>
<h3 class="mb-2">Learn and Grow</h3>
<p class="mb-0">Quis cursus turpis in habitant sagittis amet dolor malesuada ut.
Volutpat nunc id
blanvolutpat nunc.</p>
</div>
</div>
</div>
<div class="col-md-4 col-12">
<!-- card -->
<div class="card mb-4 mb-lg-0">
<!-- card body -->
<div class="card-body p-5">
<!-- icon -->
<div class="mb-3"><svg xmlns="http://www.w3.org/2000/svg" width="40" height="40"
fill="currentColor" class="bi bi-graph-up-arrow text-primary" viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M0 0h1v15h15v1H0V0Zm10 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V4.9l-3.613 4.417a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61L13.445 4H10.5a.5.5 0 0 1-.5-.5Z" />
</svg></div>
<h3 class="mb-2">Make Education Accessible</h3>
<p class="mb-0">Quis cursus turpis in habitant sagittis amet dolor malesuada ut.
Volutpat nunc id
blanvolutpat nunc.</p>
</div>
</div>
</div>
</div>
</div>List groups
Create lists of content in a card with a flush list group.
<div class="card" id="courseAccordion">
<!-- List group -->
<ul class="list-group list-group-flush">
<li class="list-group-item p-0 bg-transparent">
<!-- Toggle -->
<a class="d-flex align-items-center text-inherit py-3 px-4"
data-bs-toggle="collapse" href="#courseTwo" role="button" aria-expanded="false"
aria-controls="courseTwo">
<div class="me-auto">
<h4 class="mb-0">Course Overview</h4>
<p class="mb-0 ">14 videos (1 hour and 17 minutes)</p>
</div>
<!-- Chevron -->
<span class="chevron-arrow ms-4">
<i class="fe fe-chevron-down fs-4"></i>
</span>
</a>
<!-- / .row -->
<!-- Collapse -->
<div class="collapse show" id="courseTwo" data-bs-parent="#courseAccordion">
<!-- List group -->
<ul class="list-group list-group-flush">
<li class="list-group-item">
<div>
<div class="progress" style="height: 6px;">
<div class="progress-bar bg-success" role="progressbar" style="width: 10%;"
aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<small>5% Completed</small>
</div>
</li>
<!-- List group -->
<li class="list-group-item">
<a href="#"
class="d-flex justify-content-between align-items-center text-inherit ">
<div class="text-truncate">
<span
class="icon-shape bg-success text-white icon-sm rounded-circle me-2"><svg
xmlns="http://www.w3.org/2000/svg" width="14" height="14"
fill="currentColor" class="bi bi-play-fill" viewBox="0 0 16 16">
<path
d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z" />
</svg></span>
<span>Introduction</span>
</div>
<div class="text-truncate">
<span>1m 7s</span>
</div>
</a>
</li>
<!-- List group -->
<li class="list-group-item list-group-item-action active">
<a href="#"
class="d-flex justify-content-between align-items-center text-white ">
<div class="text-truncate">
<span
class="icon-shape bg-light text-primary icon-sm rounded-circle me-2"><svg
xmlns="http://www.w3.org/2000/svg" width="14" height="14"
fill="currentColor" class="bi bi-play-fill" viewBox="0 0 16 16">
<path
d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z" />
</svg></span>
<span>Installing Development
Software</span>
</div>
<div class="text-truncate">
<span>3m 11s</span>
</div>
</a>
</li>
<!-- List group -->
<li class="list-group-item">
<a href="#"
class="d-flex justify-content-between align-items-center text-inherit ">
<div class="text-truncate">
<span
class="icon-shape bg-light text-primary icon-sm rounded-circle me-2"><svg
xmlns="http://www.w3.org/2000/svg" width="14" height="14"
fill="currentColor" class="bi bi-play-fill" viewBox="0 0 16 16">
<path
d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z" />
</svg></span>
<span>Hello World Project from
GitHub</span>
</div>
<div class="text-truncate">
<span>2m 33s</span>
</div>
</a>
</li>
<!-- List group -->
<li class="list-group-item disabled" aria-disabled="true">
<a href="#"
class="d-flex justify-content-between align-items-center text-inherit ">
<div class="text-truncate">
<span class="icon-shape bg-light icon-sm rounded-circle me-2"><i
class="fe fe-lock fs-4"></i></span>
<span>Our Sample Website</span>
</div>
<div class="text-truncate">
<span>2m 15s</span>
</div>
</a>
</li>
</ul>
</div>
</li>
<li class="list-group-item p-0">
<!-- Toggle -->
<a class="d-flex align-items-center text-inherit py-3 px-4"
data-bs-toggle="collapse" href="#courseThree" role="button" aria-expanded="false"
aria-controls="courseThree">
<div class="me-auto">
<!-- Title -->
<h4 class="mb-0">JavaScript Beginning</h4>
<p class="mb-0 ">6 videos (34 minutes)
</p>
</div>
<!-- Chevron -->
<span class="chevron-arrow ms-4">
<i class="fe fe-chevron-down fs-4"></i>
</span>
</a>
<!-- / .row -->
<!-- Collapse -->
<div class="collapse" id="courseThree" data-bs-parent="#courseAccordion">
<!-- List group item -->
<ul class="list-group list-group-flush">
<li class="list-group-item disabled" aria-disabled="true">
<div>
<div class="progress" style="height: 6px;">
<div class="progress-bar bg-success" role="progressbar" style="width: 25%;"
aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<small>25% Completed</small>
</div>
</li>
<!-- List group item -->
<li class="list-group-item disabled" aria-disabled="true">
<a href="#"
class="d-flex justify-content-between align-items-center text-inherit ">
<div class="text-truncate">
<span
class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i
class="fe fe-lock fs-4"></i></span>
<span>Introduction</span>
</div>
<div class="text-truncate">
<span>1m 41s</span>
</div>
</a>
</li>
<!-- List group item -->
<li class="list-group-item disabled" aria-disabled="true">
<a href="#"
class="d-flex justify-content-between align-items-center text-inherit ">
<div class="text-truncate">
<span
class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i
class="fe fe-lock fs-4"></i></span>
<span>Adding JavaScript Code to
a Web Page</span>
</div>
<div class="text-truncate">
<span>3m 39s</span>
</div>
</a>
</li>
<!-- List group item -->
<li class="list-group-item disabled" aria-disabled="true">
<a href="#"
class="d-flex justify-content-between align-items-center text-inherit ">
<div class="text-truncate">
<span
class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i
class="fe fe-lock fs-4"></i></span>
<span> Working with JavaScript
Files </span>
</div>
<div class="text-truncate">
<span>6m 18s</span>
</div>
</a>
</li>
<!-- List group item -->
<li class="list-group-item disabled" aria-disabled="true">
<a href="#"
class="d-flex justify-content-between align-items-center text-inherit ">
<div class="text-truncate">
<span
class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i
class="fe fe-lock fs-4"></i></span>
<span>Formatting Code </span>
</div>
<div class="text-truncate">
<span>2m 18s</span>
</div>
</a>
</li>
<!-- List group item -->
<li class="list-group-item disabled" aria-disabled="true">
<a href="#"
class="d-flex justify-content-between align-items-center text-inherit ">
<div class="text-truncate">
<span
class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i
class="fe fe-lock fs-4"></i></span>
<span> Detecting and Fixing
Errors </span>
</div>
<div class="text-truncate">
<span>3m 14s</span>
</div>
</a>
</li>
<!-- List group item -->
<li class="list-group-item disabled" aria-disabled="true">
<a href="#"
class="d-flex justify-content-between align-items-center text-inherit ">
<div class="text-truncate">
<span
class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i
class="fe fe-lock fs-4"></i></span>
<span>Case Sensitivity </span>
</div>
<div class="text-truncate">
<span>1m 48s</span>
</div>
</a>
</li>
<li class="list-group-item disabled" aria-disabled="true">
<a href="#"
class="d-flex justify-content-between align-items-center text-inherit ">
<div class="text-truncate">
<span
class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i
class="fe fe-lock fs-4"></i></span>
<span>Commenting Code </span>
</div>
<div class="text-truncate">
<span>2m 24s</span>
</div>
</a>
</li>
<!-- List group item -->
<li class="list-group-item disabled" aria-disabled="true">
<a href="#"
class="d-flex justify-content-between align-items-center text-inherit ">
<div class="text-truncate">
<span
class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i
class="fe fe-lock fs-4"></i></span>
<span>Summary</span>
</div>
<div class="text-truncate">
<span>2m 14s</span>
</div>
</a>
</li>
</ul>
</div>
</li>
<li class="list-group-item p-0">
<!-- Toggle -->
<a class="d-flex align-items-center text-inherit py-3 px-4"
data-bs-toggle="collapse" href="#courseFour" role="button" aria-expanded="false"
aria-controls="courseFour">
<div class="me-auto">
<!-- Title -->
<h4 class="mb-0">Variables and Constants
</h4>
<p class="mb-0 ">6 videos (3 hour and 24 minutes)</p>
</div>
<!-- Chevron -->
<span class="chevron-arrow ms-4">
<i class="fe fe-chevron-down fs-4"></i>
</span>
</a>
<!-- / .row -->
<!-- Collapse -->
<div class="collapse" id="courseFour" data-bs-parent="#courseAccordion">
<!-- List group -->
<ul class="list-group list-group-flush">
<li class="list-group-item disabled" aria-disabled="true">
<div>
<div class="progress" style="height: 6px;">
<div class="progress-bar bg-success" role="progressbar" style="width: 0%;"
aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<small>0% Completed</small>
</div>
</li>
<!-- List group item -->
<li class="list-group-item disabled" aria-disabled="true">
<a href="#"
class="d-flex justify-content-between align-items-center text-inherit ">
<div class="text-truncate">
<span
class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i
class="fe fe-lock fs-4"></i></span>
<span>Introduction</span>
</div>
<div class="text-truncate">
<span>1m 19s</span>
</div>
</a>
</li>
<!-- List group item -->
<li class="list-group-item disabled" aria-disabled="true">
<a href="#"
class="d-flex justify-content-between align-items-center text-inherit ">
<div class="text-truncate">
<span
class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i
class="fe fe-lock fs-4"></i></span>
<span>What Is a Variable?</span>
</div>
<div class="text-truncate">
<span>2m 11s</span>
</div>
</a>
</li>
<!-- List group item -->
<li class="list-group-item disabled" aria-disabled="true">
<a href="#"
class="d-flex justify-content-between align-items-center text-inherit ">
<div class="text-truncate">
<span
class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i
class="fe fe-lock fs-4"></i></span>
<span>Declaring Variables
</span>
</div>
<div class="text-truncate">
<span>2m 30s</span>
</div>
</a>
</li>
<!-- List group item -->
<li class="list-group-item disabled" aria-disabled="true">
<a href="#"
class="d-flex justify-content-between align-items-center text-inherit ">
<div class="text-truncate">
<span
class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i
class="fe fe-lock fs-4"></i></span>
<span>Using let to Declare
Variables </span>
</div>
<div class="text-truncate">
<span>3m 28s</span>
</div>
</a>
</li>
<!-- List group item -->
<li class="list-group-item disabled" aria-disabled="true">
<a href="#"
class="d-flex justify-content-between align-items-center text-inherit ">
<div class="text-truncate">
<span
class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i
class="fe fe-lock fs-4"></i></span>
<span>Naming Variables </span>
</div>
<div class="text-truncate">
<span>3m 14s</span>
</div>
</a>
</li>
<!-- List group item -->
<li class="list-group-item disabled" aria-disabled="true">
<a href="#"
class="d-flex justify-content-between align-items-center text-inherit ">
<div class="text-truncate">
<span
class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i
class="fe fe-lock fs-4"></i></span>
<span>Common Errors Using
Variables </span>
</div>
<div class="text-truncate">
<span>3m 30s</span>
</div>
</a>
</li>
<!-- List group item -->
<li class="list-group-item disabled" aria-disabled="true">
<a href="#"
class="d-flex justify-content-between align-items-center text-inherit ">
<div class="text-truncate">
<span
class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i
class="fe fe-lock fs-4"></i></span>
<span>Changing Variable Values
</span>
</div>
<div class="text-truncate">
<span>2m 4s</span>
</div>
</a>
</li>
<!-- List group item -->
<li class="list-group-item disabled" aria-disabled="true">
<a href="#"
class="d-flex justify-content-between align-items-center text-inherit ">
<div class="text-truncate">
<span
class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i
class="fe fe-lock fs-4"></i></span>
<span>Constants </span>
</div>
<div class="text-truncate">
<span>3m 15s</span>
</div>
</a>
</li>
<!-- List group item -->
<li class="list-group-item disabled" aria-disabled="true">
<a href="#"
class="d-flex justify-content-between align-items-center text-inherit ">
<div class="text-truncate">
<span
class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i
class="fe fe-lock fs-4"></i></span>
<span>The var Keyword </span>
</div>
<div class="text-truncate">
<span>2m 20s</span>
</div>
</a>
</li>
<!-- List group item -->
<li class="list-group-item disabled" aria-disabled="true">
<a href="#"
class="d-flex justify-content-between align-items-center text-inherit ">
<div class="text-truncate">
<span
class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i
class="fe fe-lock fs-4"></i></span>
<span>Summary</span>
</div>
<div class="text-truncate">
<span>1m 49s</span>
</div>
</a>
</li>
</ul>
</div>
</li>
<li class="list-group-item p-0">
<!-- Toggle -->
<a class="d-flex align-items-center text-inherit py-3 px-4"
data-bs-toggle="collapse" href="#courseSix" role="button" aria-expanded="false"
aria-controls="courseSix">
<div class="me-auto">
<!-- Title -->
<h4 class="mb-0">Program Flow</h4>
<p class="mb-0 ">5 videos (2 hour and 10 minutes)</p>
</div>
<!-- Chevron -->
<span class="chevron-arrow ms-4">
<i class="fe fe-chevron-down fs-4"></i>
</span>
</a>
<!-- / .row -->
<!-- Collapse -->
<div class="collapse" id="courseSix" data-bs-parent="#courseAccordion">
<!-- List group -->
<ul class="list-group list-group-flush">
<li class="list-group-item disabled" aria-disabled="true">
<div>
<div class="progress" style="height: 6px;">
<div class="progress-bar bg-success" role="progressbar" style="width: 0%;"
aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<small>0% Completed</small>
</div>
</li>
<!-- List group item -->
<li class="list-group-item disabled" aria-disabled="true">
<a href="#"
class="d-flex justify-content-between align-items-center text-inherit ">
<div class="text-truncate">
<span
class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i
class="fe fe-lock fs-4"></i></span>
<span>Introduction</span>
</div>
<div class="text-truncate">
<span>1m 52s</span>
</div>
</a>
</li>
<!-- List group item -->
<li class="list-group-item disabled" aria-disabled="true">
<a href="#"
class="d-flex justify-content-between align-items-center text-inherit ">
<div class="text-truncate">
<span
class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i
class="fe fe-lock fs-4"></i></span>
<span>Clip Watched </span>
</div>
<div class="text-truncate">
<span>4m 27s</span>
</div>
</a>
</li>
<!-- List group item -->
<li class="list-group-item disabled" aria-disabled="true">
<a href="#"
class="d-flex justify-content-between align-items-center text-inherit ">
<div class="text-truncate">
<span
class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i
class="fe fe-lock fs-4"></i></span>
<span>Conditionals Using if()
</span>
</div>
<div class="text-truncate">
<span>4m 25s</span>
</div>
</a>
</li>
<!-- List group item -->
<li class="list-group-item disabled" aria-disabled="true">
<a href="#"
class="d-flex justify-content-between align-items-center text-inherit ">
<div class="text-truncate">
<span
class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i
class="fe fe-lock fs-4"></i></span>
<span>Truthy and Falsy</span>
</div>
<div class="text-truncate">
<span>3m 30s</span>
</div>
</a>
</li>
<!-- List group item -->
<li class="list-group-item disabled" aria-disabled="true">
<a href="#"
class="d-flex justify-content-between align-items-center text-inherit ">
<div class="text-truncate">
<span
class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i
class="fe fe-lock fs-4"></i></span>
<span>if ... else </span>
</div>
<div class="text-truncate">
<span>3m 30s</span>
</div>
</a>
</li>
<!-- List group item -->
<li class="list-group-item disabled" aria-disabled="true">
<a href="#"
class="d-flex justify-content-between align-items-center text-inherit ">
<div class="text-truncate">
<span
class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i
class="fe fe-lock fs-4"></i></span>
<span>Comparing === and ==
</span>
</div>
<div class="text-truncate">
<span>1m 52s</span>
</div>
</a>
</li>
<!-- List group item -->
<li class="list-group-item disabled" aria-disabled="true">
<a href="#"
class="d-flex justify-content-between align-items-center text-inherit ">
<div class="text-truncate">
<span
class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i
class="fe fe-lock fs-4"></i></span>
<span>The Ternary Operator
</span>
</div>
<div class="text-truncate">
<span>2m 47s</span>
</div>
</a>
</li>
<!-- List group item -->
<li class="list-group-item disabled" aria-disabled="true">
<a href="#"
class="d-flex justify-content-between align-items-center text-inherit ">
<div class="text-truncate">
<span
class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i
class="fe fe-lock fs-4"></i></span>
<span>Block Scope Using let
</span>
</div>
<div class="text-truncate">
<span>2m 21s</span>
</div>
</a>
</li>
<!-- List group item -->
<li class="list-group-item disabled" aria-disabled="true">
<a href="#"
class="d-flex justify-content-between align-items-center text-inherit ">
<div class="text-truncate">
<span
class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i
class="fe fe-lock fs-4"></i></span>
<span>Looping with for() </span>
</div>
<div class="text-truncate">
<span>5m 30s</span>
</div>
</a>
</li>
<!-- List group item -->
<li class="list-group-item disabled" aria-disabled="true">
<a href="#"
class="d-flex justify-content-between align-items-center text-inherit ">
<div class="text-truncate">
<span
class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i
class="fe fe-lock fs-4"></i></span>
<span>Looping with do ...
while() </span>
</div>
<div class="text-truncate">
<span>1m 58s</span>
</div>
</a>
</li>
<!-- List group item -->
<li class="list-group-item disabled" aria-disabled="true">
<a
class="mb-0 d-flex justify-content-between align-items-center text-inherit ">
<div class="text-truncate">
<span
class="icon-shape bg-light text-secondary icon-sm rounded-circle me-2"><i
class="fe fe-lock fs-4"></i></span>
<span>Summary </span>
</div>
<div class="text-truncate">
<span>2m 21s</span>
</div>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>Profile
Jenny Wilson
Front-end Developer, Designer
4.5 Instructor Rating
42 Courses 1,10,124 Students
I start my development and digital career studying digital design. After taking a couple of programming classes I realize that code is what I wanted to be doing.
View Details<div class="col-lg-6 col-md-6 col-12">
<!-- Card -->
<div class="card">
<!-- Card Body -->
<div class="card-body">
<div class="d-lg-flex">
<div class="position-relative">
<img src="../assets/images/avatar/avatar-1.jpg" alt="" class="rounded-circle
avatar-xl mb-3 mb-lg-0 ">
<a href="#" class="position-absolute mt-2 ms-n3" data-bs-toggle="tooltip"
data-placement="top" title="Verifed">
<img src="../assets/images/svg/checked-mark.svg" alt="" height="30"
width="30">
</a>
</div>
<div class="ms-lg-4">
<h4 class="mb-0">Jenny Wilson</h4>
<p class="mb-0 fs-6">Front-end Developer, Designer</p>
<p class="fs-6 mb-1 d-flex align-items-center">
<span class=" text-warning">4.5</span><span class="mx-1">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12"
fill="currentColor" class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>
</span>Instructor Rating
</p>
<p class="fs-6 "><span class="me-2"><span
class="text-dark fw-medium">42</span> Courses
</span><span class="ms-2"><span class="text-dark fw-medium">1,10,124
</span> Students
</span>
</p>
<p>I start my development and digital career studying digital design. After taking a
couple of programming classes I realize that code is what I wanted to be doing, so
I start learning
by myself. </p>
<a href="#" class="btn btn-outline-secondary btn-sm">
View Details
</a>
</div>
</div>
</div>
</div>
</div>Card
<div class="card card-hover">
<div
class="d-flex justify-content-between align-items-center p-4">
<div class="d-flex">
<a href="course-path-single.html"> <img
src="../assets/images/path/path-bootstrap.svg" alt=""
class="avatar-md"></a>
<div class="ms-3">
<h4 class="mb-1">
<a href="course-path-single.html"
class="text-inherit">
</a>
Bootstrap
</h4>
<p class="mb-0 fs-6"> <span
class="me-2"><span
class="text-dark fw-medium">12</span>
Courses</span>
<span><span
class="text-dark fw-medium">34
</span> Hours</span>
</p>
</div>
</div>
</div>
</div>Card Course Horizontal
<!-- Card body -->
<div class="card-body">
<h3 class="mb-2 text-truncate-line-2 "><a href="#" class="text-inherit">Bootstrap 5 Beginner
Tutorial</a></h3>
<!-- List inline -->
<ul class="mb-5 list-inline">
<li class="list-inline-item"><span class="">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor"
class="bi bi-clock align-baseline" viewBox="0 0 16 16">
<path
d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z" />
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z" />
</svg>
</span><span>2h
46m</span>
</li>
<li class="list-inline-item"><svg class="me-1 mt-n1" width="16" height="16"
viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="3" y="8" width="2" height="6" rx="1" fill="#754FFE">
</rect>
<rect x="7" y="5" width="2" height="9" rx="1" fill="#754FFE">
</rect>
<rect x="11" y="2" width="2" height="12" rx="1" fill="#754FFE">
</rect>
</svg>Advance </li>
<li class="list-inline-item">
<span class="align-top lh-1">
<span class="fs-6 ">
<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" fill="currentColor"
class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" fill="currentColor"
class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" fill="currentColor"
class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" fill="currentColor"
class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" fill="currentColor"
class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
</svg>
</span>
</span>
<span class="text-warning">4.5</span>
<span class="fs-6 ">(7,900)</span>
</li>
</ul>
<!-- Row -->
<div class="row align-items-center g-0">
<div class="col-auto">
<img src="../assets/images/avatar/avatar-2.jpg" class="rounded-circle avatar-xs" alt="">
</div>
<div class="col ms-2">
<span>Ted Hawkins</span>
</div>
<div class="col-auto">
<a href="#" class=" bookmark">
<i class="fe fe-bookmark fs-4 "></i>
</a>
</div>
</div>
<div>
</div>
</div>Card Course Thumbnail
<!-- Card -->
<div class="card mb-4 card-hover">
<a href="#"><img src="../assets/images/course/course-bootstrap.jpg" alt="course"
class="card-img-top"></a>
<!-- Card body -->
<div class="card-body">
<h3 class="h4 mb-2 text-truncate-line-2 "><a href="#" class="text-inherit">An Ultimate
Guide for
Beginners Bootstrap 5</a>
</h3>
<!-- List inline -->
<ul class="mb-3 list-inline">
<li class="list-inline-item"><span class="">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor"
class="bi bi-clock align-baseline" viewBox="0 0 16 16">
<path
d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z" />
<path
d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z" />
</svg>
</span><span>3h
56m</span>
</li>
<li class="list-inline-item"><svg class="me-1 mt-n1" width="16" height="16"
viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="3" y="8" width="2" height="6" rx="1" fill="#754FFE">
</rect>
<rect x="7" y="5" width="2" height="9" rx="1" fill="#DBD8E9">
</rect>
<rect x="11" y="2" width="2" height="12" rx="1" fill="#DBD8E9">
</rect>
</svg>Beginner </li>
</ul>
<div class="d-flex align-baseline lh-1">
<span class="fs-6">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor"
class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z">
</path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor"
class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z">
</path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor"
class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z">
</path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor"
class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z">
</path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="currentColor"
class="bi bi-star-fill text-warning" viewBox="0 0 16 16">
<path
d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z">
</path>
</svg>
</span>
<span class="text-warning mx-1">4.5</span>
<span class="fs-6 ">(9,300)</span>
</div>
</div>
<!-- Card footer -->
<div class="card-footer">
<div class="row align-items-center g-0">
<div class="col-auto">
<img src="../assets/images/avatar/avatar-3.jpg" class="rounded-circle avatar-xs"
alt="avatar">
</div>
<div class="col ms-2">
<span>Morris Mccoy</span>
</div>
<div class="col-auto">
<a href="#" class=" bookmark">
<i class="fe fe-bookmark fs-4 "></i>
</a>
</div>
</div>
</div>
</div>Card Thumbnail
Courses
How to become modern Stack Developer in 2020
Lorem ipsum dolor sit amet, accu msan in, tempor dictum nequrem ipsum...
Reva Yokk
September 05, 2020
20 Min Read
<div class="col-xl-4 col-lg-4 col-md-6 col-12">
<!-- Card -->
<div class="card card-hover ">
<a href="blog-single.html">
<img src="../assets/images/blog/blogpost-2.jpg" class=" card-img-top"
alt=""></a>
<!-- Card Body -->
<div class="card-body">
<a href="#" class="badge bg-info mb-3">Courses</a>
<h3><a href="blog-single.html" class="text-inherit">
How to become modern Stack Developer in 2020
</a>
</h3>
<p>Lorem ipsum dolor sit amet, accu msan in, tempor dictum nequrem ipsum...</p>
<!-- Media Content -->
<div class="row align-items-center g-0 mt-4">
<div class="col-auto">
<img src="../assets/images/avatar/avatar-7.jpg" alt=""
class="rounded-circle avatar-sm me-2">
</div>
<div class="col lh-1">
<h5 class="mb-1">Reva Yokk</h5>
<p class="fs-6 mb-0">September 05, 2020
</p>
</div>
<div class="col-auto">
<p class="fs-6 mb-0">20 Min Read</p>
</div>
</div>
</div>
</div>
</div>Horizontal Card with Image
Courses
Getting started the Web App JavaScript in 2020
Our features, journey, tips and us being us. Lorem ipsum dolor sit amet, accumsan in, tempor dictum neque.
Dustin Warren
September 13, 2020
6 Min Read
<div class="card mb-4 card-hover ">
<div class="row g-0">
<!-- Image -->
<a href="blog-single.html" class="col-lg-8 col-md-12 col-12 bg-cover img-left-rounded" style="background-image: url(../assets/images/blog/blogpost-2.jpg);">
<img src="../assets/images/blog/blogpost-2.jpg" class="img-fluid d-lg-none invisible" alt=""></a>
<div class="col-lg-4 col-md-12 col-12">
<!-- Card Body -->
<div class="card-body">
<a href="#" class="badge bg-warning mb-3">Courses</a>
<h1 class="mb-4"> <a href="blog-single.html" class="text-inherit">
Getting started the Web App JavaScript in 2020
</a>
</h1>
<p>Our features, journey, tips and us being us. Lorem ipsum dolor sit amet, accumsan
in, tempor dictum neque.
</p>
<!-- Media Content -->
<div class="row align-items-center g-0 mt-7">
<div class="col-auto">
<img src="../assets/images/avatar/avatar-6.jpg" alt="" class="rounded-circle avatar-sm me-2">
</div>
<div class="col lh-1 ">
<h5 class="mb-1">Dustin Warren</h5>
<p class="fs-6 mb-0">September 13, 2020</p>
</div>
<div class="col-auto">
<p class="fs-6 mb-0">6 Min Read</p>
</div>
</div>
</div>
</div>
</div>
</div>