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

Product Comparison


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

Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment

Create an account or sign in to comment

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


×
×
  • Create New...