API tools faq
paste
Advertisement
octomoosey

Purple T Shirt

octomoosey
Oct 6th, 2013
7,266
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.37 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <!-- octomoosey @ tumblr -->
  4.  
  5. <html xmlns="https://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  6. <head><title>{Title}</title>
  7. <link rel="shortcut icon" href="{Favicon}">
  8. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  9. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  10.  
  11. <style type="text/css">
  12.  
  13. ::-webkit-scrollbar {
  14. width: 5px;height: 5px;}
  15.  
  16. ::-webkit-scrollbar-button:start:decrement,
  17. ::-webkit-scrollbar-button:end:increment {
  18. height: 6px;display: block;background-color:#fff;}
  19.  
  20. ::-webkit-scrollbar-track-piece {
  21. background-color: transparent;}
  22.  
  23. ::-webkit-scrollbar-thumb:vertical {
  24. height: 9px;background-color: #6f4f79;} /* change the scrollbar color here */
  25.  
  26. /* GENERAL PAGE THINGS */
  27.  
  28. body {
  29. background:#000; /* change the background color here */
  30. background-image: url('https://static.tumblr.com/86jccts/9P7mu9ieo/purple_tshirt_background2.jpg'); /* change the background image here */
  31. background-position: right bottom;
  32. background-repeat: no-repeat;
  33. background-attachment: fixed;
  34. font-family:serif;
  35. font-size:10px;
  36. line-height:100%;}
  37.  
  38. #toptitle {
  39. color:#fff; /* change the title text color here */
  40. line-height:120%;
  41. font-size:18px;
  42. text-align:center;
  43. margin-top:50px;
  44. margin-left:0px;
  45. width:740px;
  46. padding-bottom: 7px;
  47. letter-spacing:2px;
  48. font-style:italic;}
  49.  
  50. /* DESCRIPTION AND LINKS */
  51.  
  52. #nav {
  53. text-align:center;
  54. line-height:100%;
  55. font-size:11px;
  56. font-style:normal;
  57. color:#fff; /* change the description text color here */
  58. padding:10px;
  59. width:730px;
  60. margin-bottom:10px;}
  61.  
  62. #navdesc {
  63. margin-top:0px;
  64. letter-spacing:1px;}
  65.  
  66. #navlinks {
  67. width:740px;
  68. margin-top:0px;}
  69.  
  70. #navlinks a {
  71. color:#6f4f79; /* change the links text color here */
  72. font-size:11px;
  73. font-style:normal;
  74. letter-spacing:1px;
  75. line-height:100%;
  76. text-decoration:none;
  77. display:block-inline;
  78. padding:2px;
  79. -webkit-transition: all 0.6s ease;
  80. -moz-transition: all 0.6s ease;
  81. -o -transition: all 0.6s ease;}
  82.  
  83. #navlinks a:hover {
  84. font-style:italic;
  85. color:#fff; /* change the links hover color here */
  86. -webkit-transition: all 0.6s ease;
  87. -moz-transition: all 0.6s ease;
  88. -o -transition: all 0.6s ease;}
  89.  
  90. /* TABLE AND CELLS */
  91.  
  92. #container {
  93. margin-left:0px; }
  94.  
  95. #table {
  96. position:absolute;
  97. margin-top:-20px;
  98. border:10px solid transparent;
  99. width:720px;
  100. height:450px;
  101. padding-bottom:3px;
  102. padding-left:1px;
  103. overflow-y:scroll;
  104. overflow-x:hidden;}
  105.  
  106. .cells {
  107. margin-top:0px;
  108. margin-left:0px;}
  109.  
  110. #cell {
  111. width:200px;
  112. height:200px;
  113. margin-top:12px;
  114. margin-bottom:12px;
  115. margin-left:25px;
  116. display:inline-block;
  117. -webkit-transition: all 1.3s ease;
  118. -moz-transition:all 1.3s ease;
  119. -o -transition: all 1.3s ease;}
  120.  
  121. #cell:hover #info {
  122. opacity:0.7;
  123. -webkit-transition: all 1.3s ease;
  124. -moz-transition: all 1.3s ease;
  125. -o -transition: all 1.3s ease; }
  126.  
  127. #cell img {
  128. width:200px;
  129. height:200px;
  130. border:1px solid #fff; /* change the cell border color here */
  131. padding:2px;
  132. -webkit-transition: all 1.3s ease;
  133. -moz-transition: all 1.3s ease;
  134. -o -transition: all 1.3s ease;}
  135.  
  136. .row {width:700px;}
  137.  
  138. #info {
  139. opacity:0;
  140. overflow-y:scroll; overflow-x:hidden;
  141. color:#fff; /* change the box text color here */
  142. text-align:center;
  143. line-height:100%;
  144. font-size:10px;
  145. font-style:normal;
  146. letter-spacing:2px;
  147. width:195px;
  148. height:190px;
  149. background:#000;
  150. padding:5px;
  151. position:relative;
  152. margin-top:-203px;
  153. margin-left:3px;
  154. -webkit-transition: all 1.3s ease;
  155. -moz-transition: all 1.3s ease;
  156. -o -transition: all 1.3s ease;}
  157.  
  158. #boxtitle {
  159. font-size:13px;
  160. margin-top:5px;
  161. border-bottom:1px
  162. solid #fff; /* change the box title underline color here */
  163. padding-bottom:8px;}
  164.  
  165. #boxlink {
  166. margin-top:8px;}
  167.  
  168. #boxlink a {
  169. font-size:15px;
  170. color:#8f7099; /* change the box link color here */
  171. text-decoration:none;
  172. -webkit-transition: all 0.6s ease;
  173. -moz-transition: all 0.6s ease;
  174. -o -transition: all 0.6s ease;}
  175.  
  176. #boxlink a:hover {
  177. color:#fff; /* change the box link hover color here */
  178. -webkit-transition: all 0.6s ease;
  179. -moz-transition: all 0.6s ease;
  180. -o -transition: all 0.6s ease;}
  181.  
  182. {CustomCSS}
  183.  
  184. </style>
  185.  
  186. </head>
  187. <body>
  188. <div align="center">
  189.  
  190. <!-- change the top title here -->
  191.  
  192. <div id="toptitle">"All I'm saying, is that you're my weak spot. You are, and I'm yours."
  193.  
  194. <!-- change or add new links here - DO NOT REMOVE CREDIT -->
  195.  
  196. <div id="navlinks">
  197. <a href="/">home</a>
  198. <a href="/ask">ask me</a>
  199. <a href="/submit">submit</a>
  200. <a href="/">link one</a>
  201. <a href="/">link two</a>
  202. <a href="/">link three</a>
  203. <a href="https://www.tumblr.com/dashboard">back to dash</a>
  204. <a href="https://octomoosey.tumblr.com/">theme</a>
  205. </div>
  206.  
  207. <div id="nav">
  208. <div id="navdesc">
  209.  
  210. <!-- change the top description here -->
  211.  
  212. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
  213.  
  214. </div></div>
  215.  
  216. <div id="container">
  217. <div id="table">
  218. <div class="cells">
  219.  
  220. <div class="row">
  221.  
  222. <!-- This is where you edit the content of the table. The 'boxtitle' is the name which will appear at the top, the 'boxlink' should be the link to their page, just change the text and url. You can add as long a description to each one as you like as the box will automatically add a scrollbar if it's longer than the container. Images are 200px by 200px and can either be a 'still' image or a gif. To add more boxes, just copy and paste from 'cell' to 'end cell' and add to the bottom-->
  223.  
  224. <!-- cell -->
  225. <div id="cell">
  226. <img src="https://static.tumblr.com/86jccts/Dmgmu9d6m/samsmile2.gif"> <!-- change the image url here -->
  227. <div id="info">
  228. <div id="boxtitle">character name</div> <!-- change the character name here -->
  229. <div id="boxlink">
  230. <a href="/">character url</a><p><!-- change the character url here -->
  231.  
  232. <!-- change the box description here -->
  233.  
  234. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<p> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <p> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
  235.  
  236. </div></div></div>
  237.  
  238. <!-- end cell -->
  239.  
  240. <!-- cell -->
  241. <div id="cell">
  242. <img src="https://static.tumblr.com/86jccts/abFmu5hcc/samlaptop.gif"> <!-- change the image url here -->
  243. <div id="info">
  244. <div id="boxtitle">character name</div> <!-- change the character name here -->
  245. <div id="boxlink">
  246. <a href="/">character url</a><p><!-- change the character url here -->
  247.  
  248. <!-- change the box description here -->
  249.  
  250. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<p> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <p> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
  251.  
  252. </div></div></div>
  253.  
  254. <!-- end cell -->
  255.  
  256. <!-- cell -->
  257. <div id="cell">
  258. <img src="https://static.tumblr.com/86jccts/Zj1mu9eaz/samlookdown.gif"> <!-- change the image url here -->
  259. <div id="info">
  260. <div id="boxtitle">character name</div> <!-- change the character name here -->
  261. <div id="boxlink">
  262. <a href="/">character url</a><p><!-- change the character url here -->
  263.  
  264. <!-- change the box description here -->
  265.  
  266. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<p> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <p> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
  267.  
  268. </div></div></div>
  269.  
  270. <!-- end cell -->
  271.  
  272. <!-- cell -->
  273. <div id="cell">
  274. <img src="https://static.tumblr.com/86jccts/WV1mu9epx/samblink.gif"> <!-- change the image url here -->
  275. <div id="info">
  276. <div id="boxtitle">character name</div> <!-- change the character name here -->
  277. <div id="boxlink">
  278. <a href="/">character url</a><p><!-- change the character url here -->
  279.  
  280. <!-- change the box description here -->
  281.  
  282. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<p> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <p> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
  283.  
  284. </div></div></div>
  285.  
  286. <!-- end cell -->
  287.  
  288. <!-- cell -->
  289. <div id="cell">
  290. <img src="https://static.tumblr.com/86jccts/iNymu9f0v/sam-asylum.gif"> <!-- change the image url here -->
  291. <div id="info">
  292. <div id="boxtitle">character name</div> <!-- change the character name here -->
  293. <div id="boxlink">
  294. <a href="/">character url</a><p><!-- change the character url here -->
  295.  
  296. <!-- change the box description here -->
  297.  
  298. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<p> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <p> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
  299.  
  300. </div></div></div>
  301.  
  302. <!-- end cell -->
  303.  
  304. <!-- cell -->
  305. <div id="cell">
  306. <img src="https://static.tumblr.com/86jccts/a1omu9fq6/samlookup2.gif"> <!-- change the image url here -->
  307. <div id="info">
  308. <div id="boxtitle">character name</div> <!-- change the character name here -->
  309. <div id="boxlink">
  310. <a href="/">character url</a><p><!-- change the character url here -->
  311.  
  312. <!-- change the box description here -->
  313.  
  314. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<p> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. <p> Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
  315.  
  316. </div></div></div>
  317.  
  318. <!-- end cell -->
  319.  
  320. <!-- cell -->
  321. <div id="cell">
  322. <img src="https://static.tumblr.com/86jccts/yWzmu9ge6/supernatural-place-holder.gif"> <!-- change the image url here -->
  323. <div id="info">
  324. <div id="boxtitle">character name</div> <!-- change the character name here -->
  325. <div id="boxlink">
  326. <a href="/">character url</a><p><!-- change the character url here -->
  327.  
  328. <!-- change the box description here -->
  329.  
  330. Lorem ipsum dolor sit amet.
  331.  
  332. </div></div></div>
  333.  
  334. <!-- end cell -->
  335.  
  336. <!-- cell -->
  337. <div id="cell">
  338. <img src="https://static.tumblr.com/86jccts/yWzmu9ge6/supernatural-place-holder.gif"> <!-- change the image url here -->
  339. <div id="info">
  340. <div id="boxtitle">character name</div> <!-- change the character name here -->
  341. <div id="boxlink">
  342. <a href="/">character url</a><p><!-- change the character url here -->
  343.  
  344. <!-- change the box description here -->
  345.  
  346. Lorem ipsum dolor sit amet.
  347.  
  348. </div></div></div>
  349.  
  350. <!-- end cell -->
  351.  
  352. <!-- cell -->
  353. <div id="cell">
  354. <img src="https://static.tumblr.com/86jccts/yWzmu9ge6/supernatural-place-holder.gif"> <!-- change the image url here -->
  355. <div id="info">
  356. <div id="boxtitle">character name</div> <!-- change the character name here -->
  357. <div id="boxlink">
  358. <a href="/">character url</a><p><!-- change the character url here -->
  359.  
  360. <!-- change the box description here -->
  361.  
  362. Lorem ipsum dolor sit amet.
  363.  
  364. </div></div></div>
  365.  
  366. <!-- end cell -->
  367.  
  368. </div></div></div>
  369. </body>
  370. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!