API tools faq
paste
HighKingFen

Hop Hop Hop

HighKingFen
Oct 13th, 2020
177
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.85 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2.  
  3. <!------- Basecode by CRYINGINHTML with the help of Octomoosey tutorial and the amazing coding cabin discord
  4.  
  5. Thank you EggDesign to help with the bunny-peak page feature and just being so patient with me ._.
  6.  
  7. Bunny images from Unslpash, Gif by me (from The Magicians)--------------->
  8.  
  9. <html lang="en">
  10. <head>
  11. <title>{Title}</title>
  12. <link rel="shortcut icon" href="{Favicon}">
  13. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  14. {block:Description}
  15. <meta name="description" content="{MetaDescription}" />
  16. {/block:Description}
  17. <meta charset="utf-8">
  18. <meta name="viewport" content="width=device-width, initial-scale=1">
  19. <link href="https://fonts.googleapis.com/css2?family=Baumans&family=Antic+Slab" rel="stylesheet">
  20. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous">
  21.  
  22.  
  23.  
  24. <!-------Meta--------->
  25.  
  26.  
  27. <meta name="image:sidebar" content="https://64.media.tumblr.com/a9835892bc790e12421204cead83e0a4/52a938d1ade0d256-cc/s500x750/4b1d654a7f9bae682baf2e2c61da3a91a98638b5.gif">
  28.  
  29. <meta name="color:accent" content="#FFC17A">
  30. <meta name="color:accent2" content="#7AB7FF">
  31. <meta name="color:links" content="#f51663">
  32.  
  33.  
  34. <meta name="text:LinkOne" content="Link One">
  35. <meta name="text:LinkOneUrl" content="/">
  36. <meta name="text:LinkTwo" content="Link Two">
  37. <meta name="text:LinkTwoUrl" content="/">
  38. <meta name="text:LinkThree" content="Link Three">
  39. <meta name="text:LinkThreeUrl" content="/">
  40.  
  41.  
  42.  
  43. <style type="text/css">
  44. body {
  45. background-color:#FFF6EC60;
  46. font-family: 'Antic Slab', serif;
  47.  
  48. }
  49.  
  50. h1 {font-family: 'Baumans', cursive; }
  51. h2 {font-family: 'Baumans', cursive; }
  52. a{
  53. color:#ff7ab7;
  54.  
  55. }
  56.  
  57. a:hover{
  58. color:#7AB7FF;
  59. }
  60.  
  61. a:visited{
  62. color:#7AB7FF;
  63.  
  64. }
  65. b i u {
  66. color:#FFC17A;
  67.  
  68. }
  69.  
  70. .content {
  71. padding: 16px;
  72. }
  73. /*******Header*******/
  74.  
  75.  
  76. .title{
  77. font-size:30px;
  78. padding:10px;
  79. writing-mode: vertical-lr;
  80. text-orientation: upright;
  81. font-family: 'Baumans', cursive;
  82. color:#7AB7FF;
  83. text-shadow: 2px 2px 2px rgba(0,0,0,0.57);
  84. }
  85.  
  86. .title a{
  87. text-decoration: none;
  88.  
  89. }
  90.  
  91. .description{
  92. color:white;
  93. text-align:justify;
  94. margin-left:5%;
  95. padding:10px;
  96. margin-right:10%;
  97. margin-top:-135px;
  98. height:150px;
  99. width:300px;
  100. position:relative;
  101. z-index:1;
  102.  
  103. }
  104.  
  105.  
  106. /*******Sidebars*******/
  107.  
  108. .sidebar{
  109. height:100%;
  110. width: 380px;
  111. position: fixed;
  112. background-color:#FFC17A;
  113. overflow: hidden;
  114. padding:10px;
  115. top:0;
  116. left:0;
  117.  
  118. }
  119.  
  120. .sidetitle{
  121. height:100%;
  122. width: auto;
  123. position:fixed;
  124. background-color:#FFC17A;
  125. overflow: hidden;
  126. padding:10px;
  127. top:0;
  128. right:0;
  129.  
  130. }
  131.  
  132. .links{
  133. margin-left:50px;
  134.  
  135. }
  136.  
  137. .links a{
  138. margin-left:10px;
  139. padding:5px;
  140. box-shadow:2px 2px 2px 2px rgba(0,0,0,0.44);
  141. border-radius:23px;
  142. color:{color:links};
  143. background-color:#FFC17A;
  144. }
  145.  
  146. .link a:hover{
  147. color:#7AB7FF;
  148.  
  149. }
  150. .container{
  151. margin-left:400px;
  152. }
  153. #bunny{
  154. bottom:0;
  155. position:absolute;
  156. left:0;
  157. z-index:-1;
  158. }
  159.  
  160. #homeask{
  161. margin-left:50px;
  162. }
  163.  
  164. .peak{
  165. height:100px;
  166. width:100px;
  167. position:absolute;
  168. margin-top:-102px;
  169. }
  170.  
  171.  
  172.  
  173. /*<img class="" class="peak" src="https://64.media.tumblr.com/706e4d5c6d675b93d09adefa5f3b2e14/59520e22379f28e6-84/s400x600/27fe7be46e0f406f8e40e0e0b8e2b69e3bb3de50.png"><img class="" id="peak2" src="https://64.media.tumblr.com/7f9f19cf1f8bc9ef8f89a84fe5f8e35d/59520e22379f28e6-2d/s250x400/6cc268984d86931017281bf6c3f886758d6ba171.png">*/
  174.  
  175.  
  176.  
  177. .circular--landscape {
  178. display: inline-block;
  179. margin-left:20px;
  180. width: 300px;
  181. height: 300px;
  182. overflow: hidden;
  183. border-radius: 50%;
  184.  
  185. margin-top:20px;
  186.  
  187.  
  188. }
  189.  
  190. .circular--landscape img {
  191. height:auto;
  192. overflow: hidden;
  193. }
  194.  
  195.  
  196. /*******Tumblr Coding*******/
  197. .post {
  198. background: #fff;
  199. margin: 60px auto;
  200. padding: 20px;
  201. border-radius: 6px;
  202. width: 500px;
  203. text-align:justify;
  204. border:1px solid #FFC17A;
  205. }
  206.  
  207. .post a{
  208. color:#FFC17A;
  209. }
  210.  
  211. .post h3{
  212. color:#FFC17A;
  213. letter-spacing:5px;
  214. }
  215.  
  216. .post:nth-of-type(odd) .peak{
  217. background:url(https://64.media.tumblr.com/706e4d5c6d675b93d09adefa5f3b2e14/59520e22379f28e6-84/s400x600/27fe7be46e0f406f8e40e0e0b8e2b69e3bb3de50.png);
  218. background-size:contain;
  219.  
  220.  
  221. }
  222.  
  223. .post:nth-of-type(even) .peak{
  224. background:url(https://64.media.tumblr.com/7f9f19cf1f8bc9ef8f89a84fe5f8e35d/59520e22379f28e6-2d/s250x400/6cc268984d86931017281bf6c3f886758d6ba171.png) no-repeat;
  225. width:120px;
  226. background-size:contain;
  227.  
  228.  
  229. }
  230.  
  231. .source{
  232. text-align:right;
  233.  
  234. }
  235. .source p:first-child{
  236. display:hidden;
  237. }
  238.  
  239. .quote{
  240. color:#FFC17A;
  241. font-size:18px;
  242. font-family: 'Baumans', cursive;
  243. }
  244.  
  245. .chat .even{
  246. color:#ff7ab7;
  247. }
  248.  
  249. .chat .odd{
  250. color:#FFC17A;
  251. }
  252.  
  253.  
  254. .avatar {
  255. margin: 60px 30px;
  256. border-radius: 100%;
  257. }
  258.  
  259. blockquote img {
  260. max-width:100%;
  261. height:auto;}
  262.  
  263. img {
  264. max-width:100%;
  265. height:auto;}
  266.  
  267. .caption img {
  268. max-width:100%;
  269. height:auto;}
  270.  
  271. .posts img {
  272. max-width:100%;
  273. margin-top:5px;
  274. margin-bottom:5px;}
  275.  
  276.  
  277. .asker {
  278. font-size:15px;
  279. font-style: italic;
  280. text-align:center;
  281. border-bottom:1px solid #eee;
  282. margin-bottom:5px;
  283. padding-bottom:3px;
  284. }
  285.  
  286.  
  287. .question {
  288. font-style: italic;
  289. padding-left:50px;
  290. padding-right:50
  291. }
  292.  
  293. .tags {
  294. text-align:center;
  295. }
  296.  
  297. .tags a {
  298. text-decoration:none;
  299. font-size: 8px;
  300. text-transform:uppercase;
  301. color:#ff7ab7;
  302.  
  303. }
  304.  
  305. .tags a:hover {
  306. color:black;
  307. }
  308.  
  309. .permalinks {
  310. text-align:center;
  311. }
  312.  
  313. .permalinks a {
  314. text-decoration:none;
  315. font-size: 12px;
  316. color:#ff7ab7;
  317. }
  318.  
  319. .permalinks a:hover {
  320. color:#FFC17A;
  321. }
  322.  
  323. .linkpost a{
  324. padding:10px;
  325. text-align:center;
  326. border:#ff7ab7 1px solid;
  327. width:500px;
  328. font-size:18px;
  329. font-family: 'Baumans', cursive;
  330. }
  331.  
  332. .like_and_reblog_buttons {
  333. list-style:none;
  334. float:right;
  335. margin-top:-4px;
  336. }
  337.  
  338. .like_and_reblog_buttons li {
  339. display:inline-block;
  340. margin: 0;
  341. padding: 2px 2px;
  342. }
  343. .like_and_reblog_buttons li:first-child {
  344.  
  345. }
  346.  
  347. /*******Scroll*******/
  348. ::-webkit-scrollbar {
  349. height:10px;
  350. width:10px;
  351. background-color:#FFC17A;
  352. }
  353.  
  354. ::-webkit-scrollbar-thumb {
  355. background-color:#FFFFFF80;
  356. border-radius:25px;
  357. }
  358.  
  359.  
  360. /*****Pagination****/
  361.  
  362.  
  363. .pagenav{
  364. bottom:0;
  365. padding-bottom:30px;
  366. position:absolute;
  367. text-align:center;
  368. }
  369.  
  370. .credit{
  371. position:absolute;
  372. top:35;
  373. left:35;
  374. }
  375.  
  376. {Custom Css}
  377. </style>
  378. </head>
  379.  
  380. <body>
  381.  
  382. <div class="sidebar">
  383. <div class="credit">
  384. <a href="https://cryinginhtml.tumblr.com" target="blank_"> <i class="fas fa-carrot"></i></a>
  385. </div>
  386. <div class="circular--landscape"><img src="{image:sidebar}"> </div>
  387. <div class="description">{block:Description}{Description}{/block:Description}</div>
  388.  
  389. <div class="links">
  390. <div id="homeask">
  391. <a href="/">Home</a>
  392. <a href="/ask">Ask</a> </div><br><br>
  393. <a href="{text:LinkOneUrl}">{text:LinkOne}</a>
  394. <a href="{text:LinkTwoUrl}">{text:LinkTwo}</a>
  395. <a href="{text:LinkThreeUrl}">{text:LinkThree}</a> <br><br> <br>
  396. </div>
  397.  
  398. <img id="bunny" src="https://64.media.tumblr.com/7abc3aea4de1d6f2fc6692021c4d9b8e/126dda392b020996-be/s500x750/b4f69f0d1c27b0d319c448f898c8f30318794f2c.png">
  399. </div>
  400.  
  401. <div class="sidetitle">
  402. <div class="title"><a href="{BlogURL}">{Title}</a></div>
  403. <!--Pagination-->
  404.  
  405. {block:pagination}
  406. <div class="pagenav">
  407. {block:PreviousPage}<a href="{PreviousPage}">Previous</a>{/block:PreviousPage}<br>
  408. {block:NextPage}<a href="{NextPage}">Next</a>{/block:NextPage}
  409. </div>
  410. {/block:pagination}
  411. </div>
  412.  
  413.  
  414. <!-----------Tumblr Post--------->
  415. <div class="container">
  416. {block:Posts}
  417.  
  418. <div class="post">
  419. <div class="peak"></div>
  420. <!----Text Post---->
  421. {block:Text}
  422. {block:Title}
  423. <h3><a href="{Permalink}">{Title}</a></h3>
  424. {/block:Title}
  425. {Body}
  426.  
  427. {/block:Text}
  428.  
  429. <!----Photopost---->
  430.  
  431. {block:Photo}<img src="{PhotoURL-highres}" alt="{PhotoALT}">{/block:Photo}
  432.  
  433. {block:Photoset}
  434.  
  435.  
  436.  
  437. {block:IndexPage}{Photoset}{/block:IndexPage}
  438. {block:PermalinkPage}{Photoset-700}{/block:PermalinkPage}
  439. {block:Caption}{Caption}{/block:Caption}
  440.  
  441. {block:Caption}
  442. <div id-="caption">{Caption}</div>
  443. {/block:Caption}
  444. {/block:Photoset}
  445.  
  446. <!----Quote Post---->
  447.  
  448. {block:Quote}
  449.  
  450. <div class="quote"> <blockquote>{Quote}</blockquote>
  451. </div>
  452. {block:Source}
  453. <div class="source"> — {Source}</div>
  454. {/block:Source}
  455.  
  456. {/block:Quote}
  457.  
  458. <!----Links Post---->
  459.  
  460. {block:Link}
  461. <div class="linkpost">
  462. <a href="{URL}"{Target}>{Name}</a>
  463.  
  464. {block:Description}{Description}{/block:Description}
  465. </div>
  466. {/block:Link}
  467.  
  468. <!----Chat Post---->
  469.  
  470. {block:Chat}
  471.  
  472. {block:Title}{Title}{/block:Title}
  473. <div class="chat">
  474. <ul class="chat">
  475. {block:Lines}
  476. <li class="{Alt}">{block:Label}<span class="label">{Label}</span>{/block:Label} {Line}</li>{/block:Lines}
  477. </ul>
  478.  
  479. {/block:Chat}
  480.  
  481. <!----Audio Post---->
  482. {block:Audio}
  483. {block:AudioPlayer}
  484. {AudioPlayerGrey}
  485. {BLOCK:TRACKNAME}{TRACKNAME}{/BLOCK:TRACKNAME}
  486. {BLOCK:ARTIST}{ARTIST}{/BLOCK:ARTIST}
  487. {BLOCK:ALBUM}{ALBUM}{/BLOCK:ALBUM}
  488. {BLOCK:PLAYCOUNT}{PLAYCOUNT}{/BLOCK:PLAYCOUNT}
  489. {block:Caption}{Caption}{/block:Caption}
  490. {/block:AudioPlayer}
  491. {/block:Audio}
  492.  
  493. <!----Video Post---->
  494.  
  495. {block:Video}
  496.  
  497. {Video-500}
  498. {block:Caption}
  499. <div class="caption">{Caption}</div>
  500. {/block:Caption}
  501. {/block:Video}
  502.  
  503. <!----Answrr Post---->
  504.  
  505. {block:Answer}
  506. <div class="asker">{Asker} hop and ask</div>
  507. <div class="question">{Question}</div>
  508. {Answer}
  509. {/block:Answer}
  510.  
  511. <!------->
  512. <div class="permalinks"><a href="{Permalink}">{block:NoteCount}{NoteCount}{/block:NoteCount} Notes</a></div>
  513.  
  514. <ul class="like_and_reblog_buttons">
  515. <li>{ReblogButton}</li>
  516. <li>{LikeButton}</li>
  517. </ul>
  518.  
  519. <div class="tags">{block:HasTags}{block:Tags}<a href="{TagUrl}"> {Tag}</a>{/block:Tags}{/block:HasTags}</div>
  520. </div>
  521.  
  522.  
  523.  
  524. {/block:Posts}
  525.  
  526.  
  527. </div> <!------End Container-------->
  528.  
  529. <!---------End tumblr post------->
  530.  
  531.  
  532.  
  533. <!----Script----->
  534.  
  535.  
  536. </body>
  537. </html>
  538.  
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!