Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <head>
- <title>{text:Page Title}</title>
- <!--
- >> ETHEREAL THEMES // IRIS - ICONS PAGE
- Designed by etherealthemes
- etherealthemes.tumblr.com
- ⓒ 2016 - 2019
- >> TERMS OF USE
- Do NOT remove the credit
- Do NOT claim as your own
- *You can move the credit, but leave it visible
- *Edit as much as you'd like
- *Feel free to ask about basic customization
- *Page suggestions always welcomed
- >> THEME HELP
- All colors customizalbe on editor
- TO ADD NOTES
- To add filters, search:
- START NOTES
- TO ADD FILTERS AND CATEGORIES:
- To add filters, search:
- START FILTERS
- 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
- The catergories are directly below, or search:
- START CATEGORIES
- TO ADD ICONS:
- To add icons, search:
- Start Exmaple Icon
- and copy the block of code (marked by START and END EXAMPLE ICONS)
- paste for each icon. Each icon image needs to be in its own <div> block
- TO CATEGORIZE ICONS:
- 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:
- data-option-filter=".gameofthrones"
- data-option-filter=".killingeve"
- data-option-filter=".thepunisher"
- data-option-filter=".red"
- data-option-filter=".green"
- data-option-filter=".orange"
- Then I would label the classes for each as:
- class="icon gameofthrones red"
- class="icon killingeve green"
- class="icon thepunisher orange"
- Do the same for each main filter and category.
- THEME:
- All colors customizable on main editor.
- BG: #fbfbfb, Text: #000000, Gray: #dddddd, Content: #ffffff, Accent: a0a1a5
- MISC:
- Page auto-centers
- Auto-fills all page sizes ; drag your window size to preview
- Page will NOT look centered unless you fill at least the top row with icons
- -->
- <!-- COLORS -->
- <meta name="color:Background" content="#fbfbfb" />
- <meta name="color:Text" content="#000000" />
- <meta name="color:Content" content="#ffffff" />
- <meta name="color:Gray" content="#dddddd" />
- <meta name="color:Accent" content="#a0a1a5" />
- <!-- TEXT -->
- <meta name="text:Page Title" content="Page Title"/>
- <!-- IF -->
- <meta name="if:Invert Tumblr Controls" content="1"/>
- <!-- SELECT -->
- <meta name="select:Font Size" content="10px" title="Default">
- <meta name="select:Font Size" content="9px" title="Small">
- <meta name="select:Font Size" content="11px" title="Large">
- <!-- SCRIPTS-->
- <link href="https://fonts.googleapis.com/css?family=Muli:400,400i,700,700i" rel="stylesheet">
- <!-- STYLESHEET-->
- <style type="text/css">
- /* --- SCROLLBAR --- */
- ::-webkit-scrollbar-thumb {background:{color:Accent};border:4px solid {color:Background};}
- ::-webkit-scrollbar {width:11px;border:5px solid {color:Background};border-right:5px solid {color:Background};background:{color:Gray};}
- /* --- TUMBLR TOOLS --- */
- iframe.tmblr-iframe {
- position:fixed;
- z-index:5!important;
- top:3px!important;
- right:0px!important;
- opacity:0;
- padding-right:60px;
- transform:scale(0.5);
- transform-origin:100% 0;
- -webkit-transform:scale(0.5);
- -webkit-transform-origin:100% 0;
- -o-transform:scale(0.5);
- -o-transform-origin:100% 0;
- -moz-transform:scale(0.5);
- -moz-transform-origin:100% 0;
- -ms-transform:scale(0.5);
- -ms-transform-origin:100% 0;
- transition:.2s ease-in-out;
- -webkit-transition:.2s ease-in-out;
- -moz-transition:.2s ease-in-out;
- {block:IfInvertTumblrControls}
- filter:invert(1);
- -webkit-filter:invert(1);
- -o-filter:invert(1);
- -moz-filter:invert(1);
- -ms-filter:invert(1);
- {/block:IfInvertTumblrControl}
- }
- iframe.tmblr-iframe:hover {opacity:0.5!important;}
- .tcontrols {
- position:fixed;
- top:{select:Font Size};
- right:15px;
- z-index:4;
- transition:.2s ease-in-out;
- -webkit-transition:.2s ease-in-out;
- -moz-transition:.2s ease-in-out;
- }
- .tcontrols {color:{color:Text};font-size:14px;}
- /* --- BODY --- */
- body {
- margin: 0px;
- padding: 0px;
- font-family: 'Muli', sans-serif;
- color:{color:Text};
- font-size:{select:Font Size};
- line-height:155%;
- font-weight:normal;
- overflow-x:hidden;
- word-wrap:normal;
- text-align:left;
- background:{color:Background};
- }
- a {
- color:{color:Text};
- text-decoration:none;
- border:0;
- opacity:1;
- transition:0.3s ease-in-out;
- -webkit-transition:0.3s ease-in-out;
- -moz-transition:0.3s ease-in-out;
- }
- a:hover {opacity:0.6;}
- b,strong {font-weight:700;}
- .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;}
- /* --- TOPBAR --- */
- #topbar {
- position:fixed;
- top:0px;
- left:0px;
- width:100%;
- padding:{select:Font Size};
- text-align:center;
- background:{color:Content};
- z-index:2;
- }
- .topbar {width:100%;text-align:center;}
- ul.topbar {list-style-type:none;}
- .topbar li {display:inline-block;text-align:center;}
- .topbar li a {
- margin:0px 5px 5px 5px;
- color:{color:Text};
- font-size:{select:Font Size};
- text-transform:uppercase;
- padding:5px;
- }
- .topbar li:not(:first-child):before {content:"\2022";padding-right:5px;position:relative;top:-1px;}
- /* --- CONTAINER --- */
- #container {
- margin: 0 auto;
- width:90%;
- margin-top:100px;
- padding-bottom:100px;
- position:relative;
- text-align:center;
- }
- .block_bottom {position:fixed;background:{color:Background};height:35px;width:100%;z-index:3;}
- .block_top {top:0px;left:0px;}
- .block_bottom {bottom:0px;left:0px;}
- /* --- NOTES --- */
- .notes {
- position:fixed;
- top:23px;
- left:{select:Font Size};
- width:200px;
- text-align:center;
- padding:{select:Font Size};
- color:{color:Text};
- background:transparent;
- z-index:3;
- transition:0.2s ease-in-out;
- -webkit-transition:0.2s ease-in-out;
- -moz-transition:0.2s ease-in-out;
- }
- .notes h1 {
- font-size:calc({select:Font Size} + 2px);
- text-transform:uppercase;
- margin:0px 0px 4px 0px;
- }
- .notes:hover {background:{color:Accent};color:{color:Content};}
- .notes:hover .notes_det {opacity:1;margin-top:0px;display:block;}
- .notes_det {
- display:none;
- transition:0.3s ease-in-out;
- -webkit-transition:0.3s ease-in-out;
- -moz-transition:0.3s ease-in-out;
- color:{color:Content};
- }
- .notes a {color:{color:Content};opacity:0.8!important;}
- ul.rules {margin-left:-30px;}
- .rules li {display:block;text-align:left;}
- /* --- ICONS --- */
- .icon img {
- margin:3px;
- padding:1px;
- width:100px;
- display:inline-block;
- height:100px;
- }
- .icon {
- display:inline-block;
- margin:3px 3px 50px 3px;
- width:100px;
- height:100px;
- transition-duration:0.9s;
- -moz-transition-duration:0.9s;
- -webkit-transition-duration:0.9s;
- -o-transition-duration:0.9s;
- }
- /* --- CHARACTER NAMES --- */
- .tooltip-wrap {
- position:relative;
- height:135px;
- width:105px;
- z-index:1;
- }
- .tooltip-content {
- position:relative;
- top:0px;
- width:100px;
- z-index:2;
- color:#000000;
- }
- </style>
- <body>
- <!-- DO NOT EDIT -->
- <div class="tcontrols">+</div><div class="block_bottom"></div><div class="et"><a href="https://ethereal-themes.tumblr.com">ethereal</a></div>
- <!------- START NOTES ------->
- <div class="notes">
- <h1>muses</h1>
- <div class="notes_det">
- my babies!!! i love them so much ♡ click on the icons for a link to posts, graphics and gifs that have inspired them. enjoy!
- </a></div></div>
- <!------- END NOTES ------->
- <!------- START TOPBAR ------->
- <div id="topbar">
- <div class="topbar">
- <div id="filters" class="option-set clearfix" data-option-key="filter">
- <!------- START FILTERS ------->
- <ul class="filter"><center>
- <li><a href="#filter" data-option-filter=".aeonian">aeonian</a></a></li>
- <li><a href="#filter" data-option-filter=".falsegods">false gods</a></li>
- <li><a href="#filter" data-option-filter=".spirit">spirit kingdom</a></li>
- <li><a href="#filter" data-option-filter=".diamond">diamond of the first water</a></li>
- <li><a href="#filter" data-option-filter=".tbote">the beginning of the end</a></li>
- <li><a href="#filter" data-option-filter=".division">division</a></li>
- <li><a href="#filter" data-option-filter=".100">100th</a></li>
- <li><a href="#filter" data-option-filter=".selection">the selection</a></li>
- <li><a href="#filter" data-option-filter="">all</a></li>
- </center>
- </ul>
- <!-------END FILTERS ------->
- <!------- START CATEGORIES ------->
- <ul class="categories"><center>
- <li><a href="#filter" data-option-filter=".medieval">medieval</a></li>
- <li><a href="#filter" data-option-filter=".modern">modern</a></li>
- <li><a href="#filter" data-option-filter=".futuristic">futuristic</a></li>
- <li><a href="#filter" data-option-filter=".others">others</a></li>
- </center>
- </ul>
- <!------- END CATEGORIES ------->
- </a></div></div></div>
- <!------- END TOPBAR ------->
- <!------- START CONTAINER ------->
- <div id="container" class="clearfix"><center>
- <!------- START ICONS ------->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon aeonian medieval">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/gem"><img src="https://i.pinimg.com/564x/7e/82/01/7e820148822282600d5e8365aefa529a.jpg"/>
- <div class="tooltip-content">
- <p>gem</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon aeonian medieval">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/astro"><img src="https://64.media.tumblr.com/9f13915551cfd241c10ef6e00327f9fc/f9d841187f7bca1d-69/s250x400/bd87ce7820b8b54c039da61dbcc51214f98450f7.jpg"/>
- <div class="tooltip-content">
- <p>astro</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon aeonian medieval">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/rune"><img src="https://i.pinimg.com/564x/c1/c8/aa/c1c8aabc2e830fa7e73d9f2e0536bb75.jpg" />
- <div class="tooltip-content">
- <p>rune</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon aeonian medieval">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/sera"><img src="https://i.pinimg.com/564x/a1/3d/c8/a13dc81feb43dc1e38df6e252fe5dce5.jpg" />
- <div class="tooltip-content">
- <p>sera</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon aeonian medieval">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/ying"><img src="https://64.media.tumblr.com/4a79e23c0ba23a740dfe1ebaafb5ad1c/tumblr_pkm5d1Vati1v1ofe3o3_250.png" />
- <div class="tooltip-content">
- <p>ying</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon aeonian medieval">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/sky"><img src="https://i.pinimg.com/564x/2d/ab/13/2dab13507bd081154e434dc364ad9b6c.jpg" />
- <div class="tooltip-content">
- <p>sky</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon aeonian medieval">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/oli"><img src="https://i.pinimg.com/564x/b9/8a/28/b98a288258f72191f13589fc51270094.jpg" />
- <div class="tooltip-content">
- <p>oli</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon aeonian medieval">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/aaron"><img src="https://i.pinimg.com/originals/6f/c7/41/6fc7415c35e42d5a658f676e3d6b7ffa.jpg" />
- <div class="tooltip-content">
- <p>aaron</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon spirit medieval">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/ellie"><img src="https://64.media.tumblr.com/87b8319c8acd51be90e96e4b78db4a9d/tumblr_pj2wn5xEna1vi0xg2o2_400.png" />
- <div class="tooltip-content">
- <p>ellie</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon spirit medieval">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/nia"><img src="https://i.pinimg.com/564x/82/cd/b5/82cdb53b6e8b8e143b2f979e3fa5e208.jpg" />
- <div class="tooltip-content">
- <p>nia</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon spirit medieval">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/styx"><img src="https://i.pinimg.com/564x/a9/53/2a/a9532a16ee5be3120ba243caad600649.jpg" />
- <div class="tooltip-content">
- <p>styx</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon spirit medieval">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/ez"><img src="https://i.pinimg.com/474x/98/de/9f/98de9f9aa9dc64e45ac981c4ce1c4050.jpg" />
- <div class="tooltip-content">
- <p>ezra</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon diamond medieval">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/liliana"><img src="https://64.media.tumblr.com/440fad863c14e9cde8bce4310822f14b/tumblr_ptcqnoLXoS1smeeqf_1280.png" />
- <div class="tooltip-content">
- <p>liliana</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon diamond medieval">
- <div class="tooltip-wrap">
- <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" />
- <div class="tooltip-content">
- <p>orianne</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon diamond medieval">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/archer"><img src="https://64.media.tumblr.com/0f7810ea2ffc86428a1c8b5a9bd166da/tumblr_p6xdr04Ie91x06fpko9_400.png" />
- <div class="tooltip-content">
- <p>archer</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <div id="icons" class="icon diamond medieval">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/cyrus"><img src="https://64.media.tumblr.com/231260ea873327d458d000e660e621b9/tumblr_p92u5jvKXr1xno8b4o5_400.jpg" />
- <div class="tooltip-content">
- <p>cyrus</p>
- </div>
- </a></div></div>
- <!--- Start Exmaple Icon --->
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon tbote modern">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/will"><img src="https://i.pinimg.com/564x/9b/70/52/9b7052062fe9f3275ac20263a55a9997.jpg" />
- <div class="tooltip-content">
- <p>will</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon tbote modern">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/soraya"><img src="https://i.pinimg.com/564x/7f/87/5b/7f875bb3dfbd85fa499d139dc637732a.jpg" />
- <div class="tooltip-content">
- <p>soraya</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon falsegods futuristic">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/rhea"><img src="https://i.pinimg.com/564x/96/8a/f9/968af90b47d36cbd343ad30bdd247d43.jpg" />
- <div class="tooltip-content">
- <p>rhea</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon falsegods futuristic">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/aera"><img src="https://64.media.tumblr.com/7ade4110a4549d2b890de76d4eab61db/tumblr_peaiug86kT1v352o0o5_250.png" />
- <div class="tooltip-content">
- <p>aera</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon division futuristic">
- <div class="tooltip-wrap">
- <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" />
- <div class="tooltip-content">
- <p>liam</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon division futuristic">
- <div class="tooltip-wrap">
- <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" />
- <div class="tooltip-content">
- <p>fin</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon division futuristic">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/june"><img src="https://64.media.tumblr.com/2e81bdc1b8b226870943ab1318792029/98521ad10449ac13-4a/s400x600/ee69e416647cf18bfcfebd7f863f0deaefbeb170.png" />
- <div class="tooltip-content">
- <p>june</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon division futuristic">
- <div class="tooltip-wrap">
- <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" />
- <div class="tooltip-content">
- <p>kylie</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon division futuristic">
- <div class="tooltip-wrap">
- <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" />
- <div class="tooltip-content">
- <p>jordan</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon division futuristic">
- <div class="tooltip-wrap">
- <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" />
- <div class="tooltip-content">
- <p>kedian</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon 100 others">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/cassie"><img src="https://64.media.tumblr.com/8e4d9c6d6f16a703a8b53f567207e797/tumblr_pr19uzHM0S1wmi29do8_250.png" />
- <div class="tooltip-content">
- <p>cassie</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon 100 others">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/cyn"><img src="https://i.pinimg.com/564x/f3/6e/86/f36e866c10182c56cacb993990e53e65.jpg" />
- <div class="tooltip-content">
- <p>halcyon</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon selection others">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/elektra"><img src="https://64.media.tumblr.com/6f102c0a10fe790a08f00b0a54828623/84cd13f7203c78ae-4f/s640x960/237b954401a79a18f7b2f687201f8fec4c1cba20.jpg" />
- <div class="tooltip-content">
- <p>elektra</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon selection others">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/mea"><img src="https://64.media.tumblr.com/1a5365968ba11bcd95ac830e297a1eca/tumblr_pii48tWsVG1xno8b4o2_250.jpg" />
- <div class="tooltip-content">
- <p>mea</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon selection others">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/az"><img src="https://i.pinimg.com/564x/4b/c0/55/4bc055e145bdc1ec64ab57752c656a38.jpg" />
- <div class="tooltip-content">
- <p>azriel</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon selection others">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/leia"><img src="https://i.pinimg.com/originals/3f/ef/05/3fef05f604ca6b148b1eb50154dedb86.png" />
- <div class="tooltip-content">
- <p>leia</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon selection others">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/serene"><img src="https://64.media.tumblr.com/c73a510c89cdb3fcd401dee372c3b7c8/tumblr_ou6y6eaS0X1vzezh1o6_400.png" />
- <div class="tooltip-content">
- <p>serene</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon 1x1 others">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/thea"><img src="https://img.wattpad.com/5feaf2554b3d52f46ec71323f98793525160e640/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f776174747061642d6d656469612d736572766963652f53746f7279496d6167652f315a6f4d414e7171664d657144673d3d2d3731393531353033312e313539353662366233343233653432303138393331393239333239362e6a7067?s=fit&w=720&h=720" />
- <div class="tooltip-content">
- <p>althea</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon 1x1 others">
- <div class="tooltip-wrap">
- <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" />
- <div class="tooltip-content">
- <p>kye</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!--- Start Exmaple Icon --->
- <div id="icons" class="icon 1x1 others">
- <div class="tooltip-wrap">
- <a href="https://sanguine-bliss.tumblr.com/tagged/ash"><img src="https://pkimgcdn.peekyou.com/e7799ae1318f2dc0de36ce3f67860711.jpeg" />
- <div class="tooltip-content">
- <p>ashyvien</p>
- </div>
- </a></div></div>
- <!--- End Exmaple Icon --->
- <!------- END ICONS ------->
- </div>
- <!------- END CONTAINER ------->
- <!------- SCRIPTS: DO NOT EDIT ------->
- <script src="https://static.tumblr.com/zvesamf/1T6okd4xb/imagesloaded.pkgd.min.js"></script>
- <script src="https://static.tumblr.com/fuu6t9w/kh8ml0pl9/jquery-1.7.1.min.js"></script>
- <script src="https://static.tumblr.com/fuu6t9w/eubml0pm0/jquery.isotope.min.js"></script>
- <script>
- $(function(){
- var $container = $('#container');
- $container.isotope({
- itemSelector : '.icon'
- });
- var $optionSets = $('#topbar .option-set'),
- $optionLinks = $optionSets.find('a');
- $optionLinks.click(function(){
- var $this = $(this);
- // don't proceed if already selected
- if ( $this.hasClass('selected') ) {
- return false;
- }
- var $optionSet = $this.parents('.option-set');
- $optionSet.find('.selected').removeClass('selected');
- $this.addClass('selected');
- // make option object dynamically, i.e. { filter: '.my-filter-class' }
- var options = {},
- key = $optionSet.attr('data-option-key'),
- value = $this.attr('data-option-filter');
- // parse 'false' as false boolean
- value = value === 'false' ? false : value;
- options[ key ] = value;
- if ( key === 'layoutMode' && typeof changeLayoutMode === 'function' ) {
- // changes in layout modes need extra logic
- changeLayoutMode( $this, options )
- } else {
- // otherwise, apply new options
- $container.isotope( options );
- }
- return false;
- });
- $grid.imagesLoaded().progress( function() {
- $grid.isotope('layout');
- });
- });
- </script>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment