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://www.elledanse.eu/media/css/reset.screen.css" media="screen, tv, projection" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://bxslider.com/sites/default/files/jquery.bxSlider.min.js" type="text/javascript"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $('#slider1').bxSlider();
  });
</script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id="info_layer">
    <div id="slider_arrow">
      
      <div>
        <span class="premiere">Premiéra</span>
        <h1><a href="#">kratky</a></h1>
        <span class="date">12.8.2012</span>
      </div>
      
      <div>
        <span class="premiere">Premiéra</span>
        <h1><a href="#">trochu dlhy text</a></h1>
        <span class="date">12.8.2012</span>
      </div>
      
      <div>
        <span class="premiere">Premiéra</span>
        <h1><a href="#">velmi velmi dlhy text</a></h1>
        <span class="date">12.8.2012</span>
      </div>
    </div>
  </div>
  
    <script type="text/javascript">
    $('#slider_arrow').bxSlider({
      mode: 'fade',
      captions: true,
      auto: true,
      controls: false,
      randomStart: false,
      autoHover: true
    });
    </script>
</body>
</html>
​
 
#info_layer{
height:83px;
background:url(http://www.elledanse.eu/media/img/red_layer.png) top right repeat-x;
padding: 10px 50px 10px 20px;
}
​
#info_layer .bx-window{
width:100% !important;
}
​
#info_layer .bx-wrapper{
width:100% !important;          
}
​
#info_layer h1{
font-family: GillSansMTPro-Book;
font-weight:300;
font-size:35px;
color:#FFF;
margin-top:5px;
width:100%;
display: inline-block;
}
​
#info_layer h1 a:link {
color:#FFF; text-decoration:none
}    
#info_layer h1 a:visited {color:#FFF;}  
#info_layer h1 a:hover {color:#FFF;} 
#info_layer h1 a:active {color:#FFF;} 
​
#info_layer span.premiere{
font-family: GillSansMTPro-Book;
font-weight:300;
font-size:12px;
color:#FFF;
}
​
#info_layer span.date{
font-family: GillSansMTPro-Book;
font-weight:300;
font-size:14px;
color:#FFF;
}
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers