API tools faq
paste
Advertisement
alinarps

PAGE 004: "KIT" // ALINARPS

alinarps
Mar 6th, 2015
820
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 32.71 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.  
  3. <!--
  4.  
  5. PAGE 004: "KIT" by ALINARPS
  6. - Please don't steal or redistribute, I worked very hard on this.
  7. - You can edit to your own liking, but don't repost any edited versions unless you have talked to me first.
  8. - If you have any questions regarding this page, feel free to ask!
  9. - Have fun with it!
  10.  
  11. -->
  12.  
  13. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  14.  
  15. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script> <script> (function($){ $(document).ready(function(){ $("[title],a[title],img[title]").style_my_tooltips({ tip_follows_cursor:true, tip_delay_time:100, tip_fade_speed:300, attribute:"title" }); }); })(jQuery); </script>
  16.  
  17. <title>{Title}</title>
  18.  
  19. <link rel="shortcut icon" href="{Favicon}" />
  20. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  21. <meta name="description" content="{MetaDescription}" />
  22.  
  23. <style type="text/css">
  24.  
  25. /*BASICS*/
  26.  
  27. body {
  28. background-color:#ffffff;
  29. font-family:'arial';
  30. font-size:12px;
  31. text-align:justify;
  32. color:#000000;
  33. }
  34.  
  35. small, sup, sub{
  36. font-size:12px;
  37. }
  38.  
  39. a {
  40. text-decoration:none;
  41. color:#eeeeee;
  42. -webkit-transition: all 0.5s ease-out;
  43. -moz-transition: all 0.5s ease-out;
  44. transition: all 0.5s ease-out;
  45. }
  46.  
  47. a:hover {
  48. text-decoration:none;
  49. color:#ffffff;
  50. -webkit-transition: all 0.5s ease-out;
  51. -moz-transition: all 0.5s ease-out;
  52. transition: all 0.5s ease-out;
  53. }
  54.  
  55. blockquote {
  56. background-color:#ffffff;
  57. margin-left:40px;
  58. color:#000000;
  59. border-left:3px solid #000000;
  60. padding:10px;
  61. }
  62.  
  63. blockquote blockquote{
  64. margin-left:3px;
  65. }
  66.  
  67. h1{
  68. background-color:#d4d4d4;
  69. color:#000000;
  70. padding:5px;
  71. border-bottom:3px solid #000000;
  72. font-size:12px;
  73. text-align:center;
  74. text-transform:uppercase;
  75. white-space:normal;
  76. }
  77.  
  78. #s-m-t-tooltip {
  79. max-width:250px;
  80. padding:10px;
  81. margin:20px 0px 0px 20px;
  82. background-color: #000000;
  83. font-size:11px;
  84. letter-spacing:0px;
  85. color:#d4d4d4;
  86. z-index:999999999999999999999999999999999999;
  87. }
  88.  
  89. /*SCROLLBAR*/
  90.  
  91. ::-webkit-scrollbar-thumb {
  92. height:5px;
  93. background-color:#000000;
  94. border:1px solid #000000;
  95. }
  96.  
  97. ::-webkit-scrollbar {
  98. margin-right:5px;
  99. width:5px;
  100. height:5px;
  101. background-color:#d4d4d4;
  102. }
  103.  
  104. /*NAVIGATION*/
  105.  
  106. .container{
  107. background-color:#aaaaaa;
  108. padding:10px;
  109. position:fixed;
  110. margin-top:150px;
  111. margin-left:250px;
  112. width:600px;
  113. height:400px;
  114. }
  115.  
  116. .nav{
  117. background-color:#cccccc;
  118. width:193px;
  119. height:400px;
  120. position:fixed;
  121. }
  122.  
  123. /*LINKS*/
  124.  
  125. .navi{
  126. position:fixed;
  127. margin-left:178px;
  128. margin-top:320px;
  129. opacity:1;
  130. text-align:left;
  131. }
  132.  
  133. .navi a{
  134. padding:10px;
  135. background-color:#000000;
  136. color:#ffffff;
  137. display:block;
  138. width:52px;
  139. margin-bottom:10px;
  140. text-align:right;
  141. font-weight:600;
  142. text-transform:uppercase;
  143. text-shadow: 2px 1px 0px #aaaaaa;
  144. }
  145.  
  146. .navi a:hover{
  147. background-color:#cccccc;
  148. color:#000000;
  149. text-shadow: 2px 1px 0px #aaaaaa;
  150. }
  151.  
  152.  
  153. /*NAVIGATION TAB*/
  154.  
  155. .ntab{
  156. width:600px;
  157. height:400px;
  158. background-color:#cccccc;
  159. padding:10px;
  160. position:fixed;
  161. display:none;
  162. margin-top:150px;
  163. margin-left:250px;
  164. }
  165.  
  166. .x{
  167. padding:3px;
  168. background-color:#000000;
  169. color:#d4d4d4;
  170. text-align:center;
  171. float:right;
  172. font-weight:600;
  173. }
  174.  
  175. .one{
  176. position:fixed;
  177. margin-top:173px;
  178. margin-left:31px;
  179. padding:10px;
  180. background-color:#ffffff;
  181. color:#000000;
  182. width:110px;
  183. text-align:center;
  184. font-weight:600;
  185. text-transform:uppercase;
  186. cursor:pointer;
  187. text-shadow:2px 1px 0px #aaaaaa;
  188. -webkit-transition: all 0.5s ease-out;
  189. -moz-transition: all 0.5s ease-out;
  190. transition: all 0.5s ease-out;
  191. }
  192.  
  193. .one:hover{
  194. background-color:#aaaaaa;
  195. color:#ffffff;
  196. text-shadow:2px 1px 0px #000000;
  197. -webkit-transition: all 0.5s ease-out;
  198. -moz-transition: all 0.5s ease-out;
  199. transition: all 0.5s ease-out;
  200. }
  201.  
  202. .links{
  203. overflow:auto;
  204. padding:10px;
  205. margin-top:10px;
  206. width:205px;
  207. height:350px;
  208. background-color:#aaaaaa;
  209. }
  210.  
  211. .links a{
  212. display:inline-block;
  213. background-color:#000000;
  214. color:#d4d4d4;
  215. width:95%;
  216. margin-bottom:10px;
  217. padding:5px;
  218. text-align:center;
  219. font-weight:600;
  220. text-transform:uppercase;
  221. -webkit-transition: all 0.5s ease-out;
  222. -moz-transition: all 0.5s ease-out;
  223. transition: all 0.5s ease-out;
  224. }
  225.  
  226. .links a:hover{
  227. background-color:#d4d4d4;
  228. color:#000000;
  229. -webkit-transition: all 0.5s ease-out;
  230. -moz-transition: all 0.5s ease-out;
  231. transition: all 0.5s ease-out;
  232. }
  233.  
  234. .ad{
  235. float:right;
  236. background-color:#d4d4d4;
  237. color:#000000;
  238. padding:10px;
  239. width:345px;
  240. height:150px;
  241. overflow:auto;
  242. margin-top:-170px;
  243. }
  244.  
  245. /*CHARACTER TAB*/
  246.  
  247. .ch{
  248. background-color:#cccccc;
  249. width:193px;
  250. height:400px;
  251. position:fixed;
  252. margin-left:203px;
  253. }
  254.  
  255. .ctab{
  256. width:600px;
  257. height:400px;
  258. background-color:#cccccc;
  259. padding:10px;
  260. position:fixed;
  261. display:none;
  262. margin-top:150px;
  263. margin-left:250px;
  264. overflow:auto;
  265. }
  266.  
  267. .two{
  268. position:fixed;
  269. margin-top:173px;
  270. margin-left:31px;
  271. padding:10px;
  272. background-color:#ffffff;
  273. color:#000000;
  274. width:110px;
  275. text-align:center;
  276. font-weight:600;
  277. text-transform:uppercase;
  278. cursor:pointer;
  279. text-shadow:2px 1px 0px #aaaaaa;
  280. -webkit-transition: all 0.5s ease-out;
  281. -moz-transition: all 0.5s ease-out;
  282. transition: all 0.5s ease-out;
  283. }
  284.  
  285. .two:hover{
  286. background-color:#aaaaaa;
  287. color:#ffffff;
  288. text-shadow:2px 1px 0px #000000;
  289. -webkit-transition: all 0.5s ease-out;
  290. -moz-transition: all 0.5s ease-out;
  291. transition: all 0.5s ease-out;
  292. }
  293.  
  294. .xx{
  295. padding:3px;
  296. background-color:#000000;
  297. color:#d4d4d4;
  298. text-align:center;
  299. float:right;
  300. font-weight:600;
  301. }
  302.  
  303. .c{
  304. width:287px;
  305. height:190px;
  306. display:inline-block;
  307. background-color:#ffffff;
  308. margin-right:5px;
  309. margin-left:5px;
  310. margin-bottom:5px;
  311. margin-top:5px;
  312. float:left;
  313. -webkit-transition: all 0.5s ease-out;
  314. -moz-transition: all 0.5s ease-out;
  315. transition: all 0.5s ease-out;
  316. }
  317.  
  318. .more{
  319. margin-right:10px;
  320. margin-top:10px;
  321. font-weight:600;
  322. padding:3px;
  323. background-color:#000000;
  324. color:#d4d4d4;
  325. float:right;
  326. cursor:pointer;
  327. }
  328.  
  329. .info{
  330. width:267px;
  331. height:170px;
  332. padding:10px;
  333. display:none;
  334. background-color:#000000;
  335. color:#d4d4d4;
  336. margin-right:5px;
  337. margin-left:-292px;
  338. margin-bottom:5px;
  339. margin-top:5px;
  340. float:left;
  341. z-index:-999;
  342. }
  343.  
  344. /*BLOGROLL TAB*/
  345.  
  346. .br{
  347. background-color:#cccccc;
  348. width:193px;
  349. height:400px;
  350. position:fixed;
  351. margin-left:406px;
  352. }
  353.  
  354. .btab{
  355. width:600px;
  356. height:400px;
  357. background-color:#cccccc;
  358. padding:10px;
  359. position:fixed;
  360. display:none;
  361. margin-top:150px;
  362. margin-left:250px;
  363. overflow:auto;
  364. }
  365.  
  366. .three{
  367. position:fixed;
  368. margin-top:173px;
  369. margin-left:31px;
  370. padding:10px;
  371. background-color:#ffffff;
  372. color:#000000;
  373. width:110px;
  374. text-align:center;
  375. font-weight:600;
  376. text-transform:uppercase;
  377. cursor:pointer;
  378. text-shadow:2px 1px 0px #aaaaaa;
  379. -webkit-transition: all 0.5s ease-out;
  380. -moz-transition: all 0.5s ease-out;
  381. transition: all 0.5s ease-out;
  382. }
  383.  
  384. .three:hover{
  385. background-color:#aaaaaa;
  386. color:#ffffff;
  387. text-shadow:2px 1px 0px #000000;
  388. -webkit-transition: all 0.5s ease-out;
  389. -moz-transition: all 0.5s ease-out;
  390. transition: all 0.5s ease-out;
  391. }
  392.  
  393. .xxx{
  394. padding:3px;
  395. background-color:#000000;
  396. color:#d4d4d4;
  397. text-align:center;
  398. float:right;
  399. font-weight:600;
  400. }
  401.  
  402. .btab img {
  403. padding: 0px;
  404. width: 55px;
  405. height:55px;
  406. margin: 3px;
  407. border: 1px solid #ffffff;
  408. background-color: #ffffff;
  409. }
  410.  
  411. /*CREDIT (REMOVE THIS AND I'LL KILL YOU...)*/
  412.  
  413. .credit{
  414. right:10px;
  415. bottom:10px;
  416. z-index:9999999999999999999999999999999999999999;
  417. padding:5px;
  418. background-color:#000000;
  419. color:#000000;
  420. font-weight:600;
  421. position:fixed;
  422. }
  423.  
  424. </style>
  425.  
  426. <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  427. <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  428.  
  429. </head>
  430.  
  431. <body>
  432.  
  433. <div class="container">
  434.  
  435. <div class="nav" style="background-image:url('(OPTIONAL) BACKGROUND IMAGE URL HERE');">
  436. <div class="one">NAVIGATION</div>
  437. </div>
  438.  
  439. <div class="ch" style="background-image:url('(OPTIONAL) BACKGROUND IMAGE URL HERE');">
  440. <div class="two">CHARACTERS</div>
  441. </div>
  442.  
  443. <div class="br" style="background-image:url('(OPTIONAL) BACKGROUND IMAGE URL HERE');">
  444. <div class="three">BLOGROLL</div>
  445. </div>
  446.  
  447. </div>
  448.  
  449. <!--side links-->
  450. <div class="navi">
  451. <a href="/">home</a>
  452. <a href="/">mssg</a>
  453. </div>
  454.  
  455. </div>
  456.  
  457. <!----navigation tab---->
  458. <div class="ntab">
  459.  
  460. <div style="float:left;padding:3px;background-color:#000000;font-weight:600;color:#d4d4d4;width:548px;text-align:center;margin-bottom:10px;">
  461. <em>navigation.</em>
  462. </div>
  463.  
  464. <div class="x"><a href="#" style="color:#d4d4d4;">close</a></div>
  465.  
  466. <div class="links">
  467. <h1>before acceptance</h1>
  468. <a href="/">link</a>
  469. <a href="/">link</a>
  470. <a href="/">link</a>
  471. <a href="/">link</a>
  472. <a href="/">link</a>
  473. <a href="/">link</a>
  474.  
  475. <h1>after acceptance</h1>
  476. <a href="/">link</a>
  477. <a href="/">link</a>
  478. <a href="/">link</a>
  479. <a href="/">link</a>
  480. <a href="/">link</a>
  481. <a href="/">link</a>
  482. </div>
  483.  
  484. <img src="365x190" style="width:365px;height:190px;float:right;background-color:#d4d4d4;margin-top:-370px;"/>
  485.  
  486. <div class="ad">
  487. <img src="345x75" style="width:345px;height:75px;"/>
  488. <blockquote>some admin stuff here</blockquote>
  489. <img src="345x75" style="width:345px;height:75px;"/>
  490. <blockquote>some admin stuff here</blockquote>
  491. </div>
  492.  
  493. </div>
  494.  
  495. <!----character tab---->
  496. <div class="ctab">
  497.  
  498. <div style="float:left;padding:3px;background-color:#000000;font-weight:600;color:#d4d4d4;width:543px;text-align:center;margin-bottom:10px;">
  499. <em>characters.</em>
  500. </div>
  501.  
  502. <div class="xx"><a href="#" style="color:#d4d4d4;">close</a></div>
  503.  
  504. <!--
  505.  
  506. so this is where your character "boxes" go, and since i used jquery and couldn't find a proper format and stuff, to add more, you have to also edit the jquery. but don't worry! i left instructions if you scroll down further (use ctrl+f and search for " character boxes jquery " (without quotations of course). for this, all you have to do is copy and paste from here
  507.  
  508. -->
  509.  
  510. <!--character-->
  511. <div class="c" style="background-image:url('CHARACTER IMAGE HERE');">
  512. <div class="more" id="more1">read more</div>
  513. </div>
  514. <div class="info" id="info1">
  515.  
  516. <div style="float:left;padding:3px;background-color:#d4d4d4;font-weight:600;color:#000000;width:213px;text-align:center;margin-bottom:10px;">
  517. <em>first last.</em><!--character name-->
  518. </div>
  519.  
  520. <div class="more more1" style="background-color:#d4d4d4;color:#000000;margin-top:0px;margin-right:0px;">close</div>
  521.  
  522. <img src="100x130" style="width:100px;height:130px;background-color:#ffffff;border:5px solid #d4d4d4;float:left;margin-right:10px;"/><!--image-->
  523.  
  524. <div style="overflow:auto;background-color:#d4d4d4;color:#000000;width:137px;height:130px;padding:5px;font-size:10.5px;">lorem ipsum dolor</div><!--character description-->
  525.  
  526. </div>
  527.  
  528. <!--
  529.  
  530. to here and change the numbers in id="more1" & id="info1" to the numbers that follow the last number that you left off on. if this confuses you in any way, let me know, and i'll be more than glad to help.
  531.  
  532. -->
  533.  
  534. <!--character-->
  535. <div class="c" style="background-image:url('CHARACTER IMAGE HERE');">
  536. <div class="more" id="more2">read more</div>
  537. </div>
  538. <div class="info" id="info2">
  539.  
  540. <div style="float:left;padding:3px;background-color:#d4d4d4;font-weight:600;color:#000000;width:213px;text-align:center;margin-bottom:10px;">
  541. <em>first last.</em><!--character name-->
  542. </div>
  543.  
  544. <div class="more more2" style="background-color:#d4d4d4;color:#000000;margin-top:0px;margin-right:0px;">close</div>
  545.  
  546. <img src="100x130" style="width:100px;height:130px;background-color:#ffffff;border:5px solid #d4d4d4;float:left;margin-right:10px;"/><!--image-->
  547.  
  548. <div style="overflow:auto;background-color:#d4d4d4;color:#000000;width:137px;height:130px;padding:5px;font-size:10.5px;">lorem ipsum dolor</div><!--character description-->
  549.  
  550. </div>
  551.  
  552. <!--character-->
  553. <div class="c" style="background-image:url('CHARACTER IMAGE HERE');">
  554. <div class="more" id="more3">read more</div>
  555. </div>
  556. <div class="info" id="info3">
  557.  
  558. <div style="float:left;padding:3px;background-color:#d4d4d4;font-weight:600;color:#000000;width:213px;text-align:center;margin-bottom:10px;">
  559. <em>first last.</em><!--character name-->
  560. </div>
  561.  
  562. <div class="more more3" style="background-color:#d4d4d4;color:#000000;margin-top:0px;margin-right:0px;">close</div>
  563.  
  564. <img src="100x130" style="width:100px;height:130px;background-color:#ffffff;border:5px solid #d4d4d4;float:left;margin-right:10px;"/><!--image-->
  565.  
  566. <div style="overflow:auto;background-color:#d4d4d4;color:#000000;width:137px;height:130px;padding:5px;font-size:10.5px;">lorem ipsum dolor</div><!--character description-->
  567.  
  568. </div>
  569.  
  570. <!--character-->
  571. <div class="c" style="background-image:url('CHARACTER IMAGE HERE');">
  572. <div class="more" id="more4">read more</div>
  573. </div>
  574. <div class="info" id="info4">
  575.  
  576. <div style="float:left;padding:3px;background-color:#d4d4d4;font-weight:600;color:#000000;width:213px;text-align:center;margin-bottom:10px;">
  577. <em>first last.</em><!--character name-->
  578. </div>
  579.  
  580. <div class="more more4" style="background-color:#d4d4d4;color:#000000;margin-top:0px;margin-right:0px;">close</div>
  581.  
  582. <img src="100x130" style="width:100px;height:130px;background-color:#ffffff;border:5px solid #d4d4d4;float:left;margin-right:10px;"/><!--image-->
  583.  
  584. <div style="overflow:auto;background-color:#d4d4d4;color:#000000;width:137px;height:130px;padding:5px;font-size:10.5px;">lorem ipsum dolor</div><!--character description-->
  585.  
  586. </div>
  587.  
  588. <!--character-->
  589. <div class="c" style="background-image:url('CHARACTER IMAGE HERE');">
  590. <div class="more" id="more5">read more</div>
  591. </div>
  592. <div class="info" id="info5">
  593.  
  594. <div style="float:left;padding:3px;background-color:#d4d4d4;font-weight:600;color:#000000;width:213px;text-align:center;margin-bottom:10px;">
  595. <em>first last.</em><!--character name-->
  596. </div>
  597.  
  598. <div class="more more5" style="background-color:#d4d4d4;color:#000000;margin-top:0px;margin-right:0px;">close</div>
  599.  
  600. <img src="100x130" style="width:100px;height:130px;background-color:#ffffff;border:5px solid #d4d4d4;float:left;margin-right:10px;"/><!--image-->
  601.  
  602. <div style="overflow:auto;background-color:#d4d4d4;color:#000000;width:137px;height:130px;padding:5px;font-size:10.5px;">lorem ipsum dolor</div><!--character description-->
  603.  
  604. </div>
  605.  
  606. <!--character-->
  607. <div class="c" style="background-image:url('CHARACTER IMAGE HERE');">
  608. <div class="more" id="more6">read more</div>
  609. </div>
  610. <div class="info" id="info6">
  611.  
  612. <div style="float:left;padding:3px;background-color:#d4d4d4;font-weight:600;color:#000000;width:213px;text-align:center;margin-bottom:10px;">
  613. <em>first last.</em><!--character name-->
  614. </div>
  615.  
  616. <div class="more more6" style="background-color:#d4d4d4;color:#000000;margin-top:0px;margin-right:0px;">close</div>
  617.  
  618. <img src="100x130" style="width:100px;height:130px;background-color:#ffffff;border:5px solid #d4d4d4;float:left;margin-right:10px;"/><!--image-->
  619.  
  620. <div style="overflow:auto;background-color:#d4d4d4;color:#000000;width:137px;height:130px;padding:5px;font-size:10.5px;">lorem ipsum dolor</div><!--character description-->
  621.  
  622. </div>
  623.  
  624. <!--character-->
  625. <div class="c" style="background-image:url('CHARACTER IMAGE HERE');">
  626. <div class="more" id="more7">read more</div>
  627. </div>
  628. <div class="info" id="info7">
  629.  
  630. <div style="float:left;padding:3px;background-color:#d4d4d4;font-weight:600;color:#000000;width:213px;text-align:center;margin-bottom:10px;">
  631. <em>first last.</em><!--character name-->
  632. </div>
  633.  
  634. <div class="more more7" style="background-color:#d4d4d4;color:#000000;margin-top:0px;margin-right:0px;">close</div>
  635.  
  636. <img src="100x130" style="width:100px;height:130px;background-color:#ffffff;border:5px solid #d4d4d4;float:left;margin-right:10px;"/><!--image-->
  637.  
  638. <div style="overflow:auto;background-color:#d4d4d4;color:#000000;width:137px;height:130px;padding:5px;font-size:10.5px;">lorem ipsum dolor</div><!--character description-->
  639.  
  640. </div>
  641.  
  642. <!--character-->
  643. <div class="c" style="background-image:url('CHARACTER IMAGE HERE');">
  644. <div class="more" id="more8">read more</div>
  645. </div>
  646. <div class="info" id="info8">
  647.  
  648. <div style="float:left;padding:3px;background-color:#d4d4d4;font-weight:600;color:#000000;width:213px;text-align:center;margin-bottom:10px;">
  649. <em>first last.</em><!--character name-->
  650. </div>
  651.  
  652. <div class="more more8" style="background-color:#d4d4d4;color:#000000;margin-top:0px;margin-right:0px;">close</div>
  653.  
  654. <img src="100x130" style="width:100px;height:130px;background-color:#ffffff;border:5px solid #d4d4d4;float:left;margin-right:10px;"/><!--image-->
  655.  
  656. <div style="overflow:auto;background-color:#d4d4d4;color:#000000;width:137px;height:130px;padding:5px;font-size:10.5px;">lorem ipsum dolor</div><!--character description-->
  657.  
  658. </div>
  659.  
  660. <!--character-->
  661. <div class="c" style="background-image:url('CHARACTER IMAGE HERE');">
  662. <div class="more" id="more9">read more</div>
  663. </div>
  664. <div class="info" id="info9">
  665.  
  666. <div style="float:left;padding:3px;background-color:#d4d4d4;font-weight:600;color:#000000;width:213px;text-align:center;margin-bottom:10px;">
  667. <em>first last.</em><!--character name-->
  668. </div>
  669.  
  670. <div class="more more9" style="background-color:#d4d4d4;color:#000000;margin-top:0px;margin-right:0px;">close</div>
  671.  
  672. <img src="100x130" style="width:100px;height:130px;background-color:#ffffff;border:5px solid #d4d4d4;float:left;margin-right:10px;"/><!--image-->
  673.  
  674. <div style="overflow:auto;background-color:#d4d4d4;color:#000000;width:137px;height:130px;padding:5px;font-size:10.5px;">lorem ipsum dolor</div><!--character description-->
  675.  
  676. </div>
  677.  
  678. <!--character-->
  679. <div class="c" style="background-image:url('CHARACTER IMAGE HERE');">
  680. <div class="more" id="more10">read more</div>
  681. </div>
  682. <div class="info" id="info10">
  683.  
  684. <div style="float:left;padding:3px;background-color:#d4d4d4;font-weight:600;color:#000000;width:213px;text-align:center;margin-bottom:10px;">
  685. <em>first last.</em><!--character name-->
  686. </div>
  687.  
  688. <div class="more more10" style="background-color:#d4d4d4;color:#000000;margin-top:0px;margin-right:0px;">close</div>
  689.  
  690. <img src="100x130" style="width:100px;height:130px;background-color:#ffffff;border:5px solid #d4d4d4;float:left;margin-right:10px;"/><!--image-->
  691.  
  692. <div style="overflow:auto;background-color:#d4d4d4;color:#000000;width:137px;height:130px;padding:5px;font-size:10.5px;">lorem ipsum dolor</div><!--character description-->
  693.  
  694. </div>
  695.  
  696. <!--character-->
  697. <div class="c" style="background-image:url('CHARACTER IMAGE HERE');">
  698. <div class="more" id="more11">read more</div>
  699. </div>
  700. <div class="info" id="info11">
  701.  
  702. <div style="float:left;padding:3px;background-color:#d4d4d4;font-weight:600;color:#000000;width:213px;text-align:center;margin-bottom:10px;">
  703. <em>first last.</em><!--character name-->
  704. </div>
  705.  
  706. <div class="more more11" style="background-color:#d4d4d4;color:#000000;margin-top:0px;margin-right:0px;">close</div>
  707.  
  708. <img src="100x130" style="width:100px;height:130px;background-color:#ffffff;border:5px solid #d4d4d4;float:left;margin-right:10px;"/><!--image-->
  709.  
  710. <div style="overflow:auto;background-color:#d4d4d4;color:#000000;width:137px;height:130px;padding:5px;font-size:10.5px;">lorem ipsum dolor</div><!--character description-->
  711.  
  712. </div>
  713.  
  714. <!--character-->
  715. <div class="c" style="background-image:url('CHARACTER IMAGE HERE');">
  716. <div class="more" id="more12">read more</div>
  717. </div>
  718. <div class="info" id="info12">
  719.  
  720. <div style="float:left;padding:3px;background-color:#d4d4d4;font-weight:600;color:#000000;width:213px;text-align:center;margin-bottom:10px;">
  721. <em>first last.</em><!--character name-->
  722. </div>
  723.  
  724. <div class="more more12" style="background-color:#d4d4d4;color:#000000;margin-top:0px;margin-right:0px;">close</div>
  725.  
  726. <img src="100x130" style="width:100px;height:130px;background-color:#ffffff;border:5px solid #d4d4d4;float:left;margin-right:10px;"/><!--image-->
  727.  
  728. <div style="overflow:auto;background-color:#d4d4d4;color:#000000;width:137px;height:130px;padding:5px;font-size:10.5px;">lorem ipsum dolor</div><!--character description-->
  729.  
  730. </div>
  731.  
  732. </div><!---end of character tab--->
  733.  
  734. <!----blogroll tab---->
  735. <div class="btab">
  736.  
  737. <div style="float:left;padding:3px;background-color:#000000;font-weight:600;color:#d4d4d4;width:547px;text-align:center;margin-bottom:10px;">
  738. <em>blogroll.</em>
  739. </div>
  740.  
  741. <div class="xxx"><a href="#" style="color:#d4d4d4;">close</a></div>
  742.  
  743. <center>
  744. {block:Following}{block:Followed}<a href="{FollowedURL}" title="{FollowedName}"><img border="1" src="{FollowedPortraitURL-96}" />{/block:Followed}{/block:Following}
  745. </center>
  746.  
  747. </div>
  748.  
  749.  
  750. <!--PLEASE DON'T TOUCH THE CREDIT!!! SERIOUSLY...-->
  751. <div class="credit"><a href="http://alinarps.tumblr.com/">ALINARPS</a></div>
  752.  
  753. </body>
  754.  
  755. <!--the javascript that runs the tabs-->
  756. <script type="text/javascript">
  757.  
  758. // character boxes jquery.
  759.  
  760. //if you need to add more characters, all you have to do is copy and paste from here
  761.  
  762. $("#more1").click( function(){
  763. $("#info1").fadeToggle("slow");
  764. });
  765. $(".more1").click( function(){
  766. $("#info1").fadeToggle("slow");
  767. });
  768.  
  769. // to here and change the number "1" to the next number that follows the last!! if you need help or have any problems, let me know. i'll be more than glad to help you out.
  770.  
  771. $("#more2").click( function(){
  772. $("#info2").fadeToggle("slow");
  773. });
  774. $(".more2").click( function(){
  775. $("#info2").fadeToggle("slow");
  776. });
  777.  
  778. $("#more3").click( function(){
  779. $("#info3").fadeToggle("slow");
  780. });
  781. $(".more3").click( function(){
  782. $("#info3").fadeToggle("slow");
  783. });
  784.  
  785. $("#more4").click( function(){
  786. $("#info4").fadeToggle("slow");
  787. });
  788. $(".more4").click( function(){
  789. $("#info4").fadeToggle("slow");
  790. });
  791.  
  792. $("#more5").click( function(){
  793. $("#info5").fadeToggle("slow");
  794. });
  795. $(".more5").click( function(){
  796. $("#info5").fadeToggle("slow");
  797. });
  798.  
  799. $("#more6").click( function(){
  800. $("#info6").fadeToggle("slow");
  801. });
  802. $(".more6").click( function(){
  803. $("#info6").fadeToggle("slow");
  804. });
  805.  
  806. $("#more7").click( function(){
  807. $("#info7").fadeToggle("slow");
  808. });
  809. $(".more7").click( function(){
  810. $("#info7").fadeToggle("slow");
  811. });
  812.  
  813. $("#more8").click( function(){
  814. $("#info8").fadeToggle("slow");
  815. });
  816. $(".more8").click( function(){
  817. $("#info8").fadeToggle("slow");
  818. });
  819.  
  820. $("#more9").click( function(){
  821. $("#info9").fadeToggle("slow");
  822. });
  823. $(".more9").click( function(){
  824. $("#info9").fadeToggle("slow");
  825. });
  826.  
  827. $("#more10").click( function(){
  828. $("#info10").fadeToggle("slow");
  829. });
  830. $(".more10").click( function(){
  831. $("#info10").fadeToggle("slow");
  832. });
  833.  
  834. $("#more11").click( function(){
  835. $("#info11").fadeToggle("slow");
  836. });
  837. $(".more11").click( function(){
  838. $("#info11").fadeToggle("slow");
  839. });
  840.  
  841. $("#more12").click( function(){
  842. $("#info12").fadeToggle("slow");
  843. });
  844. $(".more12").click( function(){
  845. $("#info12").fadeToggle("slow");
  846. });
  847.  
  848. // jquery for closing & opening tabs
  849.  
  850. $(".one").click(function(){
  851.  
  852. if($(".nav").is(':visible')){
  853. $(".nav").fadeToggle("slow");
  854. $(".ch").fadeToggle("slow");
  855. $(".br").fadeToggle("slow");
  856. $(".one").fadeToggle("slow");
  857. $(".two").fadeToggle("slow");
  858. $(".three").fadeToggle("slow");
  859. }
  860.  
  861. if($(".ntab").is(':hidden')){
  862. $(".ntab").fadeToggle("slow");
  863. }
  864. });
  865.  
  866. $(".x").click(function(){
  867. if($(".nav").is(":hidden")){
  868. $(".ntab").fadeToggle("slow");
  869. $(".nav").fadeToggle("slow");
  870. $(".ch").fadeToggle("slow");
  871. $(".br").fadeToggle("slow");
  872. $(".one").fadeToggle("slow");
  873. $(".two").fadeToggle("slow");
  874. $(".three").fadeToggle("slow");
  875. }
  876. });
  877.  
  878. $(".two").click(function(){
  879.  
  880. if($(".nav").is(':visible')){
  881. $(".nav").fadeToggle("slow");
  882. $(".ch").fadeToggle("slow");
  883. $(".br").fadeToggle("slow");
  884. $(".one").fadeToggle("slow");
  885. $(".two").fadeToggle("slow");
  886. $(".three").fadeToggle("slow");
  887. }
  888.  
  889. if($(".ctab").is(':hidden')){
  890. $(".ctab").fadeToggle("slow");
  891. }
  892. });
  893.  
  894. $(".xx").click(function(){
  895. if($(".nav").is(":hidden")){
  896. $(".nav").fadeToggle("slow");
  897. $(".ch").fadeToggle("slow");
  898. $(".br").fadeToggle("slow");
  899. $(".one").fadeToggle("slow");
  900. $(".two").fadeToggle("slow");
  901. $(".three").fadeToggle("slow");
  902. $(".ctab").fadeToggle("slow");
  903. }
  904. });
  905.  
  906. $(".three").click(function(){
  907.  
  908. if($(".nav").is(':visible')){
  909. $(".nav").fadeToggle("slow");
  910. $(".ch").fadeToggle("slow");
  911. $(".br").fadeToggle("slow");
  912. $(".one").fadeToggle("slow");
  913. $(".two").fadeToggle("slow");
  914. $(".three").fadeToggle("slow");
  915. }
  916.  
  917. if($(".btab").is(':hidden')){
  918. $(".btab").fadeToggle("slow");
  919. }
  920. });
  921.  
  922. $(".xxx").click(function(){
  923. if($(".nav").is(":hidden")){
  924. $(".nav").fadeToggle("slow");
  925. $(".ch").fadeToggle("slow");
  926. $(".br").fadeToggle("slow");
  927. $(".one").fadeToggle("slow");
  928. $(".two").fadeToggle("slow");
  929. $(".three").fadeToggle("slow");
  930. $(".btab").fadeToggle("slow");
  931. }
  932. });
  933. </script>
  934.  
  935. </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!