kimtys

ALL IN ONE

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