truncgit/citrus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

frontend style fix

Browse Source
This commit is contained in:
Ümit Tunç
2026-01-01 16:25:27 +03:00
parent e8cdba4fd3
commit 0ca75829bb
454 changed files with 10087 additions and 9940 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/docs/elements/accordion.html
+66 -66
View File
@@ -536,13 +536,13 @@
<li class="nav-item dropdown language-select uppercase group">
<a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
<ul class="dropdown-menu group-hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">Es</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">Es</a></li>
</ul>
</li>
<li class="nav-item hidden xl:block lg:block md:block">
<a class='btn btn-sm btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</a>
<a class='btn btn-sm btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</a>
</li>
<li class="nav-item xl:!hidden lg:!hidden">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
@@ -578,11 +578,11 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Usage</h6>
<nav id="collapse-usage">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='../index.html'>Get Started</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../forms.html'>Forms</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../faq.html'>FAQ</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../credits.html'>Credits</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='../index.html'>Get Started</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../forms.html'>Forms</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../faq.html'>FAQ</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../credits.html'>Credits</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -592,13 +592,13 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Styleguide</h6>
<nav id="collapse-style">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/misc.html'>Misc</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/misc.html'>Misc</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -608,33 +608,33 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Elements</h6>
<nav id="collapse-elements">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li class="!mt-[0.35rem]"><a class='hover:!text-[#3f78e0] active' href='accordion.html'>Accordion</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='typography.html'>Typography</a></li>
<li class="!mt-[0.35rem]"><a class='hover:!text-[#e31e24] active' href='accordion.html'>Accordion</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='typography.html'>Typography</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -647,9 +647,9 @@
<h6 class="widget-title text-[0.85rem] !mb-2 xl:!pl-5">On this page</h6>
<nav class="xl:!pl-5" id="sidebar-nav">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] active" href="#snippet-1">Simple</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-2">Background</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-3">Icon</a></li>
<li><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] active" href="#snippet-1">Simple</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-2">Background</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-3">Icon</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -666,7 +666,7 @@
<div class="accordion accordion-wrapper" id="accordionSimpleExample">
<div class="card plain accordion-item">
<div class="card-header !mb-0 !p-[0_0_.8rem_0] !border-0 !bg-inherit" id="headingSimpleOne">
<button class="accordion-button !text-[.85rem] before:!text-[#3f78e0] hover:!text-[#3f78e0]" data-bs-toggle="collapse" data-bs-target="#collapseSimpleOne" aria-expanded="true" aria-controls="collapseSimpleOne"> Professional Design </button>
<button class="accordion-button !text-[.85rem] before:!text-[#e31e24] hover:!text-[#e31e24]" data-bs-toggle="collapse" data-bs-target="#collapseSimpleOne" aria-expanded="true" aria-controls="collapseSimpleOne"> Professional Design </button>
</div>
<!--/.card-header -->
<div id="collapseSimpleOne" class="accordion-collapse collapse show" aria-labelledby="headingSimpleOne" data-bs-parent="#accordionSimpleExample">
@@ -680,7 +680,7 @@
<!--/.accordion-item -->
<div class="card plain accordion-item">
<div class="card-header !mb-0 !p-[0_0_.8rem_0] !border-0 !bg-inherit" id="headingSimpleTwo">
<button class="collapsed !text-[.85rem] before:!text-[#3f78e0] hover:!text-[#3f78e0]" data-bs-toggle="collapse" data-bs-target="#collapseSimpleTwo" aria-expanded="false" aria-controls="collapseSimpleTwo"> Top-Notch Support </button>
<button class="collapsed !text-[.85rem] before:!text-[#e31e24] hover:!text-[#e31e24]" data-bs-toggle="collapse" data-bs-target="#collapseSimpleTwo" aria-expanded="false" aria-controls="collapseSimpleTwo"> Top-Notch Support </button>
</div>
<!--/.card-header -->
<div id="collapseSimpleTwo" class="accordion-collapse collapse" aria-labelledby="headingSimpleTwo" data-bs-parent="#accordionSimpleExample">
@@ -694,7 +694,7 @@
<!--/.accordion-item -->
<div class="card plain accordion-item">
<div class="card-header !mb-0 !p-[0_0_.8rem_0] !border-0 !bg-inherit" id="headingSimpleThree">
<button class="collapsed !text-[.85rem] before:!text-[#3f78e0] hover:!text-[#3f78e0]" data-bs-toggle="collapse" data-bs-target="#collapseSimpleThree" aria-expanded="false" aria-controls="collapseSimpleThree"> Header and Slider Options </button>
<button class="collapsed !text-[.85rem] before:!text-[#e31e24] hover:!text-[#e31e24]" data-bs-toggle="collapse" data-bs-target="#collapseSimpleThree" aria-expanded="false" aria-controls="collapseSimpleThree"> Header and Slider Options </button>
</div>
<!--/.card-header -->
<div id="collapseSimpleThree" class="accordion-collapse collapse" aria-labelledby="headingSimpleThree" data-bs-parent="#accordionSimpleExample">
@@ -721,7 +721,7 @@
&#60;div class="accordion accordion-wrapper" id="accordionSimpleExample"&#62;
&#60;div class="card plain accordion-item"&#62;
&#60;div class="card-header !mb-0 !p-[0_0_.8rem_0] !border-0 !bg-inherit" id="headingSimpleOne"&#62;
&#60;button class="accordion-button !text-[.85rem] before:!text-[#3f78e0] hover:!text-[#3f78e0]" data-bs-toggle="collapse" data-bs-target="#collapseSimpleOne" aria-expanded="true" aria-controls="collapseSimpleOne"&#62; Professional Design &#60;/button&#62;
&#60;button class="accordion-button !text-[.85rem] before:!text-[#e31e24] hover:!text-[#e31e24]" data-bs-toggle="collapse" data-bs-target="#collapseSimpleOne" aria-expanded="true" aria-controls="collapseSimpleOne"&#62; Professional Design &#60;/button&#62;
&#60;/div&#62;
&#60;!--/.card-header --&#62;
&#60;div id="collapseSimpleOne" class="accordion-collapse collapse show" aria-labelledby="headingSimpleOne" data-bs-parent="#accordionSimpleExample"&#62;
@@ -735,7 +735,7 @@
&#60;!--/.accordion-item --&#62;
&#60;div class="card plain accordion-item"&#62;
&#60;div class="card-header !mb-0 !p-[0_0_.8rem_0] !border-0 !bg-inherit" id="headingSimpleTwo"&#62;
&#60;button class="collapsed !text-[.85rem] before:!text-[#3f78e0] hover:!text-[#3f78e0]" data-bs-toggle="collapse" data-bs-target="#collapseSimpleTwo" aria-expanded="false" aria-controls="collapseSimpleTwo"&#62; Top-Notch Support &#60;/button&#62;
&#60;button class="collapsed !text-[.85rem] before:!text-[#e31e24] hover:!text-[#e31e24]" data-bs-toggle="collapse" data-bs-target="#collapseSimpleTwo" aria-expanded="false" aria-controls="collapseSimpleTwo"&#62; Top-Notch Support &#60;/button&#62;
&#60;/div&#62;
&#60;!--/.card-header --&#62;
&#60;div id="collapseSimpleTwo" class="accordion-collapse collapse" aria-labelledby="headingSimpleTwo" data-bs-parent="#accordionSimpleExample"&#62;
@@ -749,7 +749,7 @@
&#60;!--/.accordion-item --&#62;
&#60;div class="card plain accordion-item"&#62;
&#60;div class="card-header !mb-0 !p-[0_0_.8rem_0] !border-0 !bg-inherit" id="headingSimpleThree"&#62;
&#60;button class="collapsed !text-[.85rem] before:!text-[#3f78e0] hover:!text-[#3f78e0]" data-bs-toggle="collapse" data-bs-target="#collapseSimpleThree" aria-expanded="false" aria-controls="collapseSimpleThree"&#62; Header and Slider Options &#60;/button&#62;
&#60;button class="collapsed !text-[.85rem] before:!text-[#e31e24] hover:!text-[#e31e24]" data-bs-toggle="collapse" data-bs-target="#collapseSimpleThree" aria-expanded="false" aria-controls="collapseSimpleThree"&#62; Header and Slider Options &#60;/button&#62;
&#60;/div&#62;
&#60;!--/.card-header --&#62;
&#60;div id="collapseSimpleThree" class="accordion-collapse collapse" aria-labelledby="headingSimpleThree" data-bs-parent="#accordionSimpleExample"&#62;
@@ -779,7 +779,7 @@
<div class="accordion accordion-wrapper" id="accordionExample">
<div class="card accordion-item !mb-5">
<div class="card-header !mb-0 !p-[.9rem_1.3rem_.85rem] !border-0 !bg-inherit" id="headingOne">
<button class="accordion-button !text-[.85rem] before:!text-[#3f78e0] hover:!text-[#3f78e0]" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Professional Design </button>
<button class="accordion-button !text-[.85rem] before:!text-[#e31e24] hover:!text-[#e31e24]" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Professional Design </button>
</div>
<!--/.card-header -->
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
@@ -793,7 +793,7 @@
<!--/.accordion-item -->
<div class="card accordion-item !mb-5">
<div class="card-header !mb-0 !p-[.9rem_1.3rem_.85rem] !border-0 !bg-inherit" id="headingTwo">
<button class="collapsed !text-[.85rem] before:!text-[#3f78e0] hover:!text-[#3f78e0]" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Top-Notch Support </button>
<button class="collapsed !text-[.85rem] before:!text-[#e31e24] hover:!text-[#e31e24]" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Top-Notch Support </button>
</div>
<!--/.card-header -->
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
@@ -807,7 +807,7 @@
<!--/.accordion-item -->
<div class="card accordion-item !mb-5">
<div class="card-header !mb-0 !p-[.9rem_1.3rem_.85rem] !border-0 !bg-inherit" id="headingThree">
<button class="collapsed !text-[.85rem] before:!text-[#3f78e0] hover:!text-[#3f78e0]" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Header and Slider Options </button>
<button class="collapsed !text-[.85rem] before:!text-[#e31e24] hover:!text-[#e31e24]" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Header and Slider Options </button>
</div>
<!--/.card-header -->
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
@@ -834,7 +834,7 @@
&#60;div class="accordion accordion-wrapper" id="accordionExample"&#62;
&#60;div class="card accordion-item !mb-5"&#62;
&#60;div class="card-header !mb-0 !p-[.9rem_1.3rem_.85rem] !border-0 !bg-inherit" id="headingOne"&#62;
&#60;button class="accordion-button !text-[.85rem] before:!text-[#3f78e0] hover:!text-[#3f78e0]" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"&#62; Professional Design &#60;/button&#62;
&#60;button class="accordion-button !text-[.85rem] before:!text-[#e31e24] hover:!text-[#e31e24]" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"&#62; Professional Design &#60;/button&#62;
&#60;/div&#62;
&#60;!--/.card-header --&#62;
&#60;div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample"&#62;
@@ -848,7 +848,7 @@
&#60;!--/.accordion-item --&#62;
&#60;div class="card accordion-item !mb-5"&#62;
&#60;div class="card-header !mb-0 !p-[.9rem_1.3rem_.85rem] !border-0 !bg-inherit" id="headingTwo"&#62;
&#60;button class="collapsed !text-[.85rem] before:!text-[#3f78e0] hover:!text-[#3f78e0]" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"&#62; Top-Notch Support &#60;/button&#62;
&#60;button class="collapsed !text-[.85rem] before:!text-[#e31e24] hover:!text-[#e31e24]" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"&#62; Top-Notch Support &#60;/button&#62;
&#60;/div&#62;
&#60;!--/.card-header --&#62;
&#60;div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample"&#62;
@@ -862,7 +862,7 @@
&#60;!--/.accordion-item --&#62;
&#60;div class="card accordion-item !mb-5"&#62;
&#60;div class="card-header !mb-0 !p-[.9rem_1.3rem_.85rem] !border-0 !bg-inherit" id="headingThree"&#62;
&#60;button class="collapsed !text-[.85rem] before:!text-[#3f78e0] hover:!text-[#3f78e0]" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"&#62; Header and Slider Options &#60;/button&#62;
&#60;button class="collapsed !text-[.85rem] before:!text-[#e31e24] hover:!text-[#e31e24]" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"&#62; Header and Slider Options &#60;/button&#62;
&#60;/div&#62;
&#60;!--/.card-header --&#62;
&#60;div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample"&#62;
@@ -892,7 +892,7 @@
<div class="accordion accordion-wrapper" id="accordionIconExample">
<div class="card accordion-item icon !mb-[1.25rem]">
<div class="card-header !mb-0 !p-[.9rem_1.3rem_.85rem] !border-0 !bg-inherit" id="headingIconOne">
<button class="accordion-button !text-[.85rem] before:!text-[#3f78e0] hover:!text-[#3f78e0]" data-bs-toggle="collapse" data-bs-target="#collapseIconOne" aria-expanded="true" aria-controls="collapseIconOne"><span><i class="uil uil-shield-exclamation before:content-['\ecb3']"></i></span>Secure Payments</button>
<button class="accordion-button !text-[.85rem] before:!text-[#e31e24] hover:!text-[#e31e24]" data-bs-toggle="collapse" data-bs-target="#collapseIconOne" aria-expanded="true" aria-controls="collapseIconOne"><span><i class="uil uil-shield-exclamation before:content-['\ecb3']"></i></span>Secure Payments</button>
</div>
<!--/.card-header -->
<div id="collapseIconOne" class="accordion-collapse collapse show" aria-labelledby="headingIconOne" data-bs-parent="#accordionIconExample">
@@ -906,7 +906,7 @@
<!--/.accordion-item -->
<div class="card accordion-item icon !mb-[1.25rem]">
<div class="card-header !mb-0 !p-[.9rem_1.3rem_.85rem] !border-0 !bg-inherit" id="headingIconTwo">
<button class="collapsed !text-[.85rem] before:!text-[#3f78e0] hover:!text-[#3f78e0]" data-bs-toggle="collapse" data-bs-target="#collapseIconTwo" aria-expanded="false" aria-controls="collapseIconTwo"><span><i class="uil uil-check-circle before:content-['\e9db']"></i></span>Daily Updates</button>
<button class="collapsed !text-[.85rem] before:!text-[#e31e24] hover:!text-[#e31e24]" data-bs-toggle="collapse" data-bs-target="#collapseIconTwo" aria-expanded="false" aria-controls="collapseIconTwo"><span><i class="uil uil-check-circle before:content-['\e9db']"></i></span>Daily Updates</button>
</div>
<!--/.card-header -->
<div id="collapseIconTwo" class="accordion-collapse collapse" aria-labelledby="headingIconTwo" data-bs-parent="#accordionIconExample">
@@ -920,7 +920,7 @@
<!--/.accordion-item -->
<div class="card accordion-item icon !mb-[1.25rem]">
<div class="card-header !mb-0 !p-[.9rem_1.3rem_.85rem] !border-0 !bg-inherit" id="headingIconThree">
<button class="collapsed !text-[.85rem] before:!text-[#3f78e0] hover:!text-[#3f78e0]" data-bs-toggle="collapse" data-bs-target="#collapseIconThree" aria-expanded="false" aria-controls="collapseIconThree"><span><i class="uil uil-chart-line before:content-['\e9d3']"></i></span>Market Research</button>
<button class="collapsed !text-[.85rem] before:!text-[#e31e24] hover:!text-[#e31e24]" data-bs-toggle="collapse" data-bs-target="#collapseIconThree" aria-expanded="false" aria-controls="collapseIconThree"><span><i class="uil uil-chart-line before:content-['\e9d3']"></i></span>Market Research</button>
</div>
<!--/.card-header -->
<div id="collapseIconThree" class="accordion-collapse collapse" aria-labelledby="headingIconThree" data-bs-parent="#accordionIconExample">
@@ -947,7 +947,7 @@
&#60;div class="accordion accordion-wrapper" id="accordionIconExample"&#62;
&#60;div class="card accordion-item icon !mb-[1.25rem]"&#62;
&#60;div class="card-header !mb-0 !p-[.9rem_1.3rem_.85rem] !border-0 !bg-inherit" id="headingIconOne"&#62;
&#60;button class="accordion-button !text-[.85rem] before:!text-[#3f78e0] hover:!text-[#3f78e0]" data-bs-toggle="collapse" data-bs-target="#collapseIconOne" aria-expanded="true" aria-controls="collapseIconOne"&#62;&#60;span&#62;&#60;i class="uil uil-shield-exclamation before:content-['\ecb3']"&#62;&#60;/i&#62;&#60;/span&#62;Secure Payments&#60;/button&#62;
&#60;button class="accordion-button !text-[.85rem] before:!text-[#e31e24] hover:!text-[#e31e24]" data-bs-toggle="collapse" data-bs-target="#collapseIconOne" aria-expanded="true" aria-controls="collapseIconOne"&#62;&#60;span&#62;&#60;i class="uil uil-shield-exclamation before:content-['\ecb3']"&#62;&#60;/i&#62;&#60;/span&#62;Secure Payments&#60;/button&#62;
&#60;/div&#62;
&#60;!--/.card-header --&#62;
&#60;div id="collapseIconOne" class="accordion-collapse collapse show" aria-labelledby="headingIconOne" data-bs-parent="#accordionIconExample"&#62;
@@ -961,7 +961,7 @@
&#60;!--/.accordion-item --&#62;
&#60;div class="card accordion-item icon !mb-[1.25rem]"&#62;
&#60;div class="card-header !mb-0 !p-[.9rem_1.3rem_.85rem] !border-0 !bg-inherit" id="headingIconTwo"&#62;
&#60;button class="collapsed !text-[.85rem] before:!text-[#3f78e0] hover:!text-[#3f78e0]" data-bs-toggle="collapse" data-bs-target="#collapseIconTwo" aria-expanded="false" aria-controls="collapseIconTwo"&#62;&#60;span&#62;&#60;i class="uil uil-check-circle before:content-['\e9db']"&#62;&#60;/i&#62;&#60;/span&#62;Daily Updates&#60;/button&#62;
&#60;button class="collapsed !text-[.85rem] before:!text-[#e31e24] hover:!text-[#e31e24]" data-bs-toggle="collapse" data-bs-target="#collapseIconTwo" aria-expanded="false" aria-controls="collapseIconTwo"&#62;&#60;span&#62;&#60;i class="uil uil-check-circle before:content-['\e9db']"&#62;&#60;/i&#62;&#60;/span&#62;Daily Updates&#60;/button&#62;
&#60;/div&#62;
&#60;!--/.card-header --&#62;
&#60;div id="collapseIconTwo" class="accordion-collapse collapse" aria-labelledby="headingIconTwo" data-bs-parent="#accordionIconExample"&#62;
@@ -975,7 +975,7 @@
&#60;!--/.accordion-item --&#62;
&#60;div class="card accordion-item icon !mb-[1.25rem]"&#62;
&#60;div class="card-header !mb-0 !p-[.9rem_1.3rem_.85rem] !border-0 !bg-inherit" id="headingIconThree"&#62;
&#60;button class="collapsed !text-[.85rem] before:!text-[#3f78e0] hover:!text-[#3f78e0]" data-bs-toggle="collapse" data-bs-target="#collapseIconThree" aria-expanded="false" aria-controls="collapseIconThree"&#62;&#60;span&#62;&#60;i class="uil uil-chart-line before:content-['\e9d3']"&#62;&#60;/i&#62;&#60;/span&#62;Market Research&#60;/button&#62;
&#60;button class="collapsed !text-[.85rem] before:!text-[#e31e24] hover:!text-[#e31e24]" data-bs-toggle="collapse" data-bs-target="#collapseIconThree" aria-expanded="false" aria-controls="collapseIconThree"&#62;&#60;span&#62;&#60;i class="uil uil-chart-line before:content-['\e9d3']"&#62;&#60;/i&#62;&#60;/span&#62;Market Research&#60;/button&#62;
&#60;/div&#62;
&#60;!--/.card-header --&#62;
&#60;div id="collapseIconThree" class="accordion-collapse collapse" aria-labelledby="headingIconThree" data-bs-parent="#accordionIconExample"&#62;
@@ -1021,9 +1021,9 @@
<!-- /.container -->
</section>
<!-- /section -->
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#3f78e0] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#e31e24] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
<path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
<path class="fill-none stroke-[#e31e24] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
</svg>
</div>
<script src="../../assets/js/plugins.js"></script>
public/docs/elements/alerts.html
+47 -47
View File
@@ -536,13 +536,13 @@
<li class="nav-item dropdown language-select uppercase group">
<a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
<ul class="dropdown-menu group-hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">Es</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">Es</a></li>
</ul>
</li>
<li class="nav-item hidden xl:block lg:block md:block">
<a class='btn btn-sm btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</a>
<a class='btn btn-sm btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</a>
</li>
<li class="nav-item xl:!hidden lg:!hidden">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
@@ -578,11 +578,11 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Usage</h6>
<nav id="collapse-usage">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='../index.html'>Get Started</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../forms.html'>Forms</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../faq.html'>FAQ</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../credits.html'>Credits</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='../index.html'>Get Started</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../forms.html'>Forms</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../faq.html'>FAQ</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../credits.html'>Credits</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -592,13 +592,13 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Styleguide</h6>
<nav id="collapse-style">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/misc.html'>Misc</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/misc.html'>Misc</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -608,33 +608,33 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Elements</h6>
<nav id="collapse-elements">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='accordion.html'>Accordion</a></li>
<li class="!mt-[0.35rem]"><a class='hover:!text-[#3f78e0] active' href='alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='typography.html'>Typography</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='accordion.html'>Accordion</a></li>
<li class="!mt-[0.35rem]"><a class='hover:!text-[#e31e24] active' href='alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='typography.html'>Typography</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -647,8 +647,8 @@
<h6 class="widget-title text-[0.85rem] !mb-2 xl:!pl-5">On this page</h6>
<nav class="xl:!pl-5" id="sidebar-nav">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] active" href="#snippet-1">Simple</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-2">Dismissing</a></li>
<li><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] active" href="#snippet-1">Simple</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-2">Dismissing</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -775,9 +775,9 @@
<!-- /.container -->
</section>
<!-- /section -->
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#3f78e0] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#e31e24] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
<path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
<path class="fill-none stroke-[#e31e24] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
</svg>
</div>
<script src="../../assets/js/plugins.js"></script>
public/docs/elements/animations.html
+51 -51
View File
@@ -536,13 +536,13 @@
<li class="nav-item dropdown language-select uppercase group">
<a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
<ul class="dropdown-menu group-hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">Es</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">Es</a></li>
</ul>
</li>
<li class="nav-item hidden xl:block lg:block md:block">
<a class='btn btn-sm btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</a>
<a class='btn btn-sm btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</a>
</li>
<li class="nav-item xl:!hidden lg:!hidden">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
@@ -604,11 +604,11 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Usage</h6>
<nav id="collapse-usage">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='../index.html'>Get Started</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../forms.html'>Forms</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../faq.html'>FAQ</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../credits.html'>Credits</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='../index.html'>Get Started</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../forms.html'>Forms</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../faq.html'>FAQ</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../credits.html'>Credits</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -618,13 +618,13 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Styleguide</h6>
<nav id="collapse-style">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/misc.html'>Misc</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/misc.html'>Misc</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -634,33 +634,33 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Elements</h6>
<nav id="collapse-elements">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='accordion.html'>Accordion</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='hover:!text-[#3f78e0] active' href='animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='typography.html'>Typography</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='accordion.html'>Accordion</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='hover:!text-[#e31e24] active' href='animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='typography.html'>Typography</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -673,12 +673,12 @@
<h6 class="widget-title text-[0.85rem] !mb-2 xl:!pl-5">On this page</h6>
<nav class="xl:!pl-5" id="sidebar-nav">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] active" href="#snippet-1">Standard Example</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-2">Parent Wrap</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-3">Group Wrap</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-4">[data-duration]</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-5">[data-interval]</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-6">[data-delay]</a></li>
<li><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] active" href="#snippet-1">Standard Example</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-2">Parent Wrap</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-3">Group Wrap</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-4">[data-duration]</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-5">[data-interval]</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-6">[data-delay]</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -943,9 +943,9 @@
<!-- /.container -->
</section>
<!-- /section -->
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#3f78e0] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#e31e24] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
<path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
<path class="fill-none stroke-[#e31e24] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
</svg>
</div>
<script src="../../assets/js/plugins.js"></script>
public/docs/elements/avatars.html
+51 -51
View File
@@ -536,13 +536,13 @@
<li class="nav-item dropdown language-select uppercase group">
<a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
<ul class="dropdown-menu group-hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">Es</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">Es</a></li>
</ul>
</li>
<li class="nav-item hidden xl:block lg:block md:block">
<a class='btn btn-sm btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</a>
<a class='btn btn-sm btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</a>
</li>
<li class="nav-item xl:!hidden lg:!hidden">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
@@ -578,11 +578,11 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Usage</h6>
<nav id="collapse-usage">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='../index.html'>Get Started</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../forms.html'>Forms</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../faq.html'>FAQ</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../credits.html'>Credits</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='../index.html'>Get Started</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../forms.html'>Forms</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../faq.html'>FAQ</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../credits.html'>Credits</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -592,13 +592,13 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Styleguide</h6>
<nav id="collapse-style">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/misc.html'>Misc</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/misc.html'>Misc</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -608,33 +608,33 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Elements</h6>
<nav id="collapse-elements">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='accordion.html'>Accordion</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='hover:!text-[#3f78e0] active' href='avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='typography.html'>Typography</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='accordion.html'>Accordion</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='hover:!text-[#e31e24] active' href='avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='typography.html'>Typography</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -647,8 +647,8 @@
<h6 class="widget-title text-[0.85rem] !mb-2 xl:!pl-5">On this page</h6>
<nav class="xl:!pl-5" id="sidebar-nav">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] active" href="#snippet-1">Letters</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-2">Images</a></li>
<li><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] active" href="#snippet-1">Letters</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-2">Images</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -663,8 +663,8 @@
<div class="card">
<div class="card-body flex flex-row items-center p-[40px]">
<span class=" flex items-center justify-center font-bold !leading-[1.7] !tracking-[-0.01rem] rounded-[100%] !bg-[rgba(63,120,224)] opacity-100 !text-white !w-[5rem] !h-[5rem] !mr-4"><span class="xl:!text-[1.5rem] !text-[calc(1.275rem_+_0.3vw)]">TC</span></span>
<span class=" flex items-center justify-center font-bold !leading-[1.7] !tracking-[-0.01rem] rounded-[100%] !bg-[#e0e9fa] !text-[#3f78e0] w-[3.5rem] h-[3.5rem] !mr-4"><span class="!text-[0.9rem]">AH</span></span>
<span class=" flex items-center justify-center font-bold !leading-[1.7] !tracking-[-0.01rem] rounded-[100%] !bg-[#edf2fc] !text-[#3f78e0] !w-[2.5rem] !h-[2.5rem] !mr-4"><span class="!text-[.75rem]">CH</span></span>
<span class=" flex items-center justify-center font-bold !leading-[1.7] !tracking-[-0.01rem] rounded-[100%] !bg-[#e0e9fa] !text-[#e31e24] w-[3.5rem] h-[3.5rem] !mr-4"><span class="!text-[0.9rem]">AH</span></span>
<span class=" flex items-center justify-center font-bold !leading-[1.7] !tracking-[-0.01rem] rounded-[100%] !bg-[#edf2fc] !text-[#e31e24] !w-[2.5rem] !h-[2.5rem] !mr-4"><span class="!text-[.75rem]">CH</span></span>
</div>
<!--/.card-body -->
<div class="card-footer !relative">
@@ -678,11 +678,11 @@
&lt;span&gt;TC&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;avatar !bg-[#e0e9fa] !text-[#3f78e0] w-12 h-12&quot;&gt;
&lt;span class=&quot;avatar !bg-[#e0e9fa] !text-[#e31e24] w-12 h-12&quot;&gt;
&lt;span&gt;AH&lt;/span&gt;
&lt;/span&gt;
&lt;span class=&quot;avatar !bg-[#edf2fc] !text-[#3f78e0] !w-[2.5rem] !h-[2.5rem]&quot;&gt;
&lt;span class=&quot;avatar !bg-[#edf2fc] !text-[#e31e24] !w-[2.5rem] !h-[2.5rem]&quot;&gt;
&lt;span&gt;CH&lt;/span&gt;
&lt;/span&gt;</code></pre>
</div>
@@ -749,9 +749,9 @@
<!-- /.container -->
</section>
<!-- /section -->
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#3f78e0] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#e31e24] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
<path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
<path class="fill-none stroke-[#e31e24] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
</svg>
</div>
<script src="../../assets/js/plugins.js"></script>
public/docs/elements/background.html
+54 -54
View File
@@ -536,13 +536,13 @@
<li class="nav-item dropdown language-select uppercase group">
<a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
<ul class="dropdown-menu group-hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">Es</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">Es</a></li>
</ul>
</li>
<li class="nav-item hidden xl:block lg:block md:block">
<a class='btn btn-sm btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</a>
<a class='btn btn-sm btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</a>
</li>
<li class="nav-item xl:!hidden lg:!hidden">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
@@ -578,11 +578,11 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Usage</h6>
<nav id="collapse-usage">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='../index.html'>Get Started</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../forms.html'>Forms</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../faq.html'>FAQ</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../credits.html'>Credits</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='../index.html'>Get Started</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../forms.html'>Forms</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../faq.html'>FAQ</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../credits.html'>Credits</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -592,13 +592,13 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Styleguide</h6>
<nav id="collapse-style">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/misc.html'>Misc</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/misc.html'>Misc</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -608,33 +608,33 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Elements</h6>
<nav id="collapse-elements">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='accordion.html'>Accordion</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='hover:!text-[#3f78e0] active' href='background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='typography.html'>Typography</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='accordion.html'>Accordion</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='hover:!text-[#e31e24] active' href='background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='typography.html'>Typography</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -647,14 +647,14 @@
<h6 class="widget-title text-[0.85rem] !mb-2 xl:!pl-5">On this page</h6>
<nav class="xl:!pl-5" id="sidebar-nav">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] active" href="#snippet-0">Image</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-1">Dark</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-2">Gradient</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-3">Color</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-4">Soft</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-5">Pale</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-6">Pattern</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-7">Video</a></li>
<li><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] active" href="#snippet-0">Image</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-1">Dark</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-2">Gradient</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-3">Color</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-4">Soft</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-5">Pale</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-6">Pattern</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-7">Video</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -785,7 +785,7 @@
<section id="snippet-3" class="wrapper pt-24">
<h2 class="!mb-3 !leading-[1.35]">Color Background</h2>
<p class="lead !leading-[1.65] text-[0.9rem] font-medium">Available options:</p>
<p class="lead !leading-[1.65] text-[0.9rem] font-medium !mb-8"><code class="code">bg-[#ffffff]</code>, <code class="code">bg-[#3f78e0]</code>, <code class="code">bg-[#54a8c7]</code>, <code class="code">bg-[#45c4a0]</code>, <code class="code">bg-[#7cb798]</code>, <code class="code">bg-[#343f52]</code>, <code class="code">bg-[#f78b77]</code>, <code class="code">bg-[#d16b86]</code>, <code class="code">bg-[#747ed1]</code>, <code class="code">bg-[#e2626b]</code>, <code class="code">bg-[#a07cc5]</code>, <code class="code">bg-[#fab758]</code>, <code class="code">bg-[#e668b3]</code>, <code class="code">bg-[#5eb9f0]</code>, <code class="code">bg-[#e31e24]</code>.</p>
<p class="lead !leading-[1.65] text-[0.9rem] font-medium !mb-8"><code class="code">bg-[#ffffff]</code>, <code class="code">bg-[#e31e24]</code>, <code class="code">bg-[#54a8c7]</code>, <code class="code">bg-[#45c4a0]</code>, <code class="code">bg-[#7cb798]</code>, <code class="code">bg-[#343f52]</code>, <code class="code">bg-[#f78b77]</code>, <code class="code">bg-[#d16b86]</code>, <code class="code">bg-[#747ed1]</code>, <code class="code">bg-[#e2626b]</code>, <code class="code">bg-[#a07cc5]</code>, <code class="code">bg-[#fab758]</code>, <code class="code">bg-[#e668b3]</code>, <code class="code">bg-[#5eb9f0]</code>, <code class="code">bg-[#e31e24]</code>.</p>
<div class="card">
<div class="card-body flex-[1_1_auto] p-[40px]">
<section class="wrapper !bg-[rgba(63,120,224)] opacity-100 !text-white">
@@ -974,9 +974,9 @@
<!-- /.container -->
</section>
<!-- /section -->
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#3f78e0] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#e31e24] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
<path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
<path class="fill-none stroke-[#e31e24] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
</svg>
</div>
<script src="../../assets/js/plugins.js"></script>
public/docs/elements/badges.html
+52 -52
View File
@@ -536,13 +536,13 @@
<li class="nav-item dropdown language-select uppercase group">
<a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
<ul class="dropdown-menu group-hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">Es</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">Es</a></li>
</ul>
</li>
<li class="nav-item hidden xl:block lg:block md:block">
<a class='btn btn-sm btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</a>
<a class='btn btn-sm btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</a>
</li>
<li class="nav-item xl:!hidden lg:!hidden">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
@@ -578,11 +578,11 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Usage</h6>
<nav id="collapse-usage">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='../index.html'>Get Started</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../forms.html'>Forms</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../faq.html'>FAQ</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../credits.html'>Credits</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='../index.html'>Get Started</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../forms.html'>Forms</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../faq.html'>FAQ</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../credits.html'>Credits</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -592,13 +592,13 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Styleguide</h6>
<nav id="collapse-style">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/misc.html'>Misc</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/misc.html'>Misc</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -608,33 +608,33 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Elements</h6>
<nav id="collapse-elements">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='accordion.html'>Accordion</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='hover:!text-[#3f78e0] active' href='badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='typography.html'>Typography</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='accordion.html'>Accordion</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='hover:!text-[#e31e24] active' href='badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='typography.html'>Typography</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -647,10 +647,10 @@
<h6 class="widget-title text-[0.85rem] !mb-2 xl:!pl-5">On this page</h6>
<nav class="xl:!pl-5" id="sidebar-nav">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] active" href="#snippet-1">Colors</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-2">Gradients</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-3">Shapes</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-4">Sizes</a></li>
<li><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] active" href="#snippet-1">Colors</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-2">Gradients</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-3">Shapes</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-4">Sizes</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -685,7 +685,7 @@
<span class="badge bg-[#f8e7ec] !text-[#d16b86] !rounded-[50rem]">Badge</span>
<span class="badge bg-[#f0eaf6] !text-[#a07cc5] !rounded-[50rem]">Badge</span>
<span class="badge bg-[#e9eaf8] !text-[#747ed1] !rounded-[50rem]">Badge</span>
<span class="badge bg-[#e0e9fa] !text-[#3f78e0] !rounded-[50rem]">Badge</span>
<span class="badge bg-[#e0e9fa] !text-[#e31e24] !rounded-[50rem]">Badge</span>
<span class="badge bg-[#e4f1f6] !text-[#54a8c7] !rounded-[50rem]">Badge</span>
<span class="badge bg-[#e1f6f0] !text-[#45c4a0] !rounded-[50rem]">Badge</span>
<span class="badge !bg-[#eaf3ef] !text-[#7cb798] !rounded-[50rem]">Badge</span>
@@ -722,14 +722,14 @@
&lt;span class=&quot;badge bg-[rgba(255,255,255)] opacity-100 !text-[#343f52] !rounded-[50rem]&quot;&gt;Badge&lt;/span&gt;
&lt;span class=&quot;badge !bg-[#e0e9fa] !text-[#3f78e0] !rounded-[50rem]&quot;&gt;Badge&lt;/span&gt;
&lt;span class=&quot;badge !bg-[#e0e9fa] !text-[#e31e24] !rounded-[50rem]&quot;&gt;Badge&lt;/span&gt;
&lt;span class=&quot;badge !bg-[#fef3e4] !text-[#fab758] !rounded-[50rem]&quot;&gt;Badge&lt;/span&gt;
&lt;span class=&quot;badge bg-[#f78b77] !text-[#f78b77] !rounded-[50rem]&quot;&gt;Badge&lt;/span&gt;
&lt;span class=&quot;badge !bg-[#fae6e7] !text-[#e2626b] !rounded-[50rem]&quot;&gt;Badge&lt;/span&gt;
&lt;span class=&quot;badge bg-[#f8e7ec] !text-[#d16b86] !rounded-[50rem]&quot;&gt;Badge&lt;/span&gt;
&lt;span class=&quot;badge bg-[#f0eaf6] !text-[#a07cc5] !rounded-[50rem]&quot;&gt;Badge&lt;/span&gt;
&lt;span class=&quot;badge bg-[#e9eaf8] !text-[#747ed1] !rounded-[50rem]&quot;&gt;Badge&lt;/span&gt;
&lt;span class=&quot;badge bg-[#e0e9fa] !text-[#3f78e0] !rounded-[50rem]&quot;&gt;Badge&lt;/span&gt;
&lt;span class=&quot;badge bg-[#e0e9fa] !text-[#e31e24] !rounded-[50rem]&quot;&gt;Badge&lt;/span&gt;
&lt;span class=&quot;badge bg-[#e4f1f6] !text-[#54a8c7] !rounded-[50rem]&quot;&gt;Badge&lt;/span&gt;
&lt;span class=&quot;badge bg-[#e1f6f0] !text-[#45c4a0] !rounded-[50rem]&quot;&gt;Badge&lt;/span&gt;
&lt;span class=&quot;badge !bg-[#eaf3ef] !text-[#7cb798] !rounded-[50rem]&quot;&gt;Badge&lt;/span&gt;
@@ -861,9 +861,9 @@
<!-- /.container -->
</section>
<!-- /section -->
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#3f78e0] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#e31e24] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
<path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
<path class="fill-none stroke-[#e31e24] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
</svg>
</div>
<script src="../../assets/js/plugins.js"></script>
public/docs/elements/buttons.html
+85 -85
View File
@@ -536,13 +536,13 @@
<li class="nav-item dropdown language-select uppercase group">
<a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
<ul class="dropdown-menu group-hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">Es</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">Es</a></li>
</ul>
</li>
<li class="nav-item hidden xl:block lg:block md:block">
<a class='btn btn-sm btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</a>
<a class='btn btn-sm btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</a>
</li>
<li class="nav-item xl:!hidden lg:!hidden">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
@@ -578,11 +578,11 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Usage</h6>
<nav id="collapse-usage">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='../index.html'>Get Started</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../forms.html'>Forms</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../faq.html'>FAQ</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../credits.html'>Credits</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='../index.html'>Get Started</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../forms.html'>Forms</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../faq.html'>FAQ</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../credits.html'>Credits</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -592,13 +592,13 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Styleguide</h6>
<nav id="collapse-style">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/misc.html'>Misc</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/misc.html'>Misc</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -608,33 +608,33 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Elements</h6>
<nav id="collapse-elements">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='accordion.html'>Accordion</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='hover:!text-[#3f78e0] active' href='buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='typography.html'>Typography</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='accordion.html'>Accordion</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='hover:!text-[#e31e24] active' href='buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='typography.html'>Typography</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -647,16 +647,16 @@
<h6 class="widget-title text-[0.85rem] !mb-2 xl:!pl-5">On this page</h6>
<nav class="xl:!pl-5" id="sidebar-nav">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] active" href="#colors">Colors</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#gradients">Gradients</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#sizes">Sizes</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#shapes">Shapes</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#style">Style</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#circle">Circle</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#social">Social</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#icon">Icon</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#expand">Expand</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#play">Play</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] active" href="#colors">Colors</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#gradients">Gradients</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#sizes">Sizes</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#shapes">Shapes</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#style">Style</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#circle">Circle</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#social">Social</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#icon">Icon</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#expand">Expand</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#play">Play</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -675,7 +675,7 @@
<a href="#" class="btn btn-pink !text-white !bg-[#d16b86] border-[#d16b86] hover:text-white hover:bg-[#d16b86] hover:!border-[#d16b86] active:text-white active:bg-[#d16b86] active:border-[#d16b86] disabled:text-white disabled:bg-[#d16b86] disabled:border-[#d16b86] !rounded-[50rem] !mb-2 !mr-[.25rem]">Button</a>
<a href="#" class="btn btn-violet !text-white !bg-[#a07cc5] border-[#a07cc5] hover:text-white hover:bg-[#a07cc5] hover:!border-[#a07cc5] active:text-white active:bg-[#a07cc5] active:border-[#a07cc5] disabled:text-white disabled:bg-[#a07cc5] disabled:border-[#a07cc5] !rounded-[50rem] !mb-2 !mr-[.25rem]">Button</a>
<a href="#" class="btn btn-purple !text-white !bg-[#747ed1] border-[#747ed1] hover:text-white hover:bg-[#747ed1] hover:!border-[#747ed1] active:text-white active:bg-[#747ed1] active:border-[#747ed1] disabled:text-white disabled:bg-[#747ed1] disabled:border-[#747ed1] !rounded-[50rem] !mb-2 !mr-[.25rem]">Button</a>
<a href="#" class="btn btn-blue !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] !mb-2 !mr-[.25rem]">Button</a>
<a href="#" class="btn btn-blue !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] !mb-2 !mr-[.25rem]">Button</a>
<a href="#" class="btn btn-aqua !text-white !bg-[#54a8c7] border-[#54a8c7] hover:text-white hover:bg-[#54a8c7] hover:!border-[#54a8c7] focus:shadow-[rgba(79,152,181,1)] focus:text-white active:text-white active:bg-[#54a8c7] active:border-[#54a8c7] disabled:text-white disabled:bg-[#54a8c7] disabled:border-[#54a8c7] !rounded-[50rem] !mb-2 !mr-[.25rem]">Button</a>
<a href="#" class="btn btn-green !text-white !bg-[#45c4a0] border-[#45c4a0] hover:text-white hover:bg-[#45c4a0] hover:!border-[#45c4a0] active:text-white active:bg-[#45c4a0] active:border-[#45c4a0] disabled:text-white disabled:bg-[#45c4a0] disabled:border-[#45c4a0] !rounded-[50rem] !mb-2 !mr-[.25rem]">Button</a>
<a href="#" class="btn btn-leaf !text-white !bg-[#7cb798] border-[#7cb798] hover:text-white hover:bg-[#7cb798] hover:!border-[#7cb798] focus:shadow-[rgba(113,165,142,1)] active:text-white active:bg-[#7cb798] active:border-[#7cb798] disabled:text-white disabled:bg-[#7cb798] disabled:border-[#7cb798] !rounded-[50rem] !mb-2 !mr-[.25rem]">Button</a>
@@ -716,7 +716,7 @@
&#60;a href="#" class="btn btn-pink !text-white !bg-[#d16b86] border-[#d16b86] hover:text-white hover:bg-[#d16b86] hover:!border-[#d16b86] active:text-white active:bg-[#d16b86] active:border-[#d16b86] disabled:text-white disabled:bg-[#d16b86] disabled:border-[#d16b86] !rounded-[50rem] !mb-2 !mr-[.25rem]"&#62;Button&#60;/a&#62;
&#60;a href="#" class="btn btn-violet !text-white !bg-[#a07cc5] border-[#a07cc5] hover:text-white hover:bg-[#a07cc5] hover:!border-[#a07cc5] active:text-white active:bg-[#a07cc5] active:border-[#a07cc5] disabled:text-white disabled:bg-[#a07cc5] disabled:border-[#a07cc5] !rounded-[50rem] !mb-2 !mr-[.25rem]"&#62;Button&#60;/a&#62;
&#60;a href="#" class="btn btn-purple !text-white !bg-[#747ed1] border-[#747ed1] hover:text-white hover:bg-[#747ed1] hover:!border-[#747ed1] active:text-white active:bg-[#747ed1] active:border-[#747ed1] disabled:text-white disabled:bg-[#747ed1] disabled:border-[#747ed1] !rounded-[50rem] !mb-2 !mr-[.25rem]"&#62;Button&#60;/a&#62;
&#60;a href="#" class="btn btn-blue !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] !mb-2 !mr-[.25rem]"&#62;Button&#60;/a&#62;
&#60;a href="#" class="btn btn-blue !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] !mb-2 !mr-[.25rem]"&#62;Button&#60;/a&#62;
&#60;a href="#" class="btn btn-aqua !text-white !bg-[#54a8c7] border-[#54a8c7] hover:text-white hover:bg-[#54a8c7] hover:!border-[#54a8c7] focus:shadow-[rgba(79,152,181,1)] focus:text-white active:text-white active:bg-[#54a8c7] active:border-[#54a8c7] disabled:text-white disabled:bg-[#54a8c7] disabled:border-[#54a8c7] !rounded-[50rem] !mb-2 !mr-[.25rem]"&#62;Button&#60;/a&#62;
&#60;a href="#" class="btn btn-green !text-white !bg-[#45c4a0] border-[#45c4a0] hover:text-white hover:bg-[#45c4a0] hover:!border-[#45c4a0] active:text-white active:bg-[#45c4a0] active:border-[#45c4a0] disabled:text-white disabled:bg-[#45c4a0] disabled:border-[#45c4a0] !rounded-[50rem] !mb-2 !mr-[.25rem]"&#62;Button&#60;/a&#62;
&#60;a href="#" class="btn btn-leaf !text-white !bg-[#7cb798] border-[#7cb798] hover:text-white hover:bg-[#7cb798] hover:!border-[#7cb798] focus:shadow-[rgba(113,165,142,1)] active:text-white active:bg-[#7cb798] active:border-[#7cb798] disabled:text-white disabled:bg-[#7cb798] disabled:border-[#7cb798] !rounded-[50rem] !mb-2 !mr-[.25rem]"&#62;Button&#60;/a&#62;
@@ -808,9 +808,9 @@
<h2 class="!mb-5 !leading-[1.35]">Sizes</h2>
<div class="card">
<div class="card-body flex-[1_1_auto] p-[40px]">
<a href="#" class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] btn-lg !rounded-[50rem] !mr-1 !mb-2 xl:!mb-0 lg:!mb-0 md:!mb-0">Large Button</a>
<a href="#" class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] !mr-1 !mb-2 xl:!mb-0 lg:!mb-0 md:!mb-0">Default Button</a>
<a href="#" class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] btn-sm !rounded-[50rem] !mr-1 !mb-2 xl:!mb-0 lg:!mb-0 md:!mb-0">Small Button</a>
<a href="#" class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] btn-lg !rounded-[50rem] !mr-1 !mb-2 xl:!mb-0 lg:!mb-0 md:!mb-0">Large Button</a>
<a href="#" class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] !mr-1 !mb-2 xl:!mb-0 lg:!mb-0 md:!mb-0">Default Button</a>
<a href="#" class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] btn-sm !rounded-[50rem] !mr-1 !mb-2 xl:!mb-0 lg:!mb-0 md:!mb-0">Small Button</a>
</div>
<!--/.card-body -->
<div class="card-footer !relative">
@@ -820,9 +820,9 @@
<div id="collapse-sizes" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
<div class="code-wrapper relative !mb-0">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;a href="#" class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] btn-lg !rounded-[50rem]"&gt;Large Button&lt;/a&gt;
&lt;a href="#" class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem]"&gt;Default Button&lt;/a&gt;
&lt;a href="#" class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] btn-sm !rounded-[50rem]"&gt;Small Button&lt;/a&gt;</code></pre>
<pre class="language-html"><code>&lt;a href="#" class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] btn-lg !rounded-[50rem]"&gt;Large Button&lt;/a&gt;
&lt;a href="#" class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem]"&gt;Default Button&lt;/a&gt;
&lt;a href="#" class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] btn-sm !rounded-[50rem]"&gt;Small Button&lt;/a&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
@@ -837,10 +837,10 @@
<h2 class="!mb-5 !leading-[1.35]">Shapes</h2>
<div class="card">
<div class="card-body flex-[1_1_auto] p-[40px]">
<a href="#" class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-none !mr-1 !mb-2 xl:!mb-0 lg:!mb-0 md:!mb-0">Square</a>
<a href="#" class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !mr-1 !mb-2 xl:!mb-0 lg:!mb-0 md:!mb-0">Rounded</a>
<a href="#" class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[0.8rem] !mr-1 !mb-2 xl:!mb-0 lg:!mb-0 md:!mb-0">Rounder</a>
<a href="#" class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] !mr-1 !mb-2 xl:!mb-0 lg:!mb-0 md:!mb-0">Pill</a>
<a href="#" class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-none !mr-1 !mb-2 xl:!mb-0 lg:!mb-0 md:!mb-0">Square</a>
<a href="#" class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !mr-1 !mb-2 xl:!mb-0 lg:!mb-0 md:!mb-0">Rounded</a>
<a href="#" class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[0.8rem] !mr-1 !mb-2 xl:!mb-0 lg:!mb-0 md:!mb-0">Rounder</a>
<a href="#" class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] !mr-1 !mb-2 xl:!mb-0 lg:!mb-0 md:!mb-0">Pill</a>
</div>
<!--/.card-body -->
<div class="card-footer !relative">
@@ -850,10 +850,10 @@
<div id="collapse-shapes" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
<div class="code-wrapper relative !mb-0">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;a href=&quot;#&quot; class=&quot;btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-none&quot;&gt;Square&lt;/a&gt;
<pre class="language-html"><code>&lt;a href=&quot;#&quot; class=&quot;btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-none&quot;&gt;Square&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-primary&quot;&gt;Rounded&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[0.8rem]&quot;&gt;Rounder&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem]&quot;&gt;Pill&lt;/a&gt;</code></pre>
&lt;a href=&quot;#&quot; class=&quot;btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[0.8rem]&quot;&gt;Rounder&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem]&quot;&gt;Pill&lt;/a&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
@@ -868,7 +868,7 @@
<h2 class="!mb-5 !leading-[1.35]">Style</h2>
<div class="card">
<div class="card-body flex-[1_1_auto] p-[40px]">
<a href="#" class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] !mr-1 !mb-2 xl:!mb-0 lg:!mb-0 md:!mb-0">Solid</a>
<a href="#" class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] !mr-1 !mb-2 xl:!mb-0 lg:!mb-0 md:!mb-0">Solid</a>
<a href="#" class="btn btn-soft-primary !rounded-[50rem] !mr-1 !mb-2 xl:!mb-0 lg:!mb-0 md:!mb-0">Soft</a>
<a href="#" class="btn btn-outline-primary !rounded-[50rem] !mr-1 !mb-2 xl:!mb-0 lg:!mb-0 md:!mb-0">Outline</a>
<a href="#" class="btn btn-gradient gradient-1 !rounded-[50rem] !mr-1 !mb-2 xl:!mb-0 lg:!mb-0 md:!mb-0">Gradient</a>
@@ -882,7 +882,7 @@
<div id="collapse-styles" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
<div class="code-wrapper relative !mb-0">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;a href=&quot;#&quot; class=&quot;btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem]&quot;&gt;Solid&lt;/a&gt;
<pre class="language-html"><code>&lt;a href=&quot;#&quot; class=&quot;btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem]&quot;&gt;Solid&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-soft-primary !rounded-[50rem]&quot;&gt;Soft&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-outline-primary !rounded-[50rem]&quot;&gt;Outline&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-gradient gradient-1 !rounded-[50rem] !mr-1 !mb-2 md:!mb-0&quot;&gt;Gradient&lt;/a&gt;
@@ -901,9 +901,9 @@
<h2 class="!mb-5 !leading-[1.35]">Circle</h2>
<div class="card">
<div class="card-body flex-[1_1_auto] p-[40px]">
<a href="#" class="btn btn-circle btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] btn-lg xl:!text-[1.3rem] w-[3rem] h-[3rem] !text-[calc(1.255rem_+_0.06vw)] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%] !mr-2 !mb-2"><i class="uil uil-check before:content-['\e9dd']"></i></a>
<a href="#" class="btn btn-circle btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] w-[2.2rem] h-[2.2rem] !inline-flex !items-center !justify-center !text-[1rem] !leading-none !p-0 !rounded-[100%] !mr-2 !mb-2"><i class="uil uil-check before:content-['\e9dd']"></i></a>
<a href="#" class="btn btn-circle btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] btn-sm w-[1.8rem] h-[1.8rem] !inline-flex !items-center !justify-center !text-[.8rem] !leading-none !p-0 !rounded-[100%] !mr-2 !mb-2"><i class="uil uil-check before:content-['\e9dd']"></i></a>
<a href="#" class="btn btn-circle btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] btn-lg xl:!text-[1.3rem] w-[3rem] h-[3rem] !text-[calc(1.255rem_+_0.06vw)] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%] !mr-2 !mb-2"><i class="uil uil-check before:content-['\e9dd']"></i></a>
<a href="#" class="btn btn-circle btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] w-[2.2rem] h-[2.2rem] !inline-flex !items-center !justify-center !text-[1rem] !leading-none !p-0 !rounded-[100%] !mr-2 !mb-2"><i class="uil uil-check before:content-['\e9dd']"></i></a>
<a href="#" class="btn btn-circle btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] btn-sm w-[1.8rem] h-[1.8rem] !inline-flex !items-center !justify-center !text-[.8rem] !leading-none !p-0 !rounded-[100%] !mr-2 !mb-2"><i class="uil uil-check before:content-['\e9dd']"></i></a>
<a href="#" class="btn btn-circle btn-soft-primary btn-lg xl:!text-[1.3rem] w-[3rem] h-[3rem] !text-[calc(1.255rem_+_0.06vw)] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%] !mr-2 !mb-2"><i class="uil uil-check before:content-['\e9dd']"></i></a>
<a href="#" class="btn btn-circle btn-soft-primary w-[2.2rem] h-[2.2rem] !inline-flex !items-center !justify-center !text-[1rem] !leading-none !p-0 !rounded-[100%] !mr-2 !mb-2"><i class="uil uil-check before:content-['\e9dd']"></i></a>
<a href="#" class="btn btn-circle btn-soft-primary btn-sm w-[1.8rem] h-[1.8rem] !inline-flex !items-center !justify-center !text-[.8rem] !leading-none !p-0 !rounded-[100%] !mr-2 !mb-2"><i class="uil uil-check before:content-['\e9dd']"></i></a>
@@ -926,9 +926,9 @@
<div id="collapse-circle" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
<div class="code-wrapper relative !mb-0">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;a href=&quot;#&quot; class=&quot;btn btn-circle btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] btn-lg&quot;&gt;&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;&lt;/a&gt;
<pre class="language-html"><code>&lt;a href=&quot;#&quot; class=&quot;btn btn-circle btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] btn-lg&quot;&gt;&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-circle btn-primary&quot;&gt;&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-circle btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] btn-sm&quot;&gt;&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-circle btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] btn-sm&quot;&gt;&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-circle btn-soft-primary btn-lg&quot;&gt;&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-circle btn-soft-primary&quot;&gt;&lt;i class=&quot;uil uil-check&quot;&gt;&lt;/i&gt;&lt;/a&gt;
@@ -1025,8 +1025,8 @@
<h2 class="!mb-5 !leading-[1.35]">Icon</h2>
<div class="card">
<div class="card-body flex-[1_1_auto] p-[40px]">
<a class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] btn-icon btn-icon-start rounded !mr-2"><i class="uil uil-apple !mr-[.3rem] before:content-['\e938']"></i> App Store</a>
<a class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] btn-icon btn-icon-end rounded">Google Play <i class="uil uil-google-play !mr-[.3rem] before:content-['\eb4f']"></i></a>
<a class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] btn-icon btn-icon-start rounded !mr-2"><i class="uil uil-apple !mr-[.3rem] before:content-['\e938']"></i> App Store</a>
<a class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] btn-icon btn-icon-end rounded">Google Play <i class="uil uil-google-play !mr-[.3rem] before:content-['\eb4f']"></i></a>
</div>
<!--/.card-body -->
<div class="card-footer !relative">
@@ -1036,11 +1036,11 @@
<div id="collapse-icon" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
<div class="code-wrapper relative !mb-0">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;a class=&quot;btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] btn-icon btn-icon-start rounded&quot;&gt;
<pre class="language-html"><code>&lt;a class=&quot;btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] btn-icon btn-icon-start rounded&quot;&gt;
&lt;i class=&quot;uil uil-apple&quot;&gt;&lt;/i&gt; App Store
&lt;/a&gt;
&lt;a class=&quot;btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] btn-icon btn-icon-end rounded&quot;&gt;
&lt;a class=&quot;btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] btn-icon btn-icon-end rounded&quot;&gt;
Google Play &lt;i class=&quot;uil uil-google-play&quot;&gt;&lt;/i&gt;
&lt;/a&gt;</code></pre>
</div>
@@ -1056,7 +1056,7 @@
<h2 class="!mb-5 !leading-[1.35]">Expand</h2>
<div class="card">
<div class="card-body flex-[1_1_auto] p-[40px]">
<a href="#" class="btn btn-expand btn-primary !text-white bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] !mr-5 !mb-3 xl:!mb-0 lg:!mb-0"><i class="uil uil-arrow-right before:content-['\e94c']"></i><span>Learn More</span></a>
<a href="#" class="btn btn-expand btn-primary !text-white bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] !mr-5 !mb-3 xl:!mb-0 lg:!mb-0"><i class="uil uil-arrow-right before:content-['\e94c']"></i><span>Learn More</span></a>
<br class="xl:!hidden lg:!hidden">
<a href="#" class="btn btn-expand btn-soft-primary !rounded-[50rem] !mr-5"><i class="uil uil-arrow-right before:content-['\e94c']"></i><span>Learn More</span></a>
</div>
@@ -1069,7 +1069,7 @@
<div class="code-wrapper relative !mb-0">
<div class="code-wrapper-inner">
<pre class="language-html"><code>
&#60;a href="#" class="btn btn-expand btn-primary !text-white bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] !mr-5 !mb-3 xl:!mb-0 lg:!mb-0"&#62;&#60;i class="uil uil-arrow-right before:content-['\e94c']"&#62;&#60;/i&#62;&#60;span&#62;Learn More&#60;/span&#62;&#60;/a&#62;
&#60;a href="#" class="btn btn-expand btn-primary !text-white bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] !mr-5 !mb-3 xl:!mb-0 lg:!mb-0"&#62;&#60;i class="uil uil-arrow-right before:content-['\e94c']"&#62;&#60;/i&#62;&#60;span&#62;Learn More&#60;/span&#62;&#60;/a&#62;
&#60;br class="xl:!hidden lg:!hidden"&#62;
&#60;a href="#" class="btn btn-expand btn-soft-primary !rounded-[50rem] !mr-5"&#62;&#60;i class="uil uil-arrow-right before:content-['\e94c']"&#62;&#60;/i&#62;&#60;span&#62;Learn More&#60;/span&#62;&#60;/a&#62;</code></pre>
</div>
@@ -1085,7 +1085,7 @@
<h2 class="!mb-5 !leading-[1.35]">Play</h2>
<div class="card">
<div class="card-body flex-[1_1_auto] p-[40px]">
<a href="#" class="btn btn-circle btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] btn-play ripple !mr-5 xl:!text-[2.3rem] !text-[calc(1.355rem_+_1.26vw)] w-[3.5rem] h-[3.5rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%] !translate-y-0 !tracking-[-0.01rem] !relative before:content-[''] before:block before:absolute before:opacity-80 before:animate-[ripple-1_2s_infinite_ease-in-out] before:z-[-1] before:rounded-[50%] before:inset-0 before:bg-[#3f78e0] after:opacity-60 after:animate-[ripple-2_2s_infinite_ease-in-out] after:content-[''] after:block after:absolute after:z-[-1] after:rounded-[50%] after:inset-0 after:bg-[#3f78e0] after:[animation-delay:.5s]"><i class="icn-caret-right"></i></a>
<a href="#" class="btn btn-circle btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] btn-play ripple !mr-5 xl:!text-[2.3rem] !text-[calc(1.355rem_+_1.26vw)] w-[3.5rem] h-[3.5rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%] !translate-y-0 !tracking-[-0.01rem] !relative before:content-[''] before:block before:absolute before:opacity-80 before:animate-[ripple-1_2s_infinite_ease-in-out] before:z-[-1] before:rounded-[50%] before:inset-0 before:bg-[#e31e24] after:opacity-60 after:animate-[ripple-2_2s_infinite_ease-in-out] after:content-[''] after:block after:absolute after:z-[-1] after:rounded-[50%] after:inset-0 after:bg-[#e31e24] after:[animation-delay:.5s]"><i class="icn-caret-right"></i></a>
<a href="#" class="btn btn-circle btn-soft-primary btn-play ripple xl:!text-[2.3rem] w-[3.5rem] h-[3.5rem] !text-[calc(1.355rem_+_1.26vw)] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%] !translate-y-0 !tracking-[-0.01rem] !relative before:content-[''] before:block before:absolute before:opacity-80 before:animate-[ripple-1_2s_infinite_ease-in-out] before:z-[-1] before:rounded-[50%] before:inset-0 before:bg-[#e0e9fa] after:opacity-60 after:animate-[ripple-2_2s_infinite_ease-in-out] after:content-[''] after:block after:absolute after:z-[-1] after:rounded-[50%] after:inset-0 after:bg-[#e0e9fa] after:[animation-delay:.5s]"><i class="icn-caret-right"></i></a>
</div>
<!--/.card-body -->
@@ -1096,7 +1096,7 @@
<div id="collapse-play" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
<div class="code-wrapper relative !mb-0">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;a href="#" class="btn btn-circle btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] btn-play ripple !mr-5 xl:!text-[2.3rem] !text-[calc(1.355rem_+_1.26vw)] w-[3.5rem] h-[3.5rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%] !translate-y-0 !tracking-[-0.01rem] !relative before:content-[''] before:block before:absolute before:opacity-80 before:animate-[ripple-1_2s_infinite_ease-in-out] before:z-[-1] before:rounded-[50%] before:inset-0 before:bg-[#3f78e0] after:opacity-60 after:animate-[ripple-2_2s_infinite_ease-in-out] after:content-[''] after:block after:absolute after:z-[-1] after:rounded-[50%] after:inset-0 after:bg-[#3f78e0] after:[animation-delay:.5s]"&gt;&lt;i class="icn-caret-right"&gt;&lt;/i&gt;&lt;/a&gt;
<pre class="language-html"><code>&lt;a href="#" class="btn btn-circle btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] btn-play ripple !mr-5 xl:!text-[2.3rem] !text-[calc(1.355rem_+_1.26vw)] w-[3.5rem] h-[3.5rem] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%] !translate-y-0 !tracking-[-0.01rem] !relative before:content-[''] before:block before:absolute before:opacity-80 before:animate-[ripple-1_2s_infinite_ease-in-out] before:z-[-1] before:rounded-[50%] before:inset-0 before:bg-[#e31e24] after:opacity-60 after:animate-[ripple-2_2s_infinite_ease-in-out] after:content-[''] after:block after:absolute after:z-[-1] after:rounded-[50%] after:inset-0 after:bg-[#e31e24] after:[animation-delay:.5s]"&gt;&lt;i class="icn-caret-right"&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a href="#" class="btn btn-circle btn-soft-primary btn-play ripple xl:!text-[2.3rem] w-[3.5rem] h-[3.5rem] !text-[calc(1.355rem_+_1.26vw)] !inline-flex !items-center !justify-center !leading-none !p-0 !rounded-[100%] !translate-y-0 !tracking-[-0.01rem] !relative before:content-[''] before:block before:absolute before:opacity-80 before:animate-[ripple-1_2s_infinite_ease-in-out] before:z-[-1] before:rounded-[50%] before:inset-0 before:bg-[#e0e9fa] after:opacity-60 after:animate-[ripple-2_2s_infinite_ease-in-out] after:content-[''] after:block after:absolute after:z-[-1] after:rounded-[50%] after:inset-0 after:bg-[#e0e9fa] after:[animation-delay:.5s]"&gt;&lt;i class="icn-caret-right"&gt;&lt;/i&gt;&lt;/a&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
@@ -1131,9 +1131,9 @@
<!-- /.container -->
</section>
<!-- /section -->
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#3f78e0] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#e31e24] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
<path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
<path class="fill-none stroke-[#e31e24] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
</svg>
</div>
<script src="../../assets/js/plugins.js"></script>
public/docs/elements/card.html
+53 -53
View File
@@ -536,13 +536,13 @@
<li class="nav-item dropdown language-select uppercase group">
<a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
<ul class="dropdown-menu group-hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">Es</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">Es</a></li>
</ul>
</li>
<li class="nav-item hidden xl:block lg:block md:block">
<a class='btn btn-sm btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</a>
<a class='btn btn-sm btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</a>
</li>
<li class="nav-item xl:!hidden lg:!hidden">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
@@ -578,11 +578,11 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Usage</h6>
<nav id="collapse-usage">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='../index.html'>Get Started</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../forms.html'>Forms</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../faq.html'>FAQ</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../credits.html'>Credits</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='../index.html'>Get Started</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../forms.html'>Forms</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../faq.html'>FAQ</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../credits.html'>Credits</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -592,13 +592,13 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Styleguide</h6>
<nav id="collapse-style">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/misc.html'>Misc</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/misc.html'>Misc</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -608,33 +608,33 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Elements</h6>
<nav id="collapse-elements">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='accordion.html'>Accordion</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='hover:!text-[#3f78e0] active' href='card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='typography.html'>Typography</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='accordion.html'>Accordion</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='hover:!text-[#e31e24] active' href='card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='typography.html'>Typography</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -647,10 +647,10 @@
<h6 class="widget-title text-[0.85rem] !mb-2 xl:!pl-5">On this page</h6>
<nav class="xl:!pl-5" id="sidebar-nav">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] active" href="#snippet-1">Basic</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-2">Color</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-3">Border</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-4">Image</a></li>
<li><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] active" href="#snippet-1">Basic</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-2">Color</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-3">Border</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-4">Image</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -820,7 +820,7 @@
<section id="snippet-3" class="wrapper pt-24">
<h2 class="!mb-3 !leading-[1.35]">Border</h2>
<p class="lead !leading-[1.65] text-[0.9rem] font-medium">Available options:</p>
<p class="lead !leading-[1.65] text-[0.9rem] font-medium !mb-8"><code class="code">border-[#3f78e0]</code>, <code class="code">border-[#54a8c7]</code>, <code class="code">border-[#45c4a0]</code>, <code class="code">border-[#7cb798]</code>, <code class="code">border-[#343f52]</code>, <code class="code">border-[#f78b77]</code>, <code class="code">border-[#d16b86]</code>, <code class="code">border-[#747ed1]</code>, <code class="code">border-[#e2626b]</code>, <code class="code">border-[#a07cc5]</code>, <code class="code">border-[#fab758]</code>, <code class="code">border-[#e668b3]</code>, <code class="code">border-[#5eb9f0]</code>, <code class="code">border-[#e31e24]</code>, <code class="code">border-[#c5d7f6]</code>, <code class="code">border-[#cce5ee]</code>, <code class="code">border-[#c7ede3]</code>, <code class="code">border-[#d8e9e0]</code>, <code class="code">border-[#c2c5cb]</code>, <code class="code">border-[#fddcd6]</code>, <code class="code">border-[#f1d3db]</code>, <code class="code">border-[#d5d8f1]</code>, <code class="code">border-[#f6d0d3]</code>, <code class="code">border-[#e3d8ee]</code>, <code class="code">border-[#fee9cd]</code>, <code class="code">border-[#f8d2e8]</code>, <code class="code">border-[#cfeafb]</code>, <code class="code">border-[#cfceea]</code>.</p>
<p class="lead !leading-[1.65] text-[0.9rem] font-medium !mb-8"><code class="code">border-[#e31e24]</code>, <code class="code">border-[#54a8c7]</code>, <code class="code">border-[#45c4a0]</code>, <code class="code">border-[#7cb798]</code>, <code class="code">border-[#343f52]</code>, <code class="code">border-[#f78b77]</code>, <code class="code">border-[#d16b86]</code>, <code class="code">border-[#747ed1]</code>, <code class="code">border-[#e2626b]</code>, <code class="code">border-[#a07cc5]</code>, <code class="code">border-[#fab758]</code>, <code class="code">border-[#e668b3]</code>, <code class="code">border-[#5eb9f0]</code>, <code class="code">border-[#e31e24]</code>, <code class="code">border-[#c5d7f6]</code>, <code class="code">border-[#cce5ee]</code>, <code class="code">border-[#c7ede3]</code>, <code class="code">border-[#d8e9e0]</code>, <code class="code">border-[#c2c5cb]</code>, <code class="code">border-[#fddcd6]</code>, <code class="code">border-[#f1d3db]</code>, <code class="code">border-[#d5d8f1]</code>, <code class="code">border-[#f6d0d3]</code>, <code class="code">border-[#e3d8ee]</code>, <code class="code">border-[#fee9cd]</code>, <code class="code">border-[#f8d2e8]</code>, <code class="code">border-[#cfeafb]</code>, <code class="code">border-[#cfceea]</code>.</p>
<div class="card">
<div class="card-body flex-[1_1_auto] p-[40px]">
<div class="flex flex-wrap mx-[-15px] g-6 !mt-[-30px]">
@@ -879,11 +879,11 @@
<div id="collapse-3" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
<div class="code-wrapper relative !mb-0">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;div class=&quot;card card-border-start border-[#3f78e0]&quot;&gt;
<pre class="language-html"><code>&lt;div class=&quot;card card-border-start border-[#e31e24]&quot;&gt;
&lt;div class=&quot;card-body&quot;&gt;...&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] card-border-top border-[#3f78e0]&quot;&gt;
&lt;div class=&quot;card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] card-border-top border-[#e31e24]&quot;&gt;
&lt;div class=&quot;card-body&quot;&gt;...&lt;/div&gt;
&lt;/div&gt;
@@ -891,7 +891,7 @@
&lt;div class=&quot;card-body&quot;&gt;...&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;card !bg-[#edf2fc] card-border-bottom border-[#3f78e0]&quot;&gt;
&lt;div class=&quot;card !bg-[#edf2fc] card-border-bottom border-[#e31e24]&quot;&gt;
&lt;div class=&quot;card-body&quot;&gt;...&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
@@ -993,9 +993,9 @@
<!-- /.container -->
</section>
<!-- /section -->
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#3f78e0] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#e31e24] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
<path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
<path class="fill-none stroke-[#e31e24] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
</svg>
</div>
<script src="../../assets/js/plugins.js"></script>
public/docs/elements/carousel.html
+56 -56
View File
@@ -536,13 +536,13 @@
<li class="nav-item dropdown language-select uppercase group">
<a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
<ul class="dropdown-menu group-hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">Es</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">Es</a></li>
</ul>
</li>
<li class="nav-item hidden xl:block lg:block md:block">
<a class='btn btn-sm btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</a>
<a class='btn btn-sm btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</a>
</li>
<li class="nav-item xl:!hidden lg:!hidden">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
@@ -578,11 +578,11 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Usage</h6>
<nav id="collapse-usage">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='../index.html'>Get Started</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../forms.html'>Forms</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../faq.html'>FAQ</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../credits.html'>Credits</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='../index.html'>Get Started</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../forms.html'>Forms</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../faq.html'>FAQ</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../credits.html'>Credits</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -592,13 +592,13 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Styleguide</h6>
<nav id="collapse-style">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/misc.html'>Misc</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/misc.html'>Misc</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -608,33 +608,33 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Elements</h6>
<nav id="collapse-elements">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='accordion.html'>Accordion</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='hover:!text-[#3f78e0] active' href='carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='typography.html'>Typography</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='accordion.html'>Accordion</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='hover:!text-[#e31e24] active' href='carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='typography.html'>Typography</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -647,12 +647,12 @@
<h6 class="widget-title text-[0.85rem] !mb-2 xl:!pl-5">On this page</h6>
<nav class="xl:!pl-5" id="sidebar-nav">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] active" href="#snippet-1">Simple Carousel</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-2">Card Carousel</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-3">Text Slider</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-4">Image Slider</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-5">Thumbnail Slider</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#instructions">Instructions</a></li>
<li><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] active" href="#snippet-1">Simple Carousel</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-2">Card Carousel</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-3">Text Slider</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-4">Image Slider</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-5">Thumbnail Slider</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#instructions">Instructions</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -997,8 +997,8 @@
<h2 class="!mb-3 !leading-[1.35]">Image Slider</h2>
<p class="lead !leading-[1.65] text-[0.9rem] font-medium">Remove <code class="code">.dots-over</code> class to move bullets below the images.</p>
<p class="lead !mb-3">Use any available <code class="code">.m-*</code>, <code class="code">.p-*</code>, <code class="code">.bg-*</code> and <code class="code">.text-*</code> helper class to style and place the captions. You can change their placement with the help of flex classes as well.</p>
<p class="lead !leading-[1.65] text-[0.9rem] font-medium">Use <a href="https://animate.style/" class="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">animate.css</a> animation and utility classes to add animations and delays to captions.</p>
<p class="lead !leading-[1.65] text-[0.9rem] font-medium !mb-8">For hero slider (slider with fixed height and background cover images) with captions example check out <a class='external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-[\'\e906\'] after:text-[0.7rem] after:font-Custom' href='../../demo15.html' target='_blank'>Demo 15</a></p>
<p class="lead !leading-[1.65] text-[0.9rem] font-medium">Use <a href="https://animate.style/" class="external hover:!text-[#e31e24] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">animate.css</a> animation and utility classes to add animations and delays to captions.</p>
<p class="lead !leading-[1.65] text-[0.9rem] font-medium !mb-8">For hero slider (slider with fixed height and background cover images) with captions example check out <a class='external hover:!text-[#e31e24] !pr-[1.4rem] after:content-[\'\e906\'] after:text-[0.7rem] after:font-Custom' href='../../demo15.html' target='_blank'>Demo 15</a></p>
<div class="card">
<div class="card-body flex-[1_1_auto] p-[40px]">
<div class="swiper-container dots-over relative !z-10" data-margin="5" data-dots="true" data-nav="true" data-autoheight="true">
@@ -1320,11 +1320,11 @@
<tbody>
<tr>
<td class="!pl-0"><code class="code my-0">.swiper-hero</code></td>
<td>Enables hero slider, ie: <a class='external !pr-[1.4rem] after:content-[\'\e906\'] after:text-[0.7rem] after:font-Custom !mt-[-0.25rem] hover:!text-[#3f78e0] hover:after:!text-[#3f78e0]' href='../../demo15.html' target='_blank'>Demo 15</a></td>
<td>Enables hero slider, ie: <a class='external !pr-[1.4rem] after:content-[\'\e906\'] after:text-[0.7rem] after:font-Custom !mt-[-0.25rem] hover:!text-[#e31e24] hover:after:!text-[#e31e24]' href='../../demo15.html' target='_blank'>Demo 15</a></td>
</tr>
<tr>
<td class="!pl-0"><code class="code my-0">.swiper-fullscreen</code></td>
<td>Enables fullscreen slider, ie: <a class='external !pr-[1.4rem] after:content-[\'\e906\'] after:text-[0.7rem] after:font-Custom !mt-[-0.25rem] hover:!text-[#3f78e0] hover:after:!text-[#3f78e0]' href='../../demo23.html' target='_blank'>Demo 23</a></td>
<td>Enables fullscreen slider, ie: <a class='external !pr-[1.4rem] after:content-[\'\e906\'] after:text-[0.7rem] after:font-Custom !mt-[-0.25rem] hover:!text-[#e31e24] hover:after:!text-[#e31e24]' href='../../demo23.html' target='_blank'>Demo 23</a></td>
</tr>
<tr>
<td class="!pl-0"><code class="code my-0">.nav-dark</code></td>
@@ -1361,7 +1361,7 @@
</tbody>
</table>
<h4>Full examples</h4>
<a class='external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-[\'\e906\'] after:text-[0.7rem] after:font-Custom' href='../blocks/blog.html' target='_blank'>Blog Blocks</a>, <a class='external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-[\'\e906\'] after:text-[0.7rem] after:font-Custom' href='../blocks/testimonials.html' target='_blank'>Testimonials Blocks</a>, <a class='external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-[\'\e906\'] after:text-[0.7rem] after:font-Custom' href='../blocks/portfolio.html' target='_blank'>Portfolio Blocks</a>, <a class='external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-[\'\e906\'] after:text-[0.7rem] after:font-Custom' href='../blocks/clients.html' target='_blank'>Client Blocks</a>
<a class='external hover:!text-[#e31e24] !pr-[1.4rem] after:content-[\'\e906\'] after:text-[0.7rem] after:font-Custom' href='../blocks/blog.html' target='_blank'>Blog Blocks</a>, <a class='external hover:!text-[#e31e24] !pr-[1.4rem] after:content-[\'\e906\'] after:text-[0.7rem] after:font-Custom' href='../blocks/testimonials.html' target='_blank'>Testimonials Blocks</a>, <a class='external hover:!text-[#e31e24] !pr-[1.4rem] after:content-[\'\e906\'] after:text-[0.7rem] after:font-Custom' href='../blocks/portfolio.html' target='_blank'>Portfolio Blocks</a>, <a class='external hover:!text-[#e31e24] !pr-[1.4rem] after:content-[\'\e906\'] after:text-[0.7rem] after:font-Custom' href='../blocks/clients.html' target='_blank'>Client Blocks</a>
</div>
<!--/.card-body -->
</div>
@@ -1391,9 +1391,9 @@
<!-- /.container -->
</section>
<!-- /section -->
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#3f78e0] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#e31e24] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
<path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
<path class="fill-none stroke-[#e31e24] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
</svg>
</div>
<script src="../../assets/js/plugins.js"></script>
public/docs/elements/dividers.html
+49 -49
View File
@@ -536,13 +536,13 @@
<li class="nav-item dropdown language-select uppercase group">
<a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
<ul class="dropdown-menu group-hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">Es</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">Es</a></li>
</ul>
</li>
<li class="nav-item hidden xl:block lg:block md:block">
<a class='btn btn-sm btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</a>
<a class='btn btn-sm btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</a>
</li>
<li class="nav-item xl:!hidden lg:!hidden">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
@@ -578,11 +578,11 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Usage</h6>
<nav id="collapse-usage">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='../index.html'>Get Started</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../forms.html'>Forms</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../faq.html'>FAQ</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../credits.html'>Credits</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='../index.html'>Get Started</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../forms.html'>Forms</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../faq.html'>FAQ</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../credits.html'>Credits</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -592,13 +592,13 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Styleguide</h6>
<nav id="collapse-style">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/misc.html'>Misc</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/misc.html'>Misc</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -608,33 +608,33 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Elements</h6>
<nav id="collapse-elements">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='accordion.html'>Accordion</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='hover:!text-[#3f78e0] active' href='dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='typography.html'>Typography</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='accordion.html'>Accordion</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='hover:!text-[#e31e24] active' href='dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='typography.html'>Typography</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -647,10 +647,10 @@
<h6 class="widget-title text-[0.85rem] !mb-2 xl:!pl-5">On this page</h6>
<nav class="xl:!pl-5" id="sidebar-nav">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] active" href="#snippet-1">Borders</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-2">Angles</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-3">Waves</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-4">Vertical</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] active" href="#snippet-1">Borders</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-2">Angles</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-3">Waves</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-4">Vertical</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -1010,9 +1010,9 @@
<!-- /.container -->
</section>
<!-- /section -->
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#3f78e0] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#e31e24] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
<path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
<path class="fill-none stroke-[#e31e24] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
</svg>
</div>
<script src="../../assets/js/plugins.js"></script>
public/docs/elements/form-elements.html
+51 -51
View File
@@ -536,13 +536,13 @@
<li class="nav-item dropdown language-select uppercase group">
<a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
<ul class="dropdown-menu group-hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">Es</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">Es</a></li>
</ul>
</li>
<li class="nav-item hidden xl:block lg:block md:block">
<a class='btn btn-sm btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</a>
<a class='btn btn-sm btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</a>
</li>
<li class="nav-item xl:!hidden lg:!hidden">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
@@ -578,11 +578,11 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Usage</h6>
<nav id="collapse-usage">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='../index.html'>Get Started</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../forms.html'>Forms</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../faq.html'>FAQ</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../credits.html'>Credits</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='../index.html'>Get Started</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../forms.html'>Forms</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../faq.html'>FAQ</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../credits.html'>Credits</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -592,13 +592,13 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Styleguide</h6>
<nav id="collapse-style">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/misc.html'>Misc</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/misc.html'>Misc</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -608,33 +608,33 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Elements</h6>
<nav id="collapse-elements">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='accordion.html'>Accordion</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='hover:!text-[#3f78e0] active' href='form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='typography.html'>Typography</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='accordion.html'>Accordion</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='hover:!text-[#e31e24] active' href='form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='typography.html'>Typography</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -647,12 +647,12 @@
<h6 class="widget-title text-[0.85rem] !mb-2 xl:!pl-5">On this page</h6>
<nav class="xl:!pl-5" id="sidebar-nav">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] active" href="#snippet-1">Input</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-2">Textarea</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-3">Checks</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-4">Radios</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-5">Disabled</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-6">Select</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] active" href="#snippet-1">Input</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-2">Textarea</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-3">Checks</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-4">Radios</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-5">Disabled</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-6">Select</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -901,9 +901,9 @@
<!-- /.container -->
</section>
<!-- /section -->
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#3f78e0] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#e31e24] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
<path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
<path class="fill-none stroke-[#e31e24] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
</svg>
</div>
<script src="../../assets/js/plugins.js"></script>
public/docs/elements/image-hover.html
+49 -49
View File
@@ -536,13 +536,13 @@
<li class="nav-item dropdown language-select uppercase group">
<a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
<ul class="dropdown-menu group-hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">Es</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">Es</a></li>
</ul>
</li>
<li class="nav-item hidden xl:block lg:block md:block">
<a class='btn btn-sm btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</a>
<a class='btn btn-sm btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</a>
</li>
<li class="nav-item xl:!hidden lg:!hidden">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
@@ -578,11 +578,11 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Usage</h6>
<nav id="collapse-usage">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='../index.html'>Get Started</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../forms.html'>Forms</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../faq.html'>FAQ</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../credits.html'>Credits</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='../index.html'>Get Started</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../forms.html'>Forms</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../faq.html'>FAQ</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../credits.html'>Credits</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -592,13 +592,13 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Styleguide</h6>
<nav id="collapse-style">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/misc.html'>Misc</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/misc.html'>Misc</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -608,33 +608,33 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Elements</h6>
<nav id="collapse-elements">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='accordion.html'>Accordion</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='hover:!text-[#3f78e0] active' href='image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='typography.html'>Typography</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='accordion.html'>Accordion</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='hover:!text-[#e31e24] active' href='image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='typography.html'>Typography</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -647,10 +647,10 @@
<h6 class="widget-title text-[0.85rem] !mb-2 xl:!pl-5">On this page</h6>
<nav class="xl:!pl-5" id="sidebar-nav">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] active" href="#snippet-1">Tooltip</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-2">Overlay</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-3">Simple</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-4">Cursor</a></li>
<li><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] active" href="#snippet-1">Tooltip</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-2">Overlay</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-3">Simple</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-4">Cursor</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -873,9 +873,9 @@
<!-- /.container -->
</section>
<!-- /section -->
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#3f78e0] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#e31e24] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
<path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
<path class="fill-none stroke-[#e31e24] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
</svg>
</div>
<script src="../../assets/js/plugins.js"></script>
public/docs/elements/image-mask.html
+48 -48
View File
@@ -536,13 +536,13 @@
<li class="nav-item dropdown language-select uppercase group">
<a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
<ul class="dropdown-menu group-hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">Es</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">Es</a></li>
</ul>
</li>
<li class="nav-item hidden xl:block lg:block md:block">
<a class='btn btn-sm btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</a>
<a class='btn btn-sm btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</a>
</li>
<li class="nav-item xl:!hidden lg:!hidden">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
@@ -578,11 +578,11 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Usage</h6>
<nav id="collapse-usage">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='../index.html'>Get Started</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../forms.html'>Forms</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../faq.html'>FAQ</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../credits.html'>Credits</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='../index.html'>Get Started</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../forms.html'>Forms</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../faq.html'>FAQ</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../credits.html'>Credits</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -592,13 +592,13 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Styleguide</h6>
<nav id="collapse-style">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/misc.html'>Misc</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/misc.html'>Misc</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -608,33 +608,33 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Elements</h6>
<nav id="collapse-elements">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='accordion.html'>Accordion</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='hover:!text-[#3f78e0] active' href='image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='typography.html'>Typography</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='accordion.html'>Accordion</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='hover:!text-[#e31e24] active' href='image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='typography.html'>Typography</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -647,9 +647,9 @@
<h6 class="widget-title text-[0.85rem] !mb-2 xl:!pl-5">On this page</h6>
<nav class="xl:!pl-5" id="sidebar-nav">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] active" href="#snippet-1">Mask 1</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-2">Mask 2</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-3">Mask 3</a></li>
<li><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] active" href="#snippet-1">Mask 1</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-2">Mask 2</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-3">Mask 3</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -772,9 +772,9 @@
<!-- /.container -->
</section>
<!-- /section -->
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#3f78e0] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#e31e24] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
<path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
<path class="fill-none stroke-[#e31e24] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
</svg>
</div>
<script src="../../assets/js/plugins.js"></script>
public/docs/elements/lightbox.html
+48 -48
View File
@@ -536,13 +536,13 @@
<li class="nav-item dropdown language-select uppercase group">
<a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
<ul class="dropdown-menu group-hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">Es</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">Es</a></li>
</ul>
</li>
<li class="nav-item hidden xl:block lg:block md:block">
<a class='btn btn-sm btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</a>
<a class='btn btn-sm btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</a>
</li>
<li class="nav-item xl:!hidden lg:!hidden">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
@@ -578,11 +578,11 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Usage</h6>
<nav id="collapse-usage">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='../index.html'>Get Started</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../forms.html'>Forms</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../faq.html'>FAQ</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../credits.html'>Credits</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='../index.html'>Get Started</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../forms.html'>Forms</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../faq.html'>FAQ</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../credits.html'>Credits</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -592,13 +592,13 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Styleguide</h6>
<nav id="collapse-style">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/misc.html'>Misc</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/misc.html'>Misc</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -608,33 +608,33 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Elements</h6>
<nav id="collapse-elements">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='accordion.html'>Accordion</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='hover:!text-[#3f78e0] active' href='lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='typography.html'>Typography</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='accordion.html'>Accordion</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='hover:!text-[#e31e24] active' href='lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='typography.html'>Typography</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -647,9 +647,9 @@
<h6 class="widget-title text-[0.85rem] !mb-2 xl:!pl-5">On this page</h6>
<nav class="xl:!pl-5" id="sidebar-nav">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] active" href="#instructions">Instructions</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-1">Image & Caption</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-2">Video</a></li>
<li><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] active" href="#instructions">Instructions</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-1">Image & Caption</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-2">Video</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -822,9 +822,9 @@
<!-- /.container -->
</section>
<!-- /section -->
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#3f78e0] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#e31e24] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
<path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
<path class="fill-none stroke-[#e31e24] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
</svg>
</div>
<script src="../../assets/js/plugins.js"></script>
public/docs/elements/modal.html
+66 -66
View File
@@ -536,13 +536,13 @@
<li class="nav-item dropdown language-select uppercase group">
<a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
<ul class="dropdown-menu group-hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">Es</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">Es</a></li>
</ul>
</li>
<li class="nav-item hidden xl:block lg:block md:block">
<a class='btn btn-sm btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</a>
<a class='btn btn-sm btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</a>
</li>
<li class="nav-item xl:!hidden lg:!hidden">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
@@ -578,11 +578,11 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Usage</h6>
<nav id="collapse-usage">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='../index.html'>Get Started</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../forms.html'>Forms</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../faq.html'>FAQ</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../credits.html'>Credits</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='../index.html'>Get Started</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../forms.html'>Forms</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../faq.html'>FAQ</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../credits.html'>Credits</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -592,13 +592,13 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Styleguide</h6>
<nav id="collapse-style">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/misc.html'>Misc</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/misc.html'>Misc</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -608,33 +608,33 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Elements</h6>
<nav id="collapse-elements">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='accordion.html'>Accordion</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='hover:!text-[#3f78e0] active' href='modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='typography.html'>Typography</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='accordion.html'>Accordion</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='hover:!text-[#e31e24] active' href='modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='typography.html'>Typography</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -647,11 +647,11 @@
<h6 class="widget-title text-[0.85rem] !mb-2 xl:!pl-5">On this page</h6>
<nav class="xl:!pl-5" id="sidebar-nav">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] active" href="#snippet-1">Cookie</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-2">Subscription</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-3">Sign In</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-4">Sign Up</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-5">Popup</a></li>
<li><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] active" href="#snippet-1">Cookie</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-2">Subscription</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-3">Sign In</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-4">Sign Up</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-5">Popup</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -664,7 +664,7 @@
<h2 class="!mb-5 !leading-[1.35]">Cookie</h2>
<div class="card">
<div class="card-body flex-[1_1_auto] p-[40px]">
<a href="#" class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] mx-1 !mb-2 xl:!mb-0 lg:!mb-0 md:!mb-0" data-bs-toggle="modal" data-bs-target="#modal-01">Cookie</a>
<a href="#" class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] mx-1 !mb-2 xl:!mb-0 lg:!mb-0 md:!mb-0" data-bs-toggle="modal" data-bs-target="#modal-01">Cookie</a>
<div class="modal fade modal-bottom-center !m-0 !p-0" id="modal-01" tabindex="-1">
<div class="modal-dialog modal-xl lg:!w-[800px] xl:!w-[1140px] lg:!max-w-[800px] xl:!max-w-[1140px]">
<div class="modal-content">
@@ -676,7 +676,7 @@
</div>
<!--/column -->
<div class="md:w-5/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full xl:!text-right lg:!text-right my-auto">
<a href="#" class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem]" data-bs-dismiss="modal" aria-label="Close">I Understand</a>
<a href="#" class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem]" data-bs-dismiss="modal" aria-label="Close">I Understand</a>
</div>
<!--/column -->
</div>
@@ -698,7 +698,7 @@
<div id="collapse-1" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
<div class="code-wrapper relative !mb-0">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;a href=&quot;#&quot; class=&quot;btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] mx-1 !mb-2 md:!mb-0&quot; data-bs-toggle=&quot;modal&quot; data-bs-target=&quot;#modal-01&quot;&gt;Cookie&lt;/a&gt;
<pre class="language-html"><code>&lt;a href=&quot;#&quot; class=&quot;btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] mx-1 !mb-2 md:!mb-0&quot; data-bs-toggle=&quot;modal&quot; data-bs-target=&quot;#modal-01&quot;&gt;Cookie&lt;/a&gt;
&lt;div class=&quot;modal fade modal-bottom-center&quot; id=&quot;modal-01&quot; tabindex=&quot;-1&quot;&gt;
&lt;div class=&quot;modal-dialog modal-xl&quot;&gt;
@@ -711,7 +711,7 @@
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;div class=&quot;md:w-5/12 flex-[0_0_auto] !px-[15px] max-w-full lg:w-4/12 flex-[0_0_auto] !px-[15px] max-w-full xl:!text-right lg:!text-right my-auto&quot;&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem]&quot; data-bs-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot;&gt;I Understand&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem]&quot; data-bs-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot;&gt;I Understand&lt;/a&gt;
&lt;/div&gt;
&lt;!--/column --&gt;
&lt;/div&gt;
@@ -737,7 +737,7 @@
<h2 class="!mb-5 !leading-[1.35]">Subscription</h2>
<div class="card">
<div class="card-body flex-[1_1_auto] p-[40px]">
<a href="#" class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] mx-1 !mb-2 xl:!mb-0 lg:!mb-0 md:!mb-0" data-bs-toggle="modal" data-bs-target="#modal-02">Subscription</a>
<a href="#" class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] mx-1 !mb-2 xl:!mb-0 lg:!mb-0 md:!mb-0" data-bs-toggle="modal" data-bs-target="#modal-02">Subscription</a>
<div class="modal fade !m-0 !p-0" id="modal-02" tabindex="-1">
<div class="modal-dialog modal-dialog-centered modal-md">
<div class="modal-content !text-center">
@@ -762,7 +762,7 @@
<div class="!text-left input-group !relative form-floating">
<input type="email" value="" name="EMAIL" class="required email form-control relative block w-full text-[.75rem] font-medium !text-[#60697b] bg-[#fefefe] bg-clip-padding border shadow-[0_0_1.25rem_rgba(30,34,40,0.04)] rounded-[0.4rem] border-solid border-[rgba(8,60,130,0.07)] transition-[border-color] duration-[0.15s] ease-in-out focus:shadow-[0_0_1.25rem_rgba(30,34,40,0.04),unset] focus-visible:!border-[rgba(63,120,224,0.5)] placeholder:!text-[#959ca9] placeholder:opacity-100 m-0 !pr-9 p-[.6rem_1rem] h-[calc(2.5rem_+_2px)] min-h-[calc(2.5rem_+_2px)] !leading-[1.25]" placeholder="" id="mce-EMAIL">
<label for="mce-EMAIL" class="!text-[#959ca9] !mb-2 !inline-block text-[.75rem] !absolute !z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none border origin-[0_0] px-4 py-[0.6rem] border-solid border-transparent left-0 top-0 font-Manrope">Email Address</label>
<input type="submit" value="Join" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0]">
<input type="submit" value="Join" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24]">
</div>
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
@@ -797,7 +797,7 @@
<div id="collapse-2" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
<div class="code-wrapper relative !mb-0">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;a href=&quot;#&quot; class=&quot;btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] mx-1 !mb-2 md:!mb-0&quot; data-bs-toggle=&quot;modal&quot; data-bs-target=&quot;#modal-02&quot;&gt;Subscription&lt;/a&gt;
<pre class="language-html"><code>&lt;a href=&quot;#&quot; class=&quot;btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] mx-1 !mb-2 md:!mb-0&quot; data-bs-toggle=&quot;modal&quot; data-bs-target=&quot;#modal-02&quot;&gt;Subscription&lt;/a&gt;
&lt;div class=&quot;modal fade&quot; id=&quot;modal-02&quot; tabindex=&quot;-1&quot;&gt;
&lt;div class=&quot;modal-dialog modal-dialog-centered modal-md&quot;&gt;
@@ -862,7 +862,7 @@
<h2 class="!mb-5 !leading-[1.35]">Sign In</h2>
<div class="card">
<div class="card-body flex-[1_1_auto] p-[40px]">
<a href="#" class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] mx-1 !mb-2 xl:!mb-0 lg:!mb-0 md:!mb-0" data-bs-toggle="modal" data-bs-target="#modal-signin">Sign In</a>
<a href="#" class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] mx-1 !mb-2 xl:!mb-0 lg:!mb-0 md:!mb-0" data-bs-toggle="modal" data-bs-target="#modal-signin">Sign In</a>
<div class="modal fade !m-0 !p-0" id="modal-signin" tabindex="-1">
<div class="modal-dialog modal-dialog-centered modal-sm">
<div class="modal-content !text-center">
@@ -880,7 +880,7 @@
<span class="password-toggle absolute -translate-y-2/4 cursor-pointer text-[0.9rem] !text-[#959ca9] right-3 top-2/4"><i class="uil uil-eye"></i></span>
<label for="loginPassword" class="!text-[#959ca9] !mb-2 !inline-block text-[.75rem] !absolute !z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none border origin-[0_0] px-4 py-[0.6rem] border-solid border-transparent left-0 top-0 font-Manrope">Password</label>
</div>
<a class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] btn-login w-full !mb-2">Sign In</a>
<a class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] btn-login w-full !mb-2">Sign In</a>
</form>
<!-- /form -->
<p class="!mb-1"><a href="#" class="hover">Forgot Password?</a></p>
@@ -926,7 +926,7 @@
<span class="password-toggle absolute -translate-y-2/4 cursor-pointer text-[0.9rem] !text-[#959ca9] right-3 top-2/4"><i class="uil uil-eye"></i></span>
<label for="loginPasswordConfirm" class="!text-[#959ca9] !mb-2 !inline-block text-[.75rem] !absolute !z-[2] h-full overflow-hidden text-start text-ellipsis whitespace-nowrap pointer-events-none border origin-[0_0] px-4 py-[0.6rem] border-solid border-transparent left-0 top-0 font-Manrope">Confirm Password</label>
</div>
<a class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] btn-login w-full !mb-2">Sign Up</a>
<a class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] btn-login w-full !mb-2">Sign Up</a>
</form>
<!-- /form -->
<p class="!mb-0">Already have an account? <a href="#" data-bs-target="#modal-signin" data-bs-toggle="modal" data-bs-dismiss="modal" class="hover">Sign in</a></p>
@@ -954,7 +954,7 @@
<div id="collapse-3" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
<div class="code-wrapper relative !mb-0">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;a href=&quot;#&quot; class=&quot;btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] mx-1 !mb-2 md:!mb-0&quot; data-bs-toggle=&quot;modal&quot; data-bs-target=&quot;#modal-signin&quot;&gt;Sign In&lt;/a&gt;
<pre class="language-html"><code>&lt;a href=&quot;#&quot; class=&quot;btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] mx-1 !mb-2 md:!mb-0&quot; data-bs-toggle=&quot;modal&quot; data-bs-target=&quot;#modal-signin&quot;&gt;Sign In&lt;/a&gt;
&lt;div class=&quot;modal fade&quot; id=&quot;modal-signin&quot; tabindex=&quot;-1&quot;&gt;
&lt;div class=&quot;modal-dialog modal-dialog-centered modal-sm&quot;&gt;
@@ -973,7 +973,7 @@
&lt;span class=&quot;password-toggle&quot;&gt;&lt;i class=&quot;uil uil-eye&quot;&gt;&lt;/i&gt;&lt;/span&gt;
&lt;label for=&quot;loginPassword&quot;&gt;Password&lt;/label&gt;
&lt;/div&gt;
&lt;a class=&quot;btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] btn-login w-full !mb-2&quot;&gt;Sign In&lt;/a&gt;
&lt;a class=&quot;btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] btn-login w-full !mb-2&quot;&gt;Sign In&lt;/a&gt;
&lt;/form&gt;
&lt;!-- /form --&gt;
&lt;p class=&quot;mb-1&quot;&gt;&lt;a href=&quot;#&quot; class=&quot;hover&quot;&gt;Forgot Password?&lt;/a&gt;&lt;/p&gt;
@@ -1006,7 +1006,7 @@
<h2 class="!mb-5 !leading-[1.35]">Sign Up</h2>
<div class="card">
<div class="card-body flex-[1_1_auto] p-[40px]">
<a href="#" class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] mx-1 !mb-2 xl:!mb-0 lg:!mb-0 md:!mb-0" data-bs-toggle="modal" data-bs-target="#modal-signup">Sign Up</a>
<a href="#" class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] mx-1 !mb-2 xl:!mb-0 lg:!mb-0 md:!mb-0" data-bs-toggle="modal" data-bs-target="#modal-signup">Sign Up</a>
</div>
<!--/.card-body -->
<div class="card-footer !relative">
@@ -1016,7 +1016,7 @@
<div id="collapse-4" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
<div class="code-wrapper relative !mb-0">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;a href=&quot;#&quot; class=&quot;btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] mx-1 !mb-2 md:!mb-0&quot; data-bs-toggle=&quot;modal&quot; data-bs-target=&quot;#modal-signup&quot;&gt;Sign Up&lt;/a&gt;
<pre class="language-html"><code>&lt;a href=&quot;#&quot; class=&quot;btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] mx-1 !mb-2 md:!mb-0&quot; data-bs-toggle=&quot;modal&quot; data-bs-target=&quot;#modal-signup&quot;&gt;Sign Up&lt;/a&gt;
&lt;div class=&quot;modal fade&quot; id=&quot;modal-signup&quot; tabindex=&quot;-1&quot;&gt;
&lt;div class=&quot;modal-dialog modal-dialog-centered modal-sm&quot;&gt;
@@ -1044,7 +1044,7 @@
&lt;span class=&quot;password-toggle&quot;&gt;&lt;i class=&quot;uil uil-eye&quot;&gt;&lt;/i&gt;&lt;/span&gt;
&lt;label for=&quot;loginPasswordConfirm&quot;&gt;Confirm Password&lt;/label&gt;
&lt;/div&gt;
&lt;a class=&quot;btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] btn-login w-full !mb-2&quot;&gt;Sign Up&lt;/a&gt;
&lt;a class=&quot;btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] btn-login w-full !mb-2&quot;&gt;Sign Up&lt;/a&gt;
&lt;/form&gt;
&lt;!-- /form --&gt;
&lt;p class=&quot;mb-0&quot;&gt;Already have an account? &lt;a href=&quot;#&quot; data-bs-target=&quot;#modal-signin&quot; data-bs-toggle=&quot;modal&quot; data-bs-dismiss=&quot;modal&quot; class=&quot;hover&quot;&gt;Sign in&lt;/a&gt;&lt;/p&gt;
@@ -1075,7 +1075,7 @@
<section id="snippet-5" class="wrapper py-24">
<h2 class="!mb-3 !leading-[1.35]">Popup</h2>
<p class="lead !mb-1">To display any modal as a popup on your page, add <code class="code">.modal-popup</code> class to your <code class="code">.modal</code>.</p>
<p class="lead !leading-[1.65] text-[0.9rem] font-medium !mb-8">Check out a live example: <a class='external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-[\'\e906\'] after:text-[0.7rem] after:font-Custom' href='../../demo12.html' target='_blank'>Demo 12</a>.</p>
<p class="lead !leading-[1.65] text-[0.9rem] font-medium !mb-8">Check out a live example: <a class='external hover:!text-[#e31e24] !pr-[1.4rem] after:content-[\'\e906\'] after:text-[0.7rem] after:font-Custom' href='../../demo12.html' target='_blank'>Demo 12</a>.</p>
<div class="card">
<div class="card-footer !relative border-0">
<a class="collapse-link collapsed stretched-link" data-bs-toggle="collapse" href="#collapse-5">View example's code</a>
@@ -1121,9 +1121,9 @@
<!-- /.container -->
</section>
<!-- /section -->
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#3f78e0] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#e31e24] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
<path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
<path class="fill-none stroke-[#e31e24] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
</svg>
</div>
<script src="../../assets/js/plugins.js"></script>
public/docs/elements/pagination.html
+51 -51
View File
@@ -536,13 +536,13 @@
<li class="nav-item dropdown language-select uppercase group">
<a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
<ul class="dropdown-menu group-hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">Es</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">Es</a></li>
</ul>
</li>
<li class="nav-item hidden xl:block lg:block md:block">
<a class='btn btn-sm btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</a>
<a class='btn btn-sm btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</a>
</li>
<li class="nav-item xl:!hidden lg:!hidden">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
@@ -578,11 +578,11 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Usage</h6>
<nav id="collapse-usage">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='../index.html'>Get Started</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../forms.html'>Forms</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../faq.html'>FAQ</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../credits.html'>Credits</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='../index.html'>Get Started</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../forms.html'>Forms</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../faq.html'>FAQ</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../credits.html'>Credits</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -592,13 +592,13 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Styleguide</h6>
<nav id="collapse-style">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/misc.html'>Misc</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/misc.html'>Misc</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -608,33 +608,33 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Elements</h6>
<nav id="collapse-elements">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='accordion.html'>Accordion</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='hover:!text-[#3f78e0] active' href='pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='typography.html'>Typography</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='accordion.html'>Accordion</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='hover:!text-[#e31e24] active' href='pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='typography.html'>Typography</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -647,9 +647,9 @@
<h6 class="widget-title text-[0.85rem] !mb-2 xl:!pl-5">On this page</h6>
<nav class="xl:!pl-5" id="sidebar-nav">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] active" href="#snippet-1">Default</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-2">Alternative</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-3">Breadcrumb</a></li>
<li><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] active" href="#snippet-1">Default</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-2">Alternative</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-3">Breadcrumb</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -789,14 +789,14 @@
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb flex flex-wrap !mb-4 p-0 rounded-none">
<li class="breadcrumb-item flex !text-[#60697b]"><a class="!text-[#60697b] hover:!text-[#3f78e0]" href="#">Home</a></li>
<li class="breadcrumb-item flex !text-[#60697b]"><a class="!text-[#60697b] hover:!text-[#e31e24]" href="#">Home</a></li>
<li class="breadcrumb-item flex !text-[#60697b] !pl-2 before:font-normal before:!flex before:items-center before:text-[rgba(96,105,123,0.35)] before:content-['\e931'] before:text-[0.9rem] before:-mt-px before:!pr-2 before:font-Unicons active" aria-current="page">Library</li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb flex flex-wrap !mb-4 p-0 rounded-none">
<li class="breadcrumb-item flex !text-[#60697b]"><a class="!text-[#60697b] hover:!text-[#3f78e0]" href="#">Home</a></li>
<li class="breadcrumb-item flex !text-[#60697b] !pl-2 before:font-normal before:!flex before:items-center before:text-[rgba(96,105,123,0.35)] before:content-['\e931'] before:text-[0.9rem] before:-mt-px before:!pr-2 before:font-Unicons"><a class="!text-[#60697b] hover:!text-[#3f78e0]" href="#">Library</a></li>
<li class="breadcrumb-item flex !text-[#60697b]"><a class="!text-[#60697b] hover:!text-[#e31e24]" href="#">Home</a></li>
<li class="breadcrumb-item flex !text-[#60697b] !pl-2 before:font-normal before:!flex before:items-center before:text-[rgba(96,105,123,0.35)] before:content-['\e931'] before:text-[0.9rem] before:-mt-px before:!pr-2 before:font-Unicons"><a class="!text-[#60697b] hover:!text-[#e31e24]" href="#">Library</a></li>
<li class="breadcrumb-item flex !text-[#60697b] !pl-2 before:font-normal before:!flex before:items-center before:text-[rgba(96,105,123,0.35)] before:content-['\e931'] before:text-[0.9rem] before:-mt-px before:!pr-2 before:font-Unicons active" aria-current="page">Data</li>
</ol>
</nav>
@@ -877,9 +877,9 @@
<!-- /.container -->
</section>
<!-- /section -->
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#3f78e0] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#e31e24] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
<path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
<path class="fill-none stroke-[#e31e24] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
</svg>
</div>
<script src="../../assets/js/plugins.js"></script>
public/docs/elements/player.html
+49 -49
View File
@@ -536,13 +536,13 @@
<li class="nav-item dropdown language-select uppercase group">
<a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
<ul class="dropdown-menu group-hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">Es</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">Es</a></li>
</ul>
</li>
<li class="nav-item hidden xl:block lg:block md:block">
<a class='btn btn-sm btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</a>
<a class='btn btn-sm btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</a>
</li>
<li class="nav-item xl:!hidden lg:!hidden">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
@@ -578,11 +578,11 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Usage</h6>
<nav id="collapse-usage">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='../index.html'>Get Started</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../forms.html'>Forms</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../faq.html'>FAQ</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../credits.html'>Credits</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='../index.html'>Get Started</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../forms.html'>Forms</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../faq.html'>FAQ</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../credits.html'>Credits</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -592,13 +592,13 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Styleguide</h6>
<nav id="collapse-style">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/misc.html'>Misc</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/misc.html'>Misc</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -608,33 +608,33 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Elements</h6>
<nav id="collapse-elements">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='accordion.html'>Accordion</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='hover:!text-[#3f78e0] active' href='player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='typography.html'>Typography</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='accordion.html'>Accordion</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='hover:!text-[#e31e24] active' href='player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='typography.html'>Typography</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -647,10 +647,10 @@
<h6 class="widget-title text-[0.85rem] !mb-2 xl:!pl-5">On this page</h6>
<nav class="xl:!pl-5" id="sidebar-nav">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] active" href="#snippet-1">HTML5 Video - plyr</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-2">Vimeo - plyr</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-3">YouTube - plyr</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-4">Embed</a></li>
<li><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] active" href="#snippet-1">HTML5 Video - plyr</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-2">Vimeo - plyr</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-3">YouTube - plyr</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-4">Embed</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -789,9 +789,9 @@
<!-- /.container -->
</section>
<!-- /section -->
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#3f78e0] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#e31e24] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
<path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
<path class="fill-none stroke-[#e31e24] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
</svg>
</div>
<script src="../../assets/js/plugins.js"></script>
public/docs/elements/progressbar.html
+47 -47
View File
@@ -536,13 +536,13 @@
<li class="nav-item dropdown language-select uppercase group">
<a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
<ul class="dropdown-menu group-hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">Es</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">Es</a></li>
</ul>
</li>
<li class="nav-item hidden xl:block lg:block md:block">
<a class='btn btn-sm btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</a>
<a class='btn btn-sm btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</a>
</li>
<li class="nav-item xl:!hidden lg:!hidden">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
@@ -578,11 +578,11 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Usage</h6>
<nav id="collapse-usage">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='../index.html'>Get Started</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../forms.html'>Forms</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../faq.html'>FAQ</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../credits.html'>Credits</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='../index.html'>Get Started</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../forms.html'>Forms</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../faq.html'>FAQ</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../credits.html'>Credits</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -592,13 +592,13 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Styleguide</h6>
<nav id="collapse-style">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/misc.html'>Misc</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/misc.html'>Misc</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -608,33 +608,33 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Elements</h6>
<nav id="collapse-elements">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='accordion.html'>Accordion</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='hover:!text-[#3f78e0] active' href='progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='typography.html'>Typography</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='accordion.html'>Accordion</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='hover:!text-[#e31e24] active' href='progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='typography.html'>Typography</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -647,8 +647,8 @@
<h6 class="widget-title text-[0.85rem] !mb-2 xl:!pl-5">On this page</h6>
<nav class="xl:!pl-5" id="sidebar-nav">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] active" href="#snippet-1">Line</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-2">Semi Circle</a></li>
<li><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] active" href="#snippet-1">Line</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-2">Semi Circle</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -836,9 +836,9 @@
<!-- /.container -->
</section>
<!-- /section -->
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#3f78e0] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#e31e24] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
<path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
<path class="fill-none stroke-[#e31e24] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
</svg>
</div>
<script src="../../assets/js/plugins.js"></script>
public/docs/elements/shadows.html
+45 -45
View File
@@ -536,13 +536,13 @@
<li class="nav-item dropdown language-select uppercase group">
<a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
<ul class="dropdown-menu group-hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">Es</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">Es</a></li>
</ul>
</li>
<li class="nav-item hidden xl:block lg:block md:block">
<a class='btn btn-sm btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</a>
<a class='btn btn-sm btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</a>
</li>
<li class="nav-item xl:!hidden lg:!hidden">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
@@ -578,11 +578,11 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Usage</h6>
<nav id="collapse-usage">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='../index.html'>Get Started</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../forms.html'>Forms</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../faq.html'>FAQ</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../credits.html'>Credits</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='../index.html'>Get Started</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../forms.html'>Forms</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../faq.html'>FAQ</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../credits.html'>Credits</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -592,13 +592,13 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Styleguide</h6>
<nav id="collapse-style">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/misc.html'>Misc</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/misc.html'>Misc</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -608,33 +608,33 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Elements</h6>
<nav id="collapse-elements">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='accordion.html'>Accordion</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='hover:!text-[#3f78e0] active' href='shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='typography.html'>Typography</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='accordion.html'>Accordion</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='hover:!text-[#e31e24] active' href='shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='typography.html'>Typography</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -699,9 +699,9 @@
<!-- /.container -->
</section>
<!-- /section -->
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#3f78e0] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#e31e24] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
<path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
<path class="fill-none stroke-[#e31e24] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
</svg>
</div>
<script src="../../assets/js/plugins.js"></script>
public/docs/elements/shapes.html
+53 -53
View File
@@ -536,13 +536,13 @@
<li class="nav-item dropdown language-select uppercase group">
<a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
<ul class="dropdown-menu group-hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">Es</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">Es</a></li>
</ul>
</li>
<li class="nav-item hidden xl:block lg:block md:block">
<a class='btn btn-sm btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</a>
<a class='btn btn-sm btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</a>
</li>
<li class="nav-item xl:!hidden lg:!hidden">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
@@ -578,11 +578,11 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Usage</h6>
<nav id="collapse-usage">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='../index.html'>Get Started</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../forms.html'>Forms</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../faq.html'>FAQ</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../credits.html'>Credits</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='../index.html'>Get Started</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../forms.html'>Forms</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../faq.html'>FAQ</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../credits.html'>Credits</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -592,13 +592,13 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Styleguide</h6>
<nav id="collapse-style">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/misc.html'>Misc</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/misc.html'>Misc</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -608,33 +608,33 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Elements</h6>
<nav id="collapse-elements">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='accordion.html'>Accordion</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='hover:!text-[#3f78e0] active' href='shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='typography.html'>Typography</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='accordion.html'>Accordion</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='hover:!text-[#e31e24] active' href='shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='typography.html'>Typography</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -647,11 +647,11 @@
<h6 class="widget-title text-[0.85rem] !mb-2 xl:!pl-5">On this page</h6>
<nav class="xl:!pl-5" id="sidebar-nav">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] active" href="#snippet-1">Dot</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-2">Line</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-3">Solid</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-4">SVG</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-5">Doodles</a></li>
<li><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] active" href="#snippet-1">Dot</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-2">Line</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-3">Solid</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-4">SVG</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-5">Doodles</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -670,7 +670,7 @@
</div>
<!-- /column -->
<div class="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
<div class="shape bg-dot opacity-50 blue !w-[8rem] !h-[8rem] bg-[radial-gradient(#3f78e0_2px,transparent_2.5px)]"></div>
<div class="shape bg-dot opacity-50 blue !w-[8rem] !h-[8rem] bg-[radial-gradient(#e31e24_2px,transparent_2.5px)]"></div>
</div>
<!-- /column -->
<div class="xl:w-3/12 lg:w-3/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
@@ -695,7 +695,7 @@
<pre class="language-html"><code>
&#60;div class="shape bg-dot opacity-50 yellow !w-[8rem] !h-[8rem] bg-[radial-gradient(#fab758_2px,transparent_2.5px)]"&#62;&#60;/div&#62;
&#60;div class="shape bg-dot opacity-50 blue !w-[8rem] !h-[8rem] bg-[radial-gradient(#3f78e0_2px,transparent_2.5px)]"&#62;&#60;/div&#62;
&#60;div class="shape bg-dot opacity-50 blue !w-[8rem] !h-[8rem] bg-[radial-gradient(#e31e24_2px,transparent_2.5px)]"&#62;&#60;/div&#62;
&#60;div class="shape bg-dot opacity-50 red !w-[8rem] !h-[8rem] bg-[radial-gradient(#e2626b_2px,transparent_2.5px)]"&#62;&#60;/div&#62;
@@ -784,7 +784,7 @@
</section>
<section id="snippet-3" class="wrapper pt-24">
<h2 class="!mb-3 !leading-[1.35]">Solid</h2>
<p class="lead !leading-[1.65] text-[0.9rem] font-medium !mb-8">All background color options (<a class='internal !pr-[1.4rem] after:content-[\'\e94c\'] after:text-[0.8rem] after:font-Unicons !mt-[-0.25rem] hover:!text-[#3f78e0] hover:after:!text-[#3f78e0]' href='background.html#snippet-3'>solid</a>, <a class='internal !pr-[1.4rem] after:content-[\'\e94c\'] after:text-[0.8rem] after:font-Unicons !mt-[-0.25rem] hover:!text-[#3f78e0] hover:after:!text-[#3f78e0]' href='background.html#snippet-4'>soft</a>, <a class='internal !pr-[1.4rem] after:content-[\'\e94c\'] after:text-[0.8rem] after:font-Unicons !mt-[-0.25rem] hover:!text-[#3f78e0] hover:after:!text-[#3f78e0]' href='background.html#snippet-5'>pale</a>) are available to use.</p>
<p class="lead !leading-[1.65] text-[0.9rem] font-medium !mb-8">All background color options (<a class='internal !pr-[1.4rem] after:content-[\'\e94c\'] after:text-[0.8rem] after:font-Unicons !mt-[-0.25rem] hover:!text-[#e31e24] hover:after:!text-[#e31e24]' href='background.html#snippet-3'>solid</a>, <a class='internal !pr-[1.4rem] after:content-[\'\e94c\'] after:text-[0.8rem] after:font-Unicons !mt-[-0.25rem] hover:!text-[#e31e24] hover:after:!text-[#e31e24]' href='background.html#snippet-4'>soft</a>, <a class='internal !pr-[1.4rem] after:content-[\'\e94c\'] after:text-[0.8rem] after:font-Unicons !mt-[-0.25rem] hover:!text-[#e31e24] hover:after:!text-[#e31e24]' href='background.html#snippet-5'>pale</a>) are available to use.</p>
<div class="card">
<div class="card-body flex-[1_1_auto] p-[40px]">
<div class="flex flex-wrap mx-[-15px] g-6 !mt-[-30px]">
@@ -1074,9 +1074,9 @@
<!-- /.container -->
</section>
<!-- /section -->
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#3f78e0] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#e31e24] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
<path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
<path class="fill-none stroke-[#e31e24] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
</svg>
</div>
<script src="../../assets/js/plugins.js"></script>
public/docs/elements/tables.html
+52 -52
View File
@@ -536,13 +536,13 @@
<li class="nav-item dropdown language-select uppercase group">
<a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
<ul class="dropdown-menu group-hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">Es</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">Es</a></li>
</ul>
</li>
<li class="nav-item hidden xl:block lg:block md:block">
<a class='btn btn-sm btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</a>
<a class='btn btn-sm btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</a>
</li>
<li class="nav-item xl:!hidden lg:!hidden">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
@@ -578,11 +578,11 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Usage</h6>
<nav id="collapse-usage">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='../index.html'>Get Started</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../forms.html'>Forms</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../faq.html'>FAQ</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../credits.html'>Credits</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='../index.html'>Get Started</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../forms.html'>Forms</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../faq.html'>FAQ</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../credits.html'>Credits</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -592,13 +592,13 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Styleguide</h6>
<nav id="collapse-style">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/misc.html'>Misc</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/misc.html'>Misc</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -608,33 +608,33 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Elements</h6>
<nav id="collapse-elements">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='accordion.html'>Accordion</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='hover:!text-[#3f78e0] active' href='tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='typography.html'>Typography</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='accordion.html'>Accordion</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='hover:!text-[#e31e24] active' href='tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='typography.html'>Typography</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -647,13 +647,13 @@
<h6 class="widget-title text-[0.85rem] !mb-2 xl:!pl-5">On this page</h6>
<nav class="xl:!pl-5" id="sidebar-nav">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] active" href="#snippet-1">Simple</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-2">Simple Dark</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-3">Striped</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-4">Bordered</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-5">Borderless</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-6">Hoverable</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-7">Responsive</a></li>
<li><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] active" href="#snippet-1">Simple</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-2">Simple Dark</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-3">Striped</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-4">Bordered</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-5">Borderless</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-6">Hoverable</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-7">Responsive</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -1094,9 +1094,9 @@
<!-- /.container -->
</section>
<!-- /section -->
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#3f78e0] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#e31e24] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
<path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
<path class="fill-none stroke-[#e31e24] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
</svg>
</div>
<script src="../../assets/js/plugins.js"></script>
public/docs/elements/tabs.html
+57 -57
View File
@@ -536,13 +536,13 @@
<li class="nav-item dropdown language-select uppercase group">
<a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
<ul class="dropdown-menu group-hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">Es</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">Es</a></li>
</ul>
</li>
<li class="nav-item hidden xl:block lg:block md:block">
<a class='btn btn-sm btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</a>
<a class='btn btn-sm btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</a>
</li>
<li class="nav-item xl:!hidden lg:!hidden">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
@@ -578,11 +578,11 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Usage</h6>
<nav id="collapse-usage">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='../index.html'>Get Started</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../forms.html'>Forms</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../faq.html'>FAQ</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../credits.html'>Credits</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='../index.html'>Get Started</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../forms.html'>Forms</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../faq.html'>FAQ</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../credits.html'>Credits</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -592,13 +592,13 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Styleguide</h6>
<nav id="collapse-style">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/misc.html'>Misc</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/misc.html'>Misc</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -608,33 +608,33 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Elements</h6>
<nav id="collapse-elements">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='accordion.html'>Accordion</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='hover:!text-[#3f78e0] active' href='tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='typography.html'>Typography</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='accordion.html'>Accordion</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='hover:!text-[#e31e24] active' href='tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='typography.html'>Typography</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -647,9 +647,9 @@
<h6 class="widget-title text-[0.85rem] !mb-2 xl:!pl-5">On this page</h6>
<nav class="xl:!pl-5" id="sidebar-nav">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] active" href="#snippet-1">Basic</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-2">Pills</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-3">Justified</a></li>
<li><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] active" href="#snippet-1">Basic</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-2">Pills</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-3">Justified</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -673,10 +673,10 @@
<p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vestibulum id ligula porta felis euismod semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p>Donec sed odio dui. Donec sed odio dui. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum.</p>
<ul class="pl-0 list-none bullet-bg bullet-soft-primary !mb-0">
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#3f78e0] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i>Aenean eu leo quam. Pellentesque ornare.</li>
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#3f78e0] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i>Nullam quis risus eget urna mollis ornare.</li>
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#3f78e0] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i>Donec id elit non mi porta gravida at eget.</li>
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#3f78e0] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i>Fusce dapibus, tellus ac cursus commodo.</li>
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i>Aenean eu leo quam. Pellentesque ornare.</li>
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i>Nullam quis risus eget urna mollis ornare.</li>
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i>Donec id elit non mi porta gravida at eget.</li>
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i>Fusce dapibus, tellus ac cursus commodo.</li>
</ul>
</div>
<!--/.tab-pane -->
@@ -747,10 +747,10 @@
<p>Aenean lacinia bibendum nulla sed consectetur. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vestibulum id ligula porta felis euismod semper. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<p>Donec sed odio dui. Donec sed odio dui. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum.</p>
<ul class="pl-0 list-none bullet-bg bullet-soft-primary !mb-0">
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#3f78e0] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i>Aenean eu leo quam. Pellentesque ornare.</li>
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#3f78e0] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i>Nullam quis risus eget urna mollis ornare.</li>
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#3f78e0] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i>Donec id elit non mi porta gravida at eget.</li>
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#3f78e0] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i>Fusce dapibus, tellus ac cursus commodo.</li>
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i>Aenean eu leo quam. Pellentesque ornare.</li>
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i>Nullam quis risus eget urna mollis ornare.</li>
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i>Donec id elit non mi porta gravida at eget.</li>
<li class="relative !pl-6 !mt-[0.35rem]"><i class="uil uil-check absolute left-0 w-4 h-4 text-[0.8rem] leading-none !tracking-[normal] !text-center flex items-center justify-center bg-[#dce7f9] !text-[#e31e24] rounded-[100%] top-[0.2rem] before:content-['\e9dd'] before:align-middle before:table-cell"></i>Fusce dapibus, tellus ac cursus commodo.</li>
</ul>
</div>
<!--/.tab-pane -->
@@ -824,7 +824,7 @@
</section>
<section id="snippet-3" class="wrapper py-24">
<h2 class="!mb-3 !leading-[1.35]">Justified</h2>
<p class="lead !leading-[1.65] text-[0.9rem] font-medium !mb-8">Check out a live example: <a class='external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-[\'\e906\'] after:text-[0.7rem] after:font-Custom' href='../../demo9.html' target='_blank'>Demo 9</a>.</p>
<p class="lead !leading-[1.65] text-[0.9rem] font-medium !mb-8">Check out a live example: <a class='external hover:!text-[#e31e24] !pr-[1.4rem] after:content-[\'\e906\'] after:text-[0.7rem] after:font-Custom' href='../../demo9.html' target='_blank'>Demo 9</a>.</p>
<div class="card">
<div class="card-body flex-[1_1_auto] p-[40px]">
<ul class="nav nav-tabs nav-tabs-bg nav-tabs-shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)] flex justify-between nav-justified xl:!flex-row lg:!flex-row flex-col">
@@ -929,9 +929,9 @@
<!-- /.container -->
</section>
<!-- /section -->
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#3f78e0] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#e31e24] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
<path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
<path class="fill-none stroke-[#e31e24] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
</svg>
</div>
<script src="../../assets/js/plugins.js"></script>
public/docs/elements/text-animations.html
+57 -57
View File
@@ -536,13 +536,13 @@
<li class="nav-item dropdown language-select uppercase group">
<a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
<ul class="dropdown-menu group-hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">Es</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">Es</a></li>
</ul>
</li>
<li class="nav-item hidden xl:block lg:block md:block">
<a class='btn btn-sm btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</a>
<a class='btn btn-sm btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</a>
</li>
<li class="nav-item xl:!hidden lg:!hidden">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
@@ -578,11 +578,11 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Usage</h6>
<nav id="collapse-usage">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='../index.html'>Get Started</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../forms.html'>Forms</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../faq.html'>FAQ</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../credits.html'>Credits</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='../index.html'>Get Started</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../forms.html'>Forms</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../faq.html'>FAQ</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../credits.html'>Credits</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -592,13 +592,13 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Styleguide</h6>
<nav id="collapse-style">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/misc.html'>Misc</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/misc.html'>Misc</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -608,33 +608,33 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Elements</h6>
<nav id="collapse-elements">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='accordion.html'>Accordion</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='hover:!text-[#3f78e0] active' href='text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='typography.html'>Typography</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='accordion.html'>Accordion</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='hover:!text-[#e31e24] active' href='text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='typography.html'>Typography</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -647,9 +647,9 @@
<h6 class="widget-title text-[0.85rem] !mb-2 xl:!pl-5">On this page</h6>
<nav class="xl:!pl-5" id="sidebar-nav">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] active" href="#snippet-1">Typer</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-2">Typer with Loop</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-3">Rotator</a></li>
<li><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] active" href="#snippet-1">Typer</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-2">Typer with Loop</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-3">Rotator</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -664,7 +664,7 @@
<div class="card-body flex-[1_1_auto] p-[40px]">
<div class="flex flex-wrap mx-[-15px]">
<div class="xl:w-9/12 lg:w-9/12 md:w-9/12 w-full flex-[0_0_auto] !px-[15px] max-w-full">
<h2 class="!text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] !mb-0">Trunçgil is effortless and powerful with <br><span class="typer !text-[#3f78e0] " data-loop="false" data-delay="100" data-words="easy usage,fast transactions,secure payments"></span><span class="cursor !text-[#3f78e0] " data-owner="typer"></span></h2>
<h2 class="!text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] !mb-0">Trunçgil is effortless and powerful with <br><span class="typer !text-[#e31e24] " data-loop="false" data-delay="100" data-words="easy usage,fast transactions,secure payments"></span><span class="cursor !text-[#e31e24] " data-owner="typer"></span></h2>
</div>
<!-- /column -->
</div>
@@ -678,11 +678,11 @@
<div id="collapse-1" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
<div class="code-wrapper relative !mb-0">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;span class=&quot;typer !text-[#3f78e0] &quot;
<pre class="language-html"><code>&lt;span class=&quot;typer !text-[#e31e24] &quot;
data-loop=&quot;false&quot;
data-delay=&quot;100&quot;
data-words=&quot;easy usage,fast transactions,secure payments&quot;&gt;
&lt;/span&gt;&lt;span class=&quot;cursor !text-[#3f78e0] &quot; data-owner=&quot;typer&quot;&gt;&lt;/span&gt;</code></pre>
&lt;/span&gt;&lt;span class=&quot;cursor !text-[#e31e24] &quot; data-owner=&quot;typer&quot;&gt;&lt;/span&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
@@ -698,7 +698,7 @@
<div class="card-body flex-[1_1_auto] p-[40px]">
<div class="flex flex-wrap mx-[-15px]">
<div class="lg:w-9/12 flex-[0_0_auto] !px-[15px] max-w-full">
<h2 class="!text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] !mb-0">Trunçgil focuses on <br><span class="typer !text-[#3f78e0] " data-delay="100" data-words="customer satisfaction,business needs,creative ideas"></span><span class="cursor !text-[#3f78e0] " data-owner="typer"></span></h2>
<h2 class="!text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] !mb-0">Trunçgil focuses on <br><span class="typer !text-[#e31e24] " data-delay="100" data-words="customer satisfaction,business needs,creative ideas"></span><span class="cursor !text-[#e31e24] " data-owner="typer"></span></h2>
</div>
<!-- /column -->
</div>
@@ -712,10 +712,10 @@
<div id="collapse-2" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
<div class="code-wrapper relative !mb-0">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;span class=&quot;typer !text-[#3f78e0] &quot;
<pre class="language-html"><code>&lt;span class=&quot;typer !text-[#e31e24] &quot;
data-delay=&quot;100&quot;
data-words=&quot;customer satisfaction,business needs,creative ideas&quot;&gt;
&lt;/span&gt;&lt;span class=&quot;cursor !text-[#3f78e0] &quot; data-owner=&quot;typer&quot;&gt;&lt;/span&gt;</code></pre>
&lt;/span&gt;&lt;span class=&quot;cursor !text-[#e31e24] &quot; data-owner=&quot;typer&quot;&gt;&lt;/span&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
@@ -731,7 +731,7 @@
<div class="card-body flex-[1_1_auto] p-[40px]">
<div class="flex flex-wrap mx-[-15px]">
<div class="xl:w-9/12 lg:w-9/12 md:w-9/12 w-full flex-[0_0_auto] !px-[15px] max-w-full">
<h2 class="!text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] !mb-0">Trunçgil is effortless and powerful with <span class="rotator-fade !text-[#3f78e0] ">easy usage,fast transactions,secure payments</span></h2>
<h2 class="!text-[calc(1.365rem_+_1.38vw)] font-bold !leading-[1.2] xl:!text-[2.4rem] !mb-0">Trunçgil is effortless and powerful with <span class="rotator-fade !text-[#e31e24] ">easy usage,fast transactions,secure payments</span></h2>
</div>
<!-- /column -->
</div>
@@ -745,9 +745,9 @@
<div id="collapse-3" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
<div class="code-wrapper relative !mb-0">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;span class=&quot;rotator-fade !text-[#3f78e0] &quot;&gt;easy usage,fast transactions,secure payments&lt;/span&gt;
<pre class="language-html"><code>&lt;span class=&quot;rotator-fade !text-[#e31e24] &quot;&gt;easy usage,fast transactions,secure payments&lt;/span&gt;
&lt;span class=&quot;rotator-zoom !text-[#3f78e0] &quot;&gt;easy usage,fast transactions,secure payments&lt;/span&gt;
&lt;span class=&quot;rotator-zoom !text-[#e31e24] &quot;&gt;easy usage,fast transactions,secure payments&lt;/span&gt;
</code></pre>
</div>
<!--/.code-wrapper-inner -->
@@ -782,9 +782,9 @@
<!-- /.container -->
</section>
<!-- /section -->
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#3f78e0] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#e31e24] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
<path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
<path class="fill-none stroke-[#e31e24] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
</svg>
</div>
<script src="../../assets/js/plugins.js"></script>
public/docs/elements/text-highlight.html
+72 -72
View File
@@ -536,13 +536,13 @@
<li class="nav-item dropdown language-select uppercase group">
<a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
<ul class="dropdown-menu group-hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">Es</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">Es</a></li>
</ul>
</li>
<li class="nav-item hidden xl:block lg:block md:block">
<a class='btn btn-sm btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</a>
<a class='btn btn-sm btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</a>
</li>
<li class="nav-item xl:!hidden lg:!hidden">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
@@ -578,11 +578,11 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Usage</h6>
<nav id="collapse-usage">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='../index.html'>Get Started</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../forms.html'>Forms</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../faq.html'>FAQ</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../credits.html'>Credits</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='../index.html'>Get Started</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../forms.html'>Forms</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../faq.html'>FAQ</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../credits.html'>Credits</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -592,13 +592,13 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Styleguide</h6>
<nav id="collapse-style">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/misc.html'>Misc</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/misc.html'>Misc</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -608,33 +608,33 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Elements</h6>
<nav id="collapse-elements">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='accordion.html'>Accordion</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='hover:!text-[#3f78e0] active' href='text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='typography.html'>Typography</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='accordion.html'>Accordion</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='hover:!text-[#e31e24] active' href='text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='typography.html'>Typography</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -647,10 +647,10 @@
<h6 class="widget-title text-[0.85rem] !mb-2 xl:!pl-5">On this page</h6>
<nav class="xl:!pl-5" id="sidebar-nav">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] active" href="#snippet-1">Underline</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-2">Underline 2</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-3">Underline 3</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-4">Mark</a></li>
<li><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] active" href="#snippet-1">Underline</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-2">Underline 2</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-3">Underline 3</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-4">Mark</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -704,7 +704,7 @@
<div class="card">
<div class="card-body flex-[1_1_auto] p-[40px]">
<h2 class="!text-[calc(1.325rem_+_0.9vw)] font-bold xl:!text-[2rem] !leading-[1.35] !mb-4">Build and manage an <span class="yellow relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[10%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-[ease-in-out] after:!mt-0 after:rounded-[5rem] after:bottom-[4%] after:bg-[#fab758]">impressive</span> website with Trunçgil in no time.</h2>
<h2 class="!text-[calc(1.325rem_+_0.9vw)] font-bold xl:!text-[2rem] !leading-[1.35] !mb-0">Build and manage an <span class="relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[10%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[4%] motion-reduce:after:transition-none after:bg-[#3f78e0] after:!bg-[linear-gradient(40deg,#f5b161_.4%,#ec366e_100.2%)]">impressive</span> website with Trunçgil in no time.</h2>
<h2 class="!text-[calc(1.325rem_+_0.9vw)] font-bold xl:!text-[2rem] !leading-[1.35] !mb-0">Build and manage an <span class="relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[10%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[4%] motion-reduce:after:transition-none after:bg-[#e31e24] after:!bg-[linear-gradient(40deg,#f5b161_.4%,#ec366e_100.2%)]">impressive</span> website with Trunçgil in no time.</h2>
</div>
<!--/.card-body -->
<div class="card-footer !relative">
@@ -714,29 +714,29 @@
<div id="collapse-2" class="card-footer !bg-[#21262c] opacity-100 !p-0 accordion-collapse collapse">
<div class="code-wrapper relative !mb-0">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;span class=&quot;relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[10%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[4%] motion-reduce:after:transition-none after:bg-[#3f78e0] yellow&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[10%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[4%] motion-reduce:after:transition-none after:bg-[#3f78e0] orange&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[10%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[4%] motion-reduce:after:transition-none after:bg-[#3f78e0] red&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[10%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[4%] motion-reduce:after:transition-none after:bg-[#3f78e0] pink&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[10%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[4%] motion-reduce:after:transition-none after:bg-[#3f78e0] violet&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[10%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[4%] motion-reduce:after:transition-none after:bg-[#3f78e0] purple&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[10%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[4%] motion-reduce:after:transition-none after:bg-[#3f78e0] blue&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[10%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[4%] motion-reduce:after:transition-none after:bg-[#3f78e0] aqua&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[10%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[4%] motion-reduce:after:transition-none after:bg-[#3f78e0] green&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[10%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[4%] motion-reduce:after:transition-none after:bg-[#3f78e0] leaf&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[10%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[4%] motion-reduce:after:transition-none after:bg-[#3f78e0] fuchsia&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[10%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[4%] motion-reduce:after:transition-none after:bg-[#3f78e0] sky&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[10%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[4%] motion-reduce:after:transition-none after:bg-[#3f78e0] grape&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[10%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[4%] motion-reduce:after:transition-none after:bg-[#3f78e0] navy&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[10%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[4%] motion-reduce:after:transition-none after:bg-[#3f78e0] ash&quot;&gt;text&lt;/span&gt;
<pre class="language-html"><code>&lt;span class=&quot;relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[10%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[4%] motion-reduce:after:transition-none after:bg-[#e31e24] yellow&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[10%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[4%] motion-reduce:after:transition-none after:bg-[#e31e24] orange&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[10%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[4%] motion-reduce:after:transition-none after:bg-[#e31e24] red&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[10%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[4%] motion-reduce:after:transition-none after:bg-[#e31e24] pink&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[10%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[4%] motion-reduce:after:transition-none after:bg-[#e31e24] violet&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[10%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[4%] motion-reduce:after:transition-none after:bg-[#e31e24] purple&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[10%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[4%] motion-reduce:after:transition-none after:bg-[#e31e24] blue&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[10%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[4%] motion-reduce:after:transition-none after:bg-[#e31e24] aqua&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[10%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[4%] motion-reduce:after:transition-none after:bg-[#e31e24] green&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[10%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[4%] motion-reduce:after:transition-none after:bg-[#e31e24] leaf&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[10%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[4%] motion-reduce:after:transition-none after:bg-[#e31e24] fuchsia&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[10%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[4%] motion-reduce:after:transition-none after:bg-[#e31e24] sky&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[10%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[4%] motion-reduce:after:transition-none after:bg-[#e31e24] grape&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[10%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[4%] motion-reduce:after:transition-none after:bg-[#e31e24] navy&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[10%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[4%] motion-reduce:after:transition-none after:bg-[#e31e24] ash&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[10%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[4%] motion-reduce:after:transition-none after:bg-[#3f78e0] after:!bg-[linear-gradient(120deg,#f857a6_10%,#ef3f6e_100%)]&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[10%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[4%] motion-reduce:after:transition-none after:bg-[#3f78e0] underline-gradient-2&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[10%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[4%] motion-reduce:after:transition-none after:bg-[#3f78e0] underline-gradient-3&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[10%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[4%] motion-reduce:after:transition-none after:bg-[#3f78e0] underline-gradient-4&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[10%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[4%] motion-reduce:after:transition-none after:bg-[#3f78e0] underline-gradient-5&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[10%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[4%] motion-reduce:after:transition-none after:bg-[#3f78e0] underline-gradient-6&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[10%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[4%] motion-reduce:after:transition-none after:bg-[#3f78e0] underline-gradient-7&quot;&gt;text&lt;/span&gt;</code></pre>
&lt;span class=&quot;relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[10%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[4%] motion-reduce:after:transition-none after:bg-[#e31e24] after:!bg-[linear-gradient(120deg,#f857a6_10%,#ef3f6e_100%)]&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[10%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[4%] motion-reduce:after:transition-none after:bg-[#e31e24] underline-gradient-2&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[10%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[4%] motion-reduce:after:transition-none after:bg-[#e31e24] underline-gradient-3&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[10%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[4%] motion-reduce:after:transition-none after:bg-[#e31e24] underline-gradient-4&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[10%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[4%] motion-reduce:after:transition-none after:bg-[#e31e24] underline-gradient-5&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[10%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[4%] motion-reduce:after:transition-none after:bg-[#e31e24] underline-gradient-6&quot;&gt;text&lt;/span&gt;
&lt;span class=&quot;relative z-[2] whitespace-nowrap after:content-[''] after:block after:absolute after:w-[102.5%] after:h-[10%] after:left-[-1.5%] after:z-[-1] after:transition-all after:duration-[0.2s] after:ease-in-out after:!mt-0 after:rounded-[5rem] after:bottom-[4%] motion-reduce:after:transition-none after:bg-[#e31e24] underline-gradient-7&quot;&gt;text&lt;/span&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
@@ -867,9 +867,9 @@
<!-- /.container -->
</section>
<!-- /section -->
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#3f78e0] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#e31e24] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
<path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
<path class="fill-none stroke-[#e31e24] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
</svg>
</div>
<script src="../../assets/js/plugins.js"></script>
public/docs/elements/tiles.html
+55 -55
View File
@@ -536,13 +536,13 @@
<li class="nav-item dropdown language-select uppercase group">
<a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
<ul class="dropdown-menu group-hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">Es</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">Es</a></li>
</ul>
</li>
<li class="nav-item hidden xl:block lg:block md:block">
<a class='btn btn-sm btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</a>
<a class='btn btn-sm btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</a>
</li>
<li class="nav-item xl:!hidden lg:!hidden">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
@@ -578,11 +578,11 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Usage</h6>
<nav id="collapse-usage">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='../index.html'>Get Started</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../forms.html'>Forms</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../faq.html'>FAQ</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../credits.html'>Credits</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='../index.html'>Get Started</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../forms.html'>Forms</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../faq.html'>FAQ</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../credits.html'>Credits</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -592,13 +592,13 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Styleguide</h6>
<nav id="collapse-style">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/misc.html'>Misc</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/misc.html'>Misc</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -608,33 +608,33 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Elements</h6>
<nav id="collapse-elements">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='accordion.html'>Accordion</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='hover:!text-[#3f78e0] active' href='tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='typography.html'>Typography</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='accordion.html'>Accordion</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='hover:!text-[#e31e24] active' href='tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='typography.html'>Typography</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -647,16 +647,16 @@
<h6 class="widget-title text-[0.85rem] !mb-2 xl:!pl-5">On this page</h6>
<nav class="xl:!pl-5" id="sidebar-nav">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] active" href="#snippet-1">Tiles 1</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-2">Tiles 2</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-3">Tiles 3</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-4">Tiles 4</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-5">Tiles 5</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-6">Tiles 6</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-7">Tiles 7</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-8">Tiles 8</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-9">Tiles 9</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-10">Tiles 10</a></li>
<li><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] active" href="#snippet-1">Tiles 1</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-2">Tiles 2</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-3">Tiles 3</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-4">Tiles 4</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-5">Tiles 5</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-6">Tiles 6</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-7">Tiles 7</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-8">Tiles 8</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-9">Tiles 9</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-10">Tiles 10</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -1277,9 +1277,9 @@
<!-- /.container -->
</section>
<!-- /section -->
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#3f78e0] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#e31e24] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
<path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
<path class="fill-none stroke-[#e31e24] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
</svg>
</div>
<script src="../../assets/js/plugins.js"></script>
public/docs/elements/tooltips-popovers.html
+55 -55
View File
@@ -536,13 +536,13 @@
<li class="nav-item dropdown language-select uppercase group">
<a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
<ul class="dropdown-menu group-hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">Es</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">Es</a></li>
</ul>
</li>
<li class="nav-item hidden xl:block lg:block md:block">
<a class='btn btn-sm btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</a>
<a class='btn btn-sm btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</a>
</li>
<li class="nav-item xl:!hidden lg:!hidden">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
@@ -578,11 +578,11 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Usage</h6>
<nav id="collapse-usage">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='../index.html'>Get Started</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../forms.html'>Forms</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../faq.html'>FAQ</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../credits.html'>Credits</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='../index.html'>Get Started</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../forms.html'>Forms</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../faq.html'>FAQ</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../credits.html'>Credits</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -592,13 +592,13 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Styleguide</h6>
<nav id="collapse-style">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/misc.html'>Misc</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/misc.html'>Misc</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -608,33 +608,33 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Elements</h6>
<nav id="collapse-elements">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='accordion.html'>Accordion</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='hover:!text-[#3f78e0] active' href='tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='typography.html'>Typography</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='accordion.html'>Accordion</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='hover:!text-[#e31e24] active' href='tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='typography.html'>Typography</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -647,8 +647,8 @@
<h6 class="widget-title text-[0.85rem] !mb-2 xl:!pl-5">On this page</h6>
<nav class="xl:!pl-5" id="sidebar-nav">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] active" href="#snippet-1">Tooltips</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-2">Popovers</a></li>
<li><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] active" href="#snippet-1">Tooltips</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-2">Popovers</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -702,10 +702,10 @@
<h2 class="!mb-5 !leading-[1.35]">Popovers</h2>
<div class="card">
<div class="card-body flex-[1_1_auto] p-[40px]">
<a class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] !mr-2 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]" tabindex="0" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="top" title="Sample Title" data-bs-content="Integer posuere ante ac dapibus posuere velit a aliquet. Cum sociis natoque."> Popover on top </a>
<a class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] !mr-2 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]" tabindex="0" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="right" title="Sample Title" data-bs-content="Integer posuere ante ac dapibus posuere velit a aliquet. Cum sociis natoque."> Popover on right </a>
<a class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] !mr-2 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]" tabindex="0" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="bottom" title="Sample Title" data-bs-content="Integer posuere ante ac dapibus posuere velit a aliquet. Cum sociis natoque."> Popover on bottom </a>
<a class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] !mr-2 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]" tabindex="0" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="left" title="Sample Title" data-bs-content="Integer posuere ante ac dapibus posuere velit a aliquet. Cum sociis natoque."> Popover on left </a>
<a class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] !mr-2 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]" tabindex="0" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="top" title="Sample Title" data-bs-content="Integer posuere ante ac dapibus posuere velit a aliquet. Cum sociis natoque."> Popover on top </a>
<a class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] !mr-2 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]" tabindex="0" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="right" title="Sample Title" data-bs-content="Integer posuere ante ac dapibus posuere velit a aliquet. Cum sociis natoque."> Popover on right </a>
<a class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] !mr-2 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]" tabindex="0" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="bottom" title="Sample Title" data-bs-content="Integer posuere ante ac dapibus posuere velit a aliquet. Cum sociis natoque."> Popover on bottom </a>
<a class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] !mr-2 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]" tabindex="0" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="left" title="Sample Title" data-bs-content="Integer posuere ante ac dapibus posuere velit a aliquet. Cum sociis natoque."> Popover on left </a>
</div>
<!--/.card-body -->
<div class="card-footer !relative">
@@ -716,10 +716,10 @@
<div class="code-wrapper relative !mb-0">
<div class="code-wrapper-inner">
<pre class="language-html"><code>
&#60;a class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] !mr-2 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]" tabindex="0" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="top" title="Sample Title" data-bs-content="Integer posuere ante ac dapibus posuere velit a aliquet. Cum sociis natoque."&#62; Popover on top &#60;/a&#62;
&#60;a class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] !mr-2 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]" tabindex="0" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="right" title="Sample Title" data-bs-content="Integer posuere ante ac dapibus posuere velit a aliquet. Cum sociis natoque."&#62; Popover on right &#60;/a&#62;
&#60;a class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] !mr-2 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]" tabindex="0" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="bottom" title="Sample Title" data-bs-content="Integer posuere ante ac dapibus posuere velit a aliquet. Cum sociis natoque."&#62; Popover on bottom &#60;/a&#62;
&#60;a class="btn btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] !mr-2 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]" tabindex="0" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="left" title="Sample Title" data-bs-content="Integer posuere ante ac dapibus posuere velit a aliquet. Cum sociis natoque."&#62; Popover on left &#60;/a&#62;</code></pre>
&#60;a class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] !mr-2 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]" tabindex="0" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="top" title="Sample Title" data-bs-content="Integer posuere ante ac dapibus posuere velit a aliquet. Cum sociis natoque."&#62; Popover on top &#60;/a&#62;
&#60;a class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] !mr-2 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]" tabindex="0" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="right" title="Sample Title" data-bs-content="Integer posuere ante ac dapibus posuere velit a aliquet. Cum sociis natoque."&#62; Popover on right &#60;/a&#62;
&#60;a class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] !mr-2 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]" tabindex="0" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="bottom" title="Sample Title" data-bs-content="Integer posuere ante ac dapibus posuere velit a aliquet. Cum sociis natoque."&#62; Popover on bottom &#60;/a&#62;
&#60;a class="btn btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] !mr-2 hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]" tabindex="0" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-placement="left" title="Sample Title" data-bs-content="Integer posuere ante ac dapibus posuere velit a aliquet. Cum sociis natoque."&#62; Popover on left &#60;/a&#62;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
@@ -753,9 +753,9 @@
<!-- /.container -->
</section>
<!-- /section -->
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#3f78e0] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#e31e24] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
<path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
<path class="fill-none stroke-[#e31e24] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
</svg>
</div>
<script src="../../assets/js/plugins.js"></script>
public/docs/elements/typography.html
+77 -77
View File
@@ -536,13 +536,13 @@
<li class="nav-item dropdown language-select uppercase group">
<a class="nav-link dropdown-item dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">En</a>
<ul class="dropdown-menu group-hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]">
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#3f78e0] hover:bg-[inherit] " href="#">Es</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">En</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">De</a></li>
<li class="nav-item"><a class="dropdown-item hover:!text-[#e31e24] hover:bg-[inherit] " href="#">Es</a></li>
</ul>
</li>
<li class="nav-item hidden xl:block lg:block md:block">
<a class='btn btn-sm btn-primary !text-white !bg-[#3f78e0] border-[#3f78e0] hover:text-white hover:bg-[#3f78e0] hover:!border-[#3f78e0] active:text-white active:bg-[#3f78e0] active:border-[#3f78e0] disabled:text-white disabled:bg-[#3f78e0] disabled:border-[#3f78e0] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</a>
<a class='btn btn-sm btn-primary !text-white !bg-[#e31e24] border-[#e31e24] hover:text-white hover:bg-[#e31e24] hover:!border-[#e31e24] active:text-white active:bg-[#e31e24] active:border-[#e31e24] disabled:text-white disabled:bg-[#e31e24] disabled:border-[#e31e24] !rounded-[50rem] hover:translate-y-[-0.15rem] hover:shadow-[0_0.25rem_0.75rem_rgba(30,34,40,0.15)]' href='../../contact.html'>Contact</a>
</li>
<li class="nav-item xl:!hidden lg:!hidden">
<button class="hamburger offcanvas-nav-btn"><span></span></button>
@@ -578,11 +578,11 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Usage</h6>
<nav id="collapse-usage">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='../index.html'>Get Started</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../forms.html'>Forms</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../faq.html'>FAQ</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../credits.html'>Credits</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='../index.html'>Get Started</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../forms.html'>Forms</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../faq.html'>FAQ</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../changelog.html'>Changelog</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../credits.html'>Credits</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -592,13 +592,13 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Styleguide</h6>
<nav id="collapse-style">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='../styleguide/misc.html'>Misc</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/colors.html'>Colors</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/fonts.html'>Fonts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/icons-svg.html'>SVG Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/icons-font.html'>Font Icons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/illustrations.html'>Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/backgrounds.html'>Backgrounds</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='../styleguide/misc.html'>Misc</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -608,33 +608,33 @@
<h6 class="widget-title text-[0.85rem] !mb-2">Elements</h6>
<nav id="collapse-elements">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='accordion.html'>Accordion</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='hover:!text-[#3f78e0] active' href='typography.html'>Typography</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='accordion.html'>Accordion</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='hover:!text-[#e31e24] active' href='typography.html'>Typography</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -647,14 +647,14 @@
<h6 class="widget-title text-[0.85rem] !mb-2 xl:!pl-5">On this page</h6>
<nav class="xl:!pl-5" id="sidebar-nav">
<ul class="list-unstyled !pl-0 list-none text-[0.7rem] leading-normal text-inherit">
<li><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] active" href="#snippet-1">Headings</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-2">Display Headings</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-3">Tiny Headings</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-4">Lead</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-5">Lists</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-6">Blockquote</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-7">Dropcap</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-8">Links</a></li>
<li><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] active" href="#snippet-1">Headings</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-2">Display Headings</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-3">Tiny Headings</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-4">Lead</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-5">Lists</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-6">Blockquote</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-7">Dropcap</a></li>
<li class="!mt-[0.35rem]"><a class="hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-8">Links</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -774,7 +774,7 @@
</div>
<!--/column -->
<div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
<h2 class="!text-[.75rem] uppercase text-line relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0] !text-[#343f52] !mb-0 !leading-[1.35]">Tiny Heading with Line</h2>
<h2 class="!text-[.75rem] uppercase text-line relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#e31e24] !text-[#343f52] !mb-0 !leading-[1.35]">Tiny Heading with Line</h2>
</div>
<!--/column -->
</div>
@@ -789,7 +789,7 @@
<div class="code-wrapper relative !mb-0">
<div class="code-wrapper-inner">
<pre class="language-html"><code>&lt;h2 class=&quot;!text-[.75rem] uppercase !text-[#343f52]&quot;&gt;Tiny heading&lt;/h2&gt;
&lt;h2 class=&quot;!text-[.75rem] uppercase text-line relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0] !text-[#343f52]&quot;&gt;Tiny heading with line&lt;/h2&gt;</code></pre>
&lt;h2 class=&quot;!text-[.75rem] uppercase text-line relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#e31e24] !text-[#343f52]&quot;&gt;Tiny heading with line&lt;/h2&gt;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
@@ -833,19 +833,19 @@
<div class="flex flex-wrap mx-[-15px] !mt-[-30px]">
<div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
<ul class="pl-0 list-none bullet-primary !mb-0">
<li class="relative !pl-4 before:absolute before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:!text-[#3f78e0] before:left-0 before:font-SansSerif">Aenean eu leo quam.</li>
<li class="relative !mt-[0.35rem] !pl-4 before:absolute before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:!text-[#3f78e0] before:left-0 before:font-SansSerif">Nullam quis risus eget.</li>
<li class="relative !mt-[0.35rem] !pl-4 before:absolute before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:!text-[#3f78e0] before:left-0 before:font-SansSerif">Donec id elit non mi porta.</li>
<li class="relative !mt-[0.35rem] !pl-4 before:absolute before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:!text-[#3f78e0] before:left-0 before:font-SansSerif">Fusce dapibus cursus.</li>
<li class="relative !pl-4 before:absolute before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:!text-[#e31e24] before:left-0 before:font-SansSerif">Aenean eu leo quam.</li>
<li class="relative !mt-[0.35rem] !pl-4 before:absolute before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:!text-[#e31e24] before:left-0 before:font-SansSerif">Nullam quis risus eget.</li>
<li class="relative !mt-[0.35rem] !pl-4 before:absolute before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:!text-[#e31e24] before:left-0 before:font-SansSerif">Donec id elit non mi porta.</li>
<li class="relative !mt-[0.35rem] !pl-4 before:absolute before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:!text-[#e31e24] before:left-0 before:font-SansSerif">Fusce dapibus cursus.</li>
</ul>
</div>
<!-- /column -->
<div class="xl:w-4/12 lg:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
<ul class="pl-0 list-none bullet-primary !mb-0">
<li class="relative !pl-5"><span><i class="uil uil-arrow-right before:content-['\e94c'] absolute top-[-0.2rem] text-base !text-[#3f78e0] left-0"></i></span><span>Aenean eu leo quam.</span></li>
<li class="relative !mt-[0.35rem] !pl-5"><span><i class="uil uil-arrow-right before:content-['\e94c'] absolute top-[-0.2rem] text-base !text-[#3f78e0] left-0"></i></span><span>Nullam quis risus eget.</span></li>
<li class="relative !mt-[0.35rem] !pl-5"><span><i class="uil uil-arrow-right before:content-['\e94c'] absolute top-[-0.2rem] text-base !text-[#3f78e0] left-0"></i></span><span>Donec id elit non mi porta.</span></li>
<li class="relative !mt-[0.35rem] !pl-5"><span><i class="uil uil-arrow-right before:content-['\e94c'] absolute top-[-0.2rem] text-base !text-[#3f78e0] left-0"></i></span><span>Fusce dapibus cursus.</span></li>
<li class="relative !pl-5"><span><i class="uil uil-arrow-right before:content-['\e94c'] absolute top-[-0.2rem] text-base !text-[#e31e24] left-0"></i></span><span>Aenean eu leo quam.</span></li>
<li class="relative !mt-[0.35rem] !pl-5"><span><i class="uil uil-arrow-right before:content-['\e94c'] absolute top-[-0.2rem] text-base !text-[#e31e24] left-0"></i></span><span>Nullam quis risus eget.</span></li>
<li class="relative !mt-[0.35rem] !pl-5"><span><i class="uil uil-arrow-right before:content-['\e94c'] absolute top-[-0.2rem] text-base !text-[#e31e24] left-0"></i></span><span>Donec id elit non mi porta.</span></li>
<li class="relative !mt-[0.35rem] !pl-5"><span><i class="uil uil-arrow-right before:content-['\e94c'] absolute top-[-0.2rem] text-base !text-[#e31e24] left-0"></i></span><span>Fusce dapibus cursus.</span></li>
</ul>
</div>
<!-- /column -->
@@ -871,17 +871,17 @@
<div class="code-wrapper-inner">
<pre class="language-html"><code>
&#60;ul class="pl-0 list-none bullet-primary !mb-0"&#62;
&#60;li class="relative !pl-4 before:absolute before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:!text-[#3f78e0] before:left-0 before:font-SansSerif"&#62;Aenean eu leo quam.&#60;/li&#62;
&#60;li class="relative !mt-[0.35rem] !pl-4 before:absolute before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:!text-[#3f78e0] before:left-0 before:font-SansSerif"&#62;Nullam quis risus eget.&#60;/li&#62;
&#60;li class="relative !mt-[0.35rem] !pl-4 before:absolute before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:!text-[#3f78e0] before:left-0 before:font-SansSerif"&#62;Donec id elit non mi porta.&#60;/li&#62;
&#60;li class="relative !mt-[0.35rem] !pl-4 before:absolute before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:!text-[#3f78e0] before:left-0 before:font-SansSerif"&#62;Fusce dapibus cursus.&#60;/li&#62;
&#60;li class="relative !pl-4 before:absolute before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:!text-[#e31e24] before:left-0 before:font-SansSerif"&#62;Aenean eu leo quam.&#60;/li&#62;
&#60;li class="relative !mt-[0.35rem] !pl-4 before:absolute before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:!text-[#e31e24] before:left-0 before:font-SansSerif"&#62;Nullam quis risus eget.&#60;/li&#62;
&#60;li class="relative !mt-[0.35rem] !pl-4 before:absolute before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:!text-[#e31e24] before:left-0 before:font-SansSerif"&#62;Donec id elit non mi porta.&#60;/li&#62;
&#60;li class="relative !mt-[0.35rem] !pl-4 before:absolute before:top-[-0.15rem] before:text-[1rem] before:content-['\2022'] before:!text-[#e31e24] before:left-0 before:font-SansSerif"&#62;Fusce dapibus cursus.&#60;/li&#62;
&#60;/ul&#62;
&#60;ul class="pl-0 list-none bullet-primary !mb-0"&#62;
&#60;li class="relative !pl-5"&#62;&#60;span&#62;&#60;i class="uil uil-arrow-right before:content-['\e94c'] absolute top-[-0.2rem] text-base !text-[#3f78e0] left-0"&#62;&#60;/i&#62;&#60;/span&#62;&#60;span&#62;Aenean eu leo quam.&#60;/span&#62;&#60;/li&#62;
&#60;li class="relative !mt-[0.35rem] !pl-5"&#62;&#60;span&#62;&#60;i class="uil uil-arrow-right before:content-['\e94c'] absolute top-[-0.2rem] text-base !text-[#3f78e0] left-0"&#62;&#60;/i&#62;&#60;/span&#62;&#60;span&#62;Nullam quis risus eget.&#60;/span&#62;&#60;/li&#62;
&#60;li class="relative !mt-[0.35rem] !pl-5"&#62;&#60;span&#62;&#60;i class="uil uil-arrow-right before:content-['\e94c'] absolute top-[-0.2rem] text-base !text-[#3f78e0] left-0"&#62;&#60;/i&#62;&#60;/span&#62;&#60;span&#62;Donec id elit non mi porta.&#60;/span&#62;&#60;/li&#62;
&#60;li class="relative !mt-[0.35rem] !pl-5"&#62;&#60;span&#62;&#60;i class="uil uil-arrow-right before:content-['\e94c'] absolute top-[-0.2rem] text-base !text-[#3f78e0] left-0"&#62;&#60;/i&#62;&#60;/span&#62;&#60;span&#62;Fusce dapibus cursus.&#60;/span&#62;&#60;/li&#62;
&#60;li class="relative !pl-5"&#62;&#60;span&#62;&#60;i class="uil uil-arrow-right before:content-['\e94c'] absolute top-[-0.2rem] text-base !text-[#e31e24] left-0"&#62;&#60;/i&#62;&#60;/span&#62;&#60;span&#62;Aenean eu leo quam.&#60;/span&#62;&#60;/li&#62;
&#60;li class="relative !mt-[0.35rem] !pl-5"&#62;&#60;span&#62;&#60;i class="uil uil-arrow-right before:content-['\e94c'] absolute top-[-0.2rem] text-base !text-[#e31e24] left-0"&#62;&#60;/i&#62;&#60;/span&#62;&#60;span&#62;Nullam quis risus eget.&#60;/span&#62;&#60;/li&#62;
&#60;li class="relative !mt-[0.35rem] !pl-5"&#62;&#60;span&#62;&#60;i class="uil uil-arrow-right before:content-['\e94c'] absolute top-[-0.2rem] text-base !text-[#e31e24] left-0"&#62;&#60;/i&#62;&#60;/span&#62;&#60;span&#62;Donec id elit non mi porta.&#60;/span&#62;&#60;/li&#62;
&#60;li class="relative !mt-[0.35rem] !pl-5"&#62;&#60;span&#62;&#60;i class="uil uil-arrow-right before:content-['\e94c'] absolute top-[-0.2rem] text-base !text-[#e31e24] left-0"&#62;&#60;/i&#62;&#60;/span&#62;&#60;span&#62;Fusce dapibus cursus.&#60;/span&#62;&#60;/li&#62;
&#60;/ul&#62;
&#60;ul class="pl-0 list-none bullet-bg bullet-soft-green !mb-0"&#62;
@@ -906,7 +906,7 @@
<div class="flex flex-wrap mx-[-15px] !mt-[-20px] xl:!mt-0 lg:!mt-0 md:!mt-0 items-center">
<div class="xl:w-6/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] !px-[15px] max-w-full">
<figure>
<blockquote class="border-l-[#3f78e0] !leading-[1.7] font-medium !pl-4 border-l-[0.15rem] border-solid text-[1rem] m-[0_0_1rem]">
<blockquote class="border-l-[#e31e24] !leading-[1.7] font-medium !pl-4 border-l-[0.15rem] border-solid text-[1rem] m-[0_0_1rem]">
<p>Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula lacinia odio.</p>
</blockquote>
<figcaption class="!text-[0.6rem] !text-[#aab0bc] !mb-0 before:content-['\2014\a0'] font-bold uppercase !tracking-[0.02rem]">Connor Gibson</figcaption>
@@ -941,7 +941,7 @@
<div class="code-wrapper-inner">
<pre class="language-html"><code>
&#60;figure&#62;
&#60;blockquote class="border-l-[#3f78e0] !leading-[1.7] font-medium !pl-4 border-l-[0.15rem] border-solid text-[1rem] m-[0_0_1rem]"&#62;
&#60;blockquote class="border-l-[#e31e24] !leading-[1.7] font-medium !pl-4 border-l-[0.15rem] border-solid text-[1rem] m-[0_0_1rem]"&#62;
&#60;p&#62;Sed posuere consectetur est at lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula lacinia odio.&#60;/p&#62;
&#60;/blockquote&#62;
&#60;figcaption class="!text-[0.6rem] !text-[#aab0bc] !mb-0 before:content-['\2014\a0'] font-bold uppercase !tracking-[0.02rem]"&#62;Connor Gibson&#60;/figcaption&#62;
@@ -972,11 +972,11 @@
</div>
<!-- /column -->
<div class="xl:w-4/12 lg:w-4/12 md:w-4/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] max-w-full">
<p><span class="xl:!text-[2.5rem] block float-left !text-[calc(1.375rem_+_1.5vw)] leading-none font-medium !ml-0 !mr-[0.6rem] !mt-[0.2rem] !mb-0 !p-0 !text-[#3f78e0] ">A</span>enean non lectus sit amet est imperdiet cursus elementum vitae eros. Cras quis odio in risus euismod suscipit. Fusce viverra ligula vel justo bibendum semper amet.</p>
<p><span class="xl:!text-[2.5rem] block float-left !text-[calc(1.375rem_+_1.5vw)] leading-none font-medium !ml-0 !mr-[0.6rem] !mt-[0.2rem] !mb-0 !p-0 !text-[#e31e24] ">A</span>enean non lectus sit amet est imperdiet cursus elementum vitae eros. Cras quis odio in risus euismod suscipit. Fusce viverra ligula vel justo bibendum semper amet.</p>
</div>
<!-- /column -->
<div class="xl:w-4/12 lg:w-4/12 md:w-4/12 w-full flex-[0_0_auto] xl:!px-[35px] lg:!px-[20px] !px-[15px] max-w-full">
<p><span class="xl:!text-[1.4rem] float-left leading-none font-medium m-[.25rem_.5rem_0_0] p-0 !rounded-[50%] !text-[#3f78e0] !bg-[#e0e9fa] text-[1.4rem] h-[2.3rem] w-[2.3rem] flex content-center items-center justify-center pb-[0.15rem]">A</span>enean non lectus sit amet est imperdiet cursus elementum vitae eros. Cras quis odio in risus euismod suscipit. Fusce viverra ligula vel justo bibendum semper amet.</p>
<p><span class="xl:!text-[1.4rem] float-left leading-none font-medium m-[.25rem_.5rem_0_0] p-0 !rounded-[50%] !text-[#e31e24] !bg-[#e0e9fa] text-[1.4rem] h-[2.3rem] w-[2.3rem] flex content-center items-center justify-center pb-[0.15rem]">A</span>enean non lectus sit amet est imperdiet cursus elementum vitae eros. Cras quis odio in risus euismod suscipit. Fusce viverra ligula vel justo bibendum semper amet.</p>
</div>
<!-- /column -->
</div>
@@ -993,9 +993,9 @@
<pre class="language-html"><code>
&#60;p&#62;&#60;span class="xl:!text-[2.5rem] block float-left !text-[calc(1.375rem_+_1.5vw)] leading-none font-medium !ml-0 !mr-[0.6rem] !mt-[0.2rem] !mb-0 p-0text-[#343f52]"&#62;A&#60;/span&#62;enean non lectus sit amet est imperdiet cursus elementum vitae eros. Cras quis odio in risus euismod suscipit. Fusce viverra ligula vel justo bibendum semper amet.&#60;/p&#62;
&#60;p&#62;&#60;span class="xl:!text-[2.5rem] block float-left !text-[calc(1.375rem_+_1.5vw)] leading-none font-medium !ml-0 !mr-[0.6rem] !mt-[0.2rem] !mb-0 !p-0 !text-[#3f78e0] "&#62;A&#60;/span&#62;enean non lectus sit amet est imperdiet cursus elementum vitae eros. Cras quis odio in risus euismod suscipit. Fusce viverra ligula vel justo bibendum semper amet.&#60;/p&#62;
&#60;p&#62;&#60;span class="xl:!text-[2.5rem] block float-left !text-[calc(1.375rem_+_1.5vw)] leading-none font-medium !ml-0 !mr-[0.6rem] !mt-[0.2rem] !mb-0 !p-0 !text-[#e31e24] "&#62;A&#60;/span&#62;enean non lectus sit amet est imperdiet cursus elementum vitae eros. Cras quis odio in risus euismod suscipit. Fusce viverra ligula vel justo bibendum semper amet.&#60;/p&#62;
&#60;p&#62;&#60;span class="xl:!text-[1.4rem] float-left leading-none font-medium m-[.25rem_.5rem_0_0] p-0 !rounded-[50%] !text-[#3f78e0] !bg-[#e0e9fa] text-[1.4rem] h-[2.3rem] w-[2.3rem] flex content-center items-center justify-center pb-[0.15rem]"&#62;A&#60;/span&#62;enean non lectus sit amet est imperdiet cursus elementum vitae eros. Cras quis odio in risus euismod suscipit. Fusce viverra ligula vel justo bibendum semper amet.&#60;/p&#62;</code></pre>
&#60;p&#62;&#60;span class="xl:!text-[1.4rem] float-left leading-none font-medium m-[.25rem_.5rem_0_0] p-0 !rounded-[50%] !text-[#e31e24] !bg-[#e0e9fa] text-[1.4rem] h-[2.3rem] w-[2.3rem] flex content-center items-center justify-center pb-[0.15rem]"&#62;A&#60;/span&#62;enean non lectus sit amet est imperdiet cursus elementum vitae eros. Cras quis odio in risus euismod suscipit. Fusce viverra ligula vel justo bibendum semper amet.&#60;/p&#62;</code></pre>
</div>
<!--/.code-wrapper-inner -->
</div>
@@ -1078,9 +1078,9 @@
<!-- /.container -->
</section>
<!-- /section -->
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#3f78e0] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<div class="progress-wrap fixed w-[2.3rem] h-[2.3rem] cursor-pointer block shadow-[inset_0_0_0_0.1rem_rgba(128,130,134,0.25)] z-[1010] opacity-0 invisible translate-y-3 transition-all duration-[0.2s] ease-[linear,margin-right] delay-[0s] rounded-[100%] right-6 bottom-6 motion-reduce:transition-none after:absolute after:content-['\e951'] after:text-center after:leading-[2.3rem] after:text-[1.2rem] after:!text-[#e31e24] after:h-[2.3rem] after:w-[2.3rem] after:cursor-pointer after:block after:z-[1] after:transition-all after:duration-[0.2s] after:ease-linear after:left-0 after:top-0 motion-reduce:after:transition-none after:font-Unicons">
<svg class="progress-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
<path class="fill-none stroke-[#3f78e0] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
<path class="fill-none stroke-[#e31e24] stroke-[4] box-border transition-all duration-[0.2s] ease-linear motion-reduce:transition-none" d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
</svg>
</div>
<script src="../../assets/js/plugins.js"></script>