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

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<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">
<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 -->
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/***********************************************/
/***************** 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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Datepicker
Our Team section using bootstrap 4
Team Design Section with Pure CSS Effect
Services section using bootstrap 4

Questions / Comments: