daily pastebin goal
22%
SHARE
TWEET

Tags - Foreword [FILTER OPTION]

themesbydoori Oct 13th, 2017 (edited) 2,008 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!--
  2.  
  3. ╭━━━┳╮╱╭┳━━━┳━━━┳━━━━┳╮╱╭┳━━━┳━╮╭━┳━━━┳━━━╮
  4. ┃╭━╮┃┃╱┃┃╭━━┫╭━╮┃╭╮╭╮┃┃╱┃┃╭━━┫┃╰╯┃┃╭━━┫╭━╮┃
  5. ┃╰━━┫╰━╯┃╰━━┫┃╱┃┣╯┃┃╰┫╰━╯┃╰━━┫╭╮╭╮┃╰━━┫╰━━╮
  6. ╰━━╮┃╭━╮┃╭━━┫╰━╯┃╱┃┃╱┃╭━╮┃╭━━┫┃┃┃┃┃╭━━┻━━╮┃
  7. ┃╰━╯┃┃╱┃┃╰━━┫╭━╮┃╱┃┃╱┃┃╱┃┃╰━━┫┃┃┃┃┃╰━━┫╰━╯┃
  8. ╰━━━┻╯╱╰┻━━━┻╯╱╰╯╱╰╯╱╰╯╱╰┻━━━┻╯╰╯╰┻━━━┻━━━╯
  9.  
  10. Tags page ⎾Foreword w/ Filter Option⏌ by sheathemes @ tumblr
  11.  
  12. - TERMS -
  13.  
  14. I. Do NOT remove my credit from the index page. Keep it exactly where it is
  15. II. Do NOT take any part of my code to use for your personal designs
  16. III. Do NOT claim any part of my code as your own
  17. IV. NO redistrubuting of any of my code
  18. V. Editing is allowed. As long as it's NOT being claimed as your own
  19.  
  20. CREDITS
  21.  
  22. > Style-my-Tootips: http://manos.malihu.gr/style-my-tooltips-jquery-plugin/
  23.  
  24. > Smoothscroll script: https://cdnjs.com/libraries/smoothscroll
  25.  
  26. > Isotope filtering script: https://isotope.metafizzy.co/filtering.html
  27.  
  28. !-->
  29.  
  30. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  31. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  32.  
  33. <head>
  34.  
  35. <!--Custom Fonts-->
  36. <link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i|Dosis:300,400,500,600,700" rel="stylesheet">
  37. <!--Custom Fonts-->
  38.  
  39. <!--Homelinks Icons-->
  40. <link rel="stylesheet" href="http://static.tumblr.com/i5s2zks/6kOohwlux/pe-icon-7-stroke.css">
  41. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  42. <link href="//dl.dropbox.com/s/50g6fbds3rh4m0j/saturnicons.css" rel="stylesheet">
  43. <!--Homelinks Icons-->
  44.  
  45.     <title>{Title}</title>
  46.     <link rel="shortcut icon" href="{Favicon}">
  47.     <link rel="altertnate" type="application/rss+xml" href="{RSS}">
  48.     <meta http-equiv="x-dns-prefetch-control" content="off"/>
  49.     <meta name="viewport" content="width=device-width, initial-scale=1">
  50.  
  51. <!--------Smooth scrolling script-------->
  52. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  53. <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.6/SmoothScroll.min.js"></script>
  54. <!--------Smooth scrolling script-------->
  55.  
  56. <style type="text/css">
  57.  
  58. /*----------FADE-IN ANIMATION----------*/
  59.  
  60. @keyframes fadein {
  61.     from {opacity:0;}
  62.     to {opacity:1;}
  63. }
  64.  
  65. @-moz-keyframes fadein { /* Firefox */
  66.     from {opacity:0;}
  67.     to {opacity:1;}
  68. }
  69.  
  70. @-webkit-keyframes fadein { /* Safari and Chrome */
  71.     from {opacity:0;}
  72.     to {opacity:1;}
  73. }
  74.  
  75. @-o-keyframes fadein { /* Opera */
  76.     from {opacity:0;}
  77.     to {opacity: 1;}
  78. }
  79.  
  80. /*----------TUMBLR CONTROLS----------*/
  81.  
  82. iframe#tumblr_controls, .iframe-controls--desktop {
  83.     right: 10px !important;
  84.     top: 25px !important;
  85.     position: fixed !important;
  86.     z-index: 99999999999999999999 !important;
  87.     -webkit-filter: invert(100%);
  88.     -moz-filter: invert(100%);
  89.     -o-filter: invert(100%);
  90.     -webkit-transition: opacity 0.4s linear;opacity: 0.4;
  91.     -webkit-transition: all 0.8s ease-out;
  92.     -moz-transition: all 0.8s ease-out;
  93.     transition: all 0.8s ease-out;
  94.     display: none;
  95. }
  96.  
  97. /*----------SCROLLBAR----------*/
  98.  
  99. ::-webkit-scrollbar {
  100.     width: 6px;
  101.     height: 6px;
  102. }
  103. ::-webkit-scrollbar-button {
  104.     width: 0px;
  105.     height: 0px;
  106. }
  107. ::-webkit-scrollbar-thumb {
  108.     background: #D8C8B8; /*change the color of the scrollbar*/
  109.     border: 2px solid #fdfdfd; /*change the color of the scrollbar background*/
  110. }
  111.  
  112. ::-webkit-scrollbar-track {
  113.     background: transparent;
  114.     border: 8px solid transparent;
  115. }
  116.  
  117. ::-webkit-scrollbar-corner {
  118.     background: transparent;
  119. }
  120.  
  121.  
  122. /*----------TOOLTIPS----------*/
  123.  
  124. #s-m-t-tooltip {
  125.     max-width:300px;
  126.     padding:2px 5px;
  127.     margin: -20px 7px -2px 20px;
  128.     background-color: #fff;  /* change the background color of the tooltip */
  129.     font-size:9px;
  130.     letter-spacing:2px;
  131.     text-transform:lowercase;
  132.     color: #888;  /* change the text color of the tooltip */
  133.     border: 1px solid #D8C8B8; /* change the border color of the tooltip */
  134.     z-index:999999999999999999999999999999999999;
  135. }
  136.  
  137. /*----------TEXT SELECTION----------*/
  138. ::selection {
  139.     background: #D8C8B8; /*change the color of the text selection background*/
  140.     color: #fff; /*change the color of the text selection*/
  141. }
  142.  
  143. ::-moz-selection {
  144.     background: #D8C8B8; /*change the color of the text selection background*/
  145.     color: #fff; /*change the color of the text selection*/
  146. }
  147.  
  148. ::-webkit-selection {
  149.     background: #FFAB98; /*change the color of the text selection background*/
  150.     color: #fff; /*change the color of the text selection*/
  151. }
  152.  
  153. /*----------THEME BASICS----------*/
  154.  
  155. body {
  156.     color: #888;
  157.     font-family: 'Roboto', sans-serif;
  158.     font-weight: 400;
  159.     font-size: 13px;
  160.     line-height: 180%;
  161.     margin: 0;
  162.     text-align: left;
  163.     background: #fdfdfd url("") center; /*change the color of the main background and add a background image between the quotations*/
  164.     background-attachment: fixed;
  165.     background-repeat: repeat;
  166.     -webkit-font-smoothing: antialiased;
  167.     -moz-osx-font-smoothing: grayscale;
  168.     animation: fadein 2.5s;
  169.     -moz-animation: fadein 2.5s; /* Firefox */
  170.     -webkit-animation: fadein 2.5s; /* Safari and Chrome */
  171.     -o-animation: fadein  2.5s; /* Opera */
  172. }
  173.  
  174. b,strong {
  175.     color: #FFAB98; /*change bold color here in your about section*/
  176.     font-weight: 700;
  177. }
  178.  
  179. i,em {
  180.     color: #FFAB98; /*change italic color here in your about section*/
  181. }
  182.  
  183. u {
  184.     color: #FFAB98; /*change underline color here in your about section*/
  185. }
  186.  
  187. hr {
  188.     width: 30%;
  189.     height: 1px;
  190.     background-color: #f6f6f6; /*change horizontal color here in your about section*/
  191.     color: #f6f6f6; /*change horizontal color here in your about section*/
  192.     border: 0px solid transparent;
  193. }
  194.  
  195. small,sub,sup {
  196.     font-size: 10px;
  197. }
  198.  
  199. a {
  200.     color: #FFAB98; /*change link color here in your about section*/
  201.     text-decoration:none;
  202.      -webkit-transition: all 0.6s ease-in-out;
  203.     -moz-transition: all 0.6s ease-in-out;
  204.     -o-transition: all 0.6s ease-in-out;
  205.     transition: all 0.6s ease-in-out;
  206. }
  207.  
  208. a:hover {
  209.     color: #aaaaaa;  /*change link color when you hover here in your about section*/
  210.      -webkit-transition: all 0.6s ease-in-out;
  211.     -moz-transition: all 0.6s ease-in-out;
  212.     -o-transition: all 0.6s ease-in-out;
  213.     transition: all 0.6s ease-in-out;
  214. }
  215.  
  216. #topbar {
  217.     width: 100%;
  218.     height: auto;
  219.     position: relative;
  220.     top: 0;
  221.     left: 0;
  222.     right: 0;
  223.     z-index: 100;
  224.     padding: 30px 0 20px;
  225. }
  226.  
  227. .pic {
  228.     width: 100px;
  229.     height: 100px;
  230.     border-radius: 100%;
  231.     margin-bottom: 35px;
  232.     border: 5px solid #D8C8B8; /* change the color of the image border */
  233. }
  234.  
  235. #maintitle {
  236.     font-size: 25px;
  237.     font-family: 'Dosis', sans-serif;
  238.     text-align: center;
  239.     text-transform: uppercase;
  240.     font-weight: 500;
  241.     color: #000; /* change the color of the main title text */
  242. }
  243.  
  244. #maintitle:before {
  245.     content: "";
  246.     display: inline-block;
  247.     vertical-align: middle;
  248.     height: 5px;
  249.     margin-right: 20px;
  250.     width: 30%;
  251.     background-color: #D8C8B8; /* change the color of the bar left of the title */
  252. }
  253.  
  254. #maintitle:after {
  255.     content: "";
  256.     display: inline-block;
  257.     vertical-align: middle;
  258.     height: 5px;
  259.     margin-left: 20px;
  260.     width: 30%;
  261.     background-color: #D8C8B8; /* change the color of the bar right of the title */
  262. }
  263.  
  264. #sort {
  265.     text-align: center;
  266. }
  267.  
  268. #sort li {
  269.     display:inline-block;
  270.     list-style: none;
  271.     margin: 10px;
  272. }
  273.  
  274. #sort ul {list-style: none; margin-top:20px;}
  275.  
  276. #sort a {
  277.     color:#888; /* change the color of the tag categories */
  278.     display:inline-block;
  279.     border-bottom: 2px solid transparent;
  280. }
  281.  
  282. #sort a:hover {
  283.     color: #000; /* change the color of the tag categories on hover */
  284.     border-bottom: 2px solid #D8C8B8; /* change the color of the bottom border of the tag categories */
  285. }
  286.  
  287. #sort a:hover, #sort a:active {
  288.     border-bottom: 2px solid #D8C8B8; /* change the color of the bottom border of the tag categories */
  289. }
  290.  
  291. #sort li a.selected {border-bottom: 2px solid #D8C8B8;} /* change the color of the bottom border of the tag categories */
  292.  
  293. .description {
  294.     color: #888; /* change the color of the description */
  295.     text-align: center;
  296.     width: 70%;
  297.     margin: 15px auto 0;
  298. }
  299.  
  300. .homelinks {
  301.     margin-top: 15px;
  302.     text-align: center;
  303. }
  304.  
  305. .homelinks a {
  306.     display: inline-block;
  307.     margin: 10px;
  308.     -webkit-transition: 1.2s ease;
  309.     -moz-transition: 1.2s ease;
  310.     -o-transition: 1.2s ease;
  311.     transition: 1.2s ease;
  312. }
  313.  
  314. .sf-home-o, .sf-receive-o, .sf-clock-3-o, .sf-diamond-o, .sf-heart-2-o, .sf-star-o, .sf-code-o {
  315.     padding: 15px;
  316.     font-size: 15px;
  317.     color: #fff; /* change the color of the diamond link text */
  318.     background-color: #D8C8B8; /* change the color of the diamond link background */
  319.     display: inline-block;
  320.     height: 15px;
  321.     -webkit-transition: 1.8s ease-in-out;
  322.     -moz-transition: 1.8s ease-in-out;
  323.     -o-transition: 1.8s ease-in-out;
  324.     transition: 1.8s ease-in-out;
  325.    -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  326.     clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  327. }
  328.  
  329. .sf-home-o:hover, .sf-receive-o:hover, .sf-clock-3-o:hover, .sf-diamond-o:hover, .sf-heart-2-o:hover, .sf-star-o:hover, .sf-code-o:hover {
  330.     background-color: #fff; /* change the color of the diamond link background on hover */
  331.     color: #000; /* change the color of the diamond link text on hover */
  332.     -webkit-transition: 1.8s ease-in-out;
  333.     -moz-transition: 1.8s ease-in-out;
  334.     -o-transition: 1.8s ease-in-out;
  335.     transition: 1.8s ease-in-out;
  336. }
  337.  
  338. .homelinks a:hover {
  339.     -webkit-transition: 1.8s ease-in-out;
  340.     -moz-transition: 1.8s ease-in-out;
  341.     -o-transition: 1.8s ease-in-out;
  342.     transition: 1.8s ease-in-out;
  343.     transform: rotate(360deg);
  344. }
  345.  
  346. .container {
  347.     width: 1080px;
  348.     position: relative;
  349.     margin: 10px auto 50px;
  350. }
  351.  
  352. .tags {
  353.   width: 300px;
  354.   margin: 30px;
  355.   text-align: justify;
  356.   transition-duration: 1s;
  357.   -moz-transition-duration: 1s;
  358.   -webkit-transition-duration: 1s;
  359.   -o-transition-duration: 1s;
  360. }
  361.  
  362. .tag-title {
  363.     padding: 0 10px 0 0;
  364.     background-color: #fff; /* change the color of the tag title background */
  365.     color: #000;  /* change the color of the tag title */
  366.     margin-bottom: -5px;
  367.     border: 1px solid #fafafa;  /* change the color of the tag title border */
  368.     font-weight: 500;
  369.     text-transform: uppercase;
  370. }
  371.  
  372. .tag-title:before{
  373.   content:"\e159";
  374.   font-family:'saturnicons';
  375.   background-color: #D8C8B8;  /* change the color of the tag icon background */
  376.   color: #fff;  /* change the color of the tag icon text */
  377.   padding: 10px 15px;
  378.   display: inline-block;
  379.   margin-right: 10px;
  380. }
  381.  
  382. .tag-content {
  383.   padding: 0;
  384. }
  385.  
  386. .tag-content li {
  387.   list-style-type: none;
  388.   margin-bottom: 5px;
  389.   border: 1px solid #fafafa; /* change the color of the border around tags */
  390. }
  391.  
  392. .tag-content li a {
  393.   color: #888; /* change the color of the tag links */
  394.   display: block;
  395.   background-color: #fff; /* change the color of the tag backgrounds */
  396.   padding: 10px;
  397.   border-left: 0px solid transparent;
  398. }
  399.  
  400. .tag-content li a:hover {
  401.     border-left: 10px solid #D8C8B8; /* change the color of the border when tag is hovered */
  402.     color: #000;
  403. }
  404. </style>
  405.  
  406. <!-----------Tooltips Script----------->
  407. <script src="http://static.tumblr.com/fuu6t9w/kh8ml0pl9/jquery-1.7.1.min.js"></script>
  408. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  409. <script src="http://static.tumblr.com/pbhn8p5/uhVos7fkg/tooltips.js"></script>
  410. <!-----------Tooltips Script----------->
  411.  
  412. <!-----------Isotope Script----------->
  413. <script src="http://static.tumblr.com/fuu6t9w/eubml0pm0/jquery.isotope.min.js"></script>
  414.  
  415. <script>
  416.     $(document).ready(function() {
  417.  
  418.  var $container = $('.container');
  419.  
  420.  $container.isotope({
  421.  itemSelector : '.tags'
  422.  });
  423.  
  424.  
  425.  var $optionSets = $('#sort .option-set'),
  426.  $optionLinks = $optionSets.find('a');
  427.  
  428.  $optionLinks.click(function(){
  429.  var $this = $(this);
  430.  // don't proceed if already selected
  431.  if ( $this.hasClass('selected') ) {
  432.  return false;
  433.  }
  434.  var $optionSet = $this.parents('.option-set');
  435.  $optionSet.find('.selected').removeClass('selected');
  436.  $this.addClass('selected');
  437.  
  438.  // make option object dynamically, i.e. { filter: '.my-filter-class' }
  439.  var options = {},
  440.  key = $optionSet.attr('data-option-key'),
  441.  value = $this.attr('data-option-filter');
  442.  // parse 'false' as false boolean
  443.  value = value === 'false' ? false : value;
  444.  options[ key ] = value;
  445.  if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
  446. // changes in layout modes need extra logic
  447. changeLayoutMode( $this, options )
  448. } else {
  449. // otherwise, apply new options
  450. $container.isotope( options );
  451.  }
  452.  return false;
  453.  });
  454. });
  455. </script>
  456. <!-----------Isotope Script----------->
  457.  
  458. </head>
  459.  
  460. <body>
  461.  
  462. <div id="topbar"> <!-----------topbar----------->  
  463. <center><img class="pic" src="http://static.tumblr.com/uh2chis/cRmoxky7i/bnha.png"></center>
  464. <div id="maintitle">foreword</div> <!-----------page title----------->  
  465.  
  466.   <div id="sort"> <!-----------tag category filters----------->  
  467. <ul id="filters" class="option-set clearfix" data-option-key="filter">
  468.  
  469.     <li><a href="#filter" data-option-filter=".tags">all tags</a></li>
  470.     <li><a href="#filter" data-option-filter=".tag-one">tag category one</a></li>
  471.     <li><a href="#filter" data-option-filter=".tag-two">tag category two</a></li>
  472.     <li><a href="#filter" data-option-filter=".tag-three">tag category three</a></li>
  473.     <li><a href="#filter" data-option-filter=".tag-four">tag category four</a></li>
  474.  
  475. </ul>
  476. </div> <!-----------tag category filters----------->
  477.  
  478. <div class="description"> <!-----------tag page description----------->
  479.  
  480. This is where you can put the description of your tags page. Please make sure to keep it short and to the point :)
  481.  
  482. </div> <!-----------tag page description----------->
  483.  
  484.     <div class="homelinks"> <!-----------navigation links------------>
  485.     <a href="/" title="home"><span class="sf-home-o"></span></a>
  486.     <a href="/ask" title="inbox"><span class="sf-receive-o"></span></a>
  487.     <a href="/archive" title="archive"><span class="sf-clock-3-o"></span></a>
  488.     <a href="/" title="link name here"><span class="sf-diamond-o"></span></a>
  489.     <a href="/" title="linke name here"><span class="sf-heart-2-o"></span></a>
  490.     <a href="/" title="linke name here"><span class="sf-star-o"></span></a>
  491.     <!-------------------DO NOT REMOVE THEME CREDIT!!!------------------->
  492.     <a href="http://sheathemes.tumblr.com" target="_blank" title="theme by sheathemes"><span class="sf-code-o"></span></a>
  493.     <!-------------------DO NOT REMOVE THEME CREDIT!!!------------------->
  494. </div> <!-----------navigation links------------>
  495. </div>  <!-----------topbar----------->  
  496.  
  497.  
  498. <div class="container" class="clearfix"> <!-----------main container----------->
  499. <!-----To add another tag block, just add one below and label accordingly
  500.  
  501.  <div id="tag" class="tags tag-one">
  502.    <div class="tag-title">tag title</div>
  503.    <ul class="tag-content">
  504.      <li><a href="/tagged/tag-name">tag one</a></li>
  505.      <li><a href="/tagged/tag-name">tag two</a></li>
  506.      <li><a href="/tagged/tag-name">tag three</a></li>
  507.      <li><a href="/tagged/tag-name">tag four</a></li>
  508.      <li><a href="/tagged/tag-name">tag five</a></li>
  509.    </ul>
  510.  </div>
  511.  
  512.  ----->
  513.  
  514. <!-----------TAGS START------------>
  515.  
  516.   <div id="tag" class="tags tag-one">
  517.     <div class="tag-title">tag title</div>
  518.     <ul class="tag-content">
  519.       <li><a href="/tagged/tag-name">tag one</a></li>
  520.       <li><a href="/tagged/tag-name">tag two</a></li>
  521.       <li><a href="/tagged/tag-name">tag three</a></li>
  522.       <li><a href="/tagged/tag-name">tag four</a></li>
  523.       <li><a href="/tagged/tag-name">tag five</a></li>
  524.     </ul>
  525.   </div>
  526.  
  527.   <div id="tag" class="tags tag-one">
  528.     <div class="tag-title">tag title</div>
  529.     <ul class="tag-content">
  530.       <li><a href="/tagged/tag-name">tag one</a></li>
  531.       <li><a href="/tagged/tag-name">tag two</a></li>
  532.       <li><a href="/tagged/tag-name">tag three</a></li>
  533.       <li><a href="/tagged/tag-name">tag four</a></li>
  534.       <li><a href="/tagged/tag-name">tag five</a></li>
  535.       <li><a href="/tagged/tag-name">tag six</a></li>
  536.       <li><a href="/tagged/tag-name">tag seven</a></li>
  537.     </ul>
  538.   </div>
  539.  
  540.  
  541.   <div id="tag" class="tags tag-two">
  542.       <div class="tag-title">tag title</div>
  543.       <ul class="tag-content">
  544.         <li><a href="/tagged/tag-name">tag one</a></li>
  545.         <li><a href="/tagged/tag-name">tag two</a></li>
  546.         <li><a href="/tagged/tag-name">tag three</a></li>
  547.       </ul>
  548.   </div>
  549.  
  550.   <div id="tag" class="tags tag-two">
  551.     <div class="tag-title">tag title</div>
  552.     <ul class="tag-content">
  553.       <li><a href="/tagged/tag-name">tag one</a></li>
  554.       <li><a href="/tagged/tag-name">tag two</a></li>
  555.       <li><a href="/tagged/tag-name">tag three</a></li>
  556.       <li><a href="/tagged/tag-name">tag four</a></li>
  557.       <li><a href="/tagged/tag-name">tag five</a></li>
  558.       <li><a href="/tagged/tag-name">tag six</a></li>
  559.       <li><a href="/tagged/tag-name">tag seven</a></li>
  560.       <li><a href="/tagged/tag-name">tag eight</a></li>
  561.       <li><a href="/tagged/tag-name">tag nine</a></li>
  562.       <li><a href="/tagged/tag-name">tag ten</a></li>
  563.     </ul>
  564.   </div>
  565.  
  566.     <div id="tag" class="tags tag-two">
  567.     <div class="tag-title">tag title</div>
  568.     <ul class="tag-content">
  569.       <li><a href="/tagged/tag-name">tag one</a></li>
  570.       <li><a href="/tagged/tag-name">tag two</a></li>
  571.       <li><a href="/tagged/tag-name">tag three</a></li>
  572.       <li><a href="/tagged/tag-name">tag four</a></li>
  573.       <li><a href="/tagged/tag-name">tag five</a></li>
  574.     </ul>
  575.   </div>
  576.  
  577.  
  578.     <div id="tag" class="tags tag-three">
  579.     <div class="tag-title">tag title</div>
  580.     <ul class="tag-content">
  581.       <li><a href="/tagged/tag-name">tag one</a></li>
  582.       <li><a href="/tagged/tag-name">tag two</a></li>
  583.       <li><a href="/tagged/tag-name">tag three</a></li>
  584.     </ul>
  585.   </div>
  586.  
  587.   <div id="tag" class="tags tag-three">
  588.     <div class="tag-title">tag title</div>
  589.     <ul class="tag-content">
  590.       <li><a href="/tagged/tag-name">tag one</a></li>
  591.       <li><a href="/tagged/tag-name">tag two</a></li>
  592.       <li><a href="/tagged/tag-name">tag three</a></li>
  593.       <li><a href="/tagged/tag-name">tag four</a></li>
  594.       <li><a href="/tagged/tag-name">tag five</a></li>
  595.       <li><a href="/tagged/tag-name">tag six</a></li>
  596.       <li><a href="/tagged/tag-name">tag seven</a></li>
  597.       <li><a href="/tagged/tag-name">tag eight</a></li>
  598.     </ul>
  599.   </div>
  600.  
  601.       <div id="tag" class="tags tag-three">
  602.     <div class="tag-title">tag title</div>
  603.     <ul class="tag-content">
  604.       <li><a href="/tagged/tag-name">tag one</a></li>
  605.       <li><a href="/tagged/tag-name">tag two</a></li>
  606.       <li><a href="/tagged/tag-name">tag three</a></li>
  607.       <li><a href="/tagged/tag-name">tag four</a></li>
  608.       <li><a href="/tagged/tag-name">tag five</a></li>
  609.     </ul>
  610.   </div>
  611.  
  612.    
  613.     <div id="tag" class="tags tag-one">
  614.     <div class="tag-title">tag title</div>
  615.     <ul class="tag-content">
  616.       <li><a href="/tagged/tag-name">tag one</a></li>
  617.       <li><a href="/tagged/tag-name">tag two</a></li>
  618.       <li><a href="/tagged/tag-name">tag three</a></li>
  619.       <li><a href="/tagged/tag-name">tag four</a></li>
  620.       <li><a href="/tagged/tag-name">tag five</a></li>
  621.       <li><a href="/tagged/tag-name">tag six</a></li>
  622.       <li><a href="/tagged/tag-name">tag seven</a></li>
  623.     </ul>
  624.   </div>
  625.  
  626.    
  627.     <div id="tag" class="tags tag-one">
  628.     <div class="tag-title">tag title</div>
  629.     <ul class="tag-content">
  630.       <li><a href="/tagged/tag-name">tag one</a></li>
  631.       <li><a href="/tagged/tag-name">tag two</a></li>
  632.       <li><a href="/tagged/tag-name">tag three</a></li>
  633.       <li><a href="/tagged/tag-name">tag four</a></li>
  634.       <li><a href="/tagged/tag-name">tag five</a></li>
  635.       <li><a href="/tagged/tag-name">tag six</a></li>
  636.       <li><a href="/tagged/tag-name">tag seven</a></li>
  637.     </ul>
  638.   </div>
  639.  
  640.     <div id="tag" class="tags tag-four">
  641.     <div class="tag-title">tag title</div>
  642.     <ul class="tag-content">
  643.       <li><a href="/tagged/tag-name">tag one</a></li>
  644.       <li><a href="/tagged/tag-name">tag two</a></li>
  645.       <li><a href="/tagged/tag-name">tag three</a></li>
  646.       <li><a href="/tagged/tag-name">tag four</a></li>
  647.       <li><a href="/tagged/tag-name">tag five</a></li>
  648.       <li><a href="/tagged/tag-name">tag six</a></li>
  649.       <li><a href="/tagged/tag-name">tag seven</a></li>
  650.       <li><a href="/tagged/tag-name">tag eight</a></li>
  651.       <li><a href="/tagged/tag-name">tag nine</a></li>
  652.       <li><a href="/tagged/tag-name">tag ten</a></li>
  653.     </ul>
  654.   </div>
  655.  
  656.     <div id="tag" class="tags tag-one">
  657.     <div class="tag-title">tag title</div>
  658.     <ul class="tag-content">
  659.       <li><a href="/tagged/tag-name">tag one</a></li>
  660.       <li><a href="/tagged/tag-name">tag two</a></li>
  661.       <li><a href="/tagged/tag-name">tag three</a></li>
  662.       <li><a href="/tagged/tag-name">tag four</a></li>
  663.       <li><a href="/tagged/tag-name">tag five</a></li>
  664.       <li><a href="/tagged/tag-name">tag six</a></li>
  665.       <li><a href="/tagged/tag-name">tag seven</a></li>
  666.       <li><a href="/tagged/tag-name">tag eight</a></li>
  667.       <li><a href="/tagged/tag-name">tag nine</a></li>
  668.       <li><a href="/tagged/tag-name">tag ten</a></li>
  669.     </ul>
  670.   </div>
  671.  
  672.   <!-----------TAGS END------------>
  673.  
  674. </div> <!-----------main container----------->  
  675. </body>
  676. </html> <!---------------------------END--------------------------->
RAW Paste Data
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