Bootstrap Snippet Simple pricing tables using HTML CSS Bootstrap

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
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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 ---------->
                <!-- price & service -->
                <div class="container">
                    <div class="row">
                        <h2 id="details">Choose your package</h2>
                    </div><br>
                    
                     
                       <!-- Pack 1-->
                        <div class="col-md-3" id="home-box">
                            <div class="pricing_header">
                                <h2>Basic User</h2>
                                <div class="space"></div>
                            </div>
                                <ul class="list-group">
                                        <li class="list-group-item"><span class="glyphicon glyphicon-ok"></span> Responsible design</li>
                                        <li class="list-group-item"><span class="glyphicon glyphicon-ok"></span> 3 examples</li>
                                        <li class="list-group-item off"><span class="glyphicon glyphicon-remove"></span> HTML5 & CSS3</li>
                                        <li class="list-group-item off"><span class="glyphicon glyphicon-remove"></span> PSD included</li>
                                        <li class="list-group-item off"><span class="glyphicon glyphicon-remove"></span> Light and clean</li>
                                        <li class="list-group-item off"><span class="glyphicon glyphicon-remove"></span> Customizible HTML</li>
                                    </ul>
                                
                                <div class="try">
                                    <p class="price">$ 9.99</p>
                                    <a class="btn btn-default" href="#" type="button">Abbonati</a>
                                </div>
                            </div>
                        <!-- Pack 2-->
                        <div class="col-md-3" id="home-box">
                            <div class="pricing_header">
                                <h2>Premium User</h2>
                                <div class="space"></div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
.container { padding-top: 40px; }
#details { font-family: "Quicksand", sans-serif; font-size: 60px; }
#home-box > h2 { font-family: "Quicksand", sans-serif; font-weight: 400; line-height: 1.1; color: #75b1ae; }
.price { font-size: 25px; float: left; }
.pricing_header { background: none repeat scroll 0% 0% rgb(44, 62, 80); border-radius: 5px 5px 0px 0px; transition: background 0.4s ease-out 0s; }
.pricing_header h2 { text-align:center; line-height: 25px; padding: 15px 0px; margin: 0px; font-family: "Quicksand", sans-serif; font-weight: 400; color: #75b1ae; }
.list-group-item:first-child { border-top-right-radius: 0px; border-top-left-radius: 0px; }
.btn { float: right; font-family: "Quicksand", sans-serif; font-weight:500;}
.off { text-decoration: line-through; color: rgb(86,86,86); }
.space {height: 2px; background-color: #75b1ae;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Simple pricing tables"
Bootstrap 3.1.0 Snippet by arboshiki

Related: See More

Questions / Comments:

"Simple pricing tables" Bootstrap 3.1.0 Snippet by arboshiki

Related: See More

Questions / Comments:

"Simple pricing tables"
Bootstrap 3.1.0 Snippet by arboshiki