Bootstrap Snippet Home page 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="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<section class="call-to-action">
    <div class="container">
        <div class="row">
            <h1>Sign Up and Choose a Membership Plan</h1>
            <p>Our most popular plan
                </p>
            </div>
         <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
            <div class="offer offer-default">
                <div class="offer-content">
                    <h3 class="lead">
                        Standard <br>Free
                    </h3>
                    <p>
                        The standard membership is free of cost. An ideal for non-regular shoppers.
                        <br> NOTED:
Your items will ship as it arrive to our warehouse.
We don’t offer storage for this plan
No package consolidation or repacking services
No store pick up
NO CREDIT CARD ARE REQUIRED
                    </p>
                </div>
            </div>
         </div>
        <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
           <div class="offer offer-default">
                <div class="offer-content">
                    <h3 class="lead">
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
Membership start here
.shape{    
    border-style: solid; border-width: 0 70px 40px 0; float:right; height: 0px; width: 0px;
    -ms-transform:rotate(360deg); /* IE 9 */
    -o-transform: rotate(360deg);  /* Opera 10.5 */
    -webkit-transform:rotate(360deg); /* Safari and Chrome */
    transform:rotate(360deg);
}
.offer{
    background:#fff; border:1px solid #ddd; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); margin: 15px 0; overflow:hidden; color: #555;
}
.offer:hover {
}
.shape {
    border-color: rgba(255,255,255,0) #d9534f rgba(255,255,255,0) rgba(255,255,255,0);
}
.offer-radius{
    border-radius:7px;
}
.offer-danger { border-color: #d9534f; }
.offer-danger .shape{
    border-color: transparent #d9534f transparent transparent;
}
.offer-success {    border-color: #5cb85c; }
.offer-success .shape{
    border-color: transparent #5cb85c transparent transparent;
}
.offer-default {    border-color: #999999; }
.offer-default .shape{
    border-color: transparent #999999 transparent transparent;
}
.offer-primary {    border-color: #428bca; }
.offer-primary .shape{
    border-color: transparent #428bca transparent transparent;
}
.offer-info {   border-color: #5bc0de; }
.offer-info .shape{
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Home page"
Bootstrap 3.3.0 Snippet by fetheart

Related: See More

Questions / Comments:

"Home page" Bootstrap 3.3.0 Snippet by fetheart

Related: See More

Questions / Comments:

"Home page"
Bootstrap 3.3.0 Snippet by fetheart