Comic Con 2011 markup


/ Published in: HTML
Save to your folder(s)

HTML markup for Comic-Con 2011 package front


Copy this code and paste it in your HTML
  1. <div id="block-top-stories">
  2.  
  3. <h3>Top <span>Stories</span></h3>
  4.  
  5. <ul>
  6. <li>
  7. <span class="eyebrow">Eyebrow Here</span>
  8. <p class="ts-title"><a href="#"><strong>The Headline goes Here</strong></a></p>
  9. </li>
  10. <li>
  11. <span class="eyebrow">Eyebrow Here</span>
  12. <p class="ts-title"><a href="#"><strong>The Headline goes Here</strong></a></p>
  13. </li>
  14. <li>
  15. <span class="eyebrow">Eyebrow Here</span>
  16. <p class="ts-title"><a href="#"><strong>The Headline goes Here</strong></a></p>
  17. </li>
  18. </ul>
  19.  
  20. <p class="ts-more"><a href="#" title="Read more top headlines about Comic-Con 2011">More Top Headlines</a></p>
  21.  
  22. </div>
  23.  
  24.  
  25.  
  26.  
  27.  
  28.  
  29. <div id="block-photo-dl">
  30.  
  31. <ul>
  32. <li>
  33. <div class="pdl-text">
  34. <p class="pdl-title"><a href="#"><strong>The Headline Goes Here</strong></a></p>
  35. <p class="pdl-deck"><a href="#">This is some explanatory text that could wrap to as much as three lines</a></p>
  36. </div>
  37. <div class="pdl-image">
  38. <a href="#" title="The Headline Goes Here"><img src="photo.jpg" alt="" /></a>
  39. </div>
  40. </li>
  41. <li>
  42. <div class="pdl-text">
  43. <p class="pdl-title"><a href="#"><strong>The Headline Goes Here</strong></a></p>
  44. <p class="pdl-deck"><a href="#">This is some explanatory text that could wrap to as much as three lines</a></p>
  45. </div>
  46. <div class="pdl-image">
  47. <a href="#" title="The Headline Goes Here"><img src="photo.jpg" alt="" /></a>
  48. </div>
  49. </li>
  50. <li>
  51. <div class="pdl-text">
  52. <p class="pdl-title"><a href="#"><strong>The Headline Goes Here</strong></a></p>
  53. <p class="pdl-deck"><a href="#">This is some explanatory text that could wrap to as much as three lines</a></p>
  54. </div>
  55. <div class="pdl-image">
  56. <a href="#" title="The Headline Goes Here"><img src="photo.jpg" alt="" /></a>
  57. </div>
  58. </li>
  59. </ul>
  60.  
  61. </div>
  62.  
  63.  
  64.  
  65. <div id="block-now-live" class="nl-package">
  66.  
  67. <div class="sub-head">
  68. <p><span class="hilight">NOW<strong>LIVE</strong></span>, streaming Comic-Con video from San Diego</p>
  69. </div>
  70.  
  71. <div class="nl-iframe-container">
  72.  
  73. <div class="nl-iframe-960-360">
  74. <iframe width="960" height="360" frameborder="0" scrolling="no" src=""></iframe>
  75. </div>
  76.  
  77. <div id="nl-buttons">
  78.  
  79. <ul>
  80. <li class="nl-button-1">
  81. <a href="#">
  82. <span class="nl-button-title"><strong>Live Channel</strong></span>
  83. <span class="nl-button-desc">Call a new playlist</span>
  84. </a>
  85. </li>
  86. <li class="nl-button-2">
  87. <a href="#">
  88. <span class="nl-button-title"><strong>Live Channel</strong></span>
  89. <span class="nl-button-desc">Call a new playlist</span>
  90. </a>
  91. </li>
  92. <li class="nl-button-3">
  93. <a href="#">
  94. <span class="nl-button-title"><strong>Live Channel</strong></span>
  95. <span class="nl-button-desc">Call a new playlist</span>
  96. </a>
  97. </li>
  98. <li class="nl-button-4">
  99. <a href="#">
  100. <span class="nl-button-title"><strong>Live Channel</strong></span>
  101. <span class="nl-button-desc">Call a new playlist</span>
  102. </a>
  103. </li>
  104. </ul>
  105.  
  106. <p class="nl-powered-by">Powered by <a class="nl-logo" title="NowLive" href="http://www.nowlive.com/" target="_blank">NowLive</a></p>
  107.  
  108. </div>
  109.  
  110. </div>
  111.  
  112. </div>
  113.  
  114.  
  115.  
  116.  
  117. <div class="block-infomous">
  118.  
  119. <div class="infomous-604-325">
  120. </div>
  121.  
  122. <div class="infomous-directions">
  123. <p>Navigation cloud by <a href="http://www.infomous.com/">Infomous</a>.</p>
  124. <p>Hover over a word to see links to posts, click a word to focus/unfocus it.</p>
  125. </div>
  126.  
  127. <div class="ad-sponsored-by-2"></div>
  128.  
  129. </div>
  130.  
  131.  
  132.  
  133.  
  134.  
  135. <div id="block-latest-headlines">
  136.  
  137. <ul>
  138. <li>
  139. <p class="eyebrow"><span class="lh-time">10:30 PM ET</span> / <span class="lh-date">July 21, 2011</span></p>
  140. <p class="lh-title"><a href="#"><strong>The Headline Goes here</strong></a></p>
  141. </li>
  142. <li>
  143. <p class="eyebrow"><span class="lh-time">10:30 PM ET</span> / <span class="lh-date">July 21, 2011</span></p>
  144. <p class="lh-title"><a href="#"><strong>The Headline Goes here</strong></a></p>
  145. </li>
  146. <li>
  147. <p class="eyebrow"><span class="lh-time">10:30 PM ET</span> / <span class="lh-date">July 21, 2011</span></p>
  148. <p class="lh-title"><a href="#"><strong>The Headline Goes here</strong></a></p>
  149. </li>
  150. <li>
  151. <p class="eyebrow"><span class="lh-time">10:30 PM ET</span> / <span class="lh-date">July 21, 2011</span></p>
  152. <p class="lh-title"><a href="#"><strong>The Headline Goes here</strong></a></p>
  153. </li>
  154. <li>
  155. <p class="eyebrow"><span class="lh-time">10:30 PM ET</span> / <span class="lh-date">July 21, 2011</span></p>
  156. <p class="lh-title"><a href="#"><strong>The Headline Goes here</strong></a></p>
  157. </li>
  158. </ul>
  159.  
  160. <p class="see-all"><a href="#" title="See all Latest Headlines">See All Stories</a></p>
  161.  
  162. </div>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.