API tools faq
paste
clerihew

13. google tags

clerihew
Feb 1st, 2019
439
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 11.48 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3. <!--
  4. © Clerihew Themes 2019
  5.  
  6. Do not use without reading terms of use.
  7.  
  8. Contact me at clerihew.tumblr.com if you have problems with any
  9. un-heavily edited code or if you have questions on how to use this theme.
  10. -->
  11.  
  12. <!-- put page title here -->
  13. <title>Tags</title>
  14.  
  15. <link rel="shortcut icon" href="{Favicon}">
  16.  
  17. <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
  18.  
  19. <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
  20.  
  21. <style>
  22.  
  23. /* page background color, font-family */
  24. body {
  25. background-color: #fff;
  26. font-family: "Montserrat";
  27. }
  28.  
  29. /* topbar background color */
  30. .topbar {
  31. height: 40px;
  32. width: 100%;
  33. position: fixed;
  34. left: 0;
  35. top: 0;
  36. border-bottom: 1px solid #ebebeb;
  37. box-shadow: 1px 1px 7px rgba(56, 56, 56, 0.4);
  38. background-color: #fff;
  39. }
  40.  
  41. /* title color */
  42. .topbar h1 {
  43. font-size: 25px;
  44. margin-top: 5px;
  45. margin-left: 20px;
  46. color: #34a853;
  47. -webkit-transition: color 0.5s;
  48. -moz-transition: color 0.5s;
  49. -o-transition: color 0.5s;
  50. transition: color 0.5s;
  51. }
  52.  
  53. /* title color hover */
  54. .topbar h1:hover {
  55. color: #99d3a9;
  56. }
  57.  
  58. .topbar a {
  59. text-decoration: none;
  60. }
  61.  
  62. .topbar .searchbar {
  63. margin-left: 20px;
  64. position: fixed;
  65. top: 8px;
  66. }
  67.  
  68. /* border of search bar */
  69. .topbar input[type=text] {
  70. padding: 6px;
  71. border-radius: 15px;
  72. border: 0.5px solid #dfe1e5;
  73. }
  74.  
  75. .topbar input:focus {
  76. outline: none;
  77. box-shadow: 1px 1px 2px rgba(56, 56, 56, 0.2);
  78. }
  79.  
  80. /* color of search icon */
  81. .topbar .searchbar button {
  82. color: #4285f4;
  83. font-size: 15px;
  84. border: none;
  85. background-color: #fff;
  86. }
  87.  
  88. .topbar .searchbar button:hover {
  89. cursor: pointer;
  90. }
  91.  
  92. .topbar button:focus {
  93. outline: none;
  94. }
  95.  
  96. .topbar h1, .searchbar {
  97. display: inline-block;
  98. }
  99.  
  100. .main {
  101. margin: 100px;
  102. }
  103.  
  104. /* header background image, font color */
  105. .main .header {
  106. width: auto;
  107. height: 200px;
  108. /* must add image from outside source (eg. Imgur). find the direct link and paste it into the parentheses */
  109. background-image: url(https://i.imgur.com/mKYYPIQ.jpg);
  110. background-size: cover;
  111. background-repeat: no-repeat;
  112. background-position: 50% 90%;
  113. color: #fff;
  114. border-radius: 10px;
  115. margin-bottom: 40px;
  116. }
  117.  
  118. .main .header h1 {
  119. margin-left: 10px;
  120. margin-bottom: 0;
  121. padding-top: 5px;
  122. }
  123.  
  124. .main .header p {
  125. width: 250px;
  126. height: auto;
  127. margin-left: 10px;
  128. margin-top: 10px;
  129. font-size: 12px;
  130. }
  131.  
  132. /* link icon color */
  133. .main .header a {
  134. float: right;
  135. position: relative;
  136. bottom: -20px;
  137. right: 10px;
  138. padding: 10px;
  139. color: #fff;
  140. text-decoration: none;
  141. -webkit-transition: color 1s;
  142. -moz-transition: color 1s;
  143. -o-transition: color 1s;
  144. transition: color 1s;
  145. }
  146.  
  147. /* link icon color hover */
  148. .main .header a:hover {
  149. color: #202123;
  150. }
  151.  
  152. .main .all-tags {
  153. column-count: 2;
  154. column-gap: 50px;
  155. }
  156.  
  157. /* best tags border color */
  158. .main .best-tags {
  159. width: auto;
  160. height: auto;
  161. border: 1px solid #34a853;
  162. border-radius: 10px;
  163. padding: 15px;
  164. overflow: auto;
  165. break-inside: avoid;
  166. }
  167.  
  168. /* best tags title color */
  169. .main .best-tags h2 {
  170. margin-bottom: 0;
  171. margin-top: 0;
  172. color: #34a853;
  173. }
  174.  
  175. /* tag color, background color, border color */
  176. .main .best-tags a {
  177. display: inline-block;
  178. font-size: 15px;
  179. padding: 5px;
  180. margin: 5px 5px 5px 0px;
  181. background-color: white;
  182. color: #4285f4;
  183. border: 1px solid #dfe1e5;
  184. border-radius: 30px;
  185. text-decoration: none;
  186. -webkit-transition: background-color 0.5s;
  187. -moz-transition: background-color 0.5s;
  188. -o-transition: background-color 0.5s;
  189. transition: background-color 0.5s;
  190. }
  191.  
  192. /* tag background hover color (keep same as border color) */
  193. .main .best-tags a:hover {
  194. background-color: #dfe1e5;
  195. }
  196.  
  197. .main .group {
  198. width: auto;
  199. height: auto;
  200. margin-top: 20px;
  201. margin-bottom: 20px;
  202. border: 1px solid #dfe1e5;
  203. border-radius: 10px;
  204. padding: 15px;
  205. overflow: auto;
  206. break-inside: avoid;
  207. }
  208.  
  209. /* title colors */
  210. .main .group h2 {
  211. color: #34a853;
  212. margin-bottom: 0px;
  213. margin-top: 0px;
  214. }
  215.  
  216. /* tag color, background color, border color */
  217. .main .group a {
  218. display: inline-block;
  219. font-size: 15px;
  220. padding: 5px;
  221. margin: 5px 5px 5px 0px;
  222. background-color: white;
  223. color: #4285f4;
  224. border: 1px solid #dfe1e5;
  225. border-radius: 30px;
  226. text-decoration: none;
  227. -webkit-transition: background-color 0.5s;
  228. -moz-transition: background-color 0.5s;
  229. -o-transition: background-color 0.5s;
  230. transition: background-color 0.5s;
  231. }
  232.  
  233. /* tag background hover color (keep same as border color) */
  234. .main .group a:hover {
  235. background-color: #dfe1e5;
  236. }
  237.  
  238. /* DO NOT TOUCH THIS */
  239. .credit a {
  240. display: inline-block;
  241. text-decoration: none;
  242. margin: 20px auto 0px;
  243. font-size: 12px;
  244. color: #4285f4;
  245. -webkit-transition: color 0.5s;
  246. -moz-transition: color 0.5s;
  247. -o-transition: color 0.5s;
  248. transition: color 0.5s;
  249. }
  250.  
  251. .credit a:hover {
  252. color: #ccc;
  253. text-decoration: underline;
  254. }
  255.  
  256. /* thanks @shythemes */
  257. ::-webkit-scrollbar {
  258. width: 17px;
  259. height: 17px;
  260. }
  261.  
  262. /* scrollbar background */
  263. ::-webkit-scrollbar {
  264. background-color: #fff;
  265. }
  266.  
  267. ::-webkit-scrollbar-track {
  268. border: 8px solid #fff; /* background color */
  269. background-color: #dfe1e5; /* light border color */
  270. }
  271.  
  272. ::-webkit-scrollbar-thumb {
  273. border: 8px solid #fff; /* background color */
  274. background-color: #212121; /* dark border color */
  275. min-height:24px;
  276. min-width:24px;
  277. }
  278.  
  279. /* tumblr contols credit to @cyantists */
  280. iframe.tmblr-iframe {
  281. z-index:99999999999999!important;
  282. top:0!important;
  283. right:0!important;
  284. opacity:0.6;
  285. /* delete invert(1) from here */
  286. filter:invert(1) contrast(150%);
  287. -webkit-filter:invert(1) contrast(150%);
  288. -o-filter:invert(1) contrast(150%);
  289. -moz-filter:invert(1) contrast(150%);
  290. -ms-filter:invert(1) contrast(150%);
  291. /* to here if your blog has a dark background */
  292. transform:scale(0.65);
  293. transform-origin:100% 0;
  294. -webkit-transform:scale(0.65);
  295. -webkit-transform-origin:100% 0;
  296. -o-transform:scale(0.65);
  297. -o-transform-origin:100% 0;
  298. -moz-transform:scale(0.65);
  299. -moz-transform-origin:100% 0;
  300. -ms-transform:scale(0.65);
  301. -ms-transform-origin:100% 0;}
  302.  
  303. iframe.tmblr-iframe:hover {
  304. opacity:0.8!important;}
  305.  
  306. </style>
  307.  
  308. </head>
  309. <body>
  310.  
  311. <div class="topbar">
  312. <!-- put blog title here -->
  313. <a href="/"><h1>Tags</h1></a>
  314. <div class="searchbar">
  315. <form action="/search" method="get">
  316. <input type="text" name="q" placeholder="search tags...">
  317. <!-- replace <span> class with something from honeybee if you want a different search icon -->
  318. <button type="submit" value="Search"><span class="th th-loupe-o"></span></button>
  319. </form>
  320. </div>
  321. </div>
  322.  
  323. <div class="main">
  324. <div class="header">
  325. <!-- page title -->
  326. <h1>Tags</h1>
  327. <!-- page decription. delete this if you don't want a description -->
  328. <p>This is your tags page. If you have stuff you like, and you tag it, and you want people to see it, this is where they can come. It's based on Google Classroom.</p>
  329. <!-- links to submit/ask -->
  330. <a href="/ask"><span class="th th-bell"></span></a>
  331. <a href="/submit"><span class="th th-dial"></span></a>
  332. </div>
  333.  
  334. <div class="all-tags">
  335. <!-- this is the first group of tags. the <h2> is the title. the <a> are all the tags -->
  336. <div class="best-tags">
  337. <h2>best tags</h2>
  338. <!-- this is a tag. put the tag behind the "/" and it will take the user to that page. a hyphen must be used for all tags with spaces. for example, putting "/tagged/star-wars" will redirect a user to a page with all of your posts that are tagged star wars. copy and paste to add a new section -->
  339. <a href="/">creations</a>
  340. <a href="/">gifsets</a>
  341. <a href="/">fanfic</a>
  342. <a href="/">answered</a>
  343. <a href="/">tutorials</a>
  344. </div>
  345.  
  346. <div class="group">
  347. <h2>movies</h2>
  348. <a href="/">aquaman</a>
  349. <a href="/">the hateful eight</a>
  350. <a href="/">lady bird</a>
  351. <a href="/">fantastic four (2005)</a>
  352. <a href="/">the omen</a>
  353. <a href="/">pan's labyrinth</a>
  354. <a href="/">bruno and boots: go jump in the pool</a>
  355. <a href="/">the godfather</a>
  356. <a href="/">star wars</a>
  357. <a href="/">indiana jones</a>
  358. </div>
  359.  
  360. <div class="group">
  361. <h2>books</h2>
  362. <a href="/">ps. i still love you</a>
  363. <a href="/">the curses</a>
  364. <a href="/">clouds</a>
  365. <a href="/">the merciless</a>
  366. <a href="/">six of crows</a>
  367. <a href="/">the price guide to the occult</a>
  368. <a href="/">not your sidekick</a>
  369. <a href="/">heist society</a>
  370. <a href="/">archenemies</a>
  371. <a href="/">such a good girl</a>
  372. <a href="/">harry potter</a>
  373. <a href="/">percy jackson</a>
  374. <a href="/">the selection</a>
  375. </div>
  376.  
  377. <div class="group">
  378. <h2>places</h2>
  379. <a href="/">los angeles</a>
  380. <a href="/">new york</a>
  381. <a href="/">toronto</a>
  382. <a href="/">mexico city</a>
  383. <a href="/">madrid</a>
  384. <a href="/">athens</a>
  385. <a href="/">phuket</a>
  386. <a href="/">sydney</a>
  387. <a href="/">london</a>
  388. <a href="/">paris</a>
  389. <a href="/">rome</a>
  390. <a href="/">tokyo</a>
  391. <a href="/">hong kong</a>
  392. <a href="/">shanghai</a>
  393. <a href="/">singapore</a>
  394. <a href="/">amsterdam</a>
  395. <a href="/">chicago</a>
  396. <a href="/">edinburgh</a>
  397. <a href="/">perth</a>
  398. <a href="/">honolulu</a>
  399. <a href="/">manila</a>
  400. <a href="/">moscow</a>
  401. </div>
  402.  
  403. <div class="group">
  404. <h2>comics</h2>
  405. <a href="/">x-23</a>
  406. <a href="/">fantastic four</a>
  407. <a href="/">superior spider-man arc</a>
  408. <a href="/">miles morales</a>
  409. <a href="/">ms. marvel</a>
  410. <a href="/">lockjaw</a>
  411. <a href="/">snotgirl</a>
  412. <a href="/">heavy vinyl</a>
  413. <a href="/">return of superman</a>
  414. <a href="/">spider-man/black cat: the evil that men do</a>
  415. <a href="/">nova</a>
  416. <a href="/">young avengers</a>
  417. </div>
  418.  
  419. </div>
  420.  
  421. <!-- DO NOT TOUCH THIS -->
  422. <div class="credit">
  423. <a href="https://clerihew.tumblr.com">theme by clerihew</a>
  424. </div>
  425. </div>
  426.  
  427. </body>
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!