Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <tile>{Title}</tile>
- <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
- <meta name="viewport" content="width=device-width, initial-scale=1">
- <meta name="image:header" content="https://static.tumblr.com/2cce058190c90a7316b1c0dcb2446503/tns7vxl/wfVp45jwr/tumblr_static_ehjtbb1tjlwgks8ow800o40cw.gif">
- <meta name="image:Avatar" content="http://i.imgur.com/98g9yMP.png">
- <meta name="color:sidebar" content="black">
- <meta name="color:navbar" content="black">
- <meta name="color:navbar-hover" content="pink">
- <meta name="color:background" content="black">
- <meta name="text:Link One" content="Link One">
- <meta name="text:Link One URL" content="Link One URL">
- <meta name="text:Link Two" content="Link Two">
- <meta name="text:Link Two URL" content="Link Two URL">
- <meta name="text:Link Three" content="Link Three">
- <meta name="text:Link Three URL" content="Link Three URL">
- <meta name="text:Link Four" content="Link Four">
- <meta name="text:Link Four URL" content="Link Four URL">
- <meta name="text:Link Five" content="Link Five">
- <meta name="text:Link Five URL" content="Link Five URL">
- <meta name="text:Link Six" content="Link Six">
- <meta name="text:Link Six URL" content="Link Six URL">
- <meta name="text:Link Seven" content="Link Seven">
- <meta name="text:Link Seven URL" content="Link Seven URL">
- <meta name="text:Link Eight" content="Link Eight">
- <meta name="text:Link Eight URL" content="Link Eight URL">
- <style type="text/css">
- /**header*/
- .header {
- width: auto;
- height: 300px;
- background-image: url("{image:header}");
- background-repeat: no-repeat;
- background-size: cover;
- background-color: black;
- margin-top:-40px;
- }
- #navbar {
- overflow: hidden;
- background-color: {color:navbar};
- margin-left:260px;
- width:100%;
- }
- #navbar a {
- float: left;
- display: block;
- color: #006f94
- text-align: center;
- padding: 14px 16px;
- text-decoration: none;
- font-size: 17px;
- }
- #navbar a:hover {
- color:{color:navbar-hover};
- }
- #avatar{
- width: 200px;
- margin-left: 30px;
- }
- .content {
- padding: 16px;
- }
- .sticky {
- position: fixed;
- top: 0;
- width: 100%;
- }
- .sticky + .content {
- padding-top: 60px;
- }
- /*****END header********/
- body {
- background-color: {color:background};
- font-family:'Gibson', sans-serif;
- font-size: 11px;
- color:#006f94;
- }
- a {
- text-decoration:none;
- color:#006f94;
- -webkit-transition: all 0.7s ease;
- -moz-transition: all 0.7s ease;
- -o-transition: all 0.7s ease;
- }
- a:hover {
- color:white;
- }
- b, strong {
- color:#878787;
- text-transform:uppercase;
- }
- i, em {
- color:#878787;
- font-family:'Bookman', serif;
- }
- blockquote {
- padding:2px 7px;
- margin:3px 0 3px 8px;
- border-left:1px solid #006f94;
- }
- blockquote img {
- max-width:100%;
- height:auto;
- }
- img {
- max-width: 100%;
- }
- h1 {
- font-size:30px;
- line-height:30px;
- text-align:right;
- padding:10px;
- }
- #container {
- margin-left:300px;
- left:300px;
- }
- .posts {
- width:500px;
- background-color:#ffffff;
- padding:10px;
- margin-bottom:30px;
- }
- .permalinks {
- background-color:#eee;
- padding:5px;
- height:12px;
- }
- .permalinks a {
- text-decoration:none;
- font-size: 9px;
- color:#f2992e;
- }
- .permalinks a:hover {
- color:#636363;
- }
- .date {
- float:left;
- }
- .reblogs {
- float:right;
- }
- {block:PermalinkPage}
- .tags {
- text-align:center;
- }
- .tags a {
- text-decoration:none;
- font-size: 8px;
- text-transform:uppercase;
- color:#636363;
- }
- .tags a:hover {
- color:#f2992e;
- }
- {/block:PermalinkPage}
- /****Sidebar****/
- #sidebar {
- position:fixed;
- left:0px;
- top:0px;
- height:100%;
- width:270px;
- background:#000;
- }
- #sidebar h1{
- font-family: 'Pacifico', cursive;
- text-align:center;
- }
- #description {
- font-size:10px;
- color:#fff;
- text-align:justify;
- padding:10px;
- }
- #links {
- font-size:16px;
- padding:10px;
- }
- #links a {
- display:inline-block;
- color:#006f94;
- padding-right:10px;
- -webkit-transition: all 0.7s ease;
- -moz-transition: all 0.7s ease;
- -o-transition: all 0.7s ease;
- }
- #links a:hover {
- color:#dddddd;
- }
- .link-home{
- font-size: 10px;
- }
- .link-ask{
- font-size:10px;
- margin-left: 60px
- }
- .link-one{
- font-size:10px;
- margin-left: 30px
- }
- .link-two{
- font-size:10px;
- }
- /***end sidebar*******/
- #pagination {
- position:fixed;
- bottom:30px;
- left:850px;
- }
- #pagination a {
- color:#006f94;
- font-size:20px;
- -webkit-transition: all 0.7s ease;
- -moz-transition: all 0.7s ease;
- -o-transition: all 0.7s ease;
- }
- #pagination a:hover {
- color:#ffffff;
- }
- .asker {
- font-size:15px;
- font-style: italic;
- text-align:center;
- border-bottom:1px solid #eee;
- margin-bottom:5px;
- padding-bottom:3px;
- }
- .question {
- font-style: italic;
- padding-left:50px;
- padding-right:50px;
- }
- .quote {
- font-size:13px;
- letter-spacing:1px;
- text-align:center;
- border-bottom:1px solid #eee;
- margin-bottom:5px;
- padding-bottom:3px;
- }
- .quotesource {
- font-size:10px;
- letter-spacing:1px;
- text-align:center;
- margin-bottom:5px;
- }
- /***Search Bar***/
- .search{
- position:relative;
- }
- .sfm input {background-color: transparent;
- font-size: 8px;
- border: 1px solid :#f2992e;
- text-transform: uppercase;
- margin-top: 0px;
- color: #999;
- letter-spacing: 1px;
- padding: 4px 8px;
- font-family: calibri, helvetica, arial;}
- #sb {
- height: 15px; vertical-align: top;
- }
- /******************/
- /*****Credit, do not touch*****/
- .credit{
- position: fixed;
- bottom: 8px;
- right: 16px;
- }
- /***************/
- </style>
- </head>
- <body>
- <div class="header">
- </div>
- <div id="navbar">
- <ul>
- <a href="{text:Link Three URL}"><img src=https://i.imgur.com/4ZzySjA.png style="height: 30px">{text:Link Three}</a>
- <a href="{text:Link Four URL}"><img src=https://i.imgur.com/E1744vA.png style="height: 30px">{text:Link Four}</a>
- <a href="{text:Link Five URL}"><img src=https://i.imgur.com/E1744vA.pngg style="height: 30px">{text:Link Five}</a>
- <a href="{text:Link Six URL}"><img src=https://i.imgur.com/E1744vA.png style="height: 30px">{text:Link Six}</a>
- <a href="{text:Link Seven URL}"><img src=https://i.imgur.com/E1744vA.png style="height: 30px">{text:Link Seven}</a>
- <a href="{text:Link Eight URL}"><img src=https://i.imgur.com/E1744vA.png style="height: 30px">{text:Link Eight}</a>
- </ul>
- </div>
- <div id="sidebar">
- <h1>{Title}</h1>
- <div id="avatar"><img src="{image:Avatar}"></div>
- <div id="description">{block:Description}{Description}{/block:Description}
- <div class= "search"><br>
- <form action="/search" method="get" class="sfm">
- <input type="text" name="q" value="{SearchQuery}" id="sf"/>
- <input type="image" value="Search" src="http://static.tumblr.com/f1skqpy/Oxbn13qun/search_icon.png" id="sb"/>
- </form>
- </div>
- </div>
- <div id="links">
- <div class="link-home"><a href="/"><img src=https://i.imgur.com/4ZzySjA.png style="height: 60px">home</a> </div>
- <div class="link-ask"></link-ask><a href="/ask"><img src=https://i.imgur.com/E1744vA.png style="height: 40px">Send me a Bunny</a> </div>
- <div class="link-one"><a href="{text:Link One URL}"><img src=https://i.imgur.com/E1744vA.png style="height: 40px">{text:Link One}</a> </div>
- <div class="link-two"><a href="{text:Link Two URL}"><img src=https://i.imgur.com/E1744vA.png style="height: 40px">{text:Link Two}</a> </div>
- </div>
- </div>
- </div>
- <div id="pagination">{block:Pagination}
- {block:PreviousPage}<a href="{PreviousPage}">prev</a>{/block:PreviousPage} {block:NextPage}<a href="{NextPage}">next</a>
- {/block:NextPage}
- {/block:Pagination}</div>
- <div id="container">
- {block:Posts}
- <div class="posts">
- {block:Text}{block:Title}{Title}{/block:Title}{Body}{/block:Text}
- {block:Photo}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{block:Caption}{Caption}{/block:Caption}{/block:Photo}
- {block:Panorama}{LinkOpenTag}<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>{LinkCloseTag}{block:Caption}{Caption}{/block:Caption}{/block:Panorama}
- {block:Photoset}{Photoset-500}{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
- {block:Quote}<div class="quote">{Quote}</div>{block:Source}<div class="quotesource">{Source}</div>{/block:Source}{/block:Quote}
- {block:Link}<a href="{URL}" class="link" {Target}>{Name}</a>{block:Description}{Description}{/block:Description}{/block:Link}
- {block:Chat}{block:Title}{Title}</a>{/block:Title}
- {block:Lines}<li>{block:Label}{Label}{/block:Label}{Line}</li>{/block:Lines}{/block:Chat}
- {block:Video}{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:Video}
- {block:Audio}{AudioEmbed}{block:Caption}{Caption}{/block:Caption}{/block:Audio}
- {block:Answer}
- <div class="asker">{Asker} whispered</div>
- <div class="question">{Question}</div>
- {Answer}
- {/block:Answer}
- <div class="permalinks">
- <div class="date"><a href="{Permalink}">{DayOfMonth}{DayOfMonthSuffix} {ShortMonth} {Year} </a><a href="{Permalink}">{block:NoteCount}{NoteCount}{/block:NoteCount}</a></div>
- <div class="reblogs">{block:RebloggedFrom}
- <a href="{ReblogParentURL}">via;</a>
- <a href="{ReblogRootURL}">source;</a>
- {/block:RebloggedFrom} <a href="{ReblogURL}">reblog</a></div>
- </div>
- {block:PermalinkPage}<div class="tags">{block:HasTags}{block:Tags}<a href="{TagUrl}"> {Tag}</a>{/block:Tags}{/block:HasTags}</div>{/block:PermalinkPage}
- </div>
- {/block:Posts}
- </div>
- {block:ContentSource}
- <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
- width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
- {/block:SourceLogo}
- {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
- {/block:ContentSource}
- <div class="credit">
- <a href="rupertthebunny"><img src= https://image.ibb.co/ny04mx/rabbit.png style="height: 30px"></a>
- </div>
- <!--------Script--------->
- <script>
- // When the user scrolls the page, execute myFunction
- window.onscroll = function() {myFunction()};
- // Get the navbar
- var navbar = document.getElementById("navbar");
- // Get the offset position of the navbar
- var sticky = navbar.offsetTop;
- // Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
- function myFunction() {
- if (window.pageYOffset >= sticky) {
- navbar.classList.add("sticky")
- } else {
- navbar.classList.remove("sticky");
- }
- }
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement