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>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  body {
    background-color: #888;
    font-family: "Times New Roman", "Arial Black", serif;
  }
  
  div.news-body {
    background-image: -moz-linear-gradient(right bottom, rgb(205,205,205) 70%, rgb(227,227,227) 90%);
    background-image: -webkit-linear-gradient(right bottom, rgb(205,205,205) 70%, rgb(227,227,227) 90%);
    
    padding: 5px;
    
    border-radius: 0 10px 0 0;
    -moz-border-radius: 0 10px 0 0;
    -webkit-border-radius: 0 10px 0 0;
    -khtml-border-radius: 0 10px 0 0;
    -ms-border-radius: 0 10px 0 0;
    
    border-top: 2px double #AAA;
    border-right: 3px double #AAA;
    border-bottom: 1px solid #999;
    border-left: 1px solid #AAA;
  }
  
  div.news-body > h1 {
    font-size: 3em;
    text-align: center;
    
    font-style: italic;
    
    margin-top: 0;
    
    border-bottom: 1px solid black;
  }
  
  div.news-body div.news-left {
  
    float: left;
    
    text-align: center;
    
    padding-right: 5px;
    border-right: 2px solid black;
  }
  
  div.news-body div.news-left div {
    text-align: justify;
    
    column-count: 2;
    column-gap: 1.5em;
    column-rule: 1px solid black;
    
    -moz-column-count: 2;
    -moz-column-gap: 1.5em;
    -moz-column-rule: 1px solid black;
    
    -webkit-column-count: 4;
    -webkit-column-gap: 1.5em;
    -webkit-column-rule: 1px solid black;
  }
  
  div.news-body div.news-titles {
    text-align: center;
  }
  
  div.news-body div.news-titles h2 span, div.news-body div.news-titles h3 span {
    font-style: oblique;
    font-size: 0.7em;
  }
  
  div.news-body div.news-first {
    text-align: center;
  }
  
  div.news-body div.news-first div {
    text-align: justify;
    
    column-count: 4;
    column-gap: 1.5em;
    column-rule: 1px solid black;
    
    -moz-column-count: 4;
    -moz-column-gap: 1em;
    -moz-column-rule: 1px solid black;
    
    -webkit-column-count: 3;
    -webkit-column-gap: 1.5em;
    -webkit-column-rule: 1px solid black;
    
    padding-left: 5px;
  }
  
  div.news-body div.news-page {
    clear: both;
    
    text-align: right;
    font-style: oblique;
    
    margin-top: 5px;
    margin-bottom: 5px;
  }
</style>
</head>
<body>
  <div role="main" class="news-body">
    <h1>Lorem Ipsum</h1>
    
    <div class="news-left">
      <h1>Dolor sit amet</h1>
      <div>
        <img src="http://karibou2.telecom-lille.fr/pub/daytof/mPIC01649.jpg" alt=""><img src="http://karibou2.telecom-lille.fr/pub/daytof/mPIC01649.jpg" alt=""><img src="http://karibou2.telecom-lille.fr/pub/daytof/mPIC01649.jpg" alt=""><img src="http://karibou2.telecom-lille.fr/pub/daytof/mPIC01649.jpg" alt=""><img src="http://karibou2.telecom-lille.fr/pub/daytof/mPIC01649.jpg" alt=""><img src="http://karibou2.telecom-lille.fr/pub/daytof/mPIC01649.jpg" alt=""><img src="http://karibou2.telecom-lille.fr/pub/daytof/mPIC01649.jpg" alt=""><img src="http://karibou2.telecom-lille.fr/pub/daytof/mPIC01649.jpg" alt=""><img src="http://karibou2.telecom-lille.fr/pub/daytof/mPIC01649.jpg" alt="">
      </div>
    </div>
    
    <div class="news-titles">
      <h2>In hac habitasse platea dictumst. Curabitur tellus. <span>page 2</span></h2>
      <h2>Praesent at metus ac eros accumsan pulvinar. <span>page 3</span></h2>
      <h3>Phasellus tincidunt quam quis tortor mattis volutpat. Donec risus orci. <span>page 5</span></h3>
    </div>
    
    <div class="news-first">
      <h1>Aliquam in neque nunc. Donec.</h2>
      <div>
        Aliquam turpis ipsum, eleifend ut commodo eget, congue in sem. Ut eu lacus nisl. Maecenas eget magna sit amet purus mattis fringilla. Nullam mollis, enim in tempus adipiscing, lacus nulla dapibus erat, non auctor tortor massa eu lorem. Duis eget commodo arcu. Praesent facilisis, mauris nec fringilla lacinia, urna arcu rutrum magna, vel ultricies risus metus in lacus. Nulla molestie lorem et nisi tempus vel dictum lacus lacinia. Ut vestibulum ligula a velit fringilla non consequat augue pharetra. Nam aliquet velit ac orci tristique sagittis. Nunc hendrerit nunc nibh, sit amet elementum eros.
      allis. Vivamus pharetra venenatis est, quis mollis elit adipiscing non.
        Nullam semper, metus id varius rutrum, quam 
        
        massa semper justo, sit amet gravida augue lacus eget velit. Praesent blandit rhoncus tellus.
        Phasellus sed ultricies erat. Suspendisse pretium varius elementum. Aenean nisi arcu, mollis vel mattis eu, imperdiet vel massa. Nam eu nibh sapien. Aliquam consequat volutpat nisi, nec commodo massa placerat vitae. Curabitur vitae placerat lorem. Duis id tortor lectus, vitae cursus nibh. Etiam turpis libero, facilisis non luctus non, auctor ultricies leo. In laoreet, justo eget dapibus tincidunt, ante augue pharetra magna, porttitor condimentum nisl lectus ac augue. Donec ac erat vel sapien posuere hendrerit. Nunc sagittis nibh quis tellus tempus vulputate vel eu arcu. In nunc velit, tristique eu pulvinar eget, tincidunt vitae eros. Suspendisse potenti. Etiam sed leo viverra sapien luctus consectetur. Sed bibendum erat ut nisl sodales tincidunt.
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sit amet risus enim. Nunc aliquam nisl vel libero placerat ultricies. Quisque lacinia facilisis ornare. Aenean et enim sit amet turpis vestibulum pellentesque non nec metus. Aenean ut libero eros. Nulla nec odio nulla. Sed ullamcorper tempor cursus. In at lacus at nibh tempor rhoncus et quis tellus. Cras mollis, ante gravida tincidunt cursus, felis eros pellentesque odio, vel tempor lacus nulla id dolor.
      </div>
    </div>
    
    <div class="news-page">page 1</div>
  </div>
</body>
</html>
 
​
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers