HighKingFen

JULIA

Jan 5th, 2021
299
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.10 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <title>{Title}</title>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7.  
  8.  
  9. {block:Description}
  10. <meta name="description" content="{MetaDescription}" />
  11. {/block:Description}
  12. <link rel="shortcut icon" href="{Favicon}">
  13. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  14.  
  15.  
  16. <!---images-->
  17. <meta name="image:sidebar" content="https://64.media.tumblr.com/feb839549dbdb48b730f437fea2be3b4/1fd5364f740f96f0-fd/s2048x3072/c9c489822276a43087963441989f1272028a6996.png">
  18.  
  19. <!--Color-->
  20. <meta name="color:accent" content="#c23a73">
  21. <meta name="color:text" content="#bbc">
  22. <meta name="color:links" content="#c23a73">
  23. <meta name="color:ask" content="#deb6e0">
  24. <meta name="color:replies" content="#916993"
  25.  
  26.  
  27.  
  28. <!---Text-->
  29. <meta name="text:linkOne" content="Link One">
  30. <meta name="text:linkOneUrl" content="/">
  31. <meta name="text:linkTwo" content="Link Two">
  32. <meta name="text:linkTwoUrl" content="/">
  33. <meta name="text:linkThree" content="Link Three">
  34. <meta name="text:linkThreeUrl" content="/">
  35. <meta name="text:linkFour" content="Link Four">
  36. <meta name="text:linkFourUrl" content="/">
  37.  
  38.  
  39.  
  40. <style>
  41. body{
  42. background-color:#ffffff;
  43. color:{color:text};
  44. font-family: Lora;
  45. text-align:justify;
  46. font-size:12px;
  47.  
  48. }
  49. ::-webkit-scrollbar {
  50. width: 5px;
  51. }
  52. ::-webkit-scrollbar-track {
  53. background:rgba(0, 0, 0, 0.5);
  54. }
  55.  
  56. /* Handle */
  57. ::-webkit-scrollbar-thumb {
  58. background: {color:accent};
  59. }
  60.  
  61. /* Handle on hover */
  62. ::-webkit-scrollbar-thumb:hover {
  63. background: {color:links};
  64. }
  65.  
  66.  
  67.  
  68. h1, h2, h3{
  69. font-family: Italiana-Regular;
  70. color:{color:accent};
  71.  
  72. }
  73.  
  74. b{
  75. color:{color:accent};
  76. font-family: Lora-Bold;
  77. }
  78.  
  79. i{
  80. color:{color:accent};
  81. font-family: Lora-italic;
  82. }
  83.  
  84. a{
  85. color:{color:links};
  86.  
  87. }
  88.  
  89.  
  90. span{
  91. color:{accent};
  92. }
  93.  
  94. .web{
  95. max-width:100%;
  96. }
  97. #title{
  98. left:15%;
  99. top: 20px;
  100. position: absolute;
  101. overflow: visible;
  102. width: 80px;
  103. white-space: nowrap;
  104. text-align: left;
  105. font-family: Italiana-Regular;
  106. font-style: normal;
  107. font-weight: normal;
  108. font-size: 48px;
  109. letter-spacing: 1.5px;
  110. }
  111.  
  112. #title a{
  113. text-decoration:none;
  114. color:white;
  115.  
  116. }
  117.  
  118.  
  119.  
  120. #categories {
  121. max-width:300px;
  122. height: 17px;
  123. left: 15%;
  124. top: 80px;
  125. position:absolute
  126.  
  127. }
  128.  
  129. #categories a{
  130. text-decoration:none;
  131. padding: 0 3px 0 3px;
  132. color:#ffffff;
  133.  
  134. }
  135.  
  136. #categories a:hover{
  137. color:{color:accent};
  138. }
  139.  
  140. #description{
  141. color:{color:accent};
  142. left:15%;
  143. bottom: 100px;
  144. position: absolute;
  145. overflow: visible;
  146. width: 421.742px;
  147. height: 177.9636993408203px;
  148. line-height: 30px;
  149. margin-top: -3px;
  150. text-align: left;
  151. font-family: Lora-Regular;
  152. font-style: normal;
  153. font-weight: normal;
  154. font-size: 24px;
  155. color: rgba(255,255,255,1);
  156.  
  157. }
  158.  
  159. #description a{
  160. font-family: Lora-italic;
  161. }
  162.  
  163. .sidebar{
  164. width: calc(100% - 810px);
  165. position:fixed;
  166. background-color:#101;
  167. background-image:url('{image:sidebar}');
  168. background-size:cover;
  169. background-repeat:no-repeat;
  170. height:100%;
  171. left: 0px;
  172. top: 0px;
  173. text-shadow: 2px 2px 2px #101;
  174.  
  175. }
  176.  
  177. .sidebar img {
  178. -webkit-filter: grayscale(100%);
  179. filter: grayscale(100%);
  180. }
  181.  
  182. /*******Tumblr*******/
  183.  
  184. .tumblr{
  185. background-color:#ffffff;
  186. width:810px;
  187. float:right;
  188. }
  189. .posts {
  190. width:550px;
  191. background-color:#ffffff;
  192. padding:30px;
  193. margin:0 auto;
  194. margin-bottom:25px;
  195. text-align:justify;
  196. border-bottom: 3px {color:accent} solid;
  197. line-height: 24px;
  198. font-size: 17px;
  199.  
  200. }
  201.  
  202. .permalinks {
  203. text-align:center;
  204.  
  205.  
  206. }
  207.  
  208. .permalinks a {
  209. text-decoration:none;
  210. font-size: 10px;
  211. color:{color:links};
  212. }
  213.  
  214. .permalinks a:hover {
  215. color:{color:accent};
  216. }
  217.  
  218. .tags {
  219. text-align:center;
  220. }
  221.  
  222. .tags a {
  223. text-decoration:none;
  224. font-size: 8px;
  225. text-transform:uppercase;
  226. color:{color:links};
  227. }
  228.  
  229. .tags a:hover {
  230. color:{color:accent};
  231. }
  232.  
  233. .like_and_reblog_buttons {
  234. list-style:none;
  235.  
  236.  
  237. }
  238.  
  239.  
  240. .like_and_reblog_buttons li {
  241. float:right;
  242. margin-left:8px;
  243. margin-top:8px;
  244.  
  245. }
  246.  
  247. .like {
  248. position:relative;
  249. display:inline-block;
  250. max-height:30px;
  251. max-width:30px;
  252. top:4px;
  253. margin-left:6px;
  254. cursor:pointer;
  255. }
  256.  
  257. .like_button {
  258. position:absolute;
  259. top:0;
  260. left:0;
  261. right:0;
  262. bottom:0;
  263. opacity:1;
  264. width:30px;
  265. height:20px;
  266. z-index:10;
  267. }
  268.  
  269. .like-b {
  270. position:relative;
  271. display:inline-block;
  272. height:1em;
  273. line-height:1em;
  274. overflow:hidden;
  275. margin-bottom:-1px;
  276. }
  277. .like-b .like_button iframe {
  278. position:absolute;
  279. top:0;
  280. left:0;
  281. bottom:0;
  282. right:0;
  283. z-index:2;
  284. opacity:0;
  285. }
  286. .like-b .liked + .b {
  287. color:inherit;
  288. }
  289. .like-b .liked + .b:after {
  290. content:'d';
  291. }
  292.  
  293. .quote{
  294. font-size:25px;
  295. color:{color:accent};
  296. }
  297. .source{
  298. text-align:right;
  299. }
  300.  
  301. .asker {
  302. display:inline;
  303. font-weight:bold;
  304. color:{color:accent};
  305. }
  306. .question {
  307. color:{color:accent}
  308.  
  309. }
  310.  
  311. .question a{
  312. color:white;
  313. }
  314.  
  315. .asker-question{
  316. display:inline;
  317. }
  318.  
  319. .link{
  320. color:{color:links};
  321. font-size:33px;
  322. margin-left:5px;
  323. text-align:center;
  324. }
  325.  
  326. .question hr{
  327. opacity:0;
  328.  
  329. }
  330.  
  331. .question{
  332. margin: 50px auto;
  333. background:{color:ask};
  334. padding: 20px;
  335. text-align: center;
  336. color: #fff;
  337. border-radius:25px;
  338. }
  339.  
  340.  
  341. .replies{
  342. margin: 50px auto;
  343. background:{color:replies};
  344. padding: 20px;
  345. text-align: justify;
  346. color: #fff;
  347. border-radius:25px;;
  348. }
  349.  
  350. .chat{
  351. list-style:none;
  352. }
  353.  
  354. .chat .odd {
  355. color:{color:text};
  356. }
  357. .chat .even {
  358. color:{color:accent};
  359. }
  360.  
  361. .tumblr_blog{
  362. font-size:10px;
  363. padding:none;
  364. }
  365. .source{
  366. padding-bottom:4px;
  367. }
  368.  
  369. .pagination {
  370. position:absolute;
  371. bottom:15px;
  372. font-size:13px;
  373. right:15px;
  374. }
  375.  
  376. .pagination a{
  377. color:{color:accent};
  378. }
  379.  
  380. .pagination a:hover{
  381. color:#ffffff;
  382. }
  383.  
  384. #footer {
  385. right:10px;
  386. position:fixed;
  387. bottom:5px;
  388. font-family: Lora-Regular;
  389. text-decoration:none;
  390.  
  391. }
  392.  
  393. #footer a{
  394. color:#BFBFBF;
  395. }
  396.  
  397. #footer a:hover{
  398. color:{accent};
  399.  
  400. }
  401. </style>
  402. </head>
  403. <body>
  404. <div class="web">
  405. <div class="sidebar">
  406.  
  407. <div id="title"><a href="/">{Title}</a></div>
  408. <nav id="categories">
  409. <a href="/ask">Ask</a>
  410. <a href="{text:linkOneUrl}">{text:linkOne}</a>
  411. <a href="{text:linkTwoUrl}">{text:linkTwo}</a>
  412. <a href="{text:linkThreeUrl}">{text:linkThree}</a>
  413. <a href="{text:linkFourUrl}">{text:linkFour}</a>
  414. </nav>
  415.  
  416.  
  417.  
  418. <div id="description">
  419. <span>—</span><br>
  420. {description}</div>
  421. <div class="pagination">
  422. {block:PreviousPage}
  423. <a href="{PreviousPage}">&#171; Previous</a> &nbsp;
  424. {/block:PreviousPage}{block:NextPage}
  425. <a href="{NextPage}">Next &#187;</a>
  426. {/block:NextPage}
  427. </div>
  428.  
  429.  
  430. </div> <!--end sidebar-->
  431.  
  432.  
  433.  
  434.  
  435.  
  436.  
  437. <div class="tumblr">
  438.  
  439. {block:Posts}
  440.  
  441. <div class="posts" id="{PostID}">
  442. <!--Text-->
  443. {block:Text}{block:Title}{Title}{/block:Title}{Body}{/block:Text}
  444.  
  445. <!--Photo-->
  446. <div class="photo" id="{PostID}">
  447. {block:Photo}<img src="{PhotoURL-500}" alt="{PhotoAlt}"/>{block:Caption}{Caption}{/block:Caption}{/block:Photo}</div>
  448.  
  449. <!--Panorama-->
  450. <div class="pano" id="{PostID}">
  451. {block:Panorama}{LinkOpenTag}<img src="{PhotoURL-Panorama}" alt="{PhotoAlt}"/>{LinkCloseTag}{block:Caption}{Caption}{/block:Caption}{/block:Panorama}</div>
  452.  
  453. <!--Photoset-->
  454. <div class="photoset" id="{PostID}">
  455. {block:Photoset}{Photoset-500}{block:Caption}{Caption}{/block:Caption}{/block:Photoset}</div>
  456.  
  457. <!--Quote-->
  458.  
  459. {block:Quote}<div class="quote" id="{PostID}">"{Quote}"</div>{block:Source}<div class="source">—{Source}</div>{/block:Source}{/block:Quote}
  460.  
  461. <!--Link-->
  462. <div class="linkpost" id="{PostID}">
  463. {block:Link}<a href="{URL}" class="link" {Target}>| {Name}</a>{block:Description}{Description}{/block:Description}{/block:Link}</div>
  464.  
  465.  
  466. <!--Chat-->
  467.  
  468. {block:Chat}
  469. <div class="chat" id="{PostID}">
  470. <ul>
  471. {block:Lines}<li class="{Alt}">{block:Label} {Label} {/block:Label}{Line}</li>{/block:Lines}
  472. </ul>
  473. </div>
  474. {/block:Chat}
  475.  
  476.  
  477.  
  478. <!--Video-->
  479. <div class="video" id="{PostID}">
  480. {block:Video}{Video-500}{block:Caption}{Caption}{/block:Caption}{/block:Video}</div>
  481.  
  482. <!--Ask-->
  483. <div class="ask" id="{PostID}">
  484. {block:Answer}
  485. <div class="question">
  486. <div class="asker">{Asker}</div> asked
  487. <div class="asker-question">{Question}</div>
  488. <hr>
  489. </div>
  490.  
  491. {block:Answerer}
  492. <div class="answer">
  493. <div class="answerer">{Answerer}</div>
  494. <div class="answerer-answer">{Answer}</div>
  495. </div>
  496. {/block:Answerer}
  497.  
  498. <div class="replies">
  499. {Replies}
  500. </div>
  501. {/block:Answer}
  502.  
  503. </div>
  504. <!--Audio-->
  505. <div class="audio" id="{PostID}">
  506. {block:Audio}
  507. {block:AudioEmbed} {AudioEmbed}{/block:AudioEmbed}
  508. {block:Caption}{Caption}{/block:Caption}
  509. {/block:Audio}
  510. </div>
  511.  
  512.  
  513. <!---Permalinks--->
  514.  
  515. <div class="permalinks">
  516. <ul class="like_and_reblog_buttons">
  517. <li><a class="reblog" href="{ReblogURL}">Reblog</li>
  518. <li><a class="like-b" href="#">{LikeButton}<span class="b">Like</span></a>
  519. </li>
  520. </ul>
  521.  
  522.  
  523. <a href="{Permalink}">{block:NoteCount}{NoteCountWithLabel}{/block:NoteCount}</a></div>
  524.  
  525. <div class="tags">{block:HasTags}{block:Tags}<a href="{TagUrl}"> {Tag}</a>{/block:Tags}{/block:HasTags}</div>
  526.  
  527.  
  528.  
  529. </div>
  530. {/block:Posts}
  531. {block:ContentSource}
  532. {/block:ContentSource}
  533. </div><!---End tumblr-->
  534.  
  535. <div id="footer"><a href="hkfthemes.tumblr.com">HKF THEMES</a></div>
  536. </div>
  537. </body>
  538. </html>
  539.  
Advertisement
Add Comment
Please, Sign In to add comment