<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://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <!-- Top header --> <div class="w-50 px-3 py-3 pt-md-4 pb-md-4 mx-auto text-center"> <h1 class="display-4 font-weight-bold">Pricing</h1> <p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam urna massa, ullamcorper quis libero non, semper convallis nisl. Nulla facilisi. Cras id tortor ex. Curabitur eget lectus fermentum, convallis massa pulvinar, mattis ex.</p> </div> <!-- Cards container --> <div class="container text-center"> <div class="row"> <!-- Card #1, Starter --> <div class="col-lg-4 col-md-6 col-sm-10 pb-4 d-block m-auto"> <div class="pricing-item" style="box-shadow: 0px 0px 30px -7px rgba(0,0,0,0.29);"> <!-- Indicator of subscription type --> <div class="pt-4 pb-3" style="letter-spacing: 2px"> <h4>Starter</h4> </div> <!-- Price class --> <div class="pricing-price pb-1 text-primary color-primary-text "> <h1 style="font-weight: 1000; font-size: 3.5em;"> <span style=" font-size: 20px;">€</span>25 </h1> </div> <!-- Perks of said subscription --> <div class="pricing-description"> <ul class="list-unstyled mt-3 mb-4"> <li class="pl-3 pr-3">30 users included</li> <li class="pl-3 pr-3">15 GB of storage</li> <li class="pl-3 pr-3">Phone and email support</li> <li class="pl-3 pr-3">Help center access</li> </ul> </div> <!-- Button --> <div class="pricing-button pb-4"> <button type="button" class="btn btn-lg btn-primary w-75">Get started</button> </div> </div> </div> <!-- Card #2, Intermediate --> <div class="col-lg-4 col-md-6 col-sm-10 pb-4 d-block m-auto"> <div class="pricing-item" style="box-shadow: 0px 0px 30px -7px rgba(0,0,0,0.29);"> <div class="pt-4 pb-3" style="letter-spacing: 2px"> <h4>Intermediate</h4> </div> <div class="pricing-price pb-1 text-primary color-primary-text "> <h1 style="font-weight: 1000; font-size: 3.5em;"> <span style="font-size: 20px;">€</span>50 </h1> </div> <div class="pricing-description"> <ul class="list-unstyled mt-3 mb-4"> <li class="pl-3 pr-3">30 users included</li> <li class="pl-3 pr-3">15 GB of storage</li> <li class="pl-3 pr-3">Phone and email support</li> <li class="pl-3 pr-3">Help center access</li> </ul> </div> <div class="pricing-button pb-4"> <button type="button" class="btn btn-lg btn-primary w-75">Get started</button> </div> </div> </div> <!-- Card #3, Professional --> <div class="col-lg-4 col-md-6 col-sm-10 pb-4 d-block m-auto"> <div class="pricing-item" style="box-shadow: 0px 0px 30px -7px rgba(0,0,0,0.29);"> <div class="pt-4 pb-3" style="letter-spacing: 2px"> <h4>Professional</h4> </div> <div class="pricing-price pb-1 text-primary color-primary-text "> <h1 style="font-weight: 1000; font-size: 3.5em;"> <span style="font-size: 20px;">€</span>125 </h1> </div> <div class="pricing-description"> <ul class="list-unstyled mt-3 mb-4"> <li class="pl-3 pr-3">30 users included</li> <li class="pl-3 pr-3">15 GB of storage</li> <li class="pl-3 pr-3">Phone and email support</li> <li class="pl-3 pr-3">Help center access</li> </ul> </div> <div class="pricing-button pb-4"> <button type="button" class="btn btn-lg btn-primary w-75">Get started</button> </div> </div> </div> </div> </div> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js" integrity="sha384-pjaaA8dDz/5BgdFUPX6M/9SUZv4d12SUPF0axWc+VRZkx5xU3daN+lYb49+Ax+Tl" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>