rose04

icons page (backup)

Feb 1st, 2021
53
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 25.20 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <head>
  3.  
  4. <title>{text:Page Title}</title>
  5.  
  6. <!--
  7.  
  8. >> ETHEREAL THEMES // IRIS - ICONS PAGE
  9.  
  10. Designed by etherealthemes
  11. etherealthemes.tumblr.com
  12. ⓒ 2016 - 2019
  13.  
  14. >> TERMS OF USE
  15.  
  16. Do NOT remove the credit
  17. Do NOT claim as your own
  18.  
  19. *You can move the credit, but leave it visible
  20. *Edit as much as you'd like
  21. *Feel free to ask about basic customization
  22. *Page suggestions always welcomed
  23.  
  24. >> THEME HELP
  25.  
  26. All colors customizalbe on editor
  27.  
  28. TO ADD NOTES
  29. To add filters, search:
  30. START NOTES
  31.  
  32. TO ADD FILTERS AND CATEGORIES:
  33. To add filters, search:
  34. START FILTERS
  35. and copy one line from <li> to </li> and paste for every new filter. Make sure to keep the "." before your filter ie .riverdale instead of riverdale
  36. The catergories are directly below, or search:
  37. START CATEGORIES
  38.  
  39. TO ADD ICONS:
  40. To add icons, search:
  41. Start Exmaple Icon
  42. and copy the block of code (marked by START and END EXAMPLE ICONS)
  43. paste for each icon. Each icon image needs to be in its own <div> block
  44.  
  45. TO CATEGORIZE ICONS:
  46. On each icon <div> block there's a "class" with the filters associated with the icon. Leave "icon" to re-sort icons by clicking "All" on the topbar. For each main filter and category you add, add to the corresponding icon. For example if my filters are:
  47.  
  48. data-option-filter=".gameofthrones"
  49. data-option-filter=".killingeve"
  50. data-option-filter=".thepunisher"
  51. data-option-filter=".red"
  52. data-option-filter=".green"
  53. data-option-filter=".orange"
  54.  
  55. Then I would label the classes for each as:
  56. class="icon gameofthrones red"
  57. class="icon killingeve green"
  58. class="icon thepunisher orange"
  59.  
  60. Do the same for each main filter and category.
  61.  
  62. THEME:
  63. All colors customizable on main editor.
  64. BG: #fbfbfb, Text: #000000, Gray: #dddddd, Content: #ffffff, Accent: a0a1a5
  65.  
  66. MISC:
  67. Page auto-centers
  68. Auto-fills all page sizes ; drag your window size to preview
  69. Page will NOT look centered unless you fill at least the top row with icons
  70.  
  71.  
  72. -->
  73.  
  74.  
  75.  
  76.  
  77. <!-- COLORS -->
  78. <meta name="color:Background" content="#fbfbfb" />
  79. <meta name="color:Text" content="#000000" />
  80. <meta name="color:Content" content="#ffffff" />
  81. <meta name="color:Gray" content="#dddddd" />
  82. <meta name="color:Accent" content="#a0a1a5" />
  83.  
  84.  
  85. <!-- TEXT -->
  86. <meta name="text:Page Title" content="Page Title"/>
  87.  
  88.  
  89. <!-- IF -->
  90. <meta name="if:Invert Tumblr Controls" content="1"/>
  91.  
  92.  
  93. <!-- SELECT -->
  94. <meta name="select:Font Size" content="10px" title="Default">
  95. <meta name="select:Font Size" content="9px" title="Small">
  96. <meta name="select:Font Size" content="11px" title="Large">
  97.  
  98.  
  99. <!-- SCRIPTS-->
  100. <link href="https://fonts.googleapis.com/css?family=Muli:400,400i,700,700i" rel="stylesheet">
  101.  
  102. <!-- STYLESHEET-->
  103. <style type="text/css">
  104.  
  105. /* --- SCROLLBAR --- */
  106.  
  107. ::-webkit-scrollbar-thumb {background:{color:Accent};border:4px solid {color:Background};}
  108.  
  109. ::-webkit-scrollbar {width:11px;border:5px solid {color:Background};border-right:5px solid {color:Background};background:{color:Gray};}
  110.  
  111. /* --- TUMBLR TOOLS --- */
  112.  
  113. iframe.tmblr-iframe {
  114. position:fixed;
  115. z-index:5!important;
  116. top:3px!important;
  117. right:0px!important;
  118. opacity:0;
  119. padding-right:60px;
  120. transform:scale(0.5);
  121. transform-origin:100% 0;
  122. -webkit-transform:scale(0.5);
  123. -webkit-transform-origin:100% 0;
  124. -o-transform:scale(0.5);
  125. -o-transform-origin:100% 0;
  126. -moz-transform:scale(0.5);
  127. -moz-transform-origin:100% 0;
  128. -ms-transform:scale(0.5);
  129. -ms-transform-origin:100% 0;
  130. transition:.2s ease-in-out;
  131. -webkit-transition:.2s ease-in-out;
  132. -moz-transition:.2s ease-in-out;
  133.  
  134. {block:IfInvertTumblrControls}
  135. filter:invert(1);
  136. -webkit-filter:invert(1);
  137. -o-filter:invert(1);
  138. -moz-filter:invert(1);
  139. -ms-filter:invert(1);
  140. {/block:IfInvertTumblrControl}
  141. }
  142.  
  143. iframe.tmblr-iframe:hover {opacity:0.5!important;}
  144.  
  145. .tcontrols {
  146. position:fixed;
  147. top:{select:Font Size};
  148. right:15px;
  149. z-index:4;
  150. transition:.2s ease-in-out;
  151. -webkit-transition:.2s ease-in-out;
  152. -moz-transition:.2s ease-in-out;
  153. }
  154.  
  155. .tcontrols {color:{color:Text};font-size:14px;}
  156.  
  157. /* --- BODY --- */
  158.  
  159. body {
  160. margin: 0px;
  161. padding: 0px;
  162. font-family: 'Muli', sans-serif;
  163. color:{color:Text};
  164. font-size:{select:Font Size};
  165. line-height:155%;
  166. font-weight:normal;
  167. overflow-x:hidden;
  168. word-wrap:normal;
  169. text-align:left;
  170. background:{color:Background};
  171. }
  172.  
  173. a {
  174. color:{color:Text};
  175. text-decoration:none;
  176. border:0;
  177. opacity:1;
  178. transition:0.3s ease-in-out;
  179. -webkit-transition:0.3s ease-in-out;
  180. -moz-transition:0.3s ease-in-out;
  181. }
  182.  
  183. a:hover {opacity:0.6;}
  184.  
  185. b,strong {font-weight:700;}
  186.  
  187. .et {position:fixed;color:{color:Text};right:8px;bottom:8px;opacity:0.6;text-transform:uppercase;font-size:calc({select:Font Size} - 0.5px);z-index:5;}
  188.  
  189. /* --- TOPBAR --- */
  190.  
  191. #topbar {
  192. position:fixed;
  193. top:0px;
  194. left:0px;
  195. width:100%;
  196. padding:{select:Font Size};
  197. text-align:center;
  198. background:{color:Content};
  199. z-index:2;
  200. }
  201.  
  202. .topbar {width:100%;text-align:center;}
  203.  
  204. ul.topbar {list-style-type:none;}
  205.  
  206. .topbar li {display:inline-block;text-align:center;}
  207.  
  208. .topbar li a {
  209. margin:0px 5px 5px 5px;
  210. color:{color:Text};
  211. font-size:{select:Font Size};
  212. text-transform:uppercase;
  213. padding:5px;
  214. }
  215.  
  216. .topbar li:not(:first-child):before {content:"\2022";padding-right:5px;position:relative;top:-1px;}
  217.  
  218. /* --- CONTAINER --- */
  219.  
  220. #container {
  221. margin: 0 auto;
  222. width:90%;
  223. margin-top:100px;
  224. padding-bottom:100px;
  225. position:relative;
  226. text-align:center;
  227. }
  228.  
  229. .block_bottom {position:fixed;background:{color:Background};height:35px;width:100%;z-index:3;}
  230.  
  231. .block_top {top:0px;left:0px;}
  232.  
  233. .block_bottom {bottom:0px;left:0px;}
  234.  
  235. /* --- NOTES --- */
  236.  
  237. .notes {
  238. position:fixed;
  239. top:23px;
  240. left:{select:Font Size};
  241. width:200px;
  242. text-align:center;
  243. padding:{select:Font Size};
  244. color:{color:Text};
  245. background:transparent;
  246. z-index:3;
  247. transition:0.2s ease-in-out;
  248. -webkit-transition:0.2s ease-in-out;
  249. -moz-transition:0.2s ease-in-out;
  250. }
  251.  
  252. .notes h1 {
  253. font-size:calc({select:Font Size} + 2px);
  254. text-transform:uppercase;
  255. margin:0px 0px 4px 0px;
  256. }
  257.  
  258. .notes:hover {background:{color:Accent};color:{color:Content};}
  259.  
  260. .notes:hover .notes_det {opacity:1;margin-top:0px;display:block;}
  261.  
  262. .notes_det {
  263. display:none;
  264. transition:0.3s ease-in-out;
  265. -webkit-transition:0.3s ease-in-out;
  266. -moz-transition:0.3s ease-in-out;
  267. color:{color:Content};
  268. }
  269.  
  270. .notes a {color:{color:Content};opacity:0.8!important;}
  271.  
  272. ul.rules {margin-left:-30px;}
  273.  
  274. .rules li {display:block;text-align:left;}
  275.  
  276. /* --- ICONS --- */
  277.  
  278. .icon img {
  279. margin:3px;
  280. padding:1px;
  281. width:100px;
  282. display:inline-block;
  283. height:100px;
  284. }
  285.  
  286. .icon {
  287. display:inline-block;
  288. margin:3px 3px 50px 3px;
  289. width:100px;
  290. height:100px;
  291. transition-duration:0.9s;
  292. -moz-transition-duration:0.9s;
  293. -webkit-transition-duration:0.9s;
  294. -o-transition-duration:0.9s;
  295. }
  296.  
  297. /* --- CHARACTER NAMES --- */
  298.  
  299. .tooltip-wrap {
  300. position:relative;
  301. height:135px;
  302. width:105px;
  303. z-index:1;
  304. }
  305.  
  306. .tooltip-content {
  307. position:relative;
  308. top:0px;
  309. width:100px;
  310. z-index:2;
  311. color:#000000;
  312. }
  313.  
  314. </style>
  315.  
  316. <body>
  317.  
  318.  
  319.  
  320.  
  321. <!-- DO NOT EDIT -->
  322. <div class="tcontrols">+</div><div class="block_bottom"></div><div class="et"><a href="https://ethereal-themes.tumblr.com">ethereal</a></div>
  323.  
  324.  
  325.  
  326.  
  327.  
  328.  
  329.  
  330.  
  331. <!------- START NOTES ------->
  332.  
  333. <div class="notes">
  334.  
  335. <h1>muses</h1>
  336.  
  337. <div class="notes_det">
  338.  
  339. my babies!!! i love them so much ♡ click on the icons for a link to posts, graphics and gifs that have inspired them. enjoy!
  340.  
  341. </a></div></div>
  342. <!------- END NOTES ------->
  343.  
  344.  
  345.  
  346.  
  347.  
  348.  
  349.  
  350.  
  351.  
  352.  
  353.  
  354.  
  355.  
  356.  
  357. <!------- START TOPBAR ------->
  358. <div id="topbar">
  359. <div class="topbar">
  360.  
  361.  
  362. <div id="filters" class="option-set clearfix" data-option-key="filter">
  363.  
  364. <!------- START FILTERS ------->
  365. <ul class="filter"><center>
  366.  
  367. <li><a href="#filter" data-option-filter=".aeonian">aeonian</a></a></li>
  368. <li><a href="#filter" data-option-filter=".falsegods">false gods</a></li>
  369. <li><a href="#filter" data-option-filter=".spirit">spirit kingdom</a></li>
  370. <li><a href="#filter" data-option-filter=".diamond">diamond of the first water</a></li>
  371. <li><a href="#filter" data-option-filter=".tbote">the beginning of the end</a></li>
  372. <li><a href="#filter" data-option-filter=".division">division</a></li>
  373. <li><a href="#filter" data-option-filter=".100">100th</a></li>
  374. <li><a href="#filter" data-option-filter=".selection">the selection</a></li>
  375. <li><a href="#filter" data-option-filter="">all</a></li>
  376.  
  377. </center>
  378. </ul>
  379. <!-------END FILTERS ------->
  380.  
  381. <!------- START CATEGORIES ------->
  382. <ul class="categories"><center>
  383.  
  384. <li><a href="#filter" data-option-filter=".medieval">medieval</a></li>
  385. <li><a href="#filter" data-option-filter=".modern">modern</a></li>
  386. <li><a href="#filter" data-option-filter=".futuristic">futuristic</a></li>
  387. <li><a href="#filter" data-option-filter=".others">others</a></li>
  388. </center>
  389. </ul>
  390. <!------- END CATEGORIES ------->
  391.  
  392. </a></div></div></div>
  393. <!------- END TOPBAR ------->
  394.  
  395.  
  396.  
  397.  
  398.  
  399.  
  400.  
  401. <!------- START CONTAINER ------->
  402. <div id="container" class="clearfix"><center>
  403. <!------- START ICONS ------->
  404.  
  405.  
  406.  
  407.  
  408.  
  409.  
  410. <!--- Start Exmaple Icon --->
  411. <div id="icons" class="icon aeonian medieval">
  412. <div class="tooltip-wrap">
  413. <a href="https://sanguine-bliss.tumblr.com/tagged/gem"><img src="https://i.pinimg.com/564x/7e/82/01/7e820148822282600d5e8365aefa529a.jpg"/>
  414. <div class="tooltip-content">
  415. <p>gem</p>
  416. </div>
  417. </a></div></div>
  418. <!--- End Exmaple Icon --->
  419.  
  420. <!--- Start Exmaple Icon --->
  421. <div id="icons" class="icon aeonian medieval">
  422. <div class="tooltip-wrap">
  423. <a href="https://sanguine-bliss.tumblr.com/tagged/astro"><img src="https://64.media.tumblr.com/9f13915551cfd241c10ef6e00327f9fc/f9d841187f7bca1d-69/s250x400/bd87ce7820b8b54c039da61dbcc51214f98450f7.jpg"/>
  424. <div class="tooltip-content">
  425. <p>astro</p>
  426. </div>
  427. </a></div></div>
  428. <!--- End Exmaple Icon --->
  429.  
  430. <!--- Start Exmaple Icon --->
  431. <div id="icons" class="icon aeonian medieval">
  432. <div class="tooltip-wrap">
  433. <a href="https://sanguine-bliss.tumblr.com/tagged/rune"><img src="https://i.pinimg.com/564x/c1/c8/aa/c1c8aabc2e830fa7e73d9f2e0536bb75.jpg" />
  434. <div class="tooltip-content">
  435. <p>rune</p>
  436. </div>
  437. </a></div></div>
  438. <!--- End Exmaple Icon --->
  439.  
  440. <!--- Start Exmaple Icon --->
  441. <div id="icons" class="icon aeonian medieval">
  442. <div class="tooltip-wrap">
  443. <a href="https://sanguine-bliss.tumblr.com/tagged/sera"><img src="https://i.pinimg.com/564x/a1/3d/c8/a13dc81feb43dc1e38df6e252fe5dce5.jpg" />
  444. <div class="tooltip-content">
  445. <p>sera</p>
  446. </div>
  447. </a></div></div>
  448. <!--- End Exmaple Icon --->
  449.  
  450. <!--- Start Exmaple Icon --->
  451. <div id="icons" class="icon aeonian medieval">
  452. <div class="tooltip-wrap">
  453. <a href="https://sanguine-bliss.tumblr.com/tagged/ying"><img src="https://64.media.tumblr.com/4a79e23c0ba23a740dfe1ebaafb5ad1c/tumblr_pkm5d1Vati1v1ofe3o3_250.png" />
  454. <div class="tooltip-content">
  455. <p>ying</p>
  456. </div>
  457. </a></div></div>
  458. <!--- End Exmaple Icon --->
  459.  
  460. <!--- Start Exmaple Icon --->
  461. <div id="icons" class="icon aeonian medieval">
  462. <div class="tooltip-wrap">
  463. <a href="https://sanguine-bliss.tumblr.com/tagged/sky"><img src="https://i.pinimg.com/564x/2d/ab/13/2dab13507bd081154e434dc364ad9b6c.jpg" />
  464. <div class="tooltip-content">
  465. <p>sky</p>
  466. </div>
  467. </a></div></div>
  468. <!--- End Exmaple Icon --->
  469.  
  470. <!--- Start Exmaple Icon --->
  471. <div id="icons" class="icon aeonian medieval">
  472. <div class="tooltip-wrap">
  473. <a href="https://sanguine-bliss.tumblr.com/tagged/oli"><img src="https://i.pinimg.com/564x/b9/8a/28/b98a288258f72191f13589fc51270094.jpg" />
  474. <div class="tooltip-content">
  475. <p>oli</p>
  476. </div>
  477. </a></div></div>
  478. <!--- End Exmaple Icon --->
  479.  
  480. <!--- Start Exmaple Icon --->
  481. <div id="icons" class="icon aeonian medieval">
  482. <div class="tooltip-wrap">
  483. <a href="https://sanguine-bliss.tumblr.com/tagged/aaron"><img src="https://i.pinimg.com/originals/6f/c7/41/6fc7415c35e42d5a658f676e3d6b7ffa.jpg" />
  484. <div class="tooltip-content">
  485. <p>aaron</p>
  486. </div>
  487. </a></div></div>
  488. <!--- End Exmaple Icon --->
  489.  
  490. <!--- Start Exmaple Icon --->
  491. <div id="icons" class="icon spirit medieval">
  492. <div class="tooltip-wrap">
  493. <a href="https://sanguine-bliss.tumblr.com/tagged/ellie"><img src="https://64.media.tumblr.com/87b8319c8acd51be90e96e4b78db4a9d/tumblr_pj2wn5xEna1vi0xg2o2_400.png" />
  494. <div class="tooltip-content">
  495. <p>ellie</p>
  496. </div>
  497. </a></div></div>
  498. <!--- End Exmaple Icon --->
  499.  
  500. <!--- Start Exmaple Icon --->
  501. <div id="icons" class="icon spirit medieval">
  502. <div class="tooltip-wrap">
  503. <a href="https://sanguine-bliss.tumblr.com/tagged/nia"><img src="https://i.pinimg.com/564x/82/cd/b5/82cdb53b6e8b8e143b2f979e3fa5e208.jpg" />
  504. <div class="tooltip-content">
  505. <p>nia</p>
  506. </div>
  507. </a></div></div>
  508. <!--- End Exmaple Icon --->
  509.  
  510. <!--- Start Exmaple Icon --->
  511. <div id="icons" class="icon spirit medieval">
  512. <div class="tooltip-wrap">
  513. <a href="https://sanguine-bliss.tumblr.com/tagged/styx"><img src="https://i.pinimg.com/564x/a9/53/2a/a9532a16ee5be3120ba243caad600649.jpg" />
  514. <div class="tooltip-content">
  515. <p>styx</p>
  516. </div>
  517. </a></div></div>
  518. <!--- End Exmaple Icon --->
  519.  
  520. <!--- Start Exmaple Icon --->
  521. <div id="icons" class="icon spirit medieval">
  522. <div class="tooltip-wrap">
  523. <a href="https://sanguine-bliss.tumblr.com/tagged/ez"><img src="https://i.pinimg.com/474x/98/de/9f/98de9f9aa9dc64e45ac981c4ce1c4050.jpg" />
  524. <div class="tooltip-content">
  525. <p>ezra</p>
  526. </div>
  527. </a></div></div>
  528. <!--- End Exmaple Icon --->
  529.  
  530. <!--- Start Exmaple Icon --->
  531. <div id="icons" class="icon diamond medieval">
  532. <div class="tooltip-wrap">
  533. <a href="https://sanguine-bliss.tumblr.com/tagged/liliana"><img src="https://64.media.tumblr.com/440fad863c14e9cde8bce4310822f14b/tumblr_ptcqnoLXoS1smeeqf_1280.png" />
  534. <div class="tooltip-content">
  535. <p>liliana</p>
  536. </div>
  537. </a></div></div>
  538. <!--- End Exmaple Icon --->
  539.  
  540. <!--- Start Exmaple Icon --->
  541. <div id="icons" class="icon diamond medieval">
  542. <div class="tooltip-wrap">
  543. <a href="https://sanguine-bliss.tumblr.com/tagged/ria"><img src="https://images6.fanpop.com/image/photos/35500000/Im-YoonA-Icons-im-yoona-35542900-240-240.png" />
  544. <div class="tooltip-content">
  545. <p>orianne</p>
  546. </div>
  547. </a></div></div>
  548. <!--- End Exmaple Icon --->
  549.  
  550. <!--- Start Exmaple Icon --->
  551. <div id="icons" class="icon diamond medieval">
  552. <div class="tooltip-wrap">
  553. <a href="https://sanguine-bliss.tumblr.com/tagged/archer"><img src="https://64.media.tumblr.com/0f7810ea2ffc86428a1c8b5a9bd166da/tumblr_p6xdr04Ie91x06fpko9_400.png" />
  554. <div class="tooltip-content">
  555. <p>archer</p>
  556. </div>
  557. </a></div></div>
  558. <!--- End Exmaple Icon --->
  559.  
  560. <div id="icons" class="icon diamond medieval">
  561. <div class="tooltip-wrap">
  562. <a href="https://sanguine-bliss.tumblr.com/tagged/cyrus"><img src="https://64.media.tumblr.com/231260ea873327d458d000e660e621b9/tumblr_p92u5jvKXr1xno8b4o5_400.jpg" />
  563. <div class="tooltip-content">
  564. <p>cyrus</p>
  565. </div>
  566. </a></div></div>
  567.  
  568. <!--- Start Exmaple Icon --->
  569.  
  570. <!--- End Exmaple Icon --->
  571.  
  572. <!--- Start Exmaple Icon --->
  573. <div id="icons" class="icon tbote modern">
  574. <div class="tooltip-wrap">
  575. <a href="https://sanguine-bliss.tumblr.com/tagged/will"><img src="https://i.pinimg.com/564x/9b/70/52/9b7052062fe9f3275ac20263a55a9997.jpg" />
  576. <div class="tooltip-content">
  577. <p>will</p>
  578. </div>
  579. </a></div></div>
  580. <!--- End Exmaple Icon --->
  581.  
  582. <!--- Start Exmaple Icon --->
  583. <div id="icons" class="icon tbote modern">
  584. <div class="tooltip-wrap">
  585. <a href="https://sanguine-bliss.tumblr.com/tagged/soraya"><img src="https://i.pinimg.com/564x/7f/87/5b/7f875bb3dfbd85fa499d139dc637732a.jpg" />
  586. <div class="tooltip-content">
  587. <p>soraya</p>
  588. </div>
  589. </a></div></div>
  590. <!--- End Exmaple Icon --->
  591.  
  592. <!--- Start Exmaple Icon --->
  593. <div id="icons" class="icon falsegods futuristic">
  594. <div class="tooltip-wrap">
  595. <a href="https://sanguine-bliss.tumblr.com/tagged/rhea"><img src="https://i.pinimg.com/564x/96/8a/f9/968af90b47d36cbd343ad30bdd247d43.jpg" />
  596. <div class="tooltip-content">
  597. <p>rhea</p>
  598. </div>
  599. </a></div></div>
  600. <!--- End Exmaple Icon --->
  601.  
  602. <!--- Start Exmaple Icon --->
  603. <div id="icons" class="icon falsegods futuristic">
  604. <div class="tooltip-wrap">
  605. <a href="https://sanguine-bliss.tumblr.com/tagged/aera"><img src="https://64.media.tumblr.com/7ade4110a4549d2b890de76d4eab61db/tumblr_peaiug86kT1v352o0o5_250.png" />
  606. <div class="tooltip-content">
  607. <p>aera</p>
  608. </div>
  609. </a></div></div>
  610. <!--- End Exmaple Icon --->
  611.  
  612. <!--- Start Exmaple Icon --->
  613. <div id="icons" class="icon division futuristic">
  614. <div class="tooltip-wrap">
  615. <a href="https://sanguine-bliss.tumblr.com/tagged/liam"><img src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/hostedimages/1608795538i/30580218.png" />
  616. <div class="tooltip-content">
  617. <p>liam</p>
  618. </div>
  619. </a></div></div>
  620. <!--- End Exmaple Icon --->
  621.  
  622. <!--- Start Exmaple Icon --->
  623. <div id="icons" class="icon division futuristic">
  624. <div class="tooltip-wrap">
  625. <a href="https://sanguine-bliss.tumblr.com/tagged/fin"><img src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/hostedimages/1608638714i/30570766.png" />
  626. <div class="tooltip-content">
  627. <p>fin</p>
  628. </div>
  629. </a></div></div>
  630. <!--- End Exmaple Icon --->
  631.  
  632. <!--- Start Exmaple Icon --->
  633. <div id="icons" class="icon division futuristic">
  634. <div class="tooltip-wrap">
  635. <a href="https://sanguine-bliss.tumblr.com/tagged/june"><img src="https://64.media.tumblr.com/2e81bdc1b8b226870943ab1318792029/98521ad10449ac13-4a/s400x600/ee69e416647cf18bfcfebd7f863f0deaefbeb170.png" />
  636. <div class="tooltip-content">
  637. <p>june</p>
  638. </div>
  639. </a></div></div>
  640. <!--- End Exmaple Icon --->
  641.  
  642. <!--- Start Exmaple Icon --->
  643. <div id="icons" class="icon division futuristic">
  644. <div class="tooltip-wrap">
  645. <a href="https://sanguine-bliss.tumblr.com/tagged/kylie"><img src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/hostedimages/1608791715i/30580000.png" />
  646. <div class="tooltip-content">
  647. <p>kylie</p>
  648. </div>
  649. </a></div></div>
  650. <!--- End Exmaple Icon --->
  651.  
  652. <!--- Start Exmaple Icon --->
  653. <div id="icons" class="icon division futuristic">
  654. <div class="tooltip-wrap">
  655. <a href="https://sanguine-bliss.tumblr.com/tagged/jordan"><img src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/hostedimages/1608787020i/30579818.jpg" />
  656. <div class="tooltip-content">
  657. <p>jordan</p>
  658. </div>
  659. </a></div></div>
  660. <!--- End Exmaple Icon --->
  661.  
  662. <!--- Start Exmaple Icon --->
  663. <div id="icons" class="icon division futuristic">
  664. <div class="tooltip-wrap">
  665. <a href="https://sanguine-bliss.tumblr.com/tagged/kedian"><img src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/hostedimages/1608609111i/30568886.jpg" />
  666. <div class="tooltip-content">
  667. <p>kedian</p>
  668. </div>
  669. </a></div></div>
  670. <!--- End Exmaple Icon --->
  671.  
  672. <!--- Start Exmaple Icon --->
  673. <div id="icons" class="icon 100 others">
  674. <div class="tooltip-wrap">
  675. <a href="https://sanguine-bliss.tumblr.com/tagged/cassie"><img src="https://64.media.tumblr.com/8e4d9c6d6f16a703a8b53f567207e797/tumblr_pr19uzHM0S1wmi29do8_250.png" />
  676. <div class="tooltip-content">
  677. <p>cassie</p>
  678. </div>
  679. </a></div></div>
  680. <!--- End Exmaple Icon --->
  681.  
  682. <!--- Start Exmaple Icon --->
  683. <div id="icons" class="icon 100 others">
  684. <div class="tooltip-wrap">
  685. <a href="https://sanguine-bliss.tumblr.com/tagged/cyn"><img src="https://i.pinimg.com/564x/f3/6e/86/f36e866c10182c56cacb993990e53e65.jpg" />
  686. <div class="tooltip-content">
  687. <p>halcyon</p>
  688. </div>
  689. </a></div></div>
  690. <!--- End Exmaple Icon --->
  691.  
  692. <!--- Start Exmaple Icon --->
  693. <div id="icons" class="icon selection others">
  694. <div class="tooltip-wrap">
  695. <a href="https://sanguine-bliss.tumblr.com/tagged/elektra"><img src="https://64.media.tumblr.com/6f102c0a10fe790a08f00b0a54828623/84cd13f7203c78ae-4f/s640x960/237b954401a79a18f7b2f687201f8fec4c1cba20.jpg" />
  696. <div class="tooltip-content">
  697. <p>elektra</p>
  698. </div>
  699. </a></div></div>
  700. <!--- End Exmaple Icon --->
  701.  
  702. <!--- Start Exmaple Icon --->
  703. <div id="icons" class="icon selection others">
  704. <div class="tooltip-wrap">
  705. <a href="https://sanguine-bliss.tumblr.com/tagged/mea"><img src="https://64.media.tumblr.com/1a5365968ba11bcd95ac830e297a1eca/tumblr_pii48tWsVG1xno8b4o2_250.jpg" />
  706. <div class="tooltip-content">
  707. <p>mea</p>
  708. </div>
  709. </a></div></div>
  710. <!--- End Exmaple Icon --->
  711.  
  712. <!--- Start Exmaple Icon --->
  713. <div id="icons" class="icon selection others">
  714. <div class="tooltip-wrap">
  715. <a href="https://sanguine-bliss.tumblr.com/tagged/az"><img src="https://i.pinimg.com/564x/4b/c0/55/4bc055e145bdc1ec64ab57752c656a38.jpg" />
  716. <div class="tooltip-content">
  717. <p>azriel</p>
  718. </div>
  719. </a></div></div>
  720. <!--- End Exmaple Icon --->
  721.  
  722. <!--- Start Exmaple Icon --->
  723. <div id="icons" class="icon selection others">
  724. <div class="tooltip-wrap">
  725. <a href="https://sanguine-bliss.tumblr.com/tagged/leia"><img src="https://i.pinimg.com/originals/3f/ef/05/3fef05f604ca6b148b1eb50154dedb86.png" />
  726. <div class="tooltip-content">
  727. <p>leia</p>
  728. </div>
  729. </a></div></div>
  730. <!--- End Exmaple Icon --->
  731.  
  732. <!--- Start Exmaple Icon --->
  733. <div id="icons" class="icon selection others">
  734. <div class="tooltip-wrap">
  735. <a href="https://sanguine-bliss.tumblr.com/tagged/serene"><img src="https://64.media.tumblr.com/c73a510c89cdb3fcd401dee372c3b7c8/tumblr_ou6y6eaS0X1vzezh1o6_400.png" />
  736. <div class="tooltip-content">
  737. <p>serene</p>
  738. </div>
  739. </a></div></div>
  740. <!--- End Exmaple Icon --->
  741.  
  742. <!--- Start Exmaple Icon --->
  743. <div id="icons" class="icon 1x1 others">
  744. <div class="tooltip-wrap">
  745. <a href="https://sanguine-bliss.tumblr.com/tagged/thea"><img src="https://img.wattpad.com/5feaf2554b3d52f46ec71323f98793525160e640/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f776174747061642d6d656469612d736572766963652f53746f7279496d6167652f315a6f4d414e7171664d657144673d3d2d3731393531353033312e313539353662366233343233653432303138393331393239333239362e6a7067?s=fit&w=720&h=720" />
  746. <div class="tooltip-content">
  747. <p>althea</p>
  748. </div>
  749. </a></div></div>
  750. <!--- End Exmaple Icon --->
  751.  
  752. <!--- Start Exmaple Icon --->
  753. <div id="icons" class="icon 1x1 others">
  754. <div class="tooltip-wrap">
  755. <a href="https://sanguine-bliss.tumblr.com/tagged/kye"><img src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/hostedimages/1608433937i/30559874.jpg" />
  756. <div class="tooltip-content">
  757. <p>kye</p>
  758. </div>
  759. </a></div></div>
  760. <!--- End Exmaple Icon --->
  761.  
  762. <!--- Start Exmaple Icon --->
  763. <div id="icons" class="icon 1x1 others">
  764. <div class="tooltip-wrap">
  765. <a href="https://sanguine-bliss.tumblr.com/tagged/ash"><img src="https://pkimgcdn.peekyou.com/e7799ae1318f2dc0de36ce3f67860711.jpeg" />
  766. <div class="tooltip-content">
  767. <p>ashyvien</p>
  768. </div>
  769. </a></div></div>
  770. <!--- End Exmaple Icon --->
  771.  
  772.  
  773.  
  774.  
  775.  
  776.  
  777.  
  778.  
  779.  
  780. <!------- END ICONS ------->
  781. </div>
  782. <!------- END CONTAINER ------->
  783.  
  784.  
  785.  
  786.  
  787.  
  788.  
  789. <!------- SCRIPTS: DO NOT EDIT ------->
  790. <script src="https://static.tumblr.com/zvesamf/1T6okd4xb/imagesloaded.pkgd.min.js"></script>
  791. <script src="https://static.tumblr.com/fuu6t9w/kh8ml0pl9/jquery-1.7.1.min.js"></script>
  792. <script src="https://static.tumblr.com/fuu6t9w/eubml0pm0/jquery.isotope.min.js"></script>
  793.  
  794. <script>
  795. $(function(){
  796.  
  797. var $container = $('#container');
  798.  
  799. $container.isotope({
  800. itemSelector : '.icon'
  801. });
  802.  
  803.  
  804. var $optionSets = $('#topbar .option-set'),
  805. $optionLinks = $optionSets.find('a');
  806.  
  807. $optionLinks.click(function(){
  808. var $this = $(this);
  809. // don't proceed if already selected
  810. if ( $this.hasClass('selected') ) {
  811. return false;
  812. }
  813. var $optionSet = $this.parents('.option-set');
  814. $optionSet.find('.selected').removeClass('selected');
  815. $this.addClass('selected');
  816.  
  817. // make option object dynamically, i.e. { filter: '.my-filter-class' }
  818. var options = {},
  819. key = $optionSet.attr('data-option-key'),
  820. value = $this.attr('data-option-filter');
  821. // parse 'false' as false boolean
  822. value = value === 'false' ? false : value;
  823. options[ key ] = value;
  824. if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
  825. // changes in layout modes need extra logic
  826. changeLayoutMode( $this, options )
  827. } else {
  828. // otherwise, apply new options
  829. $container.isotope( options );
  830. }
  831.  
  832. return false;
  833. });
  834.  
  835. $grid.imagesLoaded().progress( function() {
  836. $grid.isotope('layout');
  837. });
  838.  
  839. });
  840. </script>
  841.  
  842. </html>
Advertisement
Add Comment
Please, Sign In to add comment