HighKingFen

TM:R Request

Mar 26th, 2019
192
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.13 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <tile>{Title}</tile>
  5. <link href="https://fonts.googleapis.com/css?family=Cinzel|Great+Vibes|Orbitron" rel="stylesheet">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <meta name="image:header" content="https://static.tumblr.com/2cce058190c90a7316b1c0dcb2446503/tns7vxl/wfVp45jwr/tumblr_static_ehjtbb1tjlwgks8ow800o40cw.gif">
  8. <meta name="image:Avatar" content="http://i.imgur.com/98g9yMP.png">
  9.  
  10. <meta name="color:sidebar" content="#06070D">
  11. <meta name="color:navbar" content="#06070D">
  12. <meta name="color:navbar-hover" content="#3A8ABF">
  13. <meta name="color:background" content="#06070Dk">
  14. <meta name="color:text" content="#3A8ABF">
  15. <meta name="color:link" content="#3A8ABF">
  16. <meta name="color:link hover" content="gold">
  17.  
  18.  
  19.  
  20. <meta name="text:Episode" content="S01E01">
  21. <meta name="text:Episode Title" content="Unauthorized Magic">
  22. <meta name="text:Date" content="31 Feb 2020">
  23. <meta name="text:Quote" content="Quote of the Upcoming Episode">
  24.  
  25. <meta name="text:Link One" content="Link One">
  26. <meta name="text:Link One URL" content="Link One URL">
  27. <meta name="text:Link Two" content="Link Two">
  28. <meta name="text:Link Two URL" content="Link Two URL">
  29. <meta name="text:Link Three" content="Link Three">
  30. <meta name="text:Link Three URL" content="Link Three URL">
  31. <meta name="text:Link Four" content="Link Four">
  32. <meta name="text:Link Four URL" content="Link Four URL">
  33. <meta name="text:Link Five" content="Link Five">
  34. <meta name="text:Link Five URL" content="Link Five URL">
  35. <meta name="text:Link Six" content="Link Six">
  36. <meta name="text:Link Six URL" content="Link Six URL">
  37. <meta name="text:Link Seven" content="Link Seven">
  38. <meta name="text:Link Seven URL" content="Link Seven URL">
  39. <meta name="text:Link Eight" content="Link Eight">
  40. <meta name="text:Link Eight URL" content="Link Eight URL">
  41.  
  42. <style type="text/css">
  43.  
  44. /**header*/
  45. .header {
  46. width: 800;
  47. height: 300px;
  48. background-image: url("{image:header}");
  49. background-repeat: no-repeat;
  50. background-size: cover;
  51. background-color: ##06070D;
  52. margin-top:-40px;
  53. margin-left:270px;
  54. }
  55.  
  56. #navbar {
  57. overflow: hidden;
  58. background-color: {color:navbar};
  59. margin-left:260px;
  60. width:100%;
  61.  
  62. }
  63.  
  64. #navbar a {
  65. float: left;
  66. display: block;
  67. color: {color:link};
  68. text-align: center;
  69. padding: 14px 16px;
  70. text-decoration: none;
  71. font-size: 14px;
  72. }
  73.  
  74. #navbar a:hover {
  75. color:{color:navbar-hover};
  76. }
  77.  
  78. #avatar{
  79. width: 200px;
  80. margin-left: 30px;
  81. opacity:0.5;
  82.  
  83. }
  84.  
  85. #avatar:hover{
  86. opacity: 1;
  87. }
  88.  
  89. #avatar img{
  90. border-radius: 50%;
  91. }
  92.  
  93. .content {
  94. padding: 16px;
  95. }
  96.  
  97. .sticky {
  98. position: fixed;
  99. top: 0;
  100. width: 100%;
  101. }
  102.  
  103. .sticky + .content {
  104. padding-top: 60px;
  105. }
  106.  
  107. /*****END header********/
  108. body {
  109. background-color: {color:background};
  110. font-family:'Gibson', sans-serif;
  111. font-size: 11px;
  112. color:{color:text};
  113. font-family: 'Cinzel', serif;
  114. }
  115.  
  116. a {
  117. text-decoration:none;
  118. color:{color:link};
  119. -webkit-transition: all 0.7s ease;
  120. -moz-transition: all 0.7s ease;
  121. -o-transition: all 0.7s ease;
  122. }
  123.  
  124. a:hover {
  125. color:{color:link hover};
  126. }
  127.  
  128. b, strong {
  129. color:gold;
  130. text-transform:uppercase;
  131. }
  132.  
  133. i, em {
  134. color:gold;
  135. font-family:'Bookman', serif;
  136. }
  137.  
  138. blockquote {
  139. padding:2px 7px;
  140. margin:3px 0 3px 8px;
  141. border-left:1px solid #006f94;
  142. }
  143.  
  144. blockquote img {
  145. max-width:100%;
  146. height:auto;
  147. }
  148.  
  149. img {
  150. max-width: 100%;
  151. }
  152.  
  153. h1 {
  154. font-size:20px;
  155. line-height:20px;
  156. text-align:right;
  157. padding:10px;
  158. font-family: 'Orbitron', sans-serif;
  159. }
  160.  
  161. #container {
  162. margin-left:400px;
  163. left:300px;
  164. }
  165.  
  166. .posts {
  167. width:500px;
  168. border: 2px solid #2A6191;
  169. padding:10px;
  170. margin-bottom:30px;
  171. }
  172.  
  173. .permalinks {
  174. background-color:#0C2136;
  175. padding:5px;
  176. height:12px;
  177. }
  178.  
  179. .permalinks a {
  180. text-decoration:none;
  181. font-size: 9px;
  182. color:{color:link};
  183. }
  184.  
  185. .permalinks a:hover {
  186. color:{color:link hover};
  187. }
  188.  
  189. .date {
  190. float:left;
  191. }
  192.  
  193. .reblogs {
  194. float:right;
  195. }
  196.  
  197. {block:PermalinkPage}
  198. .tags {
  199. text-align:center;
  200. }
  201.  
  202. .tags a {
  203. text-decoration:none;
  204. font-size: 8px;
  205. text-transform:uppercase;
  206. color:#636363;
  207. }
  208.  
  209. .tags a:hover {
  210. color:#f2992e;
  211. }
  212. {/block:PermalinkPage}
  213.  
  214. /****Sidebar****/
  215.  
  216. #sidebar {
  217. position:fixed;
  218. left:0px;
  219. top:0px;
  220. height:100%;
  221. width:270px;
  222. background:#06070D;
  223. }
  224.  
  225. #sidebarright {
  226. position:fixed;
  227. right:0px;
  228. top:0px;
  229. height:100%;
  230. width:170px;
  231. background:#06070D;
  232.  
  233. }
  234.  
  235. #sidebar h1{
  236. text-align:center;
  237. }
  238.  
  239. #description {
  240. font-size:10px;
  241. color:#fff;
  242. text-align:justify;
  243. padding:10px;
  244. }
  245.  
  246. #links {
  247. font-size:18px;
  248. padding:10px;
  249.  
  250. }
  251.  
  252. #links a {
  253. display:inline-block;
  254. color:{color:link};
  255. padding-right:10px;
  256. -webkit-transition: all 0.7s ease;
  257. -moz-transition: all 0.7s ease;
  258. -o-transition: all 0.7s ease;
  259. }
  260.  
  261. #links a:hover {
  262. color:{color:link hover};
  263. }
  264.  
  265. .link-home{
  266. font-size: 10px;
  267.  
  268. }
  269.  
  270. .link-ask{
  271. font-size:10px;
  272. margin-left: 60px
  273.  
  274. }
  275.  
  276. .link-one{
  277. font-size:10px;
  278. margin-left: 30px
  279.  
  280. }
  281.  
  282. .link-two{
  283. font-size:10px;
  284.  
  285.  
  286. }
  287.  
  288. #watch{
  289. margin-top:200px;
  290. font-size:15px;
  291. text-align:center;
  292. color:gold;
  293. }
  294. #watchtitle{
  295. color:white;
  296. }
  297.  
  298.  
  299.  
  300. /***end sidebar*******/
  301.  
  302. #pagination {
  303. position:fixed;
  304. bottom:60px;
  305. right:-10;
  306. font-family: 'Great Vibes', cursive;
  307.  
  308. }
  309.  
  310. #pagination a {
  311. color:gold;
  312. font-size:40px;
  313. -webkit-transition: all 0.7s ease;
  314. -moz-transition: all 0.7s ease;
  315. -o-transition: all 0.7s ease;
  316. }
  317.  
  318. #pagination a:hover {
  319. color:#3A8ABF;
  320. }
  321.  
  322. .asker {
  323. font-size:15px;
  324. font-style: italic;
  325. text-align:center;
  326. border-bottom:1px solid #eee;
  327. margin-bottom:5px;
  328. padding-bottom:3px;
  329. }
  330.  
  331. .question {
  332. font-style: italic;
  333. padding-left:50px;
  334. padding-right:50px;
  335. }
  336.  
  337. .quote {
  338. font-size:13px;
  339. letter-spacing:1px;
  340. text-align:center;
  341. border-bottom:1px solid #eee;
  342. margin-bottom:5px;
  343. padding-bottom:3px;
  344. }
  345.  
  346. .quotesource {
  347. font-size:10px;
  348. letter-spacing:1px;
  349. text-align:center;
  350. margin-bottom:5px;
  351. }
  352.  
  353.  
  354. /***Search Bar***/
  355. .search{
  356. position:relative;
  357. margin-left:60px;
  358. }
  359.  
  360. .sfm input {background-color: transparent;
  361. font-size: 8px;
  362. border: 1px solid :#f2992e;
  363. text-transform: uppercase;
  364. margin-top: 0px;
  365. color: #999;
  366. letter-spacing: 1px;
  367. padding: 4px 8px;
  368. font-family: calibri, helvetica, arial;}
  369.  
  370. #sb {
  371.  
  372. height: 15px; vertical-align: top;
  373.  
  374.  
  375. }
  376.  
  377.  
  378. #epquote{
  379. margin-top:60px;
  380. color:white;
  381. text-align:justify;
  382. font-size:13px;
  383. font-family: 'Great Vibes', cursive;
  384. }
  385.  
  386. /******************/
  387.  
  388. /*****Credit, do not touch*****/
  389. .credit{
  390. position: fixed;
  391. bottom: 8px;
  392. right: 16px;
  393. }
  394. /***************/
  395.  
  396. </style>
  397. </head>
  398. <body>
  399.  
  400. <div class="header">
  401. </div>
  402.  
  403. <div id="navbar">
  404. <ul>
  405. <a href="{text:Link Three URL}"><img src=https://i.imgur.com/4ZzySjA.png style="height: 30px">{text:Link Three}</a>
  406. <a href="{text:Link Four URL}"><img src=https://i.imgur.com/E1744vA.png style="height: 30px">{text:Link Four}</a>
  407. <a href="{text:Link Five URL}"><img src=https://i.imgur.com/E1744vA.pngg style="height: 30px">{text:Link Five}</a>
  408. <a href="{text:Link Six URL}"><img src=https://i.imgur.com/E1744vA.png style="height: 30px">{text:Link Six}</a>
  409. <a href="{text:Link Seven URL}"><img src=https://i.imgur.com/E1744vA.png style="height: 30px">{text:Link Seven}</a>
  410. <a href="{text:Link Eight URL}"><img src=https://i.imgur.com/E1744vA.png style="height: 30px">{text:Link Eight}</a>
  411.  
  412.  
  413. </ul>
  414.  
  415.  
  416. </div>
  417.  
  418. <div id="sidebarright">
  419.  
  420. <div id="watch">Currently watching
  421. <div id="watchepisode">{text:Episode}</div>
  422. <div id="watchtitle">{text:Episode Title}</div>
  423. on
  424. <div id"watchwhen">{text:Date}</div>
  425. </div>
  426.  
  427. <div id="epquote"><i>{text:quote}</i></div>
  428.  
  429.  
  430. <div id="pagination">{block:Pagination}
  431. {block:PreviousPage}<a href="{PreviousPage}">prev</a>{/block:PreviousPage} {block:NextPage}<a href="{NextPage}">next</a>
  432. {/block:NextPage}
  433. {/block:Pagination}</div>
  434.  
  435.  
  436. </div>
  437.  
  438. <div id="sidebar">
  439. <h1>{Title}</h1>
  440.  
  441. <div id="avatar"><img src="{image:Avatar}"></div>
  442.  
  443. <div id="description">
  444.  
  445.  
  446. <div class= "search"><br>
  447. <form action="/search" method="get" class="sfm">
  448. <input type="text" name="q" value="{SearchQuery}" id="sf"/>
  449. <input type="image" value="Search" src="https://static.tumblr.com/f1skqpy/Oxbn13qun/search_icon.png" id="sb"/>
  450. </form>
  451. </div>
  452. </div>
  453.  
  454. <div id="links">
  455. <div class="link-home"><a href="/"><img src=https://i.imgur.com/4ZzySjA.png style="height: 60px">home</a> </div>
  456. <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>
  457. <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>
  458. <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>
  459.  
  460. </div>
  461.  
  462.  
  463. </div>
  464. </div>
  465.  
  466.  
  467. <div id="container">
  468.  
  469. {block:Posts}
  470.  
  471. <div class="posts">
  472.  
  473. {block:Text}{block:Title}{Title}{/block:Title}{Body}{/block:Text}
  474.  
  475. {block:Photo}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{block:Caption}{Caption}{/block:Caption}{/block:Photo}
  476.  
  477. {block:Panorama}{LinkOpenTag}<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>{LinkCloseTag}{block:Caption}{Caption}{/block:Caption}{/block:Panorama}
  478.  
  479. {block:Photoset}{Photoset-500}{block:Caption}{Caption}{/block:Caption}{/block:Photoset}
  480.  
  481. {block:Quote}<div class="quote">{Quote}</div>{block:Source}<div class="quotesource">{Source}</div>{/block:Source}{/block:Quote}
  482.  
  483. {block:Link}<a href="{URL}" class="link" {Target}>{Name}</a>{block:Description}{Description}{/block:Description}{/block:Link}
  484.  
  485. {block:Chat}{block:Title}{Title}</a>{/block:Title}
  486. {block:Lines}<li>{block:Label}{Label}{/block:Label}{Line}</li>{/block:Lines}{/block:Chat}
  487.  
  488. {block:Video}{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:Video}
  489.  
  490. {block:Audio}{AudioEmbed}{block:Caption}{Caption}{/block:Caption}{/block:Audio}
  491.  
  492. {block:Answer}
  493. <div class="asker">{Asker} whispered</div>
  494. <div class="question">{Question}</div>
  495. {Answer}
  496. {/block:Answer}
  497.  
  498. <div class="permalinks">
  499. <div class="date"><a href="{Permalink}">{DayOfMonth}{DayOfMonthSuffix} {ShortMonth} {Year} </a><a href="{Permalink}">{block:NoteCount}{NoteCount}{/block:NoteCount}</a></div>
  500. <div class="reblogs">{block:RebloggedFrom}
  501. <a href="{ReblogParentURL}">via;</a>
  502. <a href="{ReblogRootURL}">source;</a>
  503. {/block:RebloggedFrom} <a href="{ReblogURL}">reblog</a></div>
  504. </div>
  505.  
  506. {block:PermalinkPage}<div class="tags">{block:HasTags}{block:Tags}<a href="{TagUrl}"> {Tag}</a>{/block:Tags}{/block:HasTags}</div>{/block:PermalinkPage}
  507.  
  508. </div>
  509.  
  510. {/block:Posts}
  511.  
  512. </div>
  513.  
  514. {block:ContentSource}
  515. <!-- {SourceURL}{block:SourceLogo}<img src="{BlackLogoURL}"
  516. width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />
  517. {/block:SourceLogo}
  518. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  519. {/block:ContentSource}
  520.  
  521. <div class="credit">
  522. <a href="rupertthebunny"><img src= https://image.ibb.co/ny04mx/rabbit.png style="height: 30px"></a>
  523. </div>
  524.  
  525. <!--------Script--------->
  526. <script>
  527. // When the user scrolls the page, execute myFunction
  528. window.onscroll = function() {myFunction()};
  529.  
  530. // Get the navbar
  531. var navbar = document.getElementById("navbar");
  532.  
  533. // Get the offset position of the navbar
  534. var sticky = navbar.offsetTop;
  535.  
  536. // Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
  537. function myFunction() {
  538. if (window.pageYOffset >= sticky) {
  539. navbar.classList.add("sticky")
  540. } else {
  541. navbar.classList.remove("sticky");
  542. }
  543. }
  544.  
  545. </script>
  546.  
  547.  
  548. </body>
  549. </html>
Advertisement
Add Comment
Please, Sign In to add comment