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/credits.html
+119 -119
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,10 +578,10 @@
<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><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='active' href='credits.html'>Credits</a></li>
</ul>
</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><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/accordion.html'>Accordion</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#3f78e0]' href='elements/typography.html'>Typography</a></li>
<li><a class='!text-inherit hover:!text-[#e31e24]' href='elements/accordion.html'>Accordion</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/alerts.html'>Alerts</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/animations.html'>Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/avatars.html'>Avatars</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/background.html'>Background</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/badges.html'>Badges</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/buttons.html'>Buttons</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/card.html'>Card</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/carousel.html'>Carousel</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/dividers.html'>Dividers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/form-elements.html'>Form Elements</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/image-hover.html'>Image Hover</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/image-mask.html'>Image Mask</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/lightbox.html'>Lightbox</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/player.html'>Media Player</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/modal.html'>Modal</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/pagination.html'>Pagination</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/progressbar.html'>Progressbar</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/shadows.html'>Shadows</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/shapes.html'>Shapes</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/tables.html'>Tables</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/tabs.html'>Tabs</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/text-animations.html'>Text Animations</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/text-highlight.html'>Text Highlight</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/tiles.html'>Tiles</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/tooltips-popovers.html'>Tooltips & Popovers</a></li>
<li class="!mt-[0.35rem]"><a class='!text-inherit hover:!text-[#e31e24]' href='elements/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="!text-inherit hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] active" href="#snippet-1">JS</a></li>
<li class="!mt-[0.35rem]"><a class="!text-inherit hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-2">Images</a></li>
<li class="!mt-[0.35rem]"><a class="!text-inherit hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-3">Icons</a></li>
<li class="!mt-[0.35rem]"><a class="!text-inherit hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-4">Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class="!text-inherit hover:!text-[#3f78e0] nav-link scroll !text-[0.7rem] " href="#snippet-5">Fonts</a></li>
<li><a class="!text-inherit hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] active" href="#snippet-1">JS</a></li>
<li class="!mt-[0.35rem]"><a class="!text-inherit hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-2">Images</a></li>
<li class="!mt-[0.35rem]"><a class="!text-inherit hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-3">Icons</a></li>
<li class="!mt-[0.35rem]"><a class="!text-inherit hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-4">Illustrations</a></li>
<li class="!mt-[0.35rem]"><a class="!text-inherit hover:!text-[#e31e24] nav-link scroll !text-[0.7rem] " href="#snippet-5">Fonts</a></li>
</ul>
</nav>
<!-- /nav -->
@@ -673,83 +673,83 @@
</thead>
<tbody>
<tr>
<td><a class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom !bg-[#e0e9fa] !my-0 hover:!text-[#3f78e0] hover:after:!text-[#3f78e0]" href="https://tailwindcss.com/" target="_blank">tailwindcss</a></td>
<td><a class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom !bg-[#e0e9fa] !my-0 hover:!text-[#e31e24] hover:after:!text-[#e31e24]" href="https://tailwindcss.com/" target="_blank">tailwindcss</a></td>
<td>Rapidly build modern websites without ever leaving your HTML.</td>
</tr>
<tr>
<td><a class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom !bg-[#e0e9fa] !my-0 hover:!text-[#3f78e0] hover:after:!text-[#3f78e0]" href="http://scottjehl.github.io/picturefill/" target="_blank">Picturefill</a></td>
<td><a class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom !bg-[#e0e9fa] !my-0 hover:!text-[#e31e24] hover:after:!text-[#e31e24]" href="http://scottjehl.github.io/picturefill/" target="_blank">Picturefill</a></td>
<td>A responsive image polyfill.</td>
</tr>
<tr>
<td><a class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom !bg-[#e0e9fa] !my-0 hover:!text-[#3f78e0] hover:after:!text-[#3f78e0]" href="https://markgoodyear.com/labs/headhesive/" target="_blank">Headhesive</a></td>
<td><a class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom !bg-[#e0e9fa] !my-0 hover:!text-[#e31e24] hover:after:!text-[#e31e24]" href="https://markgoodyear.com/labs/headhesive/" target="_blank">Headhesive</a></td>
<td>An on-demand sticky header.</td>
</tr>
<tr>
<td><a class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom !bg-[#e0e9fa] !my-0 hover:!text-[#3f78e0] hover:after:!text-[#3f78e0]" href="https://github.com/prjct-samwest/scrollCue" target="_blank">scrollCue.js</a></td>
<td><a class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom !bg-[#e0e9fa] !my-0 hover:!text-[#e31e24] hover:after:!text-[#e31e24]" href="https://github.com/prjct-samwest/scrollCue" target="_blank">scrollCue.js</a></td>
<td>Show elements by scrolling.</td>
</tr>
<tr>
<td><a class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom !bg-[#e0e9fa] !my-0 hover:!text-[#3f78e0] hover:after:!text-[#3f78e0]" href="https://swiperjs.com/" target="_blank">Swiper</a></td>
<td><a class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom !bg-[#e0e9fa] !my-0 hover:!text-[#e31e24] hover:after:!text-[#e31e24]" href="https://swiperjs.com/" target="_blank">Swiper</a></td>
<td>The most modern mobile touch slider.</td>
</tr>
<tr>
<td><a class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom !bg-[#e0e9fa] !my-0 hover:!text-[#3f78e0] hover:after:!text-[#3f78e0]" href="https://dixonandmoe.com/rellax/" target="_blank">rellax.js</a></td>
<td><a class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom !bg-[#e0e9fa] !my-0 hover:!text-[#e31e24] hover:after:!text-[#e31e24]" href="https://dixonandmoe.com/rellax/" target="_blank">rellax.js</a></td>
<td>A buttery smooth, super lightweight, vanilla javascript parallax library.</td>
</tr>
<tr>
<td><a class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom !bg-[#e0e9fa] !my-0 hover:!text-[#3f78e0] hover:after:!text-[#3f78e0]" href="https://github.com/Ins-V/iTooltip" target="_blank">iTooltip</a></td>
<td><a class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom !bg-[#e0e9fa] !my-0 hover:!text-[#e31e24] hover:after:!text-[#e31e24]" href="https://github.com/Ins-V/iTooltip" target="_blank">iTooltip</a></td>
<td>Transform native tooltip’s into customizable overlays.</td>
</tr>
<tr>
<td><a class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom !bg-[#e0e9fa] !my-0 hover:!text-[#3f78e0] hover:after:!text-[#3f78e0]" href="https://plyr.io/" target="_blank">Plyr</a></td>
<td><a class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom !bg-[#e0e9fa] !my-0 hover:!text-[#e31e24] hover:after:!text-[#e31e24]" href="https://plyr.io/" target="_blank">Plyr</a></td>
<td>A simple, accessible and customisable media player.</td>
</tr>
<tr>
<td><a class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom !bg-[#e0e9fa] !my-0 hover:!text-[#3f78e0] hover:after:!text-[#3f78e0]" href="https://biati-digital.github.io/glightbox/" target="_blank">GLightbox</a></td>
<td><a class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom !bg-[#e0e9fa] !my-0 hover:!text-[#e31e24] hover:after:!text-[#e31e24]" href="https://biati-digital.github.io/glightbox/" target="_blank">GLightbox</a></td>
<td>A touchable pure Javascript lightbox with mobile and video support.</td>
</tr>
<tr>
<td><a class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom !bg-[#e0e9fa] !my-0 hover:!text-[#3f78e0] hover:after:!text-[#3f78e0]" href="https://isotope.metafizzy.co/" target="_blank">Isotope</a></td>
<td><a class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom !bg-[#e0e9fa] !my-0 hover:!text-[#e31e24] hover:after:!text-[#e31e24]" href="https://isotope.metafizzy.co/" target="_blank">Isotope</a></td>
<td>Filter & sort magical layouts.</td>
</tr>
<tr>
<td><a class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom !bg-[#e0e9fa] !my-0 hover:!text-[#3f78e0] hover:after:!text-[#3f78e0]" href="https://github.com/bfintal/Counter-Up2" target="_blank">Counter-Up2</a></td>
<td><a class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom !bg-[#e0e9fa] !my-0 hover:!text-[#e31e24] hover:after:!text-[#e31e24]" href="https://github.com/bfintal/Counter-Up2" target="_blank">Counter-Up2</a></td>
<td>Count up to a targeted number when the number becomes visible.</td>
</tr>
<tr>
<td><a class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom !bg-[#e0e9fa] !my-0 hover:!text-[#3f78e0] hover:after:!text-[#3f78e0]" href="http://imakewebthings.com/waypoints/" target="_blank">Waypoints</a></td>
<td><a class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom !bg-[#e0e9fa] !my-0 hover:!text-[#e31e24] hover:after:!text-[#e31e24]" href="http://imakewebthings.com/waypoints/" target="_blank">Waypoints</a></td>
<td>The easiest way to trigger a function when you scroll to an element.</td>
</tr>
<tr>
<td><a class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom !bg-[#e0e9fa] !my-0 hover:!text-[#3f78e0] hover:after:!text-[#3f78e0]" href="https://kimmobrunfeldt.github.io/progressbar.js/" target="_blank">Progressbar.js</a></td>
<td><a class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom !bg-[#e0e9fa] !my-0 hover:!text-[#e31e24] hover:after:!text-[#e31e24]" href="https://kimmobrunfeldt.github.io/progressbar.js/" target="_blank">Progressbar.js</a></td>
<td>Responsive and slick progress bars with animated SVG paths.</td>
</tr>
<tr>
<td><a class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom !bg-[#e0e9fa] !my-0 hover:!text-[#3f78e0] hover:after:!text-[#3f78e0]" href="https://clipboardjs.com/" target="_blank">clipboard.js</a></td>
<td><a class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom !bg-[#e0e9fa] !my-0 hover:!text-[#e31e24] hover:after:!text-[#e31e24]" href="https://clipboardjs.com/" target="_blank">clipboard.js</a></td>
<td>A modern approach to copy text to clipboard.</td>
</tr>
<tr>
<td><a class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom !bg-[#e0e9fa] !my-0 hover:!text-[#3f78e0] hover:after:!text-[#3f78e0]" href="https://prismjs.com/" target="_blank">prism.js</a></td>
<td><a class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom !bg-[#e0e9fa] !my-0 hover:!text-[#e31e24] hover:after:!text-[#e31e24]" href="https://prismjs.com/" target="_blank">prism.js</a></td>
<td>Lightweight, extensible syntax highlighter.</td>
</tr>
<tr>
<td><a class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom !bg-[#e0e9fa] !my-0 hover:!text-[#3f78e0] hover:after:!text-[#3f78e0]" href="https://github.com/iconfu/svg-inject" target="_blank">SVGInject</a></td>
<td><a class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom !bg-[#e0e9fa] !my-0 hover:!text-[#e31e24] hover:after:!text-[#e31e24]" href="https://github.com/iconfu/svg-inject" target="_blank">SVGInject</a></td>
<td>Replaces an img element with an inline SVG.</td>
</tr>
<tr>
<td><a class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom !bg-[#e0e9fa] !my-0 hover:!text-[#3f78e0] hover:after:!text-[#3f78e0]" href="https://steven.codes/typerjs/" target="_blank">Typer.js</a></td>
<td><a class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom !bg-[#e0e9fa] !my-0 hover:!text-[#e31e24] hover:after:!text-[#e31e24]" href="https://steven.codes/typerjs/" target="_blank">Typer.js</a></td>
<td>The typing effect with a pure HTML interface.</td>
</tr>
<tr>
<td><a class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom !bg-[#e0e9fa] !my-0 hover:!text-[#3f78e0] hover:after:!text-[#3f78e0]" href="https://github.com/iamdustan/smoothscroll" target="_blank">smoothscroll.js</a></td>
<td><a class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom !bg-[#e0e9fa] !my-0 hover:!text-[#e31e24] hover:after:!text-[#e31e24]" href="https://github.com/iamdustan/smoothscroll" target="_blank">smoothscroll.js</a></td>
<td>Smooth Scroll behavior polyfill.</td>
</tr>
<tr>
<td><a class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom !bg-[#e0e9fa] !my-0 hover:!text-[#3f78e0] hover:after:!text-[#3f78e0]" href="https://adrianklimek.github.io/replaceme/" target="_blank">ReplaceMe.js</a></td>
<td><a class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom !bg-[#e0e9fa] !my-0 hover:!text-[#e31e24] hover:after:!text-[#e31e24]" href="https://adrianklimek.github.io/replaceme/" target="_blank">ReplaceMe.js</a></td>
<td>Lightweight text rotator written in vanilla JS.</td>
</tr>
<tr>
<td><a class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom !bg-[#e0e9fa] !my-0 hover:!text-[#3f78e0] hover:after:!text-[#3f78e0]" href="https://bootstrapious.com/p/how-to-build-a-working-bootstrap-contact-form" target="_blank">Contact Form</a></td>
<td><a class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom !bg-[#e0e9fa] !my-0 hover:!text-[#e31e24] hover:after:!text-[#e31e24]" href="https://bootstrapious.com/p/how-to-build-a-working-bootstrap-contact-form" target="_blank">Contact Form</a></td>
<td>Tutorial that was used to build the contact forms on the template.</td>
</tr>
</tbody>
@@ -764,7 +764,7 @@
<div class="card">
<div class="card-body p-[40px]">
<h3>Pexels</h3>
<p class="!mb-5">To reach the collection of all images/videos from Pexels used in Trunçgil, click <a href="https://www.pexels.com/collections/Trunçgil-gbw1t9c/" class="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">here</a>.</p>
<p class="!mb-5">To reach the collection of all images/videos from Pexels used in Trunçgil, click <a href="https://www.pexels.com/collections/Trunçgil-gbw1t9c/" class="external hover:!text-[#e31e24] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">here</a>.</p>
<div class="flex flex-wrap mx-[-15px] !mt-[-30px] !mb-6">
<div class="item md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
<figure class="lift rounded"><a href="https://www.pexels.com/photo/man-in-blue-collared-top-using-imac-indoors-3182782/" target="_blank"><img src="../assets/img/docs/pex1.jpg" alt="image"></a></figure>
@@ -782,7 +782,7 @@
<!--/.row -->
<hr class="!mt-[3rem] !mb-10">
<h3>Rawpixel</h3>
<p class="!mb-5">To reach the collection of all images from Rawpixel used in Trunçgil, click <a href="https://www.rawpixel.com/community-board/1391692/Trunçgil?sort=last_added&amp;mode=shop&amp;page=1" class="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">here</a>.</p>
<p class="!mb-5">To reach the collection of all images from Rawpixel used in Trunçgil, click <a href="https://www.rawpixel.com/community-board/1391692/Trunçgil?sort=last_added&amp;mode=shop&amp;page=1" class="external hover:!text-[#e31e24] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">here</a>.</p>
<div class="flex flex-wrap mx-[-15px] !mt-[-30px] !mb-6">
<div class="item md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
<figure class="lift rounded"><a href="https://www.rawpixel.com/image/56901/premium-photo-image-african-descent-analysing-analysis" target="_blank"><img src="../assets/img/docs/raw1.jpg" alt="image"></a></figure>
@@ -800,7 +800,7 @@
<!--/.row -->
<hr class="!mt-[3rem] !mb-10">
<h3>Unsplash</h3>
<p class="!mb-5">To reach the collection of all images from Unsplash used in Trunçgil, click <a href="https://unsplash.com/collections/vn4OtMorwCA/Trunçgil" class="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">here</a>.</p>
<p class="!mb-5">To reach the collection of all images from Unsplash used in Trunçgil, click <a href="https://unsplash.com/collections/vn4OtMorwCA/Trunçgil" class="external hover:!text-[#e31e24] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">here</a>.</p>
<div class="flex flex-wrap mx-[-15px] !mt-[-30px] !mb-6">
<div class="item md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
<figure class="lift rounded"><a href="https://unsplash.com/photos/DMl5gG0yWWY" target="_blank"><img src="../assets/img/docs/un1.jpg" alt="image"></a></figure>
@@ -818,7 +818,7 @@
<!--/.row -->
<hr class="!mt-[3rem] !mb-10">
<h3>Freepik</h3>
<p class="!mb-5">To reach the Freepik collection first make sure you are logged into Freepik, then click <a href="https://www.freepik.com/user/collections/Trunçgil/2260699" class="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">here</a>.</p>
<p class="!mb-5">To reach the Freepik collection first make sure you are logged into Freepik, then click <a href="https://www.freepik.com/user/collections/Trunçgil/2260699" class="external hover:!text-[#e31e24] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">here</a>.</p>
<div class="flex flex-wrap mx-[-15px] !mt-[-30px] !mb-6">
<div class="item md:w-6/12 lg:w-4/12 xl:w-4/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mt-[30px]">
<figure class="lift rounded"><a href="https://www.freepik.com/free-photo/community-young-people-posing-together_6981911.htm#&position=0&from_view=collections" target="_blank"><img src="../assets/img/docs/fre1.jpg" alt="image"></a></figure>
@@ -852,29 +852,29 @@
</div>
<!--/.row -->
<p class="!mb-0">
<a href="https://www.pixeden.com/psd-mock-up-templates/psd-macarons-box-packaging-mockup" class="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">se3.jpg</a>
<a href="https://www.pixeden.com/psd-mock-up-templates/product-psd-stationery-mockup-set" class="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">se4.jpg</a>
<a href="https://www.pixeden.com/psd-mock-up-templates/psd-paper-bag-mockup-set" class="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">pd1.jpg</a>
<a href="https://www.pixeden.com/psd-mock-up-templates/elegant-psd-invitation-mockup" class="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">pd2.jpg</a>
<a href="https://www.pixeden.com/psd-mock-up-templates/basic-mailing-stationery-mockup" class="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">pd3.jpg</a>
<a href="https://www.pixeden.com/psd-mock-up-templates/small-psd-square-box-mockup-set" class="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">pd4.jpg</a>
<a href="https://www.pixeden.com/psd-mock-up-templates/psd-polaroid-photos-mockup" class="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">pd5.jpg</a>
<a href="https://www.pixeden.com/psd-mock-up-templates/hardcover-psd-book-mockup-scene" class="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">pd6.jpg</a>
<a href="https://www.pixeden.com/psd-mock-up-templates/psd-stationery-office-pack-mockup" class="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">pp1.jpg</a>
<a href="https://www.pixeden.com/psd-mock-up-templates/simple-stationery-branding-vol3" class="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">pp7.jpg</a>
<a href="https://www.pixeden.com/psd-mock-up-templates/mini-envelope-psd-mockup" class="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">pp8.jpg</a>
<a href="https://www.pixeden.com/psd-mock-up-templates/stationery-branding-mock-up-vol-5-1" class="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">pp9.jpg</a>
<a href="https://www.pixeden.com/psd-web-elements/abstract-ui-project-scene-mockup" class="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">se1.jpg</a>
<a href="https://www.pixeden.com/psd-web-elements/abstract-ui-project-scene-mockup-2" class="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">se2.jpg</a>
<a href="https://www.pixeden.com/psd-mock-up-templates/square-psd-invitation-card-paper-wrap" class="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">rp1.jpg</a>
<a href="https://www.pixeden.com/psd-mock-up-templates/stationery-psd-pocket-notebook-mockup" class="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">rp2.jpg</a>
<a href="https://www.pixeden.com/psd-mock-up-templates/psd-notebook-mockup-set" class="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">rp3.jpg</a>
<a href="https://www.pixeden.com/psd-mock-up-templates/psd-clipboard-stationery-mockup" class="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">pd7.jpg</a>
<a href="https://www.pixeden.com/psd-mock-up-templates/psd-magazine-mockup-vol8" class="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">pd8.jpg</a>
<a href="https://www.pixeden.com/psd-mock-up-templates/square-psd-cardboard-box-mockup-2" class="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">pd9.jpg</a>
<a href="https://www.pixeden.com/psd-mock-up-templates/basic-stationery-branding-vol-5" class="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">pd10.jpg</a>
<a href="https://www.pixeden.com/psd-mock-up-templates/psd-cardboard-packaging-mockup" class="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">pd11.jpg</a>
<a href="https://www.pixeden.com/psd-mock-up-templates/psd-shopping-bag-mockup" class="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">pd12.jpg</a>
<a href="https://www.pixeden.com/psd-mock-up-templates/psd-macarons-box-packaging-mockup" class="external hover:!text-[#e31e24] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">se3.jpg</a>
<a href="https://www.pixeden.com/psd-mock-up-templates/product-psd-stationery-mockup-set" class="external hover:!text-[#e31e24] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">se4.jpg</a>
<a href="https://www.pixeden.com/psd-mock-up-templates/psd-paper-bag-mockup-set" class="external hover:!text-[#e31e24] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">pd1.jpg</a>
<a href="https://www.pixeden.com/psd-mock-up-templates/elegant-psd-invitation-mockup" class="external hover:!text-[#e31e24] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">pd2.jpg</a>
<a href="https://www.pixeden.com/psd-mock-up-templates/basic-mailing-stationery-mockup" class="external hover:!text-[#e31e24] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">pd3.jpg</a>
<a href="https://www.pixeden.com/psd-mock-up-templates/small-psd-square-box-mockup-set" class="external hover:!text-[#e31e24] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">pd4.jpg</a>
<a href="https://www.pixeden.com/psd-mock-up-templates/psd-polaroid-photos-mockup" class="external hover:!text-[#e31e24] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">pd5.jpg</a>
<a href="https://www.pixeden.com/psd-mock-up-templates/hardcover-psd-book-mockup-scene" class="external hover:!text-[#e31e24] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">pd6.jpg</a>
<a href="https://www.pixeden.com/psd-mock-up-templates/psd-stationery-office-pack-mockup" class="external hover:!text-[#e31e24] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">pp1.jpg</a>
<a href="https://www.pixeden.com/psd-mock-up-templates/simple-stationery-branding-vol3" class="external hover:!text-[#e31e24] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">pp7.jpg</a>
<a href="https://www.pixeden.com/psd-mock-up-templates/mini-envelope-psd-mockup" class="external hover:!text-[#e31e24] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">pp8.jpg</a>
<a href="https://www.pixeden.com/psd-mock-up-templates/stationery-branding-mock-up-vol-5-1" class="external hover:!text-[#e31e24] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">pp9.jpg</a>
<a href="https://www.pixeden.com/psd-web-elements/abstract-ui-project-scene-mockup" class="external hover:!text-[#e31e24] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">se1.jpg</a>
<a href="https://www.pixeden.com/psd-web-elements/abstract-ui-project-scene-mockup-2" class="external hover:!text-[#e31e24] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">se2.jpg</a>
<a href="https://www.pixeden.com/psd-mock-up-templates/square-psd-invitation-card-paper-wrap" class="external hover:!text-[#e31e24] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">rp1.jpg</a>
<a href="https://www.pixeden.com/psd-mock-up-templates/stationery-psd-pocket-notebook-mockup" class="external hover:!text-[#e31e24] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">rp2.jpg</a>
<a href="https://www.pixeden.com/psd-mock-up-templates/psd-notebook-mockup-set" class="external hover:!text-[#e31e24] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">rp3.jpg</a>
<a href="https://www.pixeden.com/psd-mock-up-templates/psd-clipboard-stationery-mockup" class="external hover:!text-[#e31e24] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">pd7.jpg</a>
<a href="https://www.pixeden.com/psd-mock-up-templates/psd-magazine-mockup-vol8" class="external hover:!text-[#e31e24] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">pd8.jpg</a>
<a href="https://www.pixeden.com/psd-mock-up-templates/square-psd-cardboard-box-mockup-2" class="external hover:!text-[#e31e24] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">pd9.jpg</a>
<a href="https://www.pixeden.com/psd-mock-up-templates/basic-stationery-branding-vol-5" class="external hover:!text-[#e31e24] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">pd10.jpg</a>
<a href="https://www.pixeden.com/psd-mock-up-templates/psd-cardboard-packaging-mockup" class="external hover:!text-[#e31e24] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">pd11.jpg</a>
<a href="https://www.pixeden.com/psd-mock-up-templates/psd-shopping-bag-mockup" class="external hover:!text-[#e31e24] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">pd12.jpg</a>
</p>
<hr class="!mt-[3rem] !mb-10">
<h3 class="!mb-5">Icons8</h3>
@@ -894,18 +894,18 @@
</div>
<!--/.row -->
<p class="!mb-0">
<a href="https://icons8.com/photos/photo/ceramic-vases-home-collection--5b0bc6ec8b658800012318f1" class="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">cs1.jpg</a>
<a href="https://icons8.com/photos/photo/still-life-with-yellow-dried-flowers-and-a-lemon--5b0bc6f18b658800012318f3" class="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">cs2.jpg</a>
<a href="https://icons8.com/photos/photo/tender-gifts-for-a-tender-person--5b0bc7328b6588000123190d" class="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">cs3.jpg</a>
<a href="https://icons8.com/photos/photo/when-your-tea-is-made-with-love--5aba7d3a8b65880001a035cf" class="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">cs4.jpg</a>
<a href="https://icons8.com/photos/photo/everything-starts-blooming-at-the-touch-of-love--5aba7d458b65880001a035d1" class="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">cs5.jpg</a>
<a href="https://icons8.com/photos/photo/everything-starts-blooming-at-the-touch-of-love--5aba7d388b65880001a035ce" class="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">cs6.jpg</a>
<a href="https://icons8.com/photos/photo/fruit-jelly-strip-getting-out-of-toothpaste-tube--5aba7cfc8b65880001a035ba" class="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">cs7.jpg</a>
<a href="https://icons8.com/photos/photo/minute-on-the-lips-lifetime-on-the-hips--5aba7cf88b65880001a035b9" class="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">cs8.jpg</a>
<a href="https://icons8.com/photos/photo/bright-idea--5aba7a4a8b65880001a035ad" class="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">cs9.jpg</a>
<a href="https://icons8.com/photos/photo/some-eggs-brown-bread-and-butter--59d8d7cb0b7a6a03ae47271d" class="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">cs10.jpg</a>
<a href="https://icons8.com/photos/photo/flavorful-burst-of-color-and-taste--59d8d4b00b7a6a03ae47265d" class="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">cs11.jpg</a>
<a href="https://iconos8.es/photos/photo/lets-cook-mushrooms-in-a-sour-cream-sauce--59d8d4830b7a6a03ae472653" class="external hover:!text-[#3f78e0] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">cs12.jpg</a>
<a href="https://icons8.com/photos/photo/ceramic-vases-home-collection--5b0bc6ec8b658800012318f1" class="external hover:!text-[#e31e24] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">cs1.jpg</a>
<a href="https://icons8.com/photos/photo/still-life-with-yellow-dried-flowers-and-a-lemon--5b0bc6f18b658800012318f3" class="external hover:!text-[#e31e24] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">cs2.jpg</a>
<a href="https://icons8.com/photos/photo/tender-gifts-for-a-tender-person--5b0bc7328b6588000123190d" class="external hover:!text-[#e31e24] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">cs3.jpg</a>
<a href="https://icons8.com/photos/photo/when-your-tea-is-made-with-love--5aba7d3a8b65880001a035cf" class="external hover:!text-[#e31e24] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">cs4.jpg</a>
<a href="https://icons8.com/photos/photo/everything-starts-blooming-at-the-touch-of-love--5aba7d458b65880001a035d1" class="external hover:!text-[#e31e24] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">cs5.jpg</a>
<a href="https://icons8.com/photos/photo/everything-starts-blooming-at-the-touch-of-love--5aba7d388b65880001a035ce" class="external hover:!text-[#e31e24] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">cs6.jpg</a>
<a href="https://icons8.com/photos/photo/fruit-jelly-strip-getting-out-of-toothpaste-tube--5aba7cfc8b65880001a035ba" class="external hover:!text-[#e31e24] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">cs7.jpg</a>
<a href="https://icons8.com/photos/photo/minute-on-the-lips-lifetime-on-the-hips--5aba7cf88b65880001a035b9" class="external hover:!text-[#e31e24] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">cs8.jpg</a>
<a href="https://icons8.com/photos/photo/bright-idea--5aba7a4a8b65880001a035ad" class="external hover:!text-[#e31e24] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">cs9.jpg</a>
<a href="https://icons8.com/photos/photo/some-eggs-brown-bread-and-butter--59d8d7cb0b7a6a03ae47271d" class="external hover:!text-[#e31e24] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">cs10.jpg</a>
<a href="https://icons8.com/photos/photo/flavorful-burst-of-color-and-taste--59d8d4b00b7a6a03ae47265d" class="external hover:!text-[#e31e24] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">cs11.jpg</a>
<a href="https://iconos8.es/photos/photo/lets-cook-mushrooms-in-a-sour-cream-sauce--59d8d4830b7a6a03ae472653" class="external hover:!text-[#e31e24] !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom" target="_blank">cs12.jpg</a>
</p>
<hr class="!mt-[3rem] !mb-10">
<h3 class="!mb-5">Mockups</h3>
@@ -976,7 +976,7 @@
</section>
<section id="snippet-3" class="wrapper pt-24">
<h2 class="!mb-3 !leading-[1.35]">Icons</h2>
<p class="lead !leading-[1.65] text-[0.9rem] font-medium !mb-8">To reach the collections of icons used in Trunçgil, go to pages <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='styleguide/icons-svg.html'>SVG Icons</a> and <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='styleguide/icons-font.html'>Font Icons</a></p>
<p class="lead !leading-[1.65] text-[0.9rem] font-medium !mb-8">To reach the collections of icons used in Trunçgil, go to pages <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='styleguide/icons-svg.html'>SVG Icons</a> and <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='styleguide/icons-font.html'>Font Icons</a></p>
<div class="card">
<div class="card-body p-[40px]">
<table class="table">
@@ -988,15 +988,15 @@
</thead>
<tbody>
<tr>
<td><a class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom !bg-[#e0e9fa] my-0 whitespace-nowrap hover:!text-[#3f78e0] hover:after:!text-[#3f78e0]" href="https://iconscout.com/unicons/explore/line" target="_blank">Font Icons</a></td>
<td><a class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom !bg-[#e0e9fa] my-0 whitespace-nowrap hover:!text-[#e31e24] hover:after:!text-[#e31e24]" href="https://iconscout.com/unicons/explore/line" target="_blank">Font Icons</a></td>
<td>Web’s new favorite icon library, Unicons.</td>
</tr>
<tr>
<td><a class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom !bg-[#e0e9fa] my-0 whitespace-nowrap hover:!text-[#3f78e0] hover:after:!text-[#3f78e0]" href="https://www.flaticon.com/authors/monochrome/yellow" target="_blank">SVG Lineal</a></td>
<td><a class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom !bg-[#e0e9fa] my-0 whitespace-nowrap hover:!text-[#e31e24] hover:after:!text-[#e31e24]" href="https://www.flaticon.com/authors/monochrome/yellow" target="_blank">SVG Lineal</a></td>
<td>Monochrome icons from Freepik.</td>
</tr>
<tr>
<td><a class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom !bg-[#e0e9fa] my-0 whitespace-nowrap hover:!text-[#3f78e0] hover:after:!text-[#3f78e0]" href="https://www.flaticon.com/authors/pixel-perfect/tritone" target="_blank">SVG Solid</a></td>
<td><a class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom !bg-[#e0e9fa] my-0 whitespace-nowrap hover:!text-[#e31e24] hover:after:!text-[#e31e24]" href="https://www.flaticon.com/authors/pixel-perfect/tritone" target="_blank">SVG Solid</a></td>
<td>Tritone icons from Freepik.</td>
</tr>
</tbody>
@@ -1008,7 +1008,7 @@
</section>
<section id="snippet-4" class="wrapper pt-24">
<h2 class="!mb-3 !leading-[1.35]">Illustrations</h2>
<p class="lead !leading-[1.65] text-[0.9rem] font-medium !mb-8">To reach the collections of illustrations used in Trunçgil, click <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='styleguide/illustrations.html'>here</a></p>
<p class="lead !leading-[1.65] text-[0.9rem] font-medium !mb-8">To reach the collections of illustrations used in Trunçgil, click <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='styleguide/illustrations.html'>here</a></p>
<div class="card">
<div class="card-body p-[40px]">
<table class="table">
@@ -1020,7 +1020,7 @@
</thead>
<tbody>
<tr>
<td><a class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom !bg-[#e0e9fa] !my-0 hover:!text-[#3f78e0] hover:after:!text-[#3f78e0]" href="https://www.freepik.com/" target="_blank">Freepik</a></td>
<td><a class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom !bg-[#e0e9fa] !my-0 hover:!text-[#e31e24] hover:after:!text-[#e31e24]" href="https://www.freepik.com/" target="_blank">Freepik</a></td>
<td>Graphic resources for everyone.</td>
</tr>
</tbody>
@@ -1043,23 +1043,23 @@
</thead>
<tbody>
<tr>
<td><a class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom !bg-[#e0e9fa] !my-0 hover:!text-[#3f78e0] hover:after:!text-[#3f78e0]" href="https://fonts.google.com/specimen/Manrope" target="_blank">Manrope</a></td>
<td><a class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom !bg-[#e0e9fa] !my-0 hover:!text-[#e31e24] hover:after:!text-[#e31e24]" href="https://fonts.google.com/specimen/Manrope" target="_blank">Manrope</a></td>
<td>Open-source modern font family, designed by Mikhail Sharanda.</td>
</tr>
<tr>
<td><a class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom !bg-[#e0e9fa] !my-0 hover:!text-[#3f78e0] hover:after:!text-[#3f78e0]" href="https://github.com/wonderunit/font-thicccboi" target="_blank">Thicccboi</a></td>
<td><a class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom !bg-[#e0e9fa] !my-0 hover:!text-[#e31e24] hover:after:!text-[#e31e24]" href="https://github.com/wonderunit/font-thicccboi" target="_blank">Thicccboi</a></td>
<td>A free and open source font by Wonder Unit.</td>
</tr>
<tr>
<td><a class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom !bg-[#e0e9fa] !my-0 hover:!text-[#3f78e0] hover:after:!text-[#3f78e0]" href="https://fonts.google.com/specimen/DM+Serif+Display" target="_blank">DM Serif</a></td>
<td><a class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom !bg-[#e0e9fa] !my-0 hover:!text-[#e31e24] hover:after:!text-[#e31e24]" href="https://fonts.google.com/specimen/DM+Serif+Display" target="_blank">DM Serif</a></td>
<td>A high-contrast transitional face, designed by Frank Grießhammer.</td>
</tr>
<tr>
<td><a class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom !bg-[#e0e9fa] !my-0 hover:!text-[#3f78e0] hover:after:!text-[#3f78e0]" href="https://github.com/coreyhu/Urbanist" target="_blank">Urbanist</a></td>
<td><a class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom !bg-[#e0e9fa] !my-0 hover:!text-[#e31e24] hover:after:!text-[#e31e24]" href="https://github.com/coreyhu/Urbanist" target="_blank">Urbanist</a></td>
<td>A low-contrast, geometric sans-serif inspired by Modernist typography.</td>
</tr>
<tr>
<td><a class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom !bg-[#e0e9fa] !my-0 hover:!text-[#3f78e0] hover:after:!text-[#3f78e0]" href="https://floriankarsten.github.io/space-grotesk/" target="_blank">Space Grotesk</a></td>
<td><a class="external !pr-[1.4rem] after:content-['\e906'] after:text-[0.7rem] after:font-Custom !bg-[#e0e9fa] !my-0 hover:!text-[#e31e24] hover:after:!text-[#e31e24]" href="https://floriankarsten.github.io/space-grotesk/" target="_blank">Space Grotesk</a></td>
<td>A proportional sans-serif typeface variant.</td>
</tr>
</tbody>
@@ -1093,9 +1093,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>