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">
- <head>
- <title>{Title}</title>
- <link rel="shortcut icon" href="{Favicon}" />
- <link rel="alternate" type="application/rss+xml" href="{RSS}">
- {block:Description}
- <meta name="description" content="{MetaDescription}" />
- {/block:Description}
- <!--------------------------------------------
- TAGS PAGE #02 by INQUISITORISMAGE.tumblr.com
- You can edit the page but please don't be a thief and LEAVE the CREDIT.
- Do NOT use parts of my code for your own purposes.
- -------------------------------------------->
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
- <script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
- <script>
- (function($){
- $(document).ready(function(){
- $("[title]").style_my_tooltips({
- tip_follows_cursor:true,
- tip_delay_time:200,
- tip_fade_speed:300
- }
- );
- });
- })(jQuery);
- </script>
- <style type="text/css">
- ::-webkit-scrollbar {
- width:5px;
- height:5px;
- background: #fff;
- }
- ::-webkit-scrollbar-thumb:vertical {
- height:5px;
- background: #e0e0e0;
- }
- ::-webkit-scrollbar-thumb:horizontal {
- height:5px;
- background: #e0e0e0;
- }
- #s-m-t-tooltip {
- z-index: 99999;
- position: absolute;
- background-color: #f5f5f5;
- padding: 5px;
- padding-bottom: 3px;
- padding-top: 3px;
- max-width: 300px;
- margin-top: 20px;
- margin-left: 10px;
- display: inline-block;
- text-transform: uppercase;
- font-style: ;
- font-family: consolas;
- font-size: 8px;
- color: #a0a0a0;
- letter-spacing: 3px;
- }
- body {
- background-image:url('');
- background-position:fixed;
- background-color: #fafafa;
- text-align: center;
- font-family: calibri;
- text-transform: uppercase;
- font-size: 8px;
- letter-spacing: 2px;
- line-height: 150%;
- }
- a, a:visited {
- text-decoration: none;
- -webkit-transition: 0.5s linear;
- -moz-transition: 0.5s linear;
- -o-transition: 0.5s linear;
- color: #cacaca;
- }
- a:hover, a:active {
- text-decoration: none;
- -webkit-transition: 0.5s linear;
- -moz-transition: 0.5s linear;
- -o-transition: 0.5s linear;
- color: #999;
- }
- .content {
- margin: auto;
- width: 540px;
- }
- .portrait img {
- width: 40px;
- height: 40px;
- border: 7px solid #f7f7f7;
- outline: 1px solid #f0f0f0;
- }
- .portrait {
- margin-top: 70px;
- width: auto;
- /* If you want to remove the spin animation, get rid of everything starting from here... */
- -webkit-transform: perspective(150px) rotate(0deg);
- -moz-transform: perspective(150px) rotate(0deg);
- -o-transform: perspective(150px) rotate(0deg);
- -webkit-transition: all .5s ease-in-out;
- -moz-transition: all .5s ease-in-out;
- -o-transition: all .5s ease-in-out;
- transition: all .5s ease-in-out;
- }
- .portrait img:hover {
- -webkit-transform: perspective(150px) rotate(360deg);
- -moz-transform: perspective(150px) rotate(360deg);
- -o-transform: perspective(150px) rotate(360deg);
- -webkit-transition: all .5s ease-in-out;
- -moz-transition: all .5s ease-in-out;
- -o-transition: all .5s ease-in-out;
- transition: all .5s ease-in-out;
- /* ...all the way to here. This way the icon won't do the spinning thing when you hover over it. */
- }
- .colorbar {
- height: 4px;
- width: 500px;
- margin-left: 20px;
- margin-top: 47px;
- position: absolute;
- }
- .colorbarpart {
- width: 25%;
- height: 4px;
- float: left;
- }
- .navi {
- position: absolute;
- width: 500px;
- background-color: #222;
- letter-spacing: 1px;
- margin-top: 10px;
- padding-top: 12px;
- text-align: center;
- height: 25px;
- margin-left: 20px;
- -webkit-border-top-left-radius: 25px;
- -webkit-border-top-right-radius: 25px;
- -moz-border-radius-topleft: 25px;
- -moz-border-radius-topright: 25px;
- border-top-left-radius: 25px;
- border-top-right-radius: 25px;
- }
- .navi a {
- margin: 4px;
- border: px dotted #eee;
- color: #eaeaea;
- text-align: center;
- background-color: #333;
- padding: 4px;
- -moz-transition-duration: 0.5s;
- -o-transition-duration: 0.5s;
- -webkit-transition-duration: 0.5s;
- transition-duration: 0.5s;
- }
- .navi a:hover {
- -moz-transition-duration: 0.5s;
- -o-transition-duration: 0.5s;
- -webkit-transition-duration: 0.5s;
- transition-duration: 0.5s;
- color: #888;
- }
- .table {
- margin-top: 42px;
- }
- .tagtitle {
- font-family: cambria;
- text-align: center;
- display: block;
- line-height: 13px;
- width: 145px;
- height: 16px;
- font-weight: normal;
- font-size: 10px;
- letter-spacing: 1px;
- text-transform: lowercase;
- border-bottom: 1px solid #dc6e97;
- color: #c0c0c0;
- margin-bottom: 8px;
- margin-top: 18px;
- }
- form {
- margin-top: 10px;
- width: 500px;
- }
- .search {
- padding: 5px 15px 5px 15px;
- }
- .rounded {
- border-radius:15px;
- -moz-border-radius:15px;
- -webkit-border-radius:15px;
- }
- input[type=text] {
- color:#bcbcbc;
- width: 180px;
- }
- input[type=submit], input[type=submit]:hover {
- position: relative;
- padding: 6px;
- padding-top: 4px;
- padding-bottom: 4px;
- left: 8px;
- border: 1px solid #e0e0e0;
- background: #eee;
- color: #aaa;
- cursor: pointer;
- font-family: cambria;
- font-size: 9px;
- letter-spacing: 1px;
- text-transform: lowercase;
- }
- .searchtags input[type=text] {
- border: 1px solid #ddd;
- background-color: #fcfcfc;
- font-family: calibri;
- font-size: 8px;
- letter-spacing: 1px;
- text-transform: uppercase;
- }
- .xxx {
- -webkit-border-radius: 50px;
- -moz-border-radius: 50px;
- border-radius: 50px;
- position: fixed;
- bottom: 10px;
- right: 10px;
- background-color: #ff5a49;
- height: 30px;
- width: 30px;
- }
- .xxx a {
- background: transparent;
- text-transform: lowercase;
- color: #fff;
- font-style: italic;
- font-family: georgia;
- font-size: 17px;
- letter-spacing: -1px;
- margin-left: -2px;
- line-height: 27px;
- }
- </style>
- </head>
- <body>
- <div class="content">
- <!---------------------------------------------------
- The image that displays here is your
- avatar. If you want to use another
- image, replace {PortraitURL-40} with
- the URL of the image you want.
- ---------------------------------------------------->
- <div class="portrait">
- <img src="{PortraitURL-40}">
- </div>
- <!---------------------------------------------------
- You can customize the navigation links
- here. Add more or remove some or do
- whatever you want!
- ---------------------------------------------------->
- <div class="navi">
- <a href="/">home</a>
- <a href="/ask">ask</a>
- <a href="http://www.tumblr.com" target="_blank">dash</a>
- </div>
- <!---------------------------------------------------
- Here's the color bar. If you want
- different colors, just replace the
- hex codes after background-color:.
- ---------------------------------------------------->
- <div class="colorbar">
- <div class="colorbarpart" style="background-color:#f683d2;"></div>
- <div class="colorbarpart" style="background-color:#ea51b9;"></div>
- <div class="colorbarpart" style="background-color:#c8008a;"></div>
- <div class="colorbarpart" style="background-color:#a614b7;"></div>
- </div>
- <div class="table">
- <table cellspacing="35" style="margin-left: -22px;">
- <tr>
- <!----------------------------
- BEGIN COLUMN 1
- The column begins with <td> and ends with </td>.
- You can make a heading with
- <div class="tagtitle">heading here</div>.
- Tags go between <a href="/tagged/"> and </a>.
- Tag names and URLs are the same, for example
- <a href="/tagged/HEY">HEY</a>
- or <a href="/tagged/THIS-IS-A-TAG">THIS IS A TAG</a>.
- ----------------------------->
- <td valign="top">
- <div class="tagtitle">
- title here
- </div>
- <a href="/tagged/" target="_blank">tag</a>
- <br>
- <a href="/tagged/" target="_blank">tag</a>
- <br>
- <a href="/tagged/" target="_blank">tag</a>
- <br>
- <a href="/tagged/" target="_blank">tag</a>
- <br>
- <a href="/tagged/" target="_blank">tag</a>
- <br>
- <a href="/tagged/" target="_blank">tag</a>
- <br>
- <a href="/tagged/" target="_blank">tag</a>
- <br>
- <div class="tagtitle">
- title here
- </div>
- <a href="/tagged/" target="_blank">tag</a>
- <br>
- <a href="/tagged/" target="_blank">tag</a>
- <br>
- <a href="/tagged/" target="_blank">tag</a>
- <br>
- <div class="tagtitle">
- title here
- </div>
- <a href="/tagged/" target="_blank">tag</a>
- <br>
- <a href="/tagged/" target="_blank">tag</a>
- <br>
- <a href="/tagged/" target="_blank">tag</a>
- <br>
- <a href="/tagged/" target="_blank">tag</a>
- <br>
- <a href="/tagged/" target="_blank">tag</a>
- <br>
- </td>
- <!----------------------------
- BEGIN COLUMN 2
- The column begins with <td> and ends with </td>.
- You can make a heading with
- <div class="tagtitle">heading here</div>.
- Tags go between <a href="/tagged/"> and </a>.
- Tag names and URLs are the same, for example
- <a href="/tagged/HEY">HEY</a>
- or <a href="/tagged/THIS-IS-A-TAG">THIS IS A TAG</a>.
- ----------------------------->
- <td valign="top">
- <div class="tagtitle">
- title here
- </div>
- <a href="/tagged/" target="_blank">tag</a>
- <br>
- <a href="/tagged/" target="_blank">tag</a>
- <br>
- <a href="/tagged/" target="_blank">tag</a>
- <br>
- <a href="/tagged/" target="_blank">tag</a>
- <br>
- <div class="tagtitle">
- title here
- </div>
- <a href="/tagged/" target="_blank">tag</a>
- <br>
- <a href="/tagged/" target="_blank">tag</a>
- <br>
- <a href="/tagged/" target="_blank">tag</a>
- <br>
- <a href="/tagged/" target="_blank">tag</a>
- <br>
- <a href="/tagged/" target="_blank">tag</a>
- <br>
- <div class="tagtitle">
- title here
- </div>
- <a href="/tagged/" target="_blank">tag</a>
- <br>
- <a href="/tagged/" target="_blank">tag</a>
- <br>
- <a href="/tagged/" target="_blank">tag</a>
- <br>
- <a href="/tagged/" target="_blank">tag</a>
- <br>
- <a href="/tagged/" target="_blank">tag</a>
- <br>
- <a href="/tagged/" target="_blank">tag</a>
- <br>
- </td>
- <!----------------------------
- BEGIN COLUMN 3
- The column begins with <td> and ends with </td>.
- You can make a heading with
- <div class="tagtitle">heading here</div>.
- Tags go between <a href="/tagged/"> and </a>.
- Tag names and URLs are the same, for example
- <a href="/tagged/HEY">HEY</a>
- or <a href="/tagged/THIS-IS-A-TAG">THIS IS A TAG</a>.
- ----------------------------->
- <td valign="top">
- <div class="tagtitle">
- title here
- </div>
- <a href="/tagged/" target="_blank">tag</a>
- <br>
- <a href="/tagged/" target="_blank">tag</a>
- <br>
- <a href="/tagged/" target="_blank">tag</a>
- <br>
- <a href="/tagged/" target="_blank">tag</a>
- <br>
- <a href="/tagged/" target="_blank">tag</a>
- <br>
- <div class="tagtitle">
- title here
- </div>
- <a href="/tagged/" target="_blank">tag</a>
- <br>
- <a href="/tagged/" target="_blank">tag</a>
- <br>
- <a href="/tagged/" target="_blank">tag</a>
- <br>
- <a href="/tagged/" target="_blank">tag</a>
- <br>
- <a href="/tagged/" target="_blank">tag</a>
- <br>
- <a href="/tagged/" target="_blank">tag</a>
- <br>
- <a href="/tagged/" target="_blank">tag</a>
- <br>
- <div class="tagtitle">
- title here
- </div>
- <a href="/tagged/" target="_blank">tag</a>
- <br>
- <a href="/tagged/" target="_blank">tag</a>
- <br>
- <a href="/tagged/" target="_blank">tag</a>
- <br>
- </td>
- </tr>
- </table>
- </div>
- <!---------------------------------------------------
- SEARCH BOX
- You can change the box text to something
- else if you like, just replace 'looking
- for another tag?' with whatever you want,
- or you can even remove it completely.
- ---------------------------------------------------->
- <div class="searchtags">
- <form action="/search" method="get">
- <span>
- <input type="text" class="search rounded" name="q" value="{SearchQuery}" placeholder="looking for another tag?"/><input type="submit" value="Search"/>
- </span>
- </form>
- </div>
- </div>
- </div>
- <div class="xxx">
- <a href="http://inquisitorismage.tumblr.com" target="_blank" title="page by inquisitorismage">iim</a>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement