Advertisement
shotforthesky

Tumblr Challenge Page Theme #02

Sep 8th, 2012
290
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.41 KB | None | 0 0
  1. <!--
  2. theme by Mimì @ thearmyinside.tumblr.com
  3. -->
  4.  
  5. <html>
  6. <head>
  7.  
  8. <link href='http://fonts.googleapis.com/css?family=Crafty+Girls' rel='stylesheet' type='text/css'>
  9.  
  10. <title>{title}</title>
  11. <link rel="shortcut icon" href="{Favicon}" />
  12. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  13.  
  14. <style type="text/css">
  15.  
  16. body {
  17. background-color:#92A4CA;
  18. background-attachment:fixed;
  19. }
  20.  
  21. a:link, a:active, a:visited {
  22. color:#1B3261;
  23. text-decoration:none;
  24. transition: all 0.6s ease-out;
  25. -o-transition-transition: all 0.6s ease-out;
  26. -webkit-transition: all 0.6s ease-out;
  27. -moz-transition: all 0.6s ease-out;
  28. }
  29. a:hover {
  30. color:#31487A;
  31. transition: all 0.6s ease-out;
  32. -o-transition-transition: all 0.6s ease-out;
  33. -webkit-transition: all 0.6s ease-out;
  34. -moz-transition: all 0.6s ease-out;
  35. }
  36.  
  37. #entry {
  38. width:700px;
  39. height:auto;
  40. margin-left:400px;
  41. margin-top:40px;
  42. margin-bottom:100px;
  43. }
  44.  
  45. #corona {
  46. width:300px;
  47. margin-left:40px;
  48. margin-top:130px;
  49. background-color:none;
  50. text-align:center;
  51. position:fixed;
  52. }
  53.  
  54. #title {
  55. font-size:14px;
  56. font-family: 'Crafty Girls', cursive;
  57. text-transform:none;
  58. color:#4B5ED7;
  59. }
  60.  
  61. #sidebarimg {
  62. width:200px;
  63. margin:5px;
  64. height:200px;
  65. border:7px solid #7590CA;
  66. }
  67.  
  68. #links {
  69. margin-left:220px;
  70. margin-top:-140px;
  71. }
  72. .links a{
  73. width:100px;
  74. margin:3px;
  75. padding-top:5px;
  76. padding-bottom:5px;
  77. font-size:9px;
  78. display:block;
  79. background-color:#7590CA;
  80. color: #4B5ED7;
  81. text-transform:lowercase;
  82. font-family:Georgia;
  83. font-style:italic;
  84. text-align:center;
  85. transition: all 0.6s ease-out;
  86. -o-transition-transition: all 0.6s ease-out;
  87. -webkit-transition: all 0.6s ease-out;
  88. -moz-transition: all 0.6s ease-out;
  89. }
  90.  
  91. .links a:hover {
  92. background-color: #707ED7;
  93. transition: all 0.6s ease-out;
  94. -o-transition-transition: all 0.6s ease-out;
  95. -webkit-transition: all 0.6s ease-out;
  96. -moz-transition: all 0.6s ease-out;
  97. }
  98.  
  99. h1 {
  100. text-align:center;
  101. font-size:22px;
  102. letter-spacing:2px;
  103. text-transform:none;
  104. color:#7590CA;
  105. font-family: 'Crafty Girls', cursive;
  106. }
  107. h2 {
  108. margin-top:-10px;
  109. text-align:center;
  110. font-size:8px;
  111. text-transform:none;
  112. color: #334468;
  113. font-family:Georgia;
  114. font-style:italic;
  115. }
  116.  
  117. .poster {
  118. width:100px;
  119. height:140px;
  120. background-color: #7590CA;
  121. text-align:center;
  122. position:relative;
  123. overflow:hidden;
  124. word-wrap: break-word;
  125. }
  126.  
  127. .poster img {
  128. width:100px;
  129. height:125px;
  130. position:relative;
  131. opacity:1;
  132. -webkit-transition: all 0.8s ease-in-out;
  133. -moz-transition: all 0.8s ease-in-out;
  134. -o-transition: all 0.8s ease-in-out;
  135. transition: all 0.8s ease-in-out;
  136. }
  137.  
  138. .poster:hover img {
  139. opacity:0.1;
  140. -webkit-transition: all 0.8s ease-in-out;
  141. -moz-transition: all 0.8s ease-in-out;
  142. -o-transition: all 0.8s ease-in-out;
  143. transition: all 0.8s ease-in-out;
  144. }
  145.  
  146. .title {
  147. width:90px;
  148. height:120px;
  149. margin:5px;
  150. margin-top:50px;
  151. font-size:11px;
  152. font-family:Arial;
  153. font-style:italic;
  154. color: #334468;
  155. position:absolute;
  156. -webkit-transition: all 0.8s ease-in-out;
  157. -moz-transition: all 0.8s ease-in-out;
  158. -o-transition: all 0.8s ease-in-out;
  159. transition: all 0.8s ease-in-out;
  160. }
  161.  
  162. .poster:hover .title {
  163. -webkit-transition: all 0.8s ease-in-out;
  164. -moz-transition: all 0.8s ease-in-out;
  165. -o-transition: all 0.8s ease-in-out;
  166. transition: all 0.8s ease-in-out;
  167. }
  168.  
  169. .stars {
  170. font-size:12px;
  171. font-style:bold;
  172. -webkit-transition: all 0.8s ease-in-out;
  173. -moz-transition: all 0.8s ease-in-out;
  174. -o-transition: all 0.8s ease-in-out;
  175. transition: all 0.8s ease-in-out;
  176. }
  177.  
  178. .poster:hover .stars {
  179. -webkit-transition: all 0.8s ease-in-out;
  180. -moz-transition: all 0.8s ease-in-out;
  181. -o-transition: all 0.8s ease-in-out;
  182. transition: all 0.8s ease-in-out;
  183. }
  184.  
  185. ::-webkit-scrollbar-thumb:vertical {
  186. background-color:#31487A;
  187. height:50px;
  188. -moz-border-radius: 20px;
  189. -khtml-border-radius: 20px;
  190. -webkit-border-radius: 20px;
  191. border-radius: 20px;
  192. }
  193.  
  194. ::-webkit-scrollbar-thumb:horizontal {
  195. background-color:#31487A;
  196. height:10px!important;
  197. -moz-border-radius: 20px;
  198. -khtml-border-radius: 20px;
  199. -webkit-border-radius: 20px;
  200. border-radius: 20px;
  201. }
  202.  
  203. ::-webkit-scrollbar {
  204. background-color:#7590CA;
  205. height:10px;
  206. width:10px;
  207. -moz-border-radius: 20px;
  208. -khtml-border-radius: 20px;
  209. -webkit-border-radius: 20px;
  210. border-radius: 20px;
  211. }
  212.  
  213. ::-moz-selection {
  214. background-color:transparent;
  215. color:#000000;
  216. }
  217.  
  218. ::selection {
  219. background-color:#000000;
  220. color:#ffffff;
  221. }
  222.  
  223. </style>
  224. <style type="text/css">{CustomCSS}</style>
  225.  
  226. </head>
  227.  
  228. <body>
  229.  
  230. <div id="corona">
  231. <div id="title">{Title}</div>
  232. <div id="sidebarimg"><img src="https://dl.dropbox.com/u/38384326/Stars/RiSidePic.png" width="200" height="200"></div>
  233. <div id="links"><div class="links">
  234. <a href="/">Home</a>
  235. <a href="/ask">Ask Me</a>
  236. <a target="_blank" href="http://thearmyinside.tumblr.com/tagged/themes">(C)</a>
  237. </div></div>
  238. </div>
  239.  
  240. <div id="entry">
  241.  
  242. <h1>Watched movies 2012</h1>
  243. <h2>this list does include re-watched movies (*)</h2>
  244.  
  245. <div style="position:fixed;border:none;width:670px;height:500px;overflow:auto;background-color:none">
  246.  
  247. <table cellpadding="0px" cellspacing="8px">
  248.  
  249. <!----- ROW START ----->
  250. <tr>
  251.  
  252. <td><div class="poster">
  253. <div class="title"><strong>Title</strong><br>(Year)</div>
  254. <div class="stars">&#9733; &#9733; &#9733; &#9733; &#9733;</div>
  255. <img src="http://dl.dropbox.com/u/38384326/Stars/Blank.png" width="100" height="140">
  256. </div></td>
  257.  
  258. <td><div class="poster">
  259. <div class="title"><strong>Title</strong><br>(Year)</div>
  260. <div class="stars">&#9733; &#9733; &#9733; &#9733; &#9733;</div>
  261. <img src="http://dl.dropbox.com/u/38384326/Stars/Blank.png" width="100" height="140">
  262. </div></td>
  263.  
  264. <td><div class="poster">
  265. <div class="title"><strong>Title</strong><br>(Year)</div>
  266. <div class="stars">&#9733; &#9733; &#9733; &#9733; &#9733;</div>
  267. <img src="http://dl.dropbox.com/u/38384326/Stars/Blank.png" width="100" height="140">
  268. </div></td>
  269.  
  270. <td><div class="poster">
  271. <div class="title"><strong>Title</strong><br>(Year)</div>
  272. <div class="stars">&#9733; &#9733; &#9733; &#9733; &#9733;</div>
  273. <img src="http://dl.dropbox.com/u/38384326/Stars/Blank.png" width="100" height="140">
  274. </div></td>
  275.  
  276. <td><div class="poster">
  277. <div class="title"><strong>Title</strong><br>(Year)</div>
  278. <div class="stars">&#9733; &#9733; &#9733; &#9733; &#9733;</div>
  279. <img src="http://dl.dropbox.com/u/38384326/Stars/Blank.png" width="100" height="140">
  280. </div></td>
  281.  
  282. <td><div class="poster">
  283. <div class="title"><strong>Title</strong><br>(Year)</div>
  284. <div class="stars">&#9733; &#9733; &#9733; &#9733; &#9733;</div>
  285. <img src="http://dl.dropbox.com/u/38384326/Stars/Blank.png" width="100" height="140">
  286. </div></td>
  287.  
  288. </tr>
  289.  
  290. <!----- ROW END ----->
  291.  
  292. <!----- ROW START ----->
  293. <tr>
  294.  
  295. <td><div class="poster">
  296. <div class="title"><strong>Title</strong><br>(Year)</div>
  297. <div class="stars">&#9733; &#9733; &#9733; &#9733; &#9733;</div>
  298. <img src="http://dl.dropbox.com/u/38384326/Stars/Blank.png" width="100" height="140">
  299. </div></td>
  300.  
  301. <td><div class="poster">
  302. <div class="title"><strong>Title</strong><br>(Year)</div>
  303. <div class="stars">&#9733; &#9733; &#9733; &#9733; &#9733;</div>
  304. <img src="http://dl.dropbox.com/u/38384326/Stars/Blank.png" width="100" height="140">
  305. </div></td>
  306.  
  307. <td><div class="poster">
  308. <div class="title"><strong>Title</strong><br>(Year)</div>
  309. <div class="stars">&#9733; &#9733; &#9733; &#9733; &#9733;</div>
  310. <img src="http://dl.dropbox.com/u/38384326/Stars/Blank.png" width="100" height="140">
  311. </div></td>
  312.  
  313. <td><div class="poster">
  314. <div class="title"><strong>Title</strong><br>(Year)</div>
  315. <div class="stars">&#9733; &#9733; &#9733; &#9733; &#9733;</div>
  316. <img src="http://dl.dropbox.com/u/38384326/Stars/Blank.png" width="100" height="140">
  317. </div></td>
  318.  
  319. <td><div class="poster">
  320. <div class="title"><strong>Title</strong><br>(Year)</div>
  321. <div class="stars">&#9733; &#9733; &#9733; &#9733; &#9733;</div>
  322. <img src="http://dl.dropbox.com/u/38384326/Stars/Blank.png" width="100" height="140">
  323. </div></td>
  324.  
  325. <td><div class="poster">
  326. <div class="title"><strong>Title</strong><br>(Year)</div>
  327. <div class="stars">&#9733; &#9733; &#9733; &#9733; &#9733;</div>
  328. <img src="http://dl.dropbox.com/u/38384326/Stars/Blank.png" width="100" height="140">
  329. </div></td>
  330.  
  331. </tr>
  332.  
  333. <!----- ROW END ----->
  334.  
  335. <!----- ROW START ----->
  336. <tr>
  337.  
  338. <td><div class="poster">
  339. <div class="title"><strong>Title</strong><br>(Year)</div>
  340. <div class="stars">&#9733; &#9733; &#9733; &#9733; &#9733;</div>
  341. <img src="http://dl.dropbox.com/u/38384326/Stars/Blank.png" width="100" height="140">
  342. </div></td>
  343.  
  344. <td><div class="poster">
  345. <div class="title"><strong>Title</strong><br>(Year)</div>
  346. <div class="stars">&#9733; &#9733; &#9733; &#9733; &#9733;</div>
  347. <img src="http://dl.dropbox.com/u/38384326/Stars/Blank.png" width="100" height="140">
  348. </div></td>
  349.  
  350. <td><div class="poster">
  351. <div class="title"><strong>Title</strong><br>(Year)</div>
  352. <div class="stars">&#9733; &#9733; &#9733; &#9733; &#9733;</div>
  353. <img src="http://dl.dropbox.com/u/38384326/Stars/Blank.png" width="100" height="140">
  354. </div></td>
  355.  
  356. <td><div class="poster">
  357. <div class="title"><strong>Title</strong><br>(Year)</div>
  358. <div class="stars">&#9733; &#9733; &#9733; &#9733; &#9733;</div>
  359. <img src="http://dl.dropbox.com/u/38384326/Stars/Blank.png" width="100" height="140">
  360. </div></td>
  361.  
  362. <td><div class="poster">
  363. <div class="title"><strong>Title</strong><br>(Year)</div>
  364. <div class="stars">&#9733; &#9733; &#9733; &#9733; &#9733;</div>
  365. <img src="http://dl.dropbox.com/u/38384326/Stars/Blank.png" width="100" height="140">
  366. </div></td>
  367.  
  368. <td><div class="poster">
  369. <div class="title"><strong>Title</strong><br>(Year)</div>
  370. <div class="stars">&#9733; &#9733; &#9733; &#9733; &#9733;</div>
  371. <img src="http://dl.dropbox.com/u/38384326/Stars/Blank.png" width="100" height="140">
  372. </div></td>
  373.  
  374. </tr>
  375.  
  376. <!----- ROW END ----->
  377.  
  378. <!----- ROW START ----->
  379. <tr>
  380.  
  381. <td><div class="poster">
  382. <div class="title"><strong>Title</strong><br>(Year)</div>
  383. <div class="stars">&#9733; &#9733; &#9733; &#9733; &#9733;</div>
  384. <img src="http://dl.dropbox.com/u/38384326/Stars/Blank.png" width="100" height="140">
  385. </div></td>
  386.  
  387. <td><div class="poster">
  388. <div class="title"><strong>Title</strong><br>(Year)</div>
  389. <div class="stars">&#9733; &#9733; &#9733; &#9733; &#9733;</div>
  390. <img src="http://dl.dropbox.com/u/38384326/Stars/Blank.png" width="100" height="140">
  391. </div></td>
  392.  
  393. <td><div class="poster">
  394. <div class="title"><strong>Title</strong><br>(Year)</div>
  395. <div class="stars">&#9733; &#9733; &#9733; &#9733; &#9733;</div>
  396. <img src="http://dl.dropbox.com/u/38384326/Stars/Blank.png" width="100" height="140">
  397. </div></td>
  398.  
  399. <td><div class="poster">
  400. <div class="title"><strong>Title</strong><br>(Year)</div>
  401. <div class="stars">&#9733; &#9733; &#9733; &#9733; &#9733;</div>
  402. <img src="http://dl.dropbox.com/u/38384326/Stars/Blank.png" width="100" height="140">
  403. </div></td>
  404.  
  405. <td><div class="poster">
  406. <div class="title"><strong>Title</strong><br>(Year)</div>
  407. <div class="stars">&#9733; &#9733; &#9733; &#9733; &#9733;</div>
  408. <img src="http://dl.dropbox.com/u/38384326/Stars/Blank.png" width="100" height="140">
  409. </div></td>
  410.  
  411. <td><div class="poster">
  412. <div class="title"><strong>Title</strong><br>(Year)</div>
  413. <div class="stars">&#9733; &#9733; &#9733; &#9733; &#9733;</div>
  414. <img src="http://dl.dropbox.com/u/38384326/Stars/Blank.png" width="100" height="140">
  415. </div></td>
  416.  
  417. </tr>
  418.  
  419. <!----- ROW END ----->
  420.  
  421. </table>
  422.  
  423. </div>
  424. </div>
  425. </body>
  426. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement