Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
- <!---
- airmid by solarre
- -keep credit intact
- -don't steal any code
- filler icons by kotei
- --->
- <head>
- <title>icons</title>
- <link rel="shortcut icon" href="{Favicon}">
- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
- <script src="//static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
- <script>
- (function($){
- $(document).ready(function(){
- $("[title]").style_my_tooltips({
- tip_follows_cursor:true,
- tip_delay_time:1,
- tip_fade_speed:100,
- attribute:"title"
- });
- });
- })(jQuery);
- </script>
- <script>
- $(document).ready(function(){
- $(".filters").click(function(e) {
- e.preventDefault();
- $(".icon").not("." + $(this).attr("rel")).hide(500);
- $("." + $(this).attr("rel")).show(500);
- });
- });
- </script>
- <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.1/SmoothScroll.min.js"></script>
- <style type="text/css">
- @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
- @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
- @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
- .fade-in {
- opacity:0;
- -webkit-animation:fadeIn ease-in 1;
- -moz-animation:fadeIn ease-in 1;
- animation:fadeIn ease-in 1;
- -webkit-animation-fill-mode:forwards;
- -moz-animation-fill-mode:forwards;
- animation-fill-mode:forwards;
- -webkit-animation-duration:1s;
- -moz-animation-duration:1s; animation-duration:1s; }
- .fade-in.one { -webkit-animation-delay: 0.7s; -moz-animation-delay: 0.7s; animation-delay: 0.7s; }
- .fade-in.two { -webkit-animation-delay: 1.2s; -moz-animation-delay: 1.2s; animation-delay: 1.2s; }
- #s-m-t-tooltip {
- max-width:300px;
- padding: 5px 8px;
- margin:10px;
- background-color:#fff;
- font-size:8px;
- letter-spacing:1px;
- text-transform:uppercase;
- color:#777;
- border-radius:2px;
- border:1px solid #f7f7f7;
- z-index:10000000000000000000000000000000000000000000000000;
- transition:0.5s ease-in-out;
- -webkit-transition:0.5s ease-in-out;
- -moz-transition:0.5s ease-in-out;
- -ms-transition:0.5s ease-in-out;
- -o-transition:0.5s ease-in-out;
- }
- ::-webkit-scrollbar {width:11px; height:auto; background:#fff;}
- ::-webkit-scrollbar-corner {background:transparent;}
- ::-webkit-scrollbar-thumb:vertical {background:#eee; width:1px; border:5px solid #fff;}
- ::-webkit-scrollbar-thumb:horizontal {background:#eee;height:4px !important;}
- ::-webkit-scrollbar-increment {width:4px; height:4px; background-color:#fff;}
- iframe#tumblr_controls, iframe.tmblr-iframe.tmblr-iframe--desktop-loggedin-controls.iframe-controls--desktop, .tmblr-iframe {
- position:fixed;
- wh-space:nowrap;
- -webkit-filter: invert(100%);
- -moz-filter: invert(100%);
- -o-filter: invert(100%);
- -ms-filter: invert(100%);
- filter: invert(100%);
- opacity:.7;
- }
- body {
- background:#fff;
- margin:0px;
- color:#222;
- font:10px calibri;
- line-height:15px;
- -moz-font-smoothing:subpixel-antialiased;
- -webkit-font-smoothing:subpixel-antialiased;
- font-smoothing:subpixel-antialiased;
- }
- a {
- text-decoration:none;
- color:#777; /* color of links */
- -moz-outline-style:none;
- transition:0.5s ease-in-out;
- -webkit-transition:0.5s ease-in-out;
- -moz-transition:0.5s ease-in-out;
- -ms-transition:0.5s ease-in-out;
- -o-transition:0.5s ease-in-out;
- }
- a:hover {color:#eee;} /* color of links on hover */
- img {border:none;max-width:100%;height:auto;}
- #header {
- height:auto;
- padding:20px;
- z-index:2;
- margin:50px auto 0;
- width:400px;
- }
- .title {
- font:lighter 12px calibri;
- text-transform:uppercase;
- display:block;
- width:300px;
- margin:4px auto;
- letter-spacing:5px;
- text-indent:5px;
- padding-top:10px;
- text-align:center;
- line-height:130%;
- }
- .title a {color:#333;}
- .desc {
- font-size:10px;
- text-align:center;
- line-height:125%;
- letter-spacing:0.5px;
- height:auto;
- padding:10px;
- color:#333;
- }
- .links {
- height:auto;
- width:auto;
- margin-bottom:-15px;
- padding:0px 0 10px;
- text-align:center;
- font-size:10px;
- text-transform:none;
- }
- .links a {display:inline-block;padding:2px 5px;}
- a.filters {padding:7px 3px 2px;}
- #content {
- width:720px;
- padding:50px;
- margin:auto auto 30px;
- z-index:5;
- text-align:center;
- }
- .icon {
- width:80px;
- height:80px;
- border:1px solid #f8f8f8;
- border-radius:2px;
- padding:8px;
- display:inline-block;
- margin:10px;
- }
- .icon img {width:80px;height:80px;border-radius:2px;display:inline-block;}
- .icon img[width] {max-width:none;}
- #credit, #credit a {
- position:fixed;
- bottom:20px;
- right:20px;
- color:{color:text};
- font:normal normal 12px calibri;
- text-decoration:none;
- }
- </style></head><body>
- <div id="header" class="box fade-in one">
- <div class="title">icons</div>
- <!-- ya description -->
- <div class="desc">lorem ipsum</div>
- <!-- ya links -->
- <div class="links">
- <a href="/">index</a> ∙ <a href="/ask">ask</a>
- <br>
- <!-- ya filters
- format is:
- <a href="#" rel="whatuwannatagitas" class="filters">filter name</a>
- so icons w/ <div class="icon pk"> would be shown when u click on the link w/ rel="pk"
- you'll figure it out i believe in u
- -->
- <a href="#" rel="icon" class="filters">all</a>
- <a href="#" rel="pk" class="filters">pink</a>
- <a href="#" rel="yl" class="filters">yellow</a>
- <a href="#" rel="gr" class="filters">green</a>
- <a href="#" rel="bl" class="filters">blue</a>
- <a href="#" rel="fl" class="filters">faceless</a>
- <a href="#" rel="fm" class="filters">femme</a>
- <a href="#" rel="hm" class="filters">homme</a>
- </div>
- </div>
- <div id="content" class="box fade-in two">
- <!---
- format is:
- <div class="icon whatuwannatagitas"><img src="imgURL"></div>
- u can prob figure it out from the filler icons below
- --->
- <div class="icon"><img src=""></div>
- <div class="icon"><img src=""></div>
- <div class="icon"><img src=""></div>
- <div class="icon"><img src=""></div>
- <div class="icon"><img src=""></div>
- <div class="icon"><img src=""></div>
- <div class="icon wh fm"><img src="http://static.tumblr.com/vmteopo/JPbo43xqx/g.jpg"></div>
- <div class="icon fm fl"><img src="http://static.tumblr.com/vmteopo/5Xqo6oyea/eslee.png"></div>
- <div class="icon hm fl"><img src="http://static.tumblr.com/vmteopo/Ol5o6vis7/i_need_u.jpg"></div>
- <div class="icon fl bl"><img src="http://static.tumblr.com/vmteopo/1f0o0evzm/drowning.png"></div>
- <div class="icon fm gr"><img src="http://static.tumblr.com/vmteopo/dGVo43s8v/ye_fei2.jpg"></div>
- <div class="icon gr fl fm"><img src="http://static.tumblr.com/vmteopo/XOanzs6tq/akaya.png"></div>
- <div class="icon fl yl"><img src="http://static.tumblr.com/vmteopo/9vMo6n5u3/kinfolk_best_medicine.png"></div>
- <div class="icon pl fl"><img src="http://static.tumblr.com/vmteopo/Eaio6p5sg/braidsa.jpg"></div>
- <div class="icon fl fm"><img src="http://static.tumblr.com/vmteopo/MAso6oyxe/cherieloup.png"></div>
- <div class="icon fm"><img src="http://static.tumblr.com/vmteopo/3rEo5z653/jimabaji2.png"></div>
- <div class="icon fm wh"><img src="http://static.tumblr.com/vmteopo/DS5o5z80g/a_rooki2.jpg"></div>
- <div class="icon wh hm"><img src="http://static.tumblr.com/vmteopo/wRGo5z80n/han_seungsoo.png"></div>
- </div>
- <div id="credit"><a href="http://solarre.tumblr.com" title="solarre">☼</a></div>
- </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement