API tools faq
paste
Advertisement
sandragonthemes

Theme #18

sandragonthemes
Feb 17th, 2014
731
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.21 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2.  
  3. <!--
  4. This is theme #18 by sandragonthemes.
  5. Please follow the rules and do not remove the credit.
  6. If you have questions or feedback please send me a message.
  7. -->
  8.  
  9. <html>
  10. <head>
  11. <link rel="shortcut icon" href="{Favicon}">
  12. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  13. {block:Description}
  14. <meta name="description" content="{MetaDescription}" />
  15. {/block:Description}
  16. <link href='http://fonts.googleapis.com/css?family=Averia+Serif+Libre|Libre+Baskerville|Text+Me+One|Expletus+Sans|Allan' rel='stylesheet' type='text/css'>
  17. <link href='http://fonts.googleapis.com/css?family=Norican' rel='stylesheet' type='text/css'>
  18.  
  19.  
  20. <style type="text/css">
  21. {CustomCSS}
  22.  
  23. /*SCROLLBAR*/
  24. ::-webkit-scrollbar {
  25. width: 8px;
  26. background-color: #dbdbdb;
  27. }
  28.  
  29. ::-webkit-scrollbar-track {
  30. background-color: #dbdbdb;
  31. }
  32.  
  33. ::-webkit-scrollbar-thumb {
  34. background-color: #85A653;
  35. }
  36.  
  37. /*BODY*/
  38. body {
  39. background-color: #ffffff;
  40. font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  41. font-size: 11px;
  42. color: #BFBFBF;
  43. letter-spacing:1px;
  44. }
  45.  
  46. a{
  47. text-decoration: none;
  48. color: #BFBFBF;
  49. }
  50.  
  51. a:hover{
  52. color: #72943e;
  53. }
  54.  
  55. #container{
  56. margin:auto;
  57. width: 560px;
  58. height:100%;
  59. clear: both;
  60. display: block;
  61. }
  62.  
  63. /*SIDEBAR*/
  64. #sidebar{
  65. width:60px;
  66. text-align:center;
  67. float:left;
  68. margin-top:50px;
  69. }
  70.  
  71. #sidebar img{
  72. border:1px solid #dbdbdb;
  73. padding:3px;
  74. }
  75.  
  76. #sidebar a{
  77. color: #85A653;
  78. font-family: "Trebuchet MS", Helvetica, sans-serif;
  79. font-weight:normal;
  80. text-decoration: none;
  81. text-transform:uppercase;
  82. font-size: 9px;
  83. letter-spacing:1px;
  84. -webkit-transition:all 0.6s;
  85. -moz-transition:all 0.6s;
  86. -ms-transition:all 0.6s;
  87. -o-transition:all 0.6s;
  88. }
  89.  
  90. #sidebar a:hover{
  91. text-shadow: 2px 0 0 rgba(53,190,127,0.4), -2px 0 0 rgba(0,244,0,0.2);
  92. -webkit-transition:all 0.6s;
  93. -moz-transition:all 0.6s;
  94. -ms-transition:all 0.6s;
  95. -o-transition:all 0.6s;
  96. }
  97.  
  98. /*CONTENT*/
  99. #items{
  100. width: 500px;
  101. height:100%;
  102. margin:-8px;
  103. float:left;
  104. }
  105.  
  106. .link_list{
  107. width:140px;
  108. height:215px;
  109. float:left;
  110. margin-right:25px;
  111. margin-top:50px;
  112. border-top:1px solid #dbdbdb;
  113. border-right:1px solid #dbdbdb;
  114. }
  115.  
  116. .link_list ul{
  117. width:130px;
  118. height:215px;
  119. margin-top:-8px;
  120. padding-right:11px;
  121. overflow:auto;
  122. }
  123.  
  124. .link_list li a{
  125. background-color:#fff;
  126. z-index:2;
  127. padding-left:2px;
  128. position:relative;
  129. z-index:5;
  130. }
  131.  
  132. .link_list li:hover .li_effect{
  133. margin-left:0px;
  134. -webkit-transition:all 0.6s;
  135. -moz-transition:all 0.6s;
  136. -ms-transition:all 0.6s;
  137. -o-transition:all 0.6s;
  138. }
  139.  
  140. .link_list li:hover hr{
  141. background-color: #BFBFBF;
  142. height:1px;
  143. width:110px;
  144. border:0px;
  145. float:right;
  146. margin-top:10px;
  147. -webkit-transition:all 0.6s;
  148. -moz-transition:all 0.6s;
  149. -ms-transition:all 0.6s;
  150. -o-transition:all 0.6s;
  151. }
  152.  
  153. h1{
  154. font-family: Palatino Linotype, Book Antiqua, Palatino, serif;
  155. text-transform:uppercase;
  156. letter-spacing:1px;
  157. font-size: 12px;
  158. color:#dbdbdb;
  159. font-weight:500;
  160. text-shadow: 1px 1px #b9b9b9;
  161. margin-top:-20px;
  162. text-align:right;
  163. }
  164.  
  165. h1:first-letter{
  166. font-size:18px;
  167. font-family: 'Tangerine', cursive;
  168. }
  169.  
  170. ul{
  171. list-style-type: none;
  172. padding: 0px;
  173. margin-right: 20px;
  174. text-align:right;
  175. line-height:190%;
  176. }
  177.  
  178. .li_effect{
  179. font-family: "Trebuchet MS", Helvetica, sans-serif;
  180. font-weight:900;
  181. font-size:13px;
  182. position:absolute;
  183. z-index:1;
  184. text-align:right;
  185. margin-left:119px;
  186. -webkit-transition:all 0.6s;
  187. -moz-transition:all 0.6s;
  188. -ms-transition:all 0.6s;
  189. -o-transition:all 0.6s;
  190. }
  191.  
  192. hr{
  193. background-color: #BFBFBF;
  194. height:1px;
  195. width:1px;
  196. border:0px;
  197. float:right;
  198. margin-top:10px;
  199. -webkit-transition:all 0.6s;
  200. -moz-transition:all 0.6s;
  201. -ms-transition:all 0.6s;
  202. -o-transition:all 0.6s;
  203. }
  204.  
  205.  
  206. {CustomCSS}
  207. </style>
  208.  
  209. <title>{Title}</title>
  210.  
  211. </head>
  212.  
  213. <body>
  214. <div id="container">
  215.  
  216. <!--CONTENT STARTS HERE-->
  217. <div id="items">
  218.  
  219.  
  220. <!--HOW TO USE THIS PAGE-->
  221. <!--Every list can have a maximum of 10 links.
  222. You can remove an entire list or add one,
  223. just copy the first one and change the links and link titles.
  224. The same goes for the individual links within the list.
  225.  
  226. !IMPORTANT - USE A MAX OF 10 LINK PER ITEM AND DON'T MAKE THE TITLES TOO LONG!
  227. -->
  228.  
  229.  
  230. <div class="link_list">
  231. <h1>TITLE</h1>
  232. <ul>
  233. <li><div class="li_effect">×<hr></div><a href="URL FOR LINK GOES HERE">Link 1</a></li>
  234. <li><div class="li_effect">×<hr></div><a href="URL FOR LINK GOES HERE">Link 2</a></li>
  235. <li><div class="li_effect">×<hr></div><a href="URL FOR LINK GOES HERE">Link 3</a></li>
  236. <li><div class="li_effect">×<hr></div><a href="URL FOR LINK GOES HERE">Link 4</a></li>
  237. <li><div class="li_effect">×<hr></div><a href="URL FOR LINK GOES HERE">Link 5</a></li>
  238. </ul>
  239. </div>
  240.  
  241. <div class="link_list">
  242. <h1>TITLE</h1>
  243. <ul>
  244. <li><div class="li_effect">×<hr></div><a href="URL FOR LINK GOES HERE">Link 1</a></li>
  245. <li><div class="li_effect">×<hr></div><a href="URL FOR LINK GOES HERE">Link 2</a></li>
  246. <li><div class="li_effect">×<hr></div><a href="URL FOR LINK GOES HERE">Link 3</a></li>
  247. <li><div class="li_effect">×<hr></div><a href="URL FOR LINK GOES HERE">Link 4</a></li>
  248. <li><div class="li_effect">×<hr></div><a href="URL FOR LINK GOES HERE">Link 5</a></li>
  249. </ul>
  250. </div>
  251.  
  252. <div class="link_list">
  253. <h1>TITLE</h1>
  254. <ul>
  255. <li><div class="li_effect">×<hr></div><a href="URL FOR LINK GOES HERE">Link 1</a></li>
  256. <li><div class="li_effect">×<hr></div><a href="URL FOR LINK GOES HERE">Link 2</a></li>
  257. <li><div class="li_effect">×<hr></div><a href="URL FOR LINK GOES HERE">Link 3</a></li>
  258. <li><div class="li_effect">×<hr></div><a href="URL FOR LINK GOES HERE">Link 4</a></li>
  259. <li><div class="li_effect">×<hr></div><a href="URL FOR LINK GOES HERE">Link 5</a></li>
  260. </ul>
  261. </div>
  262.  
  263.  
  264. </div><!--end items-->
  265.  
  266.  
  267.  
  268. <!--SIDEBAR-->
  269. <div id="sidebar">
  270. <img src="{PortraitURL-30}"/>
  271. <a href="/">Main</a>
  272. <a href="http://www.tumblr.com/dashboard">Dashboard</a>
  273. <a href="http://sandragonthemes.tumblr.com">Theme</a>
  274. </div><!--end sidebar-->
  275. </div><!--end content-->
  276. </body>
  277. </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!