API tools faq
paste
Guest User

The Telegraph "Read More" Section Style

a guest
Apr 15th, 2016
349
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 3.34 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.   <head>
  5.  
  6.     <meta charset="UTF-8">
  7.     <title>Read More Playground</title>
  8.  
  9.     <style>
  10.  
  11. /* Basic layout format */
  12.     body {
  13.       position: relative;
  14.       width: 1000px;
  15.       margin: auto;
  16.     }
  17.  
  18. /* Positions .read-more */
  19.     .read-more {
  20.       float: right;
  21.       width: 345px;
  22.       margin-left: 10px;
  23.     }
  24.  
  25. /* Removes automatic numbers in <ol> */
  26.     #read-more-list {
  27.       list-style-type: none;
  28.       border-bottom: 5px solid #008385;
  29.     }
  30.  
  31. /* Adds border to list items and uniform height */
  32.     li {
  33.       border-top: 1px solid #c9c9c9;
  34.       height: 135px;
  35.     }
  36.  
  37. /* Sets formatting for list numbers */
  38.     ol li {
  39.       color: #008385;
  40.       font: bold 100px Georgia, Times, serif;
  41.       position: relative;
  42.       padding-top: 5px;
  43.     }
  44.  
  45. /* Sets formatting for list content */
  46.     li p {
  47.       font-family: Georgia, Times, serif;
  48.       font-weight: bold;
  49.       font-size: 20px;
  50.       text-decoration: none;
  51.       color: black;
  52.       padding-left: 80px
  53.     }
  54.  
  55. /* Sets formatting for time stamps */
  56.     .time {
  57.       color: #888888;
  58.       font-size: 16px;
  59.       font-family: Helvetica, Arial, sans-serif;
  60.       font-weight: normal;
  61.       line-height: 1.6em;
  62.     }
  63.  
  64. /* Sets poition for list numbers */
  65.     .list-numbers {
  66.       position: absolute;
  67.     }
  68.  
  69. /* Sets formatting behaviours for links */
  70.     a:link, a:visited {
  71.       color: #008385;
  72.       text-decoration: none;
  73.     }
  74.  
  75. /* Sets formatting behaviours for links on hover */
  76.     a:hover {
  77.       color: #004849;
  78.       text-decoration: none;
  79.     }
  80.  
  81. /* Sets formating behaviours for link content on hover */
  82.     a:hover p {
  83.       color: #008385;
  84.       text-decoration: none;
  85.     }
  86.  
  87.     </style>
  88.  
  89.   </head>
  90.  
  91.   <body>
  92.  
  93.   <div class="read-more">
  94.     <ol id="read-more-list">
  95.       <h4><a href="http://www.telegraph.co.uk/travel/maps-and-graphics/">READ MORE</a></h4>
  96.         <li><a href="http://www.telegraph.co.uk/travel/your-travels/secret-city-attractions-readers-tips-recommendations-travel-advice/">
  97.           <span class="list-numbers">1</span>
  98.           <p>Secret corners of the world: readers' tips</p></a>
  99.            <p class="time">17:50</p></li>
  100.  
  101.        <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/">
  102.          <span class="list-numbers">2</span>
  103.          <p>New Dubai skyscraper to surpass the world's tallest</p></a>
  104.             <p class="time">10:31</p></li>
  105.  
  106.         <li><a href="http://www.telegraph.co.uk/travel/news/How-to-survive-on-a-desert-island/">
  107.           <span class="list-numbers">3</span>
  108.           <p>How to survive on a desert island</p></a>
  109.             <p class="time">9:45</p></li>
  110.  
  111.         <li><a href="http://www.telegraph.co.uk/travel/travel-competitions/Win-a-holiday-voucher/">
  112.           <span class="list-numbers">4</span>
  113.           <p>Win a £350 holiday voucher</p></a>
  114.             <p class="time">8:00</p></li>
  115.  
  116.         <li><a href="http://www.telegraph.co.uk/travel/destinations/europe/articles/The-best-beach-hotels-in-the-Mediterranean/">
  117.           <span class="list-numbers">5</span>
  118.           <p>The best beach hotels in the Mediterranean</p></a>
  119.             <p class="time">11:02</p></li>
  120.       </ol>
  121.   </div>
  122.  
  123.   </body>
  124.  
  125. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!