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

Recommended Posts

I am trying to make a product comparison block on my website much like the one that you'll see on the squarespace website. I attached a screenshot of what I am trying to accomplish on my squarespace website. I'm not at all sure how to even start with something like this. Is there any easy way of putting something like this together?

 

squarespace example.png

Share this post


Link to post

If you don't need "pay monthly, pay anually" tab, you can use some code from Codepen.io

Demo: https://codepen.io/adrianjacob/pen/wMGpeX

Add Code Block > Paste this code

<div class="comparison">

  <table>
    <thead>
      <tr>
        <th class="tl tl2"></th>
        <th class="qbse">
          Self-Employed & Freelance
        </th>
        <th colspan="3" class="qbo">
          Small businesses that need accounting, invoicing or payroll
        </th>
      </tr>
      <tr>
        <th class="tl"></th>
        <th class="compare-heading">
          Self-Employed
        </th>
        <th class="compare-heading">
          Simple Start
        </th>
        <th class="compare-heading">
          Essentials
        </th>
        <th class="compare-heading">
          Plus
        </th>
      </tr>
      <tr>
        <th></th>
        <th class="price-info">
          <div class="price-was">Was £6.00</div>
          <div class="price-now"><span>£4<span class="price-small">.20</span></span> /month</div>
          <div><a href="#" class="price-buy">Buy <span class="hide-mobile">Now</span></a></div>
          <div class="price-try"><span class="hide-mobile">or </span><a href="#">try <span class="hide-mobile">it free</span></a></div>
        </th>
        <th class="price-info">
          <div class="price-was">Was £7.00</div>
          <div class="price-now"><span>£5<span class="price-small">.60</span></span> /month</div>
          <div><a href="#" class="price-buy">Buy <span class="hide-mobile">Now</span></a></div>
          <div class="price-try"><span class="hide-mobile">or </span><a href="#">try <span class="hide-mobile">it free</span></a></div>
        </th>
        <th class="price-info">
          <div class="price-was">Was £15.00</div>
          <div class="price-now"><span>£10<span class="price-small">.50</span></span> /month</div>
          <div><a href="#" class="price-buy">Buy <span class="hide-mobile">Now</span></a></div>
          <div class="price-try"><span class="hide-mobile">or </span><a href="#">try <span class="hide-mobile">it free</span></a></div>
        </th>
        <th class="price-info">
          <div class="price-was">Was £25.00</div>
          <div class="price-now"><span>£15<span class="price-small">.00</span></span> /month</div>
          <div><a href="#" class="price-buy">Buy <span class="hide-mobile">Now</span></a></div>
          <div class="price-try"><span class="hide-mobile">or </span><a href="#">try <span class="hide-mobile">it free</span></a></div>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td></td>
        <td colspan="4">Seperate business from personal spending</td>
      </tr>
      <tr class="compare-row">
        <td>Seperate business/personal</td>
        <td><span class="tickblue"></span></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td colspan="4">Estimate tax payments</td>
      </tr>
      <tr>
        <td>Estimate tax payments</td>
        <td><span class="tickblue"></span></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td colspan="4">Track deductible mileage</td>
      </tr>
      <tr class="compare-row">
        <td>Track deductible mileage</td>
        <td><span class="tickblue"></span></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td colspan="4">Download online banking</td>
      </tr>
      <tr>
        <td>Download online banking</td>
        <td><span class="tickblue"></span></td>
        <td><span class="tickgreen"></span></td>
        <td><span class="tickgreen"></span></td>
        <td><span class="tickgreen"></span></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td colspan="4">Works on PC, Mac & mobile</td>
      </tr>
      <tr class="compare-row">
        <td>Multi-device</td>
        <td><span class="tickblue"></span></td>
        <td><span class="tickgreen"></span></td>
        <td><span class="tickgreen"></span></td>
        <td><span class="tickgreen"></span></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td colspan="4">Create invoices & estimates</td>
      </tr>
      <tr>
        <td>Create invoices & estimates</td>
        <td></td>
        <td><span class="tickgreen"></span></td>
        <td><span class="tickgreen"></span></td>
        <td><span class="tickgreen"></span></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td colspan="4">Manage VAT</td>
      </tr>
      <tr class="compare-row">
        <td>Manage VAT</td>
        <td></td>
        <td><span class="tickgreen"></span></td>
        <td><span class="tickgreen"></span></td>
        <td><span class="tickgreen"></span></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td colspan="4">Run payroll</td>
      </tr>
      <tr>
        <td>Run payroll</td>
        <td></td>
        <td><span class="tickgreen"></span></td>
        <td><span class="tickgreen"></span></td>
        <td><span class="tickgreen"></span></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td colspan="4">Number of users</td>
      </tr>
      <tr class="compare-row">
        <td>Number of users</td>
        <td class="tickblue">1 user</td>
        <td class="tickgreen">1 user</td>
        <td class="tickgreen">3 users</td>
        <td class="tickgreen">5 users</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td colspan="4">Manage bills & payments</td>
      </tr>
      <tr>
        <td>Manage bills & payments</td>
        <td></td>
        <td></td>
        <td><span class="tickgreen"></span></td>
        <td><span class="tickgreen"></span></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td colspan="4">Handle multiple currencies</td>
      </tr>
      <tr class="compare-row">
        <td>Handle multiple currencies</td>
        <td></td>
        <td></td>
        <td><span class="tickgreen"></span></td>
        <td><span class="tickgreen"></span></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td colspan="4">Create budgets</td>
      </tr>
      <tr>
        <td>Create budgets</td>
        <td></td>
        <td></td>
        <td></td>
        <td><span class="tickgreen"></span></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td colspan="4">Track employee time</td>
      </tr>
      <tr class="compare-row">
        <td>Track employee time</td>
        <td></td>
        <td></td>
        <td></td>
        <td><span class="tickgreen"></span></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td colspan="4">Stock control</td>
      </tr>
      <tr>
        <td>Stock control</td>
        <td></td>
        <td></td>
        <td></td>
        <td><span class="tickgreen"></span></td>
      </tr>
    </tbody>
  </table>

