Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

Search the Community

Showing results for tags 'pricing table'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • Forum
    • News and Announcements
    • Getting Started With Squarespace
    • Coding and Customization
    • Commerce
    • Feedback on Your Site
    • Images and Videos
    • Pages and Content
    • SEO and Marketing
    • Site Design and Styles
  • Colorado Designers's Topics
  • Squarespace Forum Club Guidelines's Topics
  • Austin, TX Designers's Club Discussion
  • New York City Designers's Club Discussion
  • Berlin Designers's Club Discussion
  • SEO Experts's Club Discussion
  • Photographers's Club Discussion
  • Graphic Designers's Topics
  • London Designers's Topics
  • Podcasters's Club Discussion
  • Custom Coding Help's Club Discussion
  • Atlanta, GA Designers's Topics
  • Seattle, WA Designers's Topics
  • San Diego, CA Designers's Topics
  • Dallas, TX Designers's Topics
  • Australia Designers's Club Discussion
  • Minnesota Designers's Topics
  • Minnesota Designers's Topics
  • Copywriters's Topics
  • France Designers 🇫🇷's Topics
  • France Designers 🇫🇷's Topics
  • Portland, OR Designers's Topics
  • Canadian Website Designers's Club Discussion
  • Los Angeles Designers & Devs's Club Discussion
  • South African Designers's Club Discussion
  • Brazil Designers's Club Discussion
  • Developers's Club Discussion

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


About Me


Website


Location


Badges

Found 2 results

  1. Site URL: https://www.core4.com.au/classes Hi there, I have custom CSS and HTML for a pricing table on my site and my site padding and text has been reduced. Can i please get assistance with the HTML as i can't seem to fix this issue. Using Squarespace 7.1 HTML: <html> <head> <meta charset="UTF-8"> <title>Pricing Table</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" > <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" > <link rel="stylesheet" href="style.css"> </head> <body> <section> <div class="container-fluid"> <div class="container"> <div class="row"> <div class="col-sm-4"> <div class="card text-center"> <div class="title"> <i class="fa fa-paper-plane" aria-hidden="true"></i> <h2>Basic</h2> </div> <div class="price"> <h4>$25</h4> </div> <div class="option"> <ul> <li> <i class="fa fa-check" aria-hidden="true"></i> 10 GB Space </li> <li> <i class="fa fa-check" aria-hidden="true"></i> 3 Domain Names </li> <li> <i class="fa fa-check" aria-hidden="true"></i> 20 Email Address </li> <li> <i class="fa fa-times" aria-hidden="true"></i> Live Support </li> </ul> </div> <a href="#">Order Now </a> </div> </div> <!-- END Col one --> <div class="col-sm-4"> <div class="card text-center"> <div class="title"> <i class="fa fa-plane" aria-hidden="true"></i> <h2>Standard</h2> </div> <div class="price"> <h4>$50</h4> </div> <div class="option"> <ul> <li> <i class="fa fa-check" aria-hidden="true"></i> 50 GB Space </li> <li> <i class="fa fa-check" aria-hidden="true"></i> 5 Domain Names </li> <li> <i class="fa fa-check" aria-hidden="true"></i> Unlimited Email Address </li> <li> <i class="fa fa-times" aria-hidden="true"></i> Live Support </li> </ul> </div> <a href="#">Order Now </a> </div> </div> <!-- END Col two --> <div class="col-sm-4"> <div class="card text-center"> <div class="title"> <i class="fa fa-rocket" aria-hidden="true"></i> <h2>Premium</h2> </div> <div class="price"> <h4>$100</h4> </div> <div class="option"> <ul> <li> <i class="fa fa-check" aria-hidden="true"></i> Unlimited GB Space </li> <li> <i class="fa fa-check" aria-hidden="true"></i> 30 Domain Names </li> <li> <i class="fa fa-check" aria-hidden="true"></i> Unlimited Email Address </li> <li> <i class="fa fa-check" aria-hidden="true"></i> Live Support </li> </ul> </div> <a href="#">Order Now </a> </div> </div> <!-- END Col three --> </div> </div> </div> </section> </body> </html> I am also having trouble centering the pricing table, can i please get assistance with the CSS to do this? Thanks Kristen
  2. Some free code to create Pricing Table. Table 01. 1. Add 2 Markdown Blocks with 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 & 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> Table 02. 1. Add 2 Markdown Blocks with 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 & Insert 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> Code by Tuan. Table style from Codecanyon Will update many other tables soon.
×
×
  • Create New...