API tools faq
paste
HighKingFen

High King Fen

HighKingFen
Oct 13th, 2019
146
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 14.21 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3. <link href="https://fonts.googleapis.com/css?family=Barlow+Semi+Condensed|Changa|Cookie|Great+Vibes|Marck+Script" rel="stylesheet">
  4. <head>
  5. <title>{Title}</title>
  6.  
  7. <meta name="color:link" content="#DDA6AE" />
  8. <meta name="color:bold" content="#FFFFFF" />
  9. <meta name="color:italic" content="#FFE6EA" />
  10.  
  11. <meta name="if:sideimage" content="1">
  12.  
  13.  
  14. <meta name="text:link one" content="Link One" />
  15. <meta name="text:link one URL" content="URL HERE" />
  16. <meta name="text:link two" content="Link Two" />
  17. <meta name="text:link two URL" content="URL HERE" />
  18. <meta name="text:link three" content="Link Three" />
  19. <meta name="text:link three URL" content="URL HERE"/>
  20. <meta name="text:link four" content="Link Four" />
  21. <meta name="text:link four URL" content="URL HERE" />
  22.  
  23. <meta name="text:info one" content="Info One" />
  24. <meta name="text:inside info one" content="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris dictum facilisis augue. Duis condimentum augue id magna semper rutrum. Donec iaculis gravida nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos." />
  25. <meta name="text:info two" content="Info Two" />
  26. <meta name="text:inside info two" content="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris dictum facilisis augue. Duis condimentum augue id magna semper rutrum. Donec iaculis gravida nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos." />
  27. <meta name="text:info three" content="Info Three" />
  28. <meta name="text:inside info three" content="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris dictum facilisis augue. Duis condimentum augue id magna semper rutrum. Donec iaculis gravida nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos." />
  29. <meta name="text:info four" content="Info Four" />
  30. <meta name="text:inside info four" content="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris dictum facilisis augue. Duis condimentum augue id magna semper rutrum. Donec iaculis gravida nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos." />
  31.  
  32. <style>
  33. body, html {
  34. background-image: url('https://78.media.tumblr.com/6ab8e66ca65a1b1d480accf6f80e53db/tumblr_pcxzbwGACS1wd05tno1_r1_1280.png');
  35. height: 100%;
  36. background-attachment: fixed!important;
  37. background-position: center;
  38. background-repeat: no-repeat;
  39. background-size: cover;
  40. margin: 0;
  41. font-family: 'Barlow Semi Condensed', sans-serif;
  42.  
  43. }
  44.  
  45. /***************right*************************/
  46. .right{
  47. right:0;
  48. width: 500px;
  49. padding: 15px 10px;
  50. position: fixed;
  51. margin-right: 10px;
  52. top: 40px;
  53. }
  54.  
  55. .right h1{
  56. color:#b76e79;
  57. text-shadow:5px 5px 5px #000000;
  58. margin-left:120px;
  59. font-family: 'Great Vibes', cursive;
  60. font-size: 41px;
  61. }
  62.  
  63. .sideimg{
  64.  
  65. width: 140px;
  66. margin-left: 180px;
  67. }
  68.  
  69. .sideimg img{
  70. opacity: 0.2;
  71. border-radius: 130px;
  72. height: 140px;
  73. -moz-box-shadow:10px 10px 5px #000000;
  74. -webkit-box-shadow:10px 10px 5px #000000;
  75. box-shadow:10px 10px 5px #000000;
  76. }
  77.  
  78. .sideimg img:hover{
  79. opacity: 1;
  80. }
  81.  
  82. #description{
  83. color:white;
  84. text-shadow:5px 5px 5px #000000
  85. width: 200px;
  86. margin-left: 120px;
  87. font-size:14px;
  88. text-align: justify;
  89. padding: 0px 50px 0px 0px;
  90. font-family: 'Changa', sans-serif
  91. }
  92.  
  93. /* Style the tab buttons */
  94. .tablink {
  95. background-color: rgba(0, 0, 0, 0.6);
  96. color: white;
  97. float: left;
  98. border: none;
  99. outline: none;
  100. cursor: pointer;
  101. padding: 12px 46px;
  102. font-size: 10px;
  103. width: 25%;
  104. }
  105.  
  106. .tablink:hover {
  107. background-color: gray;
  108. }
  109.  
  110. .tablink:active {
  111. background-color: gray;
  112. }
  113. .tabcontent {
  114. color: white;
  115. display: none;
  116. padding: 50px;
  117. text-align: justify;
  118. font-family: 'Changa', sans-serif;
  119. }
  120.  
  121. .tabcontent h3{
  122. font-family: 'Cookie', cursive;
  123. font-size:25px;
  124. }
  125.  
  126. .tabcontent a{
  127. color:#DDA6AE;
  128. }
  129.  
  130.  
  131. #London {
  132. background-color:rgba(0, 0, 0, 0.6);
  133. text-align: justify;
  134. }
  135.  
  136. #Paris {
  137. background-color:rgba(0, 0, 0, 0.6);
  138. text-align: justify;
  139. }
  140.  
  141. #Montreal {
  142. background-color:rgba(0, 0, 0, 0.6);
  143. text-align: justify;
  144. }
  145.  
  146. #NewYork {
  147. background-color:rgba(0, 0, 0, 0.6);
  148. text-align: justify;
  149. }
  150.  
  151. .close {
  152. cursor: pointer;
  153. position: absolute;
  154. top: 390px;
  155. right: 0;
  156. padding: 12px 16px;
  157. transform: translate(0%, -50%);
  158. }
  159.  
  160. .close:hover {background: #bbb;}
  161.  
  162.  
  163. .iflink{
  164.  
  165. }
  166.  
  167. .iflink a{
  168. color: #DDA6AE;
  169. text-shadow:5px 5px 5px #000000;
  170. margin-left:55px;
  171. margin-top: 10px;
  172. }
  173. /**************************************************/
  174.  
  175. .post {
  176. background: rgba(0, 0, 0, 0.6);
  177. border: 1px solid #DDA6AE;
  178. padding: 20px;
  179. margin-bottom:40px;
  180. margin-top: 20px;
  181. margin-left: auto;
  182. margin-right: 600px;
  183. border-radius: 6px;
  184. width: 500px;
  185. font-size:18px;
  186. text-align: justify;
  187. color:#b76e79;
  188. text-shadow:5px 5px 5px #000000;
  189.  
  190.  
  191.  
  192. }
  193. .post img{
  194. border:0;
  195. display:block;
  196. height:auto;
  197. max-width: 100%
  198. }
  199.  
  200. .post h1{
  201. font-family: 'Marck Script', cursive
  202. }
  203. .post a {
  204. color:{color:link};
  205. text-shadow:5px 5px 5px #000000;
  206. }
  207.  
  208. .post b{
  209. color:{color:bold};
  210. text-shadow:5px 5px 5px #000000;
  211. }
  212.  
  213. .post i {
  214. color:{color:italic};
  215. text-shadow:5px 5px 5px #000000;
  216. font-family: 'Cookie', cursive;
  217. }
  218.  
  219.  
  220. .avatar {
  221. margin: 60px 30px;
  222. border-radius: 100%;
  223. }
  224. .container {
  225. max-width: 640px;
  226. margin: 0 auto;
  227.  
  228. }
  229. .like-reblog {
  230. list-style: none;
  231. border: 1px solid #ccc;
  232. background: #444;
  233.  
  234.  
  235.  
  236. }
  237. .like-reblog li {
  238. float: right;
  239. padding: 6px;
  240. height: 20px;
  241. position:relative;
  242. }
  243.  
  244. .page{
  245. background: #222;
  246. padding: 20px;
  247. }
  248.  
  249. .page a{
  250. text-decoration: none;
  251. color: #b76e79;;
  252. }
  253.  
  254. .pagelist{
  255. margin: 0 auto;
  256. width: 640px;
  257. }
  258.  
  259. .pagenav{
  260.  
  261. text-align: center;
  262. }
  263.  
  264. .pagenav a:link{
  265. color#b76e79;
  266. font-size: 20px;
  267. text-shadow:5px 5px 5px #000000;
  268.  
  269. }
  270.  
  271. .pagenav a:selected{
  272. color#b76e79;
  273. font-size: 20px;
  274. text-shadow:5px 5px 5px #000000;
  275.  
  276. }
  277.  
  278. .pagenav a:visited{
  279. color:white;
  280. text-shadow:5px 5px 5px #000000;
  281. }
  282.  
  283. .pagenav a:active{
  284. color#b76e79;
  285. font-size: 20px;
  286. text-shadow:5px 5px 5px #000000;
  287.  
  288. }
  289.  
  290.  
  291. .content{
  292. margin:auto;
  293.  
  294. }
  295.  
  296. /***Search Bar***/
  297. .search{
  298. position:relative;
  299. margin-left:200px;
  300. margin-bottom:10px;
  301.  
  302.  
  303. }
  304.  
  305. .sfm input {
  306. background-color: transparent;
  307. font-size: 8px;
  308. border: 1px solid :#f2992e;
  309. text-transform: uppercase;
  310. margin-top: 0px;
  311. color: #999;
  312. letter-spacing: 1px;
  313. padding: 4px 20px;
  314.  
  315.  
  316. #sb {
  317.  
  318. height: 15px;
  319.  
  320. }
  321. /****/
  322.  
  323. /**************************************************/
  324. /*****Credit, do not touch*****/
  325. .credit{
  326. position: fixed;
  327. bottom: 8px;
  328. right: 16px;
  329.  
  330. }
  331.  
  332. /*************/
  333. {CustomCSS}
  334.  
  335. </style>
  336. </head>
  337. <body>
  338.  
  339. <div class= "right">
  340. {block:ifsideimage}
  341. <div class="sideimg"><img src={image:sidenav}></div>{/block:ifsideimage}
  342. <h1>{Title}</h1>
  343. <div id= description>{description}</div>
  344.  
  345.  
  346. <br>
  347. {block:Pagination}
  348. <div class="pagenav">
  349. {block:PreviousPage}<a href="{PreviousPage}">Previous</a>{/block:PreviousPage}
  350. {block:NextPage}<a href="{NextPage}">Next</a>{/block:NextPage}
  351. </div>
  352. {/block:Pagination}</li>
  353.  
  354. <div class="iflink">
  355. <a href="{text:link one URL}">{text:link one}</a>
  356. <a href="{text:link two URL}">{text:link two}</a>
  357. <a href="{text:link three URL}">{text:link three}</a>
  358. <a href="{text:link four URL}">{text:link four}</a>
  359. </div>
  360.  
  361.  
  362. <div class= "search"><br>
  363. <form action="/search" method="get" class="sfm">
  364. <input type="text" name="q" value="{SearchQuery}" id="sf"/>
  365. <input type="image" value="Search" src="http://static.tumblr.com/f1skqpy/Oxbn13qun/search_icon.png" id="sb"/>
  366. </form></li></div>
  367.  
  368. <button class="tablink" onclick="openCity('London', this, 'rgba(0, 0, 0, 0.6)')" >{text:info one}</button>
  369.  
  370. <div id="London" class="tabcontent"><span class="close">x</span>
  371. <h3>{text:info one}</h3>
  372. <p>{text:inside info one}.</p>
  373. </div>
  374.  
  375. <button class="tablink" onclick="openCity('Paris', this, 'rgba(0, 0, 0, 0.6)')" >{text:info two}</button>
  376.  
  377. <div id="Paris" class="tabcontent"><span class="close">x</span>
  378. <h3>{text:info two}</h3>
  379. <p>{text:inside info two}.</p>
  380. </div>
  381.  
  382.  
  383. <button class="tablink" onclick="openCity('Montreal', this, 'rgba(0, 0, 0, 0.6)')" >{text:info three}</button>
  384.  
  385. <div id="Montreal" class="tabcontent"><span class="close">x</span>
  386. <h3>{text:info three}</h3>
  387. <p>{text:inside info three}.</p>
  388. </div>
  389.  
  390. <button class="tablink" onclick="openCity('NewYork', this, 'rgba(0, 0, 0, 0.6)')" >{text:info four}</button>
  391.  
  392. <div id="NewYork" class="tabcontent"><span class="close">x</span>
  393. <h3>{text:info four}</h3>
  394. <p>{text:inside info four}.</p>
  395. </div>
  396.  
  397.  
  398.  
  399.  
  400. </div>
  401. <!------------Tumblr base do not touch------>
  402.  
  403. <div class="content">
  404. {block:HasPages}
  405. <div class="page"> {block:Pages}<div class= "pagelist"><a href="{URL}">{Label}</a></div>{/block:Pages}</div>
  406. {/block:HasPages}
  407.  
  408. {block:Posts}
  409.  
  410. {block:Text}
  411. <div class="post">
  412. {block:Title}
  413. <h3>
  414. <a href="{Permalink}">{Title}</a><hr>
  415. </h3>
  416. {/block:Title}
  417. {Body}
  418.  
  419. <ul class="like-reblog">
  420. <li>{ReblogButton color="grey"}</li>
  421. <li>{LikeButton color="grey"}</li>
  422. <li>{block:NoteCount}<a href="{Permalink}#notes">{NoteCountWithLabel}</a>{/block:NoteCount}</li>
  423. </ul>
  424.  
  425. <div id=tag>{block:HasTags} {block:Tags}<a href="{TagURL}"> #{Tag}</a> {/block:Tags}{/block:hasTags}</div>
  426.  
  427. </div>
  428.  
  429. {block:PostNotes}{PostNotes}{/block:PostNotes}
  430. {/block:Text}
  431.  
  432. {block:Photo}
  433. <div class="post">
  434. <img src="{PhotoURL-500}">
  435. {block:Caption}{Caption}{/block:Caption}
  436. <ul class="like-reblog">
  437. <li>{ReblogButton color="grey"}</li>
  438. <li>{LikeButton color="grey"}</li>
  439. <li>{block:NoteCount}<a href="{Permalink}#notes">{NoteCountWithLabel}</a>{/block:NoteCount}</li>
  440. </ul>
  441. <br>{block:HasTags} {block:Tags}<a href="/{TagURL}"> #{Tag}</a> {/block:Tags}{/block:hasTags}
  442.  
  443. </div>
  444. {block:PostNotes}{PostNotes}{/block:PostNotes}
  445. {/block:Photo}
  446.  
  447. {block:Quote}
  448. <div class="post">
  449. {Quote}
  450. {block:Source}<br>&mdash;{Source}{/block:Source}
  451. <ul class="like-reblog">
  452. <li>{ReblogButton color="grey"}</li>
  453. <li>{LikeButton color="grey"}</li>
  454. <li>{block:NoteCount}<a href="{Permalink}#notes">{NoteCountWithLabel}</a>{/block:NoteCount}</li>
  455. </ul>
  456. <div id=tag>{block:HasTags} {block:Tags}<a href="{TagURL}"> #{Tag}</a> {/block:Tags}{/block:hasTags}</div>
  457.  
  458. </div>
  459. {block:PostNotes}{PostNotes}{/block:PostNotes}
  460. {/block:Quote}
  461.  
  462. {block:Link}
  463. <div class="post">
  464. <a href="{URL}" {Target}>{Name}</a>
  465. {block:Description}{Description}{/block:Description}
  466. <ul class="like-reblog">
  467. <li>{ReblogButton color="grey"}</li>
  468. <li>{LikeButton color="grey"}</li>
  469. <li>{block:NoteCount}<a href="{Permalink}#notes">{NoteCountWithLabel}</a>{/block:NoteCount}</li>
  470. </ul>
  471. </div>
  472. <div id=tag>{block:HasTags} {block:Tags}<a href="{TagURL}"> #{Tag}</a> {/block:Tags}{/block:hasTags}</div>
  473. {block:PostNotes}{PostNotes}{/block:PostNotes}}
  474. {/block:Link}
  475.  
  476. {block:Chat}
  477. <div class="post">
  478. {block:Title}{Title}{/block:Title}
  479. <table>
  480. {block:Lines}
  481. <tr>
  482. <th>{block:Label}{Label}{/block:Label}</th>
  483. <td>{Line}</td>
  484. </tr>
  485. {/block:Lines}
  486. </table>
  487. <ul class="like-reblog">
  488. <li>{ReblogButton color="grey"}</li>
  489. <li>{LikeButton color="grey"}</li>
  490. <li>{block:NoteCount}<a href="{Permalink}#notes">{NoteCountWithLabel}</a>{/block:NoteCount}</li>
  491. </ul>
  492. <div id=tag>{block:HasTags} {block:Tags}<a href="{TagURL}"> #{Tag}</a> {/block:Tags}{/block:hasTags}</div>
  493.  
  494. </div>
  495. {block:PostNotes}{PostNotes}{/block:PostNotes}
  496. {/block:Chat}
  497.  
  498. {block:Audio}
  499. <div class="post">
  500. {AudioPlayer}
  501. {block:Caption}{Caption}{/block:Caption}
  502. <ul class="like-reblog">
  503. <li>{ReblogButton color="grey"}</li>
  504. <li>{LikeButton color="grey"}</li>
  505. <li>{block:NoteCount}<a href="{Permalink}#notes">{NoteCountWithLabel}</a>{/block:NoteCount}</li>
  506. <div id=tag>{block:HasTags} {block:Tags}<a href="{TagURL}"> #{Tag}</a> {/block:Tags}{/block:hasTags}</div>
  507.  
  508. </ul>
  509. </div>
  510. {block:PostNotes}{PostNotes}{/block:PostNotes}
  511. {/block:Audio}
  512.  
  513. {block:Video}
  514. <div class="post">
  515. {Video-500}
  516. {block:Caption}{Caption}{/block:Caption}
  517. <ul class="like-reblog">
  518. <li>{ReblogButton color="grey"}</li>
  519. <li>{LikeButton color="grey"}</li>
  520. <li>{block:NoteCount}<a href="{Permalink}#notes">{NoteCountWithLabel}</a>{/block:NoteCount}</li>
  521. </ul>
  522. <div id=tag>{block:HasTags} {block:Tags}<a href="{TagURL}"> #{Tag}</a> {/block:Tags}{/block:hasTags}</div>
  523.  
  524. </div>
  525. {block:PostNotes}{PostNotes}{/block:PostNotes}
  526. {/block:Video}
  527.  
  528. {/block:Posts}
  529.  
  530.  
  531.  
  532. <!-----------Script and credit do not touch--------------->
  533. <div class="credit">
  534. <a href="rupertthebunny"><img src= https://image.ibb.co/ny04mx/rabbit.png style="height: 30px"></a>
  535. </div>
  536.  
  537. </div>
  538.  
  539. <script>
  540. function openCity(cityName,elmnt,color) {
  541. var i, tabcontent, tablinks;
  542. tabcontent = document.getElementsByClassName("tabcontent");
  543. for (i = 0; i < tabcontent.length; i++) {
  544. tabcontent[i].style.display = "none";
  545. }
  546. tablinks = document.getElementsByClassName("tablink");
  547. for (i = 0; i < tablinks.length; i++) {
  548. tablinks[i].style.backgroundColor = "";
  549. }
  550. document.getElementById(cityName).style.display = "block";
  551. elmnt.style.backgroundColor = color;
  552.  
  553. }
  554. </script>
  555. <script>
  556. var closebtns = document.getElementsByClassName("close");
  557. var i;
  558.  
  559. for (i = 0; i < closebtns.length; i++) {
  560. closebtns[i].addEventListener("click", function() {
  561. this.parentElement.style.display = 'none';
  562. });
  563. }
  564. </script>
  565.  
  566. </div>
  567. </body>
  568. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!