Advertisement
TitanJelly

page #01 - by titanjelly

Jun 27th, 2014
638
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.69 KB | None | 0 0
  1. <!--
  2. ╱╭╮╱╭╮
  3. ╭╯╰┳╯╰╮
  4. ╰╮╭╋╮╭╋━━┳━╮
  5. ╱┃┃┣┫┃┃╭╮┃╭╮╮
  6. ╱┃╰┫┃╰┫╭╮┃┃┃┃
  7. ╱╰━┻┻━┻╯╰┻╯╰╯
  8. ↳ http://titanjelly.tumblr.com
  9. ↳ DO NOT Claim/Repost as your own or Remove the theme credit!
  10. ↳ DO NOT Use as a theme base or Make heavy modifications!
  11. -->
  12.  
  13. <head>
  14. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  15.  
  16. <title>{title}</title>
  17.  
  18. <link rel="shortcut icon" href="{Favicon}" />
  19. <link href='http://fonts.googleapis.com/css?family=Raleway:400,500,600,700,800,900,300,200,100' rel='stylesheet' type='text/css'>
  20.  
  21. <style type="text/css">
  22.  
  23. body, html {height: 100%;}
  24.  
  25. html, html a {
  26. -webkit-font-smoothing: antialiased !important;
  27. text-shadow: 1px 1px 1px rgba(0,0,0,0.004);}
  28.  
  29. body {
  30. font-size:8px;
  31. font-weight:400;
  32. font-family: 'Raleway', sans-serif;
  33. margin:0;
  34. color:#000000;
  35. background:#F4F4F4;}
  36.  
  37. body::-webkit-scrollbar-thumb:vertical {
  38. background:#FF5900;}
  39. body::-webkit-scrollbar-thumb:horizontal {
  40. background:#FF5900;height:10px;}
  41. body::-webkit-scrollbar {
  42. background:#F4F4F4;
  43. height:10px;width:0px;}
  44.  
  45. #s-m-t-tooltip{
  46. pointer-events:none;
  47. max-width:300px;
  48. margin-top:0px;
  49. margin-left:15px;
  50. font-size:8px;
  51. font-weight:200;
  52. text-transform:lowercase;
  53. letter-spacing:2px;
  54. padding:3px 4px;
  55. color:#ffffff;
  56. background:#55DCFA; /* Page Theme Color */
  57. position:relative;
  58. z-index:9999999999999999;
  59. transition: 0.2s;
  60. -moz-transition: 0.2s;
  61. -webkit-transition: 0.2s;
  62. -o-transition: 0.2s;}
  63.  
  64. a {-webkit-transition: 0.3s;transition: 0.3s;}
  65. .following img {-webkit-transition: 0.3s;transition: 0.3s;}
  66.  
  67. a {color:{color:Body Links};text-decoration:none;}
  68. a:hover{color:{color:Body Links Hover};}
  69.  
  70.  
  71. /* Body Elements
  72. -------------------------------------------------*/
  73. .body_container {
  74. width:100%;
  75. min-height:100%;
  76. text-align:center;}
  77.  
  78.  
  79. /* Banner Elements
  80. -------------------------------------------------*/
  81. .banner_container {
  82. width:100%;
  83. padding:0px;
  84. background:#F4F4F4;}
  85.  
  86. .banner_title {
  87. margin:auto;
  88. padding-top:100px;
  89. font-size:84px;
  90. font-weight:bold;
  91. text-transform:uppercase;
  92. line-height:58px;
  93. letter-spacing:-1px;
  94. color:#55DCFA; /* Page Theme Color */}
  95.  
  96.  
  97. /* Nav Elements
  98. -------------------------------------------------*/
  99. .nav_container {
  100. width:100%;
  101. padding:0px;}
  102.  
  103. .nav_links {
  104. margin:auto;
  105. width:800px;
  106. padding:50px 0px;
  107. font-size:18px;
  108. font-weight:600;
  109. text-transform:uppercase;
  110. background:#55DCFA; /* Page Theme Color */
  111. border-radius:0px 0px 100px 0px;
  112. border-left:10px double #F4F4F4;
  113. letter-spacing:-1px;}
  114.  
  115. .nav_links a {
  116. display:inline-block;
  117. padding:40px 0px;
  118. margin:0px 10px;
  119. width:120px;
  120. color:#55DCFA; /* Page Theme Color */
  121. background:#F4F4F4;
  122. border:1px solid #F4F4F4;}
  123.  
  124. .nav_links a:hover {
  125. color:#F4F4F4;
  126. background:transparent;}
  127.  
  128.  
  129. /* About Elements
  130. -------------------------------------------------*/
  131. .about_container {
  132. width:100%;
  133. padding:0px;
  134. background:#F4F4F4;}
  135.  
  136. .about_text {
  137. margin:auto;
  138. width:700px;
  139. padding:60px 50px 80px 50px;
  140. text-align:justify;}
  141.  
  142. .about_title {
  143. font-size:18px;
  144. font-weight:600;
  145. text-transform:uppercase;
  146. letter-spacing:-1px;}
  147.  
  148. .about_paragraph {font-size:10px;}
  149.  
  150.  
  151. /* Ask Elements
  152. -------------------------------------------------*/
  153. .ask_container {
  154. width:100%;
  155. padding:0px;
  156. color:#F4F4F4;}
  157.  
  158. .ask_box {
  159. margin:auto;
  160. width:700px;
  161. background:#55DCFA; /* Page Theme Color */
  162. border-radius:0px 0px 100px 0px;
  163. border-left:10px double #F4F4F4;
  164. padding:60px 50px 80px 50px;
  165. text-align:justify;}
  166.  
  167. .ask_title {
  168. font-size:18px;
  169. font-weight:600;
  170. text-transform:uppercase;
  171. letter-spacing:-1px;}
  172.  
  173. .ask {font-size:10px;}
  174.  
  175.  
  176. /* Media Elements
  177. -------------------------------------------------*/
  178. .media_container {
  179. width:100%;
  180. padding:0px;
  181. background:#F4F4F4;}
  182.  
  183. .media_wrapper {
  184. margin:auto;
  185. width:700px;
  186. padding:60px 50px 80px 50px;}
  187.  
  188. .media_title {
  189. font-size:18px;
  190. font-weight:600;
  191. text-align:left;
  192. text-transform:uppercase;
  193. letter-spacing:-1px;}
  194.  
  195. .media {font-size:10px;text-align:center;}
  196.  
  197. .mediabox {
  198. display:inline-block;
  199. border-left:5px solid #55DCFA; /* Page Theme Color */
  200. border-bottom:5px solid #55DCFA; /* Page Theme Color */
  201. border-right:5px solid #55DCFA; /* Page Theme Color */
  202. padding:0px 15px 15px 15px;
  203. margin:10px 15px;
  204. width:150px;}
  205.  
  206. .mediaboxtitle {
  207. width:180px;
  208. color:#F4F4F4;
  209. background:#55DCFA; /* Page Theme Color */
  210. font-weight:600;
  211. text-transform:uppercase;
  212. padding:5px;
  213. margin-left:-20px;
  214. margin-bottom:2px;}
  215.  
  216. .mediaboxtext {
  217. padding:3px;
  218. margin-top:10px;
  219. text-align:left;
  220. border:1px solid #eaeaea;}
  221.  
  222. .mediaboxtext ul {
  223. margin:0px;
  224. padding:5px 0px;}
  225.  
  226. .mediaboxtext li {
  227. margin-left:15px;
  228. padding:0px;}
  229.  
  230.  
  231. /* Blogroll Elements
  232. -------------------------------------------------*/
  233. .broll_container {
  234. width:100%;
  235. padding:0px;}
  236.  
  237. .broll_icons {
  238. margin:auto;
  239. width:700px;
  240. background:#55DCFA; /* Page Theme Color */
  241. border-radius:0px 0px 100px 0px;
  242. border-left:10px double #F4F4F4;
  243. padding:60px 50px 50px 50px;
  244. text-align:center;}
  245.  
  246. .broll_title {
  247. font-size:18px;
  248. font-weight:600;
  249. text-transform:uppercase;
  250. text-align:left;
  251. letter-spacing:-1px;
  252. color:#F4F4F4;}
  253.  
  254. .following::-webkit-scrollbar-thumb:vertical {
  255. background:#F4F4F4;}
  256. .following::-webkit-scrollbar-thumb:horizontal {
  257. background:#F4F4F4;height:10px;}
  258. .following::-webkit-scrollbar {
  259. background:transparent;
  260. height:10px;width:3px;}
  261.  
  262. .following{
  263. overflow:auto;
  264. margin-left:-20px;
  265. max-height:410px;}
  266.  
  267. .following img {
  268. width:50px;
  269. padding:4px;
  270. background:#F4F4F4;
  271. border:1px solid #F4F4F4;
  272. margin:3px;}
  273.  
  274. .following img:hover {
  275. background:transparent;}
  276.  
  277.  
  278. /* Chunk Elements
  279. -------------------------------------------------*/
  280. .chunk {
  281. width:100%;height:100px;
  282. padding:0px;
  283. border-bottom:30px solid #55DCFA; /* Page Theme Color */}
  284.  
  285.  
  286. /* Credit CSS - DO NOT REMOVE
  287. -------------------------------------------------*/
  288. .credit a {
  289. display:block;
  290. line-height:80%;
  291. color:#000000;
  292. font-size:8px;
  293. font-weight:normal;
  294. text-align:center;
  295. text-transform:uppercase;
  296. letter-spacing:3px;
  297. border:1px solid #ffffff;
  298. padding:2px 4px 2px 6px;
  299. position:fixed;right:10px;bottom:10px;}
  300.  
  301. .credit a:hover{
  302. color:#ffffff;
  303. border:1px solid #000000;}
  304. </style>
  305.  
  306. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  307. <script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
  308. <script>
  309. (function($){$(document).ready(function(){$("[title]").style_my_tooltips();});})(jQuery);
  310. </script>
  311.  
  312. </head>
  313. <body>
  314.  
  315. <div class="body_container">
  316.  
  317. <div class="banner_container">
  318. <div class="banner_title">
  319. Title <!-- Page Title --->
  320. </div>
  321. </div>
  322.  
  323. <div class="nav_container">
  324. <div class="nav_links">
  325. <a href="/"> home </a> <!-- Navigation Link01 --->
  326. <a href="/"> link </a> <!-- Navigation Link02 --->
  327. <a href="/"> link </a> <!-- Navigation Link03 --->
  328. <a href="/"> link </a> <!-- Navigation Link04 --->
  329. <a href="/"> link </a> <!-- Navigation Link05 --->
  330. </div>
  331. </div>
  332.  
  333. <div class="about_container">
  334. <div class="about_text">
  335. <div class="about_title">about</div> <!-- About Title --->
  336. <div class="about_paragraph">
  337. <!-- About Paragraph Text --->
  338. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  339. <!-- About Paragraph Text --->
  340. </div>
  341. </div>
  342. </div>
  343.  
  344. <div class="ask_container">
  345. <div class="ask_box">
  346. <div class="ask_title">message</div> <!-- Message Title --->
  347. <div class="ask">
  348. <!-- Ask Box
  349. -------- MAKE SURE TO CHANGE 'USERNAME' TO YOUR TUMBLR URL !! --->
  350. <iframe frameborder="0" height="190" id="ask_form" scrolling="no" src="http://www.tumblr.com/ask_form/USERNAME.tumblr.com" width="100%"></iframe>
  351. <!-- Ask Box --->
  352. </div>
  353. </div>
  354. </div>
  355.  
  356. <div class="media_container">
  357. <div class="media_wrapper">
  358. <div class="media_title">currently</div> <!-- Currently Title --->
  359. <div class="media">
  360.  
  361. <div class="mediabox">
  362. <div class="mediaboxtitle">
  363. watching <!-- Watching Title --->
  364. </div>
  365. <div class="mediaboxtext">
  366. <ul>
  367. <li>movie / anime title here</li> <!-- Watching Item --->
  368. <li>movie / anime title here</li> <!-- Watching Item --->
  369. <li>movie / anime title here</li> <!-- Watching Item --->
  370. <li>movie / anime title here</li> <!-- Watching Item --->
  371. <li>movie / anime title here</li> <!-- Watching Item --->
  372. </ul>
  373. </div>
  374. </div>
  375.  
  376. <div class="mediabox">
  377. <div class="mediaboxtitle">
  378. reading <!-- Reading Title --->
  379. </div>
  380. <div class="mediaboxtext">
  381. <ul>
  382. <li>book / manga title here</li> <!-- Reading Item --->
  383. <li>book / manga title here</li> <!-- Reading Item --->
  384. <li>book / manga title here</li> <!-- Reading Item --->
  385. <li>book / manga title here</li> <!-- Reading Item --->
  386. <li>book / manga title here</li> <!-- Reading Item --->
  387. </ul>
  388. </div>
  389. </div>
  390.  
  391. <div class="mediabox">
  392. <div class="mediaboxtitle">
  393. listening <!-- Listening Title --->
  394. </div>
  395. <div class="mediaboxtext">
  396. <ul>
  397. <li>song / band title here</li> <!-- Listening Item --->
  398. <li>song / band title here</li> <!-- Listening Item --->
  399. <li>song / band title here</li> <!-- Listening Item --->
  400. <li>song / band title here</li> <!-- Listening Item --->
  401. <li>song / band title here</li> <!-- Listening Item --->
  402. </ul>
  403. </div>
  404. </div>
  405.  
  406. </div>
  407. </div>
  408. </div>
  409.  
  410. <div class="broll_container">
  411. <div class="broll_icons">
  412. <div class="broll_title">following</div> <!-- Following Title --->
  413. <div class="following">
  414. {block:Following}
  415. {block:Followed}
  416. <a target='_blank' href='{FollowedURL}' title="{FollowedName}"><img src='{FollowedPortraitURL-64}' /></a>
  417. {/block:Followed}
  418. {/block:Following}
  419. </div>
  420. </div>
  421. </div>
  422.  
  423. <div class="chunk"></div>
  424.  
  425. </div>
  426.  
  427. <!-- Credit / Copyright Information - DO NOT REMOVE -->
  428. <div class="credit">
  429. <a href="http://titanjelly.tumblr.com/themes">Titan</a>
  430. </div>
  431.  
  432. </body>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement