API tools faq
paste
jaesoonie

MASTER PAGE

jaesoonie
Jul 7th, 2013
4,616
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.20 KB | None | 0 0
raw download clone embed print report
  1. <!---------------------------------------------------------------------
  2. ᴘᴀɢᴇ ᴍᴀᴅᴇ ʙʏ >SOONJUN<. [ʏᴏɴɢ.ᴄᴏ.ᴠᴜ]
  3. sᴏᴏɴᴊᴜɴᴛʜᴇᴍᴇs.ᴛᴜᴍʙʟʀ.ᴄᴏᴍ
  4. ᴘʟᴇᴀsᴇ ʟᴇᴀᴠᴇ ᴛʜᴇ ᴄʀᴇᴅɪᴛ.
  5. ᴀɴʏ ǫᴜᴇsᴛɪᴏɴs ᴀᴛ ᴀʟʟ ᴄᴏᴍᴇ ᴀsᴋ.
  6. ----------------------------------------------------------------------->
  7.  
  8. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  9. <html>
  10. <head>
  11. <title>{Title}</title>
  12. <link rel="shortcut icon" href="{Favicon}">
  13. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  14. </head>
  15.  
  16. <script type='text/javascript' src='http://code.jquery.com/jquery.min.js'></script>
  17. <script type='text/javascript' src='http://yourjavascript.com/1211131136/jquery.cookie.js'></script>
  18. <script type='text/javascript'>
  19.  
  20. /* code written by kismet of RPG-Directory.com */
  21. $(function(){var kiscookie="kismet_selected_tab";function selectTab(tab){var i=1;while($('#tab'+i).length){if(tab.attr('id')!=='tab'+i){$('#tab'+i).removeClass('highlight');$('#tab'+i+'-content').hide();}else{tab.addClass('highlight');$('#tab'+i+'-content').show();}
  22. i++;}}
  23. $('.link').each(function(){$(this).click(function(){selectTab($(this));$.cookie(kiscookie,$(this).attr('id'));});});if($.cookie(kiscookie)){var tab=$.cookie(kiscookie);selectTab($('#'+tab));}});</script>
  24. <div id="dhtmltooltip"></div>
  25. <script type="text/javascript" src="http://yourjavascript.com/37452231221/tooltips.js"></script>
  26. <script src="http://static.tumblr.com/twte3d7/H8Glm663z/masonry.js"></script>
  27. <script type="text/javascript">
  28. $(window).load(function () {
  29. $('#content').masonry({
  30. itemSelector : ".container",
  31. },
  32. function() { $('#content').masonry({ appendedContent: $(this) }); }
  33. );
  34. });
  35. </script>
  36.  
  37. <link href='http://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700italic' rel='stylesheet' type='text/css'>
  38. <link href='http://fonts.googleapis.com/css?family=Pathway+Gothic+One' rel='stylesheet' type='text/css'>
  39.  
  40. <script src="http://static.tumblr.com/whx9ghv/lq0m3ktlh/modernizr.custom.34978.js"></script>
  41. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  42. <script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
  43. <script>
  44. (function($){
  45. $(document).ready(function(){
  46. $("[title]").style_my_tooltips();
  47. });
  48. })(jQuery);
  49. </script>
  50.  
  51.  
  52. <style type="text/css">
  53.  
  54. #s-m-t-tooltip {
  55. display: block;
  56. background: #ccc;
  57. font-size: 8px;
  58. font-family: calibri;
  59. letter-spacing: 1px;
  60. text-transform: uppercase;
  61. line-height:100%;
  62. color: #fff;
  63. text-align: center;
  64. margin-left: 18px;
  65. padding:4px;
  66. min-width: 40px;
  67. max-width: 200px;
  68. z-index: 99999;
  69. }
  70.  
  71.  
  72. body {background: #fff;
  73. font-family: calibri;
  74. font-size: 11px;}
  75.  
  76. ::-webkit-scrollbar-track {background-color:#fff;}
  77. ::-webkit-scrollbar-thumb {background-color:#f0f0f0;}
  78. ::-webkit-scrollbar {width:5px;height:5px;}
  79.  
  80. a:link, a:active, a:visited {
  81. color: #bbb;
  82. text-decoration: none;
  83. -webkit-transition: all 0.3s ease-in-out;
  84. -moz-transition: all 0.3s ease-in-out;
  85. }
  86.  
  87. a:hover {
  88. color: #888;
  89. text-decoration: none;
  90. -webkit-transition: all 0.3s ease-in-out;
  91. -moz-transition: all 0.3s ease-in-out;
  92. }
  93.  
  94.  
  95. #title {
  96. font-family:Playfair Display;
  97. font-weight:bold;
  98. font-style:oblique;
  99. color:#c9c9c9;
  100. font-size:30px;
  101. padding:5px;
  102. margin:auto;
  103. width:200px;
  104. background:#fcfcfc;
  105. text-align:center;
  106. }
  107.  
  108. #head {
  109. margin:auto;
  110. font-family:calibri;
  111. color:#bbb;
  112. font-size:10px;
  113. width:120px;
  114. margin-top:100px;
  115. margin-left:200px;
  116. padding: 20px;
  117. z-index: 1;
  118. background:#f3f3f3;
  119. height:260px;
  120. text-align:justify;
  121. word-spacing:1px;
  122. }
  123.  
  124.  
  125. #links {
  126. font-family:calibri;
  127. display:block;
  128. text-align:center;
  129. margin:auto;
  130. margin-left:200px;
  131. margin-top:3px;
  132. }
  133.  
  134. .link {
  135. display:block;
  136. color:#858585;
  137. padding:4px;
  138. font-size:10px;
  139. background:#f6f6f6;
  140. margin-bottom:3px;
  141. height: 12px;
  142. width:152px;
  143. opacity:0.8;
  144. text-transform:uppercase;
  145. -webkit-transition: all 1s ease-in-out;
  146. -moz-transition: all 1s ease-in-out;
  147. -o-transition: all 1s ease-in-out;
  148. -ms-transition: all 1s ease-in-out;
  149. transition: all 1s ease-in-out;
  150. cursor:pointer;
  151. }
  152.  
  153. .link:hover {
  154. background:#aaa;
  155. color:#fff;
  156. opacity:1;
  157. }
  158.  
  159. .highlight {
  160. background-color:#fff;
  161. color:#dcdcdc;
  162. opacity:1;}
  163.  
  164.  
  165.  
  166. #tab-strip a { text-decoration: none; }
  167.  
  168. .tab-content {
  169. width:530px;
  170. position:absolute;
  171. margin:auto;
  172. margin-left:400px;
  173. top:120px;
  174. display: none;
  175.  
  176. }
  177.  
  178. #tab1-content { display: block; }
  179.  
  180. .title {
  181. font-size:30px;
  182. color:#dcdcdc;
  183. margin-bottom:20px;
  184. font-family:Playfair Display;
  185. font-style: italic;
  186. text-align:center;
  187. position: relative;
  188. width:auto;
  189. }
  190.  
  191. .window {
  192. width:500px;
  193. height:350px;
  194. background-color:#f7f7f7;
  195. border:15px solid #fbfbfb;
  196. display:block;
  197. overflow:auto;
  198. }
  199.  
  200. table{
  201. margin-top: 10px;
  202. margin-bottom: 50px;
  203. font-family: consolas;
  204. font-size: 9px;
  205. color: #999;
  206. letter-spacing: 1px;
  207. text-align:left;
  208. margin-left:5px;
  209. padding:20px;
  210. }
  211.  
  212. #tags {
  213. background-color: #fcfcfc;
  214. color:#bbb;
  215. font-family: Pathway Gothic One;
  216. font-size: 14px;
  217. text-transform:normal;
  218. width: 115px;
  219. padding:5px;
  220. margin-left:15px;
  221. display: block;
  222. text-align: center;
  223. letter-spacing: 1px;
  224. font-weight: normal;
  225. border-bottom:1px solid #eee;
  226. }
  227.  
  228. .tags li{list-style: none; margin-left:-15px;text-transform: uppercase;width:115px;word-wrap: break-word;}
  229.  
  230. h1 {
  231. background-color: #fcfcfc;
  232. color:#bbb;
  233. font-family: Pathway Gothic One;
  234. font-size: 14px;
  235. text-transform:normal;
  236. width: 135px;
  237. padding:5px;
  238. display: block;
  239. text-align: center;
  240. letter-spacing: 1px;
  241. font-weight: normal;
  242. border-bottom:1px solid #f8f8f8;
  243. }
  244.  
  245. .bias li{list-style: none; margin-left:-5px;margin-top:-5px;text-transform: uppercase;width:145px;word-wrap: break-word;padding:10px;}
  246. .bias img{width:125px;height:125px;margin-top:-10px;border:10px solid #fbfbfb;}
  247.  
  248. #pics {
  249. width:460px;
  250. padding:10px;
  251. margin:10px;
  252. }
  253.  
  254. #pics img{
  255. background:#fff;
  256. border: 1px solid #f4f4f4;
  257. padding: 10px;
  258. width:64px;
  259. height:64px;
  260. opacity:.8;
  261. margin:5px;
  262. -webkit-transition:all 0.7s ease-in-out;
  263. -moz-transition:all 0.7s ease-in-out;
  264. -o-transition:all 0.7s ease-in-out;
  265. transition:all 0.7s ease-in-out;}
  266.  
  267. #pics img:hover{
  268. opacity:1;
  269. -moz-transform: scale(1.1);
  270. -webkit-transform: scale(1.1);
  271. -webkit-transition:all 0.5s ease-in-out;
  272. -moz-transition:all 0.5s ease-in-out;
  273. -o-transition:all 0.5s ease-in-out;
  274. transition:all 0.5s ease-in-out;}
  275.  
  276. #navigation{ display:inline-block; width:450px; margin-top:30px;}
  277.  
  278. #navigation a.links {
  279. display:inline-block;
  280. text-align:center;
  281. text-transform: uppercase;
  282. line-height: 100%;
  283. width:80px;
  284. color: #aaa;
  285. font-size:10px;
  286. font-family: calibri;
  287. padding:20px;
  288. background:#fcfcfc;
  289. margin-bottom:20px;
  290. margin-left:22px;
  291. -webkit-transition: all 0.7s ease-in-out;
  292. -moz-transition: all 0.7s ease-in-out;
  293. -o-transition: all 0.7s ease-in-out;
  294. -ms-transition: all 0.7s ease-in-out;
  295. transition: all 0.7s ease-in-out;
  296. cursor:pointer;
  297. border-bottom:1px solid transparent;
  298. }
  299.  
  300. #navigation a.links:hover {
  301. border-bottom:1px solid #aaa;
  302. -webkit-transition: all 0.7s ease-in-out;
  303. -moz-transition: all 0.7s ease-in-out;
  304. -o-transition: all 0.7s ease-in-out;
  305. -ms-transition: all 0.7s ease-in-out;
  306. transition: all 0.7s ease-in-out;}
  307.  
  308. #text{padding:20px 30px 20px 30px; text-align:justify;color:#aaa;}
  309. b{padding:2px;font-size:13px;font-family:Playfair Display;font-style: italic;color:#999;}
  310. .titles{border-bottom:1px solid #ccc;padding:7px;font-size:16px;font-family:Playfair Display;font-style: italic;margin-bottom:8px;color:#999;font-weight:bold;}
  311.  
  312.  
  313. #cr {font-size:9px;left:15px;bottom:10px;position:fixed;font-family:calibri;letter-spacing:1px; padding:2px;border-bottom:1px solid #ebebeb;}
  314. a.cr {color:#bbb;}
  315.  
  316.  
  317.  
  318. </style>
  319. </head>
  320. <body>
  321.  
  322.  
  323. <div id="head">
  324. <div id="title">my blog</div>
  325. <p>
  326. <b>name:</b> <br>
  327. <b>age:</b> <br>
  328. <b>location:</b> <br>
  329. <b>hobbies:</b> <br>
  330. <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus tellus eu eros viverra id semper massa blandit."
  331.  
  332. </div>
  333.  
  334.  
  335.  
  336. <div id="links">
  337. <div id='tab1' class='link'>about me</div>
  338. <div id='tab2' class='link'>links</div>
  339. <div id='tab3' class='link'>tags</div>
  340. <div id='tab4' class='link'>blogroll</div>
  341. <div id='tab5' class='link'>biases</div>
  342. </div>
  343. </div>
  344.  
  345.  
  346. <!------ABOUT-------->
  347. <div id='tab1-content' class='tab-content'>
  348. <div class="title">about me</div>
  349. <div class="window">
  350. <div id="text">
  351. <div class="titles">things i like</div>
  352. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus tellus eu eros viverra id semper massa blandit. Nam condimentum commodo dui, eget volutpat enim hendrerit mollis. Praesent fringilla pharetra nunc vitae sagittis. Proin elit urna, eleifend sed euismod at, bibendum ac nisi. Vestibulum pulvinar nisi sit amet dui consectetur ultrices. Sed nec dapibus tellus. Aenean blandit tincidunt est at luctus.
  353.  
  354. <div class="titles">things i hate</div>
  355. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec cursus tellus eu eros viverra id semper massa blandit. Nam condimentum commodo dui, eget volutpat enim hendrerit mollis. Praesent fringilla pharetra nunc vitae sagittis. Proin elit urna, eleifend sed euismod at, bibendum ac nisi. Vestibulum pulvinar nisi sit amet dui consectetur ultrices. Sed nec dapibus tellus. Aenean blandit tincidunt est at luctus.
  356.  
  357. </div>
  358. </div>
  359. </div>
  360. </div>
  361.  
  362. <!------LINKS-------->
  363. <div id='tab2-content' class='tab-content'>
  364. <div class="title">navigation</div>
  365. <div class="window">
  366.  
  367. <ul class="tags">
  368. <li>
  369. <div id="navigation">
  370. <a class="links" href="/">Link 1</a>
  371. <a class="links" href="/">Link 2</a>
  372. <a class="links" href="/">Link 3</a>
  373. <a class="links" href="/">Link 4</a>
  374. <a class="links" href="/">Link 5</a>
  375. <a class="links" href="/">Link 6</a>
  376. <a class="links" href="/">Link 7</a>
  377. <a class="links" href="/">Link 8</a>
  378. <a class="links" href="/">Link 9</a>
  379. </li>
  380. </ul>
  381.  
  382. </div>
  383. </div>
  384. </div>
  385. </div>
  386.  
  387.  
  388.  
  389. <!------TAGS-------->
  390. <div id='tab3-content' class='tab-content'>
  391. <div class="title">tags masterlist</div>
  392. <div class="window">
  393.  
  394. <table>
  395. <tr>
  396. <!--1ST COLLUMN-->
  397. <td valign="top">
  398.  
  399. <div id="tags">Title</div>
  400. <ul class="tags">
  401. <li>
  402. &rarr; <a href="/" title="TAG">TAG #1</a><br />
  403. &rarr; <a href="/">TAG #2</a><br />
  404. &rarr; <a href="/">TAG #3</a><br />
  405. &rarr; <a href="/">TAG #4</a><br />
  406. &rarr; <a href="/">TAG #5</a><br />
  407. &rarr; <a href="/">TAG #6</a><br />
  408. &rarr; <a href="/">TAG #7</a><br />
  409. &rarr; <a href="/">TAG #8</a><br />
  410. &rarr; <a href="/">TAG #9</a><br />
  411. </li>
  412. </ul>
  413.  
  414. </br>
  415.  
  416. <div id="tags">Title</div>
  417. <ul class="tags">
  418. <li>
  419. &rarr; <a href="/" title="TAG">TAG #1</a><br />
  420. &rarr; <a href="/">TAG #2</a><br />
  421. &rarr; <a href="/">TAG #3</a><br />
  422. &rarr; <a href="/">TAG #4</a><br />
  423. &rarr; <a href="/">TAG #5</a><br />
  424. &rarr; <a href="/">TAG #6</a><br />
  425. &rarr; <a href="/">TAG #7</a><br />
  426. &rarr; <a href="/">TAG #8</a><br />
  427. &rarr; <a href="/">TAG #9</a><br />
  428. </li>
  429. </ul>
  430.  
  431. <!--2ND COLLUMN-->
  432. <td valign="top">
  433.  
  434. <div id="tags">Title</div>
  435. <ul class="tags">
  436. <li>
  437. &rarr; <a href="/" title="TAG">TAG #1</a><br />
  438. &rarr; <a href="/">TAG #2</a><br />
  439. &rarr; <a href="/">TAG #3</a><br />
  440. &rarr; <a href="/">TAG #4</a><br />
  441. &rarr; <a href="/">TAG #5</a><br />
  442. &rarr; <a href="/">TAG #6</a><br />
  443. &rarr; <a href="/">TAG #7</a><br />
  444. &rarr; <a href="/">TAG #8</a><br />
  445. &rarr; <a href="/">TAG #9</a><br />
  446. </li>
  447. </ul>
  448.  
  449. <!--3RD COLLUMN-->
  450. <td valign="top">
  451.  
  452. <div id="tags">Title</div>
  453. <ul class="tags">
  454. <li>
  455. &rarr; <a href="/" title="TAG">TAG #1</a><br />
  456. &rarr; <a href="/">TAG #2</a><br />
  457. &rarr; <a href="/">TAG #3</a><br />
  458. &rarr; <a href="/">TAG #4</a><br />
  459. &rarr; <a href="/">TAG #5</a><br />
  460. &rarr; <a href="/">TAG #6</a><br />
  461. &rarr; <a href="/">TAG #7</a><br />
  462. &rarr; <a href="/">TAG #8</a><br />
  463. &rarr; <a href="/">TAG #9</a><br />
  464. </li>
  465. </ul>
  466.  
  467. </tr>
  468. </table>
  469.  
  470. </div>
  471. </div>
  472.  
  473.  
  474.  
  475. <!------BLOGROLL-------->
  476. <div id='tab4-content' class='tab-content'>
  477. <div class="title">blogroll</div>
  478. <div class="window">
  479.  
  480. <div id="pics">
  481. <center>
  482. {block:Following}{block:Followed}<a target="_blank" href="{FollowedURL}" title="{FollowedName}"><img src="{FollowedPortraitURL-64}" /></a>{/block:Followed}{/block:Following}
  483. </center>
  484. </div>
  485.  
  486. </div>
  487. </div>
  488. </div>
  489.  
  490.  
  491.  
  492. <!------BIASES-------->
  493. <div id='tab5-content' class='tab-content'>
  494. <div class="title">flawless idiots</div>
  495. <div class="window">
  496.  
  497. <table>
  498. <tr>
  499.  
  500. <td valign="top">
  501. <ul class="bias">
  502. <li>
  503. <h1>love #1</h1><img src="IMG URL">
  504. <h1>love #3</h1><img src="IMG URL">
  505. <h1>love #5</h1><img src="IMG URL">
  506. <h1>love #9</h1><img src="IMG URL">
  507. </li>
  508. </ul>
  509.  
  510. <td valign="top">
  511. <ul class="bias">
  512. <li>
  513. <h1>love #2</h1><img src="IMG URL">
  514. <h1>love #4</h1><img src="IMG URL">
  515. <h1>love #6</h1><img src="IMG URL">
  516. <h1>love #8</h1><img src="IMG URL">
  517. </li>
  518. </ul>
  519.  
  520.  
  521. </tr>
  522. </table>
  523.  
  524. </div>
  525. </div>
  526. </div>
  527.  
  528.  
  529. <div id="cr"><center><a href="http://soonjunthemes.tumblr.com/" class="cr" title="© soonjun"> theme. </a></div>
  530.  
  531. </body>
  532. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!