Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <head>
- <!--
- PAGE #6 by Anomaly ☾ tumblr user xollyx ☽ : SPRINGING FORWARD !!
- - i made the base code
- - all in one tabs by neonbikethemes
- - please abide by all the rules
- 【 All themes and pages can be found here : http://xollyx.tumblr.com/thm 】
- Thank you for using! Or just looking at the code. Whatever you're here for. Either way, it's appreciated!
- Feel free to message me if you need any help, my ask box is always open!
- -->
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
- <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
- <script>
- (function($){
- $(document).ready(function(){
- $("a[title]").style_my_tooltips({
- tip_follows_cursor:true,
- tip_delay_time:90,
- tip_fade_speed:600,
- attribute:"title"
- });
- });
- })(jQuery);
- </script>
- <title>{Title}</title>
- <link rel="shortcut icon" href="IMAGE URL HERE">
- <link rel="alternate" type="application/rss+xml" href="{RSS}">
- {block:Description}<meta name="description" content="{MetaDescription}" />{/block:Description}
- <style type="text/css">
- @font-face { font-family: "snickles"; src: url('https://dl.dropboxusercontent.com/s/u0qguc9dnof931w/Snickles.ttf?dl=0'); format("truetype");}
- @font-face { font-family: "tinytots"; src: url('https://dl.dropboxusercontent.com/s/y0pfz7ndq83n7j7/04b_03_.ttf?dl=1'); format(“truetype”);}
- ::-webkit-scrollbar {
- width: 9px;
- height: 4px;
- background:#808080;
- border:4px solid #fff;
- }
- ::-webkit-scrollbar-thumb {
- background-color:#b8bcf8;
- border-radius:5px;
- }
- #s-m-t-tooltip {
- max-width:300px;
- margin:10px 0px 0px 10px;
- background-color:#000;
- font-family:tinytots;
- font-size:8px;
- padding:3px;
- color:#fff;
- z-index:999999999999999999999999999999999999;
- }
- #s-m-t-tooltip:after {
- position: absolute;
- display: block; content: "";
- border-color: transparent #000 transparent transparent ;
- border-style: solid;
- border-width: 5px;
- height:0;
- width:0;
- position:absolute;
- top:3px;
- left:-10px;
- }
- ::selection {
- background: #000;
- color: #fff;
- }
- ::-moz-selection {
- background: #000;
- color: #fff;
- }
- ::-webkit-selection {
- background: #000;
- color: #fff;
- }
- body {
- background:#a9a9a9;
- background-image:url('IMAGE URL HERE');
- background-attachment:fixed;
- {block:ifbgcover}
- background-repeat:no-repeat;
- background-size:cover;
- {/block:ifbgcover}
- color:#000;
- font-family:arial;
- font-size:12px;
- }
- a {
- color:#808080;
- text-decoration:none;
- }
- a:hover {
- color:#696969;
- -webkit-transition: all .8s;
- -moz-transition: all .8s;
- -o-transition: all .8s;
- -ms-transition: all .8s;
- transition: all .8s;
- }
- ul, ol, li {
- list-style-type:bullet;
- list-style-image: url('IMAGE URL HERE');
- text-align:left;
- }
- .border {
- position:fixed;
- width:530px;
- left:calc(25% - 10px);
- top:40px;
- padding:10px;
- height:calc(80% + 25px);
- background:#C0C0C0;
- background-image:url('IMAGE URL HERE');
- }
- .tabcontent {
- float:left;
- display:block;
- position:relative;
- left:25%;
- top:50px;
- padding:10px;
- width:500px;
- height:80%;
- background-color:#fff;
- overflow-x:none;
- overflow-y:auto;
- z-index:9999;
- }
- .tabs {
- width:100%;
- margin-left:0px;
- display:inline-block;
- }
- .tab-links:after {
- display:block;
- clear:both;
- content:'';
- }
- .tab-links li {
- margin-right:5px;
- display:inline-block;
- list-style:none;
- text-transform:uppercase;
- }
- .tab-links a {
- display:inline-block;
- transition:all linear 0.15s;
- }
- .tab-links a:hover {
- text-decoration:none;
- }
- li.active a, li.active a:hover {
- background:transparent;
- -webkit-transition: all .3s;
- -moz-transition: all .3s;
- -o-transition: all .3s;
- -ms-transition: all .3s;
- transition: all .3s;
- }
- .tab-content {
- }
- .tab {
- display:none;
- }
- .tab.active {
- display:block;
- }
- #links {
- position:fixed;
- top:75px;
- left:10%;
- z-index:2;
- }
- #links img {
- width:150px;
- height:150px;
- }
- #links2 {
- position:fixed;
- left:calc(25% + 600px);
- top:150px;
- font-size:50px;
- text-shadow:0px 0px 7px #DCDCDC;
- z-index:2;
- }
- #links2 a:hover {
- text-shadow:0px 0px 14px #DCDCDC;
- -webkit-filter:blur(1px);
- }
- #corner1 {
- position:fixed;
- top:0px;
- left:0px;
- border-left: 0px solid transparent;
- border-right: 100px solid transparent;
- border-top: 100px solid #000;
- }
- #line1 {
- position:fixed;
- top:-300px;
- left:125px;
- width:25px;
- height:100%;
- background: #000;
- -ms-transform: rotate(45deg); /* IE 9 */
- -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
- transform: rotate(45deg);
- }
- #line2 {
- position:fixed;
- bottom:-300px;
- right:125px;
- width:25px;
- height:100%;
- background: #000;
- -ms-transform: rotate(45deg); /* IE 9 */
- -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
- transform: rotate(45deg);
- }
- #corner2 {
- position:fixed;
- bottom:0px;
- right:0px;
- border-left: 100px solid transparent;
- border-right: 0px solid transparent;
- border-bottom: 100px solid #000;
- }
- .credit {
- position:fixed;
- bottom:4px;
- left:8px;
- font: 9px consolas;
- text-transform:uppercase;
- letter-spacing: 0px;
- padding: 2px;
- }
- </style>
- <body>
- <div id="corner1"></div><div id="line1"></div>
- <div id="corner2"></div><div id="line2"></div>
- <div id="links">
- <div class="tabs">
- <ul class="tab-links">
- <li class="active"><a href="tag category 1" title="personal"><img src="IMAGE URL HERE"></a></li>
- <p>
- <li><a href="#tab2" title="tag category 2"><img src="IMAGE URL HERE"></a></li>
- <br><br>
- <li><a href="#tab3" title="tag category 3"><img src="IMAGE URL HERE"></a></li>
- </ul>
- </div>
- </div>
- </div>
- </div>
- <div id="links2">
- <a href="/" title="back home">✿</a><br>
- <a href="/ask" title="message me">✿</a><br>
- <a href="/submit" title="submit">✿</a><br>
- <a href="/about" title="about">✿</a><br>
- <a href="/" title="link 1">✿</a><br>
- <a href="/" title="link 2">✿</a><br>
- </div>
- <div class="border"></div>
- <!-- --------------------------- TABS -------------------------- -->
- <div class="tabs">
- <!-- --------------------------- TAB 1 -------------------------- -->
- <div class="tab-content">
- <div id="tab1" class="tab active">
- <div class="tabcontent">
- <center>
- <div style="font-family: snickles; width:500px; font-size:24px;
- ">Tag Category 1</div>
- </center>
- <p>
- <li><a href="/tagged/">example tag here</a></li>
- </div>
- </div>
- </div>
- <!-- -------------------------- TAB 2 -------------------------- -->
- <div id="tab2" class="tab">
- <div class="tabcontent">
- <center>
- <div style="font-family: snickles; width:500px; font-size:24px; ">Tag Category 2</div>
- </center>
- <li><a href="/tagged/">example tag here</a></li>
- </div>
- </div>
- <!-- -------------------------- TAB 3 -------------------------- -->
- <div id="tab3" class="tab">
- <div class="tabcontent">
- <center>
- <div style="font-family: snickles; width:500px; font-size:24px;">Tag Category 3</div>
- </center>
- <li><a href="/tagged/">example tag here</a></li>
- </div>
- </div>
- <!-- END OF TABS -->
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- TABS/ALL-INN-ONE SCRIPTS DO NOT REMOVE!!! -->
- <script>
- $(document).ready(function() {
- $('.tabs .tab-links a').on('click', function(e) {
- var currentAttrValue = $(this).attr('href');
- // Show/Hide Tabs
- $('.tabs ' + currentAttrValue).fadeIn(600).siblings().hide();
- // Change/remove current tab to active
- $(this).parent('li').addClass('active').siblings().removeClass('active');
- e.preventDefault();
- });
- });
- </script>
- <script>
- $(document).ready(function() {
- $('#filterOptions li a').click(function() {
- // fetch the class of the clicked item
- var ourClass = $(this).attr('class');
- // reset the active class on all the buttons
- $('#filterOptions li').removeClass('active');
- // update the active state on our clicked button
- $(this).parent().addClass('active');
- if(ourClass == 'all') {
- // show all our items
- $('#ourHolder').children('div.item').show();
- }
- else {
- // hide all elements that don't share ourClass
- $('#ourHolder').children('div:not(.' + ourClass + ')').hide();
- // show all elements that do share ourClass
- $('#ourHolder').children('div.' + ourClass).show();
- }
- return false;
- });
- });
- </script>
- <div style="position:fixed; right:0px; bottom:-50px; z-index:1;"><img src="IMAGE URL HERE; REMOVE THIS CODE IF YOU DON'T WANT A RENDER" width="500px"></div>
- <div class="credit"><a href="http://xollyx.tumblr.com/" title="theme"><img src="http://orig04.deviantart.net/151c/f/2015/334/6/e/tumblr_inline_mij52fv1gc1qz4rgp_by_kittystuff-d9il7w5.gif" /></a></div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement