API tools faq
paste
tricksterkid

tumblr page // cinnamon

tricksterkid
Nov 23rd, 2020
295
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 22.69 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC>
  2.  
  3. <!-- nuclearthemes on tumblr || thanks for using my code! -->
  4. <!-- consider supporting me on ko-fi >> https://ko-fi.com/cameroni -->
  5.  
  6. <!--
  7. || CREDITS ||
  8.  
  9. • Custom tooltips by Atomiks >> https://atomiks.github.io/tippyjs/
  10. • Fonts from Google >> https://fonts.google.com/
  11. • Icons from Font Awesome >> https://fontawesome.com/
  12. • Placeholders from Unsplash >> https://unsplash.com/
  13. • Sidelinks by Larry Geams Parangan >> https://codepen.io/larrygeams/pen/pdchG
  14. • Tumblr controls fix by odeysseus >> https://odeysseus.tumblr.com/
  15.  
  16. -->
  17.  
  18. <html>
  19.  
  20. <head>
  21.  
  22. <title>{Name} / title</title> <!-- page title -->
  23.  
  24. <link rel="shortcut icon" href="{Favicon}">
  25.  
  26. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  27.  
  28. <link href="https://fonts.googleapis.com/css?family=Josefin+Sans:400,400i,700,700i|Roboto+Slab:400,400i,700,700i" rel="stylesheet">
  29.  
  30. <script src="https://kit.fontawesome.com/802dca85f3.js" crossorigin="anonymous"></script>
  31.  
  32. <style type="text/css">
  33.  
  34. * {margin:0; padding:0;}
  35.  
  36. /* ----------------------------------------------------------------------- */
  37. /* --------------------------- tumblr controls --------------------------- */
  38.  
  39. .tmblr-iframe {
  40. filter: invert(100%);
  41. -o-filter: invert(100%);
  42. -moz-filter: invert(100%);
  43. -ms-filter: invert(100%);
  44. -webkit-filter: invert(100%);
  45. opacity: 0.2;
  46. position: fixed;
  47. right: 5px;
  48. top: 5px;
  49. transform: scale(0.7,0.7);
  50. transform-origin: 100% 0%;
  51. -ms-transform-origin: 100% 0%;
  52. -webkit-transform-origin: 100% 0%;
  53. transition: 0.4s;
  54. -o-transition: 0.4s;
  55. -moz-transition: 0.4s;
  56. -ms-transition: 0.4s;
  57. -webkit-transition: 0.4s;
  58. white-space: nowrap;
  59. }
  60.  
  61. .tmblr-iframe:hover {
  62. opacity: 1;
  63. }
  64.  
  65. /* ----------------------------------------------------------------------- */
  66. /* --------------------------- custom tooltips --------------------------- */
  67.  
  68. .tippy-tooltip.custom-theme {
  69. background-color: #d4a89f;
  70. border-radius: 0;
  71. color: #ffffff;
  72. font-family: inherit;
  73. font-size: inherit;
  74. text-align: center;
  75. }
  76.  
  77. /* ----------------------------------------------------------------------- */
  78. /* -------------------- custom selection & scrollbar --------------------- */
  79.  
  80. ::-moz-selection {background: #f07a9a; color: #ffffff;}
  81. ::selection {background: #f07a9a; color: #ffffff;}
  82.  
  83. ::-webkit-scrollbar-thumb
  84. {background: #f07a9a; border: 5px solid #fff; border-radius: 10px;}
  85. ::-webkit-scrollbar-track
  86. {background: #d4a89f; border: 7px solid #ffffff;}
  87. ::-webkit-scrollbar
  88. {width: 15px;}
  89.  
  90. /* ----------------------------------------------------------------------- */
  91. /* ----------------------------- page layout ----------------------------- */
  92.  
  93. body {
  94. background: #ffffff; /* background color */
  95. color: #979797; /* text color */
  96. font-family: Josefin Sans; /* font */
  97. font-size: 16px; /* font size */
  98. text-align: justify; /* text align */
  99. }
  100.  
  101. #container {
  102. height: 500px;
  103. left: 50%;
  104. margin-bottom: 40px;
  105. overflow: none;
  106. padding: 20px;
  107. position: absolute;
  108. top: 50%;
  109. transform: translate(-50%,-50%);
  110. -moz-transform: translate(-50%,-50%);
  111. -ms-transform: translate(-50%,-50%);
  112. -o-transform: translate(-50%,-50%);
  113. -webkit-transform: translate(-50%,-50%);
  114. width: 860px;
  115. }
  116.  
  117. /* ----------------------------------------------------------------------- */
  118. /* ------------------------ sidebar links colors ------------------------- */
  119.  
  120. #linkhome {border-left: 7px solid #f07a9a; color: #f07a9a;}
  121. #linkhome:after {background-color: #f07a9a;}
  122. #linkhome:hover {color: #fafafa; transition: 0.4s;}
  123.  
  124. #link1 {border-left: 7px solid #eb819a; color: #eb819a;}
  125. #link1:after {background-color: #eb819a;}
  126. #link1:hover {color: #fafafa; transition: 0.4s;}
  127.  
  128. #link2 {border-left: 7px solid #e6899b; color: #e6899b;}
  129. #link2:after {background-color: #e6899b;}
  130. #link2:hover {color: #fafafa; transition: 0.4s;}
  131.  
  132. #link3 {border-left: 7px solid #df959c; color: #df959c;}
  133. #link3:after {background-color: #df959c;}
  134. #link3:hover {color: #fafafa; transition: 0.4s;}
  135.  
  136. #link4 {border-left: 7px solid #d8a19e; color: #d8a19e;}
  137. #link4:after {background-color: #d8a19e;}
  138. #link4:hover {color: #fafafa; transition: 0.4s;}
  139.  
  140. #link5 {border-left: 7px solid #d4a89f; color: #d4a89f;}
  141. #link5:after {background-color: #d4a89f;}
  142. #link5:hover {color: #fafafa; transition: 0.4s;}
  143.  
  144. /* ----------------------------------------------------------------------- */
  145. /* --------------------------- sidebar content --------------------------- */
  146.  
  147. #sidemenu { /* left menu */
  148. background-color: #fafafa;
  149. float: left;
  150. height: 500px;
  151. width: 200px;
  152. }
  153.  
  154. #sidepic { /* sidebar picture */
  155. height: 200px;
  156. width: 200px;
  157. margin: 0;
  158. }
  159.  
  160. #sidepic:hover {
  161. cursor: cell;
  162. }
  163.  
  164. /* sidebar links code >> colors are modified above! */
  165.  
  166. .sidebarlinks a {
  167. box-sizing: border-box;
  168. display: block;
  169. height: 50px;
  170. margin: 0;
  171. padding: 20px;
  172. padding-top: 18px;
  173. position: relative;
  174. text-transform: uppercase;
  175. width: 100%;
  176. z-index: 2;
  177. }
  178.  
  179. .sidebarlinks a:after {
  180. content: "";
  181. height: 100%;
  182. left: -1;
  183. position: absolute;
  184. top: 0;
  185. transition: 0.4s;
  186. width: 0px;
  187. z-index: -1;
  188. }
  189.  
  190. .sidebarlinks a:hover:after {
  191. width: calc(100% + 1px);
  192. width: -moz-calc(100% + 1px);
  193. width: -webkit-calc(100% + 1px);
  194. }
  195.  
  196. /* sidebar links content >> changes text to icon with screen size */
  197.  
  198. .big {display: block;}
  199. .small {display: none;}
  200.  
  201. /* ----------------------------------------------------------------------- */
  202. /* ------------------------------- content ------------------------------- */
  203.  
  204. #contentcontainer { /* container for content */
  205. float: right;
  206. height: 440px;
  207. overflow: auto;
  208. width: 660px;
  209. -moz-overflow-style: none;
  210. -ms-overflow-style: none;
  211. -o-overflow-style: none;
  212. }
  213.  
  214. #contentcontainer::-webkit-scrollbar {
  215. display: none;
  216. }
  217.  
  218. #leftcontainer { /* container for facts and stats */
  219. float: left;
  220. height: 440px;
  221. width: 365px;
  222. }
  223.  
  224. #facts { /* facts section */
  225. background-color: #fafafa;
  226. float: right;
  227. height: 210px;
  228. margin-bottom: 15px;
  229. overflow: none;
  230. width: 350px;
  231. }
  232.  
  233. #stats { /* stats section */
  234. background-color: #fafafa;
  235. float: right;
  236. height: 215px;
  237. overflow: none;
  238. width: 350px;
  239. }
  240.  
  241. #text { /* text section */
  242. background-color: #fafafa;
  243. float: right;
  244. height: 440px;
  245. margin-left: 15px;
  246. overflow-y: auto;
  247. width: 280px;
  248. -moz-overflow-style: none;
  249. -ms-overflow-style: none;
  250. -o-overflow-style: none;
  251. }
  252.  
  253. #text::-webkit-scrollbar {
  254. display: none;
  255. }
  256.  
  257. .left { /* left columns */
  258. border-right: 1px dashed #f07a9a;
  259. float: left;
  260. font-weight: bold;
  261. line-height: 22px;
  262. margin-left: 5px;
  263. margin-right: 15px;
  264. padding-right: 15px;
  265. text-transform: uppercase;
  266. }
  267.  
  268. .right { /* right columns */
  269. line-height: 22px;
  270. text-transform: lowercase;
  271. }
  272.  
  273. .content { /* invisible text container */
  274. padding: 8px;
  275. }
  276.  
  277. /* ----------------------------------------------------------------------- */
  278. /* -------------------------------- text --------------------------------- */
  279.  
  280. h1 { /* page title */
  281. color: #f07a9a;
  282. font-family: Roboto Slab;
  283. font-size: 2em;
  284. margin-bottom: 10px;
  285. padding-bottom: 10px;
  286. text-align: right;
  287. }
  288.  
  289. h2 { /* section titles */
  290. background-color: #d4a89f;
  291. color: #fafafa;
  292. display: block;
  293. font-family: Roboto Slab;
  294. font-size: 1.5em;
  295. padding: 5px 10px;
  296. text-align: right;
  297. }
  298.  
  299. a {
  300. color: #d4a89f; /* link color */
  301. text-decoration: none;
  302. transition: 0.4s;
  303. -moz-transition: 0.4s;
  304. -ms-transition: 0.4s;
  305. -o-transition: 0.4s;
  306. -webkit-transition: 0.4s;
  307. }
  308.  
  309. a:hover {
  310. color: #f07a9a; /* link hover color */
  311. transition: 0.4s;
  312. -moz-transition: 0.4s;
  313. -ms-transition: 0.4s;
  314. -o-transition: 0.4s;
  315. -webkit-transition: 0.4s;
  316. }
  317.  
  318. b {
  319. color: #f07a9a;
  320. }
  321.  
  322. /* ----------------------------------------------------------------------- */
  323. /* ----------------------------- responsive ------------------------------ */
  324.  
  325. @media only screen and (max-width: 1024px){
  326. #container {width: 740px;}
  327. #sidepic {height: 80px; width: 80px;}
  328. #sidemenu {height: 500px; text-align: center; width: 80px;}
  329. .big {display: none;}
  330. .small {display: block; font-size: 20px; margin-top: 2px;}
  331. .sidebarlinks a {height: 70px;}
  332. .sidebarlinks a:hover:after {
  333. height: calc(100% + 1px);
  334. height: -moz-calc(100% + 1px);
  335. height: -webkit-calc(100% + 1px);
  336. width: calc(100% + 1px);
  337. width: -moz-calc(100% + 1px);
  338. width: -webkit-calc(100% + 1px);
  339. }
  340. }
  341.  
  342. @media only screen and (max-width: 830px){
  343. #container {width: 445px;}
  344. #contentcontainer {width: 350px;}
  345. #text {float: none; margin: auto; width: 350px;}
  346. #stats, #text {height: 210px;}
  347. #leftcontainer {
  348. float: none;
  349. height: 435px;
  350. margin: 0px auto 15px auto;
  351. width: 350px;
  352. }
  353. }
  354.  
  355. /* ----------------------------------------------------------------------- */
  356. /* ------------------------------- credits ------------------------------- */
  357.  
  358. #credit {
  359. background-color: #ffffff;
  360. color: #f07a9a;
  361. bottom: 0;
  362. font-size: 20px;
  363. font-style: italic;
  364. margin: 10px;
  365. padding: 10px 0px;
  366. position: fixed;
  367. right: 0;
  368. text-align: center;
  369. transition: 0.4s;
  370. -moz-transition: 0.4s;
  371. -ms-transition: 0.4s;
  372. -o-transition: 0.4s;
  373. -webkit-transition: 0.4s;
  374. width: 40px;
  375. }
  376.  
  377. #credit:hover {
  378. background-color: #f07a9a;
  379. color: #ffffff;
  380. transition: 0.4s;
  381. -moz-transition: 0.4s;
  382. -ms-transition: 0.4s;
  383. -o-transition: 0.4s;
  384. -webkit-transition: 0.4s;
  385. }
  386.  
  387. /* ----------------------------------------------------------------------- */
  388.  
  389. </style>
  390.  
  391. </head>
  392.  
  393. <body>
  394.  
  395. <!--------------------------- START MAIN CONTENT---------------------------->
  396.  
  397. <div id="container">
  398.  
  399. <!-- start sidebar menu -->
  400.  
  401. <div id="sidemenu">
  402.  
  403. <a href="/" title="et in arcadia ego">
  404. <img id="sidepic" src="https://i.imgur.com/EtrbAvn.jpg">
  405. </a>
  406.  
  407. <!--
  408. below you can modify the sidebar links. the text in <span class="big"> shows with normal screen size. with smaller screen sizes, the icon in <span class="small"> will be visible. the title element is the text that shows when you hover over the icon.
  409.  
  410. if you need more help with customization, feel free to send me an ask or a dm!
  411. -->
  412.  
  413. <div class="sidebarlinks">
  414. <a href="/" id="linkhome">
  415.  
  416. <span class="big">home</span>
  417.  
  418. <span class="small" title="home">
  419. <i class="fas fa-home"></i>
  420. </span>
  421.  
  422. </a>
  423. </div>
  424.  
  425. <div class="sidebarlinks">
  426. <a href="" id="link1">
  427.  
  428. <span class="big">link 1</span>
  429.  
  430. <span class="small" title="link 1">
  431. <i class="fas fa-star"></i>
  432. </span>
  433.  
  434. </a>
  435. </div>
  436.  
  437. <div class="sidebarlinks">
  438. <a href="" id="link2">
  439.  
  440. <span class="big">link 2</span>
  441.  
  442. <span class="small" title="link 2">
  443. <i class="fas fa-rocket"></i>
  444. </span>
  445.  
  446. </a>
  447. </div>
  448.  
  449. <div class="sidebarlinks">
  450. <a href="" id="link3">
  451.  
  452. <span class="big">link 3</span>
  453.  
  454. <span class="small" title="link 3">
  455. <i class="fas fa-moon"></i>
  456. </span>
  457.  
  458. </a>
  459. </div>
  460.  
  461. <div class="sidebarlinks">
  462. <a href="" id="link4">
  463.  
  464. <span class="big">link 4</span>
  465.  
  466. <span class="small" title="link 4">
  467. <i class="fas fa-space-shuttle"></i>
  468. </span>
  469.  
  470. </a>
  471. </div>
  472.  
  473. <div class="sidebarlinks">
  474. <a href="" id="link5">
  475.  
  476. <span class="big">link 5</span>
  477.  
  478. <span class="small" title="link 5">
  479. <i class="fas fa-sun"></i>
  480. </span>
  481.  
  482. </a>
  483. </div>
  484.  
  485. </div>
  486.  
  487. <!-- end sidebar menu -->
  488.  
  489. <h1>cinnamon</h1> <!-- main title -->
  490.  
  491. <!-- start content -->
  492.  
  493. <div id="contentcontainer">
  494.  
  495. <div id="leftcontainer">
  496.  
  497. <!-- start facts -->
  498.  
  499. <div id="facts">
  500.  
  501. <h2>facts</h2>
  502.  
  503. <div class="content">
  504.  
  505. <div class="left">
  506. name
  507. <br>
  508. nickname
  509. <br>
  510. age
  511. <br>
  512. gender
  513. <br>
  514. pronouns
  515. <br>
  516. sexuality
  517. <br>
  518. alignment
  519. </div>
  520.  
  521. <div class="right">
  522. your name
  523. <br>
  524. your nickname
  525. <br>
  526. your age
  527. <br>
  528. your gender
  529. <br>
  530. your pronouns
  531. <br>
  532. your sexuality
  533. <br>
  534. your alignment
  535. </div>
  536.  
  537. </div>
  538.  
  539. </div>
  540.  
  541. <!-- end facts -->
  542.  
  543. <!-- start stats -->
  544.  
  545. <div id="stats">
  546.  
  547. <h2>stats</h2>
  548.  
  549. <div class="content">
  550.  
  551. <div class="left">
  552.  
  553. stat name
  554. <br>
  555. stat name
  556. <br>
  557. stat name
  558. <br>
  559. stat name
  560. <br>
  561. stat name
  562. <br>
  563. stat name
  564. <br>
  565. stat name
  566.  
  567. </div>
  568.  
  569. <div class="right">
  570.  
  571. <!-- stat 1 -->
  572.  
  573. <i class="fas fa-star"></i>
  574. <i class="fas fa-star"></i>
  575. <i class="fas fa-star"></i>
  576. <i class="fas fa-star"></i>
  577. <i class="far fa-star"></i>
  578. <i class="far fa-star"></i>
  579. <i class="far fa-star"></i>
  580. <i class="far fa-star"></i>
  581. <i class="far fa-star"></i>
  582.  
  583. <br>
  584.  
  585. <!-- stat 2 -->
  586.  
  587. <i class="fas fa-star"></i>
  588. <i class="fas fa-star"></i>
  589. <i class="fas fa-star"></i>
  590. <i class="fas fa-star"></i>
  591. <i class="fas fa-star"></i>
  592. <i class="far fa-star"></i>
  593. <i class="far fa-star"></i>
  594. <i class="far fa-star"></i>
  595. <i class="far fa-star"></i>
  596.  
  597. <br>
  598.  
  599. <!-- stat 3 -->
  600.  
  601. <i class="fas fa-star"></i>
  602. <i class="fas fa-star"></i>
  603. <i class="fas fa-star"></i>
  604. <i class="fas fa-star"></i>
  605. <i class="fas fa-star"></i>
  606. <i class="fas fa-star"></i>
  607. <i class="fas fa-star"></i>
  608. <i class="far fa-star"></i>
  609. <i class="far fa-star"></i>
  610.  
  611. <br>
  612.  
  613. <!-- stat 4 -->
  614.  
  615. <i class="fas fa-star"></i>
  616. <i class="fas fa-star"></i>
  617. <i class="fas fa-star"></i>
  618. <i class="far fa-star"></i>
  619. <i class="far fa-star"></i>
  620. <i class="far fa-star"></i>
  621. <i class="far fa-star"></i>
  622. <i class="far fa-star"></i>
  623. <i class="far fa-star"></i>
  624.  
  625. <br>
  626.  
  627. <!-- stat 5 -->
  628.  
  629. <i class="fas fa-star"></i>
  630. <i class="fas fa-star"></i>
  631. <i class="fas fa-star"></i>
  632. <i class="fas fa-star"></i>
  633. <i class="fas fa-star"></i>
  634. <i class="fas fa-star"></i>
  635. <i class="fas fa-star"></i>
  636. <i class="fas fa-star"></i>
  637. <i class="fas fa-star"></i>
  638.  
  639. <br>
  640.  
  641. <!-- stat 6 -->
  642.  
  643. <i class="fas fa-star"></i>
  644. <i class="fas fa-star"></i>
  645. <i class="fas fa-star"></i>
  646. <i class="fas fa-star"></i>
  647. <i class="fas fa-star"></i>
  648. <i class="fas fa-star"></i>
  649. <i class="fas fa-star"></i>
  650. <i class="far fa-star"></i>
  651. <i class="far fa-star"></i>
  652.  
  653. <br>
  654.  
  655. <!-- stat 7 -->
  656.  
  657. <i class="fas fa-star"></i>
  658. <i class="fas fa-star"></i>
  659. <i class="far fa-star"></i>
  660. <i class="far fa-star"></i>
  661. <i class="far fa-star"></i>
  662. <i class="far fa-star"></i>
  663. <i class="far fa-star"></i>
  664. <i class="far fa-star"></i>
  665. <i class="far fa-star"></i>
  666.  
  667. </div>
  668.  
  669. </div>
  670.  
  671. </div>
  672.  
  673. <!-- end stats -->
  674.  
  675. </div>
  676.  
  677. <!-- start text -->
  678.  
  679. <div id="text">
  680.  
  681. <h2>text</h2>
  682.  
  683. <div class="content">
  684.  
  685. This is where you can put a whole bunch of text. This block has automatic overflow, so you don't have to worry about writing too much. You can also add <b>bold text here</b> or <i>italic text</i>. You can even put <a href="">links</a> here if you'd like!
  686.  
  687. <br><br>
  688.  
  689. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In ante metus dictum at tempor commodo ullamcorper a lacus. Nulla posuere sollicitudin aliquam ultrices sagittis orci a.
  690.  
  691. <br><br>
  692.  
  693. Egestas congue quisque egestas diam in arcu cursus euismod quis. Scelerisque viverra mauris in aliquam sem. Tellus molestie nunc non blandit massa enim nec. Velit laoreet id donec ultrices tincidunt arcu. Elit pellentesque habitant morbi tristique senectus et netus et malesuada. Quisque egestas diam in arcu cursus. Varius duis at consectetur lorem donec massa. Mollis nunc sed id semper risus in hendrerit.
  694.  
  695. <br><br>
  696.  
  697. Nibh tortor id aliquet lectus proin. Ac turpis egestas sed tempus urna et. Egestas congue quisque egestas diam in arcu cursus euismod. Dis parturient montes nascetur ridiculus mus. Enim eu turpis egestas pretium. Nulla aliquet enim tortor at. Odio ut enim blandit volutpat maecenas volutpat. Facilisi morbi tempus iaculis urna id. Pretium lectus quam id leo in vitae turpis massa sed.
  698.  
  699. <br><br>
  700.  
  701. Diam sit amet nisl suscipit adipiscing bibendum est. Ante in nibh mauris cursus mattis molestie. Orci porta non pulvinar neque laoreet suspendisse interdum. Erat pellentesque adipiscing commodo elit at. Tincidunt vitae semper quis lectus.
  702.  
  703. </div>
  704.  
  705. </div>
  706.  
  707. <!-- end text -->
  708.  
  709. </div>
  710.  
  711. <!-- end content -->
  712.  
  713. </div>
  714.  
  715. <!---------------------------- END MAIN CONTENT----------------------------->
  716.  
  717. <!-- don't edit beyond this point please! colors can be modified in <style> -->
  718.  
  719. <a id="credit" target="blank" title="by bones" href="https://nuclearthemes.tumblr.com/"><i class="fas fa-skull"></i></a>
  720.  
  721. <script src="https://unpkg.com/popper.js@1"></script>
  722. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  723. <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/svg-arrow.css" />
  724.  
  725. <script>
  726. tippy('[title]', {
  727. theme: 'custom',
  728. arrow: false,
  729. delay: [200, 0],
  730. zIndex: 9999999999,
  731. maxWidth: 300,
  732.  
  733. content(reference) {
  734. const title = reference.getAttribute('title');
  735. reference.removeAttribute('title');
  736. return title;
  737. },
  738. });
  739. </script>
  740.  
  741. </body>
  742.  
  743. </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!