API tools faq
paste
ninpen

genos (demon cyborg)

ninpen
Nov 30th, 2015
3,114
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 33.98 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3.  
  4.  
  5.  
  6.  
  7.  
  8.  
  9.  
  10.  
  11. <!-------------------------------
  12.  
  13. GENOS BY NINPEN.TUMBLR.COM
  14. DO NOT REMOVE THE CREDIT.
  15.  
  16. --------------------------------->
  17.  
  18.  
  19.  
  20.  
  21.  
  22.  
  23.  
  24.  
  25. <head>
  26. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  27.  
  28. <meta name="color:bold" content="#FFFF4C"/>
  29. <meta name="color:italic" content="#99FFFF"/>
  30. <meta name="color:underline" content="#FF7373"/>
  31. <meta name="color:background" content="#000000"/>
  32. <meta name="color:text" content="#ffffff"/>
  33. <meta name="color:posts" content="#0f0f0f"/>
  34. <meta name="color:border" content="#010101"/>
  35. <meta name="color:link" content="#ECECFB"/>
  36. <meta name="color:linkhover" content="#99FFFF"/>
  37. <meta name="color:blockquote text" content="#ffffff"/>
  38. <meta name="color:blockquote BG" content="#000000"/>
  39. <meta name="color:blockquote border" content="#4ee0df"/>
  40. <meta name="color:h1" content="#ffffff"/>
  41. <meta name="color:h2" content="#cccccc"/>
  42.  
  43. <meta name="color:questionbg" content="#161616"/>
  44. <meta name="color:questionborder" content="#000000"/>
  45. <meta name="color:askedbg" content="#faf3cb"/>
  46. <meta name="color:askedtext" content="#6d6536"/>
  47. <meta name="color:chat line 1" content="#000000"/>
  48. <meta name="color:chat line 2" content="#0a0a0a"/>
  49.  
  50. <meta name="color:lightbeam" content="#faf3cb"/>
  51. <meta name="color:accent1" content="#faf3cb"/>
  52. <meta name="color:accent2" content="#FDEA96"/>
  53. <meta name="color:accent3" content="#00ddff"/>
  54. <meta name="color:accent4" content="#3a828c"/>
  55. <meta name="color:accent5" content="#9aedf9"/>
  56. <meta name="color:sclassbg" content="#000000"/>
  57. <meta name="color:sclassh2bg" content="#FDEA96"/>
  58. <meta name="color:sclassh2text" content="#a89755"/>
  59. <meta name="color:maintab" content="#111111"/>
  60. <meta name="color:leftnavibg" content="#000000"/>
  61. <meta name="color:tabsbg" content="#010101"/>
  62.  
  63.  
  64. <meta name="image:background image" content="http://static.tumblr.com/hczaopr/PiMnyn9vf/static-bright.gif"/>
  65. <meta name="image:sidebar" content="http://static.tumblr.com/hczaopr/jO9nynihx/genoshelp.png"/>
  66. <link rel="shortcut icon" href="{Favicon}" />
  67. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  68.  
  69. <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700,800' rel='stylesheet' type='text/css'>
  70.  
  71.  
  72.  
  73. <style type="text/css">
  74. html, body, div, span, applet, object, h1, h2, h3, h4, h5, h6, a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, li, fieldset, form, label, legend, tbody, tfoot, thead, tr, th, td, article, canvas, details, embed, figure, figcaption, footer, hgroup, menu, output, ruby, summary,time, mark, audio, video {
  75. margin: 0;
  76. padding: 0;
  77. border: 0;
  78. font-size: 100%;
  79. font: inherit;
  80. vertical-align: baseline;
  81. }
  82.  
  83. article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  84. display: block;
  85. }
  86.  
  87. body {
  88. line-height: 1;
  89. }
  90.  
  91. ol, ul {
  92. list-style: none;
  93. }
  94.  
  95. table {
  96. border-collapse: collapse;
  97. border-spacing: 0;
  98. }
  99.  
  100. body {line-height: 1;}
  101. ol, ul {list-style: none;}
  102. table {border-collapse: collapse;border-spacing: 0;}
  103. a{text-decoration:none;color:{color:link};}
  104. a:hover {color:{color:linkhover};}
  105. b,strong{color:{color:bold};}
  106. i,em{color:{color:italic};}
  107. u{color:{color:underline};}
  108. .cred{font:700 italic 9px/8px 'open sans';letter-spacing:1px;position:Fixed;bottom:2%;right:5%;}
  109. .cred a:hover{color:{color:bold};}
  110.  
  111. .source{
  112. font-size:8px;
  113. font-weight:800;
  114. text-transform:uppercase;
  115. letter-spacing:2px;
  116. margin:5px 0 0 30px;
  117. color:{color:Text};
  118. }
  119.  
  120. img{max-width:100%;}
  121.  
  122. ::-webkit-scrollbar-thumb {
  123. background:{color:bold};
  124. border:1px solid {color:background};
  125. }
  126.  
  127. ::-webkit-scrollbar {
  128. background:{color:background};
  129. width: 3px;
  130. height: 4px;
  131. }
  132.  
  133. html {
  134. margin:0;
  135. padding:0;
  136. width: 100%;
  137. height: 100%;
  138. }
  139.  
  140. body {
  141. width:100%;
  142. height:100%;
  143. background:{color:Background} url('{image:background image}')repeat right top;
  144. color:{color:text};
  145. -webkit-font-smoothing: antialiased;
  146. -moz-osx-font-smoothing: grayscale;
  147. font-family:'Open sans';
  148. word-wrap: break-word;
  149. }
  150.  
  151. #tabbed{
  152. width:1030px;
  153. height:550px;
  154. position:fixed;
  155. background:{color:maintab};
  156. left:50%;
  157. top:50%;
  158. margin:-275px 0 0 -515px;
  159. }
  160.  
  161. .tabs {
  162. z-index: 15px;
  163. position: relative;
  164. background: {color:maintab};
  165. height:550px;
  166. width: 868px;
  167. margin-left:170px;
  168. box-sizing: border-box;
  169. overflow-x:hidden;
  170. }
  171.  
  172. .tabs-header {
  173. position: absolute;
  174. background: {color:leftnavibg};
  175. overflow: hidden;
  176. width:130px;
  177. padding:0 20px;
  178. height:550px;
  179. }
  180.  
  181. .tabs-header .border {
  182. position: absolute;
  183. margin-top:18px;
  184. left: 15px;
  185. background:{color:lightbeam};
  186. width: 3px !important;
  187. height: 3px;
  188. box-shadow:0px 0px 10px 2px {color:lightbeam};
  189. background-repeat: no-repeat;
  190. -webkit-transition: background-position .15s cubic-bezier(.8, 0, 1, 1),
  191. -webkit-transform .25s cubic-bezier(.8, 0, 1, 1);
  192. -webkit-transition: 0.3s ease;
  193. transition: 0.3s ease;
  194. }
  195.  
  196. .tabs-header ul {
  197. font-size:8px;
  198. font-weight:900;
  199. margin:0;
  200. padding:0;
  201. letter-spacing:2px;
  202. -webkit-box-orient: horizontal;
  203. -webkit-box-direction: normal;
  204. -webkit-flex-direction: row;
  205. -ms-flex-direction: row;
  206. flex-direction: row;
  207. -webkit-flex-wrap: wrap;
  208. -ms-flex-wrap: wrap;
  209. flex-wrap: wrap;
  210. }
  211.  
  212. .tabs-header li {
  213. display:block;
  214. padding:15px 0;
  215. -webkit-transition: 0.3s ease;
  216. transition: 0.3s ease;
  217. }
  218.  
  219. .tabs-header a {
  220. z-index: 1;
  221. display: block;
  222. padding: 0px 20px;
  223. text-decoration: none;
  224. text-transform: uppercase;
  225. }
  226.  
  227. .tabs-nav {
  228. position: absolute;
  229. top: -25px;
  230. right: 0;
  231. height:20px;
  232. display: -webkit-box;
  233. display: -webkit-flex;
  234. display: -ms-flexbox;
  235. display: flex;
  236. -webkit-box-align: center;
  237. -webkit-align-items: center;
  238. -ms-flex-align: center;
  239. align-items: center;
  240. padding: 0 10px;
  241. -webkit-user-select: none;
  242. -moz-user-select: none;
  243. -ms-user-select: none;
  244. user-select: none;
  245. }
  246.  
  247. .tabs-nav i {margin-left:5px;cursor: pointer;}
  248.  
  249. #mainav{
  250. position:absolute;
  251. bottom:0;
  252. text-align:center;
  253. width:170px;
  254. left:0;
  255. }
  256.  
  257. #mainav a{margin:0;width:9px;height:9px;padding:15px;}
  258. #mainav li a:hover{opacity:.4}
  259. #mainav li{display:inline-block;padding:0;margin:0;vertical-align:Top}
  260.  
  261. .tabs-content {
  262. position: relative;
  263. height:550px!important;
  264. -webkit-transition: 0.3s ease;
  265. transition: 0.3s ease;
  266. overflow-y:auto;
  267. overflow-x: hidden;
  268. }
  269.  
  270. .tabs-content .tab {display: none;}
  271. .tabs-content .tab.active {display: block;}
  272.  
  273.  
  274.  
  275.  
  276.  
  277. /* HERO TAB STARTS HERE*/
  278. #hero{
  279. background:{color:tabsbg};
  280. padding-bottom:30px;
  281. position:relative;
  282. }
  283.  
  284. /* DIMENSTIONS FOR SIDEBAR IMAGE IS 446 x 550*/
  285. .heroimg{
  286. width: 600px;
  287. height: 550px;
  288. position:fixed;
  289. background:url('{image:sidebar}')no-repeat left bottom;
  290. -webkit-clip-path: polygon(0 0, 70% 0, 55% 100%, 0% 100%);
  291. clip-path: polygon(0 0, 70% 0, 50% 100%, 0% 100%);
  292. }
  293.  
  294. .herodesc{
  295. width:440px;
  296. position:relative;
  297. left:420px;
  298. top:30px;
  299. }
  300.  
  301. .herodesc .title{
  302. text-shadow:0 0 4px {color:accent1};
  303. font-weight:800;
  304. font-size:40px;
  305. margin:0;
  306. padding:10px 0;
  307. text-transform:uppercase;
  308. text-align:center;
  309. }
  310.  
  311. .herodesc .title span{
  312. max-width:360px;
  313. display:inline-block;
  314. margin:0;
  315. padding:0 25px;
  316. position:relative;
  317. text-align:center;
  318. }
  319.  
  320. .herodesc .title span:before{
  321. content:"";
  322. width:12px;
  323. height: 100%;
  324. position: absolute;
  325. top: -7px;
  326. left: 0;
  327. border-top: 7px solid {color:accent2};
  328. border-left: 7px solid {color:accent2};
  329. border-bottom: 7px solid {color:accent2};
  330. }
  331.  
  332. .herodesc .title span:after{
  333. content:"";
  334. width:12px;
  335. height: 100%;
  336. position: absolute;
  337. top: -7px;
  338. right: 0;
  339. border-top: 7px solid {color:accent2};
  340. border-right: 7px solid {color:accent2};
  341. border-bottom: 7px solid {color:accent2};
  342. }
  343.  
  344. .sclass{
  345. position: absolute;
  346. right: 0;
  347. top: 0;
  348. width:100px;
  349. height: 200px;
  350. font-weight: 800;
  351. }
  352.  
  353. .sclass h2{
  354. font-size: 11px;
  355. text-align: center;
  356. padding:5px 0 6px 10px;
  357. letter-spacing: 1px;
  358. text-transform: uppercase;
  359. background:{color:sclassbg};
  360. }
  361.  
  362. .sclass h2 span{
  363. color:{color:sclassh2text};
  364. background:{color:sclassh2bg};
  365. padding:4px 5px;
  366. margin-left: 15px;
  367. }
  368.  
  369. .stats{
  370. margin:20px 0;
  371. padding:10px 0;
  372. position: relative;
  373. }
  374.  
  375. .stats h1{
  376. font-weight: 800;
  377. font-size: 16px;
  378. text-align:center;
  379. text-transform: uppercase;
  380. display: inline-block;
  381. letter-spacing: 10px;
  382. padding:10px 20px;
  383. position: absolute;
  384. right: -46px;
  385. top: 51px;
  386. color:{color:accent2};
  387. -ms-transform: rotate(90deg);
  388. -webkit-transform: rotate(90deg);
  389. transform: rotate(90deg);
  390. }
  391.  
  392. .stats h1:before,.powers h1:before{
  393. content:"";
  394. width:12px;
  395. height:100%;
  396. position: absolute;
  397. top: -4px;
  398. left: 0;
  399. border-top: 4px solid {color:accent3};
  400. border-left: 4px solid {color:accent3};
  401. border-bottom: 4px solid {color:accent3};
  402. }
  403.  
  404. .stats h1:after,.powers h1:after{
  405. content:"";
  406. width:12px;
  407. height: 100%;
  408. position: absolute;
  409. top: -4px;
  410. right: 0;
  411. border-top: 4px solid {color:accent3};
  412. border-right: 4px solid {color:accent3};
  413. border-bottom: 4px solid {color:accent3};
  414. }
  415.  
  416. .stats ul,.stats li,.powers li,.powers ul{margin: 0;padding: 0}
  417.  
  418. .stats ul.left{
  419. width: 183px;
  420. display: inline-block;
  421. border-right: 1px solid {color:text};
  422. }
  423.  
  424. .stats ul.right{
  425. display: inline-block;
  426. width: 190px;
  427. padding-left:15px;
  428. vertical-align: top;
  429. }
  430.  
  431. .stats li b,.powers li b{color:{color:accent3};font-weight: 800;}
  432.  
  433. .stats li,.powers li{
  434. list-style-type: none;
  435. font-size: 9px;
  436. font-weight: 700;
  437. margin-bottom: 5px;
  438. line-height: 15px;
  439. text-transform:uppercase;
  440. letter-spacing:2px;
  441. }
  442.  
  443. .powers{
  444. position: relative;
  445. width:395px;
  446. left:45px;
  447. }
  448.  
  449. .powers h1{
  450. font-weight: 800;
  451. font-size: 16px;
  452. text-transform: uppercase;
  453. display: inline-block;
  454. letter-spacing: 10px;
  455. padding:10px 20px;
  456. position: absolute;
  457. left: -163px;
  458. text-align:center;
  459. top: 113px;
  460. -ms-transform: rotate(-90deg);
  461. -webkit-transform: rotate(-90deg);
  462. transform: rotate(-90deg);
  463. }
  464. /* HERO TAB ENDS HERE*/
  465.  
  466.  
  467.  
  468.  
  469.  
  470. /* POSTS TAB STARTS HERE*/
  471. #center{
  472. height:550px;
  473. {block:IndexPage}margin-left:13px;width:740px;{/block:IndexPage}
  474. {block:PermalinkPage}width:827px;{/block:PermalinkPage}
  475. }
  476.  
  477. #archive iframe{width:870px;height:545px;}
  478.  
  479. .entry {
  480. font-size:11px;
  481. letter-spacing:.02em;
  482. background:{color:posts};
  483. border:1px solid {color:border};
  484. {block:IndexPage}padding:10px;margin:50px 0 50px 98px;width:250px;{/block:IndexPage}
  485. {block:PermalinkPage}padding:20px;width:400px;{/block:PermalinkPage}
  486. }
  487.  
  488. .tumblr_blog{text-transform:uppercase;letter-spacing:1px;padding:0 3px;font-weight:700;font-size:8px;color:{color:accent4};background:{color:accent5};}
  489. .ent{line-height:16px;}
  490.  
  491. .entry h2{color:{color:h2};font-style:italic;font-weight:300;font-size:22px;}
  492.  
  493. .entry h1{
  494. font-weight:800;
  495. line-height:19px;
  496. font-size:14px;
  497. padding:10px;
  498. margin: 0;
  499. text-transform: uppercase;
  500. text-align: center;
  501. }
  502.  
  503. h1 a{color:{color:h1};}
  504.  
  505. .entry span h1{
  506. margin:0;
  507. position:relative;
  508. padding: 10px 25px;
  509. margin-bottom:20px;
  510. display:block;
  511. }
  512.  
  513. .entry span h1:before{
  514. content:"";
  515. width:12px;
  516. height: 100%;
  517. position: absolute;
  518. top: -4px;
  519. left: 0;
  520. border-top: 4px solid {color:accent2};
  521. border-left: 4px solid {color:accent2};
  522. border-bottom: 4px solid {color:accent2};
  523. }
  524.  
  525. .entry span h1:after{
  526. content:"";
  527. width:12px;
  528. height: 100%;
  529. position: absolute;
  530. top: -4px;
  531. right: 0;
  532. border-top: 4px solid {color:accent2};
  533. border-right: 4px solid {color:accent2};
  534. border-bottom: 4px solid {color:accent2};
  535. }
  536.  
  537. #caption{
  538. width:345px;
  539. padding:0 20px;
  540. line-height:16px;
  541. position:fixed;
  542. margin-left:435px;
  543. }
  544.  
  545. .entry:hover #perma{
  546. opacity:1;
  547. -transition: all 0.6s ease-in-out;
  548. -webkit-transition: all 0.6s ease-in-out;
  549. -moz-transition: all 0.6s ease-in-out;
  550. -o-transition: all 0.6s ease-in-out;
  551. }
  552.  
  553. #question{
  554. background:{color:questionbg};
  555. padding:15px;
  556. border:1px solid {color:questionborder};
  557. margin-bottom:10px;
  558. position:relative;
  559. text-transform:uppercase;
  560. letter-spacing:1px;
  561. font-weight:700;
  562. line-height:12px;
  563. font-size:8px;
  564. }
  565.  
  566. #question i{
  567. margin-right:15px;
  568. text-transform:uppercase;
  569. letter-spacing:1px;
  570. padding:0 3px;
  571. font-weight:700;
  572. font-size:8px;
  573. color:{color:askedtext};
  574. background:{color:askedbg};
  575. }
  576.  
  577. #question a{color:{color:accent2}!important;}
  578.  
  579. #question spans{
  580. font-weight:800;
  581. text-align:center;
  582. display:inline-block;
  583. margin-bottom:2px;
  584. position:relative;
  585. padding:0px 5px;
  586. }
  587.  
  588. #question spans:after{
  589. content:"";
  590. width:5px;
  591. height: 100%;
  592. position: absolute;
  593. top: -1px;
  594. right: 0;
  595. border-top: 1px solid {color:accent3};
  596. border-right: 1px solid {color:accent3};
  597. border-bottom: 1px solid {color:accent3};
  598. }
  599.  
  600. #question spans:before{
  601. content:"";
  602. width:5px;
  603. height: 100%;
  604. position: absolute;
  605. top: -1px;
  606. left: 0;
  607. border-top: 1px solid {color:accent3};
  608. border-left: 1px solid {color:accent3};
  609. border-bottom: 1px solid {color:accent3};
  610. }
  611.  
  612. #question:after{
  613. content:"";
  614. width:12px;
  615. height: 100%;
  616. padding:1px 0;
  617. position: absolute;
  618. top: -3px;
  619. right: -3px;
  620. border-top: 2px solid {color:accent2};
  621. border-right: 2px solid {color:accent2};
  622. border-bottom: 2px solid {color:accent2};
  623. }
  624.  
  625. #question:before{
  626. content:"";
  627. width:12px;
  628. height: 100%;
  629. padding:1px 0;
  630. position: absolute;
  631. top: -3px;
  632. left: -3px;
  633. border-top: 2px solid {color:accent2};
  634. border-left: 2px solid {color:accent2};
  635. border-bottom: 2px solid {color:accent2};
  636. }
  637.  
  638. #perma{
  639. font-size:8px;
  640. font-weight:700;
  641. letter-spacing:2px;
  642. text-transform:uppercase;
  643. {block:IndexPage}opacity:0;bottom:-17px;right:0;position:Absolute;{/block:IndexPage}
  644. {block:PermalinkPage}margin-bottom:20px;{/block:PermalinkPage}
  645. -transition: all 0.6s ease-in-out;
  646. -webkit-transition: all 0.6s ease-in-out;
  647. -moz-transition: all 0.6s ease-in-out;
  648. -o-transition: all 0.6s ease-in-out;
  649. }
  650.  
  651. #perma b{font-weight:800;color:{color:bold};}
  652.  
  653. .pma{
  654. display:inline-block;
  655. margin:-3px 10px 0 0;
  656. background:{color:lightbeam};
  657. width: 3px !important;
  658. height: 3px;
  659. border-radius: 30px;
  660. box-shadow:0px 0px 10px 2px {color:lightbeam};
  661. }
  662.  
  663. #tags{
  664. margin-bottom:20px;
  665. padding-bottom:20px;
  666. border-bottom:1px solid {color:accent2};
  667. font-size:8px;
  668. font-weight:700;
  669. letter-spacing:2px;
  670. text-transform:uppercase;
  671. }
  672.  
  673. #tags a{margin-right:10px;}
  674.  
  675. #alart{
  676. display:inline-block;
  677. vertical-align:top;
  678. {block:IndexPage}width:193px;{/block:IndexPage}
  679. {block:PermalinkPage}width:343px;{/block:PermalinkPage}
  680. }
  681.  
  682. #alart h1{
  683. text-align:center;
  684. font-size:9px;
  685. letter-spacing:2px;
  686. text-transform:uppercase;
  687. }
  688.  
  689. .audio{
  690. width:18px;
  691. height:20px;
  692. overflow:hidden;
  693. margin:-2px auto 0 auto;
  694. }
  695.  
  696. #audio{
  697. display:inline-block;
  698. width:20px;
  699. padding:10px 13px 13px 10px;
  700. height:20px;
  701. overflow:hidden;
  702. border-radius:50px;
  703. background:#000;
  704. margin:10px 10px 10px 0;
  705. }
  706.  
  707. ol.notes {
  708. background-color:{color:posts};
  709. width:400px;
  710. height:300px;
  711. overflow:auto;
  712. text-align:left;
  713. padding: 0px;
  714. margin-top:50px;
  715. }
  716.  
  717. blockquote{
  718. text-align:left;
  719. padding:5px;
  720. background:{color:blockquote BG};
  721. font-size:10px;
  722. letter-spacing:1px;
  723. line-height:13px;
  724. color:{color:blockquote text};
  725. }
  726.  
  727. ul{list-style-type:square;}
  728. li{list-style-type:square;}
  729.  
  730. ol.notes li.note {
  731. font-size:8px;
  732. font-weight:700;
  733. letter-spacing:2px;
  734. text-transform:uppercase;
  735. list-style-type:none;
  736. padding: 10px;
  737. border-top: solid 1px {color:border};
  738. }
  739.  
  740. ol.notes li.note img.avatar {
  741. list-style-type:none;
  742. vertical-align: -4px;
  743. margin-right: 10px;
  744. width: 16px;
  745. height: 16px;
  746. border-radius:3px;
  747. }
  748.  
  749. ol.notes li.note span.action {list-style-type:none;font-weight:normal;}
  750. ol.notes li.note .answer_content {list-style-type:none;font-weight: normal;}
  751.  
  752. ol.notes li.note blockquote {
  753. border-color: {color:accent2};
  754. padding: 4px 10px;
  755. margin: 10px 0px 0px 25px;
  756. }
  757.  
  758. ol.notes li.note blockquote a {text-decoration: none;}
  759. ul.chat {margin: 0;padding: 0;}
  760.  
  761. .chat li {
  762. list-style-type: none;
  763. margin-left: 0px;
  764. padding: 15px 10px;
  765. border-radius:17px;
  766. }
  767.  
  768. .chat li.odd {
  769. {block:IndexPage}width:220px;{/block:IndexPage}
  770. {block:PermalinkPage}width:370px;{/block:PermalinkPage}
  771. background-color:{color:chat line 1};
  772. position:relative;
  773. margin:0 0 0 10px;
  774. }
  775.  
  776. .chat li.even {
  777. {block:IndexPage}width:160px;{/block:IndexPage}
  778. {block:PermalinkPage}width:313px;{/block:PermalinkPage}
  779. margin:10px 0 10px 60px;
  780. background-color:{color:chat line 2};
  781. position:relative;
  782. }
  783.  
  784. .chat li.even:after{
  785. content:"";
  786. position:Absolute;
  787. top:50%;
  788. right:-7px;
  789. width: 0;
  790. height: 0;
  791. border-top: 5px solid transparent;
  792. border-left: 10px solid {color:chat line 2};
  793. border-bottom: 5px solid transparent;
  794. }
  795.  
  796. .chat li.odd:after{
  797. content:"";
  798. position:Absolute;
  799. top:50%;
  800. left:-7px;
  801. width: 0;
  802. height: 0;
  803. border-top: 5px solid transparent;
  804. border-right: 10px solid {color:chat line 1};
  805. border-bottom: 5px solid transparent;
  806. }
  807.  
  808. .label {
  809. font-weight:800;
  810. font-size:9px;
  811. text-transform:uppercase;
  812. letter-spacing:2px;
  813. color:{color:bold};
  814. }
  815.  
  816. .pagination {display: none;}
  817. #pagination{border-top:1px solid {color:accent2};font-size:9px;letter-spacing:2px;font-weight:800;padding:20px 0;text-align:center;}
  818. #pagination a{margin:0 10px;}
  819.  
  820. /* POSTS TAB ENDS HERE*/
  821.  
  822.  
  823.  
  824.  
  825.  
  826.  
  827.  
  828.  
  829.  
  830.  
  831.  
  832. /* BLOGROLL TAB STARTS HERE*/
  833.  
  834. #blogroll {
  835. width: 90%;
  836. margin: 0 auto;
  837. }
  838.  
  839. #fol{
  840. margin:0 30px 30px 0;
  841. height:64px;
  842. width:64px;
  843. display:inline-block;
  844. background:{color:background};
  845. position:relative;
  846. }
  847.  
  848. .name{
  849. position:absolute;
  850. top: 50%;
  851. transform: translateY(-50%);
  852. left:-2.5px;
  853. width:59px;
  854. padding:5px 5px;
  855. text-align:center;
  856. font-size:8px;
  857. font-weight:800;
  858. letter-spacing:1px;
  859. opacity:0;
  860. text-transform:uppercase;
  861. -webkit-transition: .2s ease-in-out;
  862. -moz-transition: .2s ease-in-out;
  863. -ms-transition: .2s ease-in-out;
  864. -transition: .2s ease-in-out;
  865. }
  866.  
  867. .name:before{
  868. content:"";
  869. width:12px;
  870. height:100%;
  871. position: absolute;
  872. top: -1px;
  873. left: 0;
  874. border-top: 1px solid {color:accent1};
  875. border-left: 1px solid {color:accent1};
  876. border-bottom: 1px solid {color:accent1};
  877. }
  878.  
  879. .name:after{
  880. content:"";
  881. width:12px;
  882. height: 100%;
  883. position: absolute;
  884. top: -1px;
  885. right: 0;
  886. border-top: 1px solid {color:accent1};
  887. border-right: 1px solid {color:accent1};
  888. border-bottom: 1px solid {color:accent1};
  889. }
  890.  
  891. #fol:hover img{
  892. opacity:0;
  893. -webkit-transition: .3s ease-in-out;
  894. -moz-transition: .3s ease-in-out;
  895. -ms-transition: .3s ease-in-out;
  896. -transition: .3s ease-in-out;
  897. }
  898.  
  899. #fol img{
  900. -webkit-transition: .3s ease-in-out;
  901. -moz-transition: .3s ease-in-out;
  902. -ms-transition: .3s ease-in-out;
  903. -transition: .3s ease-in-out;
  904. }
  905.  
  906. #fol:hover .name {
  907. opacity: 1;
  908. -webkit-transition: .9s ease-in-out;
  909. -moz-transition: .9s ease-in-out;
  910. -ms-transition: .9s ease-in-out;
  911. -transition: .9s ease-in-out;
  912. }
  913. /* BLOGROLL TAB ENDS HERE*/
  914.  
  915.  
  916.  
  917.  
  918.  
  919.  
  920. /* ASKBOX TAB STARTS HERE*/
  921. #askbox{
  922. position:absolute;
  923. top: 50%;
  924. transform: translateY(-50%);
  925. left:50%;
  926. width:500px;
  927. margin-left:-250px;
  928. }
  929. /* ASKBOX ENDS ENDS HERE*/
  930.  
  931.  
  932.  
  933.  
  934.  
  935.  
  936.  
  937. /* TAG LINKS TAB STARTS HERE*/
  938. #tagnav{
  939. width:910px;
  940. height:550px;
  941. }
  942.  
  943. .tnav{
  944. display:inline-block;
  945. vertical-align:middle;
  946. background:{color:posts};
  947. width:200px;
  948. padding:10px;
  949. margin:38px;
  950. }
  951.  
  952. .tnav li{list-style-type:none;border-bottom:1px solid {color:border};padding:10px 0;}
  953.  
  954. .tnav li a{
  955. font-weight:800;
  956. font-size:8px;
  957. margin-left:5px;
  958. display:block;
  959. text-transform:uppercase;
  960. letter-spacing:2px;
  961. position:Relative;
  962. }
  963.  
  964. .tnav li a:hover:before{opacity:1;}
  965.  
  966. .tnav li a:before{
  967. opacity:0;
  968. content:"";
  969. position:absolute;
  970. left:-30px;
  971. top:4px;
  972. background: {color:background};
  973. width: 8px !important;
  974. height: 8px;
  975. border-radius: 30px;
  976. background-image: -webkit-radial-gradient( hsla(56,100%,90%,1) 0%, hsla(56,100%,70%,1) 15%, hsla(56,100%,60%,.3) 28%, hsla(56,100%,30%,0) 70% );
  977. background-repeat: no-repeat;
  978. -webkit-transition: background-position .15s cubic-bezier(.8, 0, 1, 1),
  979. -webkit-transform .25s cubic-bezier(.8, 0, 1, 1);
  980. -webkit-transition: 0.3s ease;
  981. transition: 0.3s ease;
  982. }
  983.  
  984. .tnav h1{
  985. width:200px;
  986. top:-10px;
  987. left:-15px;
  988. font-weight:800;
  989. line-height:19px;
  990. font-size:14px;
  991. text-transform: uppercase;
  992. text-align: center;
  993. position:relative;
  994. padding: 10px 15px;
  995. display:block;
  996. }
  997.  
  998. .tnav h1:before{
  999. content:"";
  1000. width:12px;
  1001. height: 100%;
  1002. position: absolute;
  1003. top: -4px;
  1004. left: 0;
  1005. border-top: 4px solid {color:accent3};
  1006. border-left: 4px solid {color:accent3};
  1007. border-bottom: 4px solid {color:accent3};
  1008. }
  1009.  
  1010. .tnav h1:after{
  1011. content:"";
  1012. width:12px;
  1013. height: 100%;
  1014. position: absolute;
  1015. top: -4px;
  1016. right: 0;
  1017. border-top: 4px solid {color:accent3};
  1018. border-right: 4px solid {color:accent3};
  1019. border-bottom: 4px solid {color:accent3};
  1020. }
  1021. /* TAG LINKS TAB ENDS HERE*/
  1022. </style>
  1023. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  1024. <script>
  1025. // minimal soundcloud player © shythemes.tumblr
  1026. $(document).ready(function(){
  1027. var color = '#ffe500'; // color of play button (hex)
  1028. $('.soundcloud_audio_player').each(function(){
  1029. $(this).attr({ src: $(this).attr('src').split('&')[0] + '&amp;liking=false&amp;sharing=false&amp;auto_play=false&amp;show_comments=false&amp;continuous_play=false&amp;buying=false&amp;show_playcount=false&amp;show_artwork=true&amp;origin=tumblr&amp;color=' + color.split('#')[1], height: 20, width: '100%' });
  1030. });
  1031. });
  1032. </script>
  1033. </head>
  1034. <body>
  1035.  
  1036.  
  1037. <div class="pagination">
  1038. {block:Pagination}{block:PreviousPage}<a href="{PreviousPage}">previous</a> &middot;{/block:PreviousPage} {block:NextPage}<a href="{NextPage}" id="next">next</a>{/block:NextPage}{/block:Pagination}
  1039. </div>
  1040.  
  1041.  
  1042.  
  1043.  
  1044.  
  1045.  
  1046.  
  1047.  
  1048.  
  1049.  
  1050.  
  1051.  
  1052.  
  1053.  
  1054.  
  1055. <!-- TABS START HERE -->
  1056. <div id="tabbed">
  1057.  
  1058.  
  1059. <!-- LEFT NAVIGATION STARTS HERE -->
  1060. <div class="tabs-header">
  1061. <div class="border"></div>
  1062. <ul>
  1063. <li class="active"><a href="#tab-2" tab-id="2">Hero Posts</a></li>
  1064. <li><a href="#tab-1" tab-id="1">Hero</a></li>
  1065. <li><a href="#tab-3" tab-id="3">fanclub</a></li>
  1066. <li><a href="#tab-4" tab-id="4">fanmail</a></li>
  1067. <li><a href="#tab-5" tab-id="5">Linked</a></li>
  1068. </ul>
  1069.  
  1070.  
  1071.  
  1072. <div id="mainav">
  1073. <li><a href="/"><img src="http://static.tumblr.com/hczaopr/MY4nyiep5/home.png"></a></li>
  1074. <li><a href="#tab-4" tab-id="4"><img src="http://static.tumblr.com/hczaopr/3IZnyif2c/msg.png"></a></li>
  1075. <li><a href="/archive"><img src="http://static.tumblr.com/hczaopr/d05nyif2m/calendar.png"></a></li>
  1076. <li><a href="#tab-5" tab-id="5"><img src="http://static.tumblr.com/hczaopr/5JInyif2t/extra.png"></a></li>
  1077. </div>
  1078. </div>
  1079. <!-- LEFT NAVIGATION ENDS HERE -->
  1080.  
  1081.  
  1082.  
  1083. <div class="tabs">
  1084. <div class="tabs-content">
  1085.  
  1086.  
  1087. <!-- ABOUT TAB STARTS HERE -->
  1088. <div tab-id="1" class="tab">
  1089. <div id="hero">
  1090. <div class="sclass"><h2>S-class<span>14</span></h2></div>
  1091.  
  1092. <div class="heroimg"></div>
  1093.  
  1094. <div class="herodesc">
  1095. <div class="title"><Span>Genos</span></div>
  1096.  
  1097. <div class="stats">
  1098. <h1>Stats</h1>
  1099. <ul class="left">
  1100. <li><b>Race</b> Human-based cyborg</li>
  1101. <li><b>Alias</b> Demon Cyborg</li>
  1102. <li><b>Age</b> 19</li>
  1103. <li><b>Sex</b> Male</li>
  1104. <li><b>Height</b> 178cm (5'10")</li>
  1105. <li><b>Location</b> Z-City</li>
  1106. <li></li>
  1107. </ul>
  1108.  
  1109. <ul class="right">
  1110. <li><b>Occupation</b> Hero</li>
  1111. <li><b>Level</b> S-Class</li>
  1112. <li><b>Affiliations</b> Hero Association</li>
  1113. <li><b>Partner(s)</b> Saitama</li>
  1114. <li><b>Weapons</b> Cyborg body</li>
  1115. </ul>
  1116. </div>
  1117.  
  1118.  
  1119. <div class="powers">
  1120. <h1>Cyborg Mods</h1>
  1121. <ul>
  1122. <li><b>Heat Beams</b> Genos's palms contain ports which allow him to fire large and powerful blasts of heat or flame significant distances</li>
  1123. <li><b>Core</b> Genos' cyborg parts are powered by an orb in his chest labeled "core," designed by Dr. Stench. </li>
  1124. <li><b>Armor and Replacement Parts</b> Genos can lose limbs or have his body torn asunder, only to return to perfect 'health' through replacement parts and repairs</li>
  1125. <li><b>Sensors</b> Genos's android body contains a number of passive and active sensors which allow him to scan the environment for enemies, both during active combat and while scouting from a distance.</li>
  1126. <li><b>Anti-Saitama Tactical Arms</b> These arms are differentiated from his normal arms by being black, having much larger shoulders, forearms and fists and generating a glow between the plates of metal and having his eyes go white when active. </li>
  1127. <li><b></b></li>
  1128. </ul>
  1129.  
  1130. </div>
  1131. </div>
  1132. </div>
  1133. </div>
  1134. <!-- ABOUT TAB ENDS HERE -->
  1135.  
  1136.  
  1137.  
  1138.  
  1139.  
  1140.  
  1141. <!-- POSTS TAB STARTS HERE -->
  1142. <div tab-id="2" class="tab active">
  1143.  
  1144. <div id="center">
  1145. {block:Posts}
  1146. <div class="entry">
  1147.  
  1148. {block:PermalinkPage}
  1149. <div id="caption">
  1150. <div id="perma">
  1151. {block:Date}<b>{12HourWithZero}:{Minutes}:{Seconds}</b> — {TimeAgo}{/block:Date} <b>|</b> {NoteCount} <b>|</b> <a href="/random">Random</a>{block:RebloggedFrom} <b>|</b> <a href="{ReblogParentURL}">Via</a> <b>/</b> <a href="{ReblogRootURL}">Source</a>{/block:RebloggedFrom}
  1152. </div>
  1153.  
  1154. {block:HasTags}
  1155. <div id="tags">
  1156. <b>Archived under:</b> {block:Tags}<a href="{TagURL}">{Tag}</a>{/block:Tags}
  1157. </div>
  1158. {/block:HasTags}
  1159. {block:Caption}
  1160. {Caption}
  1161. {/block:Caption}
  1162. </div>
  1163. {/block:PermalinkPage}
  1164.  
  1165. {block:IndexPage}
  1166. <div id="perma">
  1167. <a href="{permalink}"><div class="pma"></div> {NoteCount}</a>
  1168. </div>
  1169. {/block:IndexPage}
  1170.  
  1171. {block:Text}
  1172. {block:Title}
  1173. <span><h1><a href="{permalink}">{Title}</a></h1></span>
  1174. {/block:Title}
  1175. <div class="ent">{Body}</div>
  1176. {/block:Text}
  1177.  
  1178.  
  1179.  
  1180. {block:Link}
  1181. <span><h1><a href="{URL}" {Target}>{Name}</a></h1></span>
  1182. {block:Description}<div class="ent">{Description}</div>{/block:Description}
  1183. {/block:Link}
  1184.  
  1185.  
  1186.  
  1187.  
  1188. {block:Photo}
  1189. {block:IndexPage}<a href="{permalink}"><img src="{PhotoURL-500}" alt="{PhotoAlt}"></a>{/block:IndexPage}
  1190.  
  1191. {block:PermalinkPage}<img src="{PhotoURL-500}" alt="{PhotoAlt}">{/block:PermalinkPage}
  1192. {/block:Photo}
  1193.  
  1194.  
  1195.  
  1196. {block:Photoset}
  1197. {block:IndexPage}{Photoset-250}{/block:IndexPage}
  1198.  
  1199. {block:permalinkpage}{Photoset-400}{/block:permalinkpage}
  1200. {/block:Photoset}
  1201.  
  1202.  
  1203.  
  1204. {block:Quote}
  1205. <h2>{Quote}</h2>
  1206. {block:Source}<div class="source">— {Source}{/block:Source}</div>
  1207. {/block:Quote}
  1208.  
  1209.  
  1210.  
  1211. {block:Chat}
  1212. {block:Title}<span><h1><a href="{Permalink}">{Title}</a></h1></span>{/block:Title}
  1213.  
  1214. <ul class="chat">
  1215. {block:Lines}
  1216. <li class="{Alt} user_{UserNumber}">
  1217. {block:Label}
  1218. <span class="label">{Label}</span>
  1219. {/block:Label}{Line}</li>{/block:Lines}
  1220. </ul>
  1221. {/block:Chat}
  1222.  
  1223.  
  1224.  
  1225. {block:Video}
  1226. {block:IndexPage}{Video-250}{/block:IndexPage}
  1227. {block:permalinkpage}{Video-400}{/block:permalinkpage}
  1228. {/block:Video}
  1229.  
  1230.  
  1231.  
  1232.  
  1233. {block:Audio}
  1234. <div id="audio"><div class="audio">{AudioPlayerBlack}</div></div>
  1235. <div id="alart">
  1236. {block:TrackName}<h1>{TrackName}</h1>{/block:TrackName}
  1237. {block:permalinkpage}{block:AlbumArt}<img src="{AlbumArtURL}">
  1238. {/block:AlbumArt}{/block:permalinkpage}
  1239. </div>
  1240. {/block:Audio}
  1241.  
  1242.  
  1243.  
  1244.  
  1245.  
  1246.  
  1247. {block:Answer}
  1248. <div id="question"><spans><a href="{Permalink}">{Asker}</a></spans> <i>asked</i>{Question}</div>
  1249. {Answer}
  1250. {/block:answer}
  1251.  
  1252.  
  1253.  
  1254.  
  1255.  
  1256.  
  1257.  
  1258. {block:PostNotes}{PostNotes}{/block:PostNotes}
  1259.  
  1260.  
  1261. </div>
  1262.  
  1263.  
  1264.  
  1265. {block:ContentSource} <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}" width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" /> {/block:SourceLogo} {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo}--> {/block:ContentSource}
  1266. {/block:Posts}
  1267. </div>
  1268.  
  1269. {block:Pagination}
  1270. <div id="pagination">
  1271. <b>{CurrentPage}</b> OF <b>{TotalPages}</b><br><br>
  1272. {block:PreviousPage}<a href="{PreviousPage}"><img src="http://static.tumblr.com/hczaopr/zRonynll8/before.png"></a>{/block:PreviousPage}
  1273. {block:NextPage}<a href="{NextPage}"><img src="http://static.tumblr.com/hczaopr/ZFvnynll3/next.png"></a>{/block:NextPage}
  1274. </div>
  1275. {/block:Pagination}
  1276. </div>
  1277.  
  1278. <!-- POSTS TAB ENDS HERE -->
  1279.  
  1280.  
  1281.  
  1282.  
  1283.  
  1284.  
  1285.  
  1286.  
  1287.  
  1288.  
  1289.  
  1290.  
  1291.  
  1292.  
  1293. <!-- BLOGROLL TAB STARTS HERE -->
  1294. <div tab-id="3" class="tab">
  1295. <div id="blogroll"><center>
  1296. {block:Following}{block:Followed}
  1297. <a href='{FollowedURL}'><div id="fol"><img src='{FollowedPortraitURL-64}'><span class="name">{FollowedName}</span></div></a>{/block:Followed}{/block:Following}
  1298. </center></div>
  1299. </div>
  1300.  
  1301. <!-- BLOGROLL TAB ENDS HERE -->
  1302.  
  1303.  
  1304.  
  1305.  
  1306.  
  1307. <!-- ASKBOX TAB STARTS HERE. MAKE SURE YOU CHANGE ADDYOURTUMBLRNAMEHERE.tumblr.com TO YOUR TUMBLR URL -->
  1308. <div tab-id="4" class="tab">
  1309. <div id="askbox">
  1310. <iframe frameborder="0" scrolling="no" width="100%" height="190" src="https://www.tumblr.com/ask_form/ADDYOURTUMBLRNAMEHERE.tumblr.com" style="background-color:transparent; overflow:hidden;" id="ask_form"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]-->
  1311. </div>
  1312. </div>
  1313. <!-- ASKSBOX TAB ENDS HERE -->
  1314.  
  1315.  
  1316.  
  1317.  
  1318.  
  1319.  
  1320. <!-- LINKS/TAGS TAB STARTS HERE -->
  1321. <div tab-id="5" class="tab">
  1322.  
  1323. <div id="tagnav">
  1324.  
  1325. <div class="tnav">
  1326. <h1>TITLE OF BOX GOES HERE</h1>
  1327. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1328. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1329. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1330. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1331. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1332. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1333. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1334. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1335. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1336. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1337. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1338. </div>
  1339.  
  1340. <div class="tnav">
  1341. <h1>TITLE OF BOX GOES HERE</h1>
  1342. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1343. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1344. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1345. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1346. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1347. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1348. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1349. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1350. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1351. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1352. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1353. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1354. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1355. </div>
  1356.  
  1357.  
  1358. <div class="tnav">
  1359. <h1>title 3</h1>
  1360. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1361. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1362. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1363. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1364. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1365. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1366. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1367. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1368. </div>
  1369.  
  1370.  
  1371. <div class="tnav">
  1372. <h1>TITLE OF BOX GOES HERE</h1>
  1373. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1374. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1375. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1376. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1377. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1378. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1379. </div>
  1380.  
  1381. <div class="tnav">
  1382. <h1>TITLE OF BOX GOES HERE</h1>
  1383. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1384. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1385. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1386. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1387. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1388. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1389. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1390. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1391. </div>
  1392.  
  1393. <div class="tnav">
  1394. <h1>TITLE OF BOX GOES HERE</h1>
  1395. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1396. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1397. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1398. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1399. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1400. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1401. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1402. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1403. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1404. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1405. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1406. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1407. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1408. <li><a href="LINK URL GOES HERE">NAME OF LINK GOES HERE</a></li>
  1409. </div>
  1410.  
  1411. </div>
  1412. </div>
  1413. <!-- LINKS/TAGS TAB ENDS HERE -->
  1414.  
  1415.  
  1416.  
  1417. <!-- ARCHIVES TAB STARTS HERE. MAKE SURE YOU REPLACE THE "INSERT YOUR URL HERE" WITH YOUR OWN TUMBLR URL. -->
  1418. <div tab-id="6" class="tab">
  1419. <div id="archive">
  1420. <iframe src="http://INSERT YOUR URL HERE.tumblr.com/archive"></iframe>
  1421. </div>
  1422. </div>
  1423. <!-- ARCHIVE TAB ENDS HERE -->
  1424.  
  1425.  
  1426. </div>
  1427. </div>
  1428. </div>
  1429.  
  1430. <!-- TABS END HERE -->
  1431.  
  1432.  
  1433.  
  1434.  
  1435.  
  1436. <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  1437. <script src="http://static.tumblr.com/hczaopr/3JLny6m46/index.js"></script>
  1438. <script src="http://static.tumblr.com/6hsqxdt/QBym35odk/jquery.masonry.js"></script>
  1439. <div class="cred"><a href="http://ninpen.tumblr.com/">thm.</a></div>
  1440. <script>
  1441. $(function(){
  1442. var $container = $('#center');
  1443. $container.imagesLoaded(function(){
  1444. $container.masonry({
  1445. itemSelector: '.entry',
  1446. });
  1447. });
  1448. $container.infinitescroll({
  1449. itemSelector : ".entry",
  1450. navSelector : "div.pagination",
  1451. nextSelector : ".pagination a#next",
  1452. loadingImg : "",
  1453. loadingText : "<em></em>",
  1454. bufferPx : 10000,
  1455. extraScrollPx: 12000,
  1456. },
  1457. // trigger Masonry as a callback
  1458. function( newElements ) {
  1459. var $newElems = $( newElements ).css({ opacity: 0 });
  1460. // ensure that images load before adding to masonry layout
  1461. $newElems.imagesLoaded(function(){
  1462. $newElems.animate({ opacity: 1 });
  1463. $container.masonry( 'appended', $newElems, true );
  1464. });
  1465. }
  1466. );
  1467. });
  1468. </script>
  1469.  
  1470.  
  1471. </body>
  1472. </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!