"Packages section using bootstrap 4 sunlime UI kit series part 2"
Bootstrap 4.0.0 Snippet by abhijeetka

<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- packages section --> <section id="packages"> <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/share/qb8D02" 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/share/qb8D02" 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; }

Related: See More


Questions / Comments: