API tools faq
paste
HighKingFen

Toss a Coin

HighKingFen
Jan 12th, 2020
237
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.50 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. // TOSS A COIN TO THE WITCHER
  3. Base code by egg.design //
  4. ICON GIF BY TAMPIRE
  5. WITH THE HELP OF TUTORIAL BY W3SCHOOL, THEMES BY ERIS, OCTOMOSSEY
  6. <!DOCTYPE html>
  7. <html>
  8. <head>
  9.  
  10. <!-- favicon -->
  11. <link rel="shortcut icon" href="{Favicon}" />
  12. <!-- rss -->
  13. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  14. <!-- title and description -->
  15. <title>{Title}</title>
  16. {block:Description}
  17. <meta name="description" content="{MetaDescription}" />
  18. {/block:Description}
  19. <!-- stylesheets -->
  20. <link href="https://fonts.googleapis.com/css?family={text:Google Font}:700,400" rel="stylesheet">
  21. <link rel="stylesheet" href="https://cdn.linearicons.com/free/1.0.0/icon-font.min.css">
  22. <link href="https://fonts.googleapis.com/css?family=Cinzel&display=swap" rel="stylesheet">
  23. <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
  24. <script src="https://kit.fontawesome.com/94199c313d.js" crossorigin="anonymous"></script>
  25.  
  26. <!-- image options -->
  27. <meta name="image:background" content="https://cinesiageek.com.br/wp-content/uploads/2019/12/the-witcher-netflix-series-geralt.jpg" />
  28. <meta name="image:sidebar" content="https://66.media.tumblr.com/362e5042bb2f329d17edea4c425c9726/b909d02ec181b5a3-76/s640x960/66f496b50fd87538ba2664798ac1bd62c3d865b4.gif" />
  29.  
  30. <!-- color options -->
  31. <meta name="color:accent" content="#6F624C" />
  32. <meta name="color:background" content="black" />
  33. <meta name="color:text" content="#D6A313" />
  34. <meta name="color:links" content="white" />
  35. <meta name="color:sidebar" content="black" />
  36. <meta name="color:posts" content="black" />
  37.  
  38.  
  39. <!-- text options -->
  40. <meta name="text:url link one" content="/" />
  41. <meta name="text:link one" content="Link One" />
  42. <meta name="text:url link Two" content="/" />
  43. <meta name="text:link two" content="Link Two" />
  44. <meta name="text:url link Three" content="/" />
  45. <meta name="text:link Three" content="Link Three" />
  46. <meta name="text:url link Four" content="/" />
  47. <meta name="text:link Four" content="Link Four" />
  48. <meta name="text:url link Five" content="/" />
  49. <meta name="text:link Five" content="Link Five" />
  50.  
  51.  
  52.  
  53.  
  54. <style>
  55.  
  56.  
  57.  
  58. body {
  59. margin:0;
  60. background:{color:background} url({image:background});
  61. background-repeat:no-repeat;
  62. background-size:cover;
  63. background-position:center;
  64. word-wrap:break-word;
  65. background-attachment: fixed;
  66. color:{color:accent};
  67. font-family: 'Cinzel', serif;
  68. }
  69.  
  70.  
  71.  
  72. .flex {
  73. display:flex;
  74. flex-wrap:wrap;
  75. }
  76. .centered {
  77. align-items:center;
  78. justify-content:center;
  79. }
  80.  
  81. blockquote {
  82. border-left:2px solid {color:accent};
  83. padding-left:10px;
  84. }
  85.  
  86.  
  87.  
  88. main {
  89. width:100%;
  90. justify-content:space-around;
  91. align-items:flex-start;
  92. }
  93.  
  94.  
  95.  
  96. section {
  97. width:100%;
  98.  
  99. }
  100.  
  101. {block:indexpage}
  102. section.grid {
  103. column-count:2;
  104. grid-gap:20px;
  105. margin-top:50px;
  106. max-width:1000px;
  107. width:70%;
  108. }
  109. section.grid article {
  110. width:100%;
  111. break-inside:avoid;
  112. margin:0 0 20px 0;
  113. }
  114.  
  115. section.grid .caption, section.grid .info, section.grid .tags {
  116. padding:10px;
  117. }
  118. {/block:indexpage}
  119.  
  120. article {
  121. background:{color:posts};
  122. color:{color:text};
  123. border:2px solid #0F0B05 ;
  124. max-width:700px;
  125. width:90%;
  126. margin:50px auto 100px auto;
  127. margin-left:500px;
  128. }
  129.  
  130.  
  131. /* post note styling */
  132. ol.notes li {
  133. padding:10px;
  134. }
  135. ol.notes img {
  136. display:none;
  137. }
  138.  
  139. article img {
  140. max-width:100%;
  141. display:block;
  142. margin: auto;
  143. }
  144.  
  145. a {
  146. text-decoration:none;
  147. color:{color:links};
  148. }
  149.  
  150. a:hover{
  151. color:{color:accent};
  152. }
  153.  
  154.  
  155.  
  156. /* sidebar */
  157.  
  158. .sidebar {
  159. background-color: black;
  160. width: 350px;
  161. position:fixed;
  162. height:100%;
  163. left:15px;
  164.  
  165. }
  166.  
  167. .title{
  168. font-size: 30px;
  169. text-align: center;
  170. padding:10px
  171. margin-top: 15px;
  172. }
  173.  
  174. .image {
  175. width: 350px;
  176. height: auto;
  177. }
  178. .description {
  179. color:{color:accent};
  180. font-size: 11px;
  181. text-align: justify;
  182. padding:10px;
  183. max-height:50px;
  184. overflow:hidden;
  185. -webkit-transition: all 0.7s ease;
  186. transition: all 0.7s ease;
  187. -moz-transition: all 0.7s ease;
  188. -o-transition: all 0.7s ease;
  189.  
  190. }
  191.  
  192. .description:hover {
  193. max-height:300px;
  194. -webkit-transition: all 0.7s ease;
  195. transition: all 0.7s ease;
  196. -moz-transition: all 0.7s ease;
  197. -o-transition: all 0.7s ease;
  198. overflow:none;
  199. }
  200.  
  201.  
  202. /* sidebar links */
  203. .links a {
  204. display: block;
  205. width: 335pxx;
  206. height: 17px;
  207. padding: 8px;
  208. background-color:{color:sidebar};
  209. border:2px solid #6F624C;
  210. color:{color:link};
  211. text-align:center;
  212. text-transform:uppercase;
  213. margin-top:5px;
  214. }
  215.  
  216. .link a:hover{
  217. color:{color:accent};
  218. }
  219. /* text post */
  220.  
  221. .textpost h1 {
  222. padding:20px;
  223. border-bottom:1px solid rgba(0,0,0,.04);
  224. margin:0;
  225. }
  226.  
  227. /* photoposts */
  228. .photopost img {
  229. width:100%;
  230. }
  231.  
  232. /* quote post */
  233.  
  234. .quote {
  235. color:{color:accent};
  236. }
  237. .quote, .source {
  238. padding:20px;
  239. }
  240.  
  241. /* link post */
  242. .link {
  243. padding:10px;
  244. margin-top: 10px;
  245. }
  246. .link a {
  247. color:{color:link};
  248. }
  249.  
  250. /* chat post */
  251.  
  252. .chat {
  253. margin:0;
  254. padding:0;
  255. }
  256. .chat li {
  257. list-style:none;
  258. padding:10px;
  259. }
  260.  
  261. .chat li:nth-of-type(odd) {
  262. color:{color:accent};
  263. }
  264.  
  265. /*answer posts */
  266. .question {
  267.  
  268. }
  269.  
  270.  
  271. .replies {
  272. padding:20px;
  273. }
  274.  
  275. /*Audio posts */
  276.  
  277. .audiopost img {
  278. width:120px;
  279. height:120px;
  280. }
  281. .audiopost iframe {
  282. width:100%;
  283. }
  284.  
  285. .audioinfo {
  286. width:calc(100% - 140px);
  287. align-items:center;
  288. padding:0 10px;
  289. }
  290. .theinfo {
  291. padding:20px;
  292. }
  293. /* captions */
  294. .caption {
  295. padding:20px;
  296. }
  297.  
  298. .reblog-header a {
  299. font-weight:bold;
  300. }
  301.  
  302. /* post info */
  303. .info {
  304. font-size:10px;
  305. text-align:right;
  306. border-top:1px solid {color:accent});
  307. }
  308.  
  309. pre {
  310. word-wrap:break-word!Important;
  311. white-space: pre-wrap;
  312. }
  313.  
  314. /* tags */
  315. .tags {
  316. padding:10px 20px;
  317. font-size:10px;
  318. text-align:right;
  319. }
  320.  
  321. .inactive:hover:after {
  322. content:'deactivated';
  323. }
  324.  
  325. /* pagination */
  326. .pagination {
  327. width:90%;
  328. text-align:center;
  329. margin:40px auto;
  330. }
  331.  
  332. /*credit */
  333. .footer {
  334. opacity:0.3;
  335. bottom:0;
  336. position:fixed;
  337. right:0;
  338. }
  339.  
  340. .footer a{
  341. color:{color:accent};
  342. opacity:1;
  343. }
  344.  
  345. {CustomCSS}
  346. </style>
  347. </head>
  348. <body>
  349.  
  350. <!-- sidebar -->
  351.  
  352.  
  353. <div class="footer"><a href="https://hfkthemes.tumblr.com"><i class="fas fa-crown"></i></a> </div>
  354.  
  355. <div class="sidebar">
  356. <div class="title"><a href="/">{Title}</a></div>
  357. <img class="image" src="{image:Sidebar}" />
  358. <div class="description">{Description}</div>
  359.  
  360. <div class="links">
  361. <a href="/ask">Ask Your Bard</a>
  362. <a href="{text:url link one}">{text:link one}</a>
  363. <a href="{text:url link Two}">{text:link Two}</a>
  364. <a href="{text:url link Three}">{text:link Three}</a>
  365. <a href="{text:url link Four}">{text:link Four}</a>
  366. <a href="{text:url link Five}">{text:link Five}</a>
  367. </div>
  368.  
  369.  
  370.  
  371.  
  372. </div><!--------------End Sidebar----->
  373.  
  374. <main class="flex">
  375.  
  376. {block:HasPages}<p>
  377. {block:Pages}
  378. <a href="{URL}">{Label}</a>
  379. {/block:Pages}
  380. </div>
  381. {/block:HasPages}
  382.  
  383. <!-- posts -->
  384.  
  385.  
  386.  
  387.  
  388. <!-- this removes the default source/via links
  389. {block:Posts}
  390. <!-- {block:NoRebloggedFrom}
  391. {block:RebloggedFrom}{ReblogParentName}{/block:RebloggedFrom}
  392. {/block:NoRebloggedFrom} -->
  393. {block:ContentSource}<!-- {SourceURL}
  394. {block:SourceLogo}<img src="{BlackLogoURL}"width="{LogoWidth}" height="{LogoHeight}" alt="{SourceTitle}" />{/block:SourceLogo}
  395. {block:NoSourceLogo}{SourceLink}{/block:NoSourceLogo} -->
  396. {/block:ContentSource}
  397.  
  398. <!-- by using the {postyype} variable, we can make classes for each post type without having to type them all out individually -->
  399. <article class="{posttype}post posts">
  400. <!-- text posts -->
  401. {block:Text}
  402. <!-- title block hides the title section if the post has no title -->
  403. {block:Title}
  404. <h1>{Title}</h1>
  405. {/block:Title}
  406.  
  407. <!-- this is styling for when this is an original post/not reblogged -->
  408. {block:Notreblog}
  409. <div class="caption">
  410. {Body}
  411. </div>
  412. {/block:Notreblog}
  413.  
  414. <!-- styling whenever it is a reblogged post -->
  415. {block:Rebloggedfrom}
  416. <div class="reblog-list">
  417. {block:Reblogs}
  418. <div class="reblogs">
  419. <div class="reblog-header">
  420. {block:isactive}
  421. <a href="{permalink}">{username}</a>
  422. {/block:isactive}
  423. {block:isdeactivated}
  424. <a href="{permalink}" class="inactive">{username}</a>
  425. {/block:isdeactivated}
  426. </div>
  427. <div class="reblog-content">
  428. {Body}
  429. </div>
  430. </div>
  431. {/block:Reblogs}
  432. </div>
  433. {/block:RebloggedFrom}
  434. {/block:Text}
  435.  
  436. <!-- photo posts -->
  437. {block:Photo}
  438. <!-- photo alts add a description to the image for screen readers and for if the image doesn't load -->
  439. <img src="{PhotoURL-highres}" al="{photoalt}" class="photos">
  440. {/block:Photo}
  441.  
  442. <!-- photoset -->
  443. {block:Photoset}
  444. {Photoset}
  445. {/block:Photoset}
  446.  
  447. <!-- panorama -->
  448. {block:Panorama}
  449. <img src="{photourl-panorama}" alt="{photoalt}">
  450. {/block:Panorama}
  451.  
  452. <!-- quote posts -->
  453. {block:Quote}
  454. <div class="quote">
  455. "{Quote}"
  456. </div>
  457. <div class="source">
  458. -{Source}
  459. </div>
  460. {/block:Quote}
  461.  
  462. <!-- chat posts -->
  463. {block:Chat}
  464. <ul class="chat">
  465. {block:Lines}
  466. <li>{block:Label}{Label}{/block:Label} {Line}</li>
  467. {/block:Lines}
  468. </ul>
  469. {/block:Chat}
  470.  
  471. <!--Link posts-->
  472. {block:link}
  473. <div class="link">
  474. <a href="{URL}"><span class="lnr lnr-link" aria-hidden="true"></span> {Name}</a>
  475. </div>
  476. {/block:link}
  477.  
  478. <!-- video posts -->
  479. {block:Video}
  480. {Video-700}
  481. {/block:Video}
  482.  
  483. <!--Audio posts-->
  484. {block:Audio}
  485. <div class="audio flex">
  486. {block:albumart}
  487. <img src="{AlbumArtURL}" alt="Album art for {block:trackname}{Trackname}{/block:trackname}">
  488. {/block:albumart}
  489. <div class="audioinfo flex">
  490.  
  491. {block:trackname}{Trackname}{/block:trackname}<br>
  492. {block:Album}{Album}{/block:Album} <br>
  493. {block:Artist}{Artist}{/block:Artist}
  494.  
  495.  
  496. </div>
  497.  
  498. </div>
  499. <div class="player">
  500. {AudioPlayer}
  501. </div>
  502. {/block:Audio}
  503.  
  504. <!--answer posts-->
  505. {block:Answer}
  506. <div class="question">
  507. {Asker}:{Question}
  508. </div>
  509. <div class="replies">
  510. {block:Answerer}
  511. {Answerer}: {Answer}
  512. {/block:Answerer}
  513. {Replies}
  514. </div>
  515. {/block:Answer}
  516.  
  517. <!-- captions -->
  518. {block:Caption}
  519. <div class="caption">
  520. {block:notreblog}
  521. {Caption}
  522. {/block:notreblog}
  523. {block:Rebloggedfrom}
  524. <div class="reblog-list">
  525. {block:Reblogs}
  526. <div class="reblogs">
  527. <div class="reblog-header">
  528. {block:isactive}
  529. <a href="{permalink}">{username}</a>
  530. {/block:isactive}
  531. {block:isdeactivated}
  532. <a href="{permalink}" class="inactive">{username}</a>
  533. {/block:isdeactivated}
  534. </div>
  535. <div class="reblog-content">
  536. {Body}
  537. </div>
  538. </div>
  539. {/block:Reblogs}
  540. </div>
  541. {/block:RebloggedFrom}
  542. </div>
  543. {/block:Caption}
  544.  
  545.  
  546. <!-- post info -->
  547.  
  548. <!-- important to wrap your info in date blocks, otherwise they will appear on *every* page, even the ask and submit pages -->
  549. {block:Date}
  550. <div class="info">
  551. <!-- this is a day page link. this will take you to all the posts made on that specific day -->
  552. <a href="/day/{Year}/{MonthNumberWithZero}/{dayofmonthwithzero}">Posted on {ShortMonth} {DayofMonth}, {Year} </a>
  553. <!-- notecount block will only render the notes if there is at least 1 note on the post. if you would like to display notecount even if there are 0 notes, delete the notecount blocks -->
  554. {block:NoteCount} with
  555. <a href="{permalink}">{NoteCountWithLabel}</a>
  556. {/block:NoteCount}
  557.  
  558. <!-- the reblogged from and source links are hidden on the indexpage by using permalinkpage blocks. if you'd like it to display on index pages, remove the permalinkpage blocks. you do need to keep the rebloggedfrom blocks though. -->
  559. {block:permalinkpage}
  560. <br>
  561.  
  562. {block:rebloggedfrom}
  563. <a href="{reblogparenturl}">reblogged from {reblogparentname}</a> / <a href="{reblogrooturl}">posted by {reblogrootname} </a>
  564. {/block:rebloggedfrom}
  565. {/block:permalinkpage}
  566. </div>
  567. {/block:Date}
  568.  
  569.  
  570. <!-- tags -->
  571. {block:Hastags}
  572. <div class="tags">
  573. {block:Tags}
  574. <a href="{TagURL}">#{Tag}</a>
  575. {/block:Tags}
  576. </div>
  577. {/block:Hastags}
  578.  
  579. <!-- post note list -->
  580. {PostNotes}
  581. </article> <!-- end posts -->
  582. {/block:Posts}
  583. </section> <!-- end post section -->
  584.  
  585. <!-- pagination -->
  586. {block:Pagination}
  587. <div class="pagination">
  588. {block:previouspage}
  589. <a href="{previouspage}">Prev</a>
  590. {/block:previouspage}
  591. {block:nextpage}
  592. <a href="{nextpage}">Next</a>
  593. {/block:nextpage}
  594. </div>
  595. {/block:pagination}
  596. </main> <!-- end container -->
  597.  
  598.  
  599.  
  600. <!-- and that's it! I hope this helped! -->
  601. </body>
  602. </html>
Advertisement
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!