API tools faq
paste
kimtys

ALL IN ONE (ALTERNATIVE VER.)

kimtys
Jan 5th, 2016
2,570
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 49.19 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML>
  2. <html>
  3.  
  4. <!--
  5.  
  6.  
  7. ALL IN ONE (SECOND VER.) PAGE BY KIMTYS.TUMBLR.COM
  8.  
  9. edit as much as you want but please don't hide or remove credits!
  10.  
  11.  
  12. -->
  13.  
  14. <head>
  15. <title>{Title}</title>
  16. <link rel="shortcut icon" href="{Favicon}">
  17. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  18. <meta name="description" content="{MetaDescription}" />
  19.  
  20.  
  21.  
  22. <!---------------------------- FONTS ---------------------------->
  23.  
  24.  
  25.  
  26. <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700,400italic,600italic,700italic' rel='stylesheet' type='text/css'>
  27.  
  28. <link href='https://fonts.googleapis.com/css?family=Montserrat:400,300,800,700' rel='stylesheet' type='text/css'>
  29.  
  30.  
  31.  
  32. <!--------------------------- SCRIPTS --------------------------->
  33.  
  34.  
  35.  
  36. <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  37. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
  38.  
  39. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  40. <script src="https://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  41.  
  42. <script>
  43. (function($){
  44. $(document).ready(function(){
  45. $("a[title]").style_my_tooltips({
  46. tip_follows_cursor:true,
  47. tip_delay_time:90,
  48. tip_fade_speed:600,
  49. attribute:"title"});});
  50. })(jQuery);
  51. </script>
  52.  
  53.  
  54. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  55. <script type="text/javascript" src="https://static.tumblr.com/me5sfsd/12Qlmj66n/script.js"></script>
  56.  
  57. <script type="text/javascript">
  58. var $j = jQuery.noConflict();
  59. $j(document).ready(function() {
  60. $j('.tab-links li a').click(function() {
  61. var container = $j('.fcontent');
  62. container.imagesLoaded( function(){
  63. container.masonry({
  64. itemSelector : '#fanfic'
  65. });
  66. });
  67. })
  68. });
  69. </script>
  70.  
  71. <script type="text/javascript">
  72. var $j = jQuery.noConflict();
  73. $j(document).ready(function() {
  74. var container = $j('.lcontent');
  75. container.imagesLoaded( function(){
  76. container.masonry({
  77. itemSelector : '#list'
  78. });
  79. });
  80. });
  81. </script>
  82.  
  83. <style type="text/css">
  84.  
  85.  
  86.  
  87. /* -------------------------- SCROLLBAR -------------------------- */
  88.  
  89.  
  90.  
  91. ::-webkit-scrollbar-thumb:vertical {
  92. background: #ddd; /* scroll color */
  93. }
  94.  
  95. ::-webkit-scrollbar-thumb:horizontal {
  96. background: #ddd; /* scroll color */
  97. }
  98.  
  99.  
  100. ::-webkit-scrollbar {
  101. height: 5px;
  102. width: 3px; /* scroll width */
  103. background: transparent transparent transparent transparent;
  104. }
  105.  
  106.  
  107.  
  108. /* -------------------------- SELECTION ------------------------- */
  109.  
  110.  
  111. ::-moz-selection {background:#eee;color:#444;} /* select colors */
  112. ::selection {background:#eee;color:#444;} /* select colors */
  113.  
  114.  
  115.  
  116. /* --------------------------- TOOLTIP -------------------------- */
  117.  
  118.  
  119.  
  120. #s-m-t-tooltip {
  121. max-width:500px;
  122. margin:25px 15px;
  123. padding:3px 5px;
  124. border-bottom:1px solid #f6f6f6; /* border color */
  125. border-left:1px solid #f6f6f6; /* border color */
  126. font-size:8px;
  127. font-weight:700;
  128. z-index:999999999!important;
  129. text-transform:uppercase;
  130. background:#fff; /* background color */
  131. color:#aaa; /* text color */
  132. letter-spacing:1px;
  133. }
  134.  
  135.  
  136.  
  137. /* ---------------------------- BODY ---------------------------- */
  138.  
  139.  
  140.  
  141. body {
  142. color:#444; /* text color */
  143. background-color:#fff; /* background color */
  144. font-family: 'Source Sans Pro'; /* font */
  145. font-size:10px; /* font size */
  146. letter-spacing:0px;
  147. text-align:justify;
  148. word-wrap:break-word;
  149. margin:0;
  150. background-image:url('IMG URL'); /* background image */
  151. background-position:left top;
  152. background-attachment:fixed;
  153. background-repeat:repeat;
  154. }
  155.  
  156. blockquote {
  157. margin-left:0px;
  158. width:auto;
  159. font-size:8px;
  160. text-transform:uppercase;
  161. letter-spacing:0.5px;
  162. font-weight:normal;
  163. line-height:11px;
  164. text-align:center;
  165. padding:7px 7px 7px 7px;
  166. background:#fff; /* blockquote background color */
  167. color:#777; /* blockquote text color */
  168. margin-right:0px;
  169. border-left:solid 1px #fff; /* blockquote border color */
  170. }
  171.  
  172.  
  173. b, strong {
  174. color:#777; /* bold color */
  175. }
  176.  
  177. i, em {
  178. color:#aaa; /* italic color */
  179. }
  180.  
  181. a {
  182. color:#bbb; /* link color */
  183. text-decoration:none;
  184. transition-duration: 0.3s;
  185. -moz-transition-duration: 0.3s;
  186. -webkit-transition-duration: 0.3s;
  187. -o-transition-duration: 0.3s;
  188. }
  189.  
  190. a:hover {
  191. color:#444; /* link hover color */
  192. text-decoration:none;
  193. transition-duration: 0.3s;
  194. -moz-transition-duration: 0.3s;
  195. -webkit-transition-duration: 0.3s;
  196. -o-transition-duration: 0.3s;
  197. cursor:help;
  198. }
  199.  
  200. p {
  201. margin:10px;
  202. }
  203.  
  204. hr {
  205. border: 0;
  206. height: 2px;
  207. background: #f6f6f6; /* break line color */
  208. margin-bottom:10px;
  209. margin-top:10px;
  210. }
  211.  
  212.  
  213.  
  214. /* --------------------------- SIDEBAR --------------------------- */
  215.  
  216.  
  217.  
  218. #sidebar {
  219. margin:100px auto 0 150px; /* sidebar top and left */
  220. position:fixed;
  221. text-align:center;
  222. width:170px; /* sidebar width */
  223. }
  224.  
  225. .side_img {
  226. position:relative;
  227. display:block;
  228. margin-bottom:5px;
  229. }
  230.  
  231. .side_img img {
  232. width:80px; /* sidebar image width */
  233. height:auto;
  234. padding:5px;
  235. border:1px solid #eee; /* sidebar image border color */
  236. background:#fff; /* sidebar image color */
  237. margin:0 auto;
  238. border-radius: 100%;
  239. -moz-border-radius: 100%;
  240. -webkit-border-radius: 100%;
  241. }
  242.  
  243. .tabs {
  244. text-align:center;
  245. display:inline-block;
  246. position:relative;
  247. margin-left:-40px;
  248. margin-top:-10px;
  249. }
  250.  
  251. .tab-links:after {
  252. display:block;
  253. clear:both;
  254. content:'';
  255. }
  256.  
  257. .tab-links li {
  258. display:inline-block;
  259. list-style:none;
  260. line-height:13px;
  261. }
  262.  
  263.  
  264. .tab-links a {
  265. font-size:8px; /* sidebar links font size */
  266. text-transform:uppercase;
  267. letter-spacing:0.5px;
  268. font-weight:normal;
  269. color:#777; /* sidebar links color */
  270. padding:0px 4px;
  271. transition-duration: 0.3s;
  272. -moz-transition-duration: 0.3s;
  273. -webkit-transition-duration: 0.3s;
  274. -o-transition-duration: 0.3s;
  275. }
  276.  
  277. .tab-links a:hover {
  278. color:#bbb; /* sidebar links hover color */
  279. transition-duration: 0.3s;
  280. -moz-transition-duration: 0.3s;
  281. -webkit-transition-duration: 0.3s;
  282. -o-transition-duration: 0.3s;
  283. }
  284.  
  285. li.active a, li.active a:hover {
  286. color:#bbb; /* sidebar links selected color */
  287. transition-duration: 0.3s;
  288. -moz-transition-duration: 0.3s;
  289. -webkit-transition-duration: 0.3s;
  290. -o-transition-duration: 0.3s;
  291. }
  292.  
  293. .tab-content {
  294.  
  295. }
  296.  
  297. .tab {
  298. display:none;
  299. }
  300.  
  301. .tab.active {
  302. display:block;
  303. }
  304.  
  305.  
  306.  
  307. /* ---------------------------- PAGES ---------------------------- */
  308.  
  309.  
  310.  
  311. .tabcontent {
  312. position:relative;
  313. width:100%;
  314. text-align:justify;
  315. }
  316.  
  317. #container {
  318. margin-top:70px; /* pages top */
  319. margin-left:450px; /* pages left */
  320. position:relative;
  321. width:auto;
  322. height:100%;
  323. padding:50px;
  324. }
  325.  
  326. #pages {
  327. width:415px; /* pages width */
  328. max-height:400px; /* pages max height */
  329. border:1px solid #fff; /* pages border */
  330. overflow:scroll;
  331. overflow:auto;
  332. background:#fff; /* pages background color */
  333. padding:5px; /* pages padding */
  334. margin-left:auto;
  335. margin-right:auto;
  336. margin-bottom:60px;
  337. line-height:16px;
  338. }
  339.  
  340. #pages a {
  341. border-bottom:1px solid transparent; /* links border color */
  342. transition-duration: 0.3s;
  343. -moz-transition-duration: 0.3s;
  344. -webkit-transition-duration: 0.3s;
  345. -o-transition-duration: 0.3s;
  346. }
  347.  
  348. #pages a:hover {
  349. border-bottom:1px solid #bbb; /* links border hover color */
  350. transition-duration: 0.3s;
  351. -moz-transition-duration: 0.3s;
  352. -webkit-transition-duration: 0.3s;
  353. -o-transition-duration: 0.3s;
  354. }
  355.  
  356. #pages li {
  357. margin-left:0px 10px;
  358. }
  359.  
  360. h1 {
  361. color:#bbb; /* pages title font color */
  362. background-color:#fff; /* pages title background color */
  363. border-bottom:1px solid #eee; /* pages title border color */
  364. font-size:14px; /* pages title font size */
  365. font-family:'Montserrat'; /* pages title font */
  366. font-weight:bold;
  367. letter-spacing:0px;
  368. text-transform:uppercase;
  369. text-align:left;
  370. padding:10px;
  371. margin-top:0px;
  372. }
  373.  
  374. h1::first-letter {
  375. color:#bbb; /* pages title first letter color */
  376. }
  377.  
  378. h1 span {
  379. color:#bbb; /* pages title second color */
  380. }
  381.  
  382. h2 {
  383. text-align:right;
  384. text-transform:uppercase;
  385. border-bottom:1px solid #fff; /* subtitle border color */
  386. padding:3px 1px 3px 1px;
  387. letter-spacing:5px;
  388. font-family:'Montserrat';
  389. font-size:10px; /* subtitle font size */
  390. color:#bbb; /* subtitle color */
  391. margin-top:0px;
  392. margin-bottom:5px;
  393. }
  394.  
  395. h2:before {
  396. content:'//'; /* subtitle before */
  397. font-size:9px;
  398. letter-spacing:3px;
  399. margin-right:5px;
  400. color:#fff; /* subtitle before color */
  401. }
  402.  
  403. #content {
  404. width:100%;
  405. text-align:left;
  406. margin-left:auto;
  407. margin-right:auto;
  408. position:relative;
  409. }
  410.  
  411.  
  412.  
  413. /* ---------------------------- ABOUT ---------------------------- */
  414.  
  415.  
  416.  
  417. #intro li {
  418. display:block;
  419. margin-left:-40px;
  420. margin-right:0px;
  421. color:#444;
  422. margin-bottom:2px;
  423. background:#fafafa; /* intro background color */
  424. padding:2px 5px 2px 5px;
  425. }
  426.  
  427. #about {
  428. margin-left:0px;
  429. margin-right:0px;
  430. margin-bottom:10px;
  431. }
  432.  
  433. #about ul {
  434. margin-left:-40px;
  435. margin-top:5px;
  436. margin-bottom:5px;
  437. list-style-type:none;
  438. }
  439.  
  440. #about ul li {
  441. padding:1px 0px 1px 20px;
  442. position:relative;
  443. }
  444.  
  445. #about ul li:before {
  446. content:'•'; /* bullets */
  447. top:2px;
  448. color:#bbb; /* bullets color */
  449. left:10px;
  450. font-size:10px; /* bullets size */
  451. position:absolute;
  452. display:block;
  453. font-family:sans-serif;
  454. }
  455.  
  456. .lcontent {
  457. width:100%;
  458. position:fixed;
  459. text-align:left;
  460. margin-left:auto;
  461. margin-right:auto;
  462. margin-bottom:5px;
  463. }
  464.  
  465. #list {
  466. position:relative;
  467. display:inline-block;
  468. width:calc(100%/2 - 8px);
  469. background:#fff; /* list background color */
  470. margin:5px 3px 3px 4px;
  471. font-weight:normal;
  472. font-style: italic;
  473. text-transform:none;
  474. color:#777; /* list font color */
  475. line-height:12px;
  476. float:left;
  477. text-align:left;
  478. word-wrap: break-word;
  479. -webkit-transition: all 0.3s ease-in;
  480. -moz-transition: all 0.3s ease-in;
  481. -o-transition: all 0.3s ease-in;
  482. }
  483.  
  484. #list_title {
  485. color:#666; /* list title font color */
  486. padding:3px 5px 4px 5px;
  487. font-size:9px; /* list title font size */
  488. text-align:center;
  489. font-style:normal;
  490. letter-spacing:0.5px;
  491. background:#f6f6f6; /* list title background color */
  492. border-bottom:1px solid #eee;
  493. text-transform:uppercase;
  494. font-weight:bold;
  495. }
  496.  
  497. #list ul {
  498. margin-left:-40px;
  499. margin-top:0px;
  500. margin-bottom:0px;
  501. list-style-type:none;
  502. }
  503.  
  504. #list ul li {
  505. padding:3px 2px 4px 2px;
  506. position:relative;
  507. border-bottom:1px solid #eee; /* list border color */
  508. }
  509.  
  510. #list ul li:before {
  511. content:'';
  512. }
  513.  
  514.  
  515.  
  516. /* -------------------------- NAVIGATION -------------------------- */
  517.  
  518.  
  519.  
  520. #navi {
  521. text-align:left;
  522. margin-bottom:20px;
  523. width:100%;
  524. }
  525.  
  526. #navi a {
  527. color:#999; /* tags color */
  528. font-size:10px; /* tags font size */
  529. font-weight:normal;
  530. font-style:italic;
  531. letter-spacing:0px;
  532. line-height:10px;
  533. width:calc(100%/3 - 13px);
  534. text-transform:lowercase;
  535. line-height:10px;
  536. margin:0 3px 0 4px;
  537. overflow:hidden;
  538. display:inline-block;
  539. border-bottom:1px solid #eee; /* tags border color */
  540. padding:5px 2px 5px 2px;
  541. transition-duration: 0.9s;
  542. -moz-transition-duration: 0.9s;
  543. -webkit-transition-duration: 0.9s;
  544. -o-transition-duration: 0.9s;
  545. }
  546.  
  547. #navi a:hover {
  548. color:#444; /* tags hover color */
  549. border-bottom:1px solid #eee; /* tags border hover color */
  550. padding-left:20px;
  551. width:calc(100%/3 - 31px);
  552. transition-duration: 0.9s;
  553. -moz-transition-duration: 0.9s;
  554. -webkit-transition-duration: 0.9s;
  555. -o-transition-duration: 0.9s;
  556. }
  557.  
  558. #navi span {
  559. color:#666; /* tags title color */
  560. font-size:8px;
  561. font-weight:bold;
  562. width:calc(100%/3 - 23px);
  563. margin:0 3px 0 4px;
  564. line-height:10px;
  565. letter-spacing:0.5px;
  566. text-transform:uppercase;
  567. overflow:hidden;
  568. display:inline-block;
  569. background:#f6f6f6; /* tags title background color */
  570. border-bottom:1px solid #eee; /* tags title border color */
  571. padding:5px 7px 5px 7px;
  572. }
  573.  
  574.  
  575.  
  576. /* ---------------------------- FAQ ---------------------------- */
  577.  
  578.  
  579.  
  580. #faq {
  581. margin-bottom:10px;
  582. }
  583.  
  584. #faq ul {
  585. margin-left:-40px;
  586. margin-top:5px;
  587. margin-bottom:5px;
  588. list-style-type:none;
  589. }
  590.  
  591. #faq ul li {
  592. padding:1px 0px 1px 20px;
  593. position:relative;
  594. }
  595.  
  596. #faq ul li:before {
  597. content:'•'; /* bullets */
  598. top:2px;
  599. color:#bbb; /* bullets color */
  600. left:10px;
  601. font-size:10px; /* bullets size */
  602. position:absolute;
  603. display:block;
  604. font-family:sans-serif;
  605. }
  606.  
  607. #question {
  608. background:#f8f8f8; /* question background color */
  609. padding:6px 5px 5px 5px;
  610. color:#888; /* question font size */
  611. }
  612.  
  613. #question span {
  614. font-size:11px; /* Q size */
  615. font-weight:bold;
  616. padding:2px 4px 2px 4px;
  617. margin-right:3px;
  618. background:#fff; /* Q background */
  619. border-radius: 100%;
  620. -moz-border-radius: 100%;
  621. -webkit-border-radius: 100%;
  622. color:#bbb; /* Q color */
  623. text-transform:uppercase;
  624. }
  625.  
  626. #answer {
  627. padding:6px 5px 5px 5px;
  628. }
  629.  
  630. #answer span {
  631. font-size:11px; /* A size */
  632. font-weight:bold;
  633. padding:2px 4px 2px 5px;
  634. margin-right:3px;
  635. background:#f8f8f8; /* Q background */
  636. border-radius: 100%;
  637. -moz-border-radius: 100%;
  638. -webkit-border-radius: 100%;
  639. color:#bbb; /* A color */
  640. text-transform:uppercase;
  641. }
  642.  
  643.  
  644.  
  645. /* -------------------------- FAVORITES -------------------------- */
  646.  
  647.  
  648.  
  649. #fave {
  650. position:relative;
  651. display:inline-block;
  652. width:calc(100%/2 - 12px);
  653. height:85px;
  654. overflow:scroll;
  655. overflow:auto;
  656. padding:0 3px 0 0;
  657. margin:5px 3px 5px 4px;
  658. font-size:9px; /* name font size */
  659. color:#777; /* name color */
  660. word-spacing:1px;
  661. letter-spacing:0.5px;
  662. text-transform:uppercase;
  663. font-weight:700;
  664. font-style:normal;
  665. line-height:11px;
  666. text-align:left;
  667. word-wrap: break-word;
  668. -webkit-transition: all 0.3s ease-in;
  669. -moz-transition: all 0.3s ease-in;
  670. -o-transition: all 0.3s ease-in;
  671. }
  672.  
  673. #fave a {
  674. border-bottom:none;
  675. color:#777; /* name color */
  676. }
  677.  
  678. #fave a:hover {
  679. border-bottom:none;
  680. color:#bbb; /* name hover color */
  681. }
  682.  
  683. .fave_info {
  684. position:absolute;
  685. width:62px;
  686. height:62px;
  687. border-radius: 100%;
  688. -moz-border-radius: 100%;
  689. -webkit-border-radius: 100%;
  690. color:#bbb; /* info hover font color */
  691. border:3px solid #eee; /* info hover border color */
  692. background:#fff; /* info hover background color */
  693. text-transform:uppercase;
  694. font-style:normal;
  695. padding:5px;
  696. font-size:8px; /* info hover font size */
  697. letter-spacing:0px;
  698. overflow:auto;
  699. opacity:0;
  700. text-align:center;
  701. margin:3px 0 0 0;
  702. -webkit-transition: all 0.3s ease-in;
  703. -moz-transition: all 0.3s ease-in;
  704. -o-transition: all 0.3s ease-in;
  705. }
  706.  
  707. #fave:hover .fave_info {
  708. opacity:1;
  709. -webkit-transition: all 0.3s ease-in;
  710. -moz-transition: all 0.3s ease-in;
  711. -o-transition: all 0.3s ease-in;
  712. }
  713.  
  714. #fave img {
  715. margin: 3px 7px 0 0px;
  716. width:70px;
  717. height:70px;
  718. border:1px solid #eee; /* fave image border color */
  719. float:left;
  720. border-radius: 100%;
  721. -moz-border-radius: 100%;
  722. -webkit-border-radius: 100%;
  723. padding:3px; /* image padding */
  724. background:#fff; /* image background color */
  725. -webkit-transition: all 0.3s ease-in;
  726. -moz-transition: all 0.3s ease-in;
  727. -o-transition: all 0.3s ease-in;
  728. }
  729.  
  730. #fave:hover img {
  731. background:#eee; /* image hover background color */
  732. -webkit-transition: all 0.3s ease-in;
  733. -moz-transition: all 0.3s ease-in;
  734. -o-transition: all 0.3s ease-in;
  735. }
  736.  
  737. #fave span {
  738. font-weight:normal;
  739. font-style: italic;
  740. text-transform:lowercase;
  741. letter-spacing:0;
  742. font-size:10px; /* description font size */
  743. display:block;
  744. margin-top:1px;
  745. color:#aaa; /* description font color */
  746. }
  747.  
  748. #fave span a {
  749. border-bottom:1px solid transparent;
  750. font-style:italic;
  751. text-transform:lowercase;
  752. letter-spacing:0;
  753. font-size:10px;
  754. color:#bbb;
  755. transition-duration: 0.3s;
  756. -moz-transition-duration: 0.3s;
  757. -webkit-transition-duration: 0.3s;
  758. -o-transition-duration: 0.3s;
  759. }
  760.  
  761. #fave span a:hover {
  762. border-bottom:1px solid #bbb;
  763. transition-duration: 0.3s;
  764. -moz-transition-duration: 0.3s;
  765. -webkit-transition-duration: 0.3s;
  766. -o-transition-duration: 0.3s;
  767. }
  768.  
  769.  
  770. .fave_name {
  771. position: relative;
  772. top: 50%;
  773. max-height:85px;
  774. -webkit-transform: translateY(-50%);
  775. -ms-transform: translateY(-50%);
  776. transform: translateY(-50%);
  777. }
  778.  
  779. .fave_namex {
  780. position: relative;
  781. top: 50%;
  782. max-height:62px;
  783. -webkit-transform: translateY(-50%);
  784. -ms-transform: translateY(-50%);
  785. transform: translateY(-50%);
  786. }
  787.  
  788.  
  789.  
  790. /* -------------------------- MUSIC REC -------------------------- */
  791.  
  792.  
  793.  
  794. #music {
  795. position:relative;
  796. display:inline-block;
  797. width:calc(100%/2 - 12px);
  798. height:65px;
  799. overflow:scroll;
  800. overflow:auto;
  801. padding:0 0 0 0;
  802. margin:5px 3px 5px 4px;
  803. font-size:9px; /* song font size */
  804. color:#777; /* song color */
  805. word-spacing:1px;
  806. letter-spacing:0.5px;
  807. text-transform:uppercase;
  808. font-weight:700;
  809. font-style:normal;
  810. line-height:11px;
  811. text-align:center;
  812. word-wrap: break-word;
  813. -webkit-transition: all 0.3s ease-in;
  814. -moz-transition: all 0.3s ease-in;
  815. -o-transition: all 0.3s ease-in;
  816. }
  817.  
  818. #music a {
  819. border-bottom:none;
  820. color:#777; /* song color */
  821. }
  822.  
  823. #music a:hover {
  824. border-bottom:none;
  825. color:#bbb; /* song hover color */
  826. }
  827.  
  828. #music img {
  829. margin: 5px 3px 0 0px;
  830. width:50px;
  831. height:50px;
  832. border:1px solid #eee; /* music image border color */
  833. float:left;
  834. border-radius: 13%;
  835. -moz-border-radius: 13%;
  836. -webkit-border-radius: 13%;
  837. padding:3px; /* image padding */
  838. background:#fff; /* image background color */
  839. -webkit-transition: all 0.3s ease-in;
  840. -moz-transition: all 0.3s ease-in;
  841. -o-transition: all 0.3s ease-in;
  842. }
  843.  
  844. #music:hover img {
  845. background:#eee; /* image hover background color */
  846. -webkit-transition: all 0.3s ease-in;
  847. -moz-transition: all 0.3s ease-in;
  848. -o-transition: all 0.3s ease-in;
  849. }
  850.  
  851. .music_info {
  852. position:absolute;
  853. width:42px;
  854. height:42px;
  855. border-radius: 13%;
  856. -moz-border-radius: 13%;
  857. -webkit-border-radius: 13%;
  858. color:#bbb; /* info hover font color */
  859. border:3px solid #eee; /* info hover border color */
  860. background:#fff; /* info hover background color */
  861. text-transform:uppercase;
  862. font-style:normal;
  863. padding:5px;
  864. font-size:8px; /* info hover font size */
  865. letter-spacing:0px;
  866. overflow:auto;
  867. opacity:0;
  868. text-align:center;
  869. margin:5px 0 0 0;
  870. -webkit-transition: all 0.5s ease-in;
  871. -moz-transition: all 0.5s ease-in;
  872. -o-transition: all 0.6s ease-in;
  873. }
  874.  
  875. #music:hover .music_info {
  876. opacity:1;
  877. -webkit-transition: all 0.5s ease-in;
  878. -moz-transition: all 0.5s ease-in;
  879. -o-transition: all 0.5s ease-in;
  880. }
  881.  
  882. #music span {
  883. font-weight:bold;
  884. font-style: normal;
  885. text-transform:uppercase;
  886. letter-spacing:0px;
  887. font-size:8px; /* artist font size */
  888. display:block;
  889. margin-top:1px;
  890. color:#aaa; /* artist font color */
  891. }
  892.  
  893. #music span a {
  894. font-style:normal;
  895. text-transform:uppercase;
  896. letter-spacing:0px;
  897. font-size:8px;
  898. color:#bbb;
  899. transition-duration: 0.3s;
  900. -moz-transition-duration: 0.3s;
  901. -webkit-transition-duration: 0.3s;
  902. -o-transition-duration: 0.3s;
  903. }
  904.  
  905. #music span a:hover {
  906. transition-duration: 0.3s;
  907. -moz-transition-duration: 0.3s;
  908. -webkit-transition-duration: 0.3s;
  909. -o-transition-duration: 0.3s;
  910. }
  911.  
  912.  
  913. .music_name {
  914. position: relative;
  915. top: 50%;
  916. max-height:65px;
  917. -webkit-transform: translateY(-50%);
  918. -ms-transform: translateY(-50%);
  919. transform: translateY(-50%);
  920. }
  921.  
  922. .music_namex {
  923. position: relative;
  924. top: 50%;
  925. max-height:42px;
  926. -webkit-transform: translateY(-50%);
  927. -ms-transform: translateY(-50%);
  928. transform: translateY(-50%);
  929. }
  930.  
  931.  
  932.  
  933. /* ------------------------- MEDIA REC --------------------------- */
  934.  
  935.  
  936.  
  937. #show {
  938. position:relative;
  939. display:inline-block;
  940. width:calc(100%/3 - 16px);
  941. padding:0 0 0 0;
  942. margin:5px 3px 50px 9px;
  943. font-size:9px;
  944. word-spacing:1px;
  945. letter-spacing:0.5px;
  946. text-transform:uppercase;
  947. font-weight:700;
  948. font-style:normal;
  949. line-height:11px;
  950. text-align:center;
  951. word-wrap: break-word;
  952. -webkit-transition: all 0.3s ease-in;
  953. -moz-transition: all 0.3s ease-in;
  954. -o-transition: all 0.3s ease-in;
  955. }
  956.  
  957. #show a {
  958. border-bottom:none;
  959. color:#777; /* show name color */
  960. }
  961.  
  962. #show a:hover {
  963. border-bottom:none;
  964. color:#bbb; /* show name hover color */
  965. }
  966.  
  967. #show img {
  968. margin: 3px 0px 3px 0px;
  969. width:110px;
  970. height:75px;
  971. border:1px solid #eee; /* show image border color */
  972. display:inline-block;
  973. border-radius: 7%;
  974. -moz-border-radius: 7%;
  975. -webkit-border-radius: 7%;
  976. padding:3px; /* show image padding */
  977. background:#fff; /* show image background */
  978. -webkit-transition: all 0.3s ease-in;
  979. -moz-transition: all 0.3s ease-in;
  980. -o-transition: all 0.3s ease-in;
  981. }
  982.  
  983. #show:hover img {
  984. background:#eee; /* show image background hover */
  985. -webkit-transition: all 0.3s ease-in;
  986. -moz-transition: all 0.3s ease-in;
  987. -o-transition: all 0.3s ease-in;
  988. }
  989.  
  990. .show_info {
  991. position:absolute;
  992. width:102px;
  993. height:67px;
  994. border-radius: 7%;
  995. -moz-border-radius: 7%;
  996. -webkit-border-radius: 7%;
  997. background:#fff; /* info hover background color */
  998. border:3px solid #eee; /* info hover border color */
  999. color:#aaa; /* info hover font color */
  1000. padding:5px;
  1001. font-style:normal;
  1002. font-weight:normal;
  1003. font-size:8px; /* info hover font size */
  1004. text-transform:uppercase;
  1005. letter-spacing:0.5px;
  1006. display:inline-block;
  1007. overflow:auto;
  1008. opacity:0;
  1009. float:left;
  1010. margin:3px 0 0 0;
  1011. text-align:left;
  1012. -webkit-transition: all 0.6s ease-in;
  1013. -moz-transition: all 0.6s ease-in;
  1014. -o-transition: all 0.6s ease-in;
  1015. }
  1016.  
  1017. .show_info b {
  1018. font-size:8px; /* info hover bold font size */
  1019. text-transform:uppercase;
  1020. letter-spacing:1px;
  1021. }
  1022.  
  1023. #show:hover .show_info {
  1024. opacity:1;
  1025. -webkit-transition: all 0.6s ease-in;
  1026. -moz-transition: all 0.6s ease-in;
  1027. -o-transition: all 0.6s ease-in;
  1028. }
  1029.  
  1030. .show_namex {
  1031. position: relative;
  1032. top: 50%;
  1033. max-height:67px;
  1034. -webkit-transform: translateY(-50%);
  1035. -ms-transform: translateY(-50%);
  1036. transform: translateY(-50%);
  1037. }
  1038.  
  1039. #box {
  1040. position:absolute;
  1041. text-align:center;
  1042. width:100%;
  1043. }
  1044.  
  1045. #show_title {
  1046. font-size:9px; /* show font size */
  1047. display:block;
  1048. letter-spacing:0.5px;
  1049. word-spacing:1px;
  1050. color:#777; /* show name color */
  1051. }
  1052.  
  1053. #show_sub {
  1054. font-size:8px; /* subtitle font size */
  1055. color:#777; /* subtitle color */
  1056. display:block;
  1057. font-weight:bold;
  1058. text-align:center;
  1059. margin-bottom:3px;
  1060. letter-spacing:1px;
  1061. }
  1062.  
  1063. #stars {
  1064. font-size:10px; /* stars size */
  1065. letter-spacing:0px;
  1066. font-weight:normal;
  1067. display:block;
  1068. color:#ffe356; /* stars color */
  1069. }
  1070.  
  1071.  
  1072.  
  1073. /* -------------------------- FANFIC REC -------------------------- */
  1074.  
  1075.  
  1076.  
  1077. .fcontent {
  1078. width:100%;
  1079. position:fixed;
  1080. text-align:left;
  1081. margin-left:auto;
  1082. margin-right:auto;
  1083. margin-bottom:5px;
  1084. }
  1085.  
  1086. #fanfic {
  1087. position:relative;
  1088. display:inline-block;
  1089. width:calc(100%/2 - 19px);
  1090. background:#fff; /* fanfic background color */
  1091. padding:5px 5px 5px 5px;
  1092. margin:5px 3px 3px 4px;
  1093. font-weight:normal;
  1094. border-radius: 4px;
  1095. -moz-border-radius: 4px;
  1096. -webkit-border-radius: 4px;
  1097. font-style: normal;
  1098. font-size:8px;
  1099. border:1px solid #eee; /* fanfic border color */
  1100. color:#aaa; /* fanfic font color */
  1101. line-height:12px;
  1102. text-transform:uppercase;
  1103. letter-spacing:0.5px;
  1104. float:left;
  1105. text-align:left;
  1106. word-wrap: break-word;
  1107. -webkit-transition: all 0.3s ease-in;
  1108. -moz-transition: all 0.3s ease-in;
  1109. -o-transition: all 0.3s ease-in;
  1110. }
  1111.  
  1112. #fanfic ul {
  1113. margin-left:-40px;
  1114. margin-top:0px;
  1115. margin-bottom:0px;
  1116. list-style-type:none;
  1117. }
  1118.  
  1119. #fanfic ul li {
  1120. padding:0.5px 0px 0.5px 0px;
  1121. position:relative;
  1122. line-height:11px;
  1123. }
  1124.  
  1125. #fanfic ul li:before {
  1126. content:'';
  1127. }
  1128.  
  1129. #fanfic_title {
  1130. border-bottom:none;
  1131. padding:5px 5px 5px 5px;
  1132. background:#f2f2f2; /* fanfic title background */
  1133. color:#777; /* fanfic title color */
  1134. text-align:center;
  1135. font-size:9px; /* fanfic title font size */
  1136. word-spacing:1px;
  1137. letter-spacing:0.5px;
  1138. margin:-5px -5px 0 -5px;
  1139. text-transform:uppercase;
  1140. border-radius: 4px 4px 0px 0px;
  1141. -moz-border-radius: 4px 4px 0px 0px;
  1142. -webkit-border-radius: 4px 4px 0px 0px;
  1143. font-weight:bold;
  1144. font-style:normal;
  1145. -webkit-transition: all 0.3s ease-in;
  1146. -moz-transition: all 0.3s ease-in;
  1147. -o-transition: all 0.3s ease-in;
  1148. }
  1149.  
  1150. #fanfic_title:hover {
  1151. background:#fff; /* fanfic title hover background color */
  1152. color:#bbb; /* fanfic title hover font color */
  1153. }
  1154.  
  1155. #fanfic_title a {
  1156. border-bottom:none;
  1157. color:#777; /* fanfic title font color */
  1158. }
  1159.  
  1160. #fanfic_title a:hover {
  1161. border-bottom:none;
  1162. color:#bbb; /* fanfic title hover font color */
  1163. }
  1164.  
  1165. #fanfic b {
  1166. letter-spacing:1px;
  1167. }
  1168.  
  1169. #fanfic_sub {
  1170. font-weight:bold;
  1171. font-style: normal;
  1172. text-transform:uppercase;
  1173. text-align:right;
  1174. letter-spacing:0.5px;
  1175. font-size:8px; /* fanfic subtitle font size */
  1176. display:block;
  1177. border-bottom:1px solid #eee; /* fanfic subtitle border color */
  1178. margin-top:1px;
  1179. padding:2px 0 2px 0;
  1180. margin-bottom:3px;
  1181. color:#888; /* fanfic subtitle font color */
  1182. }
  1183.  
  1184. #fanfic_sub span {
  1185. color:#bbb; /* author font color */
  1186. }
  1187.  
  1188.  
  1189.  
  1190. /* -------------------------- BLOGROLL -------------------------- */
  1191.  
  1192.  
  1193.  
  1194. #blogroll {
  1195. position:relative;
  1196. display:inline-block;
  1197. width:calc(100%/3 - 12px);
  1198. height:45px;
  1199. padding:0 3px 0 0;
  1200. margin:0px 3px 0px 4px;
  1201. font-size:8px;
  1202. letter-spacing:0.5px;
  1203. text-transform:uppercase;
  1204. font-weight:normal;
  1205. overflow:scroll;
  1206. overflow:auto;
  1207. font-style:normal;
  1208. line-height:11px;
  1209. text-align:left;
  1210. word-wrap: break-word;
  1211. word-break:break-all;
  1212. -webkit-transition: all 0.3s ease-in;
  1213. -moz-transition: all 0.3s ease-in;
  1214. -o-transition: all 0.3s ease-in;
  1215. }
  1216.  
  1217. #blogroll a {
  1218. border-bottom:none;
  1219. color:#777; /* blog font color */
  1220. }
  1221.  
  1222. #blogroll a:hover {
  1223. border-bottom:none;
  1224. color:#bbb; /* blog font hover color */
  1225. }
  1226.  
  1227. #blogroll img{
  1228. margin: 3px 7px 0 0;
  1229. width:30px;
  1230. height:30px;
  1231. border:1px solid #eee; /* blog image border color */
  1232. float:left;
  1233. border-radius: 100%;
  1234. -moz-border-radius: 100%;
  1235. -webkit-border-radius: 100%;
  1236. padding:3px; /* blog padding */
  1237. background:#fff; /* blog background color */
  1238. -webkit-transition: all 0.3s ease-in;
  1239. -moz-transition: all 0.3s ease-in;
  1240. -o-transition: all 0.3s ease-in;
  1241. }
  1242.  
  1243. #blogroll:hover img {
  1244. background:#eee; /* blog background hover color */
  1245. -webkit-transition: all 0.3s ease-in;
  1246. -moz-transition: all 0.3s ease-in;
  1247. -o-transition: all 0.3s ease-in;
  1248. }
  1249.  
  1250. .blogroll_name {
  1251. position: absolute;
  1252. margin-left:43px;
  1253. top:50%;
  1254. max-height:45px;
  1255. -webkit-transform: translateY(-50%);
  1256. -ms-transform: translateY(-50%);
  1257. transform: translateY(-50%);
  1258. }
  1259.  
  1260.  
  1261.  
  1262. /* --------------------------- CREDIT --------------------------- */
  1263.  
  1264.  
  1265.  
  1266. #cr {
  1267. bottom:7px;
  1268. right:7px;
  1269. background:#fff; /* credit background color */
  1270. font-weight:bold;
  1271. font-size:10px;
  1272. position:fixed;
  1273. font-family:arial;
  1274. padding:2px 3px 3px 4px;
  1275. }
  1276.  
  1277. #cr a {
  1278. border-bottom:none;
  1279. color:#777; /* credit font color */
  1280. }
  1281.  
  1282. #cr a:hover {
  1283. border-bottom:none;
  1284. color:#444; /* credit font hover color */
  1285. }
  1286.  
  1287.  
  1288. </style>
  1289. </head>
  1290.  
  1291. <body>
  1292.  
  1293. <!--
  1294.  
  1295. NOTE!
  1296. if you don't want something, or want to copy and past it somewere else, delete/copy ONLY what's inside the arrows of that especiic thing and nothing else. there will be a title so you know where/what everything is.
  1297.  
  1298. -->
  1299.  
  1300. <!---------------------------- SIDEBAR ----------------------------->
  1301.  
  1302.  
  1303.  
  1304. <div id="sidebar">
  1305.  
  1306. <div class="side_img">
  1307. <img src="SIDEBAR IMG URL"> <!-- 80x80 px -->
  1308. </div>
  1309.  
  1310. <!-- SIDEBAR LINKS -->
  1311. <div class="tabs">
  1312. <ul class="tab-links">
  1313. <li><a href="/">home</a></li>
  1314. <li class="active"><a href="#tab1">about</a></li>
  1315. <li><a href="#tab2">navigation</a></li>
  1316. <li><a href="#tab3">faq</a></li>
  1317. <li><a href="#tab4">faves</a></li>
  1318. <li><a href="#tab5">recs</a></li>
  1319. <li><a href="#tab6">blogroll</a></li>
  1320. </ul>
  1321. </div>
  1322. </div>
  1323. <!-- SIDEBAR LINKS -->
  1324.  
  1325. <div id="container">
  1326. <div class="tabs">
  1327.  
  1328.  
  1329.  
  1330. <!-------------------------- TAB 1 - ABOUT -------------------------->
  1331.  
  1332.  
  1333.  
  1334. <div class="tab-content">
  1335. <div id="tab1" class="tab active">
  1336. <div class="tabcontent">
  1337. <div id="pages">
  1338.  
  1339. <!-- TITLE -->
  1340. <h1>ABOUT 1</h1>
  1341. <!-- TITLE -->
  1342.  
  1343. <!-- INTRO -->
  1344. <div id="intro">
  1345.  
  1346. <ul>
  1347. <li><b>name:</b> ...</li>
  1348. <li><b>pronouns:</b> ...</li>
  1349. <li><b>age:</b> ...</li>
  1350. <li><b>location:</b> ...</li>
  1351. </ul>
  1352.  
  1353. </div>
  1354. <!-- INTRO -->
  1355.  
  1356. <!-- CONTENT -->
  1357. <div id="about">
  1358.  
  1359. text. <a href="/">link</a>. <b>bold</b>. <i>italic</i>.
  1360.  
  1361. <!-- bullets -->
  1362. <ul>
  1363. <li>item 1</li>
  1364. <li>item 2</li>
  1365. <li>item 3</li>
  1366. </ul>
  1367. <!-- bullets -->
  1368.  
  1369. <!-- blockquote -->
  1370. <blockquote>
  1371. this is a blockquote.
  1372. </blockquote>
  1373. <!-- blockquote -->
  1374.  
  1375. </div>
  1376. <!-- CONTENT -->
  1377.  
  1378. <!-- TITLE -->
  1379. <h1>ABOUT 2</h1>
  1380. <!-- TITLE -->
  1381.  
  1382. <!-- CONTENT -->
  1383. <div id="about">
  1384.  
  1385. TEXT.
  1386.  
  1387. </div>
  1388. <!-- CONTENT -->
  1389.  
  1390. <!-- TITLE -->
  1391. <h1>LISTS</h1>
  1392. <!-- TITLE -->
  1393.  
  1394. <!-- CONTENT -->
  1395. <div class="lcontent">
  1396.  
  1397. <!-- LIST-->
  1398. <div id="list">
  1399. <div id="list_title">LIST TITLE</div>
  1400. <ul>
  1401. <li>item 1</li>
  1402. <li>item 2</li>
  1403. <li>item 3</li>
  1404. <li>item 4</li>
  1405. <li>item 5</li>
  1406. </ul>
  1407. </div>
  1408. <!-- LIST-->
  1409.  
  1410. <!-- LIST-->
  1411. <div id="list">
  1412. <div id="list_title">LIST TITLE</div>
  1413. <ul>
  1414. <li>item 1</li>
  1415. <li>item 2</li>
  1416. <li>item 3</li>
  1417. </ul>
  1418. </div>
  1419. <!-- LIST-->
  1420.  
  1421. </div>
  1422. <!-- CONTENT -->
  1423.  
  1424.  
  1425. </div>
  1426. </div>
  1427. </div>
  1428.  
  1429.  
  1430.  
  1431. <!----------------------- TAB 2 - NAVIGATION ----------------------->
  1432.  
  1433.  
  1434.  
  1435. <div id="tab2" class="tab">
  1436. <div class="tabcontent">
  1437. <div id="pages">
  1438.  
  1439. <!-- TITLE -->
  1440. <h1>LINKS</h1>
  1441. <!-- TITLE -->
  1442.  
  1443. <!-- blockquote -->
  1444. <blockquote>
  1445. you can add some stuff here if you need.
  1446. </blockquote>
  1447. <!-- blockquote -->
  1448.  
  1449. <!-- LINKS -->
  1450. <div id="navi">
  1451. <a href="URL">LINK 1</a>
  1452. <a href="URL">LINK 2</a>
  1453. <a href="URL">LINK 3</a>
  1454. <a href="URL">LINK 4</a>
  1455. <a href="URL">LINK 5</a>
  1456. <a href="URL">LINK 6</a>
  1457. </div>
  1458. <!-- LINKS -->
  1459.  
  1460. <!-- LINKS 2 -->
  1461. <div id="navi">
  1462. <!-- subtitle -->
  1463. <span>TITLE</span>
  1464. <!-- subtitle -->
  1465. <a href="URL">LINK 1</a>
  1466. <a href="URL">LINK 2</a>
  1467. <a href="URL">LINK 3</a>
  1468. <a href="URL">LINK 4</a>
  1469. </div>
  1470. <!-- LINKS 2 -->
  1471.  
  1472. <!-- TITLE -->
  1473. <h1>TAGS</h1>
  1474. <!-- TITLE -->
  1475.  
  1476. <!-- TAGS -->
  1477. <div id="navi">
  1478. <!-- subtitle -->
  1479. <span>TITLE</span>
  1480. <!-- subtitle -->
  1481. <a href="/tagged/TAG">#TAG 1</a>
  1482. <a href="/tagged/TAG">#TAG 2</a>
  1483. <a href="/tagged/TAG">#TAG 3</a>
  1484. <a href="/tagged/TAG">#TAG 4</a>
  1485. <a href="/tagged/TAG">#TAG 5</a>
  1486. <a href="/tagged/TAG">#TAG 6</a>
  1487. <a href="/tagged/TAG">#TAG 7</a>
  1488. <a href="/tagged/TAG">#TAG 8</a>
  1489. </div>
  1490. <!-- TAGS -->
  1491.  
  1492. <!-- TAGS 2 -->
  1493. <div id="navi">
  1494. <!-- subtitle -->
  1495. <span>TITLE</span>
  1496. <!-- subtitle -->
  1497. <a href="/tagged/TAG">#TAG 1</a>
  1498. <a href="/tagged/TAG">#TAG 2</a>
  1499. <a href="/tagged/TAG">#TAG 3</a>
  1500. <a href="/tagged/TAG">#TAG 4</a>
  1501. <a href="/tagged/TAG">#TAG 5</a>
  1502. <a href="/tagged/TAG">#TAG 6</a>
  1503. <a href="/tagged/TAG">#TAG 7</a>
  1504. <a href="/tagged/TAG">#TAG 8</a>
  1505. </div>
  1506. <!-- TAGS 2 -->
  1507.  
  1508. </div>
  1509. </div>
  1510. </div>
  1511.  
  1512.  
  1513.  
  1514. <!-------------------------- TAB 3 - FAQ -------------------------->
  1515.  
  1516.  
  1517.  
  1518. <div id="tab3" class="tab">
  1519. <div class="tabcontent">
  1520. <div id="pages">
  1521.  
  1522. <!-- TITLE -->
  1523. <h1>Frequently Asked Questions</h1>
  1524. <!-- TITLE -->
  1525.  
  1526. <!-- SUBTITLE -->
  1527. <h2>SUBTITLE 1</h2>
  1528. <!-- SUBTITLE -->
  1529.  
  1530. <!-- CONTENT -->
  1531. <div id="faq">
  1532.  
  1533. <!-- QUESTION -->
  1534. <div id="question">
  1535. <span>Q:</span> Question?
  1536. </div>
  1537. <!-- QUESTION -->
  1538.  
  1539. <!-- ANSWER -->
  1540. <div id="answer">
  1541. <span>A:</span> Answer.
  1542. </div>
  1543. <!-- ANSWER -->
  1544.  
  1545. <!-- QUESTION -->
  1546. <div id="question">
  1547. <span>Q:</span> Question?
  1548. </div>
  1549. <!-- QUESTION -->
  1550.  
  1551. <!-- ANSWER -->
  1552. <div id="answer">
  1553. <span>A:</span> Answer.
  1554. </div>
  1555. <!-- ANSWER -->
  1556.  
  1557. <!-- SUBTITLE -->
  1558. <h2>SUBTITLE 2</h2>
  1559. <!-- SUBTITLE -->
  1560.  
  1561.  
  1562. <!-- QUESTION -->
  1563. <div id="question">
  1564. <span>Q:</span> Question?
  1565. </div>
  1566. <!-- QUESTION -->
  1567.  
  1568. <!-- ANSWER -->
  1569. <div id="answer">
  1570. <span>A:</span> Answer.
  1571. </div>
  1572. <!-- ANSWER -->
  1573.  
  1574. <!-- QUESTION -->
  1575. <div id="question">
  1576. <span>Q:</span> Question?
  1577. </div>
  1578. <!-- QUESTION -->
  1579.  
  1580. <!-- ANSWER -->
  1581. <div id="answer">
  1582. <span>A:</span> Answer.
  1583. </div>
  1584. <!-- ANSWER -->
  1585.  
  1586. <!-- blockquote -->
  1587. <blockquote>
  1588. you can add some stuff here if you need.
  1589. </blockquote>
  1590. <!-- blockquote -->
  1591.  
  1592. </div>
  1593. <!-- CONTENT -->
  1594.  
  1595. <!-- ASKBOX -->
  1596. <iframe frameborder="0" height="190" id="ask_form" scrolling="no" src="https://www.tumblr.com/ask_form/{name}.tumblr.com" width="100%" style="background-color: transparent; overflow: hidden;"></iframe><!--[if IE]><script type="text/javascript">document.getElementById('ask_form').allowTransparency=true;</script><![endif]-->
  1597. <!-- ASKBOX -->
  1598.  
  1599. </div>
  1600. </div>
  1601. </div>
  1602.  
  1603.  
  1604.  
  1605. <!------------------------ TAB 4 - FAVORITES ------------------------>
  1606.  
  1607.  
  1608.  
  1609. <div id="tab4" class="tab">
  1610. <div class="tabcontent">
  1611. <div id="pages">
  1612.  
  1613. <!-- TITLE -->
  1614. <h1>FAVES 1</h1>
  1615. <!-- TITLE -->
  1616.  
  1617. <!-- CONTENT -->
  1618. <div id="content">
  1619.  
  1620. <!-- blockquote -->
  1621. <blockquote>
  1622. you can add some stuff here if you need.
  1623. </blockquote>
  1624. <!-- blockquote -->
  1625.  
  1626. <!-- SUBTITLE -->
  1627. <h2>SUBTITLE</h2>
  1628. <!-- SUBTITLE -->
  1629.  
  1630. <!-- PERSON 1 -->
  1631. <div id="fave">
  1632. <!-- hover info. copy and paste this after id="fave", or delete if you don't want it -->
  1633. <div class="fave_info"><section class="fave_namex">
  1634. EXTRA INFO
  1635. </div></section>
  1636. <!-- hover info. copy and paste this after id="fave", or delete if you don't want it -->
  1637.  
  1638. <img src="IMG URL"> <!-- 70x70 px -->
  1639. <section class="fave_name"><a href="URL">NAME</a>
  1640. <span>DESCRIPTION</span>
  1641. </section></div>
  1642. <!-- PERSON 1 -->
  1643.  
  1644. <!-- PERSON 2 -->
  1645. <div id="fave">
  1646.  
  1647. <img src="IMG URL"> <!-- 70x70 px -->
  1648. <section class="fave_name"><a href="URL">NAME</a>
  1649. <span>DESCRIPTION</span>
  1650. </section></div>
  1651. <!-- PERSON 2 -->
  1652.  
  1653. <!-- PERSON 3 -->
  1654. <div id="fave">
  1655.  
  1656. <img src="IMG URL"> <!-- 70x70 px -->
  1657. <section class="fave_name"><a href="URL">NAME</a>
  1658. <span>DESCRIPTION</span>
  1659. </section></div>
  1660. <!-- PERSON 3 -->
  1661.  
  1662. <!-- PERSON 4 -->
  1663. <div id="fave">
  1664.  
  1665. <img src="IMG URL"> <!-- 70x70 px -->
  1666. <section class="fave_name"><a href="URL">NAME</a>
  1667. <span>DESCRIPTION</span>
  1668. </section></div>
  1669. <!-- PERSON 4 -->
  1670.  
  1671. <!-- SUBTITLE -->
  1672. <h2>SUBTITLE</h2>
  1673. <!-- SUBTITLE -->
  1674.  
  1675. <!-- PERSON 5 -->
  1676. <div id="fave">
  1677.  
  1678. <img src="IMG URL"> <!-- 70x70 px -->
  1679. <section class="fave_name"><a href="URL">NAME</a>
  1680. <span>DESCRIPTION</span>
  1681. </section></div>
  1682. <!-- PERSON 5 -->
  1683.  
  1684. <!-- PERSON 6 -->
  1685. <div id="fave">
  1686.  
  1687. <img src="IMG URL"> <!-- 70x70 px -->
  1688. <section class="fave_name"><a href="URL">NAME</a>
  1689. <span>DESCRIPTION</span>
  1690. </section></div>
  1691. <!-- PERSON 6 -->
  1692.  
  1693.  
  1694. </div>
  1695. <!-- CONTENT -->
  1696.  
  1697. <!-- TITLE -->
  1698. <h1>FAVES 2</h1>
  1699. <!-- TITLE -->
  1700.  
  1701. <!-- CONTENT -->
  1702. <div id="content">
  1703.  
  1704. <!-- PERSON 1 -->
  1705. <div id="fave">
  1706.  
  1707. <img src="IMG URL"> <!-- 70x70 px -->
  1708. <section class="fave_name"><a href="URL">NAME</a>
  1709. <span>DESCRIPTION</span>
  1710. </section></div>
  1711. <!-- PERSON 1 -->
  1712.  
  1713. <!-- PERSON 2 -->
  1714. <div id="fave">
  1715.  
  1716. <img src="IMG URL"> <!-- 70x70 px -->
  1717. <section class="fave_name"><a href="URL">NAME</a>
  1718. <span>DESCRIPTION</span>
  1719. </section></div>
  1720. <!-- PERSON 2 -->
  1721.  
  1722. <!-- PERSON 3 -->
  1723. <div id="fave">
  1724.  
  1725. <img src="IMG URL"> <!-- 70x70 px -->
  1726. <section class="fave_name"><a href="URL">NAME</a>
  1727. <span>DESCRIPTION</span>
  1728. </section></div>
  1729. <!-- PERSON 3 -->
  1730.  
  1731. <!-- PERSON 4 -->
  1732. <div id="fave">
  1733.  
  1734. <img src="IMG URL"> <!-- 70x70 px -->
  1735. <section class="fave_name"><a href="URL">NAME</a>
  1736. <span>DESCRIPTION</span>
  1737. </section></div>
  1738. <!-- PERSON 4 -->
  1739.  
  1740.  
  1741. </div>
  1742. <!-- CONTENT -->
  1743.  
  1744.  
  1745. </div>
  1746. </div>
  1747. </div>
  1748.  
  1749.  
  1750.  
  1751. <!--------------------- TAB 5 - RECOMMENDATIONS --------------------->
  1752.  
  1753.  
  1754.  
  1755. <div id="tab5" class="tab">
  1756. <div class="tabcontent">
  1757. <div id="pages">
  1758.  
  1759. <!------------------------------ MUSIC ------------------------------>
  1760.  
  1761. <!-- TITLE -->
  1762. <h1>MUSIC</h1>
  1763. <!-- TITLE -->
  1764.  
  1765. <!-- CONTENT -->
  1766. <div id="content">
  1767.  
  1768. <!-- blockquote -->
  1769. <blockquote>
  1770. you can add some stuff here if you need.
  1771. </blockquote>
  1772. <!-- blockquote -->
  1773.  
  1774. <!-- SUBTITLE -->
  1775. <h2>SUBTITLE</h2>
  1776. <!-- SUBTITLE -->
  1777.  
  1778. <!-- MUSIC 1 -->
  1779. <div id="music">
  1780.  
  1781. <!-- hover info. copy and paste this after id="music", or delete if you don't want it -->
  1782. <div class="music_info"><section class="music_namex">
  1783. EXTRA INFO
  1784. </div></section>
  1785. <!-- hover info. copy and paste this after id="music", or delete if you don't want it -->
  1786.  
  1787. <img src="MUSIC IMG URL"> <!-- 50x50 px -->
  1788. <section class="music_name">SONG
  1789. <span>ARTIST</span>
  1790. </section>
  1791. </div>
  1792. <!-- MUSIC 1 -->
  1793.  
  1794. <!-- MUSIC 2 -->
  1795. <div id="music">
  1796.  
  1797. <img src="MUSIC IMG URL"> <!-- 50x50 px -->
  1798. <section class="music_name">SONG
  1799. <span>ARTIST</span>
  1800. </section>
  1801. </div>
  1802. <!-- MUSIC 2 -->
  1803.  
  1804. <!-- MUSIC 3 -->
  1805. <div id="music">
  1806.  
  1807. <img src="MUSIC IMG URL"> <!-- 50x50 px -->
  1808. <section class="music_name">SONG
  1809. <span>ARTIST</span>
  1810. </section>
  1811. </div>
  1812. <!-- MUSIC 3 -->
  1813.  
  1814. <!-- MUSIC 4 -->
  1815. <div id="music">
  1816.  
  1817. <img src="MUSIC IMG URL"> <!-- 50x50 px -->
  1818. <section class="music_name">SONG
  1819. <span>ARTIST</span>
  1820. </section>
  1821. </div>
  1822. <!-- MUSIC 4 -->
  1823.  
  1824. <!-- SUBTITLE -->
  1825. <h2>SUBTITLE</h2>
  1826. <!-- SUBTITLE -->
  1827.  
  1828. <!-- MUSIC 5 -->
  1829. <div id="music">
  1830.  
  1831. <img src="MUSIC IMG URL"> <!-- 50x50 px -->
  1832. <section class="music_name">SONG
  1833. <span>ARTIST</span>
  1834. </section>
  1835. </div>
  1836. <!-- MUSIC 5 -->
  1837.  
  1838. <!-- MUSIC 6 -->
  1839. <div id="music">
  1840.  
  1841. <img src="MUSIC IMG URL"> <!-- 50x50 px -->
  1842. <section class="music_name">SONG
  1843. <span>ARTIST</span>
  1844. </section>
  1845. </div>
  1846. <!-- MUSIC 6 -->
  1847.  
  1848. <!-- MUSIC 7 -->
  1849. <div id="music">
  1850.  
  1851. <img src="MUSIC IMG URL"> <!-- 50x50 px -->
  1852. <section class="music_name">SONG
  1853. <span>ARTIST</span>
  1854. </section>
  1855. </div>
  1856. <!-- MUSIC 7 -->
  1857.  
  1858. <!-- MUSIC 8 -->
  1859. <div id="music">
  1860.  
  1861. <img src="MUSIC IMG URL"> <!-- 50x50 px -->
  1862. <section class="music_name">SONG
  1863. <span>ARTIST</span>
  1864. </section>
  1865. </div>
  1866. <!-- MUSIC 8 -->
  1867.  
  1868. </div>
  1869. <!-- CONTENT -->
  1870.  
  1871. <!---------------------------- END MUSIC ---------------------------->
  1872.  
  1873. <!------------------------------ MEDIA ------------------------------>
  1874.  
  1875. <!-- TITLE -->
  1876. <h1>MEDIA</h1>
  1877. <!-- TITLE -->
  1878.  
  1879. <!-- CONTENT -->
  1880. <div id="content">
  1881.  
  1882. <!-- blockquote -->
  1883. <blockquote>
  1884. you can add some stuff here if you need.
  1885. </blockquote>
  1886. <!-- blockquote -->
  1887.  
  1888. <!-- SUBTITLE -->
  1889. <h2>SUBTITLE</h2>
  1890. <!-- SUBTITLE -->
  1891.  
  1892. <!-- SHOW 1 -->
  1893. <div id="show">
  1894. <!-- hover info, delete if you don't want it -->
  1895. <div class="show_info"><section class="show_namex">
  1896. <div id="show_sub">SUBTITLE</div>
  1897. TEXT
  1898. <br>
  1899. <b>Year:</b> ....
  1900. <br>
  1901. <b>Genre:</b> ....
  1902. <br>
  1903. <b>Thing 1:</b> ...
  1904. <br>
  1905. <b>Thing 2:</b> ...
  1906. </div></section>
  1907. <!-- hover info, delete if you don't want it -->
  1908.  
  1909. <img src="SHOW IMG URL"> <!-- 110 x 75 px -->
  1910. <div id="box">
  1911. <div id="show_title">SHOW</div>
  1912. <div id="stars">
  1913. ★★★☆☆
  1914. </div>
  1915. </div>
  1916. </div>
  1917. <!-- SHOW 1 -->
  1918.  
  1919. <!-- SHOW 2 -->
  1920. <div id="show">
  1921. <!-- hover info, delete if you don't want it -->
  1922. <div class="show_info"><section class="show_namex">
  1923. <div id="show_sub">SUBTITLE</div>
  1924. TEXT
  1925. <br>
  1926. <b>Year:</b> ....
  1927. <br>
  1928. <b>Genre:</b> ....
  1929. <br>
  1930. <b>Thing 1:</b> ...
  1931. <br>
  1932. <b>Thing 2:</b> ...
  1933. </div></section>
  1934. <!-- hover info, delete if you don't want it -->
  1935.  
  1936. <img src="SHOW IMG URL"> <!-- 110 x 75 px -->
  1937. <div id="box">
  1938. <div id="show_title">SHOW</div>
  1939. <div id="stars">
  1940. ★★★☆☆
  1941. </div>
  1942. </div>
  1943. </div>
  1944. <!-- SHOW 2 -->
  1945.  
  1946. <!-- SHOW 3 -->
  1947. <div id="show">
  1948. <!-- hover info, delete if you don't want it -->
  1949. <div class="show_info"><section class="show_namex">
  1950. <div id="show_sub">SUBTITLE</div>
  1951. TEXT
  1952. <br>
  1953. <b>Year:</b> ....
  1954. <br>
  1955. <b>Genre:</b> ....
  1956. <br>
  1957. <b>Thing 1:</b> ...
  1958. <br>
  1959. <b>Thing 2:</b> ...
  1960. </div></section>
  1961. <!-- hover info, delete if you don't want it -->
  1962.  
  1963. <img src="SHOW IMG URL"> <!-- 110 x 75 px -->
  1964. <div id="box">
  1965. <div id="show_title">SHOW</div>
  1966. <div id="stars">
  1967. ★★★☆☆
  1968. </div>
  1969. </div>
  1970. </div>
  1971. <!-- SHOW 3 -->
  1972.  
  1973. <!-- SUBTITLE -->
  1974. <h2>SUBTITLE</h2>
  1975. <!-- SUBTITLE -->
  1976.  
  1977. <!-- SHOW 4 -->
  1978. <div id="show">
  1979. <!-- hover info, delete if you don't want it -->
  1980. <div class="show_info"><section class="show_namex">
  1981. <div id="show_sub">SUBTITLE</div>
  1982. TEXT
  1983. <br>
  1984. <b>Year:</b> ....
  1985. <br>
  1986. <b>Genre:</b> ....
  1987. <br>
  1988. <b>Thing 1:</b> ...
  1989. <br>
  1990. <b>Thing 2:</b> ...
  1991. </div></section>
  1992. <!-- hover info, delete if you don't want it -->
  1993.  
  1994. <img src="SHOW IMG URL"> <!-- 110 x 75 px -->
  1995. <div id="box">
  1996. <div id="show_title">SHOW</div>
  1997. <div id="stars">
  1998. ★★★☆☆
  1999. </div>
  2000. </div>
  2001. </div>
  2002. <!-- SHOW 4 -->
  2003.  
  2004. <!-- SHOW 5 -->
  2005. <div id="show">
  2006. <!-- hover info, delete if you don't want it -->
  2007. <div class="show_info"><section class="show_namex">
  2008. <div id="show_sub">SUBTITLE</div>
  2009. TEXT
  2010. <br>
  2011. <b>Year:</b> ....
  2012. <br>
  2013. <b>Genre:</b> ....
  2014. <br>
  2015. <b>Thing 1:</b> ...
  2016. <br>
  2017. <b>Thing 2:</b> ...
  2018. </div></section>
  2019. <!-- hover info, delete if you don't want it -->
  2020.  
  2021. <img src="SHOW IMG URL"> <!-- 110 x 75 px -->
  2022. <div id="box">
  2023. <div id="show_title">SHOW</div>
  2024. <div id="stars">
  2025. ★★★☆☆
  2026. </div>
  2027. </div>
  2028. </div>
  2029. <!-- SHOW 5 -->
  2030.  
  2031. <!-- SHOW 6 -->
  2032. <div id="show">
  2033. <!-- hover info, delete if you don't want it -->
  2034. <div class="show_info"><section class="show_namex">
  2035. <div id="show_sub">SUBTITLE</div>
  2036. TEXT
  2037. <br>
  2038. <b>Year:</b> ....
  2039. <br>
  2040. <b>Genre:</b> ....
  2041. <br>
  2042. <b>Thing 1:</b> ...
  2043. <br>
  2044. <b>Thing 2:</b> ...
  2045. </div></section>
  2046. <!-- hover info, delete if you don't want it -->
  2047.  
  2048. <img src="SHOW IMG URL"> <!-- 110 x 75 px -->
  2049. <div id="box">
  2050. <div id="show_title">SHOW</div>
  2051. <div id="stars">
  2052. ★★★☆☆
  2053. </div>
  2054. </div>
  2055. </div>
  2056. <!-- SHOW 6 -->
  2057.  
  2058. </div>
  2059. <!-- CONTENT -->
  2060.  
  2061. <!---------------------------- END MEDIA ----------------------------->
  2062.  
  2063. <!------------------------------ FANFIC ------------------------------>
  2064.  
  2065. <!-- TITLE -->
  2066. <h1>FANFICTION</h1>
  2067. <!-- TITLE -->
  2068.  
  2069. <!-- blockquote -->
  2070. <blockquote>
  2071. you can add some stuff here if you need.
  2072. </blockquote>
  2073. <!-- blockquote -->
  2074.  
  2075. <!-- SUBTITLE -->
  2076. <h2>SUBTITLE</h2>
  2077. <!-- SUBTITLE -->
  2078.  
  2079. <!-- CONTENT -->
  2080. <div class="fcontent">
  2081.  
  2082. <!-- FANFIC 1 -->
  2083. <div id="fanfic">
  2084. <div id="fanfic_title"><a href="FANFIC LINK">FANFIC TITLE</a></div>
  2085. <div id="fanfic_sub">
  2086. <!-- favorite -->
  2087. <div style="float:left;">favorite!</div>
  2088. <!-- favorite -->
  2089. by <span>AUTHOR</span>
  2090. </div>
  2091.  
  2092. <ul>
  2093. <li><b>STATUS:</b> ...</li>
  2094. <li><b>PAIRING:</b> ...</li>
  2095. <li><b>GENRE:</b> ...</li>
  2096. <li><b>LENGTH:</b> ...</li>
  2097. <li><b>SUMMARY:</b> ...</li>
  2098. </ul>
  2099.  
  2100. </div>
  2101. <!-- FANFIC 1 -->
  2102.  
  2103. <!-- FANFIC 2 -->
  2104. <div id="fanfic">
  2105. <div id="fanfic_title"><a href="FANFIC LINK">FANFIC TITLE</a></div>
  2106. <div id="fanfic_sub">
  2107. <!-- favorite -->
  2108. <div style="float:left;">favorite!</div>
  2109. <!-- favorite -->
  2110. by <span>AUTHOR</span>
  2111. </div>
  2112.  
  2113. <ul>
  2114. <li><b>STATUS:</b> ...</li>
  2115. <li><b>PAIRING:</b> ...</li>
  2116. <li><b>GENRE:</b> ...</li>
  2117. <li><b>LENGTH:</b> ...</li>
  2118. <li><b>SUMMARY:</b> ...</li>
  2119. </ul>
  2120.  
  2121. </div>
  2122. <!-- FANFIC 2 -->
  2123.  
  2124. <!-- FANFIC 3 -->
  2125. <div id="fanfic">
  2126. <div id="fanfic_title"><a href="FANFIC LINK">FANFIC TITLE</a></div>
  2127. <div id="fanfic_sub">
  2128. <!-- favorite -->
  2129. <div style="float:left;">favorite!</div>
  2130. <!-- favorite -->
  2131. by <span>AUTHOR</span>
  2132. </div>
  2133.  
  2134. <ul>
  2135. <li><b>STATUS:</b> ...</li>
  2136. <li><b>PAIRING:</b> ...</li>
  2137. <li><b>GENRE:</b> ...</li>
  2138. <li><b>LENGTH:</b> ...</li>
  2139. <li><b>SUMMARY:</b> ...</li>
  2140. </ul>
  2141.  
  2142. </div>
  2143. <!-- FANFIC 3 -->
  2144.  
  2145. <!-- FANFIC 4 -->
  2146. <div id="fanfic">
  2147. <div id="fanfic_title"><a href="FANFIC LINK">FANFIC TITLE</a></div>
  2148. <div id="fanfic_sub">
  2149. <!-- favorite -->
  2150. <div style="float:left;">favorite!</div>
  2151. <!-- favorite -->
  2152. by <span>AUTHOR</span>
  2153. </div>
  2154.  
  2155. <ul>
  2156. <li><b>STATUS:</b> ...</li>
  2157. <li><b>PAIRING:</b> ...</li>
  2158. <li><b>GENRE:</b> ...</li>
  2159. <li><b>LENGTH:</b> ...</li>
  2160. <li><b>SUMMARY:</b> ...</li>
  2161. </ul>
  2162.  
  2163. </div>
  2164. <!-- FANFIC 4 -->
  2165.  
  2166. <!-- FANFIC 5 -->
  2167. <div id="fanfic">
  2168. <div id="fanfic_title"><a href="FANFIC LINK">FANFIC TITLE</a></div>
  2169. <div id="fanfic_sub">
  2170. <!-- favorite -->
  2171. <div style="float:left;">favorite!</div>
  2172. <!-- favorite -->
  2173. by <span>AUTHOR</span>
  2174. </div>
  2175.  
  2176. <ul>
  2177. <li><b>STATUS:</b> ...</li>
  2178. <li><b>PAIRING:</b> ...</li>
  2179. <li><b>GENRE:</b> ...</li>
  2180. <li><b>LENGTH:</b> ...</li>
  2181. <li><b>SUMMARY:</b> ...</li>
  2182. </ul>
  2183.  
  2184. </div>
  2185. <!-- FANFIC 5 -->
  2186.  
  2187. <!-- FANFIC 6 -->
  2188. <div id="fanfic">
  2189. <div id="fanfic_title"><a href="FANFIC LINK">FANFIC TITLE</a></div>
  2190. <div id="fanfic_sub">
  2191. <!-- favorite -->
  2192. <div style="float:left;">favorite!</div>
  2193. <!-- favorite -->
  2194. by <span>AUTHOR</span>
  2195. </div>
  2196.  
  2197. <ul>
  2198. <li><b>STATUS:</b> ...</li>
  2199. <li><b>PAIRING:</b> ...</li>
  2200. <li><b>GENRE:</b> ...</li>
  2201. <li><b>LENGTH:</b> ...</li>
  2202. <li><b>SUMMARY:</b> ...</li>
  2203. </ul>
  2204.  
  2205. </div>
  2206. <!-- FANFIC 6 -->
  2207.  
  2208.  
  2209. </div>
  2210. <!-- CONTENT -->
  2211.  
  2212. <!-- SUBTITLE -->
  2213. <h2>SUBTITLE</h2>
  2214. <!-- SUBTITLE -->
  2215.  
  2216. <!-- CONTENT -->
  2217. <div class="fcontent">
  2218.  
  2219. <!-- FANFIC 7 -->
  2220. <div id="fanfic">
  2221. <div id="fanfic_title"><a href="FANFIC LINK">FANFIC TITLE</a></div>
  2222. <div id="fanfic_sub">
  2223. <!-- favorite -->
  2224. <div style="float:left;">favorite!</div>
  2225. <!-- favorite -->
  2226. by <span>AUTHOR</span>
  2227. </div>
  2228.  
  2229. <ul>
  2230. <li><b>STATUS:</b> ...</li>
  2231. <li><b>PAIRING:</b> ...</li>
  2232. <li><b>GENRE:</b> ...</li>
  2233. <li><b>LENGTH:</b> ...</li>
  2234. <li><b>SUMMARY:</b> ...</li>
  2235. </ul>
  2236.  
  2237. </div>
  2238. <!-- FANFIC 7 -->
  2239.  
  2240. <!-- FANFIC 8 -->
  2241. <div id="fanfic">
  2242. <div id="fanfic_title"><a href="FANFIC LINK">FANFIC TITLE</a></div>
  2243. <div id="fanfic_sub">
  2244. <!-- favorite -->
  2245. <div style="float:left;">favorite!</div>
  2246. <!-- favorite -->
  2247. by <span>AUTHOR</span>
  2248. </div>
  2249.  
  2250. <ul>
  2251. <li><b>STATUS:</b> ...</li>
  2252. <li><b>PAIRING:</b> ...</li>
  2253. <li><b>GENRE:</b> ...</li>
  2254. <li><b>LENGTH:</b> ...</li>
  2255. <li><b>SUMMARY:</b> ...</li>
  2256. </ul>
  2257.  
  2258. </div>
  2259. <!-- FANFIC 8 -->
  2260.  
  2261.  
  2262. </div>
  2263. <!-- CONTENT -->
  2264.  
  2265. <!--------------------------- END FANFIC ---------------------------->
  2266.  
  2267. </div>
  2268. </div>
  2269. </div>
  2270.  
  2271.  
  2272.  
  2273. <!------------------------ TAB 6 - BLOGROLL ------------------------->
  2274.  
  2275.  
  2276.  
  2277. <div id="tab6" class="tab">
  2278. <div class="tabcontent">
  2279. <div id="pages">
  2280.  
  2281. <!-- TITLE -->
  2282. <h1>BLOGROLL</h1>
  2283. <!-- TITLE -->
  2284.  
  2285. <!-- CONTENT -->
  2286. <div id="content">
  2287.  
  2288. <!-- blockquote -->
  2289. <blockquote>
  2290. you can add some stuff here if you need.
  2291. </blockquote>
  2292. <!-- blockquote -->
  2293.  
  2294. {block:Following}
  2295. {block:Followed}
  2296. <div id="blogroll">
  2297. <a href="{FollowedURL}">
  2298. <img src="{FollowedPortraitURL-40}">
  2299. <div class="blogroll_name">{FollowedName}</div>
  2300. </a>
  2301. </div>
  2302. </a>
  2303. {/block:Following}
  2304. {/block:Followed}
  2305.  
  2306.  
  2307. </div>
  2308. <!-- CONTENT -->
  2309.  
  2310. </div>
  2311. </div>
  2312. </div>
  2313.  
  2314. <!-------------------------- END TABS --------------------------->
  2315.  
  2316.  
  2317.  
  2318. </div>
  2319. </div>
  2320. </div>
  2321. </div>
  2322.  
  2323. </div>
  2324.  
  2325.  
  2326.  
  2327. <!--------------------------- SCRIPTS --------------------------->
  2328.  
  2329.  
  2330.  
  2331. <script>
  2332. $(document).ready(function() {
  2333. $('.tabs .tab-links a').on('click', function(e) {
  2334. var currentAttrValue = $(this).attr('href');
  2335.  
  2336. // Show/Hide Tabs
  2337. $('.tabs ' + currentAttrValue).fadeIn(600).siblings().hide();
  2338.  
  2339. // Change/remove current tab to active
  2340. $(this).parent('li').addClass('active').siblings().removeClass('active');
  2341.  
  2342. e.preventDefault();
  2343. });
  2344. });
  2345. </script>
  2346.  
  2347. <script>
  2348. $(document).ready(function() {
  2349. $('#filterOptions li a').click(function() {
  2350. // fetch the class of the clicked item
  2351. var ourClass = $(this).attr('class');
  2352.  
  2353. // reset the active class on all the buttons
  2354. $('#filterOptions li').removeClass('active');
  2355. // update the active state on our clicked button
  2356. $(this).parent().addClass('active');
  2357.  
  2358. if(ourClass == 'all') {
  2359. // show all our items
  2360. $('#ourHolder').children('div.item').show();
  2361. }
  2362. else {
  2363. // hide all elements that don't share ourClass
  2364. $('#ourHolder').children('div:not(.' + ourClass + ')').hide();
  2365. // show all elements that do share ourClass
  2366. $('#ourHolder').children('div.' + ourClass).show();
  2367. }
  2368. return false;
  2369. });
  2370. });
  2371. </script>
  2372.  
  2373.  
  2374.  
  2375. <!-------------------- CREDIT / DON'T DELETE --------------------->
  2376.  
  2377.  
  2378.  
  2379. <div id="cr">
  2380. <a href="https://kimtys.tumblr.com" title="by kimtys">k.</a>
  2381. </div>
  2382.  
  2383. </body>
  2384. </html>
  2385. <!--
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!