API tools faq
paste
Advertisement
ochizukes

Page 002: Tabs (Premade)

ochizukes
May 8th, 2015
2,893
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 24.01 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. Page 002. Optimized for Tumblr on desktop. Compatible with Google Chrome, Mozilla Firefox, Opera, Safari, and Internet Explorer.
  4.  
  5. This page is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International license.
  6.  
  7. http://creativecommons.org/licenses/by-nc-nd/4.0/
  8.  
  9.  
  10. /********************************************************************/
  11.  
  12.  
  13. If you like the pre-made version of this theme, installation is easy.
  14.  
  15. 1. Go to customize your main blog and add a page
  16.  
  17. 2. Select "Custom Layout", and paste this code into the blank space
  18.  
  19. 3. Add your information to the page; everything you can edit is labelled
  20.  
  21. 4. Select "Update" and save your changes
  22.  
  23. That's it! Now you have a custom all-in-one page!
  24.  
  25. -->
  26.  
  27. <!DOCTYPE html><html>
  28. <head>
  29.  
  30. <title>1ST TITLE HERE</title> <!-- the title in the browser tab -->
  31.  
  32. <link rel="shortcut icon" href="FAVICON URL HERE"/> <!-- the small pixel next to the title-->
  33.  
  34. <!-- !DON'T TOUCH -->
  35. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
  36. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  37. <link rel="apple-touch-icon" href="{PortraitURL-128}"/>
  38. <link rel="alternate" type="application/rss+xml" href="{RSS}"/>
  39. <link href="#s-m-t-tooltip" rel="stylesheet" type="text/css" />
  40.  
  41. <!-- GOOGLE FONTS -- if you want to change the font, add it here! -->
  42.  
  43. <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600' rel='stylesheet' type='text/css'>
  44.  
  45. <link href='http://fonts.googleapis.com/css?family=Ubuntu:400,500,400italic,500italic' rel='stylesheet' type='text/css'>
  46.  
  47. <!-- now the customization begins -->
  48.  
  49. <style type="text/css">
  50.  
  51. /************************* SCROLLBAR CUSTOMIZATION *************************/
  52.  
  53. ::-webkit-scrollbar-track {
  54.    
  55.     background-color:#e8e1f5; /* the scrollbar color */
  56.    
  57.     /* !don't touch; the below makes the scroll's background transparent */
  58.     background-clip:padding-box; border:3px solid rgb(0, 0, 0); border:3px        solid rgba(0, 0, 0, 0); -webkit-background-clip:padding-box;
  59. }
  60.  
  61. ::-webkit-scrollbar-thumb {
  62.    
  63.     background-color:#e8e1f5; /* the scrollbar color */
  64.    
  65.     border-radius:5px; /* how round your scrollbar is; the higher the number,     the rounder it is */
  66.    
  67.     /* !don't touch; the below makes the scroll's background transparent */
  68.     background-clip:padding-box; border:0px solid rgb(0, 0, 0); border:0px        solid rgba(255, 0, 0, 0); -webkit-background-clip: padding-box;
  69. }
  70.  
  71. ::-webkit-scrollbar { width:5px; } /* how thick your scrollbar is; recommended values are 5px and 7px */
  72.  
  73. /*************************** GRADIENT BACKGROUND ***************************/
  74.  
  75. html {
  76.    
  77.     background:-webkit-linear-gradient(#fff4fa, #cff5eb); /* your BG in safari */
  78.    
  79.     background: -o-linear-gradient(#fff4fa, #cff5eb); /* your BG in opera */
  80.    
  81.     background: -moz-linear-gradient(#fff4fa, #cff5eb); /* your BG in mozilla firefox */
  82.    
  83.     background: linear-gradient(#fff4fa, #cff5eb); /* standard gradient BG code */
  84.    
  85.     height:100%; /* removing this will break the gradient BG */
  86. }
  87.  
  88. body {
  89.    
  90.     color:#a5a5a5; /* general text color [info paragraphs, link subtitles     and FAQ questions] */
  91.    
  92.     font:11px ubuntu; /* !don't touch, this keeps the line-height stable */
  93.    
  94.     letter-spacing:1px; /* space between letters in general text */
  95.    
  96.     line-height:17px; /* space between lines in general text */
  97.    
  98.     /* !don't touch the bottom three */
  99.     margin:0; overflow-x:hidden; padding:0;
  100. }
  101.  
  102. /********************************** LINKS **********************************/
  103.  
  104. a {
  105.    
  106.     color:#cfc3ea; /* link color */
  107.    
  108.     text-decoration:none; /* your options are none, underline, overline, and      line-through */
  109. }
  110.  
  111. /****************************** FAQ ANSWERS ******************************/
  112.  
  113. blockquote {
  114.    
  115.     background:#fbfbfb; /* background color */
  116.    
  117.     border-left:1px dashed #e5e5e5; /* border color */
  118.    
  119.     color:#b8b8b8; /* text color */
  120.    
  121.     /* !don't touch, these dictate the blockquote positioning */
  122.     margin-left:12px; padding-top:1px; padding-left:12px; padding-bottom:1px;     padding-right:0; width:90%; word-wrap:break-word;
  123. }
  124.  
  125. /********************************* SIDEBAR ********************************/
  126.  
  127. #sidebar {
  128.    
  129.     margin-left:-570px; /* how far it is from the left of the tabs box */
  130.    
  131.     margin-top:130px; /* !don't touch; how far it is from the top */
  132. }
  133.  
  134. /********** PORTRAIT IMAGE **********/
  135.  
  136. .portrait {
  137.     background-color:rgba(255, 255, 255, 0.4); /* the color and transparency      of the portrait background. I usually use white [255, 255, 255] and black     [0, 0, 0]. the last number is the transparency, 0 being completely gone       and 1 being completely there. you can use decimals! */
  138.    
  139.     border:1px solid #ffffff; /* image border color */
  140.    
  141.     border-radius:5px; /* how round the image is */
  142.    
  143.     /* shadow */
  144.     -webkit-box-shadow:6px 6px 0px -1px #ffffff;
  145.     box-shadow:6px 6px 0px -1px #ffffff;
  146.    
  147.     display:block; /* !don't touch; keeps things in place */
  148.     margin:0 auto; /* !don't touch; centers the image */
  149.    
  150.     margin-top:20px; margin-bottom:30px; /* !don't touch */
  151.    
  152.     padding:13px; /* how large the background is */
  153.    
  154.     width:110px; /* image size */
  155. }
  156.  
  157. /**** INDEX, MESSAGE, ARCHIVE, ETC ****/
  158.  
  159. .navigate {
  160.    
  161.     background-color:rgba(255, 255, 255, 0.4); /* the color and transparency      of the navigation background. I usually use white [255, 255, 255] and         black [0, 0, 0]. the last number is the transparency, 0 being completely      gone and 1 being completely there. you can use decimals! */
  162.    
  163.     border:1px solid #ffffff; /* navigation border color */
  164.    
  165.     border-radius:5px; /* how round the nav box is */
  166.    
  167.     /* shadow */
  168.     -webkit-box-shadow:6px 6px 0px -1px #ffffff;
  169.     box-shadow:6px 6px 0px -1px #ffffff;
  170.    
  171.     display:block; /* !don't touch; keeps things in place */
  172.     margin:0 auto; /* !don't touch; centers the image */
  173.    
  174.     height:112px; /* how tall the nav box is */
  175.    
  176.     padding:13px; /* how large the background is */
  177.    
  178.     width:110px; /* how wide the nav box is */
  179. }
  180.  
  181. .navi {
  182.    
  183.     background-color:#ffffff; /* background color */
  184.    
  185.     font-size:10px; /* link text size */
  186.    
  187.     margin-bottom:3px; /* spacing between links */
  188.    
  189.     padding:9px; /* how thick the link boxes are */
  190.    
  191.     text-align:center; /* if the text falls to the left, center, or right */
  192.    
  193.     text-transform:uppercase; /* this can be uppercase, lowercase, or none */
  194. }
  195.  
  196. .navi a { color:#d3cae7; } /* link color */
  197.  
  198. /**********************************  TITLE **********************************/
  199.  
  200. .title {
  201.    
  202.     color:#ffffff; /* title color */
  203.    
  204.     display:block; /* !don't touch; keeps things in place */
  205.    
  206.     font:15px ubuntu; /* title font and size */
  207.    
  208.     letter-spacing:1px; /* space between letters */
  209.    
  210.     margin-top:30px; /* !don't touch */
  211.    
  212.     text-align:center; /* if the text falls to the left, center, or right */
  213.    
  214.     text-transform:uppercase; /* this can be uppercase, lowercase, or none */
  215. }
  216.  
  217. /****************************** OUTER TABS BOX ******************************/
  218.  
  219. .tabs {
  220.    
  221.     background-color:rgba(255, 255, 255, 0.4); /* the color and transparency      of the navigation background. I usually use white [255, 255, 255] and         black [0, 0, 0]. the last number is the transparency, 0 being completely      gone and 1 being completely there. you can use decimals! */
  222.    
  223.     border:1px solid #ffffff; /* navigation border color */
  224.    
  225.     border-radius:5px; /* how round the nav box is */
  226.    
  227.     /* shadow */
  228.     -webkit-box-shadow:6px 6px 0px -1px #ffffff;
  229.     box-shadow:6px 6px 0px -1px #ffffff;
  230.    
  231.     display:block; /* !don't touch; keeps things in place */
  232.     margin:0 auto; /* !don't touch; centers the image */
  233.     margin-top:-405px; /* !don't touch */
  234.    
  235.     margin-bottom:25px;/* space between the tabs box and the inbox */
  236.    
  237.     padding:13px; padding-top:3px; /* size of the background */
  238.    
  239.     width:350px; /* size of the tabs box */
  240. }
  241.  
  242. /* !don't touch */
  243. .tab-links:after { clear:both; content:''; display:block; }
  244. .tab-links li { float:left; list-style:none; margin-right:47px; }
  245.  
  246. /********************************** TABS **********************************/
  247.  
  248. /**************** NONACTIVE ****************/
  249.  
  250. .tab-links a {
  251.    
  252.     background:#ffffff; /* bg color; same as the rest of the box */
  253.    
  254.     border-radius:3px 3px 0px 0px; /* how round the tab corners are */
  255.    
  256.     color:#ccede4; /* text color */
  257.    
  258.     display:inline-block; /*!don't touch; keep things in place */
  259.    
  260.     font:11px ubuntu; /* font family and size */
  261.    
  262.     /* !don't touch */
  263.     margin-left:-40px;
  264.     padding:9px 15px;
  265.    
  266.     text-transform:uppercase; /* this can be uppercase, lowercase, or none */
  267.    
  268.     transition:all linear 0.15s; /* !don't touch */
  269. }
  270.  
  271. /***** NONACTIVE TABS ON HOVER + ACTIVE TAB *****/
  272.  
  273. .tab-links a:hover, li.active a, li.active a:hover {
  274.    
  275.     background:#d8f3eb; /* background color */
  276.    
  277.     color:#ffffff; /* text color */
  278.    
  279.     text-decoration:none; /* your options are none, underline, overline, and      line-through */
  280. }
  281.  
  282. /****************************** INNER TABS BOX ******************************/
  283.  
  284. .tab-content {
  285.    
  286.     background:#ffffff; /* background color */
  287.    
  288.     border-radius:5px; border-top-left-radius:0px; /* how rounded inner           corners are */
  289.    
  290.     font:10px open sans; /* font family and size */
  291.    
  292.     height:300px; /* how tall the tabs box is */
  293.    
  294.     letter-spacing:1px; /* spacing between letters */
  295.    
  296.     line-height:18px; /* spacing between lines */
  297.    
  298.     margin-top:-11px; /* !don't touch */
  299.    
  300.     overflow-y:scroll; /* enables scrolling */
  301.    
  302.     padding:13px; padding-top:0px; padding-bottom:0px; /* !don't touch */
  303. }
  304.  
  305. /* !don't touch */
  306. .tab { display:none; }
  307. .tab.active { display:block; }
  308.  
  309. /************************ ABOUT + QUESTION SUBTITLES ************************/
  310.  
  311. .h {
  312.    
  313.     font-size:10px; /* text size */
  314.    
  315.     letter-spacing:1px; /* spacing between letters */
  316.    
  317.     text-transform:uppercase; /* this can be uppercase, lowercase, or none */
  318. }
  319.  
  320. /****************************** LINK SUBTITLES ******************************/
  321.  
  322. .hl, .hr {
  323.    
  324.     font-size:10px; /* font size */
  325.    
  326.     letter-spacing:1px; /* spacing between letters */
  327.    
  328.     text-align:center; /* if the text falls to the left, center, or right */
  329.    
  330.     text-transform:uppercase; /* this can be uppercase, lowercase, or none */
  331.    
  332.     width:144px; /* must match the width of the link boxes */
  333. }
  334.  
  335. /******************************** LINK BOXES ********************************/
  336.  
  337. .ll, .lr {
  338.    
  339.     background:#fbfbfb; /* background color */
  340.    
  341.     margin-bottom:5px; /* vertical space between boxes */
  342.    
  343.     padding:6px; /* background size */
  344.    
  345.     width:144px; /* link box size; must match the width of link subtitles */
  346. }
  347.  
  348. .ll a, .lr a { color:#cddfea; } /* text color */
  349.  
  350. /******************************** BLOGROLL ********************************/
  351.  
  352. #blogroll { margin-left:-6px; margin-top:12px; } /* !don't touch */
  353.  
  354. .blogicon {
  355.  
  356.     background:#f8f8f8; /* background color */
  357.    
  358.     border:1px dashed #ebe3f8; /* border color */
  359.    
  360.     border-radius:3px; /* how round the icon is */
  361.    
  362.     margin-left:2px; margin-bottom:2px; /* space between icons */
  363.    
  364.     padding:9px; /* background size */
  365. }
  366.  
  367. /********************************* ASK BOX *********************************/
  368.  
  369. .inbox {
  370.    
  371.     background-color:rgba(255, 255, 255, 0.4); /* the color and transparency      of the portrait background. I usually use white [255, 255, 255] and black     [0, 0, 0]. the last number is the transparency, 0 being completely gone       and 1 being completely there. you can use decimals! */
  372.    
  373.     border:1px solid #ffffff; /* image border color */
  374.    
  375.     border-radius:5px; /* how round the image is */
  376.    
  377.     /* shadow */
  378.     -webkit-box-shadow:6px 6px 0px -1px #ffffff;
  379.     box-shadow:6px 6px 0px -1px #ffffff;
  380.    
  381.     display:block; /* !don't touch; keeps things in place */
  382.     margin:0 auto; /* !don't touch; centers the image */
  383.     overflow:hidden; /* !don't touch */
  384.    
  385.     padding:13px; /* background size */
  386. }
  387.  
  388. /********************************* TOOLTIPS *********************************/
  389.  
  390. #s-m-t-tooltip {
  391.     background:#ffffff; /* background color */
  392.    
  393.     border-radius:2px; /* how round the box is */
  394.    
  395.     color:#d3cae7; /* text color */
  396.    
  397.     font-size:9px; /* font size */
  398.    
  399.     letter-spacing:1px; /* space between letters */
  400.    
  401.     text-transform:uppercase; /* this can be uppercase, lowercase, or none */
  402.    
  403.     /* !don't touch */
  404.     display:block;
  405.     margin:20px 10px 10px 10px;
  406.     max-width:100px;
  407.     padding:6px; padding-bottom:3px;
  408.     word-wrap:break-word;
  409.     z-index:999999;
  410. }
  411.  
  412. {CustomCSS}
  413. </style>
  414.  
  415. <!-- Tabs Script !don't touch -->
  416.  
  417. <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
  418.  
  419. <script>
  420.    
  421.    jQuery(document).ready(function() {
  422.    jQuery('.tabs .tab-links a').on('click', function(e)  {
  423.        var currentAttrValue = jQuery(this).attr('href');
  424.  
  425.        // Show/Hide Tabs
  426.        jQuery('.tabs ' + currentAttrValue).show().siblings().hide();
  427.  
  428.        // Change/remove current tab to active
  429.        jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
  430.  
  431.        e.preventDefault();
  432.    });
  433. });
  434.    
  435. </script>
  436.  
  437. <!-- End Tabs Script -->
  438.  
  439. <!-- Tooltips -->
  440.  
  441. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  442.  
  443. <script type="text/javascript" src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
  444.  
  445. <script>
  446.    (function($){
  447.        $(document).ready(function(){
  448.            $("[title]").style_my_tooltips();
  449.        });
  450.    })(jQuery);
  451. </script>
  452.  
  453. <!-- End Tooltips -->
  454.  
  455. </head>
  456. <body>
  457.  
  458. <!-- now we begin editing the content -->
  459.  
  460. <!--------------------------------- SIDEBAR --------------------------------->
  461.  
  462. <div id="sidebar">
  463.  
  464. <img class="portrait" src="https://33.media.tumblr.com/82f2e49c0928ab58aabbe9f3d6a326ea/tumblr_inline_nnzuql1HMU1sjbgbx_500.gif" alt=""/><!-- portrait image; paste URL in src="" between quotations -->
  465.    
  466. <div class="navigate"><!-- side links below; don't remove the credit! -->
  467.    
  468.     <div class="navi"><a href="/">return</a></div>
  469.     <div class="navi"><a href="http://tumblr.com">leave</a></div>
  470.     <div class="navi"><a href="http://maomuthemes.tumblr.com">credit</a></div>
  471.    
  472. </div><!-- end navigate -->
  473.  
  474. <div class="title">2ND TITLE HERE</div><!-- tabs box title -->
  475.    
  476. </div><!-- end sidebar -->
  477.  
  478. <!------------------------------ MAIN CONTENT ------------------------------>
  479.  
  480. <div class="tabs">
  481.  
  482.     <ul class="tab-links">
  483.    
  484.         <li class="active"><a href="#tab1">Info</a></li><!-- 1st tab title -->
  485.        
  486.         <li><a href="#tab2">links</a></li><!-- 2nd tab title -->
  487.        
  488.         <li><a href="#tab3">FAQ</a></li><!-- 3rd tab title -->
  489.        
  490.         <li><a href="#tab4">Blogroll</a></li><!-- 4th tab title -->
  491.        
  492.     </ul><!-- end tab links -->
  493.  
  494.     <div class="tab-content">
  495.    
  496. <!---------------------------------- INFO ---------------------------------->
  497.    
  498.         <div id="tab1" class="tab active">
  499.        
  500.             <p class="h"><img src="https://38.media.tumblr.com/1de16fef2de4cdd76a5ab29513f02c30/tumblr_inline_nnzqjpJD7A1sjbgbx_500.gif" alt=""/> <!-- if you want a cute pixel next to the text; paste URL in src="" between quotations -->
  501.            
  502.             <font style="background:#f8f8f8; color:#f5c9d9; padding:0px 4px 0px 4px;"> <!-- bg and text colors -->
  503.            
  504.             name: your name here </font></p> <!-- content -->
  505.            
  506.             <p class="h"><img src="https://38.media.tumblr.com/1de16fef2de4cdd76a5ab29513f02c30/tumblr_inline_nnzqjpJD7A1sjbgbx_500.gif" alt=""/> <!-- pixel -->
  507.            
  508.             <font style="background:#f8f8f8; color:#f5c9d9; padding:0px 4px 0px 4px;"> <!-- bg and text colors -->
  509.            
  510.             age: your age here </font></p> <!-- content -->
  511.            
  512.             <p class="h"><img src="https://38.media.tumblr.com/1de16fef2de4cdd76a5ab29513f02c30/tumblr_inline_nnzqjpJD7A1sjbgbx_500.gif" alt=""/>  <!-- pixel -->
  513.            
  514.             <font style="background:#f8f8f8; color:#f5c9d9; padding:0px 4px 0px 4px;"> <!-- bg and text colors -->
  515.            
  516.             location: your location here </font></p> <!-- content -->
  517.            
  518.             <p>First paragraph. Add as many as you want!</p>
  519.            
  520.             <p>Second pargraph. Here is how you <i>italicize</i>, <b>bold</b>, make a <blockquote>blockquote</blockquote> <s>strikethrough</s>, <small>shrink text</small>, or <big>enlarge</big> it.</p>
  521.            
  522.             <p>Third paragraph. The scrollbar will appear once the text exceeds the length of the box, no worries!</p>
  523.            
  524.         </div><!-- End Info -->
  525.    
  526. <!------------------------------ LINKS / TAGS ------------------------------>
  527.  
  528.         <div id="tab2" class="tab">
  529.        
  530.         <table><tr>
  531.        
  532.         <!-- left side; odd numbered boxes -->
  533.        
  534.         <td valign="top">
  535.        
  536.             <div class="hl"><img src="https://38.media.tumblr.com/5a9278ec34403f30c4f8663291e4ea3f/tumblr_inline_nnzqjivtg21sjbgbx_500.gif" alt=""/> 01: section</div><!-- section title + pixel; paste pixel URL in src="" between quotations -->
  537.            
  538.             <div class="ll"><!-- your links below; don't be afraid to add more links, the boxes actually look cool when they're uneven lengths -->
  539.                 <a href="URL HERE">+ link one</a><br>
  540.                 <a href="URL HERE">+ link two</a><br>
  541.                 <a href="URL HERE">+ link three</a><br>
  542.                 <a href="URL HERE">+ link four</a><br>
  543.                 <a href="URL HERE">+ link five</a><br>
  544.             </div><!-- end links -->
  545.            
  546.             <div class="hl"><img src="https://38.media.tumblr.com/5a9278ec34403f30c4f8663291e4ea3f/tumblr_inline_nnzqjivtg21sjbgbx_500.gif" alt=""/> 03: section</div><!-- section title + pixel -->
  547.            
  548.             <div class="ll"><!-- your links below -->
  549.                 <a href="URL HERE">+ link one</a><br>
  550.                 <a href="URL HERE">+ link two</a><br>
  551.                 <a href="URL HERE">+ link three</a><br>
  552.                 <a href="URL HERE">+ link four</a><br>
  553.                 <a href="URL HERE">+ link five</a><br>
  554.             </div><!-- end links -->
  555.            
  556.             <div class="hl"><img src="https://38.media.tumblr.com/5a9278ec34403f30c4f8663291e4ea3f/tumblr_inline_nnzqjivtg21sjbgbx_500.gif" alt=""/> 05: section</div><!-- section title + pixel -->
  557.            
  558.             <div class="ll"><!-- your links below -->
  559.                 <a href="URL HERE">+ link one</a><br>
  560.                 <a href="URL HERE">+ link two</a><br>
  561.                 <a href="URL HERE">+ link three</a><br>
  562.                 <a href="URL HERE">+ link four</a><br>
  563.                 <a href="URL HERE">+ link five</a><br>
  564.             </div><!-- end links -->
  565.          
  566.         </td><!-- end left -->
  567.        
  568.         <!-- right side; even numbered boxes -->
  569.        
  570.         <td valign="top">
  571.        
  572.             <div class="hr"><img src="https://38.media.tumblr.com/5a9278ec34403f30c4f8663291e4ea3f/tumblr_inline_nnzqjivtg21sjbgbx_500.gif" alt=""/> 02: section</div><!-- section title + pixel -->
  573.            
  574.             <div class="lr"><!-- your links below -->
  575.                 <a href="URL HERE">+ link one</a><br>
  576.                 <a href="URL HERE">+ link two</a><br>
  577.                 <a href="URL HERE">+ link three</a><br>
  578.                 <a href="URL HERE">+ link four</a><br>
  579.                 <a href="URL HERE">+ link five</a><br>
  580.             </div><!-- end links -->
  581.            
  582.             <div class="hr"><img src="https://38.media.tumblr.com/5a9278ec34403f30c4f8663291e4ea3f/tumblr_inline_nnzqjivtg21sjbgbx_500.gif" alt=""/> 04: section</div><!-- section title + pixel -->
  583.            
  584.             <div class="lr"><!-- your links below -->
  585.                 <a href="URL HERE">+ link one</a><br>
  586.                 <a href="URL HERE">+ link two</a><br>
  587.                 <a href="URL HERE">+ link three</a><br>
  588.                 <a href="URL HERE">+ link four</a><br>
  589.                 <a href="URL HERE">+ link five</a><br>
  590.             </div><!-- end links -->
  591.            
  592.             <div class="hr"><img src="https://38.media.tumblr.com/5a9278ec34403f30c4f8663291e4ea3f/tumblr_inline_nnzqjivtg21sjbgbx_500.gif" alt=""/> 06: section</div><!-- section title + pixel -->
  593.            
  594.             <div class="lr"><!-- your links below -->
  595.                 <a href="URL HERE">+ link one</a><br>
  596.                 <a href="URL HERE">+ link two</a><br>
  597.                 <a href="URL HERE">+ link three</a><br>
  598.                 <a href="URL HERE">+ link four</a><br>
  599.                 <a href="URL HERE">+ link five</a><br>
  600.             </div><!-- end links -->
  601.          
  602.         </td><!-- end right -->
  603.        
  604.         </tr></table><!-- end table -->
  605.            
  606.         </div><!-- End Links/Tags -->
  607.        
  608. <!---------------------------------- FAQ ---------------------------------->
  609.  
  610.         <div id="tab3" class="tab">
  611.        
  612.             <!-- Question 1 -->
  613.        
  614.             <p class="h"><img src="https://38.media.tumblr.com/da548d07de4e670debfa41a3fbc5bf73/tumblr_inline_nnzqkwzOZo1sjbgbx_500.gif" alt=""/> Q: QUESTION HERE</p>
  615.             <blockquote>A: ANSWER HERE</blockquote>
  616.            
  617.             <!-- Question 2 -->
  618.        
  619.             <p class="h"><img src="https://38.media.tumblr.com/da548d07de4e670debfa41a3fbc5bf73/tumblr_inline_nnzqkwzOZo1sjbgbx_500.gif" alt=""/> Q: QUESTION HERE</p>
  620.             <blockquote>A: ANSWER HERE</blockquote>
  621.                
  622.             <!-- Question 3 -->
  623.            
  624.             <p class="h"><img src="https://38.media.tumblr.com/da548d07de4e670debfa41a3fbc5bf73/tumblr_inline_nnzqkwzOZo1sjbgbx_500.gif" alt=""/> Q: QUESTION HERE</p>
  625.             <blockquote>A: ANSWER HERE</blockquote>
  626.            
  627.             <!-- Question 4 -->
  628.            
  629.             <p class="h"><img src="https://38.media.tumblr.com/da548d07de4e670debfa41a3fbc5bf73/tumblr_inline_nnzqkwzOZo1sjbgbx_500.gif" alt=""/> Q: QUESTION HERE</p>
  630.             <blockquote>A: ANSWER HERE</blockquote>
  631.            
  632.             <!-- Question 5 -->
  633.            
  634.             <p class="h"><img src="https://38.media.tumblr.com/da548d07de4e670debfa41a3fbc5bf73/tumblr_inline_nnzqkwzOZo1sjbgbx_500.gif" alt=""/> Q: QUESTION HERE</p>
  635.             <blockquote>A: ANSWER HERE</blockquote>
  636.            
  637.             <!-- To add another question, copy and paste everything underneath Question 5 from <p class="q"> to the end </blockquote> and fill it in. -->
  638.            
  639.         </div><!-- End FAQ -->
  640.    
  641. <!-------------------------------- BLOGROLL -------------------------------->
  642.    
  643. <!-- you don't really need to edit this -->    
  644.    
  645.    <div id="tab4" class="tab">
  646.    
  647.        <div id="blogroll">
  648.            {block:Following}
  649.                {block:Followed}
  650.                        <a title="{FollowedName}" target="_blank" href="{FollowedURL}"><img class="blogicon" src="{FollowedPortraitURL-40}" alt=""/></a>
  651.                {/block:Followed}
  652.            {/block:Following}
  653.        </div>
  654.    
  655.    </div><!-- End Blogroll -->
  656.        
  657.    </div><!-- end tab content -->
  658. </div><!-- end tabs -->
  659.  
  660. <!--------------------------------- ASK BOX --------------------------------->
  661.  
  662. <!-- make sure you change YOURURLHERE to your URL -->
  663.  
  664. <iframe class="inbox" frameborder="0" border="0" scrolling="no" width="350" height="260" allowtransparency="true" src="http://www.tumblr.com/ask_form/YOURURLHERE.tumblr.com"></iframe><!-- End Ask Box -->
  665.  
  666. </body>
  667. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!