<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://fonts.googleapis.com/css?family=Montserrat:800,900" rel="stylesheet"> <div class="container-fluid"> <div class="pricing-plan card-group d-flex"> <div class="card set-price p-1 d-none d-lg-none d-lg-block"> <div class="card-header text-center pb-4 item"> <h5 class="pt-3 text-white card-title">Set-priced web design</h5> <span class="h1 text-white">Price</span> <p class="small text-white">No VAT & No Hidden Costs</p> </div> <div class="card-body d-flex flex-column"> <ul class="list-unstyled text-right"> <li>Custom Design</li> <li>Choice of Layout</li> <li>Number of Pages Included</li> <li>Update and add pages (CMS)</li> <li>Mobile Friendly Design</li> <li>Homepage Banner Designs</li> <li>Professional Logo Design</li> <li>Search Engine Friendly</li> <li>Search Engine Submission</li> <li>Website Contact Form</li> <li>Built on Wordpress</li> <li>Search Engine Optimisation</li> <li>Website Visitor Statistics</li> <li>Full Website Ownership</li> <li>Google Maps Integration</li> <li>Social Media Integration</li> <li>Free Domain Name for 1 year</li> <li>Free Website hosting for 1 year</li> <li>UK Email Support</li> <li>Built in the UK, NO outsourcing</li> </ul> </div> </div> <div class="w-100 d-md-none mt-4"></div> <div class="card p-1 starter"> <div class="card-header text-center pb-4 item"> <h5 class="pt-3 text-white card-title">Starter Package</h5> <span class="h1 text-white">£349</span> <p class="small text-white">No VAT & No Hidden Costs</p> </div> <div class="card-body d-flex flex-column"> <ul class="list-unstyled text-center"> <li> <span class="d-lg-none">Custom Design </span> <i class="fa fa-check" data-unicode="f00c"></i> </li> <li> <span class="d-lg-none">Choice of Layout </span> <i class="fa fa-check" data-unicode="f00c"></i> </li> <li>1 - 3 Pages</li> <li> <span class="d-lg-none">Update and add pages (CMS) </span> <i class="fa fa-check" data-unicode="f00c"></i> </li> <li> <span class="d-lg-none">Mobile Friendly Design </span> <i class="fa fa-check" data-unicode="f00c"></i></li> <li> <span class="d-lg-none">Homepage Banner Designs </span> 1</li> <li> <span class="d-lg-none">Professional Logo Design </span> <i class="fa fa-times" data-unicode="f00d"></i></li> <li> <span class="d-lg-none">Search Engine Friendly </span> <i class="fa fa-check" data-unicode="f00c"></i></li> <li> <span class="d-lg-none">Search Engine Submission </span> <i class="fa fa-check" data-unicode="f00c"></i></li> <li> <span class="d-lg-none">Website Contact Form </span> <i class="fa fa-check" data-unicode="f00c"></i></li> <li> <span class="d-lg-none">Built on Wordpress </span> <i class="fa fa-check" data-unicode="f00c"></i></li> <li> <span class="d-lg-none">Search Engine Optimisation </span> <i class="fa fa-check" data-unicode="f00c"></i></li> <li> <span class="d-lg-none">Website Visitor Statistics </span> <i class="fa fa-times" data-unicode="f00d"></i></li> <li> <span class="d-lg-none">Full Website Ownership </span> <i class="fa fa-check" data-unicode="f00c"></i></li> <li> <span class="d-lg-none">Google Maps Integration </span> <i class="fa fa-check" data-unicode="f00c"></i></li> <li> <span class="d-lg-none">Social Media Integration </span> <i class="fa fa-check" data-unicode="f00c"></i></li> <li> <span class="d-lg-none">Free Domain Name for 1 year </span> <i class="fa fa-check" data-unicode="f00c"></i></li> <li> <span class="d-lg-none">Free Website hosting for 1 year </span> <i class="fa fa-check" data-unicode="f00c"></i></li> <li> <span class="d-lg-none">UK Telephone/Email Support </span> <i class="fa fa-check" data-unicode="f00c"></i></li> <li> <span class="d-lg-none">Built in the UK, NO outsourcing </span> <i class="fa fa-check" data-unicode="f00c"></i></li> </ul> <a class="btn btn-lg btn-block btn-dark mt-auto" href="#">Get started</a> </div> </div> <div class="w-100 d-md-none mt-4"></div> <div class="card advanced p-1"> <div class="card-header text-center pb-4 item"> <h5 class="pt-3 text-white card-title">Advanced Package</h5> <span class="h1 text-white">£449</span> <p class="small text-white">No VAT & No Hidden Costs</p> </div> <div class="card-body d-flex flex-column"> <ul class="list-unstyled text-center"> <li> <span class="d-lg-none">Custom Design </span> <i class="fa fa-check" data-unicode="f00c"></i> </li> <li> <span class="d-lg-none">Choice of Layout </span> <i class="fa fa-check" data-unicode="f00c"></i> </li> <li>3 - 6 Pages</li> <li> <span class="d-lg-none">Update and add pages (CMS) </span> <i class="fa fa-check" data-unicode="f00c"></i> </li> <li> <span class="d-lg-none">Mobile Friendly Design </span> <i class="fa fa-check" data-unicode="f00c"></i></li> <li> <span class="d-lg-none">Homepage Banner Designs </span> 1</li> <li> <span class="d-lg-none">Professional Logo Design </span> <i class="fa fa-check" data-unicode="f00c"></i></li> <li> <span class="d-lg-none">Search Engine Friendly </span> <i class="fa fa-check" data-unicode="f00c"></i></li> <li> <span class="d-lg-none">Search Engine Submission </span> <i class="fa fa-check" data-unicode="f00c"></i></li> <li> <span class="d-lg-none">Website Contact Form </span> <i class="fa fa-check" data-unicode="f00c"></i></li> <li> <span class="d-lg-none">Built on Wordpress </span> <i class="fa fa-check" data-unicode="f00c"></i></li> <li> <span class="d-lg-none">Search Engine Optimisation </span> <i class="fa fa-check" data-unicode="f00c"></i></li> <li> <span class="d-lg-none">Website Visitor Statistics </span> <i class="fa fa-check" data-unicode="f00c"></i></li> <li> <span class="d-lg-none">Full Website Ownership </span> <i class="fa fa-check" data-unicode="f00c"></i></li> <li> <span class="d-lg-none">Google Maps Integration </span> <i class="fa fa-check" data-unicode="f00c"></i></li> <li> <span class="d-lg-none">Social Media Integration </span> <i class="fa fa-check" data-unicode="f00c"></i></li> <li> <span class="d-lg-none">Free Domain Name for 1 year </span> <i class="fa fa-check" data-unicode="f00c"></i></li> <li> <span class="d-lg-none">Free Website hosting for 1 year </span> <i class="fa fa-check" data-unicode="f00c"></i></li> <li> <span class="d-lg-none">UK Telephone/Email Support </span> <i class="fa fa-check" data-unicode="f00c"></i></li> <li> <span class="d-lg-none">Built in the UK, NO outsourcing </span> <i class="fa fa-check" data-unicode="f00c"></i></li> </ul> <a class="btn btn-lg btn-block btn-dark mt-auto" href="#">Get started</a> </div> </div> <div class="w-100 d-md-none mt-4"></div> <div class="card business p-1"> <div class="card-header text-center pb-4 item"> <h5 class="pt-3 text-white card-title">Business Package</h5> <span class="h1 text-white">£549</span> <p class="small text-white">No VAT & No Hidden Costs</p> </div> <div class="card-body d-flex flex-column"> <ul class="list-unstyled text-center"> <li> <span class="d-lg-none">Custom Design </span> <i class="fa fa-check" data-unicode="f00c"></i> </li> <li> <span class="d-lg-none">Choice of Layout </span> <i class="fa fa-check" data-unicode="f00c"></i> </li> <li>6 - 9 Pages</li> <li> <span class="d-lg-none">Update and add pages (CMS) </span> <i class="fa fa-check" data-unicode="f00c"></i> </li> <li> <span class="d-lg-none">Mobile Friendly Design </span> <i class="fa fa-check" data-unicode="f00c"></i></li> <li> <span class="d-lg-none">Homepage Banner Designs </span> 1</li> <li> <span class="d-lg-none">Professional Logo Design </span> <i class="fa fa-check" data-unicode="f00c"></i></li> <li> <span class="d-lg-none">Search Engine Friendly </span> <i class="fa fa-check" data-unicode="f00c"></i></li> <li> <span class="d-lg-none">Search Engine Submission </span> <i class="fa fa-check" data-unicode="f00c"></i></li> <li> <span class="d-lg-none">Website Contact Form </span> <i class="fa fa-check" data-unicode="f00c"></i></li> <li> <span class="d-lg-none">Built on Wordpress </span> <i class="fa fa-check" data-unicode="f00c"></i></li> <li> <span class="d-lg-none">Search Engine Optimisation </span> <i class="fa fa-check" data-unicode="f00c"></i></li> <li> <span class="d-lg-none">Website Visitor Statistics </span> <i class="fa fa-check" data-unicode="f00c"></i></li> <li> <span class="d-lg-none">Full Website Ownership </span> <i class="fa fa-check" data-unicode="f00c"></i></li> <li> <span class="d-lg-none">Google Maps Integration </span> <i class="fa fa-check" data-unicode="f00c"></i></li> <li> <span class="d-lg-none">Social Media Integration </span> <i class="fa fa-check" data-unicode="f00c"></i></li> <li> <span class="d-lg-none">Free Domain Name for 1 year </span> <i class="fa fa-check" data-unicode="f00c"></i></li> <li> <span class="d-lg-none">Free Website hosting for 1 year </span> <i class="fa fa-check" data-unicode="f00c"></i></li> <li> <span class="d-lg-none">UK Telephone/Email Support </span> <i class="fa fa-check" data-unicode="f00c"></i></li> <li> <span class="d-lg-none">Built in the UK, NO outsourcing </span> <i class="fa fa-check" data-unicode="f00c"></i></li> </ul> <a class="btn btn-lg btn-block btn-dark mt-auto" href="#">Get started</a> </div> </div> </div> </div>

.pricing-plan li { border-bottom: 1px dotted #ededed; font-size: 16px; } .pricing-plan { font-family: "Montserrat", sans-serif; margin-bottom: 50px; } .pricing-plan .card-header { font-family: "Montserrat", sans-serif; font-weight: 900; text-transform: uppercase; } .card li { padding: 8px 0; } .set-price { background: #225b8b !important; color: #ffffff; } .starter { background: #2da2bc !important; color: #ffffff; } .advanced { background: #f79125 !important; color: #ffffff; } .business { background: #cc2836 !important; color: #ffffff; }