Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <title>Read More Playground</title>
- <style>
- /* Basic layout format */
- body {
- position: relative;
- width: 1000px;
- margin: auto;
- }
- /* Positions .read-more */
- .read-more {
- float: right;
- width: 345px;
- margin-left: 10px;
- }
- /* Removes automatic numbers in <ol> */
- #read-more-list {
- list-style-type: none;
- border-bottom: 5px solid #008385;
- }
- /* Adds border to list items and uniform height */
- li {
- border-top: 1px solid #c9c9c9;
- height: 135px;
- }
- /* Sets formatting for list numbers */
- ol li {
- color: #008385;
- font: bold 100px Georgia, Times, serif;
- position: relative;
- padding-top: 5px;
- }
- /* Sets formatting for list content */
- li p {
- font-family: Georgia, Times, serif;
- font-weight: bold;
- font-size: 20px;
- text-decoration: none;
- color: black;
- padding-left: 80px
- }
- /* Sets formatting for time stamps */
- .time {
- color: #888888;
- font-size: 16px;
- font-family: Helvetica, Arial, sans-serif;
- font-weight: normal;
- line-height: 1.6em;
- }
- /* Sets poition for list numbers */
- .list-numbers {
- position: absolute;
- }
- /* Sets formatting behaviours for links */
- a:link, a:visited {
- color: #008385;
- text-decoration: none;
- }
- /* Sets formatting behaviours for links on hover */
- a:hover {
- color: #004849;
- text-decoration: none;
- }
- /* Sets formating behaviours for link content on hover */
- a:hover p {
- color: #008385;
- text-decoration: none;
- }
- </style>
- </head>
- <body>
- <div class="read-more">
- <ol id="read-more-list">
- <h4><a href="http://www.telegraph.co.uk/travel/maps-and-graphics/">READ MORE</a></h4>
- <li><a href="http://www.telegraph.co.uk/travel/your-travels/secret-city-attractions-readers-tips-recommendations-travel-advice/">
- <span class="list-numbers">1</span>
- <p>Secret corners of the world: readers' tips</p></a>
- <p class="time">17:50</p></li>
- <li><a href="http://www.telegraph.co.uk/travel/destinations/middle-east/united-arab-emirates/dubai/articles/new-dubai-skyscraper-to-surpass-the-worlds-tallest-building/">
- <span class="list-numbers">2</span>
- <p>New Dubai skyscraper to surpass the world's tallest</p></a>
- <p class="time">10:31</p></li>
- <li><a href="http://www.telegraph.co.uk/travel/news/How-to-survive-on-a-desert-island/">
- <span class="list-numbers">3</span>
- <p>How to survive on a desert island</p></a>
- <p class="time">9:45</p></li>
- <li><a href="http://www.telegraph.co.uk/travel/travel-competitions/Win-a-holiday-voucher/">
- <span class="list-numbers">4</span>
- <p>Win a £350 holiday voucher</p></a>
- <p class="time">8:00</p></li>
- <li><a href="http://www.telegraph.co.uk/travel/destinations/europe/articles/The-best-beach-hotels-in-the-Mediterranean/">
- <span class="list-numbers">5</span>
- <p>The best beach hotels in the Mediterranean</p></a>
- <p class="time">11:02</p></li>
- </ol>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment