API tools faq
paste
Advertisement
amaanat

carol - tags page

amaanat
Mar 7th, 2019
1,499
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.35 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3. PAGE TWO - CAROL
  4. (yes i named it after carol danvers)
  5. A SIMPLE TAGS PAGE THAT SHOWS
  6. TAGS WHEN HOVERING ON CIRCLES
  7.  
  8. MADE FOR YOU WITH ♡ BY AMAANAT THEMES
  9.  
  10. (@amaanat on tumblr)
  11.  
  12.  
  13. please visit https://www.amaanat.tumblr.com/terms to read the terms and conditions before using my page. If you do not agree to the terms of use, you may not use my work.
  14.  
  15. If you have questions about this code or find things difficult, do not hesitate to contact me!
  16.  
  17. please do not steal my code, remove or move the credit or claim this as your own.
  18.  
  19. credits:
  20. - honeybee icon font by suiomi
  21. - custom tumblr controls by cyantists
  22. - google fonts
  23.  
  24. a full list of credits used in this theme and others can be found on https://www.amaanat.tumblr.com/credits
  25.  
  26. much thanks to codingcabin for helping me out in difficult times and a very special thank you to faiz, aka @fukuo, for helping me throughout the difficulties i encountered
  27.  
  28. -->
  29.  
  30.  
  31.  
  32. <!DOCTYPE html>
  33. <head>
  34. <link href="https://fonts.googleapis.com/css?family=ABeeZee" rel="stylesheet">
  35.  
  36. <!-- JQUERY SCRIPT DO NOT TOUCH THIS-->
  37. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  38.  
  39. <!-- HONEYBEE ICON FONT BY SUIOMI | DO NOT TOUCH OR REMOVE THIS AT ALL-->
  40. <link href="//dl.dropbox.com/s/vpi3f9s7nhpe7v7/honeybee.css" rel="stylesheet">
  41.  
  42. <!-- css hover effect https://github.com/IanLunn/Hover -->
  43. <link href="css/hover.css" rel="stylesheet" media="all">
  44.  
  45. <!-- color inspo from https://paletteworld.tumblr.com/post/183210837395/100-db7cb7-c8b1db-dfe7f1-b0c0da-668dbd -->
  46.  
  47. </head>
  48.  
  49.  
  50.  
  51. <style type="text/css">
  52.  
  53. body {
  54. font-family: 'ABeeZee', sans-serif;
  55. background-color:white; /* change your background color here */
  56. margin:0;
  57. }
  58.  
  59. /* body scrollbar */
  60.  
  61. ::-webkit-scrollbar {
  62. width: 6px;
  63. z-index:2;
  64. height:6px;
  65. }
  66.  
  67. /* Track */
  68. ::-webkit-scrollbar-track {
  69. background:transparent;
  70. }
  71.  
  72. /* Handle */
  73. ::-webkit-scrollbar-thumb {
  74. background:#668dbd; /* change the thumb color of your scrollbar here */
  75. transition:.5s ease;
  76. width:3px;
  77. }
  78. ::-webkit-scrollbar-corner {
  79. background-color:transparent;
  80. }
  81.  
  82. iframe.tmblr-iframe {
  83. z-index:99999999999999!important;
  84. top:0!important;
  85. right:0!important;
  86. opacity:0.4;
  87. /* delete invert(1) from here */
  88. filter:invert(1) contrast(150%);
  89. -webkit-filter:invert(1) contrast(150%);
  90. -o-filter:invert(1) contrast(150%);
  91. -moz-filter:invert(1) contrast(150%);
  92. -ms-filter:invert(1) contrast(150%);
  93. /* to here if your blog has a dark background */
  94. transform:scale(0.65);
  95. transform-origin:100% 0;
  96. -webkit-transform:scale(0.65);
  97. -webkit-transform-origin:100% 0;
  98. -o-transform:scale(0.65);
  99. -o-transform-origin:100% 0;
  100. -moz-transform:scale(0.65);
  101. -moz-transform-origin:100% 0;
  102. -ms-transform:scale(0.65);
  103. -ms-transform-origin:100% 0;}
  104.  
  105. iframe.tmblr-iframe:hover {
  106. opacity:0.6!important;}
  107.  
  108. /* header */
  109.  
  110. .header {
  111. margin:0 auto;
  112. width:570px;
  113. margin-top:75px;
  114. text-align:center;
  115. }
  116.  
  117. .header img {
  118. width:35px;
  119. height:35spx;
  120. vertical-align:middle;
  121. display:inline-block;
  122. }
  123.  
  124. .title {
  125. background-color:#eee;
  126. display:inline-block;
  127. padding:10px;
  128. font-size:13px;
  129. max-width:500px;
  130. }
  131.  
  132. .links {
  133. margin-top:10px;
  134. padding:10px;
  135. }
  136.  
  137. .links a {
  138. padding-left:10px;
  139. padding-right:10px;
  140. text-decoration:none;
  141. color:black; /* change your links color here */
  142. text-transform:uppercase;
  143. }
  144.  
  145. /* links hover effect dont touch */
  146. /* Wobble Horizontal */
  147. @-webkit-keyframes hvr-wobble-horizontal {
  148. 16.65% {
  149. -webkit-transform: translateX(8px);
  150. transform: translateX(8px);
  151. }
  152. 33.3% {
  153. -webkit-transform: translateX(-6px);
  154. transform: translateX(-6px);
  155. }
  156. 49.95% {
  157. -webkit-transform: translateX(4px);
  158. transform: translateX(4px);
  159. }
  160. 66.6% {
  161. -webkit-transform: translateX(-2px);
  162. transform: translateX(-2px);
  163. }
  164. 83.25% {
  165. -webkit-transform: translateX(1px);
  166. transform: translateX(1px);
  167. }
  168. 100% {
  169. -webkit-transform: translateX(0);
  170. transform: translateX(0);
  171. }
  172. }
  173. @keyframes hvr-wobble-horizontal {
  174. 16.65% {
  175. -webkit-transform: translateX(8px);
  176. transform: translateX(8px);
  177. }
  178. 33.3% {
  179. -webkit-transform: translateX(-6px);
  180. transform: translateX(-6px);
  181. }
  182. 49.95% {
  183. -webkit-transform: translateX(4px);
  184. transform: translateX(4px);
  185. }
  186. 66.6% {
  187. -webkit-transform: translateX(-2px);
  188. transform: translateX(-2px);
  189. }
  190. 83.25% {
  191. -webkit-transform: translateX(1px);
  192. transform: translateX(1px);
  193. }
  194. 100% {
  195. -webkit-transform: translateX(0);
  196. transform: translateX(0);
  197. }
  198. }
  199. .hvr-wobble-horizontal {
  200. display: inline-block;
  201. vertical-align: middle;
  202. -webkit-transform: perspective(1px) translateZ(0);
  203. transform: perspective(1px) translateZ(0);
  204. box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  205. }
  206. .hvr-wobble-horizontal:hover, .hvr-wobble-horizontal:focus, .hvr-wobble-horizontal:active {
  207. -webkit-animation-name: hvr-wobble-horizontal;
  208. animation-name: hvr-wobble-horizontal;
  209. -webkit-animation-duration: 1.2s;
  210. animation-duration: 1.2s;
  211. -webkit-animation-timing-function: ease-in-out;
  212. animation-timing-function: ease-in-out;
  213. -webkit-animation-iteration-count: 1;
  214. animation-iteration-count: 1;
  215. }
  216.  
  217. /* main content */
  218.  
  219. .main-content {
  220. margin:0 auto;
  221. width:800px;
  222. margin-top:75px;
  223. text-align:center;
  224. display:flex;
  225. flex-wrap:wrap;
  226. justify-content:center;
  227. margin-bottom:100px;
  228. }
  229.  
  230. /* the circles */
  231. .circle {
  232. width:200px;
  233. height:200px;
  234. border-radius:100px;
  235. background-color: #c8b1db; /* change your circle background color here */
  236. transition:all .5s linear;
  237. margin-right:10px;
  238. margin-bottom:50px;
  239. position:relative;
  240.  
  241. }
  242.  
  243. .circle:hover {
  244. height:250px;
  245. width:250px;
  246. border-radius:0px;
  247. }
  248.  
  249. /* the titles of the circles */
  250. .titles {
  251. width:100%;
  252. height:auto;
  253. text-indent:-10px;
  254. position:absolute;
  255. margin-top:75px;
  256. font-weight:bold;
  257. color:white; /* change your title color here */
  258. font-size:20px;
  259. padding:5px;
  260. transition:.7s;
  261. line-height:20px;
  262.  
  263. }
  264.  
  265. .circle:hover .titles {
  266. margin-top:-35px;
  267. color:black;
  268. }
  269.  
  270. .circle:hover .tags {
  271. opacity:1;
  272. }
  273.  
  274.  
  275. /* customisation of tags */
  276.  
  277. .tags {
  278. width:100%;
  279. font-size:13px;
  280. margin-top:10px;
  281. opacity:0;
  282. transition:.8s ease;
  283. overflow:auto;
  284. max-height:240px;
  285. z-index:-1;
  286.  
  287. }
  288.  
  289. /* scrollbar of tags */
  290.  
  291. .tags::-webkit-scrollbar {
  292. width: 6px;
  293. z-index:2;
  294. }
  295.  
  296. /* Track */
  297. .tags::-webkit-scrollbar-track {
  298. background:transparent;
  299. }
  300.  
  301. /* Handle */
  302. .tags::-webkit-scrollbar-thumb {
  303. background:white; /* change the thumb color of your scrollbar here */
  304. transition:.5s ease;
  305. width:3px;
  306. }
  307. .tags::-webkit-scrollbar-corner {
  308. background-color:transparent;
  309. }
  310.  
  311. .tags a {
  312. display:block;
  313. margin-bottom:10px;
  314. text-decoration:none;
  315. z-index:2;
  316. color:white; /* change your tags color here */
  317. transition:.5s ease;
  318. width:auto;
  319. }
  320.  
  321. .tags a:hover {
  322. color:#668dbd; /* change your tags hover color here */
  323. }
  324.  
  325. ul, li {
  326. list-style-type:none;
  327. text-align:center;
  328. }
  329.  
  330. ul {
  331. margin:0 auto;
  332. padding:0;
  333. }
  334.  
  335.  
  336.  
  337.  
  338. /* you touch this and you feel my wrath */
  339. .credit {
  340. background-color:white;
  341. line-height:16px;
  342. padding-top:5px;
  343. padding-bottom:5px;
  344. padding-left:5px;
  345. position: fixed;
  346. right:10px;
  347. bottom: 10px;
  348. display: block;
  349. overflow: hidden;
  350. color: #000;
  351. font-size: 13px;
  352. text-align: center;
  353. text-decoration: none;
  354. letter-spacing:normal;
  355. font-family: 'Montserrat', sans-serif;
  356. }
  357.  
  358. .credit:after {
  359. display: inline-block;
  360. width: 0;
  361. content: 'amaanat';
  362. letter-spacing:normal;
  363. transition: width .9s ease;
  364. }
  365. .credit:hover:after {
  366. width: 4em;
  367. padding-right:5px;
  368. }
  369.  
  370.  
  371. .th-diamond-o {
  372. font-size:16px;
  373.  
  374. }
  375.  
  376. .credit:hover {
  377. color:black;
  378. }
  379.  
  380.  
  381.  
  382. </style>
  383.  
  384. <body>
  385.  
  386. <div class="header">
  387. <a href="/"><img src="{portraitURL-64}"></a>
  388. <div class="title">{title}</div>
  389.  
  390. <div class="links">
  391. <a class="hvr-wobble-horizontal" href="/">home</a>
  392. <a class="hvr-wobble-horizontal" href="/ask">ask</a>
  393. <a class="hvr-wobble-horizontal" href="/">link</a> <!-- custom link one -->
  394. <a class="hvr-wobble-horizontal" href="/">link</a> <!-- custom link two -->
  395. <a class="hvr-wobble-horizontal" href="/">link</a> <!-- custom link three -->
  396. </div>
  397. </div>
  398.  
  399. <!-- main content. Follow the instructions on how to change the links carefully -->
  400.  
  401. <div class="main-content">
  402.  
  403. <!-- ok so i have already included 9 circles for you. Now, to edit the do the following:
  404.  
  405. - CHANGING TITLE OF YOUR CIRCLE
  406. look at where it says :
  407. <div class="titles">title</div>
  408.  
  409. and change the word 'title' to whatever you want
  410.  
  411. CHANGING / ADDING TAGS
  412. you can add as many tags as you want btw the circle will add a scrollbar automatically if there are many tags!
  413.  
  414. to add another tags category, copy and paste this where you want:
  415.  
  416. <div class="circle">
  417. <div class="titles">title</div>
  418. <div class="tags">
  419. <ul>
  420. <li><a href="/">tag</a></li>
  421. <li><a href="/">tag</a></li>
  422. <li><a href="/">tag</a></li>
  423. </ul>
  424. </div>
  425. </div>
  426.  
  427. WHEN ADDING NEW TAGS DO NOT FORGET THE <li></li> OTHERWISE THEME WILL LOOK WEIRD
  428. -->
  429.  
  430. <div class="circle">
  431. <div class="titles">title</div>
  432. <div class="tags">
  433. <ul>
  434. <li><a href="/">tag</a></li>
  435. <li><a href="/">tag</a></li>
  436. <li><a href="/">tag</a></li>
  437. <li><a href="/">tag</a></li>
  438. <li><a href="/">tag</a></li>
  439. <li><a href="/">tag</a></li>
  440. <li><a href="/">tag</a></li>
  441. <li><a href="/">tag</a></li>
  442. <li><a href="/">tag</a></li>
  443. <li><a href="/">tag</a></li>
  444. <li><a href="/">tag</a></li>
  445. </ul>
  446. </div>
  447. </div>
  448.  
  449. <div class="circle">
  450. <div class="titles">title</div>
  451. <div class="tags">
  452. <ul>
  453. <li><a href="/">tag</a></li>
  454. <li><a href="/">tag</a></li>
  455. <li><a href="/">tag</a></li>
  456. <li><a href="/">tag</a></li>
  457. <li><a href="/">tag</a></li>
  458. <li><a href="/">tag</a></li>
  459. <li><a href="/">tag</a></li>
  460. <li><a href="/">tag</a></li>
  461. <li><a href="/">tag</a></li>
  462. <li><a href="/">tag</a></li>
  463. <li><a href="/">tag</a></li>
  464. </ul>
  465. </div>
  466. </div>
  467.  
  468. <div class="circle">
  469. <div class="titles">title</div>
  470. <div class="tags">
  471. <ul>
  472. <li><a href="/">tag</a></li>
  473. <li><a href="/">tag</a></li>
  474. <li><a href="/">tag</a></li>
  475. <li><a href="/">tag</a></li>
  476. <li><a href="/">tag</a></li>
  477. <li><a href="/">tag</a></li>
  478. <li><a href="/">tag</a></li>
  479. <li><a href="/">tag</a></li>
  480. <li><a href="/">tag</a></li>
  481. <li><a href="/">tag</a></li>
  482. <li><a href="/">tag</a></li>
  483. </ul>
  484. </div>
  485. </div>
  486.  
  487. <div class="circle">
  488. <div class="titles">title</div>
  489. <div class="tags">
  490. <ul>
  491. <li><a href="/">tag</a></li>
  492. <li><a href="/">tag</a></li>
  493. <li><a href="/">tag</a></li>
  494. <li><a href="/">tag</a></li>
  495. <li><a href="/">tag</a></li>
  496. <li><a href="/">tag</a></li>
  497. <li><a href="/">tag</a></li>
  498. <li><a href="/">tag</a></li>
  499. <li><a href="/">tag</a></li>
  500. <li><a href="/">tag</a></li>
  501. <li><a href="/">tag</a></li>
  502. </ul>
  503. </div>
  504. </div>
  505.  
  506. <div class="circle">
  507. <div class="titles">title</div>
  508. <div class="tags">
  509. <ul>
  510. <li><a href="/">tag</a></li>
  511. <li><a href="/">tag</a></li>
  512. <li><a href="/">tag</a></li>
  513. <li><a href="/">tag</a></li>
  514. <li><a href="/">tag</a></li>
  515. <li><a href="/">tag</a></li>
  516. <li><a href="/">tag</a></li>
  517. <li><a href="/">tag</a></li>
  518. <li><a href="/">tag</a></li>
  519. <li><a href="/">tag</a></li>
  520. <li><a href="/">tag</a></li>
  521. </ul>
  522. </div>
  523. </div>
  524.  
  525. <div class="circle">
  526. <div class="titles">title</div>
  527. <div class="tags">
  528. <ul>
  529. <li><a href="/">tag</a></li>
  530. <li><a href="/">tag</a></li>
  531. <li><a href="/">tag</a></li>
  532. <li><a href="/">tag</a></li>
  533. <li><a href="/">tag</a></li>
  534. <li><a href="/">tag</a></li>
  535. <li><a href="/">tag</a></li>
  536. <li><a href="/">tag</a></li>
  537. <li><a href="/">tag</a></li>
  538. <li><a href="/">tag</a></li>
  539. <li><a href="/">tag</a></li>
  540. </ul>
  541. </div>
  542. </div>
  543.  
  544. <div class="circle">
  545. <div class="titles">title</div>
  546. <div class="tags">
  547. <ul>
  548. <li><a href="/">tag</a></li>
  549. <li><a href="/">tag</a></li>
  550. <li><a href="/">tag</a></li>
  551. <li><a href="/">tag</a></li>
  552. <li><a href="/">tag</a></li>
  553. <li><a href="/">tag</a></li>
  554. <li><a href="/">tag</a></li>
  555. <li><a href="/">tag</a></li>
  556. <li><a href="/">tag</a></li>
  557. <li><a href="/">tag</a></li>
  558. <li><a href="/">tag</a></li>
  559. </ul>
  560. </div>
  561. </div>
  562.  
  563. <div class="circle">
  564. <div class="titles">title</div>
  565. <div class="tags">
  566. <ul>
  567. <li><a href="/">tag</a></li>
  568. <li><a href="/">tag</a></li>
  569. <li><a href="/">tag</a></li>
  570. <li><a href="/">tag</a></li>
  571. <li><a href="/">tag</a></li>
  572. <li><a href="/">tag</a></li>
  573. <li><a href="/">tag</a></li>
  574. <li><a href="/">tag</a></li>
  575. <li><a href="/">tag</a></li>
  576. <li><a href="/">tag</a></li>
  577. <li><a href="/">tag</a></li>
  578. </ul>
  579. </div>
  580. </div>
  581.  
  582. <div class="circle">
  583. <div class="titles">title</div>
  584. <div class="tags">
  585. <ul>
  586. <li><a href="/">tag</a></li>
  587. <li><a href="/">tag</a></li>
  588. <li><a href="/">tag</a></li>
  589. <li><a href="/">tag</a></li>
  590. <li><a href="/">tag</a></li>
  591. <li><a href="/">tag</a></li>
  592. <li><a href="/">tag</a></li>
  593. <li><a href="/">tag</a></li>
  594. <li><a href="/">tag</a></li>
  595. <li><a href="/">tag</a></li>
  596. <li><a href="/">tag</a></li>
  597. </ul>
  598. </div>
  599. </div>
  600.  
  601.  
  602. </div>
  603.  
  604.  
  605. <a title="made by amaanat themes" href="https://www.amaanat.tumblr.com" class="credit"><span class="th th-diamond-o"></span>
  606. </a>
  607.  
  608. </body>
  609.  
  610. </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!