API tools faq
paste
tricksterkid

nuclearthemes / page 001

tricksterkid
Dec 7th, 2020 (edited)
970
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 25.57 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. • Background pattern by MagicPattern >> https://www.magicpattern.design/
  10. • Custom tooltips by Atomiks >> https://atomiks.github.io/tippyjs/
  11. • Fonts from Google >> https://fonts.google.com/
  12. • Hidden information by lmthemes >> https://lmthemes.tumblr.com/
  13. • Icons from Font Awesome >> https://fontawesome.com/
  14. • Placeholders from Unsplash >> https://unsplash.com/
  15. • Tumblr controls fix by odeysseus >> https://odeysseus.tumblr.com/
  16.  
  17. -->
  18.  
  19. <html>
  20.  
  21. <head>
  22.  
  23. <title>{Name} / title</title> <!-- page title -->
  24.  
  25. <link rel="shortcut icon" href="{Favicon}">
  26.  
  27. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  28.  
  29. <link href="https://fonts.googleapis.com/css?family=Work+Sans:400,400i,700,700i" rel="stylesheet">
  30.  
  31. <script src="https://kit.fontawesome.com/802dca85f3.js" crossorigin="anonymous"></script>
  32.  
  33. <style type="text/css">
  34.  
  35. * {margin:0; padding:0;}
  36.  
  37. /* ----------------------------------------------------------------------- */
  38. /* --------------------------- tumblr controls --------------------------- */
  39.  
  40. .tmblr-iframe {
  41. filter: invert(100%);
  42. -o-filter: invert(100%);
  43. -moz-filter: invert(100%);
  44. -ms-filter: invert(100%);
  45. -webkit-filter: invert(100%);
  46. opacity: 0.2;
  47. position: fixed;
  48. right: 5px;
  49. top: 5px;
  50. transform: scale(0.7,0.7);
  51. transform-origin: 100% 0%;
  52. -ms-transform-origin: 100% 0%;
  53. -webkit-transform-origin: 100% 0%;
  54. transition: 0.4s;
  55. -o-transition: 0.4s;
  56. -moz-transition: 0.4s;
  57. -ms-transition: 0.4s;
  58. -webkit-transition: 0.4s;
  59. white-space: nowrap;
  60. }
  61.  
  62. .tmblr-iframe:hover {
  63. opacity: 1;
  64. }
  65.  
  66. /* ----------------------------------------------------------------------- */
  67. /* --------------------------- custom tooltips --------------------------- */
  68.  
  69. .tippy-tooltip.custom-theme {
  70. background-color: #fcdfd7;
  71. border-radius: 0;
  72. color: #141414;
  73. font-family: inherit;
  74. font-size: inherit;
  75. text-align: center;
  76. }
  77.  
  78. /* ----------------------------------------------------------------------- */
  79. /* -------------------- custom selection & scrollbar --------------------- */
  80.  
  81. ::-moz-selection {background: #fcdfd7; color: #ffffff;}
  82. ::selection {background: #fcdfd7; color: #ffffff;}
  83.  
  84. ::-webkit-scrollbar-thumb
  85. {background: #f0a892; border: 5px solid #ffffff; border-radius: 10px;}
  86. ::-webkit-scrollbar-track
  87. {background: #141414; border: 7px solid #ffffff;}
  88. ::-webkit-scrollbar
  89. {width: 15px;}
  90.  
  91. /* ----------------------------------------------------------------------- */
  92. /* ----------------------------- page layout ----------------------------- */
  93.  
  94. body {
  95. background: #ffffff; /* background color */
  96. color: #141414; /* text color */
  97. font-family: Work Sans; /* font */
  98. font-size: 15px; /* font size */
  99. text-align: justify; /* text align */
  100. }
  101.  
  102. #container {
  103. margin: 50px auto;
  104. max-width: 900px;
  105. width: 90%;
  106. }
  107.  
  108. /* ----------------------------------------------------------------------- */
  109. /* -------------------------------- header ------------------------------- */
  110.  
  111. #header { /* top header */
  112. background-color: #f0a892;
  113. background-image: repeating-linear-gradient(45deg, #ffffff 0, #ffffff 3.2px, #f0a892 0, #f0a892 50%);
  114. background-size: 32px 32px;
  115. display: flex;
  116. display: -moz-box;
  117. display: -ms-flexbox;
  118. display: -webkit-box;
  119. display: -webkit-flex;
  120. justify-content: space-between;
  121. opacity: 1;
  122. padding: 10px;
  123. text-align: center;
  124. }
  125.  
  126. #homebutton { /* home button */
  127. background-color: #ffffff;
  128. border-radius: 100%;
  129. color: #f0a892;
  130. font-size: 17px;
  131. margin: 5px 0px 0px 5px;
  132. padding: 15px;
  133. transition: 0.4s;
  134. -moz-transition: 0.4s;
  135. -ms-transition: 0.4s;
  136. -o-transition: 0.4s;
  137. -webkit-transition: 0.4s;
  138. }
  139.  
  140. #homebutton:hover { /* home button hover */
  141. background-color: #fcdfd7;
  142. color: #141414;
  143. transition: 0.4s;
  144. -moz-transition: 0.4s;
  145. -ms-transition: 0.4s;
  146. -o-transition: 0.4s;
  147. -webkit-transition: 0.4s;
  148. }
  149.  
  150. .dropdown { /* dropdown box */
  151. position: relative;
  152. }
  153.  
  154. .dropbtn { /* dropdown menu button */
  155. background-color: #ffffff;
  156. border: none;
  157. border-radius: 100%;
  158. color: #f0a892;
  159. cursor: pointer;
  160. font-size: 17px;
  161. margin: 5px 5px 0px 0px;
  162. outline: none;
  163. padding: 15px;
  164. transition: 0.4s;
  165. -moz-transition: 0.4s;
  166. -ms-transition: 0.4s;
  167. -o-transition: 0.4s;
  168. -webkit-transition: 0.4s;
  169. width: 45px;
  170. }
  171.  
  172. .dropbtn:hover, .dropbtn:focus { /* dropdown menu button hover */
  173. background-color: #fcdfd7;
  174. color: #141414;
  175. transform: rotate(-90deg);
  176. -moz-transform: rotate(-90deg);
  177. -ms-transform: rotate(-90deg);
  178. -o-transform: rotate(-90deg);
  179. -webkit-transform: rotate(-90deg);
  180. transition: 0.4;
  181. -moz-transition: 0.4s;
  182. -ms-transition: 0.4s;
  183. -o-transition: 0.4s;
  184. -webkit-transition: 0.4s;
  185. }
  186.  
  187. .dropdown-content { /* dropdown content */
  188. display: none;
  189. background-color: #ffffff;
  190. overflow: auto;
  191. position: absolute;
  192. text-align: center;
  193. transform: translateX(-55px);
  194. -moz-transform: translateX(-55px);
  195. -ms-transform: translateX(-55px);
  196. -o-transform: translateX(-55px);
  197. -webkit-transform: translateX(-55px);
  198. width: 150px;
  199. z-index: 1;
  200. }
  201.  
  202. .dropdown-content a { /* dropdown content links */
  203. color: #141414;
  204. display: block;
  205. padding: 12px 16px;
  206. text-decoration: none;
  207. text-transform: uppercase;
  208. transition: 0.4s;
  209. -moz-transition: 0.4s;
  210. -ms-transition: 0.4s;
  211. -o-transition: 0.4s;
  212. -webkit-transition: 0.4s;
  213. }
  214.  
  215. .dropdown a:hover { /* dropdown content links hover */
  216. background-color: #f0a892;
  217. color: #ffffff;
  218. transition: 0.4s;
  219. -moz-transition: 0.4s;
  220. -ms-transition: 0.4s;
  221. -o-transition: 0.4s;
  222. -webkit-transition: 0.4s;
  223. }
  224.  
  225. .show {
  226. display: block;
  227. }
  228.  
  229. /* ----------------------------------------------------------------------- */
  230. /* ------------------------------- content ------------------------------- */
  231.  
  232. #charcontainer { /* invisible content container */
  233. display: flex;
  234. display: -moz-box;
  235. display: -ms-flexbox;
  236. display: -webkit-box;
  237. display: -webkit-flex;
  238. flex-wrap: wrap;
  239. justify-content: space-between;
  240. }
  241.  
  242. .charbox { /* character boxes */
  243. background-color: #fcdfd7;
  244. height: 185px;
  245. margin-top: 30px;
  246. overflow: hidden;
  247. padding: 20px;
  248. transition: 0.4s;
  249. -moz-transition: 0.4s;
  250. -ms-transition: 0.4s;
  251. -o-transition: 0.4s;
  252. -webkit-transition: 0.4s;
  253. width: 160px;
  254. }
  255.  
  256. .charbox:hover { /* character box hover */
  257. height: 300px;
  258. transition: 0.4s;
  259. -moz-transition: 0.4s;
  260. -ms-transition: 0.4s;
  261. -o-transition: 0.4s;
  262. -webkit-transition: 0.4s;
  263. }
  264.  
  265. .charbox img { /* character image */
  266. width: 120px;
  267. background-color: #ffffff;
  268. padding: 10px;
  269. margin: 10px 0px 0px 10px;
  270. }
  271.  
  272. .secondimg { /* second character image */
  273. opacity: 0;
  274. position: absolute;
  275. transition: 0.4s;
  276. -moz-transition: 0.4s;
  277. -ms-transition: 0.4s;
  278. -o-transition: 0.4s;
  279. -webkit-transition: 0.4s;
  280. z-index: 1;
  281. }
  282.  
  283. .secondimg:hover { /* second character image hover */
  284. opacity: 1;
  285. transition: 0.4s;
  286. -moz-transition: 0.4s;
  287. -ms-transition: 0.4s;
  288. -o-transition: 0.4s;
  289. -webkit-transition: 0.4s;
  290. }
  291.  
  292. .icons { /* icon links in character boxes */
  293. background-color: #f0a892;
  294. border-radius: 100%;
  295. color: #ffffff;
  296. display: inline-block;
  297. font-size: 1.2em;
  298. padding: 12px;
  299. position: absolute;
  300. transition: 0.4s;
  301. -moz-transition: 0.4s;
  302. -ms-transition: 0.4s;
  303. -o-transition: 0.4s;
  304. -webkit-transition: 0.4s;
  305. z-index: 999;
  306. }
  307.  
  308. .icons:hover { /* icon links on hover */
  309. background-color: #ffffff;
  310. color: #f0a892;
  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. .description { /* character description */
  319. margin-top: 2em;
  320. overflow: auto;
  321. height: 90px;
  322. -moz-overflow-style: none;
  323. -ms-overflow-style: none;
  324. -o-overflow-style: none;
  325. }
  326.  
  327. .description::-webkit-scrollbar {
  328. display: none;
  329. }
  330.  
  331. /* ----------------------------------------------------------------------- */
  332. /* -------------------------------- text --------------------------------- */
  333.  
  334. h1 { /* main title */
  335. background-color: #f0a892;
  336. display: inline-block;
  337. font-family: Work Sans;
  338. font-size: 2em;
  339. font-weight: normal;
  340. padding: 10px;
  341. text-transform: uppercase;
  342. }
  343.  
  344. h2 { /* character name */
  345. font-family: Work Sans;
  346. font-size: 1.5em;
  347. font-weight: bold;
  348. line-height: 90%;
  349. margin-top: -10px;
  350. position: relative;
  351. text-align: center;
  352. z-index: 999;
  353. }
  354.  
  355. a {
  356. color: #f0a892; /* link color */
  357. text-decoration: none;
  358. transition: 0.4s;
  359. -moz-transition: 0.4s;
  360. -ms-transition: 0.4s;
  361. -o-transition: 0.4s;
  362. -webkit-transition: 0.4s;
  363. }
  364.  
  365. a:hover {
  366. color: #ffffff; /* link hover color */
  367. transition: 0.4s;
  368. -moz-transition: 0.4s;
  369. -ms-transition: 0.4s;
  370. -o-transition: 0.4s;
  371. -webkit-transition: 0.4s;
  372. }
  373.  
  374. /* ----------------------------------------------------------------------- */
  375. /* ----------------------------- responsive ------------------------------ */
  376.  
  377. @media only screen and (max-width: 500px){
  378. #charcontainer {justify-content: space-around;}
  379. }
  380.  
  381. /* ----------------------------------------------------------------------- */
  382. /* ------------------------------- credits ------------------------------- */
  383.  
  384. #credit {
  385. background-color: #ffffff;
  386. color: #f0a892;
  387. bottom: 0;
  388. font-size: 20px;
  389. font-style: italic;
  390. margin: 10px;
  391. padding: 10px 0px;
  392. position: fixed;
  393. right: 0;
  394. text-align: center;
  395. transition: 0.4s;
  396. -moz-transition: 0.4s;
  397. -ms-transition: 0.4s;
  398. -o-transition: 0.4s;
  399. -webkit-transition: 0.4s;
  400. width: 40px;
  401. }
  402.  
  403. #credit:hover {
  404. background-color: #f0a892;
  405. color: #ffffff;
  406. transition: 0.4s;
  407. -moz-transition: 0.4s;
  408. -ms-transition: 0.4s;
  409. -o-transition: 0.4s;
  410. -webkit-transition: 0.4s;
  411. }
  412.  
  413. /* ----------------------------------------------------------------------- */
  414.  
  415. </style>
  416.  
  417. </head>
  418.  
  419. <body>
  420.  
  421. <!--------------------------- START MAIN CONTENT---------------------------->
  422.  
  423. <div id="container">
  424.  
  425. <!-- header -->
  426.  
  427. <div id="header">
  428.  
  429. <!-- home button -->
  430.  
  431. <a href="/" title="home">
  432. <div id="homebutton">
  433. <i class="fas fa-home"></i>
  434. </div>
  435. </a>
  436.  
  437. <!-- main title -->
  438.  
  439. <h1>i know i'm not alone</h1>
  440.  
  441. <!-- dropdown menu -->
  442.  
  443. <div class="dropdown">
  444.  
  445. <!-- dropdown menu button -->
  446.  
  447. <button onclick="myFunction()" class="dropbtn" title="navigation">
  448. <i class="fas fa-ellipsis-v"></i>
  449. </button>
  450.  
  451. <!-- dropdown menu links -->
  452.  
  453. <div id="myDropdown" class="dropdown-content">
  454.  
  455. <a href="">link 1</a>
  456. <a href="">link 2</a>
  457. <a href="">link 3</a>
  458.  
  459. </div>
  460.  
  461. </div>
  462.  
  463. </div>
  464.  
  465. <!-- content -->
  466.  
  467. <div id="charcontainer">
  468.  
  469. <!-- character 1 -->
  470.  
  471. <div class="charbox">
  472.  
  473. <!-- icon link -->
  474.  
  475. <a href="">
  476. <div class="icons" title="link">
  477. <i class="fas fa-sun"></i>
  478. </div>
  479. </a>
  480.  
  481. <!-- images -->
  482.  
  483. <img src="https://i.imgur.com/i6WYbCp.png" class="secondimg">
  484. <img src="https://i.imgur.com/2CiWg6E.png">
  485.  
  486. <!-- character name -->
  487.  
  488. <h2>
  489. character
  490. <br>
  491. name
  492. </h2>
  493.  
  494. <!-- character description -->
  495.  
  496. <div class="description">
  497.  
  498. OC description. <b>Bold text</b>, <i>italic text</i>, <a href="">link</a>. This box has an automatic overflow, so you can write as much as you want!
  499.  
  500. </div>
  501.  
  502. </div>
  503.  
  504. <!-- character 2 -->
  505.  
  506. <div class="charbox">
  507.  
  508. <!-- icon link -->
  509.  
  510. <a href="">
  511. <div class="icons" title="link">
  512. <i class="fas fa-heart"></i>
  513. </div>
  514. </a>
  515.  
  516. <!-- images -->
  517.  
  518. <img src="https://i.imgur.com/wL1Nmfr.png" class="secondimg">
  519. <img src="https://i.imgur.com/5Ka7X2v.png">
  520.  
  521. <!-- character name -->
  522.  
  523. <h2>
  524. character
  525. <br>
  526. name
  527. </h2>
  528.  
  529. <!-- character description -->
  530.  
  531. <div class="description">
  532.  
  533. OC description. <b>Bold text</b>, <i>italic text</i>, <a href="">link</a>. This box has an automatic overflow, so you can write as much as you want!
  534.  
  535. </div>
  536.  
  537. </div>
  538.  
  539. <!-- character 3 -->
  540.  
  541. <div class="charbox">
  542.  
  543. <!-- icon link -->
  544.  
  545. <a href="">
  546. <div class="icons" title="link">
  547. <i class="fas fa-coffee"></i>
  548. </div>
  549. </a>
  550.  
  551. <!-- images -->
  552.  
  553. <img src="https://i.imgur.com/QPAOQHI.png" class="secondimg">
  554. <img src="https://i.imgur.com/OijTdgV.png">
  555.  
  556. <!-- character name -->
  557.  
  558. <h2>
  559. character
  560. <br>
  561. name
  562. </h2>
  563.  
  564. <!-- character description -->
  565.  
  566. <div class="description">
  567.  
  568. OC description. <b>Bold text</b>, <i>italic text</i>, <a href="">link</a>. This box has an automatic overflow, so you can write as much as you want!
  569.  
  570. </div>
  571.  
  572. </div>
  573.  
  574. <!-- character 4 -->
  575.  
  576. <div class="charbox">
  577.  
  578. <!-- icon link -->
  579.  
  580. <a href="">
  581. <div class="icons" title="link">
  582. <i class="fas fa-frog"></i>
  583. </div>
  584. </a>
  585.  
  586. <!-- images -->
  587.  
  588. <img src="https://i.imgur.com/sM1kDvQ.png" class="secondimg">
  589. <img src="https://i.imgur.com/qIbxEeP.png">
  590.  
  591. <!-- character name -->
  592.  
  593. <h2>
  594. character
  595. <br>
  596. name
  597. </h2>
  598.  
  599. <!-- character description -->
  600.  
  601. <div class="description">
  602.  
  603. OC description. <b>Bold text</b>, <i>italic text</i>, <a href="">link</a>. This box has an automatic overflow, so you can write as much as you want!
  604.  
  605. </div>
  606.  
  607. </div>
  608.  
  609. <!-- character 5 -->
  610.  
  611. <div class="charbox">
  612.  
  613. <!-- icon link -->
  614.  
  615. <a href="">
  616. <div class="icons" title="link">
  617. <i class="fas fa-anchor"></i>
  618. </div>
  619. </a>
  620.  
  621. <!-- images -->
  622.  
  623. <img src="https://i.imgur.com/l0ma4eT.png" class="secondimg">
  624. <img src="https://i.imgur.com/yPYgdt6.png">
  625.  
  626. <!-- character name -->
  627.  
  628. <h2>
  629. character
  630. <br>
  631. name
  632. </h2>
  633.  
  634. <!-- character description -->
  635.  
  636. <div class="description">
  637.  
  638. OC description. <b>Bold text</b>, <i>italic text</i>, <a href="">link</a>. This box has an automatic overflow, so you can write as much as you want!
  639.  
  640. </div>
  641.  
  642. </div>
  643.  
  644. <!-- character 6 -->
  645.  
  646. <div class="charbox">
  647.  
  648. <!-- icon link -->
  649.  
  650. <a href="">
  651. <div class="icons" title="link">
  652. <i class="fas fa-bread-slice"></i>
  653. </div>
  654. </a>
  655.  
  656. <!-- images -->
  657.  
  658. <img src="https://i.imgur.com/HUO4g73.png" class="secondimg">
  659. <img src="https://i.imgur.com/lR32MYW.png">
  660.  
  661. <!-- character name -->
  662.  
  663. <h2>
  664. character
  665. <br>
  666. name
  667. </h2>
  668.  
  669. <!-- character description -->
  670.  
  671. <div class="description">
  672.  
  673. OC description. <b>Bold text</b>, <i>italic text</i>, <a href="">link</a>. This box has an automatic overflow, so you can write as much as you want!
  674.  
  675. </div>
  676.  
  677. </div>
  678.  
  679. <!-- character 7 -->
  680.  
  681. <div class="charbox">
  682.  
  683. <!-- icon link -->
  684.  
  685. <a href="">
  686. <div class="icons" title="link">
  687. <i class="fas fa-meteor"></i>
  688. </div>
  689. </a>
  690.  
  691. <!-- images -->
  692.  
  693. <img src="https://i.imgur.com/PKif7g2.png" class="secondimg">
  694. <img src="https://i.imgur.com/eZzI2fG.png">
  695.  
  696. <!-- character name -->
  697.  
  698. <h2>
  699. character
  700. <br>
  701. name
  702. </h2>
  703.  
  704. <!-- character description -->
  705.  
  706. <div class="description">
  707.  
  708. OC description. <b>Bold text</b>, <i>italic text</i>, <a href="">link</a>. This box has an automatic overflow, so you can write as much as you want!
  709.  
  710. </div>
  711.  
  712. </div>
  713.  
  714. <!-- character 8 -->
  715.  
  716. <div class="charbox">
  717.  
  718. <!-- icon link -->
  719.  
  720. <a href="">
  721. <div class="icons" title="link">
  722. <i class="fas fa-paint-brush"></i>
  723. </div>
  724. </a>
  725.  
  726. <!-- images -->
  727.  
  728. <img src="https://i.imgur.com/paJSUDm.png" class="secondimg">
  729. <img src="https://i.imgur.com/VVsENrA.png">
  730.  
  731. <!-- character name -->
  732.  
  733. <h2>
  734. character
  735. <br>
  736. name
  737. </h2>
  738.  
  739. <!-- character description -->
  740.  
  741. <div class="description">
  742.  
  743. OC description. <b>Bold text</b>, <i>italic text</i>, <a href="">link</a>. This box has an automatic overflow, so you can write as much as you want!
  744.  
  745. </div>
  746.  
  747. </div>
  748.  
  749. <!-- character 9 -->
  750.  
  751. <div class="charbox">
  752.  
  753. <!-- icon link -->
  754.  
  755. <a href="">
  756. <div class="icons" title="link">
  757. <i class="fas fa-crow"></i>
  758. </div>
  759. </a>
  760.  
  761. <!-- images -->
  762.  
  763. <img src="https://i.imgur.com/qgiKe1s.png" class="secondimg">
  764. <img src="https://i.imgur.com/Akwz03p.png">
  765.  
  766. <!-- character name -->
  767.  
  768. <h2>
  769. character
  770. <br>
  771. name
  772. </h2>
  773.  
  774. <!-- character description -->
  775.  
  776. <div class="description">
  777.  
  778. OC description. <b>Bold text</b>, <i>italic text</i>, <a href="">link</a>. This box has an automatic overflow, so you can write as much as you want!
  779.  
  780. </div>
  781.  
  782. </div>
  783.  
  784. <!-- character 10 -->
  785.  
  786. <div class="charbox">
  787.  
  788. <!-- icon link -->
  789.  
  790. <a href="">
  791. <div class="icons" title="link">
  792. <i class="fas fa-hat-cowboy"></i>
  793. </div>
  794. </a>
  795.  
  796. <!-- images -->
  797.  
  798. <img src="https://i.imgur.com/FFDqUFi.png" class="secondimg">
  799. <img src="https://i.imgur.com/eFA676v.png">
  800.  
  801. <!-- character name -->
  802.  
  803. <h2>
  804. character
  805. <br>
  806. name
  807. </h2>
  808.  
  809. <!-- character description -->
  810.  
  811. <div class="description">
  812.  
  813. OC description. <b>Bold text</b>, <i>italic text</i>, <a href="">link</a>. This box has an automatic overflow, so you can write as much as you want!
  814.  
  815. </div>
  816.  
  817. </div>
  818.  
  819. <!-- character 11 -->
  820.  
  821. <div class="charbox">
  822.  
  823. <!-- icon link -->
  824.  
  825. <a href="">
  826. <div class="icons" title="link">
  827. <i class="fas fa-eye"></i>
  828. </div>
  829. </a>
  830.  
  831. <!-- images -->
  832.  
  833. <img src="https://i.imgur.com/cnM9iCW.png" class="secondimg">
  834. <img src="https://i.imgur.com/Yt9Jvmw.png">
  835.  
  836. <!-- character name -->
  837.  
  838. <h2>
  839. character
  840. <br>
  841. name
  842. </h2>
  843.  
  844. <!-- character description -->
  845.  
  846. <div class="description">
  847.  
  848. OC description. <b>Bold text</b>, <i>italic text</i>, <a href="">link</a>. This box has an automatic overflow, so you can write as much as you want!
  849.  
  850. </div>
  851.  
  852. </div>
  853.  
  854. <!-- character 12 -->
  855.  
  856. <div class="charbox">
  857.  
  858. <!-- icon link -->
  859.  
  860. <a href="">
  861. <div class="icons" title="link">
  862. <i class="fas fa-ghost"></i>
  863. </div>
  864. </a>
  865.  
  866. <!-- images -->
  867.  
  868. <img src="https://i.imgur.com/UtgwYHH.png" class="secondimg">
  869. <img src="https://i.imgur.com/KGRV8Jd.png">
  870.  
  871. <!-- character name -->
  872.  
  873. <h2>
  874. character
  875. <br>
  876. name
  877. </h2>
  878.  
  879. <!-- character description -->
  880.  
  881. <div class="description">
  882.  
  883. OC description. <b>Bold text</b>, <i>italic text</i>, <a href="">link</a>. This box has an automatic overflow, so you can write as much as you want!
  884.  
  885. </div>
  886.  
  887. </div>
  888.  
  889. <!-- add more characters here by copy pasting <div id="charbox">! -->
  890.  
  891. </div>
  892.  
  893. </div>
  894.  
  895. <!---------------------------- END MAIN CONTENT----------------------------->
  896.  
  897. <!-- don't edit beyond this point please! colors can be modified in <style> -->
  898.  
  899. <a id="credit" target="blank" title="by bones" href="https://nuclearthemes.tumblr.com/"><i class="fas fa-skull"></i></a>
  900.  
  901. <script src="https://unpkg.com/popper.js@1"></script>
  902. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  903. <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/svg-arrow.css" />
  904.  
  905. <script>
  906. function myFunction() {
  907. document.getElementById("myDropdown").classList.toggle("show");
  908. }
  909.  
  910. window.onclick = function(event) {
  911. if (!event.target.matches('.dropbtn')) {
  912. var dropdowns = document.getElementsByClassName("dropdown-content");
  913. var i;
  914.  
  915. for (i = 0; i < dropdowns.length; i++) {
  916. var openDropdown = dropdowns[i];
  917. if (openDropdown.classList.contains('show')) {
  918. openDropdown.classList.remove('show');
  919. }
  920. }
  921. }
  922. }
  923.  
  924. tippy('[title]', {
  925. theme: 'custom',
  926. arrow: false,
  927. delay: [200, 0],
  928. zIndex: 9999999999,
  929. maxWidth: 300,
  930.  
  931. content(reference) {
  932. const title = reference.getAttribute('title');
  933. reference.removeAttribute('title');
  934. return title;
  935. },
  936. });
  937. </script>
  938.  
  939. </body>
  940.  
  941. </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!