Responsive Pricing Table HTML & CSS Snippets

Responsive Pricing Table HTML & CSS Snippets

by Frontendor UI Library

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.0/css/all.min.css">
<section class="table-pricing py-5">
    <div class="container">
        <div class="row">
            <!-- basic package -->
            <div class="col-lg-4">
                <div class="card mb-5 mb-lg-0">
                    <div class="card-body">
                        <h5 class="card-title text-uppercase text-center text-primary font-weight-bold">Basic Package</h5>
                        <h5 class="card-text text-muted text-uppercase text-center">For Small Businesses</h5>
                        <h6 class="card-price text-center">$599<span class="period">/one-time</span></h6>
                        <hr>
                        <ul class="fa-ul">
                            <li><span class="fa-li"><i class="fas fa-check-circle text-primary"></i></span>5 Website Pages</li>
                            <li><span class="fa-li"><i class="fas fa-check-circle text-primary"></i></span>Mobile Responsive</li>
                            <li><span class="fa-li"><i class="fas fa-check-circle text-primary"></i></span>Google Maps</li>
                            <li><span class="fa-li"><i class="fas fa-check-circle text-primary"></i></span>Mailing List Plugin</li>
                            <li><span class="fa-li"><i class="fas fa-check-circle text-primary"></i></span>Contact Form</li>
                            <li><span class="fa-li"><i class="fas fa-check-circle text-primary"></i></span>Social Media Integration</li>
                            <li><span class="fa-li"><i class="fas fa-check-circle text-primary"></i></span>Simple Quotation Form</li>
                            <li><span class="fa-li"><i class="fas fa-check-circle text-primary"></i></span>Photo Sourcing</li>
                            <li><span class="fa-li"><i class="fas fa-check-circle...

CSS

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap');

body {
  font-family: 'Archivo', sans-serif;
}
.btn-primary, .btn-primary:hover {
  color: #ffffff;
  background-color: #16C169;
  border-color: #16C169;
}
.text-primary {
  color: #16C169!important;
}

.table-pricing .card {
    border: none;
    border-radius: 0;
    transition: all 0.2s;
    background-color: #f2f4f3ff;
}

.table-pricing hr {
    margin: 1.5rem 0;
}

.table-pricing .card-title {
    margin: 0.5rem 0;
    letter-spacing: .1rem;
    font-weight: bold;
}
.table-pricing .card-text {
    margin: 0.5rem 0;
    font-size: 0.9rem;
    letter-spacing: .1rem;
    font-weight: bold;
}

.table-pricing .card-price {
    font-size: 4rem;
    margin: 0;
    font-weight: 800;
}

.table-pricing .card-price .period {
    font-size: 0.8rem;
}

.table-pricing ul li {
    margin-bottom: 1rem;
}

.table-pricing .text-muted {
    opacity: 0.7;
}

/* Hover Effects on Card */

@media (min-width: 992px) {
    .table-pricing .card:hover {
        margin-top: .25rem;
        margin-bottom: .25rem;
    }
    .table-pricing .card:hover .btn {
        opacity: 1;
    }
}