{"id":206,"date":"2014-04-04T08:27:07","date_gmt":"2014-04-04T08:27:07","guid":{"rendered":"http:\/\/elysium.wp.themeforest.createit.pl\/?page_id=206"},"modified":"2014-04-15T17:07:09","modified_gmt":"2014-04-15T17:07:09","slug":"elements-and-animations","status":"publish","type":"page","link":"http:\/\/elysium.wp.themeforest.createit.pl\/creative\/elements-and-animations\/","title":{"rendered":"Elements and Animations"},"content":{"rendered":"<div id=\"bars\" class=\" chapter padding-sm row\"><div class=\"text-center col-md-12\">\r\n                <h3 >\r\n                     Bars\r\n                <\/h3>\r\n            <\/div>\n<div class=\"col-md-8\">\n\r\n                <div class=\"both row\"><\/div>\r\n                    <div class=\"col-xs-4 col-md-4\">\r\n                        <span class=\"bar-info\">Bar<\/span>\r\n                    <\/div>\r\n                    <div class=\"col-xs-8 col-md-8\">\r\n                <div class=\"progress\">\r\n                    <div class=\"progress-bar\" role=\"progressbar\" data-percentage=\"10\" aria-valuenow=\"10\" aria-valuemin=\"0\" aria-valuemax=\"100\">\r\n                        <span class=\"sr-only\">10%<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n             <\/div>\r\n                <div class=\"both row\"><\/div>\n\r\n                <div class=\"both row\"><\/div>\r\n                    <div class=\"col-xs-4 col-md-4\">\r\n                        <span class=\"bar-info\">Bar<\/span>\r\n                    <\/div>\r\n                    <div class=\"col-xs-8 col-md-8\">\r\n                <div class=\"progress\">\r\n                    <div class=\"progress-bar\" role=\"progressbar\" data-percentage=\"30\" aria-valuenow=\"30\" aria-valuemin=\"0\" aria-valuemax=\"100\">\r\n                        <span class=\"sr-only\">30%<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n             <\/div>\r\n                <div class=\"both row\"><\/div>\n\r\n                <div class=\"both row\"><\/div>\r\n                    <div class=\"col-xs-4 col-md-4\">\r\n                        <span class=\"bar-info\">Bar<\/span>\r\n                    <\/div>\r\n                    <div class=\"col-xs-8 col-md-8\">\r\n                <div class=\"progress\">\r\n                    <div class=\"progress-bar\" role=\"progressbar\" data-percentage=\"50\" aria-valuenow=\"50\" aria-valuemin=\"0\" aria-valuemax=\"100\">\r\n                        <span class=\"sr-only\">50%<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n             <\/div>\r\n                <div class=\"both row\"><\/div>\n\r\n                <div class=\"both row\"><\/div>\r\n                    <div class=\"col-xs-4 col-md-4\">\r\n                        <span class=\"bar-info\">Bar<\/span>\r\n                    <\/div>\r\n                    <div class=\"col-xs-8 col-md-8\">\r\n                <div class=\"progress\">\r\n                    <div class=\"progress-bar\" role=\"progressbar\" data-percentage=\"70\" aria-valuenow=\"70\" aria-valuemin=\"0\" aria-valuemax=\"100\">\r\n                        <span class=\"sr-only\">70%<\/span>\r\n                    <\/div>\r\n                <\/div>\r\n             <\/div>\r\n                <div class=\"both row\"><\/div>\n<\/div>\n<div class=\"col-md-4\">\n[sourcecode language=&#8221;html&#8221;][bar title=&quot;Bar&quot; percent=&quot;10&quot;][\/sourcecode]<br \/>\n<h6 class=\"ct-params\">parameters<\/h6><ul class=\"ct-params\"><li><i><strong>title<\/strong><\/i><\/li><li><i><strong>percent<\/strong><\/i><\/li><\/ul>\n<\/div>\n<\/div>\n<hr >\n<div class=\"padding-sm row\"><div class=\"text-center col-md-12\">\r\n                <h3 >\r\n                     Circle graph\r\n                <\/h3>\r\n            <\/div>\n<div class=\"col-md-4\"><br \/>\n\r\n\t\t\t<div class=\"media pie-container\">\r\n                <div class=\"graph-percent pie-chart\" data-percent=\"45\" data-barcolor=\"#80bfc8\" data-trackcolor=\"#c8e1e5\" data-linecap=\"butt\" data-linewidth=\"30\" data-size=\"130\" data-animate=\"1000\">\r\n                <\/div>\r\n                <div class=\"media-body\">\r\n                            <span class=\"h5\">From Last Week<\/span><br><span class=\"h4\">+296<\/span>\r\n                         <\/div>\r\n            <\/div>\r\n        \n<\/div>\n<div class=\"col-md-4\"><br \/>\n\r\n\t\t\t<div class=\"media pie-container\">\r\n                <div class=\"graph-percent pie-chart\" data-percent=\"75\" data-barcolor=\"#80bfc8\" data-trackcolor=\"#c8e1e5\" data-linecap=\"butt\" data-linewidth=\"30\" data-size=\"130\" data-animate=\"1000\">\r\n                <\/div>\r\n                <div class=\"media-body\">\r\n                            <span class=\"h5\">From Last Week<\/span><br><span class=\"h4\">+450<\/span>\r\n                         <\/div>\r\n            <\/div>\r\n        \n<\/div>\n<div class=\"col-md-4\">\n[sourcecode language=&#8221;html&#8221;][graph_circle title=&quot;From Last Week&quot;<br \/>\nsubtitle=&quot;+296&quot; percent=&quot;45&quot;][\/sourcecode]<br \/>\n<h6 class=\"ct-params\">parameters<\/h6><ul class=\"ct-params\"><li><i><strong>title<\/strong><\/i><\/li><li><i><strong>subtitle<\/strong><\/i><\/li><li><i><strong>percent<\/strong> - in %<\/i><\/li><li><i><strong>barcolor<\/strong> - the color of the curcular bar.<\/i><\/li><li><i><strong>trackcolor<\/strong> - the color of the track, leave it blank to disable rendering.<\/i><\/li><li><i><strong>linecap<\/strong> - defines how the ending of the bar line looks like - butt; round; square; <\/i><\/li><\/ul>\n<\/div>\n<\/div>\n<hr >\n<div class=\"padding-sm row\"><div class=\"text-center col-md-12\">\r\n                <h3 >\r\n                     Counter\r\n                <\/h3>\r\n            <\/div>\n<div class=\"col-md-8\">\n<div class=\"text-center col-md-4\">\n\r\n            <div class=\"icon-counter\">\r\n                <div class=\"relative\">\r\n                    <div class=\"simple-circle dark\">\r\n                        <span class=\"counter\" data-to=\"31\">\r\n                            0\r\n                        <\/span>\r\n                    <\/div>\r\n                    <span class=\"description h5\">\r\n                        projects done \r\n                    <\/span>\r\n                <\/div>\r\n            <\/div>\n<\/div>\n<div class=\"text-center col-md-4\">\n\r\n            <div class=\"icon-counter\">\r\n                <div class=\"relative\">\r\n                    <div class=\"simple-circle dark\">\r\n                        <span class=\"counter\" data-to=\"937\">\r\n                            0\r\n                        <\/span>\r\n                    <\/div>\r\n                    <span class=\"description h5\">\r\n                        pots of coffee \r\n                    <\/span>\r\n                <\/div>\r\n            <\/div>\n<\/div>\n<div class=\"text-center col-md-4\">\n\r\n            <div class=\"icon-counter\">\r\n                <div class=\"relative\">\r\n                    <div class=\"simple-circle dark\">\r\n                        <span class=\"counter\" data-to=\"8\">\r\n                            0\r\n                        <\/span>\r\n                    <\/div>\r\n                    <span class=\"description h5\">\r\n                        awards won\r\n                    <\/span>\r\n                <\/div>\r\n            <\/div>\n<\/div>\n<\/div>\n<div class=\"col-md-4\">\n[sourcecode language=&#8221;html&#8221;][counter  max=&quot;8&quot;]awards won[\/counter][\/sourcecode]<br \/>\n<h6 class=\"ct-params\">parameters<\/h6><ul class=\"ct-params\"><li><i><strong>icon<\/strong><\/i><\/li><li><i><strong>min<\/strong> - counter from<\/i><\/li><li><i><strong>max<\/strong> - counter to<\/i><\/li><\/ul>\n<\/div>\n<\/div>\n<hr >\n<div id=\"pricingtable\" class=\" chapter padding-sm row\"><div class=\"text-center col-md-12\">\r\n                <h3 >\r\n                     Pricing table style one\r\n                <\/h3>\r\n            <\/div>\n<div class=\"text-center col-md-12\">\n\r\n\t\t    <div class=\"price-list-one\">\r\n                <div class=\"both row\">\r\n                    \n\r\n\t\t    <div class=\"price-list-one\">\r\n                <div class=\"both row\">\r\n                    \r\n                <\/div>\r\n            <\/div>\n<div class=\"col-md-4 col-sm-4 \">\r\n                     <div class=\"price-list-normal\">\r\n                        <span class=\"title\">\r\n                        Super\r\n                            <small>The best plan<\/small>\r\n                        <\/span>\r\n                        \r\n\t\t    <ul class=\"border-list\">\n<li>\n                            <span class=\"bigger\"><i class=\"fa fa-check\"><\/i> 18<\/span> New professional pages\n                        <\/li>\n<li>\n                            <span class=\"bigger\"><i class=\"fa fa-check\"><\/i> 80<\/span> MySQL Databases\n                        <\/li>\n<li>\n                            <span class=\"bigger\"><i class=\"fa fa-check\"><\/i> 10<\/span> TB Bandwidth\n                        <\/li>\n<li>\n                            <span class=\"bigger\"><i class=\"fa fa-check\"><\/i> 50<\/span> GB Storage space\n                        <\/li>\n\r\n            <\/ul> \r\n                        <span class=\"price\">\r\n                            <span class=\"symbol\">$<\/span>110\r\n                            <small>Per month<\/small>\r\n                        <\/span>\r\n                         <a href=\"http:\/\/themeforest.net\/user\/createit-pl\/portfolio?ref=createit-pl\" class=\"btn btn-lg  btn-grey\" id=\"\" rel=\"nofollow\">choose plan!<\/a>\r\n                    <\/div>\r\n               <\/div>\n<div class=\"col-md-4 col-sm-4 \">\r\n                     <div class=\"price-list-important\">\r\n                        <span class=\"title\">\r\n                        Duper\r\n                            <small>The best plan<\/small>\r\n                        <\/span>\r\n                        \r\n\t\t    <ul class=\"border-list\">\n<li>\n                            <span class=\"bigger\"><i class=\"fa fa-check\"><\/i> 18<\/span> New professional pages\n                        <\/li>\n<li>\n                            <span class=\"bigger\"><i class=\"fa fa-check\"><\/i> 80<\/span> MySQL Databases\n                        <\/li>\n<li>\n                            <span class=\"bigger\"><i class=\"fa fa-check\"><\/i> 10<\/span> TB Bandwidth\n                        <\/li>\n<li>\n                            <span class=\"bigger\"><i class=\"fa fa-check\"><\/i> 50<\/span> GB Storage space\n                        <\/li>\n\r\n            <\/ul>\r\n                        <span class=\"price\">\r\n                            <span class=\"symbol\">$<\/span>110 \r\n                            <small>Per month<\/small>\r\n                        <\/span>\r\n                         <a href=\"http:\/\/themeforest.net\/user\/createit-pl\/portfolio?ref=createit-pl\" class=\"btn btn-lg  btn-primary\" id=\"\" rel=\"nofollow\">choose plan!<\/a>\r\n                    <\/div>\r\n               <\/div>\n<div class=\"col-md-4 col-sm-4 \">\r\n                     <div class=\"price-list-normal\">\r\n                        <span class=\"title\">\r\n                        Super Duper\r\n                            <small>The best plan<\/small>\r\n                        <\/span>\r\n                        \r\n\t\t    <ul class=\"border-list\">\n<li>\n                            <span class=\"bigger\"><i class=\"fa fa-check\"><\/i> 18<\/span> New professional pages\n                        <\/li>\n<li class=\"checked\">\n                            <span class=\"bigger\"><i class=\"fa fa-check\"><\/i> 80<\/span> MySQL Databases\n                        <\/li>\n<li>\n                            <span class=\"bigger\"><i class=\"fa fa-check\"><\/i> 10<\/span> TB Bandwidth\n                        <\/li>\n<li>\n                            <span class=\"bigger\"><i class=\"fa fa-check\"><\/i> 50<\/span> GB Storage space\n                        <\/li>\n\r\n            <\/ul>\r\n                        <span class=\"price\">\r\n                            <span class=\"symbol\">$<\/span>110 \r\n                            <small>Per month<\/small>\r\n                        <\/span>\r\n                         <a href=\"http:\/\/themeforest.net\/user\/createit-pl\/portfolio?ref=createit-pl\" class=\"btn btn-lg  btn-grey\" id=\"\" rel=\"nofollow\">choose plan!<\/a>\r\n                    <\/div>\r\n               <\/div>\n\r\n                <\/div>\r\n            <\/div>\n<\/div>\n<\/div>\n<div class=\"padding-sm-bottom row\">\n<div class=\"col-md-6\">\n[sourcecode language=&#8221;html&#8221;][pricelist]\n[pricelist_item title=&quot;Super&quot; subtitle=&quot;The best plan&quot;<br \/>\n price=&quot;110&quot; buttonlabel=&quot;choose plan!&quot; buttonlink=&quot;...&quot;]\n                        &#8230;<br \/>\n[\/pricelist_item]\n&#8230;<br \/>\n[\/pricelist][\/sourcecode]<br \/>\n<\/div>\n<div class=\"col-md-6\">\n<h6 class=\"ct-params\">pricelist parameters<\/h6><ul class=\"ct-params\"><li><i><strong>number<\/strong> - number of columns - 3; 4; <\/i><\/li><li><i><strong>style<\/strong> - examples can be viewed <link><a href=\"http:\/\/elysium.wp.themeforest.createit.pl\/elements-and-animations\/#pricingtable\">here<\/a><\/link> - one; two; <\/i><\/li><\/ul>\n<h6 class=\"ct-params\">pricelist_item parameters<\/h6><ul class=\"ct-params\"><li><i><strong>title<\/strong><\/i><\/li><li><i><strong>subtitle<\/strong> - is only in pricelist style=one<\/i><\/li><li><i><strong>currency<\/strong><\/i><\/li><li><i><strong>price<\/strong><\/i><\/li><li><i><strong>buttonlabel<\/strong><\/i><\/li><li><i><strong>buttonlink<\/strong><\/i><\/li><li><i><strong>style<\/strong> - examples can be viewed <link><a href=\"http:\/\/elysium.wp.themeforest.createit.pl\/elements-and-animations\/#pricingtable\">here<\/a><\/link> - default; primary; <\/i><\/li><\/ul>\n<\/div>\n<\/div>\n<hr >\n<div class=\"padding-sm row\"><div class=\"text-center col-md-12\">\r\n                <h3 >\r\n                     Pricing table style two\r\n                <\/h3>\r\n            <\/div>\n<div class=\"text-center col-md-12\">\n\r\n\t\t    <div class=\"price-list-two\">\r\n                <div class=\"both row\">\r\n                    \n<div class=\"col-md-3 col-sm-3 \">\r\n            <div class=\"price-list-normal\">\r\n                <span class=\"title\">\r\n                    Free\r\n                <\/span>\r\n                <span class=\"price\">\r\n                    $0<small> \/ month<\/small>\r\n                <\/span>\r\n                    \r\n\t\t    <ul class=\"border-list\">\n<li>\n                            500MB Storage\n                        <\/li>\n<li>\n                            BackUp &amp; Updates\n                        <\/li>\n<li>\n                            Anti Virus Function\n                        <\/li>\n<li>\n                            Contact Form\n                        <\/li>\n<li>\n                            Own Plugins\n                        <\/li>\n\r\n            <\/ul> \r\n                     <a href=\"http:\/\/themeforest.net\/user\/createit-pl\/portfolio?ref=createit-pl\" class=\"btn btn-lg  btn-grey\" id=\"\" rel=\"nofollow\">choose plan!<\/a>\r\n            <\/div>\r\n            <\/div>\n<div class=\"col-md-3 col-sm-3 \">\r\n            <div class=\"price-list-normal\">\r\n                <span class=\"title\">\r\n                    Silver \r\n                <\/span>\r\n                <span class=\"price\">\r\n                    $10 <small> \/ month<\/small>\r\n                <\/span>\r\n                    \r\n\t\t    <ul class=\"border-list\">\n<li>\n                            500MB Storage\n                        <\/li>\n<li>\n                            BackUp &amp; Updates\n                        <\/li>\n<li>\n                            Anti Virus Function\n                        <\/li>\n<li>\n                            Contact Form\n                        <\/li>\n<li>\n                            Own Plugins\n                        <\/li>\n\r\n            <\/ul>\r\n                     <a href=\"http:\/\/themeforest.net\/user\/createit-pl\/portfolio?ref=createit-pl\" class=\"btn btn-lg  btn-grey\" id=\"\" rel=\"nofollow\">choose plan!<\/a>\r\n            <\/div>\r\n            <\/div>\n<div class=\"col-md-3 col-sm-3 \">\r\n            <div class=\"price-list-important\">\r\n                <span class=\"title\">\r\n                    Gold\r\n                <\/span>\r\n                <span class=\"price\">\r\n                    $45<small> \/ month<\/small>\r\n                <\/span>\r\n                    \r\n\t\t    <ul class=\"border-list\">\n<li>\n                            500MB Storage\n                        <\/li>\n<li>\n                            BackUp &amp; Updates\n                        <\/li>\n<li>\n                            Anti Virus Function\n                        <\/li>\n<li>\n                            Contact Form\n                        <\/li>\n<li>\n                            Own Plugins\n                        <\/li>\n\r\n            <\/ul>\r\n                     <a href=\"http:\/\/themeforest.net\/user\/createit-pl\/portfolio?ref=createit-pl\" class=\"btn btn-lg  btn-primary\" id=\"\" rel=\"nofollow\">choose plan!<\/a>\r\n            <\/div>\r\n            <\/div>\n<div class=\"col-md-3 col-sm-3 \">\r\n            <div class=\"price-list-normal\">\r\n                <span class=\"title\">\r\n                    Platinum \r\n                <\/span>\r\n                <span class=\"price\">\r\n                    $99<small> \/ month<\/small>\r\n                <\/span>\r\n                    \r\n\t\t    <ul class=\"border-list\">\n<li>\n                            500MB Storage\n                        <\/li>\n<li>\n                            BackUp &amp; Updates\n                        <\/li>\n<li>\n                            Anti Virus Function\n                        <\/li>\n<li>\n                            Contact Form\n                        <\/li>\n<li>\n                            Own Plugins\n                        <\/li>\n\r\n            <\/ul>\r\n                     <a href=\"http:\/\/themeforest.net\/user\/createit-pl\/portfolio?ref=createit-pl\" class=\"btn btn-lg  btn-grey\" id=\"\" rel=\"nofollow\">choose plan!<\/a>\r\n            <\/div>\r\n            <\/div>\n\r\n                <\/div>\r\n            <\/div>\n<\/div>\n<\/div>\n<div class=\"padding-md-bottom row\">\n<div class=\"col-md-6\">\n[sourcecode language=&#8221;html&#8221;][pricelist style=&quot;two&quot; number=&quot;4&quot;]\n[pricelist_item title=&quot;Super&quot; subtitle=&quot;The best plan&quot;<br \/>\n price=&quot;110&quot; buttonlabel=&quot;choose plan!&quot; buttonlink=&quot;...&quot;]\n                        &#8230;<br \/>\n[\/pricelist_item]\n&#8230;<br \/>\n[\/pricelist][\/sourcecode]<br \/>\n<\/div>\n<div class=\"col-md-6\">\n<h6 class=\"ct-params\">pricelist parameters<\/h6><ul class=\"ct-params\"><li><i><strong>number<\/strong> - number of columns - 3; 4; <\/i><\/li><li><i><strong>style<\/strong> - examples can be viewed <link><a href=\"http:\/\/elysium.wp.themeforest.createit.pl\/elements-and-animations\/#pricingtable\">here<\/a><\/link> - one; two; <\/i><\/li><\/ul>\n<h6 class=\"ct-params\">pricelist_item parameters<\/h6><ul class=\"ct-params\"><li><i><strong>title<\/strong><\/i><\/li><li><i><strong>subtitle<\/strong> - is only in pricelist style=one<\/i><\/li><li><i><strong>currency<\/strong><\/i><\/li><li><i><strong>price<\/strong><\/i><\/li><li><i><strong>buttonlabel<\/strong><\/i><\/li><li><i><strong>buttonlink<\/strong><\/i><\/li><li><i><strong>style<\/strong> - examples can be viewed <link><a href=\"http:\/\/elysium.wp.themeforest.createit.pl\/elements-and-animations\/#pricingtable\">here<\/a><\/link> - default; primary; <\/i><\/li><\/ul>\n<\/div>\n<\/div>\n<hr >\n<\/div><div class=\"full-width\">\n\r\n            <div class=\"section-title text-center\">\r\n                \n\r\n                <h3 >\r\n                    Section\r\n                <\/h3>\r\n            \n\r\n                <h5 class=\"light\">\r\n                    Always be in front of your competitors and profit from our weekly newsletter!\r\n                <\/h5>\r\n            \n\r\n                <span class=\"triangle\"><\/span>\r\n            <\/div>\r\n\r\n        \n<\/div><div class=\"container\">\n<div class=\"padding-sm row\">\n<div class=\"col-md-6\">\n[sourcecode language=&#8221;html&#8221;][section]\n&#8230;<br \/>\n[\/section][\/sourcecode]<br \/>\n<\/div>\n<div class=\"col-md-6\">\n\n<\/div>\n<\/div>\n<hr >\n<div class=\"padding-sm row\"><div class=\"text-center col-md-12\">\r\n                <h3 >\r\n                     Animations\r\n                <\/h3>\r\n            <\/div>\n<div class=\"col-md-8\">\n<div class=\"text-center col-md-12 animated\" data-fx=\"fadeIn\">\n\r\n                <h2 >\r\n                    Animate any content (fadein)\r\n                <\/h2>\r\n            \n<\/div> <\/p>\n<div class=\"text-center col-md-12 animated\" data-fx=\"rotateIn\">\n\r\n                <h2 >\r\n                    There are no limitations (??)\r\n                <\/h2>\r\n            \n<\/div>\n<div class=\"text-center col-md-12 animated\" data-fx=\"hinge\">\n\r\n                <h2 >\r\n                    With any effect you like (hinge)\r\n                <\/h2>\r\n            \n<\/div>\n<\/div>\n<div class=\"col-md-4\">\n<p >Animation can be used on any row or column. Item will appear once it&#8217;s visible to the user. Available animations are listed here http:\/\/daneden.github.io\/animate.css\/ <\/p>\n<\/div>\n<\/div> <\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"open","template":"","meta":{"footnotes":""},"_links":{"self":[{"href":"http:\/\/elysium.wp.themeforest.createit.pl\/creative\/wp-json\/wp\/v2\/pages\/206"}],"collection":[{"href":"http:\/\/elysium.wp.themeforest.createit.pl\/creative\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/elysium.wp.themeforest.createit.pl\/creative\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/elysium.wp.themeforest.createit.pl\/creative\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/elysium.wp.themeforest.createit.pl\/creative\/wp-json\/wp\/v2\/comments?post=206"}],"version-history":[{"count":1,"href":"http:\/\/elysium.wp.themeforest.createit.pl\/creative\/wp-json\/wp\/v2\/pages\/206\/revisions"}],"predecessor-version":[{"id":432,"href":"http:\/\/elysium.wp.themeforest.createit.pl\/creative\/wp-json\/wp\/v2\/pages\/206\/revisions\/432"}],"wp:attachment":[{"href":"http:\/\/elysium.wp.themeforest.createit.pl\/creative\/wp-json\/wp\/v2\/media?parent=206"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}