API tools faq
paste
Advertisement
amaanat

imber (tags page)

amaanat
Feb 28th, 2021
1,913
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.09 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <!--
  5. PAGE FOUR | IMBER
  6. a latin word for rain shower
  7. made with ♡ by @amaanat
  8.  
  9.  
  10. this is for codingcabins new year new theme challenge. the post can be found here: https://codingcabin.net/post/638991469752008704/new-year-new-theme-much-like-in-2019-we-are
  11.  
  12. the hex codes / words used for this challenge are:
  13. - #10aded (loaded)
  14. - #b000b5 (booobs)
  15.  
  16. further help with coding is provided throughout the code so look carefully!
  17. -----
  18.  
  19. - please visit https://www.amaanat.tumblr.com/terms before using my work
  20. - do not steal parts of this code, edit or move credit or claim as your own or use as a base code.
  21.  
  22. credits:
  23. - honeybee icon font by suiomi
  24.  
  25. a full list of credits used in this theme and others can be found on
  26. https://www.amaanat.tumblr.com/credits.
  27.  
  28. much thanks to codingcabin for helping me out in difficult times!
  29.  
  30. ♡ ♡ enjoy! ♡ ♡
  31. -->
  32.  
  33. <title>{Title}</title>
  34. <link rel="shortcut icon" href="{Favicon}">
  35. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  36.  
  37. <!-- NECESSARY ELEMENTS - DO NOT REMOVE -->
  38.  
  39. <!-- FONTS -->
  40. <!-- HONEYBEE ICON FONT BY SUIOMI | DO NOT TOUCH OR REMOVE THIS AT ALL-->
  41. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  42.  
  43. <!-- FONTS USED IN THIS THEME -->
  44. <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  45. <link rel="preconnect" href="https://fonts.gstatic.com">
  46. <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@600&display=swap" rel="stylesheet">
  47.  
  48. <!-- SCRIPTS - DO NOT TOUCH -->
  49. <!-- JQUERY SCRIPT DO NOT TOUCH THIS-->
  50. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  51.  
  52.  
  53. <style type="text/css">
  54.  
  55.  
  56. /* VARIABLES - READ CAREFULLY
  57. these variables are meant to make your customisation of this page easier. Here are what each mean:
  58.  
  59. background - applies to the PAGE and DESCRIPTION background
  60. descriptioncolor - applies to the text colour of the description
  61. gradient1 - applies to the first colour out of two for the gradient used
  62. gradient2 - applies to the second colour out of two for the gradient used
  63. linkscolor - applies to the text upon the links and the title of the tag bars
  64. tagsbgcolor - applies to the background colour of the tags container themselves (the solid colour, NOT the gradient)
  65.  
  66. if you need further help, please contact me!
  67. */
  68.  
  69. :root {
  70. --background: #000;
  71. --descriptioncolor: #ffffff;
  72. --gradient1: #10aded;
  73. --gradient2: #b000b5;
  74. --linkscolor: #ffffff;
  75. --tagsbgcolor: #eee;
  76.  
  77. }
  78.  
  79.  
  80. /* BODY CUSTOMISATION */
  81. body {
  82. font-family: 'Roboto', sans-serif;
  83. margin:0;
  84. background-color:var(--background);
  85. font-size:14px;
  86.  
  87. }
  88.  
  89. /* remove tumbkr controls */
  90. body > iframe:first-child { display: none !important; }
  91.  
  92. img {
  93. max-width:100%;
  94. }
  95.  
  96. a {
  97. transition:.5s ease;
  98. text-decoration:none;
  99. }
  100.  
  101.  
  102. /* CREDIT
  103. you touch this and you feel my wrath */
  104. .credit {
  105. background-color:var(--background);
  106. filter:brightness(100%) saturate(120%);
  107. position: fixed;
  108. right:40px;
  109. bottom: 30px;
  110. display: block;
  111. border-radius:50px;
  112. color:var(--gradient2);
  113. padding:4px;
  114. transition:.4s ease;
  115. text-decoration:none;
  116. border:2px solid /* rgb(219,219,219, 0.5) */;
  117. border-color:var(--gradient2);
  118. }
  119.  
  120. .th-diamond-o {
  121. font-size:18px;
  122. vertical-align:middle;
  123. transition:.4s ease;
  124. }
  125.  
  126. .credit:hover {
  127. background-color:var(--gradient2);
  128. }
  129.  
  130. .credit:hover .th-diamond-o {
  131. color:var(--background);
  132.  
  133. }
  134.  
  135. /* end credit */
  136.  
  137. /* TOOLTIPS */
  138. .tippy-tooltip.custom-theme {
  139. background-color:var(--background);
  140. color: var(--gradient2);
  141. text-transform:uppercase;
  142. font-size:0.8em;
  143. text-align:center;
  144. font-family:inherit;
  145. padding:0.188em;
  146. margin:20px 0px 0px 20px; /* margin size, in order, top, right, bottom, left */
  147. border-radius:4px;
  148. border:1px solid rgb(219,219,219, 0.5);
  149. }
  150.  
  151. .tippy-tooltip.custom-theme .tippy-svg-arrow {
  152. fill: #660066;
  153.  
  154. }
  155.  
  156. /* THE FUN BEGINS HERE */
  157. /* HEADER */
  158.  
  159. .headerwrap {
  160. background: linear-gradient(0.60turn, var(--gradient1), var(--gradient2));
  161. width:400px;
  162. margin:0 auto;
  163. border-radius:5px;
  164. margin-top:150px;
  165. padding:5px;
  166. text-align:center;
  167. }
  168.  
  169. .header {
  170. padding:5px;
  171. background-color:#000;
  172. border-radius:5px;
  173. }
  174.  
  175. .header img {
  176. padding:5px;
  177. background-color:#000;
  178. width:80px;
  179. border-radius:50%;
  180. margin-top:-55px;
  181. }
  182.  
  183. .headerdescription {
  184. padding:5px;
  185. color:var(--descriptioncolor);
  186. margin-bottom:5px;
  187. }
  188.  
  189. .headerdescription a{
  190. transition:.5s ease;
  191. }
  192.  
  193. .headerdescription a:hover {
  194. color:white;
  195. }
  196.  
  197. .headerlinks {
  198. width:400px;
  199. max-width:400px;
  200. margin:auto;
  201. margin-top:20px;
  202. display:flex;
  203. justify-content:space-around;
  204. }
  205.  
  206. .headerlinks a {
  207. padding:5px;
  208. border-radius:5px;
  209. background: linear-gradient(0.60turn, var(--gradient1), var(--gradient2));
  210. opacity:0.8;
  211. color:white;
  212. transition:.5s ease;
  213.  
  214. }
  215.  
  216. .headerlinks a:hover {
  217. background: linear-gradient(0.60turn, var(--gradient1), var(--gradient2));
  218. opacity:1;
  219.  
  220.  
  221. }
  222.  
  223. /* TAGS */
  224.  
  225. .tagsblock {
  226. width:400px;
  227. height:auto;
  228. padding:5px;
  229. margin:0 auto;
  230. margin-top:0px;
  231. text-align:center;
  232. margin-bottom:100px;
  233. }
  234.  
  235. .block {
  236. margin-top:50px;
  237. background-color:var(--tagsbgcolor);
  238. padding:0px;
  239. border-radius:5px;
  240. }
  241.  
  242. .title {
  243. padding:10px;
  244. font-weight:bold;
  245. font-size:18px;
  246. color:var(--linkscolor);
  247. text-transform:uppercase;
  248. background: linear-gradient(0.60turn, var(--gradient1), var(--gradient2));
  249. font-family: 'Oswald', sans-serif;
  250. }
  251.  
  252. .tags {
  253. padding:10px;
  254. display:flex;
  255. justify-content:space-between;
  256. flex-wrap:wrap;
  257. }
  258.  
  259. .tags a {
  260. margin:auto;
  261. padding:5px;
  262. border-radius:5px;
  263. background: linear-gradient(0.60turn, var(--gradient1), var(--gradient2));
  264. color:var(--linkscolor);
  265. transition:.5s ease;
  266. margin-top:10px;
  267. }
  268.  
  269. .tags a:hover {
  270. font-size:15px;
  271.  
  272. }
  273. </style>
  274.  
  275. <body>
  276.  
  277. <!-- HEADER -->
  278.  
  279. <div class="headerwrap">
  280. <div class="header">
  281. <a title="{title}" href="/"><img src="{portraitURL-128}"></a>
  282.  
  283. <div class="headerdescription">
  284.  
  285.  
  286. <!-- the following is your description in the header -->
  287. this is my tags page, take a look around and see what you can find on my tumblr blog!
  288.  
  289.  
  290. </div>
  291. </div>
  292. </div>
  293.  
  294. <!-- here you can add two custom links, please do not remove the credit one, try to keep it to these links so it does not overflow-->
  295.  
  296. <div class="headerlinks">
  297. <a href="/">home</a>
  298. <a href="/ask">inbox</a>
  299. <a href="/archive">archive</a>
  300. <a href="/">link one</a>
  301. <a href="/">link two</a>
  302. <a href="https://amaanat.tumblr.com/">theme</a>
  303. </div>
  304.  
  305.  
  306. <div class="tagsblock"> <!-- <-- do not remove that div line -->
  307.  
  308. <!-- YOUR TAGS BLOCK
  309.  
  310. here is the format for each BLOCK/CATEGORY of tags
  311.  
  312. <div class="block">
  313. <div class="title">
  314. title here
  315. </div>
  316.  
  317. <div class="tags">
  318. <a href="/">tag</a>
  319. <a href="/">tag</a>
  320. <a href="/">tag</a>
  321. <a href="/">tag</a>
  322. <a href="/">tag</a>
  323. <a href="/">tag</a>
  324. <a href="/">tag</a>
  325. </div>
  326. </div>
  327.  
  328. - just copy paste the above to create a new block, or add as many tags as you want by copy pasting the tags!
  329. - for title, just replace that with the name of the category
  330. - for tag, just replace that with your tag name
  331.  
  332. - a quick way of entering tags is as such:
  333.  
  334. /tagged/[your tag] (without brackets)
  335.  
  336. this ensures that if you change your username, you will not have to go into this poge and change each tag individually!
  337.  
  338. tumblr now supports special symbols in your tags such as % or :, but double check to see if it works!
  339.  
  340. -->
  341.  
  342. <div class="block">
  343. <div class="title">
  344. your title here
  345. </div>
  346.  
  347. <div class="tags">
  348. <a href="/">tag</a>
  349. <a href="/">tag</a>
  350. <a href="/">tag</a>
  351. <a href="/">tag</a>
  352. <a href="/">tag</a>
  353. <a href="/">tag</a>
  354. <a href="/">tag</a>
  355. </div>
  356. </div>
  357.  
  358. <div class="block">
  359. <div class="title">
  360. your title here
  361. </div>
  362.  
  363. <div class="tags">
  364. <a href="/">tag</a>
  365. <a href="/">tag</a>
  366. <a href="/">tag</a>
  367. <a href="/">tag</a>
  368. <a href="/">tag</a>
  369. <a href="/">tag</a>
  370. <a href="/">tag</a>
  371. </div>
  372. </div>
  373.  
  374. <div class="block">
  375. <div class="title">
  376. your title here
  377. </div>
  378.  
  379. <div class="tags">
  380. <a href="/">tag</a>
  381. <a href="/">tag</a>
  382. <a href="/">tag</a>
  383. <a href="/">tag</a>
  384. <a href="/">tag</a>
  385. <a href="/">tag</a>
  386. <a href="/">tag</a>
  387. </div>
  388. </div>
  389.  
  390.  
  391.  
  392.  
  393. </div> <!-- <-- do not remove that div line -->
  394.  
  395. <!-- this is the CREDIT do not touch it or i will end you -->
  396. <a href="http://www.amaanat.tumblr.com" title="amaanat themes" class="credit"><span class="th th-diamond-o"></span></a>
  397.  
  398. <!-- SCRIPTS -->
  399.  
  400. <!-- TOOLTIPS -->
  401. <script src="https://unpkg.com/popper.js@1"></script>
  402. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  403. <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/svg-arrow.css" />
  404.  
  405. <script>
  406. tippy('a[title]', {
  407. theme: 'custom',
  408. arrow: tippy.false,
  409. zIndex: 9999999999,
  410. maxWidth: 300,
  411. delay: [200, 0],
  412. followCursor: true,
  413.  
  414. content(reference) {
  415. const title = reference.getAttribute('title');
  416. reference.removeAttribute('title');
  417. return title;
  418. },
  419. });
  420. </script>
  421.  
  422. </body>
  423.  
  424. </html>
  425.  
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!