API tools faq
paste
Advertisement
MystiqueAquanian

tags!

MystiqueAquanian
Jun 17th, 2018
137
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.68 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. TAG PAGE: ECHO
  4. by acuite
  5.  
  6. - don't steal this pls
  7. - enjoy, ilu (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧
  8.  
  9. - @acuite for more themes
  10.  
  11. -->
  12.  
  13. <!DOCTYPE html>
  14. <html>
  15. <head>
  16.  
  17. <title>Navigation</title>
  18. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  19. <link rel="shortcut icon" href="{Favicon}" />
  20. <link href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,300italic,400italic,600italic,700italic' rel='stylesheet' type='text/css'><style type="text/css">
  21.  
  22. /* Scroll */
  23.  
  24. ::-webkit-scrollbar {width:11px;height:11px;background:#eee;}
  25. ::-webkit-scrollbar-thumb {background:#ccc;}
  26. ::-webkit-scrollbar,::-webkit-scrollbar-thumb {border:5px solid #f8f8f8;}
  27.  
  28. /* Controls */
  29.  
  30. #tumblr_controls,.tmblr-iframe.tmblr-iframe--desktop-logged-in-controls.iframe-controls--desktop{-webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%); filter: invert(100%);opacity:0.5;}
  31.  
  32. /* General */
  33.  
  34. body {
  35. margin:0;
  36. font-family:'Open Sans',Helvetica,Arial,sans-serif;
  37. color:#555;
  38. font-size:9px;
  39. background:#f8f8f8;
  40. }
  41.  
  42. .box nav a {
  43. font-smoothing: antialiased;
  44. -webkit-font-smoothing: antialiased;
  45. -moz-osx-font-smoothing: grayscale;
  46. }
  47.  
  48. a {
  49. color:#999;
  50. text-decoration:none;
  51. transition: 0.5s ease;
  52. -o-transition: 0.5s ease;
  53. -moz-transition: 0.5s ease;
  54. -webkit-transition: 0.5s ease;
  55. }
  56.  
  57. /* Containers */
  58.  
  59. .c{position:fixed;right:30px;bottom:30px;}
  60. #center {position:relative;margin:40px auto;width:741px;}
  61. .box {width:175px;font-size:0;}
  62.  
  63. /* Box Styling */
  64.  
  65. h2 {
  66. font-size:10px;
  67. line-height:100%;
  68. padding:0 0 7px;
  69. margin:0 0 5px;
  70. font-weight:400;
  71. letter-spacing:1px;
  72. text-transform:uppercase;
  73. border-bottom:1px solid #eee;
  74. }
  75.  
  76. .box img{width:34px;height:34px;float:right;border-radius:50%;}
  77. .box nav {margin-bottom:-5px;}
  78. .box nav u{text-decoration:none;border-bottom:1px solid #bbb;}
  79. .box nav a{display:block;margin:9px 0;letter-spacing:0.1px;}
  80. .box nav a:hover{opacity:0.5;padding-left:10px;}
  81. .box nav a,.box nav b {font-size:9px;line-height:100%;}
  82. .box nav b {
  83. color:#333;
  84. font-weight:400;
  85. display:inline-block;
  86. padding-bottom:2px;
  87. border-bottom:1px solid #777;
  88. }
  89.  
  90. /* Header */
  91.  
  92. header {font-size:0;}
  93. h1 {margin:0;font-size:11px;letter-spacing:1.5px;font-weight:600;}
  94. header nav{color:#999;text-align:right;}
  95. header nav a:hover {color:#333;}
  96. header nav a,header nav b {font-size:8px;}
  97. header nav b {opacity:0.5;margin:0 9px;font-weight:400;}
  98. header nav,h1 {display:inline-block;vertical-align:middle;width:50%;}
  99.  
  100. /* Common */
  101.  
  102. header nav a,h1,.c {letter-spacing:1px;text-transform:uppercase;}
  103.  
  104. .box,header {
  105. margin:15px;
  106. padding:20px;
  107. background:#fff;
  108. border-radius:5px;
  109. border:1px solid #f2f2f2;
  110. }
  111.  
  112. </style>
  113. <script src="http://static.tumblr.com/twte3d7/H8Glm663z/masonry.js"></script>
  114. <script type="text/javascript">
  115. $(window).load(function () {
  116. $('#content').masonry({
  117. itemSelector : ".box",
  118. },
  119. function() { $('#content').masonry({ appendedContent: $(this) }); }
  120. );
  121. });
  122. </script>
  123. </head>
  124. <body>
  125.  
  126. <div id="center">
  127.  
  128. <!-- Header Start. No edit necessary. -->
  129. <header>
  130. <h1>Tags</h1>
  131. <nav>
  132. <a href="/">hogwarts</a>
  133. <b>/</b>
  134. <a href="/ask">owlery</a>
  135. <b>/</b>
  136. <a href="http://acuite.tumblr.com">credit</a>
  137. </nav>
  138. </header>
  139. <!-- Header End -->
  140.  
  141.  
  142. <div id="content">
  143. <!-- Start Content -->
  144.  
  145.  
  146.  
  147.  
  148.  
  149.  
  150.  
  151.  
  152.  
  153.  
  154.  
  155.  
  156. <!-- Example -->
  157. <div class="box">
  158. <img src="http://placehold.it/34x34"><!-- Image URL -->
  159. <h2>Kpop</h2>
  160. <nav>
  161. <a href="/tagged/bts">BTS</a>
  162. <a href="/tagged/seventeen">SEVENTEEN</a>
  163. <a href="/tagged/nct">NCT</a>
  164. <a href="/tagged/blackpink">BlackPink</a>
  165.  
  166. </nav>
  167. </div>
  168.  
  169.  
  170.  
  171.  
  172.  
  173. <!-- Example -->
  174. <div class="box">
  175. <img src="http://placehold.it/34x34"><!-- Image URL -->
  176. <h2>Post Types</h2>
  177. <nav>
  178. <a href="/tagged/aesthetics">Aesthetics</a>
  179. <a href="/tagged/gif sets">Gif Sets</a>
  180. <a href="/tagged/gifs">Gifs</a>
  181. <a href="/tagged/graphics">Graphics</a>
  182. <a href="/tagged/moodboards">Moodboards</a>
  183. <a href="/tagged/posters">Posters</a>
  184. <a href="/tagged/quotes">Quotes</a>
  185. <a href="/tagged/text aesthetics">Text Aesthetics</a>
  186. <a href="/tagged/text">Text Posts</a>
  187. <a href="/tagged/typography">Typography</a>
  188.  
  189.  
  190. </nav>
  191. </div>
  192.  
  193.  
  194.  
  195.  
  196.  
  197. <!-- Example -->
  198. <div class="box">
  199. <img src="http://placehold.it/34x34"><!-- Image URL -->
  200. <h2>Lightning Era</h2>
  201. <nav>
  202. <a href="/tagged/harry potter">General Harry Potter Tag 1</a>
  203. <a href="/tagged/hp">General Harry Potter Tag 2</a>
  204. <a href="/tagged/c: harry potter">Harry Potter</a>
  205. <a href="/tagged/ron weasley">Ron Weasley</a>
  206. <a href="/tagged/hermione granger">Hermione Granger</a>
  207. <a href="/tagged/ginny weasley">Ginny Weasley</a>
  208. <a href="/tagged/neville longbottom">Neville Longbottom</a>
  209. <a href="/tagged/luna lovegood">Luna Lovegood</a>
  210. <a href="/tagged/fred weasley">Fred Weasley</a>
  211. <a href="/tagged/george weasley">George Weasley</a>
  212. <a href="/tagged/draco malfoy">Draco Malfoy</a>
  213. <a href="/tagged/pansy parkinson">Pansy Parkinson</a>
  214. <a href="/tagged/blaise zabini">Blaise Zabini</a>
  215. <a href="/tagged/vincent crabb">Vincent Crabbe</a>
  216. <a href="/tagged/gregory goyle">Gregory Goyle</a>
  217. <a href="/tagged/cho chang">Cho Chang</a>
  218. <a href="/tagged/hannah abbott">Hannah Abbott</a>
  219. <a href="/tagged/molly weasley">Molly Weasley</a>
  220. <a href="/tagged/arthur weasley">Arthur Weasley</a>
  221. <a href="/tagged/charlie weasley">Charlie Weasley</a>
  222. <a href="/tagged/bill weasley">Bill Weasley</a>
  223. <a href="/tagged/percy weasley">Percy Weasley</a>
  224. <a href="/tagged/minerva mcgonagall">Minerva McGonagall</a>
  225. <a href="/tagged/nymphadora tonks">Nymphadora Tonks</a>
  226. <a href="/tagged/dumbledore">Albus Dumbledore</a>
  227. <a href="/tagged/hagrid">Rubeus Hagrid</a>
  228. <a href="/tagged/Cedric">Cedric Diggory</a>
  229. </nav>
  230. </div>
  231.  
  232.  
  233.  
  234.  
  235.  
  236.  
  237. <div class="box">
  238. <img src="http://i.imgur.com/Pu6xtnH.png"><!-- Image URL -->
  239. <h2>Marauders Era</h2>
  240. <nav>
  241. <a href="/tagged/james potter">James Potter</a>
  242. <a href="/tagged/sirius black">Sirius Black</a>
  243. <a href="/tagged/regulus black">Regulus Black</a>
  244. <a href="/tagged/remus lupin">Remus Lupin</a>
  245. <a href="/tagged/peter pettigrew">Peter Pettigrew</a>
  246. <a href="/tagged/lily evans">Lily Evans</a>
  247. <a href="/tagged/marlene mckinnon">Marlene McKinnon</a>
  248. <a href="/tagged/alice longbottom">Alice Longbottom</a>
  249. <a href="/tagged/frank longbottom">Frank Longbottom</a>
  250. </nav>
  251. </div>
  252.  
  253.  
  254.  
  255.  
  256.  
  257.  
  258. <div class="box">
  259. <img src="http://imgur.com/yQw5RMv.png"><!-- Image URL -->
  260. <h2>Next Generation</h2>
  261. <nav>
  262. <a href="/tagged/james sirius potter">James Sirius Potter</a>
  263. <a href="/tagged/albus severus potter">Albus Severus Potter</a>
  264. <a href="/tagged/lily luna potter">Lily Luna Potter</a>
  265. <a href="/tagged/hugo weasley">Hugo Weasley</a>
  266. <a href="/tagged/rose weasley">Rose Weasley</a>
  267. <a href="/tagged/victoire weasley">Victoire Weasley</a>
  268. <a href="/tagged/dominique weasley">Dominique Weasley</a>
  269. <a href="/tagged/louis weasley">Louis Weasley</a>
  270. <a href="/tagged/lucy weasley">Lucy Weasley</a>
  271. <a href="/tagged/molly weasley">Molly Weasley</a>
  272. <a href="/tagged/roxanne weasley">Roxanne Weasley</a>
  273. <a href="/tagged/fred weasley ii">Fred Weasley II</a>
  274. <a href="/tagged/teddy lupin">Teddy Lupin</a>
  275. <a href="/tagged/scorpius malfoy">Scorpius Malfoy</a>
  276. <a href="/tagged/lorcan scamander">Lorcan Scamander</a>
  277. <a href="/tagged/lysander scamander">Lysander Scamander</a>
  278.  
  279.  
  280. </nav>
  281. </div>
  282.  
  283.  
  284.  
  285.  
  286.  
  287.  
  288.  
  289. <div class="box">
  290. <img src="http://imgur.com/udVmyfZ.png"><!-- Image URL -->
  291. <h2>Groups</h2>
  292. <nav>
  293. <a href="/tagged/the golden trio">The Golden Trio</a>
  294. <a href="/tagged/the silver trio">The Silver Trio</a>
  295. <a href="/tagged/the copper trio">The Copper Trio</a>
  296. <a href="/tagged/the marauders">The Marauders</a>
  297. <a href="/tagged/the weasleys">The Weasleys</a>
  298. <a href="/tagged/the evans sisters">The Evans Sisters</a>
  299. <a href="/tagged/the blacks">The Blacks</a>
  300. <a href="/tagged/the black sisters">The Black Sisters</a>
  301. <a href="/tagged/the malfoys">The Malfoys</a>
  302. </nav>
  303. </div>
  304.  
  305.  
  306.  
  307.  
  308.  
  309.  
  310.  
  311.  
  312. <div class="box">
  313. <img src="http://imgur.com/udVmyfZ.png"><!-- Image URL -->
  314. <h2>FBAWTFT</h2>
  315. <nav>
  316. <a href="/tagged/fantastic beasts and where to find them">FBAWTFT</a>
  317. <a href="/tagged/porpentina goldstein">Porpentina Goldstein</a>
  318. <a href="/tagged/queenie goldstein">Queenie Goldstein</a>
  319. <a href="/tagged/newt scamander">Newt Scamander</a>
  320. <a href="/tagged/jacob kowalski">Jacob Kowalski</a>
  321. <a href="/tagged/credence barebone">Credence Barebone</a>
  322.  
  323. </nav>
  324. </div>
  325.  
  326.  
  327.  
  328.  
  329.  
  330.  
  331. <div class="box">
  332. <img src="http://imgur.com/udVmyfZ.png"><!-- Image URL -->
  333. <h2>Wizarding Schools</h2>
  334. <nav>
  335. <a href="/tagged/hogwarts">Hogwarts</a>
  336. <a href="/tagged/beauxbatons">Beauxbatons</a>
  337. <a href="/tagged/durmstrang">Durmstrang</a>
  338. <a href="/tagged/ilvermorny">Ilvermorny</a>
  339. <a href="/tagged/hogwarts houses">Hogwarts Houses</a>
  340. <a href="/tagged/hogwarts houses">Hogwarts Founders</a>
  341. <a href="/tagged/gryffindor">Gryffindor</a>
  342. <a href="/tagged/ravenclaw">Ravenclaw</a>
  343. <a href="/tagged/slytherin">Slytherin</a>
  344. <a href="/tagged/hufflepuff">Hufflepuff</a>
  345. <a href="/tagged/ilvermorny houses">Ilvermorny Houses</a>
  346.  
  347. </nav>
  348. </div>
  349.  
  350.  
  351.  
  352.  
  353.  
  354. <div class="box">
  355. <img src="http://imgur.com/udVmyfZ.png"><!-- Image URL -->
  356. <h2>Personal</h2>
  357. <nav>
  358. <a href="/tagged/me">Things I Relate To</a>
  359. <a href="/tagged/about me">Things About Me</a>
  360. <a href="/tagged/things i'm in">Things I'm Mentioned In</a>
  361. <a href="/tagged/things i won">Things I Won</a>
  362. <a href="/tagged/my edits">My Edits</a>
  363. <a href="/tagged/my words">My Poetry</a>
  364. <a href="/tagged/owls">Answered Questions</a>
  365. <a href="/tagged/updates of my life">Updates of My Life</a>
  366. <a href="/tagged/updates of the world">Updates of The World</a>
  367. <a href="/tagged/rowena's hall of records">Rowena's Hall of Records</a>
  368. <a href="/tagged/scattered thoughts">Scattered Thoughts</a>
  369. <a href="/tagged/for future reference">For Future Reference</a>
  370. <a href="/tagged/life stuff">Life Stuff</a>
  371. <a href="/tagged/politics">Politics</a>
  372. </nav>
  373. </div>
  374.  
  375.  
  376.  
  377. <!-- End. Do not edit below this line. -->
  378. </div>
  379. </div>
  380.  
  381. <a class="c" href="http://acuite.tumblr.com">acuite</a>
  382.  
  383. </body>
  384. </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!