Kote - is the pricing tables in modern flat design. Perfect design to display subscription plans. With this design you will easy achieve 100 score on Google PageSpeed. Easy to correct view of items in embedded table editor. Get styles in CSS, Stylus, LESS or SASS versions.
To build idea-perfect table needed for your website you can use embedded editor. Under each table located editor button, use it to open this preset in editor. All settings in editor split by elements that located in preset, just change values of inputs and table will rebuild instantly.
You can use existing presets. To get it`s code, look at name of the table, find HTML code in 'index.html' file, it will be separated with comments like this:
<!-- Preset 1.1 begin -->
<div class="table-item-1-1">
...
</div>
<!-- Preset 1.1 end -->To get it`s styles, look at name of the table, find CSS, Stylus, LESS or SASS code in style presets file - it will be separated with comments like this:
/* Preset 1.1 begin */
.table-item-1-1{
margin: 50px;
padding: 30px 15px;
...
}
/* Preset 1.1 end */You can use Pug code instead of HTML. Code in 'presets.pug' file, it will be separated with comments like this:
//- Preset 1.1 begin
-
var pros = [
...
a(href='javascript:;') Get
//- Preset 1.1 endPresets using em CSS sizes. By changing initial value of font size in main preset container you are able to change it is scale proportionally. String with 1em setup will look like this:
/* Preset 1.1 begin */
.table-item-1-1{
font-size: 16px; /* 1 em initial setup */
...You can use Font Awesome 5 icons any where in template. To do this select an icon in this search, open it and copy code from the item to html. It will look like this:
<i class="fab fa-font-awesome-flag"></i>| File | Type | Description |
|---|---|---|
| assets | Folder | Folder with all assets of the template |
| => fonts | Folder | Folder with all fonts data |
| => => font-awesome | Folder | Folder with all font-awesome data |
| => => poppins | Folder | Folder with all main fonts data |
| => scripts | Folder | Folder with all scripts |
| => => script.js | Javascript | Main logic javascript file of the template |
| => style.css | Stylesheet | Main style css file of the template |
| => favicon.ico | Icon | Icon for demo page |
| index.html | HTML | Main file of the template |
| presets.css | Stylesheet | CSS file with styles of presets |
| presets.less | Stylesheet | LESS file with styles of presets |
| presets.scss | Stylesheet | SASS file with styles of presets |
| presets.styl | Stylesheet | Stylus file with styles of presets |