<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>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.css" rel="stylesheet" type="text/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>
<div class="container">
<section class="d-flex bg-white" id="pricing">
<div class="container d-flex justify-content-center">
<div class="row align-items-center justify-content-center">
<div class="col-12 align-self-center">
<div class="row">
<div class="col-12 col-lg-7 mx-auto text-center">
<h2 class="display-4 font-weight-normal">Pricing</h2>
<p class="text-muted lead mb-5">This snipped does not use any custom styling or scripting but does make use of Font-Awesome free.</p>
</div>
</div>
<div class="row mb-3">
<div class="col-12 col-lg-4">
<div class="card border-secondary mb-5">
<span class="h6 w-60 mx-auto px-4 py-2 rounded-bottom bg-primary text-white shadow-sm">Basic</span>
<div class="card-body">
<div class="row">
<div class="col text-center align-self-center">
<h1 class="display-4 font-weight-normal text-primary text-center mb-3"><span class="font-weight-light h6">$</span>29</><span class="h6 text-muted ml-2">/ per month</span></h1>
</div>
</div>
<p class="card-text lead">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item"><i class="fa fa-file-contract mr-3"></i>One Site</li>
<li class="list-group-item"><i class="fa fa-cloud mr-3"></i>1 GB Storage</li>
