API tools faq
paste
thewisepotato

Pixel Tags/Navigation Page - 10 Links

thewisepotato
Sep 7th, 2013
355
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.18 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  
  5. <!--THIS VERSION OF THE PIXEL TAGS/NAVIGATION THEME HAS 10 TITLES-->
  6.  
  7. <title> {Title}{block:PostSummary}: {PostSummary}{/block:PostSummary}</title>
  8. {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
  9. <link rel="shortcut icon" href="{Favicon}" />
  10.  
  11. <link href='http://fonts.googleapis.com/css?family=VT323|Gudea|Inconsolata' rel='stylesheet' type='text/css'>
  12.  
  13. <style type="text/css">
  14.  
  15. *{-webkit-transition:all 0.5s ease-out; -moz-transition:all 0.5s ease-out; -ms-transition:all 0.5s ease-out; -o-transition:all 0.5s ease-out; transition:all 0.5s ease-out;}
  16.  
  17. body {
  18. background-color:black; /*BACKGROUND COLOR (default is black)*/
  19. background-image:url(http://static.tumblr.com/puls2hm/FDdmslerr/96735-royalty-free-rf-clipart-illustration-of-a-seamless-background-of-blue-and-black-pixel-tiles.jpg); /*BACKGROUND IMAGE URL GOES INSIDE THE PARENTHESES*/
  20. font-family:Inconsolata; /*CHANGE TO Gudea OR VT323 OR ANY TUMBLR BASIC FONT*/
  21. }
  22.  
  23. #everything {
  24. margin:auto;
  25. margin-top:100px;
  26. width:750px;
  27. padding:20px;
  28. background-color:white; /*CONTENT BACKGROUND COLOR (default is white)*/
  29. -webkit-box-shadow: 3px 4px 5px rgba(50, 50, 50, 0.5);
  30. -moz-box-shadow: 3px 4px 5px rgba(50, 50, 50, 0.5);
  31. box-shadow: 3px 4px 5px rgba(50, 50, 50, 0.5);
  32. }
  33.  
  34. #titles {
  35. width:576px;
  36. overflow:scroll;
  37. margin:auto;
  38. }
  39.  
  40. #titles div {
  41. margin:5px;
  42. padding:10px 25px;
  43. width:130px;
  44. height:20px;
  45. float:left;
  46. text-align:center;
  47. background-color:#0abfff; /*TITLE BACKGROUND COLOR (default is #0abfff)*/
  48. border:solid 1px black; /*BORDER STYLE*/
  49. color:black; /*TITLE TEXT COLOR (default is black)*/
  50. -webkit-box-shadow: 3px 4px 5px rgba(50, 50, 50, 0.25);
  51. -moz-box-shadow: 3px 4px 5px rgba(50, 50, 50, 0.25);
  52. box-shadow: 3px 4px 5px rgba(50, 50, 50, 0.25);
  53. }
  54.  
  55. #titles div:hover {
  56. background-color:black; /*TITLE BACKGROUND COLOR ON HOVER (default is black)*/
  57. color:#0abfff; /*TITLE TEXT COLOR ON HOVER (default is #0abfff)*/
  58. }
  59.  
  60. #tags {
  61. text-align:center;
  62. width:725px;
  63. margin:auto;
  64. }
  65.  
  66. #tags #titles a {
  67. opacity:1;
  68. padding:14px 20px;
  69. display:table-cell;
  70. vertical-align:middle;
  71. }
  72.  
  73. #titles .top {
  74. margin-top:30px;
  75. }
  76.  
  77. span {
  78. text-transform:uppercase;
  79. font-size:1.2em;
  80. margin:auto;
  81. }
  82.  
  83. a {
  84. opacity:0;
  85. text-decoration:none;
  86. margin:30px;
  87. color:black; /*LINK COLOR (default is black)*/
  88. }
  89.  
  90. a:hover {
  91. text-decoration:underline;
  92. }
  93.  
  94. {CustomCSS}
  95. </style>
  96.  
  97. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  98.  
  99. <script type="text/javascript">
  100. $(document).ready(function(){
  101. $('#1').click(function(){
  102. if ($('.1').css('opacity') == '0') {
  103. $('.1').css('opacity','1');
  104. } else {
  105. $('.1').css('opacity','0');
  106. };
  107. $('.2,.3,.4,.5,.6,.7,.8,.9,.10').css('opacity','0');
  108. });
  109. $('#2').click(function(){
  110. if ($('.2').css('opacity') == '0') {
  111. $('.2').css('opacity','1');
  112. } else {
  113. $('.2').css('opacity','0');
  114. };
  115. $('.1,.3,.4,.5,.6,.7,.8,.9,.10').css('opacity','0');
  116. });
  117. $('#3').click(function(){
  118. if ($('.3').css('opacity') == '0') {
  119. $('.3').css('opacity','1');
  120. } else {
  121. $('.3').css('opacity','0');
  122. };
  123. $('.2,.1,.4,.5,.6,.7,.8,.9,.10').css('opacity','0');
  124. });
  125. $('#4').click(function(){
  126. if ($('.4').css('opacity') == '0') {
  127. $('.4').css('opacity','1');
  128. } else {
  129. $('.4').css('opacity','0');
  130. };
  131. $('.2,.3,.1,.5,.6,.7,.8,.9,.10').css('opacity','0');
  132. });
  133. $('#5').click(function(){
  134. if ($('.5').css('opacity') == '0') {
  135. $('.5').css('opacity','1');
  136. } else {
  137. $('.5').css('opacity','0');
  138. };
  139. $('.2,.3,.4,.1,.6,.7,.8,.9,.10').css('opacity','0');
  140. });
  141. $('#6').click(function(){
  142. if ($('.6').css('opacity') == '0') {
  143. $('.6').css('opacity','1');
  144. } else {
  145. $('.6').css('opacity','0');
  146. };
  147. $('.2,.3,.4,.5,.1,.7,.8,.9,.10').css('opacity','0');
  148. });
  149. $('#7').click(function(){
  150. if ($('.7').css('opacity') == '0') {
  151. $('.7').css('opacity','1');
  152. } else {
  153. $('.7').css('opacity','0');
  154. };
  155. $('.2,.3,.4,.5,.6,.1,.8,.9,.10').css('opacity','0');
  156. });
  157. $('#8').click(function(){
  158. if ($('.8').css('opacity') == '0') {
  159. $('.8').css('opacity','1');
  160. } else {
  161. $('.8').css('opacity','0');
  162. };
  163. $('.2,.3,.4,.5,.6,.7,.1,.9,.10').css('opacity','0');
  164. });
  165. $('#9').click(function(){
  166. if ($('.9').css('opacity') == '0') {
  167. $('.9').css('opacity','1');
  168. } else {
  169. $('.9').css('opacity','0');
  170. };
  171. $('.2,.3,.4,.5,.6,.7,.8,.1,.10').css('opacity','0');
  172. });
  173. $('#10').click(function(){
  174. if ($('.10').css('opacity') == '0') {
  175. $('.10').css('opacity','1');
  176. } else {
  177. $('.10').css('opacity','0');
  178. };
  179. $('.2,.3,.4,.5,.6,.7,.8,.9,.1').css('opacity','0');
  180. });
  181. });
  182.  
  183. </script>
  184.  
  185. </head>
  186. <body>
  187.  
  188. <div id="everything">
  189.  
  190. <div id="tags">
  191.  
  192. <!--FEEL FREE TO ADD OR REMOVE TAGS, AS LONG AS THEY STILL HAVE THE SAME CLASS AS THE OTHERS IN THEIR SECTION-->
  193.  
  194. <a class="6" href="/tagged/tag">tag 1</a>
  195. <a class="6" href="/tagged/tag">tag 2</a>
  196. <a class="6" href="/tagged/tag">tag 3</a>
  197. <a class="6" href="/tagged/tag">tag 4</a>
  198. <a class="6" href="/tagged/tag">tag 5</a>
  199. <a class="6" href="/tagged/tag">tag 6</a>
  200. <br/>
  201. <a class="7" href="/tagged/tag">tag 1</a>
  202. <a class="7" href="/tagged/tag">tag 2</a>
  203. <a class="7" href="/tagged/tag">tag 3</a>
  204. <a class="7" href="/tagged/tag">tag 4</a>
  205. <a class="7" href="/tagged/tag">tag 5</a>
  206. <a class="7" href="/tagged/tag">tag 6</a>
  207. <br/>
  208. <a class="8" href="/tagged/tag">tag 1</a>
  209. <a class="8" href="/tagged/tag">tag 2</a>
  210. <a class="8" href="/tagged/tag">tag 3</a>
  211. <a class="8" href="/tagged/tag">tag 4</a>
  212. <a class="8" href="/tagged/tag">tag 5</a>
  213. <a class="8" href="/tagged/tag">tag 6</a>
  214. <br/>
  215. <a class="9" href="/tagged/tag">tag 1</a>
  216. <a class="9" href="/tagged/tag">tag 2</a>
  217. <a class="9" href="/tagged/tag">tag 3</a>
  218. <a class="9" href="/tagged/tag">tag 4</a>
  219. <a class="9" href="/tagged/tag">tag 5</a>
  220. <a class="9" href="/tagged/tag">tag 6</a>
  221. <br/>
  222. <a class="10" href="/tagged/tag">tag 1</a>
  223. <a class="10" href="/tagged/tag">tag 2</a>
  224. <a class="10" href="/tagged/tag">tag 3</a>
  225. <a class="10" href="/tagged/tag">tag 4</a>
  226. <a class="10" href="/tagged/tag">tag 5</a>
  227. <a class="10" href="/tagged/tag">tag 6</a>
  228.  
  229. <div id="titles">
  230. <div id="1" class="top">title one</div>
  231. <div id="2" class="top">title two</div>
  232. <div id="3" class="top">title three</div>
  233. <div id="4" class="bottom">title four</div>
  234. <div id="5" class="bottom">title five</div>
  235.  
  236. <div id="6" class="bottom">title six</div>
  237. <div id="7" class="bottom">title seven</div>
  238. <div id="8" class="bottom">title eight</div>
  239. <div id="9" class="bottom">title nine</div>
  240. <div id="10" class="bottom">title ten</div>
  241.  
  242. <a href="/"><span>title goes here</span></a><a href="/ask">ask</a><a href="/archive">archive</a>
  243. </div><!--titles-->
  244. <br />
  245.  
  246. <a class="1" href="/tagged/tag">tag 1</a>
  247. <a class="1" href="/tagged/tag">tag 2</a>
  248. <a class="1" href="/tagged/tag">tag 3</a>
  249. <a class="1" href="/tagged/tag">tag 4</a>
  250. <a class="1" href="/tagged/tag">tag 5</a>
  251. <a class="1" href="/tagged/tag">tag 6</a>
  252. <br />
  253. <a class="2" href="/tagged/tag">tag 1</a>
  254. <a class="2" href="/tagged/tag">tag 2</a>
  255. <a class="2" href="/tagged/tag">tag 3</a>
  256. <a class="2" href="/tagged/tag">tag 4</a>
  257. <a class="2" href="/tagged/tag">tag 5</a>
  258. <a class="2" href="/tagged/tag">tag 6</a>
  259. <br />
  260. <a class="3" href="/tagged/tag">tag 1</a>
  261. <a class="3" href="/tagged/tag">tag 2</a>
  262. <a class="3" href="/tagged/tag">tag 3</a>
  263. <a class="3" href="/tagged/tag">tag 4</a>
  264. <a class="3" href="/tagged/tag">tag 5</a>
  265. <a class="3" href="/tagged/tag">tag 6</a>
  266. <br />
  267. <a class="4" href="/tagged/tag">tag 1</a>
  268. <a class="4" href="/tagged/tag">tag 2</a>
  269. <a class="4" href="/tagged/tag">tag 3</a>
  270. <a class="4" href="/tagged/tag">tag 4</a>
  271. <a class="4" href="/tagged/tag">tag 5</a>
  272. <a class="4" href="/tagged/tag">tag 6</a>
  273. <br />
  274. <a class="5" href="/tagged/tag">tag 1</a>
  275. <a class="5" href="/tagged/tag">tag 2</a>
  276. <a class="5" href="/tagged/tag">tag 3</a>
  277. <a class="5" href="/tagged/tag">tag 4</a>
  278. <a class="5" href="/tagged/tag">tag 5</a>
  279. <a class="5" href="/tagged/tag">tag 6</a>
  280.  
  281. </div><!--tags-->
  282.  
  283. </div> <!--everything-->
  284.  
  285. <!------DO NOT REMOVE THE CREDIT. DOING SO WOULD MAKE YOU A THIEF.------->
  286. <a href="http://syntaxthemes.tumblr.com">
  287. <img style="position:fixed; bottom:0; right:0; display:block; opacity:0.7; margin:0; z-index:999999999999!important;" onmouseover="this.style.opacity=0.9" onmouseout="this.style.opacity=0.7" src="http://static.tumblr.com/puls2hm/QOHn1brjx/st.png"/></a>
  288. <!----------------------------------THANK-------------------------------->
  289.  
  290. </body>
  291. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!