Link Status Prototype

by abehnaz

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<!-- main content -->
<div class="container" style="padding-top: 70px;">
    <!-- first app row -->
    <div class="row">
        <!-- demo slider -->
        <div id="slider">
            <!-- demo link status -->
            <div class="link-status">
                <div class="link-element">
                    <i class="icon-star icon-4x"></i>
                </div>
                <div class="link-element">
                    <i class="icon-rss icon-4x"></i>
                </div>
            </div>
            <!-- end demo link status -->
        </div>
        <!-- end demo slider -->
    </div>
    <!-- /first app row -->
    
</div>
<!-- /main content -->

CSS

/*Emulates the slider's width*/
#slider {
    width: 450px;
    border: 1px solid #000;
}
/*Classes used to get the link status bar's look and feel*/
.link-status {
    display: table;
    width: 100%;
    border-collapse: separate;
    table-layout: fixed;
}
.link-status .link-element {
    text-align: center;
    display: table-cell;
    float: none;
    width: 1%;
    border: 1px solid #FF0000;
}