Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://www.littlesparkvt.com/flatstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://www.littlesparkvt.com/flatstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
 
  <img class="bg" src="http://www.entiri.com/minett/img/background-footer.png">
    <img class="loader" src="http://jorgecardoso.eu/htmlblog/images/ajax-loader-linear.svg">
      
  <h1 class="header">ITEMS</h1>
   <div class="btn-group">
      <a class="btn gray" href="#"><i class="icon-refresh"></i></a>
       <a class="btn gray" href="#"><i class="icon-plus"></i></a>
   </div>
  <hr>
  <!--Card container-->
  <div class="deck">
​
​
      <div class="card" draggable="true">
         <div class="bgScan"></div>
      <img class="handle  top_right" src="http://i.imgur.com/l5NIUL4.png"/>
      <img class="handle  bottom_right" src="http://i.imgur.com/bXuPkKn.png"/> 
      <img class="handle  top_left" src="http://i.imgur.com/tJYg6JZ.png"/> 
      <img class="handle  bottom_left" src="http://i.imgur.com/fY6Ekz7.png"/>
      <img class="icon" src="http://i.imgur.com/AiXz6FY.png" height="50" width="50"/>
             
              <img src="http://i.imgur.com/sPykdPn.png" height="20" width="20" class="edit"/>
      <div class="statusbar good"></div>
        <span class="main">This is some long text that you need to expand to see</span>
      <div class="bottom">
          <div class="label mission-status"></div>  
        <span class="label" style="background-color:#f16522"> 25</span> 
​
      </div>
​
    </div>
  </div>
​
</body>
</html>
 
/* apply a natural box layout model to all elements */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.classificationBanner {
  position:relative;
    font-size: 85%;
    color: white;
    text-align: center;
    z-index:1000;
}
​
​
body{
  background-color:#3B3B3B;
  font-family: 'Open Sans', sans-serif;
  color:#c8c7c7;  
  
}
​
​
hr{
  display: block; height: 1px;
    border: 0; border-top: 1px solid #B9B9B9;
    margin: 1em 0; padding: 0;
}
​
.loader{
  float:right;
  position:relative;
  width:30px;
  top:15px;
  margin:2px;
}
.bg{
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;
    
  /* Set up proportionate scaling */
  width: 100%;
  height: auto;
    
  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
  opacity:.3;
}
.deck{
  
  position:relative;
  
}
.btn.gray{
  background-color:#B9B9B9;
  
}
.bgScan{
  position:absolute;
 background: url('http://i.imgur.com/H4o34wc.png') repeat right top;
  width:100%;
  height:100%;
  z-index:1;
​
}
​
.card{
​
  /*border*/
  border-left:3.5px solid #c8c7c7;
  border-top: 1px solid #c8c7c7;
    border-right: 1px solid #c8c7c7;
    border-bottom: 1px solid #c8c7c7;
  
background: rgb(129,181,240); /* Old browsers */
background: -moz-linear-gradient(-45deg,  rgba(129,181,240,1) 1%, rgba(174,206,239,1) 6%, rgba(225,235,255,1) 45%, rgba(174,206,239,1) 97%, rgba(129,181,240,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(1%,rgba(129,181,240,1)), color-stop(6%,rgba(174,206,239,1)), color-stop(45%,rgba(225,235,255,1)), color-stop(97%,rgba(174,206,239,1)), color-stop(100%,rgba(129,181,240,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg,  rgba(129,181,240,1) 1%,rgba(174,206,239,1) 6%,rgba(225,235,255,1) 45%,rgba(174,206,239,1) 97%,rgba(129,181,240,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg,  rgba(129,181,240,1) 1%,rgba(174,206,239,1) 6%,rgba(225,235,255,1) 45%,rgba(174,206,239,1) 97%,rgba(129,181,240,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg,  rgba(129,181,240,1) 1%,rgba(174,206,239,1) 6%,rgba(225,235,255,1) 45%,rgba(174,206,239,1) 97%,rgba(129,181,240,1) 100%); /* IE10+ */
background: linear-gradient(135deg,  rgba(129,181,240,1) 1%,rgba(174,206,239,1) 6%,rgba(225,235,255,1) 45%,rgba(174,206,239,1) 97%,rgba(129,181,240,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#81b5f0', endColorstr='#81b5f0',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
​
​
​
text-align: justify;
  
  display:block;
  width:100px;
  height:125px;
  margin:5px;
  float:left;
  position:relative;
  overflow:hidden;
  
  padding-right:10px;
  
  /*no text select*/
  -webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
​
  
  /*transition*/
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    transition: all 200ms linear;
  
overflow: visible;
}
.card:hover{
    cursor:pointer;
-moz-box-shadow: 0 0 5px 5px rgba(129,181,240,1);
-webkit-box-shadow: 0 0 5px 5px rgba(129,181,240,1);
box-shadow: 0 0 5px 5px rgba(129,181,240,1);
}
.handle{
    position:absolute;
    z-index:9999;
}
​
/*handle*/
.top_right{
​
  top:-1;
  right:0;
  margin-right:-5px;
​
}
/*handle*/
.bottom_right{
​
  bottom:-1;
  right:0;
  margin-right:-5px;
​
}
/*handle*/
.bottom_left{
​
  bottom:-1;
  left:1;
  margin-left:-8px;
​
}
/*handle*/
.top_left{
  top: -3;
  left: 1;
  margin-left:-8px;
​
}
.card .label{
  position:relative;
  float:left;
  line-height:100%;
  vertical-align: middle;
  margin:2px;
  border-radius: 3px; 
}
.icon{
  float:left;
   z-index:9998;
  position:relative;
}
.card .main{
​
  font-weight:600;
  font-size:12px;
   color:#000;
  display:inline-block;
  margin-right:2px;
  height:47px;
  
  /*overflow*/
   overflow:hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
   width: 100%;
}
.card .bottom{
  /*Positioning*/
  position:absolute;
  height:20px;
  width:100%;
  bottom:0;
  
  margin-left:2px;
  margin-right:2px;
  
  /*Decoration*/
  border-top:1.5px dotted #FFF;
  color:#3B3B3B;
  font-weight:600;
}
.card .statusbar{
  position:absolute;
  width : 7px;
  height:100%;
  right:0;
  z-index:9998;
}
​
.edit{
  position:absolute;
  right:10px;
  top:5px;
    display:none;
    /*transition*/
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    transition: all 200ms linear;
}
.edit:hover{
  position:absolute;
  right:10px;
  top:5px;
​
  
  transform: scale(1.1);
-ms-transform: scale(1.1); /* IE 9 */
-webkit-transform: scale(1.1); /* Safari and Chrome */
-o-transform: scale(1.1); /* Opera */
-moz-transform: scale(1.1); /* Firefox */
}
​
.good{
  background-color:#00e130;
}
.bad{
  background-color:red;
}
.indifferent{
  background-color:yellow;
}
.label.mission-status{
  background-color:#00e130;
  display:block;
  height:16px;
  width:16px;
  margin:2px;
  border-radius:10px;
}
 
$(function() {
​
  $(".edit").on("click",function(){
    event.stopPropagation();
  
  });
  $(".card").on("click",function(){
  
  
     var el,currentWidth;
     el = $(this);
​
     currentWidth = el.outerWidth();
    
​
    if(currentWidth === 100){
      el.animate({width:'100%'},'fast');
      el.children(".edit").toggle();
    
    }else{
      el.animate({width:'100px'},'fast');
      el.children(".edit").toggle();
    }
    
    
    
    
    
  });
  
});
Output

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

Dismiss x
public
Bin info
charleskpro
0viewers