npm - tp-react-elements - Versions diffs - 1.0.0 - Mend

tp-react-elements 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (972) hide show

package/dist/assets/icons/flaticon_hvc.html ADDED Viewed

@@ -0,0 +1,1085 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Flaticon Webfont</title>
+    <link rel="stylesheet" type="text/css" href="flaticon_hvc.css"/>
+    <meta charset="UTF-8">
+    <style>
+        html, body, div, span, applet, object, iframe,
+        h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+        a, abbr, acronym, address, big, cite, code,
+        del, dfn, em, img, ins, kbd, q, s, samp,
+        small, strike, strong, sub, sup, tt, var,
+        b, u, i, center,
+        dl, dt, dd, ol, ul, li,
+        fieldset, form, label, legend,
+        table, caption, tbody, tfoot, thead, tr, th, td,
+        article, aside, canvas, details, embed,
+        figure, figcaption, footer, header, hgroup,
+        menu, nav, output, ruby, section, summary,
+        time, mark, audio, video {
+            margin: 0;
+            padding: 0;
+            border: 0;
+            font-size: 100%;
+            font: inherit;
+            vertical-align: baseline;
+        }
+        /* HTML5 display-role reset for older browsers */
+        article, aside, details, figcaption, figure,
+        footer, header, hgroup, menu, nav, section {
+            display: block;
+        }
+        body {
+            line-height: 1;
+        }
+        ol, ul {
+            list-style: none;
+        }
+        blockquote, q {
+            quotes: none;
+        }
+        blockquote:before, blockquote:after,
+        q:before, q:after {
+            content: '';
+            content: none;
+        }
+        table {
+            border-collapse: collapse;
+            border-spacing: 0;
+        }
+        body {
+            font-family: Inter, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+            font-size: 15px;
+            line-height: 1.6;
+            color: #777777;
+        }
+        a {
+            color: #52D999;
+            font-weight: bold;
+            text-decoration: none;
+        }
+        * {
+            -moz-box-sizing: border-box;
+            -webkit-box-sizing: border-box;
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+        [class^="flaticon-"]:before, [class*=" flaticon-"]:before, [class^="flaticon-"]:after, [class*=" flaticon-"]:after {
+            font-family: Flaticon;
+            font-size: 32px;
+            line-height: 1.25;
+            font-style: normal;
+            margin-left: 20px;
+            color: #424242;
+        }
+        .wrapper {
+            max-width: 600px;
+            margin: auto;
+            padding: 0 1em;
+        }
+        .title {
+            margin-bottom: 24px;
+            text-transform: uppercase;
+            font-weight: bold;
+        }
+        header {
+            text-align: center;
+            padding: 24px;
+        }
+        header .logo {
+            height: auto;
+            border: none;
+            display: inline-block;
+        }
+        header strong {
+            font-size: 24px;
+            line-height: 1.25;
+            font-weight: 500;
+            vertical-align: middle;
+        }
+        .demo {
+            margin: 2em auto;
+            line-height: 1.25;
+        }
+        .demo ul li {
+            margin-bottom: 12px;
+        }
+        .demo ul li code {
+            background-color: #121212;
+            border-radius: 3px;
+            padding: 12px;
+            display: inline-block;
+            color: #fff;
+            font-family: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
+            font-weight: lighter;
+            margin-top: 12px;
+            font-size: 13px;
+            word-break: break-all;
+        }
+        .demo ul li code .red {
+            color: #EB644C;
+        }
+        .demo ul li code .green {
+            color: #52D999;
+        }
+        .demo ul li code .yellow {
+            color: #FFF4D9;
+        }
+        .demo ul li code .blue {
+            color: #648EEF;
+        }
+        .demo ul li code .purple {
+            color: #6569BD;
+        }
+        .demo ul li code .dots {
+            margin-top: 0.5em;
+            display: block;
+        }
+        #glyphs {
+            border-bottom: 1px solid #E5E5E5;
+            padding: 2em 0;
+            text-align: center;
+        }
+        .glyph {
+            display: inline-block;
+            width: 9em;
+            margin: 1em;
+            text-align: center;
+            vertical-align: top;
+            background: #FFF;
+        }
+        .glyph .flaticon {
+            padding: 10px;
+            display: block;
+            font-family: "Flaticon";
+            font-size: 64px;
+            line-height: 1;
+        }
+        .glyph .flaticon:before {
+            font-size: 64px;
+            color: #777777;
+            margin-left: 0;
+        }
+        .class-name {
+            font-size: 0.65em;
+            background-color: #E5E5E5;
+            color: #9C9C9C;
+            border-radius: 4px 4px 0 0;
+            padding: 0.5em;
+            font-family: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
+        }
+        .author-name {
+            font-size: 0.6em;
+            background-color: #EFF3F6;
+            border-top: 0;
+            border-radius: 0 0 4px 4px;
+            padding: 0.5em;
+        }
+        .author-name a {
+            color: #121212;
+        }
+        .class-name:last-child {
+            font-size: 10px;
+            line-height: 1.75;
+            color: #888;
+        }
+        .class-name:last-child a {
+            font-size: 10px;
+            line-height: 1.75;
+            color: #555;
+        }
+        .glyph > input {
+            display: block;
+            width: 100px;
+            margin: 5px auto;
+            text-align: center;
+            font-size: 12px;
+            line-height: 1.75;
+            cursor: text;
+        }
+        .glyph > input.icon-input {
+            font-family: "Flaticon";
+            font-size: 15px;
+            line-height: 1.6;
+            margin-bottom: 10px;
+        }
+        .attribution .title {
+            margin-top: 2em;
+        }
+        .attribution textarea {
+            background-color: #F8FAFB;
+            color: #121212;
+            padding: 1em;
+            border: none;
+            box-shadow: none;
+            border: 1px solid #E5E5E5;
+            border-radius: 4px;
+            resize: none;
+            width: 100%;
+            height: 150px;
+            font-size: 13px;
+            line-height: 1.6;
+            font-family: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
+            -webkit-appearance: none;
+        }
+        .attribution textarea:hover {
+            border-color: #CFD9E0;
+        }
+        .attribution textarea:focus {
+            border-color: #52D999;
+        }
+        .iconsuse {
+            margin: 2em auto;
+            text-align: center;
+            max-width: 1200px;
+        }
+        .iconsuse:after {
+            content: '';
+            display: table;
+            clear: both;
+        }
+        .iconsuse .image {
+            float: left;
+            width: 25%;
+            padding: 0 1em;
+        }
+        .iconsuse .image p {
+            margin-bottom: 1em;
+        }
+        .iconsuse .image span {
+            display: block;
+            font-size: 0.65em;
+            background-color: #222;
+            color: #fff;
+            border-radius: 4px;
+            padding: 10px;
+            color: #FFFF99;
+            margin-top: 1em;
+            font-family: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
+        }
+        .flaticon:before {
+            color: #777777;
+        }
+        #footer {
+            text-align: center;
+            background-color: #121212;
+            color: #9C9C9C;
+            padding: 12px;
+            font-size: 13px;
+            line-height: 1.6;
+        }
+        #footer a {
+            font-weight: normal;
+        }
+        @media (max-width: 960px) {
+            .iconsuse .image {
+                width: 50%;
+            }
+        }
+        .preview {
+            width: 100px;
+            display: inline-block;
+            margin: 10px;
+        }
+        .preview .inner {
+            display: inline-block;
+            width: 100%;
+            text-align: center;
+            background: #F7F7F7;
+            -webkit-border-radius: 3px 3px 0 0;
+            -moz-border-radius: 3px 3px 0 0;
+            border-radius: 3px 3px 0 0;
+        }
+        .preview .inner  {
+            line-height: 85px;
+            font-size: 40px;
+            color: #424242;
+        }
+        .label {
+            display: inline-block;
+            width: 100%;
+            box-sizing: border-box;
+            padding: 5px;
+            font-size: 10px;
+            font-family: Monaco, monospace;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            background: #ddd;
+            -webkit-border-radius: 0 0 3px 3px;
+            -moz-border-radius: 0 0 3px 3px;
+            border-radius: 0 0 3px 3px;
+            color: #777;
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <a href="https://www.flaticon.com/" target="_blank" class="logo">
+            <img src="https://media.flaticon.com/dist/min/img/logos/flaticon-by-positive-hor.svg" alt="logo">
+        </a>
+    </header>
+    <section class="demo wrapper">
+        <p class="title">Webfont Instructions</p>
+        <ul>
+            <li>
+                <span class="num">1. </span>Copy the "Fonts" files and CSS files to your website CSS folder.
+            </li>
+            <li>
+                <span class="num">2. </span>Add the CSS link to your website source code on header.
+                <code class="big">
+                    &lt;<span class="red">head</span>&gt;
+                    <br/><span class="dots">...</span>
+                    <br/>&lt;<span class="red">link</span> <span class="green">rel</span>=<span
+                        class="yellow">"stylesheet"</span> <span class="green">type</span>=<span
+                        class="yellow">"text/css"</span> <span class="green">href</span>=<span class="yellow">"your_website_domain/css_root/flaticon_collection_name.css"</span>&gt;
+                    <br/><span class="dots">...</span>
+                    <br/>&lt;/<span class="red">head</span>&gt;
+                </code>
+            </li>
+            <li>
+                <p>
+                    <span class="num">3. </span>Use the icon class on <code>"<span class="blue">display</span>:<span
+                        class="purple"> inline</span>"</code> elements:
+                    <br/>
+                    Use example: <code>&lt;<span class="red">i</span> <span class="green">class</span>=<span class="yellow">&quot;flaticon-airplane49&quot;</span>&gt;&lt;/<span
+                        class="red">i</span>&gt;</code> or <code>&lt;<span class="red">span</span> <span
+                        class="green">class</span>=<span class="yellow">&quot;flaticon-airplane49&quot;</span>&gt;&lt;/<span
+                        class="red">span</span>&gt;</code>
+            </li>
+        </ul>
+    </section>
+    <section id="glyphs">
+            <div class="glyph">
+                <i class="flaticon flaticon-setting"></i>
+                <div class="class-name">.flaticon-setting</div>
+                <div class="author-name">Author: #author-link-flaticon-setting# </div>
+            </div>
+            <div class="glyph">
+                <i class="flaticon flaticon-refresh"></i>
+                <div class="class-name">.flaticon-refresh</div>
+                <div class="author-name">Author: #author-link-flaticon-refresh# </div>
+            </div>
+            <div class="glyph">
+                <i class="flaticon flaticon-setting-1"></i>
+                <div class="class-name">.flaticon-setting-1</div>
+                <div class="author-name">Author: #author-link-flaticon-setting-1# </div>
+            </div>
+            <div class="glyph">
+                <i class="flaticon flaticon-check"></i>
+                <div class="class-name">.flaticon-check</div>
+                <div class="author-name">Author: #author-link-flaticon-check# </div>
+            </div>
+            <div class="glyph">
+                <i class="flaticon flaticon-bank"></i>
+                <div class="class-name">.flaticon-bank</div>
+                <div class="author-name">Author: #author-link-flaticon-bank# </div>
+            </div>
+            <div class="glyph">
+                <i class="flaticon flaticon-user"></i>
+                <div class="class-name">.flaticon-user</div>
+                <div class="author-name">Author: #author-link-flaticon-user# </div>
+            </div>
+            <div class="glyph">
+                <i class="flaticon flaticon-user-1"></i>
+                <div class="class-name">.flaticon-user-1</div>
+                <div class="author-name">Author: #author-link-flaticon-user-1# </div>
+            </div>
+            <div class="glyph">
+                <i class="flaticon flaticon-info-sign"></i>
+                <div class="class-name">.flaticon-info-sign</div>
+                <div class="author-name">Author: #author-link-flaticon-info-sign# </div>
+            </div>
+            <div class="glyph">
+                <i class="flaticon flaticon-clipboard"></i>
+                <div class="class-name">.flaticon-clipboard</div>
+                <div class="author-name">Author: #author-link-flaticon-clipboard# </div>
+            </div>
+            <div class="glyph">
+                <i class="flaticon flaticon-right-arrow"></i>
+                <div class="class-name">.flaticon-right-arrow</div>
+                <div class="author-name">Author: #author-link-flaticon-right-arrow# </div>
+            </div>
+            <div class="glyph">
+                <i class="flaticon flaticon-home"></i>
+                <div class="class-name">.flaticon-home</div>
+                <div class="author-name">Author: #author-link-flaticon-home# </div>
+            </div>
+            <div class="glyph">
+                <i class="flaticon flaticon-search"></i>
+                <div class="class-name">.flaticon-search</div>
+                <div class="author-name">Author: #author-link-flaticon-search# </div>
+            </div>
+            <div class="glyph">
+                <i class="flaticon flaticon-eye"></i>
+                <div class="class-name">.flaticon-eye</div>
+                <div class="author-name">Author: #author-link-flaticon-eye# </div>
+            </div>
+            <div class="glyph">
+                <i class="flaticon flaticon-edit"></i>
+                <div class="class-name">.flaticon-edit</div>
+                <div class="author-name">Author: #author-link-flaticon-edit# </div>
+            </div>
+            <div class="glyph">
+                <i class="flaticon flaticon-delete"></i>
+                <div class="class-name">.flaticon-delete</div>
+                <div class="author-name">Author: #author-link-flaticon-delete# </div>
+            </div>
+            <div class="glyph">
+                <i class="flaticon flaticon-add-1"></i>
+                <div class="class-name">.flaticon-add-1</div>
+                <div class="author-name">Author: #author-link-flaticon-add-1# </div>
+            </div>
+            <div class="glyph">
+                <i class="flaticon flaticon-plus-1"></i>
+                <div class="class-name">.flaticon-plus-1</div>
+                <div class="author-name">Author: #author-link-flaticon-plus-1# </div>
+            </div>
+            <div class="glyph">
+                <i class="flaticon flaticon-compose"></i>
+                <div class="class-name">.flaticon-compose</div>
+                <div class="author-name">Author: #author-link-flaticon-compose# </div>
+            </div>
+            <div class="glyph">
+                <i class="flaticon flaticon-trash"></i>
+                <div class="class-name">.flaticon-trash</div>
+                <div class="author-name">Author: #author-link-flaticon-trash# </div>
+            </div>
+            <div class="glyph">
+                <i class="flaticon flaticon-download"></i>
+                <div class="class-name">.flaticon-download</div>
+                <div class="author-name">Author: #author-link-flaticon-download# </div>
+            </div>
+            <div class="glyph">
+                <i class="flaticon flaticon-downloading"></i>
+                <div class="class-name">.flaticon-downloading</div>
+                <div class="author-name">Author: #author-link-flaticon-downloading# </div>
+            </div>
+            <div class="glyph">
+                <i class="flaticon flaticon-upload"></i>
+                <div class="class-name">.flaticon-upload</div>
+                <div class="author-name">Author: #author-link-flaticon-upload# </div>
+            </div>
+            <div class="glyph">
+                <i class="flaticon flaticon-right-arrow-1"></i>
+                <div class="class-name">.flaticon-right-arrow-1</div>
+                <div class="author-name">Author: #author-link-flaticon-right-arrow-1# </div>
+            </div>
+            <div class="glyph">
+                <i class="flaticon flaticon-user-2"></i>
+                <div class="class-name">.flaticon-user-2</div>
+                <div class="author-name">Author: #author-link-flaticon-user-2# </div>
+            </div>
+            <div class="glyph">
+                <i class="flaticon flaticon-man-in-suit-and-tie"></i>
+                <div class="class-name">.flaticon-man-in-suit-and-tie</div>
+                <div class="author-name">Author: #author-link-flaticon-man-in-suit-and-tie# </div>
+            </div>
+            <div class="glyph">
+                <i class="flaticon flaticon-cancel"></i>
+                <div class="class-name">.flaticon-cancel</div>
+                <div class="author-name">Author: #author-link-flaticon-cancel# </div>
+            </div>
+            <div class="glyph">
+                <i class="flaticon flaticon-check-mark"></i>
+                <div class="class-name">.flaticon-check-mark</div>
+                <div class="author-name">Author: #author-link-flaticon-check-mark# </div>
+            </div>
+            <div class="glyph">
+                <i class="flaticon flaticon-bars"></i>
+                <div class="class-name">.flaticon-bars</div>
+                <div class="author-name">Author: #author-link-flaticon-bars# </div>
+            </div>
+            <div class="glyph">
+                <i class="flaticon flaticon-copy"></i>
+                <div class="class-name">.flaticon-copy</div>
+                <div class="author-name">Author: #author-link-flaticon-copy# </div>
+            </div>
+            <div class="glyph">
+                <i class="flaticon flaticon-printer"></i>
+                <div class="class-name">.flaticon-printer</div>
+                <div class="author-name">Author: #author-link-flaticon-printer# </div>
+            </div>
+            <div class="glyph">
+                <i class="flaticon flaticon-file"></i>
+                <div class="class-name">.flaticon-file</div>
+                <div class="author-name">Author: #author-link-flaticon-file# </div>
+            </div>
+            <div class="glyph">
+                <i class="flaticon flaticon-file-1"></i>
+                <div class="class-name">.flaticon-file-1</div>
+                <div class="author-name">Author: #author-link-flaticon-file-1# </div>
+            </div>
+            <div class="glyph">
+                <i class="flaticon flaticon-file-2"></i>
+                <div class="class-name">.flaticon-file-2</div>
+                <div class="author-name">Author: #author-link-flaticon-file-2# </div>
+            </div>
+            <div class="glyph">
+                <i class="flaticon flaticon-eye-1"></i>
+                <div class="class-name">.flaticon-eye-1</div>
+                <div class="author-name">Author: #author-link-flaticon-eye-1# </div>
+            </div>
+            <div class="glyph">
+                <i class="flaticon flaticon-upload-1"></i>
+                <div class="class-name">.flaticon-upload-1</div>
+                <div class="author-name">Author: #author-link-flaticon-upload-1# </div>
+            </div>
+            <div class="glyph">
+                <i class="flaticon flaticon-production"></i>
+                <div class="class-name">.flaticon-production</div>
+                <div class="author-name">Author: #author-link-flaticon-production# </div>
+            </div>
+            <div class="glyph">
+                <i class="flaticon flaticon-cube"></i>
+                <div class="class-name">.flaticon-cube</div>
+                <div class="author-name">Author: #author-link-flaticon-cube# </div>
+            </div>
+            <div class="glyph">
+                <i class="flaticon flaticon-rotation"></i>
+                <div class="class-name">.flaticon-rotation</div>
+                <div class="author-name">Author: #author-link-flaticon-rotation# </div>
+            </div>
+            <div class="glyph">
+                <i class="flaticon flaticon-rotation-1"></i>
+                <div class="class-name">.flaticon-rotation-1</div>
+                <div class="author-name">Author: #author-link-flaticon-rotation-1# </div>
+            </div>
+            <div class="glyph">
+                <i class="flaticon flaticon-spinning"></i>
+                <div class="class-name">.flaticon-spinning</div>
+                <div class="author-name">Author: #author-link-flaticon-spinning# </div>
+            </div>
+            <div class="glyph">
+                <i class="flaticon flaticon-spinning-1"></i>
+                <div class="class-name">.flaticon-spinning-1</div>
+                <div class="author-name">Author: #author-link-flaticon-spinning-1# </div>
+            </div>
+            <div class="glyph">
+                <i class="flaticon flaticon-ready-stock"></i>
+                <div class="class-name">.flaticon-ready-stock</div>
+                <div class="author-name">Author: #author-link-flaticon-ready-stock# </div>
+            </div>
+            <div class="glyph">
+                <i class="flaticon flaticon-ready-stock-1"></i>
+                <div class="class-name">.flaticon-ready-stock-1</div>
+                <div class="author-name">Author: #author-link-flaticon-ready-stock-1# </div>
+            </div>
+            <div class="glyph">
+                <i class="flaticon flaticon-visible"></i>
+                <div class="class-name">.flaticon-visible</div>
+                <div class="author-name">Author: #author-link-flaticon-visible# </div>
+            </div>
+            <div class="glyph">
+                <i class="flaticon flaticon-printing"></i>
+                <div class="class-name">.flaticon-printing</div>
+                <div class="author-name">Author: #author-link-flaticon-printing# </div>
+            </div>
+            <div class="glyph">
+                <i class="flaticon flaticon-like"></i>
+                <div class="class-name">.flaticon-like</div>
+                <div class="author-name">Author: #author-link-flaticon-like# </div>
+            </div>
+            <div class="glyph">
+                <i class="flaticon flaticon-thumb-up"></i>
+                <div class="class-name">.flaticon-thumb-up</div>
+                <div class="author-name">Author: #author-link-flaticon-thumb-up# </div>
+            </div>
+            <div class="glyph">
+                <i class="flaticon flaticon-thumbs-up"></i>
+                <div class="class-name">.flaticon-thumbs-up</div>
+                <div class="author-name">Author: #author-link-flaticon-thumbs-up# </div>
+            </div>
+            <div class="glyph">
+                <i class="flaticon flaticon-thumb-down"></i>
+                <div class="class-name">.flaticon-thumb-down</div>
+                <div class="author-name">Author: #author-link-flaticon-thumb-down# </div>
+            </div>
+            <div class="glyph">
+                <i class="flaticon flaticon-dislike"></i>
+                <div class="class-name">.flaticon-dislike</div>
+                <div class="author-name">Author: #author-link-flaticon-dislike# </div>
+            </div>
+            <div class="glyph">
+                <i class="flaticon flaticon-thumb-down-1"></i>
+                <div class="class-name">.flaticon-thumb-down-1</div>
+                <div class="author-name">Author: #author-link-flaticon-thumb-down-1# </div>
+            </div>
+            <div class="glyph">
+                <i class="flaticon flaticon-pointing-right"></i>
+                <div class="class-name">.flaticon-pointing-right</div>
+                <div class="author-name">Author: #author-link-flaticon-pointing-right# </div>
+            </div>
+            <div class="glyph">
+                <i class="flaticon flaticon-point"></i>
+                <div class="class-name">.flaticon-point</div>
+                <div class="author-name">Author: #author-link-flaticon-point# </div>
+            </div>
+            <div class="glyph">
+                <i class="flaticon flaticon-history"></i>
+                <div class="class-name">.flaticon-history</div>
+                <div class="author-name">Author: #author-link-flaticon-history# </div>
+            </div>
+    </section>
+    <section class="attribution wrapper"   style="text-align:center;">
+        <div class="title">License and attribution:</div><div class="attrDiv">Font generated by <a href="https://www.flaticon.com">flaticon.com</a>. <div>#allAuthorLinksCC# #allAuthorLinksBasic# </div>
+        </div>
+        <div class="title">Copy the Attribution License:</div>
+        <textarea onclick="this.focus();this.select();">Font generated by &lt;a href=&quot;https://www.flaticon.com&quot;&gt;flaticon.com&lt;/a&gt;. #allAuthorLinksCC# #allAuthorLinksBasic#
+        </textarea>
+    </section>
+    <section class="iconsuse">
+        <div class="title">Examples:</div>
+            <div class="image">
+                <p>
+                    <i class="flaticon flaticon-setting"></i>
+                    <span>&lt;i class=&quot;flaticon-setting&quot;&gt;&lt;/i&gt;</span>
+                </p>
+            </div>
+            <div class="image">
+                <p>
+                    <i class="flaticon flaticon-refresh"></i>
+                    <span>&lt;i class=&quot;flaticon-refresh&quot;&gt;&lt;/i&gt;</span>
+                </p>
+            </div>
+            <div class="image">
+                <p>
+                    <i class="flaticon flaticon-setting-1"></i>
+                    <span>&lt;i class=&quot;flaticon-setting-1&quot;&gt;&lt;/i&gt;</span>
+                </p>
+            </div>
+            <div class="image">
+                <p>
+                    <i class="flaticon flaticon-check"></i>
+                    <span>&lt;i class=&quot;flaticon-check&quot;&gt;&lt;/i&gt;</span>
+                </p>
+            </div>
+            <div class="image">
+                <p>
+                    <i class="flaticon flaticon-bank"></i>
+                    <span>&lt;i class=&quot;flaticon-bank&quot;&gt;&lt;/i&gt;</span>
+                </p>
+            </div>
+            <div class="image">
+                <p>
+                    <i class="flaticon flaticon-user"></i>
+                    <span>&lt;i class=&quot;flaticon-user&quot;&gt;&lt;/i&gt;</span>
+                </p>
+            </div>
+            <div class="image">
+                <p>
+                    <i class="flaticon flaticon-user-1"></i>
+                    <span>&lt;i class=&quot;flaticon-user-1&quot;&gt;&lt;/i&gt;</span>
+                </p>
+            </div>
+            <div class="image">
+                <p>
+                    <i class="flaticon flaticon-info-sign"></i>
+                    <span>&lt;i class=&quot;flaticon-info-sign&quot;&gt;&lt;/i&gt;</span>
+                </p>
+            </div>
+            <div class="image">
+                <p>
+                    <i class="flaticon flaticon-clipboard"></i>
+                    <span>&lt;i class=&quot;flaticon-clipboard&quot;&gt;&lt;/i&gt;</span>
+                </p>
+            </div>
+            <div class="image">
+                <p>
+                    <i class="flaticon flaticon-right-arrow"></i>
+                    <span>&lt;i class=&quot;flaticon-right-arrow&quot;&gt;&lt;/i&gt;</span>
+                </p>
+            </div>
+            <div class="image">
+                <p>
+                    <i class="flaticon flaticon-home"></i>
+                    <span>&lt;i class=&quot;flaticon-home&quot;&gt;&lt;/i&gt;</span>
+                </p>
+            </div>
+            <div class="image">
+                <p>
+                    <i class="flaticon flaticon-search"></i>
+                    <span>&lt;i class=&quot;flaticon-search&quot;&gt;&lt;/i&gt;</span>
+                </p>
+            </div>
+            <div class="image">
+                <p>
+                    <i class="flaticon flaticon-eye"></i>
+                    <span>&lt;i class=&quot;flaticon-eye&quot;&gt;&lt;/i&gt;</span>
+                </p>
+            </div>
+            <div class="image">
+                <p>
+                    <i class="flaticon flaticon-edit"></i>
+                    <span>&lt;i class=&quot;flaticon-edit&quot;&gt;&lt;/i&gt;</span>
+                </p>
+            </div>
+            <div class="image">
+                <p>
+                    <i class="flaticon flaticon-delete"></i>
+                    <span>&lt;i class=&quot;flaticon-delete&quot;&gt;&lt;/i&gt;</span>
+                </p>
+            </div>
+            <div class="image">
+                <p>
+                    <i class="flaticon flaticon-add-1"></i>
+                    <span>&lt;i class=&quot;flaticon-add-1&quot;&gt;&lt;/i&gt;</span>
+                </p>
+            </div>
+            <div class="image">
+                <p>
+                    <i class="flaticon flaticon-plus-1"></i>
+                    <span>&lt;i class=&quot;flaticon-plus-1&quot;&gt;&lt;/i&gt;</span>
+                </p>
+            </div>
+            <div class="image">
+                <p>
+                    <i class="flaticon flaticon-compose"></i>
+                    <span>&lt;i class=&quot;flaticon-compose&quot;&gt;&lt;/i&gt;</span>
+                </p>
+            </div>
+            <div class="image">
+                <p>
+                    <i class="flaticon flaticon-trash"></i>
+                    <span>&lt;i class=&quot;flaticon-trash&quot;&gt;&lt;/i&gt;</span>
+                </p>
+            </div>
+            <div class="image">
+                <p>
+                    <i class="flaticon flaticon-download"></i>
+                    <span>&lt;i class=&quot;flaticon-download&quot;&gt;&lt;/i&gt;</span>
+                </p>
+            </div>
+            <div class="image">
+                <p>
+                    <i class="flaticon flaticon-downloading"></i>
+                    <span>&lt;i class=&quot;flaticon-downloading&quot;&gt;&lt;/i&gt;</span>
+                </p>
+            </div>
+            <div class="image">
+                <p>
+                    <i class="flaticon flaticon-upload"></i>
+                    <span>&lt;i class=&quot;flaticon-upload&quot;&gt;&lt;/i&gt;</span>
+                </p>
+            </div>
+            <div class="image">
+                <p>
+                    <i class="flaticon flaticon-right-arrow-1"></i>
+                    <span>&lt;i class=&quot;flaticon-right-arrow-1&quot;&gt;&lt;/i&gt;</span>
+                </p>
+            </div>
+            <div class="image">
+                <p>
+                    <i class="flaticon flaticon-user-2"></i>
+                    <span>&lt;i class=&quot;flaticon-user-2&quot;&gt;&lt;/i&gt;</span>
+                </p>
+            </div>
+            <div class="image">
+                <p>
+                    <i class="flaticon flaticon-man-in-suit-and-tie"></i>
+                    <span>&lt;i class=&quot;flaticon-man-in-suit-and-tie&quot;&gt;&lt;/i&gt;</span>
+                </p>
+            </div>
+            <div class="image">
+                <p>
+                    <i class="flaticon flaticon-cancel"></i>
+                    <span>&lt;i class=&quot;flaticon-cancel&quot;&gt;&lt;/i&gt;</span>
+                </p>
+            </div>
+            <div class="image">
+                <p>
+                    <i class="flaticon flaticon-check-mark"></i>
+                    <span>&lt;i class=&quot;flaticon-check-mark&quot;&gt;&lt;/i&gt;</span>
+                </p>
+            </div>
+            <div class="image">
+                <p>
+                    <i class="flaticon flaticon-bars"></i>
+                    <span>&lt;i class=&quot;flaticon-bars&quot;&gt;&lt;/i&gt;</span>
+                </p>
+            </div>
+            <div class="image">
+                <p>
+                    <i class="flaticon flaticon-copy"></i>
+                    <span>&lt;i class=&quot;flaticon-copy&quot;&gt;&lt;/i&gt;</span>
+                </p>
+            </div>
+            <div class="image">
+                <p>
+                    <i class="flaticon flaticon-printer"></i>
+                    <span>&lt;i class=&quot;flaticon-printer&quot;&gt;&lt;/i&gt;</span>
+                </p>
+            </div>
+            <div class="image">
+                <p>
+                    <i class="flaticon flaticon-file"></i>
+                    <span>&lt;i class=&quot;flaticon-file&quot;&gt;&lt;/i&gt;</span>
+                </p>
+            </div>
+            <div class="image">
+                <p>
+                    <i class="flaticon flaticon-file-1"></i>
+                    <span>&lt;i class=&quot;flaticon-file-1&quot;&gt;&lt;/i&gt;</span>
+                </p>
+            </div>
+            <div class="image">
+                <p>
+                    <i class="flaticon flaticon-file-2"></i>
+                    <span>&lt;i class=&quot;flaticon-file-2&quot;&gt;&lt;/i&gt;</span>
+                </p>
+            </div>
+            <div class="image">
+                <p>
+                    <i class="flaticon flaticon-eye-1"></i>
+                    <span>&lt;i class=&quot;flaticon-eye-1&quot;&gt;&lt;/i&gt;</span>
+                </p>
+            </div>
+            <div class="image">
+                <p>
+                    <i class="flaticon flaticon-upload-1"></i>
+                    <span>&lt;i class=&quot;flaticon-upload-1&quot;&gt;&lt;/i&gt;</span>
+                </p>
+            </div>
+            <div class="image">
+                <p>
+                    <i class="flaticon flaticon-production"></i>
+                    <span>&lt;i class=&quot;flaticon-production&quot;&gt;&lt;/i&gt;</span>
+                </p>
+            </div>
+            <div class="image">
+                <p>
+                    <i class="flaticon flaticon-cube"></i>
+                    <span>&lt;i class=&quot;flaticon-cube&quot;&gt;&lt;/i&gt;</span>
+                </p>
+            </div>
+            <div class="image">
+                <p>
+                    <i class="flaticon flaticon-rotation"></i>
+                    <span>&lt;i class=&quot;flaticon-rotation&quot;&gt;&lt;/i&gt;</span>
+                </p>
+            </div>
+            <div class="image">
+                <p>
+                    <i class="flaticon flaticon-rotation-1"></i>
+                    <span>&lt;i class=&quot;flaticon-rotation-1&quot;&gt;&lt;/i&gt;</span>
+                </p>
+            </div>
+            <div class="image">
+                <p>
+                    <i class="flaticon flaticon-spinning"></i>
+                    <span>&lt;i class=&quot;flaticon-spinning&quot;&gt;&lt;/i&gt;</span>
+                </p>
+            </div>
+            <div class="image">
+                <p>
+                    <i class="flaticon flaticon-spinning-1"></i>
+                    <span>&lt;i class=&quot;flaticon-spinning-1&quot;&gt;&lt;/i&gt;</span>
+                </p>
+            </div>
+            <div class="image">
+                <p>
+                    <i class="flaticon flaticon-ready-stock"></i>
+                    <span>&lt;i class=&quot;flaticon-ready-stock&quot;&gt;&lt;/i&gt;</span>
+                </p>
+            </div>
+            <div class="image">
+                <p>
+                    <i class="flaticon flaticon-ready-stock-1"></i>
+                    <span>&lt;i class=&quot;flaticon-ready-stock-1&quot;&gt;&lt;/i&gt;</span>
+                </p>
+            </div>
+            <div class="image">
+                <p>
+                    <i class="flaticon flaticon-visible"></i>
+                    <span>&lt;i class=&quot;flaticon-visible&quot;&gt;&lt;/i&gt;</span>
+                </p>
+            </div>
+            <div class="image">
+                <p>
+                    <i class="flaticon flaticon-printing"></i>
+                    <span>&lt;i class=&quot;flaticon-printing&quot;&gt;&lt;/i&gt;</span>
+                </p>
+            </div>
+            <div class="image">
+                <p>
+                    <i class="flaticon flaticon-like"></i>
+                    <span>&lt;i class=&quot;flaticon-like&quot;&gt;&lt;/i&gt;</span>
+                </p>
+            </div>
+            <div class="image">
+                <p>
+                    <i class="flaticon flaticon-thumb-up"></i>
+                    <span>&lt;i class=&quot;flaticon-thumb-up&quot;&gt;&lt;/i&gt;</span>
+                </p>
+            </div>
+            <div class="image">
+                <p>
+                    <i class="flaticon flaticon-thumbs-up"></i>
+                    <span>&lt;i class=&quot;flaticon-thumbs-up&quot;&gt;&lt;/i&gt;</span>
+                </p>
+            </div>
+            <div class="image">
+                <p>
+                    <i class="flaticon flaticon-thumb-down"></i>
+                    <span>&lt;i class=&quot;flaticon-thumb-down&quot;&gt;&lt;/i&gt;</span>
+                </p>
+            </div>
+            <div class="image">
+                <p>
+                    <i class="flaticon flaticon-dislike"></i>
+                    <span>&lt;i class=&quot;flaticon-dislike&quot;&gt;&lt;/i&gt;</span>
+                </p>
+            </div>
+            <div class="image">
+                <p>
+                    <i class="flaticon flaticon-thumb-down-1"></i>
+                    <span>&lt;i class=&quot;flaticon-thumb-down-1&quot;&gt;&lt;/i&gt;</span>
+                </p>
+            </div>
+            <div class="image">
+                <p>
+                    <i class="flaticon flaticon-pointing-right"></i>
+                    <span>&lt;i class=&quot;flaticon-pointing-right&quot;&gt;&lt;/i&gt;</span>
+                </p>
+            </div>
+            <div class="image">
+                <p>
+                    <i class="flaticon flaticon-point"></i>
+                    <span>&lt;i class=&quot;flaticon-point&quot;&gt;&lt;/i&gt;</span>
+                </p>
+            </div>
+            <div class="image">
+                <p>
+                    <i class="flaticon flaticon-history"></i>
+                    <span>&lt;i class=&quot;flaticon-history&quot;&gt;&lt;/i&gt;</span>
+                </p>
+            </div>
+        </div>
+    </section>
+    <div id="footer">
+        <div>Generated by <a href="https://www.flaticon.com">flaticon.com</a>
+        </div>
+    </div>
+</body>
+</html>