</div>
<style>
  .comparison {
  max-width:940px;
  margin:0 auto;
  font:13px/1.4 "Helvetica Neue",Helvetica,Arial,sans-serif;
  text-align:center;
  padding:10px;
}

.comparison table {
  width:100%;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
  border-bottom:1px solid #CCC;
}

.comparison td, .comparison th {
  border-right:1px solid #CCC;
  empty-cells: show;
  padding:10px;
}

.compare-heading {
  font-size:18px;
  font-weight:bold !important;
  border-bottom:0 !important;
  padding-top:10px !important;
}

.comparison tbody tr:nth-child(odd) {
  display:none;
}

.comparison .compare-row {
  background:#F5F5F5;
}

.comparison .tickblue {
  color:#0078C1;
}

.comparison .tickgreen {
  color:#009E2C;
}

.comparison th {
  font-weight:normal;
  padding:0;
  border-bottom:1px solid #CCC;
}

.comparison tr td:first-child {
  text-align:left;
}
  
.comparison .qbse, .comparison .qbo, .comparison .tl {
  color:#FFF;
  padding:10px;
  font-size:13px;
  border-right:1px solid #CCC;
  border-bottom:0;
}

.comparison .tl2 {
  border-right:0;
}

.comparison .qbse {
  background:#0078C1;
  border-top-left-radius: 3px;
  border-left:0px;
}

.comparison .qbo {
  background:#009E2C;
  border-top-right-radius: 3px;
  border-right:0px;
}

.comparison .price-info {
  padding:5px 15px 15px 15px;
}

.comparison .price-was {
  color:#999;
  text-decoration: line-through;
}

.comparison .price-now, .comparison .price-now span {
  color:#ff5406;
}

.comparison .price-now span {
  font-size:32px;
}

.comparison .price-small {
    font-size: 18px !important;
    position: relative;
    top: -11px;
    left: 2px;
}

.comparison .price-buy {
  background:#ff5406;
  padding:10px 20px;
  font-size:12px;
  display:inline-block;
  color:#FFF;
  text-decoration:none;
  border-radius:3px;
  text-transform:uppercase;
  margin:5px 0 10px 0;
}

.comparison .price-try {
  font-size:12px;
}

.comparison .price-try a {
  color:#202020;
}

@media (max-width: 767px) {
  .comparison td:first-child, .comparison th:first-child {
    display: none;
  }
  .comparison tbody tr:nth-child(odd) {
    display:table-row;
    background:#F7F7F7;
  }
  .comparison .row {
    background:#FFF;
  }
  .comparison td, .comparison th {
    border:1px solid #CCC;
  }
  .price-info {
  border-top:0 !important;
  
}
  
}

@media (max-width: 639px) {
  .comparison .price-buy {
    padding:5px 10px;
  }
  .comparison td, .comparison th {
    padding:10px 5px;
  }
  .comparison .hide-mobile {
    display:none;
  }
  .comparison .price-now span {
  font-size:16px;
}

.comparison .price-small {
    font-size: 16px !important;
    top: 0;
    left: 0;
}
  .comparison .qbse, .comparison .qbo {
    font-size:12px;
    padding:10px 5px;
  }
  .comparison .price-buy {
    margin-top:10px;
  }
  .compare-heading {
  font-size:13px;
}
}
</style>

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Armadillo - Free portfolio template

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...