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>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<header>
  <h1>le cirque</h1>
</header>
  
  <section id="images"></section>
  
  <section id="video-watcher"></section>
  
  <div id="templates" class="hidden">
     <section class="image-item">
          <h1>titre</h1>      
          <figure>
               <img src="" alt=""> 
               <figcaption>
                    <small>Video &copy; DD</small>
               </figcaption>
          </figure>      
          <button> Watch </button>
      
      </section>   
  </div>
​
</body>
</html>
 
body{
font-family: verdana;
font-size: .8em;
}
​
.hidden{
    display: none;
}
​
.large{
​
 z-index:10;
 cursor:pointer;
 border: 10px ride gold;
 background-color: window;
 border-radius: 7px; 
 padding: 1em;
 -moz-box-shadow: 10px 10px 5px #888; /* Firefix */
 -webkit-box-shadow: 10px 10px 5px #888; /* Safari and Chrome */
 box-shadow: 10px 10px 5px #888; /* Opera, future-proofing */
​
}
​
#video-watcher{
    position:absolute;
    top:0;
    left:0;
    z-index:5;
    background-color: black;
}
​
#images {
    display: flex;        
    flex-flow: row wrap;
    justify-content: space-around;
​
}
.image-item { 
    width : 300px;
    display: flex;        
    flex-flow: column; 
   -moz-box-shadow: 10px 10px 5px #888;
  -webkit-box-shadow: 10px 10px 5px hsl(0, 0%, 53%);
  box-shadow: 10px 10px 5px hsl(0, 0%, 53%);
  
  margin : 20px;
​
}
.image-item > figure { 
    order: -1;            
    align-self: center;   
}
.image-item > button {
    margin-top: auto;     /* Auto top margin pushes button to bottom */
}
​
.image-item > figure > img {
  width : 100px;
}
​
figure, .image-item {
  border: 1px solid hsl(0, 0%, 80%);
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  border-radius: 7px;
  padding: 1em;
 
}
​
​
Output

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

Dismiss x
public
Bin info
dupontpro
0viewers