Bootstrap 3 Skeleton

This is a simple Bootstrap skeleton. You can fork it to get a ready to use Bootstrap fiddle.

by matox

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<div class="offer-box row-fluid">
    <div class="title-box col-md-12 row-fluid">
        <div class="title pull-left col-md-8">
             <h3>Prvi offer</h3>

        </div>
        <div class="price pull-right col-md-4">
             <h1>$10</h1>

        </div>
    </div>
    <div class="clearfix"></div>
    <div class="settings col-md-12 row-fluid">
        <div class="backers pull-left col-md-6">73 backers</div>
        <div class="limit pull-right col-md-6">(27 of 100 left)</div>
    </div>
    <div class="clearfix"></div>
    <div class="description col-md-12">
        <p>Curabitur aliquam dapibus viverra. Sed aliquam, lectus vel eleifend pellentesque, tellus erat suscipit massa, non vehicula urna sem at nisi. Nullam arcu massa, viverra sed.</p>
    </div> <a href="#" class="kick-it">KICK IT</a>

</div>
<div class="offer-box row-fluid">
    <div class="title-box col-md-12 row-fluid">
        <div class="title pull-left col-md-8">
             <h3>Drugi offer</h3>

        </div>
        <div class="price pull-right col-md-4">
             <h1>$25</h1>

        </div>
    </div>
    <div class="clearfix"></div>
    <div class="settings col-md-12 row-fluid">
        <div class="backers pull-left col-md-6">49 backers</div>
        <div class="limit pull-right col-md-6">(1 of 50 left)</div>
    </div>
    <div class="clearfix"></div>
    <div class="description col-md-12">
        <p>Curabitur aliquam dapibus viverra. Sed aliquam, lectus vel eleifend pellentesque,, tellus erat suscipit massa, non vehicula urna sem at nisi. Nullam arcu massa, viverra, tellus erat suscipit massa, non vehicula urna sem at nisi. Nullam arcu massa, viverra, tellus erat suscipit massa, non vehicula urna sem at nisi. Nullam arcu massa, viverra, tellus erat suscipit massa, non vehicula urna sem at nisi. Nullam arcu massa, viverra tellus erat suscipit massa, non vehicula urna sem...

CSS

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
 .offer-box {
    position: relative;
    width: 300px;
    border: 1px solid rgba(255, 165, 0, 0.5);
    margin: 10px auto;
    display: block;
    overflow: auto;
    transition: all .5s ease;
}
.offer-box > * {
    display: block;
}
.offer-box .title-box, .offer-box .settings {
    padding: 0;
}
.offer-box .title-box .price, .offer-box .settings .limit {
    text-align: right;
}
.offer-box .description {
    margin-top: 10px;
    text-align: justify;
}
.offer-box img {
    width: 100%;
}
.offer-box:hover {
    background: rgba(255, 165, 0, 0.6);
    -webkit-transition: background-color 1000ms ease;
    -moz-transition: background-color 1000ms ease;
    -o-transition: background-color 1000ms ease;
    -ms-transition: background-color 1000ms ease;
    transition: background-color 1000ms ease;
}
.offer-box:hover .title-box, .offer-box:hover .settings, .offer-box:hover .description {
    visibility: hidden;
}
.offer-box a {
    cursor: default;
}
.offer-box a:hover {
    text-decoration: none;
}
.offer-box .kick-it {
    position: absolute;
    display: none;
    color: #fff;
    padding: 10px;
    width: 80px;
    border: 1px solid #fff;
    left: calc(50% - 40px);
    top: calc(50% - 20px);
    text-align: center;
    transition: all .2s ease;
}
.offer-box:hover .kick-it {
    display: block;
}
.offer-box:hover .kick-it:hover {
    cursor: pointer;
    transform:scale(1);
    animation-delay: inherit;
    -moz-animation: scale .5s infinite forwards;
    -webkit-animation: scale .5s infinite forwards;
    -o-animation: scale .5s infinite forwards;
    animation: scale .5s infinite forwards;
    animation: fontbulger 2s infinite;
}
@keyframes scale {
    0% {
        transform:scale(1);
    }
    50% {
        transform:scale(1.1);
    }
    100% {
        transform:scale(1);
    }
}

@keyframes fontbulger {
  0% {
    font-size: 10px;
  }
  30% {
    font-size: 15px;
  }
  100% {
    font-size: 12px;
...