Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
   <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div class="list-group">
  <a class="list-group-item" href="#"><i class="fa fa-home fa-fw"></i>&nbsp; Home</a>
  <a class="list-group-item" href="#"><i class="fa fa-book fa-fw"></i>&nbsp; Library</a>
  <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp; Applications</a>
  <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw"></i>&nbsp; Settings</a>
</div><br />
<div class="list-group-item00">
  <a href="#"><i class="fa fa-home fa-fw"></i>&nbsp; Home</a>
  <a href="#"><i class="fa fa-book fa-fw"></i>&nbsp; Library</a>
  <a href="#"><i class="fa fa-pencil fa-fw"></i>&nbsp; Applications</a>
  <a href="#"><i class="fa fa-cog fa-fw"></i> Settings</a>
</div><br />
</body>
</html>
 
​
.list-group{
     /* background:#ccff99; */
      width:200px;
      padding:10px;
      border:1px solid #cccccc;
      box-shadow: 2px 2px 2px #cccccc;
      border-radius:5px;
    }
.list-group i{font-size: 25px;color:blue;}
​
.list-group a{
      /*   background:#ccff99; */
        display:block;
        width:200px;
        text-decoration:none;
        padding:5px 0 8px;
        border-bottom:1px solid #cccccc;
      }
.list-group a:last-child{border-bottom:none;}
.list-group a:hover{
        display:block;
        width:200px;
        text-decoration:none;
        padding:5px 0 8px;
        color:white;
        background:#009900;
      }
​
​
.list-group-item00 {
      /*  background:#ccff99; */
        width:610px;
        height:35px;
        padding:8px 5px 8px 5px;
        border:1px solid #cccccc;
        box-shadow: 2px 2px 2px #cccccc;
        border-radius:5px;
           }
​
.list-group-item00 a{
        display:block;
        float:left;
        width:150px;
        text-decoration:none;
        text-align: center;
        padding:5px 0;
        border-right:1px solid #cccccc;
      }
.list-group-item00 a:last-child{border-right:none;}
.list-group-item00 a:hover{
        width:150px;
        text-decoration:none;
        padding:5px 0;
        color:white;
        background:#009900;
      }
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x