Skip to content

Instantly share code, notes, and snippets.

@arturmkrtchyan

arturmkrtchyan/pricing_table_tiers.html

Last active November 9, 2021 22:00
Show Gist options
  • Save arturmkrtchyan/a623022df7e60dcc4df25addaac66322 to your computer and use it in GitHub Desktop.
Save arturmkrtchyan/a623022df7e60dcc4df25addaac66322 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
pricing_table_tiers.html
<div class="pricing-table">
<div class="pricing-header d-flex flex-wrap align-items-center">
<div class="column--first table-name">
<div class="pricing-title sw-pricing-title--big sw-font-family-default">Features</div>
</div>
<div class="sw-pricing-column sw-font-family-default">
<div class="pricing-title">Free</div>
</div>
<div class="sw-pricing-column sw-font-family-default">
<div class="pricing-title">Starter</div>
</div>
<div class="sw-pricing-column sw-font-family-default">
<div class="pricing-title">Professional</div>
</div>
<div class="sw-pricing-column sw-font-family-default">
<div class="pricing-title">Businesss</div>
</div>
</div>
<div class="features d-flex flex-wrap">
<div class="column--first">
<div class="pricing-title pricing-title--set-1 sw-font-family-default">Number of applications</div>
</div>
<div class="sw-pricing-column sw-font-family-default">
<div class="sw-pricing-description">Unlimited</div>
</div>
<div class="sw-pricing-column sw-font-family-default">
<div class="sw-pricing-description">Unlimited</div>
</div>
<div class="sw-pricing-column sw-font-family-default">
<div class="sw-pricing-description">Unlimited</div>
</div>
<div class="sw-pricing-column sw-font-family-default">
<div class="sw-pricing-description">Unlimited</div>
</div>
</div>
<div class="features d-flex flex-wrap">
<div class="column--first">
<div class="pricing-title pricing-title--set-1 sw-font-family-default">Number of collaborators</div>
</div>
<div class="sw-pricing-column sw-font-family-default">
<div class="sw-pricing-description">1</div>
</div>
<div class="sw-pricing-column sw-font-family-default">
<div class="sw-pricing-description">1</div>
</div>
<div class="sw-pricing-column sw-font-family-default">
<div class="sw-pricing-description">2</div>
</div>
<div class="sw-pricing-column sw-font-family-default">
<div class="sw-pricing-description">5</div>
</div>
</div>
<div class="features d-flex flex-wrap">
<div class="column--first">
<div class="pricing-title pricing-title--set-1 sw-font-family-default">Number of custom domains</div>
</div>
<div class="sw-pricing-column sw-font-family-default">
<div class="sw-pricing-description">1</div>
</div>
<div class="sw-pricing-column sw-font-family-default">
<div class="sw-pricing-description">1</div>
</div>
<div class="sw-pricing-column sw-font-family-default">
<div class="sw-pricing-description">2</div>
</div>
<div class="sw-pricing-column sw-font-family-default">
<div class="sw-pricing-description">3</div>
</div>
</div>
<div class="features d-flex flex-wrap">
<div class="column--first">
<div class="pricing-title pricing-title--set-1 sw-font-family-default">Pre-built Templates</div>
</div>
<div class="sw-pricing-column sw-font-family-default">
<div class="sw-pricing-description"><img class="svg" src="https://softr-assets-eu-prod.s3.eu-central-1.amazonaws.com/applications/8f7af9fb-a550-425d-b327-48195c193a5f/assets/a9660331-e849-42c9-9ee5-ddc7e6404a9b.svg"></div>
</div>
<div class="sw-pricing-column sw-font-family-default">
<div class="sw-pricing-description"><img class="svg" src="https://softr-assets-eu-prod.s3.eu-central-1.amazonaws.com/applications/8f7af9fb-a550-425d-b327-48195c193a5f/assets/a9660331-e849-42c9-9ee5-ddc7e6404a9b.svg"></div>
</div>
<div class="sw-pricing-column sw-font-family-default">
<div class="sw-pricing-description"><img class="svg" src="https://softr-assets-eu-prod.s3.eu-central-1.amazonaws.com/applications/8f7af9fb-a550-425d-b327-48195c193a5f/assets/a9660331-e849-42c9-9ee5-ddc7e6404a9b.svg"></div>
</div>
<div class="sw-pricing-column sw-font-family-default">
<div class="sw-pricing-description"><img class="svg" src="https://softr-assets-eu-prod.s3.eu-central-1.amazonaws.com/applications/8f7af9fb-a550-425d-b327-48195c193a5f/assets/a9660331-e849-42c9-9ee5-ddc7e6404a9b.svg"></div>
</div>
</div>
<div class="features d-flex flex-wrap">
<div class="column--first">
<div class="pricing-title pricing-title--set-1 sw-font-family-default">Embed Softr site</div>
</div>
<div class="sw-pricing-column sw-font-family-default">
<div class="sw-pricing-description">&nbsp;</div>
</div>
<div class="sw-pricing-column sw-font-family-default">
<div class="sw-pricing-description"><img class="svg" src="https://softr-assets-eu-prod.s3.eu-central-1.amazonaws.com/applications/8f7af9fb-a550-425d-b327-48195c193a5f/assets/a9660331-e849-42c9-9ee5-ddc7e6404a9b.svg"></div>
</div>
<div class="sw-pricing-column sw-font-family-default">
<div class="sw-pricing-description"><img class="svg" src="https://softr-assets-eu-prod.s3.eu-central-1.amazonaws.com/applications/8f7af9fb-a550-425d-b327-48195c193a5f/assets/a9660331-e849-42c9-9ee5-ddc7e6404a9b.svg"></div>
</div>
<div class="sw-pricing-column sw-font-family-default">
<div class="sw-pricing-description"><img class="svg" src="https://softr-assets-eu-prod.s3.eu-central-1.amazonaws.com/applications/8f7af9fb-a550-425d-b327-48195c193a5f/assets/a9660331-e849-42c9-9ee5-ddc7e6404a9b.svg"></div>
</div>
</div>
<div class="features d-flex flex-wrap">
<div class="column--first">
<div class="pricing-title pricing-title--set-1 sw-font-family-default">Custom code (HTML/CSS/JavaScript)</div>
</div>
<div class="sw-pricing-column sw-font-family-default">
<div class="sw-pricing-description">&nbsp;</div>
</div>
<div class="sw-pricing-column sw-font-family-default">
<div class="sw-pricing-description"><img class="svg" src="https://softr-assets-eu-prod.s3.eu-central-1.amazonaws.com/applications/8f7af9fb-a550-425d-b327-48195c193a5f/assets/a9660331-e849-42c9-9ee5-ddc7e6404a9b.svg"></div>
</div>
<div class="sw-pricing-column sw-font-family-default">
<div class="sw-pricing-description"><img class="svg" src="https://softr-assets-eu-prod.s3.eu-central-1.amazonaws.com/applications/8f7af9fb-a550-425d-b327-48195c193a5f/assets/a9660331-e849-42c9-9ee5-ddc7e6404a9b.svg"></div>
</div>
<div class="sw-pricing-column sw-font-family-default">
<div class="sw-pricing-description"><img class="svg" src="https://softr-assets-eu-prod.s3.eu-central-1.amazonaws.com/applications/8f7af9fb-a550-425d-b327-48195c193a5f/assets/a9660331-e849-42c9-9ee5-ddc7e6404a9b.svg"></div>
</div>
</div>
<div class="features d-flex flex-wrap">
<div class="column--first">
<div class="pricing-title pricing-title--set-1 sw-font-family-default">Transfer Applications</div>
</div>
<div class="sw-pricing-column sw-font-family-default">
<div class="sw-pricing-description">&nbsp;</div>
</div>
<div class="sw-pricing-column sw-font-family-default">
<div class="sw-pricing-description">&nbsp;</div>
</div>
<div class="sw-pricing-column sw-font-family-default">
<div class="sw-pricing-description"><img class="svg" src="https://softr-assets-eu-prod.s3.eu-central-1.amazonaws.com/applications/8f7af9fb-a550-425d-b327-48195c193a5f/assets/a9660331-e849-42c9-9ee5-ddc7e6404a9b.svg"></div>
</div>
<div class="sw-pricing-column sw-font-family-default">
<div class="sw-pricing-description"><img class="svg" src="https://softr-assets-eu-prod.s3.eu-central-1.amazonaws.com/applications/8f7af9fb-a550-425d-b327-48195c193a5f/assets/a9660331-e849-42c9-9ee5-ddc7e6404a9b.svg"></div>
</div>
</div>
</div>
Raw
pricing_table_tiers_css.html
<style>
#pricing-tiers .sw-pricing-column{
max-width: 18%;
flex: 0 0 18%;
text-align: center;
padding: 16px 15px;
box-sizing: border-box;
}
#pricing-tiers .pricing-table .features:not(.buttons-row):hover{
background-color: #f3f4f8;
}
#pricing-tiers .pricing-table .features{
align-items: baseline;
}
#pricing-tiers .pricing-table {
border-top: 1px solid #f3f4f8;
padding: 30px 0;
}
#pricing-tiers .pricing-header {
margin-bottom: .83333333vw;
}
#pricing-tiers .table-name{
font-weight: 500;
}
#pricing-tiers .column--first{
max-width: 28%;
flex: 0 0 28%;
text-align: left;
color: #1C2B41;
font-size: 18px;
padding: 10px 12px;
}
#pricing-tiers .pricing-tier{
font-size: 18px;
}
#pricing-tiers .pricing-title{
color: #1C2B41;
position: relative;
font-size: 1.16666667vw;
line-height: 1.66666667vw;
font-weight: 500;
}
#pricing-tiers .sw-pricing-title--big{
font-size: 1.5vw;
line-height: 2vw;
font-weight: 600;
}
#pricing-tiers .sw-pricing-description{
color: #9b99af;
position: relative;
cursor: default;
font-size: 1.16666667vw;
line-height: 1.66666667vw;
}
#pricing-tiers .sw-pricing-description img.svg {
width: 1.46666667vw;
height: 1.46666667vw;
}
#pricing-tiers .sw-pricing-description svg path{
fill: #FEB30B;
}
#pricing-tiers .sw-pricing-description svg circle{
stroke: #FEB30B;
}
#pricing-tiers .sw-pricing-description .btn-1--blue{
display: inline-block;
text-decoration: none;
width: 100%;
background: #FEB30B;
color: #1C2B41;
font-size: 1.16666667vw;
line-height: 3.16666667vw;
border-radius: .33333333vw;
margin: 2.91666667vw 0 0;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment