<div class="container-fluid mt-5 mb-5">
<table class="table bg-white table-bordered">
<tbody>
<tr>
<th scope="column"><span class="font-weight-bold">Pick a Plan</span></th>
<td>
<div class="d-flex flex-row justify-content-between align-items-baseline mt-0"> <span class="font-weight-bold">Starter</span>
<div class="price d-flex flex-row align-items-center"> <span class="margins">$</span> <span class="amount">109</span> <span class="margins">/month</span> </div>
</div> <button class="btn btn-outline-primary btn-block outline-button">Get started</button>
</td>
<td>
<div class="d-flex flex-row justify-content-between align-items-baseline mt-0"> <span class="font-weight-bold">Advanced</span>
<div class="price d-flex flex-row align-items-center"> <span class="margins">$</span> <span class="amount">125</span> <span class="margins">/month</span> </div>
</div> <button class="btn btn-primary btn-block normal-button">Get started</button>
</td>
<td>
<div class="d-flex flex-row justify-content-between align-items-baseline mt-0"> <span class="font-weight-bold">Ultimate</span>
<div class="price d-flex flex-row align-items-center"> <span class="margins">$</span> <span class="amount">349</span> <span class="margins">/month</span> </div>
</div> <button class="btn btn-outline-primary btn-block outline-button">Get started</button>
</td>
</tr>
<tr>
<th scope="row"> <span class="d-block">Retail Point of sale</span> <span class="font-weight-light">Streamline your everday</span> </th>
<td>
<div class="text-center check"> <i class="fa fa-check"></i> </div>
</td>
<td>
<div class="text-center check"> <i class="fa fa-check"></i> </div>
</td>
<td>
<div class="text-center check"> <i class="fa fa-check"></i> </div>
</td>
</tr>
<tr>
<th scope="row"> <span class="d-block">Payments</span> <span class="font-weight-light">Store on credit card rates</span> </th>
<td>
<div class="text-center check"> <i class="fa fa-check"></i> </div>
</td>
<td>
<div class="text-center check"> <i class="fa fa-check"></i> </div>
</td>
<td>
<div class="text-center check"> <i class="fa fa-check"></i> </div>
</td>
</tr>
<tr>
<th scope="row"> <span class="d-block">Accounting</span> <span class="font-weight-light">Connect to quickbook online</span> </th>
<td>
<div class="text-center check"> <i class="fa fa-check"></i> </div>
</td>
<td>
<div class="text-center check"> <i class="fa fa-check"></i> </div>
</td>
<td>
<div class="text-center check"> <i class="fa fa-check"></i> </div>
</td>
</tr>
<tr>
<th scope="row"> <span class="d-block">Analytics</span> <span class="font-weight-light">Get insight to grow your business</span> </th>
<td>
<div class="text-center check"> <i class="fa fa-check"></i> </div>
</td>
<td>
<div class="text-center check"> <i class="fa fa-check"></i> </div>
</td>
<td>
<div class="text-center check"> <i class="fa fa-check"></i> </div>
</td>
</tr>
<tr>
<th scope="row"> <span class="d-block">Ecommerce Website</span> <span class="font-weight-light">Create beautiful websites</span> </th>
<td> </td>
<td>
<div class="text-center check"> <i class="fa fa-check"></i> </div>
</td>
<td>
<div class="text-center check"> <i class="fa fa-check"></i> </div>
</td>
</tr>
<tr>
<th scope="row"> <span class="d-block">Loyalty</span> <span class="font-weight-light">Get your customers to come back</span> </th>
<td> </td>
<td>
<div class="text-center check"> <i class="fa fa-check"></i> </div>
</td>
<td>
<div class="text-center check"> <i class="fa fa-check"></i> </div>
</td>
</tr>
<tr>
<th scope="row"> <span class="d-block">Dedicated marketing manager</span> <span class="font-weight-light">Get help marketing your business</span> </th>
<td> </td>
<td> </td>
<td>
<div class="text-center check"> <i class="fa fa-check"></i> </div>
</td>
</tr>
</tbody>
</table>
</div>
@import url('https://fonts.googleapis.com/css2?family=Montserrat:
[email protected]&display=swap');
body {
font-family: 'Montserrat', sans-serif;
background-color: #eee
}
.amount {
font-size: 40px;
font-weight: 700
}
.margins {
margin-top: 16px
}
.outline-button {
background-color: transparent !important;
border-color: #8E24AA !important;
color: #8E24AA
}
.outline-button:hover,
.outline-button:active,
.outline-button:visited,
.outline-button:focus {
background-color: #8E24AA !important;
border-color: #8E24AA !important;
color: #fff;
outline: 0 !important;
box-shadow: none !important
}
.normal-button {
background-color: #8E24AA !important;
border-color: #8E24AA !important;
color: #fff
}
.normal-button:hover,
.normal-button:active,
.normal-button:visited,
.normal-button:focus {
background-color: #760a92 !important;
border-color: #760a92 !important;
outline: 0 !important;
box-shadow: none !important;
color: #fff
}
.check i {
margin-top: 10px;
margin-bottom: 10px;
width: 38px;
height: 38px;
border-radius: 50%;
background-color: #b9f6ca82;
line-height: 38px;
font-size: 17px;
color: #00800085;
font-weight: 300
}