Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- <head>
- <!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">
- <!--------------------------------------------
- SCOTTISBAE THEMES # 145
- THEME BY: http://scottisbae.tumblr.com/ (PREV BRITISHROBERT)
- RULES, IMPORTANT: DON'T REMOVE THE CREDIT // DON'T CLAIM AS YOUR OWN // DON'T USE AS A BASE
- --------------------------------------------->
- <title>{Title}</title>
- <link rel="shortcut icon" href="{Favicon}">
- <link rel="altertnate" type="application/rss+xml" href="{RSS}">
- <meta name="description" content="" />
- <meta http-equiv="x-dns-prefetch-control" content="off"/>
- <link href='http://fonts.googleapis.com/css?family=Merriweather+Sans:400,700' rel='stylesheet' type='text/css'>
- <link href='http://fonts.googleapis.com/css?family=Josefin+Slab:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
- <link href='http://fonts.googleapis.com/css?family=Kotta+One' rel='stylesheet' type='text/css'>
- <link href='http://fonts.googleapis.com/css?family=Junge' rel='stylesheet' type='text/css'>
- <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'>
- <script type="text/javascript"
- src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
- <script>
- $(document).ready(function() {
- //
- $('a.poplight[href^=#]').click(function() {
- var popID = $(this).attr('rel'); //Get Popup Name
- var popURL = $(this).attr('href'); //Get Popup href to define size
- var query= popURL.split('?');
- var dim= query[1].split('&');
- var popWidth = dim[0].split('=')[1]; //Gets the first query string value
- $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<a href="#" class="close"></a>');
- var popMargTop = ($('#' + popID).height() + 80) / 2;
- var popMargLeft = ($('#' + popID).width() + 80) / 2;
- //Apply Margin to Popup
- $('#' + popID).css({
- 'margin-top' : -popMargTop,
- 'margin-left' : -popMargLeft
- });
- $('body').append('<div id="fade"></div>');
- $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'})
- return false;
- });
- $('a.close, #fade').live('click', function() {
- $('#fade , .popup_block').fadeOut(function() {
- $('#fade, a.close').remove(); //fade them both out
- });
- return false;
- });
- });
- </script>
- <style type="text/css">
- ::-webkit-scrollbar {background-color: transparent; height:4px; width:3px}
- ::-webkit-scrollbar-thumb:vertical {background-color:#000000; height:50px}
- ::-webkit-scrollbar-thumb:horizontal {background-color:#FFFFFF; height:8px!important}
- #fade {
- display: none;
- background: #fff;
- position: fixed;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- opacity:0;
- z-index: 9999;
- }
- #char1 {
- height:300px;
- font-size:11px;
- font-family:arial;
- letter-spacing:0px;
- padding-bottom:5px;
- text-transform:;
- text-align:justify;
- margin-top:25px;
- }
- #char2 {
- height:300px;
- font-size:11px;
- font-family:arial;
- letter-spacing:0px;
- padding-bottom:5px;
- text-transform:;
- text-align:justify;
- margin-top:25px;
- }
- #char3 {
- height:300px;
- font-size:11px;
- font-family:arial;
- letter-spacing:0px;
- padding-bottom:5px;
- text-transform:;
- text-align:justify;
- margin-top:25px;
- }
- #char4 {
- height:300px;
- font-size:11px;
- font-family:arial;
- letter-spacing:0px;
- padding-bottom:5px;
- text-transform:;
- text-align:justify;
- margin-top:25px;
- }
- #char5 {
- height:300px;
- font-size:11px;
- font-family:arial;
- letter-spacing:0px;
- padding-bottom:5px;
- text-transform:;
- text-align:justify;
- margin-top:25px;
- }
- #char6 {
- height:300px;
- font-size:11px;
- font-family:arial;
- letter-spacing:0px;
- padding-bottom:5px;
- text-transform:;
- text-align:justify;
- margin-top:25px;
- }
- #char7 {
- height:300px;
- font-size:11px;
- font-family:arial;
- letter-spacing:0px;
- padding-bottom:5px;
- text-transform:;
- text-align:justify;
- margin-top:25px;
- }
- #char8 {
- height:300px;
- font-size:11px;
- font-family:arial;
- letter-spacing:0px;
- padding-bottom:5px;
- text-transform:;
- text-align:justify;
- margin-top:25px;
- }
- .popup_block{
- display: none;
- background: #FFFFFF;
- padding: 20px;
- float: left;
- position: fixed;
- top: 48%;
- left: 51%;
- z-index: 99999;
- outline:2px solid #f0f0f0;
- overflow-y:scroll;
- overflow-x:hidden;
- }
- img.btn_close {
- float: right;
- margin: -55px -55px 0 0;
- }
- *html #fade {
- position: absolute;
- }
- *html .popup_block {
- position: absolute;
- }
- .border {
- margin-left:0px;
- border-bottom: 1px solid #F4F4F4;
- width:80px;
- }
- body {
- color: {color:Text};
- background-color:#FFFFFF;
- }
- a {
- color: #444;
- text-decoration: none;
- -moz-transition-duration: 0.5s;
- -o-transition-duration: 0.5s;
- -webkit-transition-duration: 0.5s;
- transition-duration: 0.5s;
- }
- a:hover {
- color: #9d9d9d;
- -moz-transition-duration: 0.5s;
- -o-transition-duration: 0.5s;
- -webkit-transition-duration: 0.5s;
- transition-duration: 0.5s;
- }
- .sidebar {
- margin:auto;
- top:10px;
- margin-left:0px;
- }
- .part1 {
- padding:5px;
- top:30px;
- margin:auto;
- }
- .table1 {
- width:200px;
- padding:0px 5px 5px 5px;
- border-right: 0px solid #F5F5F5;
- }
- .links1 {
- width:500px;
- text-transform:uppercase;
- letter-spacing: 0px;
- font-family: arial;
- font-size:8px;
- letter-spacing:1px;
- text-align:left;
- padding:4px;
- line-height:290%;
- margin: 15px 0 6px 120px;
- color:#262626;
- }
- .links1 a {
- border-bottom: 1px solid #f0f0f0;
- padding:3px;
- }
- .links1 a:hover {
- -moz-transition-duration: 0.5s;
- -o-transition-duration: 0.5s;
- -webkit-transition-duration: 0.5s;
- transition-duration: 0.5s;
- }
- .container {
- width:800px;
- height:auto;
- position:relative;
- margin:auto;
- top: 20px;
- bottom:0px;
- left:1px;
- border: 0px solid #f0f0f0;
- }
- .chars {
- width:600px;
- height:auto;
- position:relative;
- margin:auto;
- top:-10px;
- bottom:0px;
- left:1px;
- border: 0px solid #000;
- }
- .table {
- width:120px;
- height:auto;
- position:relative;
- margin-left:20px;
- text-align:center;
- margin-top:28px;
- display:inline-block;
- border: 0px solid #f0f0f0;
- }
- .image {
- width:80px;
- padding:3px;
- outline:1px solid #f0f0f0;
- border-left:3px solid #fff;
- border-right:3px solid #fff;
- border-bottom:25px solid #fff;
- }
- .name {
- width:120px;
- font-size:8px;
- font-family:arial;
- letter-spacing:1px;
- margin-top:2px;
- padding-top:5px;
- padding-bottom:5px;
- text-align:center;
- text-transform:uppercase;
- font-weight:;
- color:#000;
- background-color:;
- border-bottom: 0px solid #f0f0f0;
- }
- .credit {
- position:fixed;
- font-family:calibri;
- font-size:8px;
- font-weight:normal;
- line-height:150%;
- letter-spacing:0px;
- right:5px;
- bottom:20px;
- text-transform:uppercase;
- text-align:center;
- }
- .credit a {
- font-style:normal;
- padding:3px;
- color:{color:Link};
- -moz-transition-duration:0.5s;
- -webkit-transition-duration:0.5s;
- -o-transition-duration:0.5s;
- }
- </style>
- </head>
- <body>
- <div class="container">
- <div class="sidebar">
- <td>
- <div class="part1">
- <div class="table1">
- <div class="links1">
- <a href="/">back</a>
- <a href="https://www.tumblr.com/dashboard">dashboard</a>
- <a href="/">link</a>
- <a href="/">link</a>
- <a href="/">link</a>
- </div>
- </div>
- </div>
- </div>
- </td>
- <div class="chars">
- <! 1 >
- <tr>
- <div class="table">
- <img src="https://31.media.tumblr.com/f735b42c08219859a33171a09b0b8614/tumblr_inline_n6ebkcr72s1rv574r.png" class="image">
- <div class="name">
- <a href="#?w=500" rel="char1" class="poplight">
- NAME HERE
- </a></div>
- <div id="char1" class="popup_block">
- <b>information</b>
- <p><div class="border"></div></p>
- you can use this format, or edit the way you think better idk
- <br><br>
- — write something here
- <br>
- — write something here
- <br>
- — write something here
- <br>
- — write something here
- <br><br>
- <b>navigation</b>
- <p><div class="border"></div></p>
- <a href="/">link</a>
- |
- <a href="/">link</a>
- |
- <a href="/">link</a>
- |
- <a href="/">link</a>
- </div>
- </div>
- <! 2 >
- <tr>
- <div class="table">
- <img src="https://31.media.tumblr.com/f735b42c08219859a33171a09b0b8614/tumblr_inline_n6ebkcr72s1rv574r.png" class="image">
- <div class="name">
- <a href="#?w=500" rel="char2" class="poplight">
- NAME HERE
- </a></div>
- <div id="char2" class="popup_block">
- lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. aliquam mattis porta urna lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. aliquam mattis porta urna lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam mattis porta urna lorem ipsum dolor sit amet.lorem ipsum dolor sit amet, consectetuer adipiscing elit. lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. aliquam mattis porta urna lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. aliquam mattis porta urna lorem ipsum dolor sit amet.lorem ipsum dolor sit amet, consectetuer adipiscing elit. lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. aliquam mattis porta urna lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. aliquam mattis porta urna lorem ipsum dolor sit amet.lorem ipsum dolor sit amet, consectetuer adipiscing elit. lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. aliquam mattis porta urna lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. aliquam mattis porta urna lorem ipsum dolor sit amet.lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam mattis porta urna lorem ipsum dolor sit amet.lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam mattis porta urna lorem ipsum dolor sit amet.lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam mattis porta urna lorem ipsum dolor sit amet.lorem ipsum dolor sit amet, consectetuer adipiscing elit. lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. aliquam mattis porta urna lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. aliquam mattis porta urna lorem ipsum dolor sit amet.lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- <br><br>
- </div>
- </div>
- <! 3 >
- <tr>
- <div class="table">
- <img src="https://31.media.tumblr.com/f735b42c08219859a33171a09b0b8614/tumblr_inline_n6ebkcr72s1rv574r.png" class="image">
- <div class="name">
- <a href="#?w=500" rel="char3" class="poplight">
- NAME HERE
- </a></div>
- <div id="char3" class="popup_block">
- lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. aliquam mattis porta urna lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. aliquam mattis porta urna lorem ipsum dolor sit amet.lorem ipsum dolor sit amet, consectetuer adipiscing elit. lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. aliquam mattis porta urna lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. aliquam mattis porta urna lorem ipsum dolor sit amet.lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- </div>
- </div>
- <! 4 >
- <tr>
- <div class="table">
- <img src="https://31.media.tumblr.com/f735b42c08219859a33171a09b0b8614/tumblr_inline_n6ebkcr72s1rv574r.png" class="image">
- <div class="name">
- <a href="#?w=500" rel="char4" class="poplight">
- NAME HERE
- </a></div>
- <div id="char4" class="popup_block">
- lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. aliquam mattis porta urna lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. aliquam mattis porta urna lorem ipsum dolor sit amet.lorem ipsum dolor sit amet, consectetuer adipiscing elit. lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. aliquam mattis porta urna lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. aliquam mattis porta urna lorem ipsum dolor sit amet.lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- </div>
- </div>
- <br>
- <! 5 >
- <tr>
- <div class="table">
- <img src="https://31.media.tumblr.com/f735b42c08219859a33171a09b0b8614/tumblr_inline_n6ebkcr72s1rv574r.png" class="image">
- <div class="name">
- <a href="#?w=500" rel="char5" class="poplight">
- NAME HERE
- </a></div>
- <div id="char5" class="popup_block">
- lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. aliquam mattis porta urna lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. aliquam mattis porta urna lorem ipsum dolor sit amet.lorem ipsum dolor sit amet, consectetuer adipiscing elit. lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. aliquam mattis porta urna lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. aliquam mattis porta urna lorem ipsum dolor sit amet.lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- </div>
- </div>
- <! 6 >
- <tr>
- <div class="table">
- <img src="https://31.media.tumblr.com/f735b42c08219859a33171a09b0b8614/tumblr_inline_n6ebkcr72s1rv574r.png" class="image">
- <div class="name">
- <a href="#?w=500" rel="char6" class="poplight">
- NAME HERE
- </a></div>
- <div id="char6" class="popup_block">
- lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. aliquam mattis porta urna lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. aliquam mattis porta urna lorem ipsum dolor sit amet.lorem ipsum dolor sit amet, consectetuer adipiscing elit. lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. aliquam mattis porta urna lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. aliquam mattis porta urna lorem ipsum dolor sit amet.lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- </div>
- </div>
- <! 7 >
- <tr>
- <div class="table">
- <img src="https://31.media.tumblr.com/f735b42c08219859a33171a09b0b8614/tumblr_inline_n6ebkcr72s1rv574r.png" class="image">
- <div class="name">
- <a href="#?w=500" rel="char7" class="poplight">
- NAME HERE
- </a></div>
- <div id="char7" class="popup_block">
- lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. aliquam mattis porta urna lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. aliquam mattis porta urna lorem ipsum dolor sit amet.lorem ipsum dolor sit amet, consectetuer adipiscing elit. lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. aliquam mattis porta urna lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. aliquam mattis porta urna lorem ipsum dolor sit amet.lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- </div>
- </div>
- <! 8 >
- <tr>
- <div class="table">
- <img src="https://31.media.tumblr.com/f735b42c08219859a33171a09b0b8614/tumblr_inline_n6ebkcr72s1rv574r.png" class="image">
- <div class="name">
- <a href="#?w=500" rel="char8" class="poplight">
- NAME HERE
- </a></div>
- <div id="char8" class="popup_block">
- lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. aliquam mattis porta urna lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. aliquam mattis porta urna lorem ipsum dolor sit amet.lorem ipsum dolor sit amet, consectetuer adipiscing elit. lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. aliquam mattis porta urna lorem ipsum dolor sit amet, consectetuer adipiscing elit. aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. aliquam mattis porta urna lorem ipsum dolor sit amet.lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- </div>
- </div>
- <div class="credit"><a href="http://scottisbae.tumblr.com/"><u>scottisbae</a></u></div>
- </div>
- </div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement