SMusatov
/
tabler
mirror of https://github.com/tabler/tabler.git


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402
							<!doctype html>
<!--
* Tabler - Premium and Open Source dashboard template with responsive and high quality UI.
* @version 1.0.0-beta20
* @link https://tabler.io
* Copyright 2018-2023 The Tabler Authors
* Copyright 2018-2023 codecalm.net Paweł Kuna
* Licensed under MIT (https://github.com/tabler/tabler/blob/master/LICENSE)
-->
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>Tabler - Premium and Open Source dashboard template with responsive and high quality UI.</title>
    <!-- CSS files -->
    <link href="./dist/css/tabler.min.css?1692870487" rel="stylesheet"/>
    <link href="./dist/css/tabler-flags.min.css?1692870487" rel="stylesheet"/>
    <link href="./dist/css/tabler-payments.min.css?1692870487" rel="stylesheet"/>
    <link href="./dist/css/tabler-vendors.min.css?1692870487" rel="stylesheet"/>
    <link href="./dist/css/demo.min.css?1692870487" rel="stylesheet"/>
    <style>
      @import url('https://rsms.me/inter/inter.css');
      :root {
      	--tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif;
      }
      body {
      	font-feature-settings: "cv03", "cv04", "cv11";
      }
    </style>
  </head>
  <body >
    <script src="./dist/js/demo-theme.min.js?1692870487"></script>
    <div class="page">
      <!-- Navbar -->
      <header class="navbar navbar-expand-md d-print-none" >
        <div class="container-xl">
          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu" aria-controls="navbar-menu" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <h1 class="navbar-brand navbar-brand-autodark d-none-navbar-horizontal pe-0 pe-md-3">
            <a href=".">
              <img src="./static/logo.svg" width="110" height="32" alt="Tabler" class="navbar-brand-image">
            </a>
          </h1>
          <div class="navbar-nav flex-row order-md-last">
            <div class="nav-item d-none d-md-flex me-3">
              <div class="btn-list">
                <a href="https://github.com/tabler/tabler" class="btn" target="_blank" rel="noreferrer">
                  <!-- Download SVG icon from http://tabler-icons.io/i/brand-github -->
                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" /></svg>
                  Source code
                </a>
                <a href="https://github.com/sponsors/codecalm" class="btn" target="_blank" rel="noreferrer">
                  <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                  <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
                  Sponsor
                </a>
              </div>
            </div>
            <div class="d-none d-md-flex">
              <a href="?theme=dark" class="nav-link px-0 hide-theme-dark" title="Enable dark mode" data-bs-toggle="tooltip"
		   data-bs-placement="bottom">
                <!-- Download SVG icon from http://tabler-icons.io/i/moon -->
                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3c.132 0 .263 0 .393 0a7.5 7.5 0 0 0 7.92 12.446a9 9 0 1 1 -8.313 -12.454z" /></svg>
              </a>
              <a href="?theme=light" class="nav-link px-0 hide-theme-light" title="Enable light mode" data-bs-toggle="tooltip"
		   data-bs-placement="bottom">
                <!-- Download SVG icon from http://tabler-icons.io/i/sun -->
                <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M3 12h1m8 -9v1m8 8h1m-9 8v1m-6.4 -15.4l.7 .7m12.1 -.7l-.7 .7m0 11.4l.7 .7m-12.1 -.7l-.7 .7" /></svg>
              </a>
              <div class="nav-item dropdown d-none d-md-flex me-3">
                <a href="#" class="nav-link px-0" data-bs-toggle="dropdown" tabindex="-1" aria-label="Show notifications">
                  <!-- Download SVG icon from http://tabler-icons.io/i/bell -->
                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 5a2 2 0 1 1 4 0a7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2 -3v-3a7 7 0 0 1 4 -6" /><path d="M9 17v1a3 3 0 0 0 6 0v-1" /></svg>
                  <span class="badge bg-red"></span>
                </a>
                <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-end dropdown-menu-card">
                  <div class="card">
                    <div class="card-header">
                      <h3 class="card-title">Last updates</h3>
                    </div>
                    <div class="list-group list-group-flush list-group-hoverable">
                      <div class="list-group-item">
                        <div class="row align-items-center">
                          <div class="col-auto"><span class="status-dot status-dot-animated bg-red d-block"></span></div>
                          <div class="col text-truncate">
                            <a href="#" class="text-body d-block">Example 1</a>
                            <div class="d-block text-secondary text-truncate mt-n1">
                              Change deprecated html tags to text decoration classes (#29604)
                            </div>
                          </div>
                          <div class="col-auto">
                            <a href="#" class="list-group-item-actions">
                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                            </a>
                          </div>
                        </div>
                      </div>
                      <div class="list-group-item">
                        <div class="row align-items-center">
                          <div class="col-auto"><span class="status-dot d-block"></span></div>
                          <div class="col text-truncate">
                            <a href="#" class="text-body d-block">Example 2</a>
                            <div class="d-block text-secondary text-truncate mt-n1">
                              justify-content:between ⇒ justify-content:space-between (#29734)
                            </div>
                          </div>
                          <div class="col-auto">
                            <a href="#" class="list-group-item-actions show">
                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-yellow" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                            </a>
                          </div>
                        </div>
                      </div>
                      <div class="list-group-item">
                        <div class="row align-items-center">
                          <div class="col-auto"><span class="status-dot d-block"></span></div>
                          <div class="col text-truncate">
                            <a href="#" class="text-body d-block">Example 3</a>
                            <div class="d-block text-secondary text-truncate mt-n1">
                              Update change-version.js (#29736)
                            </div>
                          </div>
                          <div class="col-auto">
                            <a href="#" class="list-group-item-actions">
                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                            </a>
                          </div>
                        </div>
                      </div>
                      <div class="list-group-item">
                        <div class="row align-items-center">
                          <div class="col-auto"><span class="status-dot status-dot-animated bg-green d-block"></span></div>
                          <div class="col text-truncate">
                            <a href="#" class="text-body d-block">Example 4</a>
                            <div class="d-block text-secondary text-truncate mt-n1">
                              Regenerate package-lock.json (#29730)
                            </div>
                          </div>
                          <div class="col-auto">
                            <a href="#" class="list-group-item-actions">
                              <!-- Download SVG icon from http://tabler-icons.io/i/star -->
                              <svg xmlns="http://www.w3.org/2000/svg" class="icon text-muted" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                            </a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="nav-item dropdown">
              <a href="#" class="nav-link d-flex lh-1 text-reset p-0" data-bs-toggle="dropdown" aria-label="Open user menu">
                <span class="avatar avatar-sm" style="background-image: url(./static/avatars/000m.jpg)"></span>
                <div class="d-none d-xl-block ps-2">
                  <div>Paweł Kuna</div>
                  <div class="mt-1 small text-secondary">UI Designer</div>
                </div>
              </a>
              <div class="dropdown-menu dropdown-menu-end dropdown-menu-arrow">
                <a href="#" class="dropdown-item">Status</a>
                <a href="./profile.html" class="dropdown-item">Profile</a>
                <a href="#" class="dropdown-item">Feedback</a>
                <div class="dropdown-divider"></div>
                <a href="./settings.html" class="dropdown-item">Settings</a>
                <a href="./sign-in.html" class="dropdown-item">Logout</a>
              </div>
            </div>
          </div>
        </div>
      </header>
      <header class="navbar-expand-md">
        <div class="collapse navbar-collapse" id="navbar-menu">
          <div class="navbar">
            <div class="container-xl">
              <ul class="navbar-nav">
                <li class="nav-item">
                  <a class="nav-link" href="./" >
                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/home -->
                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l-2 0l9 -9l9 9l-2 0" /><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7" /><path d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6" /></svg>
                    </span>
                    <span class="nav-link-title">
                      Home
                    </span>
                  </a>
                </li>
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/package -->
                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5" /><path d="M12 12l8 -4.5" /><path d="M12 12l0 9" /><path d="M12 12l-8 -4.5" /><path d="M16 5.25l-8 4.5" /></svg>
                    </span>
                    <span class="nav-link-title">
                      Interface
                    </span>
                  </a>
                  <div class="dropdown-menu">
                    <div class="dropdown-menu-columns">
                      <div class="dropdown-menu-column">
                        <a class="dropdown-item" href="./alerts.html">
                          Alerts
                        </a>
                        <a class="dropdown-item" href="./accordion.html">
                          Accordion
                        </a>
                        <div class="dropend">
                          <a class="dropdown-item dropdown-toggle" href="#sidebar-authentication" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                            Authentication
                          </a>
                          <div class="dropdown-menu">
                            <a href="./sign-in.html" class="dropdown-item">
                              Sign in
                            </a>
                            <a href="./sign-in-link.html" class="dropdown-item">
                              Sign in link
                            </a>
                            <a href="./sign-in-illustration.html" class="dropdown-item">
                              Sign in with illustration
                            </a>
                            <a href="./sign-in-cover.html" class="dropdown-item">
                              Sign in with cover
                            </a>
                            <a href="./sign-up.html" class="dropdown-item">
                              Sign up
                            </a>
                            <a href="./forgot-password.html" class="dropdown-item">
                              Forgot password
                            </a>
                            <a href="./terms-of-service.html" class="dropdown-item">
                              Terms of service
                            </a>
                            <a href="./auth-lock.html" class="dropdown-item">
                              Lock screen
                            </a>
                            <a href="./2-step-verification.html" class="dropdown-item">
                              2 step verification
                            </a>
                            <a href="./2-step-verification-code.html" class="dropdown-item">
                              2 step verification code
                            </a>
                          </div>
                        </div>
                        <a class="dropdown-item" href="./blank.html">
                          Blank page
                        </a>
                        <a class="dropdown-item" href="./badges.html">
                          Badges
                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                        </a>
                        <a class="dropdown-item" href="./buttons.html">
                          Buttons
                        </a>
                        <div class="dropend">
                          <a class="dropdown-item dropdown-toggle" href="#sidebar-cards" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                            Cards
                            <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                          </a>
                          <div class="dropdown-menu">
                            <a href="./cards.html" class="dropdown-item">
                              Sample cards
                            </a>
                            <a href="./card-actions.html" class="dropdown-item">
                              Card actions
                              <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                            </a>
                            <a href="./cards-masonry.html" class="dropdown-item">
                              Cards Masonry
                            </a>
                          </div>
                        </div>
                        <a class="dropdown-item" href="./carousel.html">
                          Carousel
                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                        </a>
                        <a class="dropdown-item" href="./charts.html">
                          Charts
                        </a>
                        <a class="dropdown-item" href="./colors.html">
                          Colors
                        </a>
                        <a class="dropdown-item" href="./colorpicker.html">
                          Color picker
                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                        </a>
                        <a class="dropdown-item" href="./datagrid.html">
                          Data grid
                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                        </a>
                        <a class="dropdown-item" href="./datatables.html">
                          Datatables
                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                        </a>
                        <a class="dropdown-item" href="./dropdowns.html">
                          Dropdowns
                        </a>
                        <a class="dropdown-item" href="./dropzone.html">
                          Dropzone
                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                        </a>
                        <div class="dropend">
                          <a class="dropdown-item dropdown-toggle" href="#sidebar-error" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                            Error pages
                          </a>
                          <div class="dropdown-menu">
                            <a href="./error-404.html" class="dropdown-item">
                              404 page
                            </a>
                            <a href="./error-500.html" class="dropdown-item">
                              500 page
                            </a>
                            <a href="./error-maintenance.html" class="dropdown-item">
                              Maintenance page
                            </a>
                          </div>
                        </div>
                        <a class="dropdown-item" href="./flags.html">
                          Flags
                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                        </a>
                        <a class="dropdown-item" href="./inline-player.html">
                          Inline player
                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                        </a>
                      </div>
                      <div class="dropdown-menu-column">
                        <a class="dropdown-item" href="./lightbox.html">
                          Lightbox
                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                        </a>
                        <a class="dropdown-item" href="./lists.html">
                          Lists
                        </a>
                        <a class="dropdown-item" href="./modals.html">
                          Modal
                        </a>
                        <a class="dropdown-item" href="./maps.html">
                          Map
                        </a>
                        <a class="dropdown-item" href="./map-fullsize.html">
                          Map fullsize
                        </a>
                        <a class="dropdown-item" href="./maps-vector.html">
                          Map vector
                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                        </a>
                        <a class="dropdown-item" href="./markdown.html">
                          Markdown
                        </a>
                        <a class="dropdown-item" href="./navigation.html">
                          Navigation
                        </a>
                        <a class="dropdown-item" href="./offcanvas.html">
                          Offcanvas
                        </a>
                        <a class="dropdown-item" href="./pagination.html">
                          <!-- Download SVG icon from http://tabler-icons.io/i/pie-chart -->
                          Pagination
                        </a>
                        <a class="dropdown-item" href="./placeholder.html">
                          Placeholder
                        </a>
                        <a class="dropdown-item" href="./steps.html">
                          Steps
                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                        </a>
                        <a class="dropdown-item" href="./stars-rating.html">
                          Stars rating
                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                        </a>
                        <a class="dropdown-item" href="./tabs.html">
                          Tabs
                        </a>
                        <a class="dropdown-item" href="./tags.html">
                          Tags
                        </a>
                        <a class="dropdown-item" href="./tables.html">
                          Tables
                        </a>
                        <a class="dropdown-item" href="./typography.html">
                          Typography
                        </a>
                        <a class="dropdown-item" href="./tinymce.html">
                          TinyMCE
                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                        </a>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="./form-elements.html" >
                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/checkbox -->
                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M9 11l3 3l8 -8" /><path d="M20 12v6a2 2 0 0 1 -2 2h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h9" /></svg>
                    </span>
                    <span class="nav-link-title">
                      Form elements
                    </span>
                  </a>
                </li>
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#navbar-extra" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/star -->
                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 17.75l-6.172 3.245l1.179 -6.873l-5 -4.867l6.9 -1l3.086 -6.253l3.086 6.253l6.9 1l-5 4.867l1.179 6.873z" /></svg>
                    </span>
                    <span class="nav-link-title">
                      Extra
                    </span>
                  </a>
                  <div class="dropdown-menu">
                    <div class="dropdown-menu-columns">
                      <div class="dropdown-menu-column">
                        <a class="dropdown-item" href="./empty.html">
                          Empty page
                        </a>
                        <a class="dropdown-item" href="./cookie-banner.html">
                          Cookie banner
                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                        </a>
                        <a class="dropdown-item" href="./chat.html">
                          Chat
                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                        </a>
                        <a class="dropdown-item" href="./activity.html">
                          Activity
                        </a>
                        <a class="dropdown-item" href="./gallery.html">
                          Gallery
                        </a>
                        <a class="dropdown-item" href="./invoice.html">
                          Invoice
                        </a>
                        <a class="dropdown-item" href="./search-results.html">
                          Search results
                        </a>
                        <a class="dropdown-item" href="./pricing.html">
                          Pricing cards
                        </a>
                        <a class="dropdown-item" href="./pricing-table.html">
                          Pricing table
                        </a>
                        <a class="dropdown-item" href="./faq.html">
                          FAQ
                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                        </a>
                        <a class="dropdown-item" href="./users.html">
                          Users
                        </a>
                        <a class="dropdown-item" href="./license.html">
                          License
                        </a>
                      </div>
                      <div class="dropdown-menu-column">
                        <a class="dropdown-item" href="./logs.html">
                          Logs
                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                        </a>
                        <a class="dropdown-item" href="./music.html">
                          Music
                        </a>
                        <a class="dropdown-item" href="./photogrid.html">
                          Photogrid
                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                        </a>
                        <a class="dropdown-item" href="./tasks.html">
                          Tasks
                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                        </a>
                        <a class="dropdown-item" href="./uptime.html">
                          Uptime monitor
                        </a>
                        <a class="dropdown-item" href="./widgets.html">
                          Widgets
                        </a>
                        <a class="dropdown-item" href="./wizard.html">
                          Wizard
                        </a>
                        <a class="dropdown-item" href="./settings.html">
                          Settings
                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                        </a>
                        <a class="dropdown-item" href="./trial-ended.html">
                          Trial ended
                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                        </a>
                        <a class="dropdown-item" href="./job-listing.html">
                          Job listing
                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                        </a>
                        <a class="dropdown-item" href="./page-loader.html">
                          Page loader
                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                        </a>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#navbar-layout" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/layout-2 -->
                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M4 13m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M14 4m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v3a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /><path d="M14 15m0 2a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v1a2 2 0 0 1 -2 2h-2a2 2 0 0 1 -2 -2z" /></svg>
                    </span>
                    <span class="nav-link-title">
                      Layout
                    </span>
                  </a>
                  <div class="dropdown-menu">
                    <div class="dropdown-menu-columns">
                      <div class="dropdown-menu-column">
                        <a class="dropdown-item" href="./layout-horizontal.html">
                          Horizontal
                        </a>
                        <a class="dropdown-item" href="./layout-boxed.html">
                          Boxed
                          <span class="badge badge-sm bg-green-lt text-uppercase ms-auto">New</span>
                        </a>
                        <a class="dropdown-item" href="./layout-vertical.html">
                          Vertical
                        </a>
                        <a class="dropdown-item" href="./layout-vertical-transparent.html">
                          Vertical transparent
                        </a>
                        <a class="dropdown-item" href="./layout-vertical-right.html">
                          Right vertical
                        </a>
                        <a class="dropdown-item" href="./layout-condensed.html">
                          Condensed
                        </a>
                        <a class="dropdown-item" href="./layout-combo.html">
                          Combined
                        </a>
                      </div>
                      <div class="dropdown-menu-column">
                        <a class="dropdown-item" href="./layout-navbar-dark.html">
                          Navbar dark
                        </a>
                        <a class="dropdown-item" href="./layout-navbar-sticky.html">
                          Navbar sticky
                        </a>
                        <a class="dropdown-item" href="./layout-navbar-overlap.html">
                          Navbar overlap
                        </a>
                        <a class="dropdown-item" href="./layout-rtl.html">
                          RTL mode
                        </a>
                        <a class="dropdown-item" href="./layout-fluid.html">
                          Fluid
                        </a>
                        <a class="dropdown-item" href="./layout-fluid-vertical.html">
                          Fluid vertical
                        </a>
                      </div>
                    </div>
                  </div>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="./icons.html" >
                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/ghost -->
                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 11a7 7 0 0 1 14 0v7a1.78 1.78 0 0 1 -3.1 1.4a1.65 1.65 0 0 0 -2.6 0a1.65 1.65 0 0 1 -2.6 0a1.65 1.65 0 0 0 -2.6 0a1.78 1.78 0 0 1 -3.1 -1.4v-7" /><path d="M10 10l.01 0" /><path d="M14 10l.01 0" /><path d="M10 14a3.5 3.5 0 0 0 4 0" /></svg>
                    </span>
                    <span class="nav-link-title">
                      4637 icons
                    </span>
                  </a>
                </li>
                <li class="nav-item active">
                  <a class="nav-link" href="./emails.html" >
                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/mail-opened -->
                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 9l9 6l9 -6l-9 -6l-9 6" /><path d="M21 9v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10" /><path d="M3 19l6 -6" /><path d="M15 13l6 6" /></svg>
                    </span>
                    <span class="nav-link-title">
                      Email templates
                    </span>
                  </a>
                </li>
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#navbar-help" data-bs-toggle="dropdown" data-bs-auto-close="outside" role="button" aria-expanded="false" >
                    <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from http://tabler-icons.io/i/lifebuoy -->
                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M12 12m-4 0a4 4 0 1 0 8 0a4 4 0 1 0 -8 0" /><path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0" /><path d="M15 15l3.35 3.35" /><path d="M9 15l-3.35 3.35" /><path d="M5.65 5.65l3.35 3.35" /><path d="M18.35 5.65l-3.35 3.35" /></svg>
                    </span>
                    <span class="nav-link-title">
                      Help
                    </span>
                  </a>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="https://tabler.io/docs" target="_blank" rel="noopener">
                      Documentation
                    </a>
                    <a class="dropdown-item" href="./changelog.html">
                      Changelog
                    </a>
                    <a class="dropdown-item" href="https://github.com/tabler/tabler" target="_blank" rel="noopener">
                      Source code
                    </a>
                    <a class="dropdown-item text-pink" href="https://github.com/sponsors/codecalm" target="_blank" rel="noopener">
                      <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                      <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
                      Sponsor project!
                    </a>
                  </div>
                </li>
              </ul>
              <div class="my-2 my-md-0 flex-grow-1 flex-md-grow-0 order-first order-md-last">
                <form action="./" method="get" autocomplete="off" novalidate>
                  <div class="input-icon">
                    <span class="input-icon-addon">
                      <!-- Download SVG icon from http://tabler-icons.io/i/search -->
                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" /><path d="M21 21l-6 -6" /></svg>
                    </span>
                    <input type="text" value="" class="form-control" placeholder="Search…" aria-label="Search in website">
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </header>
      <div class="page-wrapper">
        <!-- Page header -->
        <div class="page-header d-print-none">
          <div class="container-xl">
            <div class="row g-2 align-items-center">
              <div class="col">
                <h2 class="page-title">
                  Email templates
                </h2>
              </div>
            </div>
          </div>
        </div>
        <!-- Page body -->
        <div class="page-body">
          <div class="container-xl">
            <div class="row row-cards">
              <div class="col-lg-4">
                <div class="card card-md">
                  <div class="card-stamp card-stamp-lg">
                    <div class="card-stamp-icon bg-primary">
                      <!-- Download SVG icon from http://tabler-icons.io/i/mail -->
                      <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z" /><path d="M3 7l9 6l9 -6" /></svg>
                    </div>
                  </div>
                  <div class="card-body">
                    <div class="row align-items-center">
                      <div class="col-10">
                        <h3 class="h1">Tabler Emails</h3>
                        <div class="markdown text-secondary">
                          54 eye-catching, customizable and responsive email templates to improve your email communication. No coding skills needed.
                        </div>
                        <div class="mt-3">
                          <a href="https://tabler.io/buy-emails" class="btn btn-primary" target="_blank">Buy all emails for $29</a>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="col">
                <div class="row row-cards" data-masonry='{"percentPosition": true }'>
                  <div class="col-4">
                    <a
					href="./static/emails/absence.png"
					data-bs-toggle="modal"
					data-bs-target="#email-modal"
					data-bs-title="Email template about absence to employees at work"
					data-bs-description="Allows to define in which days the employee was absent and exactly for what reason. Considering the hours of the week or month. Clearly shows the report of each week on the specific hours of work  the employee with own photo."
					data-bs-image="./static/emails/absence.png"
				>
                      <img src="./static/emails/absence.png" class="img-fluid rounded" alt="Email template about absence to employees at work" width="624" height="788" />
                    </a>
                  </div>
                  <div class="col-4">
                    <a
					href="./static/emails/activities.png"
					data-bs-toggle="modal"
					data-bs-target="#email-modal"
					data-bs-title="Email template related to the activities"
					data-bs-description="Allows to define the time with the kilometers spent on the activity at the given time. It shows the exact distance traveled and the number of people who "like it". In addition, the template allows you to add photos and shows the weather during activity."
					data-bs-image="./static/emails/activities.png"
				>
                      <img src="./static/emails/activities.png" class="img-fluid rounded" alt="Email template related to the activities" width="624" height="1019" />
                    </a>
                  </div>
                  <div class="col-4">
                    <a
					href="./static/emails/blog-post.png"
					data-bs-toggle="modal"
					data-bs-target="#email-modal"
					data-bs-title="Email template about posted blog posts"
					data-bs-description="Allows to create an e-mail about new posts that just appeared on the blog. Shows a part of  content along with a photo and title. Refers to the entire text or other posts posted on the blog."
					data-bs-image="./static/emails/blog-post.png"
				>
                      <img src="./static/emails/blog-post.png" class="img-fluid rounded" alt="Email template about posted blog posts" width="624" height="1107" />
                    </a>
                  </div>
                  <div class="col-4">
                    <a
					href="./static/emails/collection.png"
					data-bs-toggle="modal"
					data-bs-target="#email-modal"
					data-bs-title="Email template about the proposition of the collection"
					data-bs-description="Shows preferred themed blogs to follow. The template shows the five best blogs along with their short description with a photo, link to the subscription and the author of the text. Also shows another collections for scroll contents."
					data-bs-image="./static/emails/collection.png"
				>
                      <img src="./static/emails/collection.png" class="img-fluid rounded" alt="Email template about the proposition of the collection" width="624" height="1325" />
                    </a>
                  </div>
                  <div class="col-4">
                    <a
					href="./static/emails/conference.png"
					data-bs-toggle="modal"
					data-bs-target="#email-modal"
					data-bs-title="Email template with an invitation to a conference"
					data-bs-description="Allows to include a short description of the conference along with the topics discussed during the event. Describes who will run the conferences and for what reason. Also shows the time of start the conference and direct registration button on the website."
					data-bs-image="./static/emails/conference.png"
				>
                      <img src="./static/emails/conference.png" class="img-fluid rounded" alt="Email template with an invitation to a conference" width="624" height="1702" />
                    </a>
                  </div>
                  <div class="col-4">
                    <a
					href="./static/emails/confirmation.png"
					data-bs-toggle="modal"
					data-bs-target="#email-modal"
					data-bs-title="Email template with the booking confirmation"
					data-bs-description="Allows to create an email with all  important information about the reservation. Shows important details about sales. Confirms the reservation and shows the amount paid along with the date of purchase and definite place."
					data-bs-image="./static/emails/confirmation.png"
				>
                      <img src="./static/emails/confirmation.png" class="img-fluid rounded" alt="Email template with the booking confirmation" width="624" height="2095" />
                    </a>
                  </div>
                  <div class="col-4">
                    <a
					href="./static/emails/download.png"
					data-bs-toggle="modal"
					data-bs-target="#email-modal"
					data-bs-title="Email template with message about the completed download"
					data-bs-description="Shows which link is ready to download items. Confirms the number of attachments downloaded along with its size.Shows how many times you can click on a definite file and the time of expiry."
					data-bs-image="./static/emails/download.png"
				>
                      <img src="./static/emails/download.png" class="img-fluid rounded" alt="Email template with message about the completed download" width="624" height="587" />
                    </a>
                  </div>
                  <div class="col-4">
                    <a
					href="./static/emails/error.png"
					data-bs-toggle="modal"
					data-bs-target="#email-modal"
					data-bs-title="Email template with informaton about the error"
					data-bs-description="Allows to reduce the number of errors in the software. Describes the problem that related with the HTML code. Automatically sends to debug your content. Identifies the cause of the failure and allows to the remove. Shows the date of error."
					data-bs-image="./static/emails/error.png"
				>
                      <img src="./static/emails/error.png" class="img-fluid rounded" alt="Email template with informaton about the error" width="624" height="760" />
                    </a>
                  </div>
                  <div class="col-4">
                    <a
					href="./static/emails/event-invitation.png"
					data-bs-toggle="modal"
					data-bs-target="#email-modal"
					data-bs-title="Email template with an invitation to a event"
					data-bs-description="Allows to create an email showing a new user group. Informs about the just formed group with short description and support to join in. It shows people who have already joined and automatically sends you to registration."
					data-bs-image="./static/emails/event-invitation.png"
				>
                      <img src="./static/emails/event-invitation.png" class="img-fluid rounded" alt="Email template with an invitation to a event" width="624" height="871" />
                    </a>
                  </div>
                  <div class="col-4">
                    <a
					href="./static/emails/featured-photo.png"
					data-bs-toggle="modal"
					data-bs-target="#email-modal"
					data-bs-title="Email template with the featured photo"
					data-bs-description="Allows to show the most popular photograph with the author and the date of publication from a given month. Shows the number of people who liked the photo. In addition shows following pictures, which may also be liked."
					data-bs-image="./static/emails/featured-photo.png"
				>
                      <img src="./static/emails/featured-photo.png" class="img-fluid rounded" alt="Email template with the featured photo" width="624" height="1196" />
                    </a>
                  </div>
                  <div class="col-4">
                    <a
					href="./static/emails/features-2.png"
					data-bs-toggle="modal"
					data-bs-target="#email-modal"
					data-bs-title="Email template with new features"
					data-bs-description="Allows  to display the latest added features with a description and picture. Shortly describes each of new features and presents how to use it. Shows only the selected new functions, and sends to the rest of them by the button."
					data-bs-image="./static/emails/features-2.png"
				>
                      <img src="./static/emails/features-2.png" class="img-fluid rounded" alt="Email template with new features" width="624" height="1134" />
                    </a>
                  </div>
                  <div class="col-4">
                    <a
					href="./static/emails/features.png"
					data-bs-toggle="modal"
					data-bs-target="#email-modal"
					data-bs-title="Email template for the features"
					data-bs-description="Allows to popularize a new software feature. It presents in detail what is involved with the HTML code. Shows simple and quick modifications. Offers a trial version, just press the button. Each description is with a picture."
					data-bs-image="./static/emails/features.png"
				>
                      <img src="./static/emails/features.png" class="img-fluid rounded" alt="Email template for the features" width="624" height="1872" />
                    </a>
                  </div>
                  <div class="col-4">
                    <a
					href="./static/emails/friend-request.png"
					data-bs-toggle="modal"
					data-bs-target="#email-modal"
					data-bs-title="Email template for a friend request"
					data-bs-description="Allows to send a separate invitation to friends. Email show the photo of the person who sends the invitation along with the name. You can accept or refuse the invitation any time. Below it is information from which platform the invitation came from."
					data-bs-image="./static/emails/friend-request.png"
				>
                      <img src="./static/emails/friend-request.png" class="img-fluid rounded" alt="Email template for a friend request" width="624" height="628" />
                    </a>
                  </div>
                  <div class="col-4">
                    <a
					href="./static/emails/gdpr.png"
					data-bs-toggle="modal"
					data-bs-target="#email-modal"
					data-bs-title="Email template about GDPR"
					data-bs-description="Shows an email template which is adapted to changes in user data. It protects individual, personal data, privacy the free flow of content. Include content about the elementary legal conditions of users."
					data-bs-image="./static/emails/gdpr.png"
				>
                      <img src="./static/emails/gdpr.png" class="img-fluid rounded" alt="Email template about GDPR" width="624" height="1346" />
                    </a>
                  </div>
                  <div class="col-4">
                    <a
					href="./static/emails/help.png"
					data-bs-toggle="modal"
					data-bs-target="#email-modal"
					data-bs-title="Email template with help to users"
					data-bs-description="Allows specify the occurs problem with a quick solution. Presents the most popular questions related to the theme of the problem and answers. Additionally, automatically moves to live chat  to find a solution."
					data-bs-image="./static/emails/help.png"
				>
                      <img src="./static/emails/help.png" class="img-fluid rounded" alt="Email template with help to users" width="624" height="1075" />
                    </a>
                  </div>
                  <div class="col-4">
                    <a
					href="./static/emails/invitation.png"
					data-bs-toggle="modal"
					data-bs-target="#email-modal"
					data-bs-title="Email template with an invitation to collaborate"
					data-bs-description="Shows whos and for what purpose invites to cooperate.Viev the entire invitation by clicking on the button or visiting the profile of the person who invites you to learn a little more about them. In addition accept or reject the invitation any time."
					data-bs-image="./static/emails/invitation.png"
				>
                      <img src="./static/emails/invitation.png" class="img-fluid rounded" alt="Email template with an invitation to collaborate" width="624" height="606" />
                    </a>
                  </div>
                  <div class="col-4">
                    <a
					href="./static/emails/invoice.png"
					data-bs-toggle="modal"
					data-bs-target="#email-modal"
					data-bs-title="Email template with an invoice"
					data-bs-description="Shows the exact details of the payer with the purchased items on the pictures. Shows the amount of purchased goods including tax and the final amount. Shows the date of purchase and a direct button to print the invoice or contact with the company."
					data-bs-image="./static/emails/invoice.png"
				>
                      <img src="./static/emails/invoice.png" class="img-fluid rounded" alt="Email template with an invoice" width="624" height="1472" />
                    </a>
                  </div>
                  <div class="col-4">
                    <a
					href="./static/emails/last-conversation.png"
					data-bs-toggle="modal"
					data-bs-target="#email-modal"
					data-bs-title="Email template with the last conversation"
					data-bs-description="Allows to view the last conversation with the selected person. It presents a fragment of the conversation. To read all conversation click on the button 'read more'. Instead of names of users, shows a photo of them."
					data-bs-image="./static/emails/last-conversation.png"
				>
                      <img src="./static/emails/last-conversation.png" class="img-fluid rounded" alt="Email template with the last conversation" width="624" height="647" />
                    </a>
                  </div>
                  <div class="col-4">
                    <a
					href="./static/emails/license.png"
					data-bs-toggle="modal"
					data-bs-target="#email-modal"
					data-bs-title="Email template related with the license"
					data-bs-description="Allows to create an email related to the acquired license by the user. There is the name of the purchased service, the registration code to  activated and the details of the license, always with date expiration at the end."
					data-bs-image="./static/emails/license.png"
				>
                      <img src="./static/emails/license.png" class="img-fluid rounded" alt="Email template related with the license" width="624" height="777" />
                    </a>
                  </div>
                  <div class="col-4">
                    <a
					href="./static/emails/message.png"
					data-bs-toggle="modal"
					data-bs-target="#email-modal"
					data-bs-title="Email template with a new message"
					data-bs-description="Allows for quick response, informing that the user has responded to our message. Shows from who the message comes from and shows the written content. Below are the buttons for direct response or for managing reservations"
					data-bs-image="./static/emails/message.png"
				>
                      <img src="./static/emails/message.png" class="img-fluid rounded" alt="Email template with a new message" width="624" height="582" />
                    </a>
                  </div>
                  <div class="col-4">
                    <a
					href="./static/emails/missing-order.png"
					data-bs-toggle="modal"
					data-bs-target="#email-modal"
					data-bs-title="Email template with the missing order"
					data-bs-description="Shows the shopping list in the basket. Sends products along with photos that were in the basket and expect realization. Offers an additional discount when transaction will complete. Also sends back by the button to continue the order."
					data-bs-image="./static/emails/missing-order.png"
				>
                      <img src="./static/emails/missing-order.png" class="img-fluid rounded" alt="Email template with the missing order" width="624" height="804" />
                    </a>
                  </div>
                  <div class="col-4">
                    <a
					href="./static/emails/newsletter.png"
					data-bs-toggle="modal"
					data-bs-target="#email-modal"
					data-bs-title="Email template showing the newsletter"
					data-bs-description="Shows the latest information, messages in blog posts on thematic blogs or social networks. It presents articles that may interested the user. Clicking by on 'read more', the button moves to the whole text to the read."
					data-bs-image="./static/emails/newsletter.png"
				>
                      <img src="./static/emails/newsletter.png" class="img-fluid rounded" alt="Email template showing the newsletter" width="624" height="2099" />
                    </a>
                  </div>
                  <div class="col-4">
                    <a
					href="./static/emails/offer.png"
					data-bs-toggle="modal"
					data-bs-target="#email-modal"
					data-bs-title="Email template with promocional offer"
					data-bs-description="Allows to create an email witht the discount on product. It presents an interesting offer for users, which saves money. There is a description of what the offer is about, along with the expiry date of the offer. Sends by a button to get a discount."
					data-bs-image="./static/emails/offer.png"
				>
                      <img src="./static/emails/offer.png" class="img-fluid rounded" alt="Email template with promocional offer" width="624" height="530" />
                    </a>
                  </div>
                  <div class="col-4">
                    <a
					href="./static/emails/order.png"
					data-bs-toggle="modal"
					data-bs-target="#email-modal"
					data-bs-title="Email template with order summary"
					data-bs-description="Shows the order with the purchased products. Displays the order number along with the necessary information and the total cost and date of purchase. Underneath shows the proposed items and 'back to shop' button to buy something else."
					data-bs-image="./static/emails/order.png"
				>
                      <img src="./static/emails/order.png" class="img-fluid rounded" alt="Email template with order summary" width="624" height="1762" />
                    </a>
                  </div>
                  <div class="col-4">
                    <a
					href="./static/emails/password.png"
					data-bs-toggle="modal"
					data-bs-target="#email-modal"
					data-bs-title="Email template with reset password for the account"
					data-bs-description="Allows to send a generated message with instructions to change the password when you forget it. Using the button, we move to the page to give a new password. Below there is a URL adress where you can find more information about changing the password."
					data-bs-image="./static/emails/password.png"
				>
                      <img src="./static/emails/password.png" class="img-fluid rounded" alt="Email template with reset password for the account" width="624" height="558" />
                    </a>
                  </div>
                  <div class="col-4">
                    <a
					href="./static/emails/payment.png"
					data-bs-toggle="modal"
					data-bs-target="#email-modal"
					data-bs-title="Email template with payment details"
					data-bs-description="Shows an email template with the exact cost of the transaction along with information about the date, method of payment and invoice confirmation. An additional option is add a loan function from the  minimum amount."
					data-bs-image="./static/emails/payment.png"
				>
                      <img src="./static/emails/payment.png" class="img-fluid rounded" alt="Email template with payment details" width="624" height="826" />
                    </a>
                  </div>
                  <div class="col-4">
                    <a
					href="./static/emails/popular-posts.png"
					data-bs-toggle="modal"
					data-bs-target="#email-modal"
					data-bs-title="Email template with popular post"
					data-bs-description="Shows in the email the most viewed posts by users with the beginning of the text from the blog with the picture. Below are the next popular posts with the referring button to read more articles on thematic blogs."
					data-bs-image="./static/emails/popular-posts.png"
				>
                      <img src="./static/emails/popular-posts.png" class="img-fluid rounded" alt="Email template with popular post" width="624" height="1166" />
                    </a>
                  </div>
                  <div class="col-4">
                    <a
					href="./static/emails/pricing.png"
					data-bs-toggle="modal"
					data-bs-target="#email-modal"
					data-bs-title="Email template with the given pricing"
					data-bs-description="Shows price offers along with attractive discounts between different packages. Each package contains various options and a different price. Each package satisfies different user needs. Through the "update" button moves to purchase the offer."
					data-bs-image="./static/emails/pricing.png"
				>
                      <img src="./static/emails/pricing.png" class="img-fluid rounded" alt="Email template with the given pricing" width="624" height="639" />
                    </a>
                  </div>
                  <div class="col-4">
                    <a
					href="./static/emails/product-available.png"
					data-bs-toggle="modal"
					data-bs-target="#email-modal"
					data-bs-title="Email template with an available product"
					data-bs-description="Allows to send an offer that was not currently available. Shows a specific product with photo and price. Use the button to refer to the website to purchase the product. Below are products that may also interest the recipient."
					data-bs-image="./static/emails/product-available.png"
				>
                      <img src="./static/emails/product-available.png" class="img-fluid rounded" alt="Email template with an available product" width="624" height="894" />
                    </a>
                  </div>
                  <div class="col-4">
                    <a
					href="./static/emails/progress.png"
					data-bs-toggle="modal"
					data-bs-target="#email-modal"
					data-bs-title="Email template with progress"
					data-bs-description="Shows the overall progress of the user at a given time related to the activity. Thanks to the graph, clearly describes the progress. Defines the day on which the activity took place along with the necessary information about it."
					data-bs-image="./static/emails/progress.png"
				>
                      <img src="./static/emails/progress.png" class="img-fluid rounded" alt="Email template with progress" width="624" height="651" />
                    </a>
                  </div>
                  <div class="col-4">
                    <a
					href="./static/emails/projects.png"
					data-bs-toggle="modal"
					data-bs-target="#email-modal"
					data-bs-title="Email template with a project overview"
					data-bs-description="Allows to show employees' projects. Shows with the graph the percentage of the completed project along with a description of what it concerns and the person who coordinates the project. Using the button, it refers to managing all projects"
					data-bs-image="./static/emails/projects.png"
				>
                      <img src="./static/emails/projects.png" class="img-fluid rounded" alt="Email template with a project overview" width="624" height="782" />
                    </a>
                  </div>
                  <div class="col-4">
                    <a
					href="./static/emails/promo-code.png"
					data-bs-toggle="modal"
					data-bs-target="#email-modal"
					data-bs-title="Email template associated with promo code."
					data-bs-description="Shows specially generated code for users to take uses of the promotion. Specifies the type and amount of the discount and its expiration date. It sends directly to the store to buy a product at a lower price than at the beginning."
					data-bs-image="./static/emails/promo-code.png"
				>
                      <img src="./static/emails/promo-code.png" class="img-fluid rounded" alt="Email template associated with promo code." width="624" height="614" />
                    </a>
                  </div>
                  <div class="col-4">
                    <a
					href="./static/emails/register.png"
					data-bs-toggle="modal"
					data-bs-target="#email-modal"
					data-bs-title="Email template about the registration of a new user"
					data-bs-description="Allows to confirm your data and complete registration of a new user in the system. It presents what the registration is about, along with the "confirm your email address" button. At the end is display thanks for registration"
					data-bs-image="./static/emails/register.png"
				>
                      <img src="./static/emails/register.png" class="img-fluid rounded" alt="Email template about the registration of a new user" width="624" height="632" />
                    </a>
                  </div>
                  <div class="col-4">
                    <a
					href="./static/emails/reminder.png"
					data-bs-toggle="modal"
					data-bs-target="#email-modal"
					data-bs-title="Email template with an event reminder"
					data-bs-description="Allows to create an email referring to the private calendar. Sends notification of upcoming events with the date and place of the meeting. In addition, below are details of what the meeting is about, along with button to confirm your arrival."
					data-bs-image="./static/emails/reminder.png"
				>
                      <img src="./static/emails/reminder.png" class="img-fluid rounded" alt="Email template with an event reminder" width="624" height="518" />
                    </a>
                  </div>
                  <div class="col-4">
                    <a
					href="./static/emails/repo-stats.png"
					data-bs-toggle="modal"
					data-bs-target="#email-modal"
					data-bs-title="Email template about REPO review"
					data-bs-description="Shows financial transactions that regulate the liquidity of the banking sector. Presents a statistics graph and also open and closed problems together with new. Through photos  shows current management intermediaries"
					data-bs-image="./static/emails/repo-stats.png"
				>
                      <img src="./static/emails/repo-stats.png" class="img-fluid rounded" alt="Email template about REPO review" width="624" height="975" />
                    </a>
                  </div>
                  <div class="col-4">
                    <a
					href="./static/emails/sale.png"
					data-bs-toggle="modal"
					data-bs-target="#email-modal"
					data-bs-title="Email template for sales"
					data-bs-description="Shows ready text with photo in which it informs about the promotion. Offers a specific discount percentage along with a time limit. In addition, it refers directly to the purchase of the offer. Indicates which time the promotion is active."
					data-bs-image="./static/emails/sale.png"
				>
                      <img src="./static/emails/sale.png" class="img-fluid rounded" alt="Email template for sales" width="624" height="762" />
                    </a>
                  </div>
                  <div class="col-4">
                    <a
					href="./static/emails/schedule.png"
					data-bs-toggle="modal"
					data-bs-target="#email-modal"
					data-bs-title="Email template connected with the schedule"
					data-bs-description="Allows to organize time at work with accurate employee data. Shows the status of the employee along with the time worked on a particular day. Employees are represented by a photo with the profession they perform."
					data-bs-image="./static/emails/schedule.png"
				>
                      <img src="./static/emails/schedule.png" class="img-fluid rounded" alt="Email template connected with the schedule" width="624" height="609" />
                    </a>
                  </div>
                  <div class="col-4">
                    <a
					href="./static/emails/shipped.png"
					data-bs-toggle="modal"
					data-bs-target="#email-modal"
					data-bs-title="Email template informing about the shipment"
					data-bs-description="Allows to create an email which all the inportant details of the purchase. Email informs you that the product has been sent. Contains the tracking number of the shipment and the name of the company through which the product was sent."
					data-bs-image="./static/emails/shipped.png"
				>
                      <img src="./static/emails/shipped.png" class="img-fluid rounded" alt="Email template informing about the shipment" width="624" height="453" />
                    </a>
                  </div>
                  <div class="col-4">
                    <a
					href="./static/emails/stats-2.png"
					data-bs-toggle="modal"
					data-bs-target="#email-modal"
					data-bs-title="Email template about statistics"
					data-bs-description="Shows company statistics on graph from a specific time with a specific system update that was entered. Shows the percentage of people who benefited from it, who were satisfied and those who rejected the update. Refers to full report."
					data-bs-image="./static/emails/stats-2.png"
				>
                      <img src="./static/emails/stats-2.png" class="img-fluid rounded" alt="Email template about statistics" width="624" height="720" />
                    </a>
                  </div>
                  <div class="col-4">
                    <a
					href="./static/emails/stats.png"
					data-bs-toggle="modal"
					data-bs-target="#email-modal"
					data-bs-title="Email template about statistics"
					data-bs-description="Allows on the graph to present statistics on website visits. Shows how many users have used the site at any given time. It divides users into those who have used the site and those who do not. It refers to the entire report by the button."
					data-bs-image="./static/emails/stats.png"
				>
                      <img src="./static/emails/stats.png" class="img-fluid rounded" alt="Email template about statistics" width="624" height="917" />
                    </a>
                  </div>
                  <div class="col-4">
                    <a
					href="./static/emails/subscribe.png"
					data-bs-toggle="modal"
					data-bs-target="#email-modal"
					data-bs-title="Email template about subscriptions"
					data-bs-description="Allows to send emails about proposed subscriptions. Every suggestion presents a short description of the application with logo. Next to each is a button that refers to the automatic subscription of the application. It also has a button to see more."
					data-bs-image="./static/emails/subscribe.png"
				>
                      <img src="./static/emails/subscribe.png" class="img-fluid rounded" alt="Email template about subscriptions" width="624" height="832" />
                    </a>
                  </div>
                  <div class="col-4">
                    <a
					href="./static/emails/subscription.png"
					data-bs-toggle="modal"
					data-bs-target="#email-modal"
					data-bs-title="Email template about confirmation of subscription"
					data-bs-description="Allows you to send an email about the request to accept the subscription. The message informs that thanks to the subscription the user will be up to date with new products. Refer by the button to subscribe."
					data-bs-image="./static/emails/subscription.png"
				>
                      <img src="./static/emails/subscription.png" class="img-fluid rounded" alt="Email template about confirmation of subscription" width="624" height="551" />
                    </a>
                  </div>
                  <div class="col-4">
                    <a
					href="./static/emails/survey.png"
					data-bs-toggle="modal"
					data-bs-target="#email-modal"
					data-bs-title="Email template about survey"
					data-bs-description="Allows users to help improve the content. Sends a thank you for participating in the conference and asks for an opinion about it and an indication of whether they would recommend the content to friends. The scale is from 1 to 10."
					data-bs-image="./static/emails/survey.png"
				>
                      <img src="./static/emails/survey.png" class="img-fluid rounded" alt="Email template about survey" width="624" height="774" />
                    </a>
                  </div>
                  <div class="col-4">
                    <a
					href="./static/emails/todo.png"
					data-bs-toggle="modal"
					data-bs-target="#email-modal"
					data-bs-title="Email template with a list of things to do"
					data-bs-description="Shows the monthly result of the to-do list. It contains the given activities showing which of them are you made with a specific date. Each action has a picture about the activity. It sends you with a button to set up, manage your to-do list"
					data-bs-image="./static/emails/todo.png"
				>
                      <img src="./static/emails/todo.png" class="img-fluid rounded" alt="Email template with a list of things to do" width="624" height="509" />
                    </a>
                  </div>
                  <div class="col-4">
                    <a
					href="./static/emails/top-comments.png"
					data-bs-toggle="modal"
					data-bs-target="#email-modal"
					data-bs-title="Email template with the top comments"
					data-bs-description="Shows the most relevant and best comments that relate to the company, product, brand. This template show comments along with the author of the text. The content is clear and transparent. In addition, there is a button below for see more comments."
					data-bs-image="./static/emails/top-comments.png"
				>
                      <img src="./static/emails/top-comments.png" class="img-fluid rounded" alt="Email template with the top comments" width="624" height="664" />
                    </a>
                  </div>
                  <div class="col-4">
                    <a
					href="./static/emails/ui-colors.png"
					data-bs-toggle="modal"
					data-bs-target="#email-modal"
					data-bs-title="Email template with available colors"
					data-bs-description="Shows the available color palette in the table with codes. The colors are grouped into basic colors, social colors and variations of colors. A variety of colors allows everyone to choose something for themselves."
					data-bs-image="./static/emails/ui-colors.png"
				>
                      <img src="./static/emails/ui-colors.png" class="img-fluid rounded" alt="Email template with available colors" width="624" height="977" />
                    </a>
                  </div>
                  <div class="col-4">
                    <a
					href="./static/emails/ui-grid.png"
					data-bs-toggle="modal"
					data-bs-target="#email-modal"
					data-bs-title="Email template with a grid system"
					data-bs-description="Allows to create your own system, in which the grid is adapted. The width and length of the template depends on your preferences. Types of columns have been described with their number. The grid width adapts to the device on which it is run."
					data-bs-image="./static/emails/ui-grid.png"
				>
                      <img src="./static/emails/ui-grid.png" class="img-fluid rounded" alt="Email template with a grid system" width="624" height="1516" />
                    </a>
                  </div>
                  <div class="col-4">
                    <a
					href="./static/emails/ui-typography.png"
					data-bs-toggle="modal"
					data-bs-target="#email-modal"
					data-bs-title="Email template about typography"
					data-bs-description="Shows how the structures engaging the language in the tabler are shaped. Refers to the all typography. The template facilitates reading and writing in the system, not limited to one space. Additionally, shows the dimension of visual communication."
					data-bs-image="./static/emails/ui-typography.png"
				>
                      <img src="./static/emails/ui-typography.png" class="img-fluid rounded" alt="Email template about typography" width="624" height="1056" />
                    </a>
                  </div>
                  <div class="col-4">
                    <a
					href="./static/emails/valentines-1.png"
					data-bs-toggle="modal"
					data-bs-target="#email-modal"
					data-bs-title="Email template for Valentine's Day 1"
					data-bs-description="Template designed especially for Valentine's Day with donate a free year on the tabler. You can give it to every person. This is the best way to thank you that you are with us.The button automatically allows you to send a gift."
					data-bs-image="./static/emails/valentines-1.png"
				>
                      <img src="./static/emails/valentines-1.png" class="img-fluid rounded" alt="Email template for Valentine's Day 1" width="624" height="816" />
                    </a>
                  </div>
                  <div class="col-4">
                    <a
					href="./static/emails/valentines-2.png"
					data-bs-toggle="modal"
					data-bs-target="#email-modal"
					data-bs-title="Email template for Valentine's Day 2"
					data-bs-description="Template designed especially for Valentine's Day that saves 50% of the price. Automatically calculates the discount and shows the price after the discount. This is the best way to thank you that you are with us. The button sends you to buy a product."
					data-bs-image="./static/emails/valentines-2.png"
				>
                      <img src="./static/emails/valentines-2.png" class="img-fluid rounded" alt="Email template for Valentine's Day 2" width="624" height="1166" />
                    </a>
                  </div>
                  <div class="col-4">
                    <a
					href="./static/emails/valentines-3.png"
					data-bs-toggle="modal"
					data-bs-target="#email-modal"
					data-bs-title="Email template for Valentine's Day 3"
					data-bs-description="Template designed especially for Valentine's Day with attractions lower by half price. Shows suggestions that can make Valentine's Day happy. This is the best way to thank you that you are with us.The button refers to buying or seeing more proposals."
					data-bs-image="./static/emails/valentines-3.png"
				>
                      <img src="./static/emails/valentines-3.png" class="img-fluid rounded" alt="Email template for Valentine's Day 3" width="624" height="1693" />
                    </a>
                  </div>
                  <div class="col-4">
                    <a
					href="./static/emails/valentines-4.png"
					data-bs-toggle="modal"
					data-bs-target="#email-modal"
					data-bs-title="Email template for Valentine's Day 4"
					data-bs-description="Template designed especially for Valentine's Day with a voucher to be used in the tabler, along with the generated QR code for the given amount. This is the best way to thank you that you are with us."
					data-bs-image="./static/emails/valentines-4.png"
				>
                      <img src="./static/emails/valentines-4.png" class="img-fluid rounded" alt="Email template for Valentine's Day 4" width="624" height="808" />
                    </a>
                  </div>
                  <div class="col-4">
                    <a
					href="./static/emails/visitors-map.png"
					data-bs-toggle="modal"
					data-bs-target="#email-modal"
					data-bs-title="Email template related with the vistitor map"
					data-bs-description="Shows using graphics from which territory visitors arrived during one week. Shows the number of page views from a given region with precise statistics. Additionally, shows how many people are using the program and how many people closed account."
					data-bs-image="./static/emails/visitors-map.png"
				>
                      <img src="./static/emails/visitors-map.png" class="img-fluid rounded" alt="Email template related with the vistitor map" width="624" height="1472" />
                    </a>
                  </div>
                  <div class="col-4">
                    <a
					href="./static/emails/wishlist.png"
					data-bs-toggle="modal"
					data-bs-target="#email-modal"
					data-bs-title="Email template with a wishlist update"
					data-bs-description="Allows display information about products that were not available before. It shows that the product that was in the basket is already completed in the magazine. Shows graphics with product and the amount. In addition sends a wish to the wishlist."
					data-bs-image="./static/emails/wishlist.png"
				>
                      <img src="./static/emails/wishlist.png" class="img-fluid rounded" alt="Email template with a wishlist update" width="624" height="1109" />
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <div class="modal fade" id="email-modal" aria-hidden="true" aria-labelledby="email-modal-label" tabindex="-1">
              <div class="modal-dialog modal-xl modal-dialog-centered">
                <div class="modal-content">
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                  <div class="modal-body p-0">
                    <div class="row g-0">
                      <div class="col-6">
                        <div class="p-6 bg-body rounded-start">
                          <img src="" class="img-fluid rounded-left" data-email-image />
                        </div>
                      </div>
                      <div class="col-6">
                        <div class="p-7">
                          <div class="markdown">
                            <h3 data-email-title></h3>
                            <p data-email-description></p>
                          </div>
                          <div class="mt-6">
                            <a href="https://tabler.io/buy-emails" class="btn btn-primary w-100" target="_blank">Buy 54 emails for $29</a>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <footer class="footer footer-transparent d-print-none">
          <div class="container-xl">
            <div class="row text-center align-items-center flex-row-reverse">
              <div class="col-lg-auto ms-lg-auto">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item"><a href="https://tabler.io/docs" target="_blank" class="link-secondary" rel="noopener">Documentation</a></li>
                  <li class="list-inline-item"><a href="./license.html" class="link-secondary">License</a></li>
                  <li class="list-inline-item"><a href="https://github.com/tabler/tabler" target="_blank" class="link-secondary" rel="noopener">Source code</a></li>
                  <li class="list-inline-item">
                    <a href="https://github.com/sponsors/codecalm" target="_blank" class="link-secondary" rel="noopener">
                      <!-- Download SVG icon from http://tabler-icons.io/i/heart -->
                      <svg xmlns="http://www.w3.org/2000/svg" class="icon text-pink icon-filled icon-inline" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572" /></svg>
                      Sponsor
                    </a>
                  </li>
                </ul>
              </div>
              <div class="col-12 col-lg-auto mt-3 mt-lg-0">
                <ul class="list-inline list-inline-dots mb-0">
                  <li class="list-inline-item">
                    Copyright &copy; 2023
                    <a href="." class="link-secondary">Tabler</a>.
                    All rights reserved.
                  </li>
                  <li class="list-inline-item">
                    <a href="./changelog.html" class="link-secondary" rel="noopener">
                      v1.0.0-beta20
                    </a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </footer>
      </div>
    </div>
    <!-- Libs JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js" defer></script>
    <script src="./dist/libs/fslightbox/index.js?1692870487" defer></script>
    <!-- Tabler Core -->
    <script src="./dist/js/tabler.min.js?1692870487" defer></script>
    <script src="./dist/js/demo.min.js?1692870487" defer></script>
    <script>
      const emailModal = document.getElementById("email-modal")
      if (emailModal) {
      	emailModal.addEventListener("show.bs.modal", function (e) {
      		const button = e.relatedTarget
      		const image = button.getAttribute("data-bs-image"),
      			title = button.getAttribute("data-bs-title"),
      			description = button.getAttribute("data-bs-description")
      		emailModal.querySelector("[data-email-title]").textContent = title
      		emailModal.querySelector("[data-email-description]").textContent = description
      		emailModal.querySelector("[data-email-image]").src = image
      		modalTitle.textContent = `New message to ${recipient}`
      		modalBodyInput.value = recipient
      	})
      }
    </script>
  </body>
</html>