Bootstrap snippet and html example. Packages section using bootstrap 4 sunlimetech UI kit series part 2 bootdey

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 ---------->

<!-- packages section -->
<section id="packages" class="my-5">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12 col-md-6 col-lg-6 p-0">
                <div class="gold-package p-5">
                    <h1 class="mb-5 pb-5">Gold Package</h1>
                    <ul class="list-unstyled mb-5">
                        <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</li>
                        <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</li>
                        <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</li>
                    </ul>
                    <p><a class="btn btn-primary mr-5 px-5" role="button" href="https://www.fiverr.com/sunlimetech/design-and-fix-your-bootstrap-4-issues" target="_blank">Join now</a><span>$2.500</span></p>
                </div>
            </div>
            <div class="col-sm-12 col-md-6 col-lg-6 p-0">
                <div class="silver-package p-5 bg-light">
                    <h1 class="mb-5 pb-5 text-secondary">Silver Package</h1>
                    <ul class="list-unstyled mb-5">
                        <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</li>
                        <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</li>
                        <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</li>
                    </ul>
                    <p><a class="btn btn-outline-primary mr-5 px-5" href="https://www.fiverr.com/sunlimetech/fix-your-bootstrap-html-and-css3-issues" target="_blank" role="button">Join now</a><span>$1.500</span></p>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- ./packages section -->

/***********************************************/
/***************** Packages ********************/
/***********************************************/
@import url('https://fonts.googleapis.com/css?family=Tajawal');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

#packages{
    font-family: 'Tajawal', sans-serif;
}

#packages .silver-package {
    -webkit-box-shadow: 2px 7px 30px 0px rgba(179, 172, 179, 1);
    -moz-box-shadow: 2px 7px 30px 0px rgba(179, 172, 179, 1);
    box-shadow: 2px 7px 30px 0px rgba(179, 172, 179, 1);
}

#packages .gold-package ul li,
#packages .silver-package ul li {
    padding-left: 50px;
    position: relative;
    margin-bottom: 26px;
    font-size: 20px;
}

#packages .gold-package ul li:before,
#packages .silver-package ul li:before {
    font-family: FontAwesome;
    content: "\f058";
    position: absolute;
    font-size: 25px;
    color: #007bff;
    left: 0;
    top: 0;
}

#packages .silver-package ul li:last-child:before {
    font-family: FontAwesome;
    content: "\f057";
    position: absolute;
    font-size: 25px;
    color: #f44336;
    left: 0;
    top: 0;
}

#packages .btn {
    border-radius: 1.25rem;
}