API tools faq
paste
str-wrs

Tags: Spring

str-wrs
Jul 27th, 2014
4,992
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.70 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. TAG PAGE: SPRING
  4. by acuite
  5.  
  6. - don't steal this pls
  7. - enjoy, ilu (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧
  8. - @acuite for more themes
  9.  
  10. -->
  11.  
  12. <!DOCTYPE html>
  13. <html>
  14. <head>
  15.  
  16. <title>Navigation</title>
  17. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  18. <script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
  19. <link rel="shortcut icon" href="{Favicon}" />
  20.  
  21. <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
  22. <style type="text/css">
  23.  
  24. ::-webkit-scrollbar-thumb {background:#eee;}
  25. ::-webkit-scrollbar {width:2px;height:2px;background:#fff;}
  26.  
  27. /* General */
  28.  
  29. body {
  30. margin:0px;
  31. font-family: 'Montserrat', sans-serif;
  32. color:#555;
  33. font-size:9px;
  34. background:#f8f8f8;
  35. text-transform:uppercase;
  36. }
  37.  
  38. a {
  39. color:#999;
  40. text-decoration:none;
  41. transition: 0.5s ease;
  42. -o-transition: 0.5s ease;
  43. -moz-transition: 0.5s ease;
  44. -webkit-transition: 0.5s ease;
  45. }
  46.  
  47. /* Containers */
  48.  
  49. #c{position:fixed;right:30px;bottom:30px;}
  50. #center {width:520px;margin:200px auto 0px;}
  51.  
  52. /* Header */
  53.  
  54. #header b{margin:0px 5px;}
  55. #header a{margin:0px 5px;}
  56. #header {
  57. position:relative;
  58. padding:10px;
  59. margin:0px 0px 10px;
  60. text-align:right;
  61. border-bottom:1px solid #eee;
  62. }
  63.  
  64. /* Boxes */
  65.  
  66. #name {
  67. margin-top:5px;
  68. float:left;
  69. background:#FFF;
  70. border:25px solid #FFF;
  71. width:120px;
  72. height:10px;
  73. line-height:10px;
  74. overflow:hidden;
  75. transition: 0.5s ease;
  76. -o-transition: 0.5s ease;
  77. -moz-transition: 0.5s ease;
  78. -webkit-transition: 0.5s ease;
  79. }
  80.  
  81. #name b{text-align:center;font-weight:400;display:block;}
  82. #name:hover {height:120px;overflow-y:auto;}
  83. #name .links {margin-top:10px;line-height:150%;}
  84. #name .links a:hover{color:#AAA;padding-left:8px;}
  85. #name .links a{display:block;text-transform:capitalize;}
  86.  
  87. /* Columns */
  88.  
  89. #one {width:170px;position:absolute;}
  90. #two {width:170px;position:absolute;margin-left:175px;}
  91. #three {width:170px;position:absolute;margin-left:350px;}
  92.  
  93. </style>
  94. </head>
  95. <body>
  96. <div id="center">
  97.  
  98. <!-- START HEADER (do not edit) -->
  99. <div id="header">
  100. <b>navigation</b>
  101. <a href="/">return</a>
  102. <a href="http://www.tumblr.com/dashboard">dash</a>
  103. <a href="http://str-wrs.tumblr.com">credit</a>
  104. </div>
  105. <!-- END HEADER -->
  106.  
  107.  
  108.  
  109.  
  110.  
  111.  
  112.  
  113.  
  114. <!-- START COLUMN ONE -->
  115. <div id="one">
  116.  
  117. <!-- Example -->
  118. <div id="name">
  119. <b>Category Name</b> <br>
  120. <div class="links">
  121. <a href="/tagged/tag-link">Tag Name</a>
  122. <a href="/tagged/tag-link">Tag Name</a>
  123. <a href="/tagged/tag-link">Tag Name</a>
  124. <a href="/tagged/tag-link">Tag Name</a>
  125. <a href="/tagged/tag-link">Tag Name</a>
  126. <a href="/tagged/tag-link">Tag Name</a>
  127. </div>
  128. </div>
  129.  
  130.  
  131. <!-- box: teen wolf -->
  132. <div id="name"><b>teen wolf</b> <br>
  133. <div class="links">
  134. <a href="/tagged/stiles-stilinski">Stiles Stilinski</a>
  135. <a href="/tagged/derek-hale">Derek Hale</a>
  136. <a href="/tagged/lydia-martin">Lydia Martin</a>
  137. <a href="/tagged/scott-mccall">Scott McCall</a>
  138. <a href="/tagged/allison-argent">Allison Argent</a>
  139. <a href="/tagged/isaac-lahey">Isaac Lahey</a>
  140. <a href="/tagged/jackson-whittemore">Jackson Whittemore</a>
  141. <br>
  142. <a href="/tagged/team-human">Team Human</a>
  143. <a href="/tagged/sterek">Sterek</a>
  144. <a href="/tagged/skittles">Skittles</a>
  145. </div>
  146. </div>
  147.  
  148.  
  149.  
  150. <!-- box: celebs -->
  151. <div id="name"><b>celebrities</b> <br>
  152. <div class="links">
  153. <a href="/tagged/andrew-garfield">Andrew Garfield</a>
  154. <a href="/tagged/chloe-moretz">Chloe Moretz</a>
  155. <a href="/tagged/chris-evans">Chris Evans</a>
  156. <a href="/tagged/chris-pine">Chris Pine</a>
  157. <a href="/tagged/emilia-clarke">Emilia Clarke</a>
  158. <a href="/tagged/emma-stone">Emma Stone</a>
  159. <a href="/tagged/evan-peters">Evan Peters</a>
  160. <a href="/tagged/kristen-stewart">Kristen Stewart</a>
  161. <a href="/tagged/logan-lerman">Logan Lerman</a>
  162. <a href="/tagged/lorde">Lorde</a>
  163. <a href="/tagged/lupita-nyong%27o">Lupita Nyong'o</a>
  164. <a href="/tagged/margot-robbie">Margot Robbie</a>
  165. <a href="/tagged/robert-downey-jr">Robert Downey Jr</a>
  166. <a href="/tagged/scarlett-johansson">Scarlett Johansson</a>
  167. <a href="/tagged/sebastian-stan">Sebastian Stan</a>
  168. </div>
  169. </div>
  170.  
  171. </div><!-- END COLUMN ONE -->
  172.  
  173.  
  174.  
  175.  
  176.  
  177.  
  178.  
  179.  
  180.  
  181.  
  182.  
  183. <!-- START COLUMN TWO -->
  184. <div id="two">
  185.  
  186. <!-- box: misc -->
  187. <div id="name"><b>misc</b><br>
  188. <div class="links">
  189. <a href="/tagged/animals">Animals</a>
  190. <a href="/tagged/fashion">Fashion</a>
  191. <a href="/tagged/food">Food</a>
  192. <a href="/tagged/interior">Interiors</a>
  193. <a href="/tagged/scenery">Scenery</a>
  194. <a href="/tagged/words">Words</a>
  195. </div>
  196. </div>
  197.  
  198.  
  199.  
  200. <!-- box: spn -->
  201. <div id="name"><b>supernatural</b><br>
  202. <div class="links">
  203. <a href="/tagged/dean-winchester">Dean Winchester</a>
  204. <a href="/tagged/castiel">Castiel</a>
  205. <a href="/tagged/sam-winchester">Sam Winchester</a>
  206. <br>
  207. <a href="/tagged/wincest">Wincest</a>
  208. <a href="/tagged/team-free-will">Team Free Will</a>
  209. <a href="/tagged/destiel">Destiel</a>
  210. </div>
  211. </div>
  212.  
  213.  
  214.  
  215. <!-- box: films -->
  216. <div id="name"><b>films</b> <br>
  217. <div class="links">
  218. <a href="/tagged/tfios">The Fault in Our Stars</a>
  219. <a href="/tagged/harry-potter">Harry Potter</a>
  220. <a href="/tagged/her">Her</a>
  221. <a href="/tagged/the-hobbit">The Hobbit</a>
  222. <a href="/tagged/the-hunger-games">The Hunger Games</a>
  223. <a href="/tagged/lord-of-the-rings">Lord of the Rings</a>
  224. <a href="/tagged/marvel">Marvel</a>
  225. <a href="/tagged/now-you-see-me">Now You See Me</a>
  226. <a href="/tagged/the-social-network">The Social Network</a>
  227. <a href="/tagged/star-trek">Star Trek</a>
  228. </div>
  229. </div>
  230.  
  231. </div><!-- END COLUMN TWO -->
  232.  
  233.  
  234.  
  235.  
  236.  
  237.  
  238.  
  239.  
  240.  
  241.  
  242.  
  243. <!-- START COLUMN THREE -->
  244. <div id="three">
  245.  
  246. <!-- box: 1d -->
  247. <div id="name"><b>one direction</b> <br>
  248. <div class="links">
  249. <a href="/tagged/zayn-malik">Zayn Malik</a>
  250. <a href="/tagged/liam-payne">Liam Payne</a>
  251. <a href="/tagged/louis-tomlinson">Louis Tomlinson</a>
  252. <a href="/tagged/niall-horan">Niall Horan</a>
  253. <a href="/tagged/harry-styles">Harry Styles</a>
  254. <br>
  255. <a href="/tagged/lilo">Lilo</a>
  256. <a href="/tagged/zouis">Zouis</a>
  257. </div>
  258. </div>
  259.  
  260.  
  261.  
  262. <!-- box: marvel -->
  263. <div id="name"><b>marvel</b> <br>
  264. <div class="links">
  265. <a href="/tagged/marvel">All Films</a>
  266. <a href="/tagged/the-avengers">The Avengers</a>
  267. <br>
  268. <a href="/tagged/clint-barton">Clint Barton</a>
  269. <a href="/tagged/bruce-banner">Bruce Banner</a>
  270. <a href="/tagged/bucky-barnes">Bucky Barnes</a>
  271. <a href="/tagged/loki">Loki</a>
  272. <a href="/tagged/natasha-romanoff">Natasha Romanoff</a>
  273. <a href="/tagged/steve-rogers">Steve Rogers</a>
  274. <a href="/tagged/thor">Thor</a>
  275. <a href="/tagged/tony-stark">Tony Stark</a>
  276. </div>
  277. </div>
  278.  
  279.  
  280.  
  281. <!-- box: tv -->
  282. <div id="name"><b>television</b> <br>
  283. <div class="links">
  284. <a href="/tagged/breaking-bad">Breaking Bad</a>
  285. <a href="/tagged/community">Community</a>
  286. <a href="/tagged/game-of-thrones">Game of Thrones</a>
  287. <a href="/tagged/friends">Friends</a>
  288. <a href="/tagged/gossip-girl">Gossip Girl</a>
  289. <a href="/tagged/new-girl">New Girl</a>
  290. <a href="/tagged/parks-and-rec">Parks and Recreation</a>
  291. <a href="/tagged/shameless">Shameless</a>
  292. <a href="/tagged/supernatural">Supernatural</a>
  293. </div>
  294. </div>
  295.  
  296. </div>
  297. <!-- END COLUMN THREE -->
  298.  
  299.  
  300.  
  301.  
  302.  
  303.  
  304. </div>
  305. <div id="c"><a href="http://acuite.tumblr.com">acuite</a></div>
  306. </body>
  307. </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!