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">
- <!--------------------------------------------
- PAGE #001: CHARACTER PAGE
- BY: http://dullhypotheses.tumblr.com/
- RULES, IMPORTANT:
- DON'T REMOVE THE CREDIT
- DON'T CLAIM AS YOUR OWN
- DON'T USE AS A BASE
- To look for the guides CTRL+F "###"
- --------------------------------------------->
- <title>Page 001</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"/>
- <script type="text/javascript"
- src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
- <script src="http://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:90,
- tip_fade_speed:600,
- attribute:"title"
- });
- });
- })(jQuery);
- </script>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
- <script src="http://static.tumblr.com/7qjmkr5/IUmmdsy41/jquery.style-my-tooltips.js"></script>
- <script src="http://static.tumblr.com/rzl30kg/eAxm7a751/jquery.style-my-tooltips.js"></script>
- <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
- <link href='http://fonts.googleapis.com/css?family=Old+Standard+TT:400,400italic' rel='stylesheet' type='text/css'>
- <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,700,300' rel='stylesheet' type='text/css'>
- <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
- <style type="text/css">
- img {
- -webkit-filter: grayscale(100%);
- -moz-transition-duration:0.9s;
- -webkit-transition-duration:0.9s;
- -o-transition-duration:0.9s;
- }
- img:hover {
- -webkit-filter: grayscale(0%);
- -moz-transition-duration:0.9s;
- -webkit-transition-duration:0.9s;
- -o-transition-duration:0.9s;
- }
- #big img {
- -webkit-filter: grayscale(0%);
- -moz-transition-duration:0.9s;
- -webkit-transition-duration:0.9s;
- -o-transition-duration:0.9s;
- }
- ::-webkit-scrollbar {
- height:8px;
- width:5px;
- }
- ::-webkit-scrollbar-thumb:vertical {
- background-color:#666666;
- height:50px;
- }
- ::-webkit-scrollbar-thumb:horizontal {
- background-color:#666666;
- height:8px!important;
- }
- ::-webkit-scrollbar-track {
- background-color:#171b3c;
- color:#fff;
- }
- ::-webkit-scrollbar-thumb {
- background-color:#171b3c;
- color:#fff;
- }
- ::selection {
- background-color:#171b3c;
- color:#fff;
- }
- ::-moz-selection {
- background-color:#171b3c;
- color:#fff;
- }
- /* --- s-m-t-tooltip --- */
- #s-m-t-tooltip {
- max-width:300px;
- padding:2px 4px;
- margin:20px 0px 0px 20px;
- height:auto;
- border-radius:4px;
- background-color:#eeeeee;
- border:0px solid {color:border};
- font-family:arial;
- font-size:10px;
- letter-spacing:0px;
- text-transform:uppercase;
- color:#666666;
- z-index:999999999999999999999999999999999999;
- }
- body {
- background-color:{color:background};
- background-image:url('http://subtlepatterns.com/patterns/crossword.png');
- background-attachment:fixed;
- }
- /*--- Sidebar ---*/
- #big {
- position:fixed;
- height:670px;
- margin-top:-75px;
- margin-left:10px;
- background-color:transparent;
- border-right:0px solid {color:border};
- width:200px;
- }
- #big img {
- width:200px;
- height:640px;
- }
- #sidebar1 {
- position:fixed;
- width:158px;
- background-color:#fff;
- margin-left:20px;
- margin-top:50px;
- padding:10px;
- font-family: arial;
- font-size: 12px;
- color:#000;
- line-height: 18px;
- text-align:justify;
- line-height:130%;
- opacity:1;
- -moz-transition-duration:0.5s;
- -webkit-transition-duration:0.5s;
- -o-transition-duration:0.5s;
- }
- #sidebar1:hover {
- opacity:1;
- -moz-transition-duration:0.5s;
- -webkit-transition-duration:0.5s;
- -o-transition-duration:0.5s;
- }
- #sidebar {
- position:fixed;
- margin-left:230px;
- width: 120px;
- margin-top:-70px;
- background-color: transparent ;
- padding:0px 5px 0px;
- z-index:999999999999;
- }
- #description {
- width:120px;
- height:auto;
- font-family: arial;
- margin-top:120px;
- margin-left:-16px;
- font-size: 12px;
- color:#000;
- line-height: 18px;
- text-align:justify;
- line-height:130%;
- padding:7px;
- background-color:transparent;
- border: 0px solid {color:border};
- }
- #description a {
- font-family:arial;
- }
- #description a:hover {
- letter-spacing:0px;
- }
- /*--- Navigation ---*/
- .slinks {
- display:block;
- width:148px;
- margin-top:5px;
- margin-bottom:5px;
- margin-left:-2px;
- font-size: 15px;
- padding-left:7px;
- padding-right:7px;
- padding-top:3px;
- padding-bottom:3px;
- font-family: arial;
- text-transform: uppercase;
- text-align: center;
- }
- .slinks a {
- padding:3px;
- color: #171b3c;
- margin-bottom: 8px;
- width: 120px;
- text-decoration:none;
- -moz-transition-duration:0.5s;
- -webkit-transition-duration:0.5s;
- -o-transition-duration:0.5s;
- font-size:12px;
- }
- .slinks a:hover {
- color:#666666;
- -moz-transition-duration:0.5s;
- -webkit-transition-duration:0.5s;
- -o-transition-duration:0.5s;
- letter-spacing:0px;
- }
- .title {
- font-family:'oswald', sans serif;
- font-size:30px;
- text-align:center;
- text-transform:uppercase;
- color: #666666;
- margin-left:20px;
- padding-top:30px;
- }
- .navigation {
- text-align:center;
- font-size:12px;
- font-family:helvetica;
- text-transform:uppercase;
- letter-spacing:3px;
- margin-left:30px;
- }
- .navigation a {
- color:#666;
- text-decoration:none;
- -moz-transition-duration:0.5s;
- -webkit-transition-duration:0.5s;
- -o-transition-duration:0.5s;
- }
- .navigation a:hover {
- color:#666666;
- text-decoration:none;
- -moz-transition-duration:0.5s;
- -webkit-transition-duration:0.5s;
- -o-transition-duration:0.5s;
- }
- #container {
- width:900px;
- margin: 88px 50px 200px;
- margin-left:405px;
- }
- .table {
- background-color:#fff;
- width:380px;
- height:320px;
- position:auto;
- margin-left:17px;
- margin-left:7px;
- margin-top:5px;
- display:inline-block;
- padding:10px 10px 10px 10px;
- padding-right:20px;
- border: 1px solid #eee;
- overflow-y:auto;
- overflow-x:hidden;
- }
- .table img {
- margin-top:-257px;
- margin-left:1px;
- width:170px;
- height:220px;
- float:left;
- }
- .name {
- width: 374px;
- height:35px;
- position:auto;
- background-color: #f6f6f6;
- border:1px solid #eee;
- background-image: url('');
- padding-left: 7px;
- padding-right: 7px;
- padding-top:10px;
- padding-bottom:2px;
- font-family:montserrat;
- font-size: 20px;
- font-weight:bold;
- font-style:none;
- text-align: center;
- text-transform: uppercase;
- color: #171b3c;
- letter-spacing:0px;
- margin-bottom:0px;
- }
- .description {
- width: 390px;
- height: 312px;
- margin-left:-10px;
- margin-top:-322px;
- padding: 10px;
- background-color: #fff;
- position: absolute;
- overflow: auto;
- opacity: 0;
- font-family:'oswald', sans serif;
- font-size: 22px;
- -webkit-transition: all 0.5s ease-in;
- -moz-transition: all 0.5s ease-in;
- -o-transition: all 0.5s ease-in;
- -ms-transition: all 0.5s ease-in;
- transition: all 0.5s ease-in;
- }
- .table:hover .description {
- opacity: 1;
- -moz-transition-duration:0.5s;
- -webkit-transition-duration:0.5s;
- -o-transition-duration:0.5s;
- }
- #status {
- width: 378px;
- background-color:#f6f6f6;
- border:1px solid #eee;
- padding-left: 7px;
- padding-right: 7px;
- padding-top:5px;
- padding-bottom:5px;
- font-family:helvetica;
- font-size: 10px;
- font-weight:normal;
- font-style:none;
- text-align: left;
- text-transform: uppercase;
- color: #000;
- letter-spacing:0px;
- margin-bottom:0px;
- margin-top:245px;
- margin-left:-1px;
- }
- #info {
- width:208px;
- margin:1px;
- margin-top:-265px;
- padding-left:5px;
- padding-right:5px;
- text-align:justify;
- font-size:10px;
- font-family: cambria;
- color:#000000;
- float:right;
- margin-right:-13px;
- overflow-y:auto;
- }
- .entry {
- font-size:10px;
- font-family:calibri;
- text-transform:uppercase;
- margin-top:3px;
- }
- .entry1 {
- font-size:10px;
- font-family:calibri;
- border-bottom:1px dotted #eee;
- text-transform:uppercase;
- line-height:160%;
- }
- .entry1 a {
- color:#171b3c;
- text-decoration:none;
- -moz-transition-duration:0.7s;
- -webkit-transition-duration:0.7s;
- -o-transition-duration:0.7s;
- }
- .entry1 a:hover {
- color:#666;
- letter-spacing:2px;
- -moz-transition-duration:0.7s;
- -webkit-transition-duration:0.7s;
- -o-transition-duration:0.7s;
- }
- .links {
- width:389px;
- margin-top:-7px;
- }
- .btitle1 {
- font-family: arial;
- font-size:11px;
- text-align:right;
- border-bottom:1px solid #000;
- padding-top:7px;
- padding-bottom:0px;
- margin-bottom:3px;
- text-transform:uppercase;
- font-weight:bold;
- }
- .link1 {
- font-size:9px;
- font-family:arial;
- border-bottom:1px dotted #eee;
- text-transform:uppercase;
- line-height:200%;
- }
- .link1 a {
- color:#171b3c;
- text-decoration:none;
- -moz-transition-duration:0.7s;
- -webkit-transition-duration:0.7s;
- -o-transition-duration:0.7s;
- }
- .link1 a:hover {
- color:#666;
- letter-spacing:0px;
- -moz-transition-duration:0.7s;
- -webkit-transition-duration:0.7s;
- -o-transition-duration:0.7s;
- }
- #sidebar b, strong {
- color:#666666;
- }
- #sidebar1 b, strong {
- color:#171b3c;
- }
- /* FILTER */
- .all {
- transition-duration:1s;
- -moz-transition-duration:1s;
- -webkit-transition-duration:1s;
- -o-transition-duration:1s;
- }
- #sort li {text-align:left;list-style: none; margin-left:-100px;}
- #sort ul {list-style: none; margin-top:3px; margin-left:-45px;margin-bottom:-13px;}
- #sort a {display: block;
- width:125px;
- font-size:9px;
- background:none;
- padding:2px 0px;
- margin-top:-1px;
- color:#171b3c;
- text-transform:uppercase;
- font-size:12px;
- font-weight:bold;
- text-decoration:none;
- font-family:arial;
- }
- #sort a:hover {color:#666666; text-decoration:none;}
- #sort li a.selected {color:black;background:white; border:1px solid white;}
- /*--- Credits! Do not remove! ---*/
- .credit {
- position:fixed;
- bottom:4px;
- right:8px;
- font: 11px;
- text-transform:uppercase;
- letter-spacing: 0px;
- font-family:georgia;
- font-weight:bold;
- padding: 2px;
- }
- .credit a{
- color: #666666;
- opacity:0.8;
- text-decoration:none;
- -moz-transition-duration:0.7s;
- -webkit-transition-duration:0.7s;
- -o-transition-duration:0.7s;
- }
- .credit a:hover{
- color:#666;
- opacity:1.0;
- -moz-transition-duration:0.7s;
- -webkit-transition-duration:0.7s;
- -o-transition-duration:0.7s;
- }
- </style>
- <script>
- function click() {
- if (event.button==2||event.button==3) {
- oncontextmenu='return false';
- }
- }
- document.onmousedown=click
- document.oncontextmenu = new Function("return false;")
- </script>
- </head>
- <body>
- <!---- ### This is where you change your sidebar photo. --->
- <div id="big"><img src="https://40.media.tumblr.com/8f56307d7ea79bbeb8f8783845d39c24/tumblr_nihant1Spk1tlvvc0o1_500.png"/></div>
- <div id="sidebar1">
- <div class="slinks"><a href="/link" title="Refresh the Page">I.</a>
- <a href="/" title="Back to Blog">II.</a>
- <a href="/ask" title="Contact">III.</a>
- <a href="/link" title="Link Title Here">IV.</a>
- <a href="/link" title="Link Title Here">V.</a>
- <a href="http://tumblr.com/" title="Back to Dashboard">VI.</a></div>
- <b>Description here!</b> Lorem ipsum dolor sit amet, consectetuer ADIPISCING ELIT. Aliquam nisi lorem, pulvinar id, commodo feugiat, vehicula et, mauris. Aliquam mattis porta urna. Maecenas dui neque, rhoncus sed, vehicula vitae, auctor at, nisi. Aenean id massa ut lacus molestie porta. Curabitur sit amet quam id libero suscipit venenatis.</p>
- <p>Hover over the boxes for more information.</p>
- </div>
- <div id="sidebar">
- <div id="description">
- <!---- ### This is where you change your filters. The only thing you have to change is the .tag (example: .open, .closed, .verse1, etc) function. For example, you want the item to go under COOL VERSE, change .tag to .coolverse or whatever you want. Make sure you remember it, though. You need to remember the tags for later. Do not alter anything else in this area if you do not know what to do. --->
- <b><span style="margin-left:-6px;">By Availability</span></b>
- <div id="sort">
- <ul id="filters" class="option-set clearfix" data-option-key="filter">
- <a href="#filter" data-option-filter=".open">Open</a>
- <a href="#filter" data-option-filter=".closed">Closed</a>
- </div></ul>
- <br><br>
- <b><span style="margin-left:-6px;">By Verse</span></b>
- <div id="sort">
- <ul id="filters" class="option-set clearfix" data-option-key="filter">
- <a href="#filter" data-option-filter=".verse1"><small>Verse Here</small></a>
- <a href="#filter" data-option-filter=".verse2"><small>Verse Here</small></a>
- </div></ul>
- <br><br>
- <b><span style="margin-left:-6px;">By Status</span></b>
- <div id="sort">
- <ul id="filters" class="option-set clearfix" data-option-key="filter">
- <a href="#filter" data-option-filter=".status1">Status 1</a>
- <a href="#filter" data-option-filter=".status2">Status 2</a>
- <br><br>
- <a href="#filter" data-option-filter=".all">All</a>
- </div></ul>
- </div>
- </div>
- <div id="container" class="clear fix">
- <! !>
- <!---- ### This is where your content. In the tags area, put the filter that you assign for the specific content. DO NOT CHANGE THE 'ALL' PART. Remember the tags you put a while ago? Time to put themto use after the word 'all'. --->
- <!---- START COPYING HERE ---->
- <div class="show all open verse1 status1">
- <div class="table">
- <div class="name">Character Name</div>
- <div id="status"><b>Status:</b> Status 1 <span style="float:right;"><b>Availability:</b> Open</span></div>
- <!--- photo here! ---->
- <img src="https://38.media.tumblr.com/48c5d2532335165c7c57c9d6ce98d63e/tumblr_nddi1wUo401rjbcuao1_r1_250.png"/>
- <div id="info">
- <div class="btitle1">General Information</div>
- <div class="entry">
- <div class="entry1"><b>Full Name:</b> Character Name</div>
- <div class="entry1"><b>Age:</b> Character Age</div>
- <div class="entry1"><b>Birthday:</b> </div>
- <div class="entry1"><b>Assigned Sex at Birth:</b> </div>
- <div class="entry1"><b>Gender Alignment:</b> </div>
- <div class="entry1"><b>Sexual Orientation:</b> </div>
- <div class="entry1"><b>Romantic Orientation:</b> </div>
- <div class="entry1"><b>Relationship Status:</b> </div>
- <div class="entry1"><b>Occupation:</b> </div>
- <div class="entry1"><b>Face Claim:</b> </div>
- <div class="entry1"><b>Setting:</b> </div>
- <div class="entry1"><b>Genre:</b> </div>
- </div>
- </div>
- <div class="description">
- <div class="links">
- <div class="btitle1">General Links</div>
- <div class="link1"><a href="/tagged/link">Link</a></div>
- <div class="link1"><a href="/tagged/link">Link</a></div>
- <div class="link1"><a href="/tagged/link">Link</a></div>
- <div class="link1"><a href="/tagged/link">Link</a></div>
- <div class="btitle1">Related Links</div>
- <div class="link1"><a href="/tagged/link">Link</a></div>
- <div class="link1"><a href="/tagged/link">Link</a></div>
- <div class="btitle1">Relationships</div>
- <div class="link1"><a href="/tagged/link">Link</a></div>
- <div class="link1"><a href="/tagged/link">Link</a></div>
- <div class="link1"><a href="/tagged/link">Link</a></div>
- <div class="link1"><a href="/tagged/link">Link</a></div>
- <div class="btitle1">Related Persons</div>
- <div class="link1"><a href="/tagged/link">Link</a></div>
- <div class="link1"><a href="/tagged/link">Link</a></div>
- </div>
- </div>
- </div>
- </div>
- <!---- END COPY HERE. ---->
- <!---- PASTE NEW CODE BELOW THIS LINE. ---->
- <!---- START COPYING HERE ---->
- <div class="show all closed verse2 status2">
- <div class="table">
- <div class="name">Character Name</div>
- <div id="status"><b>Status:</b> Status 1 <span style="float:right;"><b>Availability:</b> Open</span></div>
- <!--- photo here! ---->
- <img src="https://38.media.tumblr.com/48c5d2532335165c7c57c9d6ce98d63e/tumblr_nddi1wUo401rjbcuao1_r1_250.png"/>
- <div id="info">
- <div class="btitle1">General Information</div>
- <div class="entry">
- <div class="entry1"><b>Full Name:</b> Character Name</div>
- <div class="entry1"><b>Age:</b> Character Age</div>
- <div class="entry1"><b>Birthday:</b> </div>
- <div class="entry1"><b>Assigned Sex at Birth:</b> </div>
- <div class="entry1"><b>Gender Alignment:</b> </div>
- <div class="entry1"><b>Sexual Orientation:</b> </div>
- <div class="entry1"><b>Romantic Orientation:</b> </div>
- <div class="entry1"><b>Relationship Status:</b> </div>
- <div class="entry1"><b>Occupation:</b> </div>
- <div class="entry1"><b>Face Claim:</b> </div>
- <div class="entry1"><b>Setting:</b> </div>
- <div class="entry1"><b>Genre:</b> </div>
- </div>
- </div>
- <div class="description">
- <div class="links">
- <div class="btitle1">General Links</div>
- <div class="link1"><a href="/tagged/link">Link</a></div>
- <div class="link1"><a href="/tagged/link">Link</a></div>
- <div class="link1"><a href="/tagged/link">Link</a></div>
- <div class="link1"><a href="/tagged/link">Link</a></div>
- <div class="btitle1">Related Links</div>
- <div class="link1"><a href="/tagged/link">Link</a></div>
- <div class="link1"><a href="/tagged/link">Link</a></div>
- <div class="btitle1">Relationships</div>
- <div class="link1"><a href="/tagged/link">Link</a></div>
- <div class="link1"><a href="/tagged/link">Link</a></div>
- <div class="link1"><a href="/tagged/link">Link</a></div>
- <div class="link1"><a href="/tagged/link">Link</a></div>
- <div class="btitle1">Related Persons</div>
- <div class="link1"><a href="/tagged/link">Link</a></div>
- <div class="link1"><a href="/tagged/link">Link</a></div>
- </div>
- </div>
- </div>
- </div>
- <!---- END COPY HERE. ---->
- <!---- PASTE NEW CODE BELOW THIS LINE. ---->
- </div>
- </div>
- <script src="http://static.tumblr.com/whx9ghv/lSGm6k18m/jquery.scrollto-1.4.2-min.js"></script>
- <script src="http://static.tumblr.com/whx9ghv/GJEm6k188/jquery.localscroll-1.2.7-min.js"></script>
- <script>
- $(document).ready(function () {
- $.localScroll();
- });
- </script>
- <div class="credit"><a href="http://dullhypotheses.tumblr.com/" title="theme by alexis"><center>AN</center></a></div>
- </body>
- <!------- filter scripts -------->
- <script src="http://static.tumblr.com/fuu6t9w/kh8ml0pl9/jquery-1.7.1.min.js"></script>
- <script src="http://static.tumblr.com/fuu6t9w/eubml0pm0/jquery.isotope.min.js"></script>
- <script>
- $(function(){
- var $container = $('#container');
- $container.isotope({
- itemSelector : '.all'
- });
- var $optionSets = $('#sort .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;
- });
- });
- </script>
- <!-----end filter scripts------>
Advertisement
Add Comment
Please, Sign In to add comment