Price Comparison Table - Custom code

Submit By webmaster 2 years ago in html category
Tags: pricing-tableshtml
Preview HTML CSS JavaScript Resources
<section class="price-wrap"> <div class="price-column"> <div class="price-header"> <div class="price"> <div class="dollar-sign">$</div> 5 <div class="per-month">/mo</div> </div> <div class="plan-name">Basic</div> </div> <div class="divider"></div> <div class="feature"> <i class="fas fa-check-square"></i> Feature 1 </div> <div class="feature"> <i class="fas fa-check-square"></i> Feature 2 </div> <div class="feature inactive"> <i class="fas fa-times-circle"></i> Feature 3 </div> <div class="feature inactive"> <i class="fas fa-times-circle"></i> Feature 4 </div> <div class="feature inactive"> <i class="fas fa-times-circle"></i> Feature 5 </div> <div class="feature inactive"> <i class="fas fa-times-circle"></i> Feature 6 </div> <button class="cta">Start Today</button> </div> <div class="price-column popular"> <div class="most-popular">Most Popular</div> <div class="price-header"> <div class="price"> <div class="dollar-sign">$</div> 10 <div class="per-month">/mo</div> </div> <div class="plan-name">Professional</div> </div> <div class="divider"></div> <div class="feature"> <i class="fas fa-check-square"></i> Feature 1 </div> <div class="feature"> <i class="fas fa-check-square"></i> Feature 2 </div> <div class="feature"> <i class="fas fa-check-square"></i> Feature 3 </div> <div class="feature"> <i class="fas fa-check-square"></i> Feature 4 </div> <div class="feature inactive"> <i class="fas fa-times-circle"></i> Feature 5 </div> <div class="feature inactive"> <i class="fas fa-times-circle"></i> Feature 6 </div> <button class="cta">Start Today</button> </div> <div class="price-column"> <div class="price-header"> <div class="price"> <div class="dollar-sign">$</div> 25 <div class="per-month">/mo</div> </div> <div class="plan-name">Enterprise</div> </div> <div class="divider"></div> <div class="feature"> <i class="fas fa-check-square"></i> Feature 1 </div> <div class="feature"> <i class="fas fa-check-square"></i> Feature 2 </div> <div class="feature"> <i class="fas fa-check-square"></i> Feature 3 </div> <div class="feature"> <i class="fas fa-check-square"></i> Feature 4 </div> <div class="feature"> <i class="fas fa-check-square"></i> Feature 5 </div> <div class="feature"> <i class="fas fa-check-square"></i> Feature 6 </div> <button class="cta">Start Today</button> </div> </section>
@import url('https://fonts.googleapis.com/css2?family=Sen:wght@400;700;800&display=swap'); body { font-family: 'Sen', sans-serif; background: #bbdefb; } *, *:before, *:after { box-sizing: border-box; } body { margin: 0; display: flex; justify-content: center; align-items: center; } .price-wrap { display: flex; justify-content: center; align-items: stretch; width: 100%; margin: 40px 20px 20px; } .price-column { background: #fff; border-radius: 8px; box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1); padding: 2rem; flex-grow: 1; flex-basis: 0; max-width: 280px; } .price-column.popular { position: relative; background-color: #000; box-shadow: 0 7px 30px rgba(52, 13, 135, 0.3); color: #fff; margin: -25px 0; padding: 62px 45px; } .price-column:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } .price-column:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; } .price-header { display: flex; flex-direction: column; align-items: center; font-weight: bold; } .price { font-size: 3.5rem; display: flex; } .dollar-sign { font-size: 1.5rem; margin-top: .5rem; margin-right: .25rem; } .per-month { font-size: .75rem; align-self: flex-end; margin-bottom: 1.1rem; text-transform: uppercase; } .plan-name { text-transform: uppercase; font-size: .9rem; margin-top: 1rem; margin-bottom: 0; } .divider { height: 1px; width: 100%; background-color: rgba(0, 0, 0, .2); margin-top: 2rem; margin-bottom: 2rem; } .price-column.popular .divider { background-color: rgba(255, 255, 255, .2); } .feature { display: flex; align-items: center; margin: .5rem; } .feature i{ margin-right: 10px; } .feature img { height: 1.1em; width: 1.1em; margin-right: .5rem; } .feature.inactive { color: #999; text-decoration-line: line-through; } .most-popular { position: absolute; top: 20px; text-align: center; text-transform: uppercase; font-weight: bold; width:100%; left: 0; } .cta { border: none; background-color: #000; color: white; width: 100%; padding: .75rem 1rem; cursor: pointer; font-weight: bold; border-radius: 4px; margin-top: 3rem; transition: 100ms; transform: scale(1); } .price-column.popular .cta { background-color: white; color: #000; } .cta:hover, .cta:focus { transform: scale(1.1); }
FontAwesome = 5.15.4

Download Price Comparison Table - Custom code snippet code.

This HTML, CSS, JavaScript and Bootstrap snippet is free (open-source) hence you can use it in your project. You can modify the above editor code and see the live update. You can also download the modify code. Feel free to play with Price Comparison Table - Custom code snippet code. If you like it then don't forget to share this code with your friends.

Free code snippet playground

Let's share the example by using HTML, CSS, JavaScript and Bootstrap.

Add New Snippet