Prico - Responsive Pricing Tables

Thank you for purchasing the product. We hope you like the product and help you develope your project and achieve your ambitions.

Do not hesitate to contact us if you encounter any problem with the product.

prico Folder

assets

Source Code for preview index

index.html

preview HTML page

pricing_tables

Folder that contains all Pricing Tables Styles

prico/pricing_tables Folder

You will find 15 folder from pricoShape1 to pricoShape15
where each folder contains: index.html, style.css

index.html Structure

HTML body is arranged in sections, each section contains a pricing table layout

CSS Structure

You can completely change the color of the pricing tables only by changing the --prico-color, which is at the beginning of the style.css file
You can also change times duration of animation for pricing tables by changing --prico-transition

:root {
    --prico-color: #ff9800;
    --prico-transition: 0.5s ease-in-out;
}

JS Structure

app.js

[main js file used in the preview HTML page]

Customization


Google Fonts

go to google fonts and pick the fonts you want and add it

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800&display=swap" rel="stylesheet">



How to use

go to prico/pricing_tables and choose the pricing table shape you want (for example pricoShape1).
Open the index.html page, you will find the pricing table and plans.


if you want to add a ribbon then add prico-ribbon1 or prico-ribbon2 (the number is from 1 to 5) to the class of the pricing layout


if you want to add an animation then add prico-animation1 or prico-animation2 to the class of the pricing layout





Ribbon Position

We Placed Ribbon on the second plan by default you can put it on another plan if you want
+
You can add another ribbon on another plan so that you will have two ribbons