Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <head>
- <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
- <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
- <script type="text/javascript" src="http://codysherman.tumblr.com/tools/infinite-scrolling/code"></script>
- <title>{title}</title>
- <!--Fonts-->
- <link href='http://fonts.googleapis.com/css?family=Lato:300,400' rel='stylesheet' type='text/css'>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
- <link href='http://fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>
- <script>
- function fadeLinks() {
- $('#linkcontainersb').fadeIn(200);
- $('.imagecontainer').animate({opacity: 0}, 100);
- }
- function fadeOutLinks() {
- $('#linkcontainersb').fadeOut(200);
- $('.imagecontainer').delay(100).animate({opacity: 1}, 100);
- }
- </script>
- <script>
- $(document).ready(function(){
- $("#sidebarNav2").mouseover(function(){
- document.getElementById('sidebarNav').innerHTML = ' <img src="http://i.imgur.com/CtiiwcV.png">';
- });
- $('#sidebarNav2').mouseleave(function(){
- document.getElementById('sidebarNav').innerHTML = '<p>NAVIGATION<p> ';
- });
- });
- </script>
- <style>
- body {
- padding:0;
- margin:0;
- overflow: auto;
- }
- /* sidebar */
- .sidebarcontainer{
- position:absolute;
- height:850px;
- width:180px;
- margin-left:-350px;
- margin-top:25px;
- }
- .title a{
- position:absolute;
- height:60px;
- width:250px;
- text-decoration:none;
- position:fixed;
- font-family:'Lato', sans-serif;
- margin-top:445px;
- margin-left:-131px;
- letter-spacing:0.25px;
- z-index:1;
- font-size:58.5px;
- color:#34495e;
- }
- .desc{
- width:150px;
- height:auto;
- margin-top:-160px;
- font-family:'Lato', sans-serif;
- color:white;
- letter-spacing:3px;
- font-size:8px;
- text-align:center;
- margin-left:-35px;
- line-height:15px;
- }
- #sidebar {
- position:fixed;
- height:300px;
- width:170px;
- max-width:250px;
- margin-left:0px;
- margin-top:135px;
- background:#34495e;
- }
- #sidebar.sbtwo {
- height:45px;
- margin-top:65px;
- }
- #sidebarNav {
- position:fixed;
- width:170px;
- max-width:250px;
- margin-left:0px;
- margin-top:135px;
- background:#34495e;
- height:45px;
- margin-top:65px;
- cursor: pointer;
- }
- #sidebarNav2 {
- position:fixed;
- width:170px;
- max-width:250px;
- margin-left:0px;
- margin-top:135px;
- height:45px;
- margin-top:65px;
- cursor: pointer;
- }
- #sidebarNav img {
- position:relative;
- width:45px;
- margin:auto;
- -webkit-filter: invert(100%);
- transform:rotate(180deg);
- -ms-transform:rotate(180deg); /* IE 9 */
- -webkit-transform:rotate(180deg);
- }
- #sidebarNav p {
- font-family:'Lato', sans-serif;
- color:white;
- letter-spacing:6px;
- font-size:12px;
- text-align:center;
- z-index:;
- padding-top:4px;
- }
- #navarrow{
- width:30px;
- height:30px;
- margin-left:55px;
- margin-top:55px;
- }
- #navarrow img{
- height:55px;
- width:auto;
- -webkit-filter: invert(100%);
- transform:rotate(180deg);
- -ms-transform:rotate(180deg); /* IE 9 */
- -webkit-transform:rotate(180deg);
- display:none;
- }
- #sidebar.sbtwo p {
- font-family:'Lato', sans-serif;
- color:white;
- letter-spacing:4px;
- font-size:13px;
- text-align:center;
- }
- #sidebar.sbfour {
- height:130px;
- margin-top:532px;
- }
- .imagecontainer{
- height:400px;
- width:250px;
- max-height:400px;
- max-width:250px;
- margin-left:-70px;
- }
- .imagecontainer img{
- height:300px;
- width:auto;
- -moz-transform: scaleX(-1);
- -o-transform: scaleX(-1);
- -webkit-transform: scaleX(-1);
- transform: scaleX(-1);
- filter: FlipH;
- -ms-filter: "FlipH";
- }
- .sidebarsep{
- position:fixed;
- height:80px;
- width:248px;
- margin-top:65px;
- }
- .info{
- position:fixed;
- height:auto;
- width:95px;
- margin-top:720px;
- margin-left:45px;
- z-index:2;
- }
- .info p{
- font-family:'Lato', sans-serif;
- color:white;
- margin:auto;
- letter-spacing:10px;
- font-size:13px;
- }
- /* links */
- .exit{
- height:25px;
- width:100px;
- margin-top:10px;
- margin-left:33px;
- }
- .exit img{
- height:25px;
- width:auto;
- -webkit-filter: invert(100%);
- }
- #linkcontainersb {
- position:fixed;
- height:300px;
- width:170px;
- max-width:250px;
- margin-left:0px;
- margin-top:70px;
- background:#34495e;
- opacity:1;
- display:none;
- }
- #linkone {
- position:absolute;
- width:170px;
- height:35px;
- background-color:#34495e;
- margin-top:40px;
- margin-left:px;
- cursor:pointer;
- }
- #linkonea a {
- position:relative;
- font-family:'Lato', sans-serif;
- color:white;
- letter-spacing:6px;
- font-size:12px;
- text-align:center;
- top:7px;
- text-decoration:none;
- }
- #linkone a:hover #linkone{
- color:white;
- }
- #linktwo {
- position:absolute;
- width:170px;
- height:35px;
- background-color:#34495e;
- margin-top:90px;
- cursor:pointer;
- }
- #linktwo a {
- position:relative;
- font-family:'Lato', sans-serif;
- color:white;
- letter-spacing:6px;
- font-size:12px;
- text-align:center;
- top:7px;
- text-decoration:none;
- }
- #linkthree{
- position:absolute;
- width:170px;
- height:35px;
- background-color:#34495e;
- margin-top:140px;
- cursor:pointer;
- }
- #linkthree a{
- position:relative;
- font-family:'Lato', sans-serif;
- color:white;
- letter-spacing:6px;
- font-size:12px;
- text-align:center;
- top:7px;
- text-decoration:none;
- }
- #linkfour{
- position:absolute;
- width:170px;
- height:35px;
- background-color:#34495e;
- margin-top:190px;
- cursor:pointer;
- }
- #linkfour a{
- position:relative;
- font-family:'Lato', sans-serif;
- color:white;
- letter-spacing:6px;
- font-size:12px;
- text-align:center;
- text-decoration:none;
- top:7px;
- }
- #linkfive {
- position:absolute;
- width:170px;
- height:35px;
- background-color:#34495e;
- margin-top:240px;
- cursor:pointer;
- }
- #linkfive a{
- position:relative;
- font-family:'Lato', sans-serif;
- color:white;
- letter-spacing:6px;
- font-size:12px;
- text-align:center;
- top:7px;
- text-decoration:none;
- }
- #linksix{
- position:absolute;
- width:170px;
- height:35px;
- background-color:#34495e ;
- margin-top:255px;
- cursor:pointer;
- }
- #links {
- display:inline-block;
- border:1px solid white;
- padding:3px 8px 3px 8px;
- font-family: 'Lato', sans-serif;
- font-weight:100;
- background-color:#34495e;
- color:#34495E ;
- margin-right:14px;
- margin-top:25px;
- }
- #links a {
- font-family: 'Lato', sans-serif;
- font-weight:100;
- color:#34495e;
- text-decoration:none;
- transition:all 0.3s;
- -webkit-transition:all 0.3s;
- -moz-transition:all 0.3s;
- -o-transition:all 0.3s; /* end of sidebar */
- }
- /* Posts */
- .postcontainer {
- position:relative;
- padding:5px;
- top:5px;
- width:510px;
- margin:auto;
- text-align:center;
- }
- .divideone {
- position:fixed;
- margin-top:-5px;
- margin-left:-20px;
- height:100%;
- width:5px;
- border: solid 1px #34495e;
- background-color:#34495e;
- }
- .dividetwo {
- position:fixed;
- margin-top:-5px;
- margin-left:525px;
- height:100%;
- width:5px;
- border: solid 1px #34495e;
- background-color:#34495e ;
- }
- #post {
- width:400px;
- height:auto;
- margin:0px auto 100px auto;
- max-width:400px;
- padding-bottom: -40px;
- border:solid 5px #34495e;
- border-bottom: none;
- background-color: #34495e;
- }
- #post img {
- text-align: center;
- text-align: center;
- opacity:0.8;
- transition: 1s ease-in-out;
- padding-bottom:-10px;
- }
- #post img:hover {
- opacity:1;
- }
- .html_photoset {
- padding-bottom: 0px;
- }
- .notes {
- font-family:'Lato', sans-serif;
- opacity:0;
- width:0px;
- height:50px;
- border: 5px solid #34495e;
- background-color:#34495e;
- position:absolute;
- left:530px;
- text-align:center;
- line-height:15px;
- font-size:9px;
- letter-spacing:2px;
- color:white;
- transition:0.4s ease-in-out;
- }
- .notes p{
- margin-top:10px;
- }
- #post:hover .notes {
- opacity:1;
- width:70px;
- }
- .perma {
- position:absolute;
- opacity:0;
- width:0px;
- height:25px;
- left:530px;
- margin-top:65px;
- border: 5px solid #34495e ;
- background-color:#34495e ;
- text-align:center;
- transition:0.4s ease-in-out;
- font-family:'Lato', sans-serif;
- color:white;
- }
- .perma a {
- position:absolute;
- text-decoration:none;
- color:white;
- margin-left:-8px;
- margin-bottom:0px;
- font-size:20px;
- }
- #post:hover .perma {
- opacity:1;
- width:70px;
- }
- .reblog{
- position:absolute;
- opacity:0;
- width:0px;
- height:25px;
- left:530px;
- margin-top:105px;
- border: 5px solid #34495e;
- background-color:#34495e ;
- text-align:center;
- transition:0.4s ease-in-out;
- font-family:'Lato', sans-serif;
- color:white;
- }
- .reblog a{
- position:absolute;
- text-decoration:none;
- color:white;
- margin-left:-8px;
- margin-bottom:-px;
- font-size:20px;
- }
- #post:hover .reblog {
- opacity:1;
- width:70px;
- }
- /* permalink page */
- .details {
- padding:0px 10px 5px 10px;
- height:auto;
- width:525px;
- margin-left:-18px;
- margin-top:25px;
- background-color:#34495e;
- border-top:1px solid #34495e;
- border-top:1px solid #34495e;
- }
- .details p {
- font-family:'Lato', sans-serif;
- color:white;
- letter-spacing:3px;
- font-size:9px;
- text-align:center;
- text-transform:uppercase;
- }
- .details a {
- text-decoration:none;
- color:white;
- }
- .permanotes {
- display:none;
- }
- .notes {
- }
- .notes ol {
- list-style: none;
- font-family: 'Lato', sans-serif;
- }
- .notes ol a {
- text-decoration:none;
- color:#bad5ff;
- }
- .notes ol img {
- opacity:0;
- }
- #text{ /* text posts */
- width:400px;
- height:auto;
- background-color:#34495e;
- display:inline-block;
- }
- .textp {
- font-family:'Lato', sans-serif;
- color:white;
- letter-spacing:3px;
- font-size:9px;
- text-align:center;
- line-height:15px;
- text-transform:uppercase;
- margin-left:20px;
- margin-right:20px;
- padding-bottom:7px;
- padding-top:7px;
- }
- .textp p{
- font-family:'Lato', sans-serif;
- color:white;
- letter-spacing:3px;
- font-size:9px;
- text-align:center;
- line-height:15px;
- text-transform:uppercase;
- }
- .texthead{
- }
- .texthead p{
- font-family:'Lato', sans-serif;
- color:white;
- letter-spacing:3px;
- font-size:13px;
- text-align:center;
- line-height:15px;
- text-transform:uppercase;
- padding-top:0px;
- }
- a{
- color:white;
- }
- #text:hover.perma{
- opacity:1;
- }
- #quote{
- max-height:500px;
- width:400px;
- background-color:#34495e;
- font-family:'Lato', sans-serif;
- color:white;
- letter-spacing:3px;
- font-size:9px;
- text-align:center;
- line-height:15px;
- display:inline-block;
- margin-top:-4px;
- }
- #quote p{
- position:relative;
- font-family:'Lato', sans-serif;
- color:white;
- letter-spacing:3px;
- font-size:9px;
- text-align:center;
- line-height:15px;
- text-transform:uppercase;
- padding-bottom:10px;
- margin-top:15px;
- }
- #quote a{
- color:white;
- }
- .quotehead{
- font-family:'Lato', sans-serif;
- color:white;
- letter-spacing:3px;
- font-size:15px;
- text-align:center;
- line-height:22px;
- text-transform:uppercase;
- padding-top:18px;
- margin-left:20px;
- margin-right:20px;
- }
- .blockquote{
- max-height:500px;
- width:400px;
- background-color:#34495e;
- font-family:'Lato', sans-serif;
- color:white;
- letter-spacing:3px;
- font-size:9px;
- text-align:center;
- line-height:15px;
- display:inline-block;
- margin-top:-4px;
- }
- .blockquote {
- color:white;
- }
- p {
- position:relative;
- font-family:'Lato', sans-serif;
- color:white;
- letter-spacing:3px;
- text-transform:uppercase;
- font-size:9px;
- }
- #qa{
- height:auto;
- width:400px;
- background-color:#34495e;
- display:inline-block;
- }
- .question{
- margin-top:20px;
- }
- .question p{
- font-family:'Lato', sans-serif;
- color:white;
- letter-spacing:3px;
- font-size:9px;
- }
- #line{
- position:relative;
- height:3px;
- width:250px;
- background-color:white;
- margin-left:125px;
- margin-top:20px;
- }
- #answer{
- margin-top:20px;
- padding-bottom:10px;
- }
- #answer p{
- font-family:'Lato', sans-serif;
- color:white;
- letter-spacing:3px;
- font-size:11px;
- }
- </style>
- </head>
- <body>
- <div class="postcontainer">
- <div class="divideone"></div>
- <div class="dividetwo"></div>
- <div class="sidebarcontainer">
- <div id="sidebar">
- <div class="imagecontainer">
- <img src="http://i.imgur.com/MqyeNQZ.png">
- </div>
- </div>
- <div class="info">
- <div class="desc">A BLOG I USE <BR>FOR ANIME, MANGA <br>& OTAKU STUFF<br><br><b>I POST SPOILERS</b></div>
- </div>
- <div class="sidebarsep">
- <div id="linkcontainersb">
- <a href="http://b-i-k-oabout.tumblr.com/" ><div id="linkone"><div id="linkonea">ABOUT</a></div></div>
- <div id="linktwo"><a href="http://b-i-k-o.tumblr.com/ask">ASK</a></div>
- <div id="linkthree"><a href="http://b-i-k-o.tumblr.com/tags">TAGS</font></a></div>
- <div id="linkfour"><a href="link" >ARCHIVE</font></a></div>
- <div id="linkfive"><a href="http://anilist.co/user/Beluga" >ANILIST</font></a></div>
- <div class="exit" onclick="fadeOutLinks()"><a><img src="http://i.imgur.com/CtiiwcV.png"></a></div>
- </div>
- </div>
- <div id="sidebarNav" onclick="fadeLinks()"><p onclick="fadeLinks()">NAVIGATION</p></div>
- <div id="sidebarNav2" onclick="fadeLinks()"></div>
- <div id="sidebar" class="sbfour"></div>
- <div class="title"><a href="http://b-i-k-o.tumblr.com/">B I K O</a></div>
- <div id="navarrow"><img src="http://i.imgur.com/CtiiwcV.png"></div>
- </div><!-- end of sidebar container -->
- <div class = "autopagerize_page_element" >
- {block:Posts}
- <div id="post">
- {block:IndexPage}
- <!-- Notes -->
- <div class="container">
- <div class="notes"><p>{block:NoteCount}{NoteCount}<br>NOTES
- {/block:NoteCount}</p></div>
- <div class="perma">
- <a href="{ReblogURL}"> ↹ </a>
- </div>
- <div class="reblog">
- <a href="{Permalink}"> ∞ </a>
- </div>
- <!-- End of Notes -->
- {block:Photo}
- {LinkOpenTag}<img src="{photourl-400}" style=" min-width:400px">{LinkCloseTag}{block:ifShowCaptions}{block:Caption}{Caption}{/block:Caption}{/block:ifShowCaptions}
- {/block:Photo}
- {block:Photoset}
- {photoset-400}{block:ifShowCaptions}{block:Caption}{Caption}{/block:Caption}{/block:ifShowCaptions}
- {/block:Photoset}
- {/block:IndexPage}
- {block:PermalinkPage}
- {block:Photo}
- {LinkOpenTag}<img src="{photourl-400}" style=cursor:url(http://static.tumblr.com/qikcq4o/Kgrmul1dm/tiny_cursor_pic.png)>{LinkCloseTag}{block:ifShowCaptions}{block:Caption}{Caption}{/block:Caption}{/block:ifShowCaptions}
- {/block:Photo}
- {block:Photoset}
- {photoset-400}{block:ifShowCaptions}{block:Caption}{Caption}{/block:Caption}{/block:ifShowCaptions}
- {/block:Photoset}
- {/block:PermalinkPage}
- {block:Text}
- <div id="text">{block:Title}<div class="texthead"><p>{Title}</p></div>{/block:Title}<div class="textp"><p>{Body}</p></div></div>
- {/block:Text}
- {block:Link}
- <h1><a href="{URL}" {Target}>{Name}</a></h1>{block:Description}{Description}{/block:Description}
- {/block:Link}
- {block:Quote}<div id="quote"><div class="quotehead">"{Quote}"</div><p>{block:Source}- {Source}{/block:Source}</p></div>
- {/block:Quote}
- {block:Audio}
- <left>{block:AlbumArt}<img src="{AlbumArtURL}" width="80px" height="80px" align="left" style="margin-right:10px" />{/block:AlbumArt}<span class="audio">{AudioPlayerWhite}</left></span>
- <br>{block:TrackName}<b>Title:</b> {TrackName}<br />{/block:TrackName}
- <br>{block:Artist}<b>Artist:</b> {Artist}<br />{/block:Artist}
- {/block:ExternalAudio}
- {/block:Audio}
- {block:Video}
- {Video-400}{block:ifShowCaptions}{block:Caption}{Caption}{/block:Caption}{/block:ifShowCaptions}
- {/block:Video}
- {block:Chat}{block:Title}<h1>{Title}</h1>{/block:Title}{block:Lines}{block:Label}<b>{Label}</b>{/block:Label} {Line}<br>{/block:Lines}
- {/block:Chat}
- {block:Answer}<div id="qa"><div class="question"><p>— {Asker} said: </span><br><br><p style="font-size:11px;">{Question}</p></div><div id="line"></div><div id="answer"><div id="answertext"><p>{Answer}{block:Answerer}— {Answerer}{/block:Answerer}</p></div></div></div>
- {/block:Answer}
- </div>
- {block:permalinkpage}
- {block:PostNotes}<div class="details">
- {block:NoteCount}<p>Reblogged from: <a href="{Permalink}"></a><a href="{ReblogParentURL}">{ReblogParentName}</a></p>{/block:RebloggedFrom}
- <p>{block:ContentSource}Source: <a href="{SourceURL}">{SourceLink}</a> {/block:ContentSource}
- {block:RebloggedFrom} <a href="{ReblogParentURL}" target="_blank"></a>{/block:RebloggedFrom}</p>
- <p><b>Notes:</b> {notecount}</p>
- {/block:NoteCount}
- <p><b>Reblogged on:</b> {block:Date}{DayOfMonth}{DayOfMonthSuffix} of {Month} {Year}</p>{/block:Date}
- <p><b>Tags:</b>{block:HasTags}Tags:{block:Tags}<a href="{TagURL}"> #{Tag} </a>{/block:Tags}</p>{/block:HasTags}
- </div>{/block:PostNotes}
- {block:PostNotes}<div class="permanotes">{PostNotes}</div>{/block:PostNotes}
- {/block:permalinkpage}
- </div> <!-- End of Post -->
- {/block:Posts}
- </div> <!-- End of Post Container -->
- </div>
- </div> <!-- end of container -->
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement