Advertisement
heavenlytales

Ships Page (Version 2)

Apr 12th, 2013
1,866
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.66 KB | None | 0 0
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <!--
  4. created by heavenlytales
  5. inspired by darren-criss and pistachi-o
  6. please do not remove any credit
  7. thanks and enjoy!
  8. !-->
  9.  
  10. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  11.  
  12. <head>
  13.  
  14. <title>{Title}</title>
  15. <link rel="shortcut icon" href="{Favicon}">
  16. <link rel="altertnate" type="application/rss+xml" href="{RSS}">
  17.  
  18. <meta name="description" content="" />
  19.  
  20. <meta http-equiv="x-dns-prefetch-control" content="off"/></head>
  21.  
  22. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  23.  
  24. <style type="text/css">
  25.  
  26. body{
  27. color: # 462012;
  28. background-color: white;
  29. background-image: url("");
  30. background-position: top left;
  31. background-repeat: no-repeat;
  32. background-attachment: fixed;
  33. font-family: Lucida Sans Unicode;
  34. font-size: 10px;
  35. line-height: 100%;
  36. text-align: justify;
  37. }
  38.  
  39. a:link, a:active, a:visited{
  40. color: #57382D;
  41. text-decoration: none;
  42. }
  43.  
  44. a:hover{
  45. color: #7A5D42;
  46. text-decoration: none;
  47. }
  48.  
  49. #title {
  50. font-size: 18px;
  51. font-family: times;
  52. text-align: center;
  53. padding-bottom: 10px;
  54. padding-top: 20px;
  55. color: #301207;}
  56.  
  57. .box {
  58. color: #212121;
  59. float: left;
  60. width: 160px;
  61. background: #FFFFFF;
  62. margin: 2px;
  63. position: relative;
  64. overflow: hidden;
  65. }
  66.  
  67. .pic {
  68. margin: 0px;
  69. padding: 0px;
  70. width: 160px;
  71. height: 160px;
  72. }
  73.  
  74. .text {
  75. position: absolute;
  76. top: 5px;
  77. left: 4px;
  78. width: 120px;
  79. height: 140px;
  80. padding: 5px 16px;
  81. font-size: 11px;
  82. text-align: center;
  83. background: #FFFFFF;
  84. opacity: 0;
  85. -webkit-transition: .5s ease-in-out opacity;
  86. -moz-transition: .5s ease-in-out opacity;
  87. -o-transition: .5s ease-in-out opacity;
  88. transition: .5s ease-in-out opacity;
  89. }
  90.  
  91. .box:hover .text {
  92. opacity: 0.85;
  93. -webkit-transition: .5s ease-in-out opacity;
  94. -moz-transition: .5s ease-in-out opacity;
  95. -o-transition: .5s ease-in-out opacity;
  96. transition: .5s ease-in-out opacity;
  97. }
  98.  
  99. .box-title {
  100. margin: 10px 0px 4px;
  101. text-align: center;
  102. font-family: Lucida Sans Unicode;
  103. font-weight: 700;
  104. font-size: 12px;
  105. color: #2B2B2B;
  106. text-decoration: none;
  107. text-transform: uppercase;
  108. line-height: 100%;
  109. padding-bottom: 5px;
  110. border-bottom: 1px dotted #DDD;
  111. }
  112.  
  113. .quote {
  114. font-family: cambria;
  115. font-style: italic;
  116. padding: 5px;
  117. max-height: 140px;
  118. overflow: auto;
  119. }
  120.  
  121. .credit{
  122. position: absolute;
  123. bottom: 4px;
  124. right:4px;
  125. }
  126.  
  127. </style>
  128.  
  129.  
  130.  
  131. <center><table width="780" border="0" cellpadding="0" cellspacing="3"><tbody align="center">
  132.  
  133. <!—START OF THE FIRST ROW DESCRIPTION (DON’T CHANGE THE FIRST ONE)--!>
  134.  
  135. <tr><td><b> </b><br/></td>
  136. <td><b>SHOW NAME</b><br/></td>
  137. <td><b>SHOW NAME</b><br/></td>
  138. <td><b>SHOW NAME</b><br/></td>
  139. <td><b>SHOW NAME</b><br/></td></tr>
  140.  
  141. <!—END OF THE FIRST ROW DESCRIPTION--!>
  142.  
  143.  
  144. <!—START OF THE FIRST ROW PICS (DON’T CHANGE THE FIRST BOX)--!>
  145.  
  146. <tr><td><div class="box cat1"><img src="http://25.media.tumblr.com/84a8563d5d019564cafd3829071269f3/tumblr_mkf7eaIAwK1rgfhy6o4_r2_250.png" width="160" height="160"><div class="text"><a href="/"><img src="http://24.media.tumblr.com/2744aa3877f6a598d4317d90cc412f5c/tumblr_mkf7eaIAwK1rgfhy6o7_r3_250.png"></a></div></div>
  147. </td>
  148.  
  149. <td><div class="box cat1">
  150. <img src="(image)" width="160" height="160" class="pic">
  151. <div class="text">
  152. <div class="box-title">SHIP NAME</div>
  153. <div class="quote"> “Quote here.”</div>
  154. </div>
  155. </div></td>
  156.  
  157. <td><div class="box cat1">
  158. <img src="(image)" width="160" height="160" class="pic">
  159. <div class="text">
  160. <div class="box-title">SHIP NAME</div>
  161. <div class="quote"> “Quote here.”</div>
  162. </div>
  163. </div></td>
  164.  
  165. <td><div class="box cat1">
  166. <img src="(image)" width="160" height="160" class="pic">
  167. <div class="text">
  168. <div class="box-title">SHIP NAME</div>
  169. <div class="quote"> “Quote here.”</div>
  170. </div>
  171. </div></td>
  172.  
  173. <td><div class="box cat1">
  174. <img src="(image)" width="160" height="160" class="pic">
  175. <div class="text">
  176. <div class="box-title">SHIP NAME</div>
  177. <div class="quote"> “Quote here.”</div>
  178. </div>
  179. </div></td>
  180.  
  181. <!—END OF THE FIRST ROW PICS --!>
  182.  
  183.  
  184.  
  185.  
  186. <!—START OF THE SECOND ROW DESCRIPTION--!>
  187.  
  188. <tr><td><b>SHOW NAME</b><br/></td>
  189. <td><b>SHOW NAME</b><br/></td>
  190. <td><b>SHOW NAME</b><br/></td>
  191. <td><b>SHOW NAME</b><br/></td>
  192. <td><b>SHOW NAME</b><br/></td></tr>
  193.  
  194. <!—END OF THE SECOND ROW DESCRIPTION--!>
  195.  
  196.  
  197. <!—START OF THE SECOND ROW PICS--!>
  198.  
  199. <td><div class="box cat1">
  200. <img src="(image)" width="160" height="160" class="pic">
  201. <div class="text">
  202. <div class="box-title">SHIP NAME</div>
  203. <div class="quote"> “Quote here.”</div>
  204. </div>
  205. </div></td>
  206.  
  207. <td><div class="box cat1">
  208. <img src="(image)" width="160" height="160" class="pic">
  209. <div class="text">
  210. <div class="box-title">SHIP NAME</div>
  211. <div class="quote"> “Quote here.”</div>
  212. </div>
  213. </div></td>
  214.  
  215. <td><div class="box cat1">
  216. <img src="(image)" width="160" height="160" class="pic">
  217. <div class="text">
  218. <div class="box-title">SHIP NAME</div>
  219. <div class="quote"> “Quote here.”</div>
  220. </div>
  221. </div></td>
  222.  
  223. <td><div class="box cat1">
  224. <img src="(image)" width="160" height="160" class="pic">
  225. <div class="text">
  226. <div class="box-title">SHIP NAME</div>
  227. <div class="quote"> “Quote here.”</div>
  228. </div>
  229. </div></td>
  230.  
  231. <td><div class="box cat1">
  232. <img src="(image)" width="160" height="160" class="pic">
  233. <div class="text">
  234. <div class="box-title">SHIP NAME</div>
  235. <div class="quote"> “Quote here.”</div>
  236. </div>
  237. </div></td>
  238.  
  239. <!—END OF THE SECOND ROW PICS --!>
  240.  
  241.  
  242.  
  243. </tbody></table></center>
  244.  
  245. <div class="credit">code by <a href="http://heavenlytales.tumblr.com" target="_blank">heavenlytales</a></div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement