Squarespace Templates: Pricing Table

Use this tool to find block ID.

Ask me a question if you need help.

Pricing Table 01. Gradient

Demo

How to

1. Add Markdown Block for 3 boxes

3 boxes use same syntax. Replace Standard with Pro, Agency

#### Standard
$19

Per Month

* 24/7 support
* 50GB banwidth
* 10 Themes

[Get Started][1]

[1]: https://beaverhero.com

2. Add Code Block & Paste these code

<style>
/* space between boxes */
.markdown-block {
    margin: 15px;
    padding-bottom: 50px !important;
    padding-top: 30px !important;
}
/* Box 2 color */
div#block-5eacd1ae534ec14df09aac78+.row>.col:nth-child(2) .markdown-block {
    background: #f4f5f6;
    border-color: #f4f5f5;
}
/* Box 3 */
div#block-5eacd1ae534ec14df09aac78+.row>.col:last-child .markdown-block {
    background: #008aff;
    background: -webkit-linear-gradient(135deg, #6B02FF 0%, #985BEF 100%);
    background: -o-linear-gradient(bottom right, #6B02FF, #985BEF);
    background: -moz-linear-gradient(bottom right, #008aff, #1ad2fd);
    background: linear-gradient(135deg, #6B02FF 0%, #985BEF 100%);
}
div#block-5eacd1ae534ec14df09aac78+.row>.col:last-child * {
    color: white;
}
div#block-5eacd1ae534ec14df09aac78+.row>.col:last-child a {
    border: 2px solid #fff;
}
/* Set border - corner */
.markdown-block {
    border: 2px solid #f8f8f8;
    border-radius: 8px;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -webkit-backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
}
/* set zoom on hover */
.markdown-block:hover {
    transform: scale(1.03,1.03);
    -ms-transform: scale(1.03,1.03);
    -webkit-transform: scale(1.03,1.03);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
}
/* Center all text */
.markdown-block * {
    text-align: center;
}
/* remove list dots */
.markdown-block ul {
    list-style: none;
    padding-left: 0;
}
/* remove text padding */
.markdown-block p {
    margin-top: 0;
    margin-bottom: 0;
}
/* Price */
.markdown-block h4 + p {
    font-weight: 500;
    font-size: 3em;
    letter-spacing: 1px;
}
/* Space between title-price */
.markdown-block h4 {
    margin-bottom: 1px;
}
/* Links */
.markdown-block a {
    background: #008aff;
    background: -webkit-linear-gradient(135deg, #6B02FF 0%, #985BEF 100%);
    background: -o-linear-gradient(bottom right, #6B02FF, #985BEF);
    background: -moz-linear-gradient(bottom right, #008aff, #1ad2fd);
    background: linear-gradient(135deg, #6B02FF 0%, #985BEF 100%);
    color: #fff;
    border-radius: 5px;
    padding: 10px 30px;
    margin-top: 20px;
    display: inline-block;
    border: 2px solid transparent;
}
</style>

div#block-5eacd1ae534ec14df09aac78 is the Text Block ID above the 3 boxes

Pricing Table 02. Simple Dark Columns

This style I purchased from Codecanyon

How to

1. Add 2 Markdown Blocks

& use syntax

#### Standard
$19

Per Month

* Free custom domain
* SS Security
* Unlimited Storage
* SEO Features
* Premium Templates
* Contributors
* Premium Extensions

[Sign Up][1]

[1]: https://beaverhero.com

2. Add Code Block

& use code

<style>
/* title */
.markdown-block h4 {
    background: #0098D9;
    color: #fff;
    padding-bottom: 5px;
    font-family: monospace;
    margin-bottom: 0;
}
/* price */
.markdown-block p:nth-child(-n+3) {
    background: #00A8EE;
    color: white;
    font-family: monospace;
}
  .markdown-block h4+p {
    font-size: 2em;
}
/* list */
.markdown-block ul {
    list-style: none;
    padding-left: 0;
    background: #354153;
    margin-top: 0;
    margin-bottom: 0;
    border-top: 1px solid #293341;
    color: #A0ABBF;
}
.markdown-block ul li {
    border-bottom: 1px solid #293341;
    border-top: 1px solid #424F64;
    padding: 5px;
}
/* buttons */
.markdown-block p:last-child {
    background: #354153;
    border-top: 1px solid #424F64;
    padding: 20px;
}
.markdown-block a {
    background: #0091CE;
    color: #fff;
    border-radius: 3px;
    padding: 10px 30px;
    display: inline-block;
}
/* buttons hover */
.markdown-block a:hover {
    background: #0082B9;
}
/* Center all text */
.markdown-block * {
    text-align: center;
}
/* remove text padding */
.markdown-block p {
    margin-top: 0;
    margin-bottom: 0;
}
</style>

Pricing Table 03. Simple Hover

How to

1. Add 2 Markdown Blocks

and use this syntax

#### Standard
$19

Per Month

* Free custom domain
* SS Security
* Unlimited Storage
* SEO Features
* Premium Templates
* Contributors
* Premium Extensions

[Sign Up][1]

[1]: https://beaverhero.com

2. Add Code Block

and insert this code

<style>
  .markdown-block {
    background: #F2F5F7;
    margin-left: 17px;
    margin-right: 17px;
    transition: all 0.25s;
}
  .markdown-block:hover {
  	transform: scale(1.04);
  }
/* title */
.markdown-block h4 {
    font-family: monospace;
    margin-bottom: 5px;
  	padding-top: 20px;
}
/* price */
.markdown-block p:nth-child(-n+4) {
    font-family: monospace;
}
  .markdown-block h4+p {
    font-size: 2em;
}
/* list */
.markdown-block ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}
.markdown-block ul li {
    color: #626262;
    padding: 5px;
}
  /* Line between price - list */
  .markdown-block ul li:first-child:before, .markdown-block ul li:last-child:after {
    content: "";
    background: rgba(255,255,255,0.75);
    height: 1px;
    width: 50%;
    display: block;
    margin: 0 auto;
    margin-bottom: 20px;
}
  .markdown-block ul li:last-child:after {
    margin-top: 20px;
    margin-bottom: 0;
}
/* buttons */
.markdown-block p:last-child {
    padding: 20px;
}
.markdown-block a {
    background: #0091CE;
    color: #fff;
    border-radius: 3px;
    padding: 10px 30px;
    display: inline-block;
}
/* Center all text */
.markdown-block * {
    text-align: center;
}
/* remove text padding */
.markdown-block p {
    margin-top: 0;
    margin-bottom: 0;
}
</style>

Pricing Table 04. Different Columns Colors

1. Add 2 Markdown Blocks

and use syntax

#### Standard
$19

Per Month

* Free custom domain
* SS Security
* Unlimited Storage
* SEO Features
* Premium Templates
* Contributors
* Premium Extensions

[Sign Up][1]

[1]: https://beaverhero.com

and

#### Pro
$59

Per Month

* Free custom domain
* SS Security
* Unlimited Storage
* SEO Features
* Premium Templates
* Contributors
* Premium Extensions

[Sign Up][1]

[1]: https://beaverhero.com

2. Add Code Block

<style>
/* title */
.markdown-block h4 {
    background: #0098D9;
    color: #fff;
    padding-bottom: 5px;
    font-family: monospace;
    margin-bottom: 0;
}
/* price */
.markdown-block p:nth-child(-n+3) {
    background: #00A8EE;
    color: white;
    font-family: monospace;
}
  .markdown-block h4+p {
    font-size: 2em;
}
/* list */
.markdown-block ul {
    list-style: none;
    padding-left: 0;
    background: #354153;
    margin-top: 0;
    margin-bottom: 0;
    border-top: 1px solid #293341;
    color: #A0ABBF;
}
.markdown-block ul li {
    border-bottom: 1px solid #293341;
    border-top: 1px solid #424F64;
    padding: 5px;
}
/* buttons */
.markdown-block p:last-child {
    background: #354153;
    border-top: 1px solid #424F64;
    padding: 20px;
}
.markdown-block a {
    background: #0091CE;
    color: #fff;
    border-radius: 3px;
    padding: 10px 30px;
    display: inline-block;
}
/* buttons hover */
.markdown-block a:hover {
    background: #0082B9;
}
/* Center all text */
.markdown-block * {
    text-align: center;
}
/* remove text padding */
.markdown-block p {
    margin-top: 0;
    margin-bottom: 0;
}
  /* space between 2 markdowns */
  .markdown-block {
    padding: 0 !important;
    margin-left: -1px;
}
  /* Box 2 title */
  .span-11>.row>.col:nth-child(2) .markdown-block h4 {
    background: #0082B9;
}
  /* box 2 price */
  .span-11>.row>.col:nth-child(2) .markdown-block>div>p:nth-child(-n+3) {
    background: #0091CE;
}
  /* box 2 button */
  .span-11>.row>.col:nth-child(2) .markdown-block p a {
  	background: #00A8EE;
  }
  .span-11>.row>.col:nth-child(2) .markdown-block p a:hover {
  	background: #0098D9;
  }
  /* border between 2 boxes */
  .markdown-block ul, .markdown-block p:last-child {
    margin-left: -1px;
    border-width: 0 1px;
    border-left: 1px solid #293341;
}
</style>

 

Share this post:

2 thoughts on “Squarespace Templates: Pricing Table”

  1. I tried using the Gradient style, but whenever I inject it all the markdown boxes are the same color as the first. If I delete “div#block-5eacd1ae534ec14df09aac78+.row>.col:nth-child(2)” then all the boxes are the same #f4f5f6 and so on if I repeat. What am I doing wrong? I changed the block ID to match my text box and I only have the text, code, and the 3 markdown boxes on my page so the grid shouldn’t be affected.

    Reply

Leave a Comment