tricksterkid

tumblr page // sunflower

Oct 16th, 2020 (edited)
1,818
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 27.55 KB | None | 0 0
  1. <!DOCTYPE html PUBLIC>
  2.  
  3. <!-- @NUCLEARTHEMES ON TUMBLR || PLEASE DON'T DELETE CREDIT -->
  4.  
  5. <!--
  6. || CREDITS ||
  7.  
  8. Custom tooltips by Atomiks >> https://atomiks.github.io/tippyjs/
  9.  
  10. Fonts from Google >> https://fonts.google.com/
  11.  
  12. Placeholders from Unsplash >> https://unsplash.com/
  13.  
  14. -->
  15.  
  16. <html>
  17.  
  18. <head>
  19.  
  20. <title>{Name} / title</title> <!-- page title -->
  21.  
  22. <link rel="shortcut icon" href="{Favicon}">
  23.  
  24. <link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,400i,700,700i|Josefin+Sans:400,400i,700,700i|Kristi:400,400i,700,700i" rel="stylesheet">
  25.  
  26. <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  27.  
  28. <style type="text/css">
  29.  
  30. /* ----------------------------------------------------------------------- */
  31. /* --------------------------- custom tooltips --------------------------- */
  32.  
  33. .tippy-tooltip.custom-theme {
  34. background-color: #5c616d;
  35. color: #f5d177;
  36. font-family: inherit;
  37. text-align: center;
  38. }
  39.  
  40. /* ----------------------------------------------------------------------- */
  41. /* -------------------- custom selection & scrollbar --------------------- */
  42.  
  43. ::-moz-selection {background: #f4f8ff; color: #2f3136;}
  44. ::selection {background: #f4f8ff; color: #2f3136;}
  45.  
  46. ::-webkit-scrollbar-thumb {background: #f4f8ff;}
  47. ::-webkit-scrollbar {background: #2f3136; width: 5px;}
  48.  
  49. * {margin:0; padding:0;}
  50.  
  51. /* ----------------------------------------------------------------------- */
  52. /* ---------------------------- large blocks ----------------------------- */
  53.  
  54. body {
  55. background: #2f3136; /* background color */
  56. color: #f4f8ff; /* text color */
  57. font-family: Josefin Sans; /* font */
  58. font-size: 14px; /* font size */
  59. text-align: justify; /* text align */
  60. -ms-overflow-style: none;
  61. }
  62.  
  63. body::-webkit-scrollbar {
  64. display: none;
  65. }
  66.  
  67. #sidemenu { /* CONTAINER SIDE MENU */
  68. background-color: #36393f;
  69. border-radius: 20px;
  70. height: calc(100% - 80px);
  71. margin: 20px;
  72. overflow: auto;
  73. padding: 20px;
  74. position: absolute;
  75. width: 150px;
  76. -ms-overflow-style: none;
  77. }
  78.  
  79. #sidemenu::-webkit-scrollbar {
  80. display: none;
  81. }
  82.  
  83. #btncontainer { /* CONTAINER TOP BUTTONS */
  84. background-color: #36393f;
  85. border-radius: 20px 20px 0px 0px;
  86. height: 50px;
  87. overflow: hidden;
  88. margin: 20px;
  89. position: absolute;
  90. right: 0;
  91. width: calc(100% - 260px);
  92. }
  93.  
  94. #container { /* CONTAINER CONTENT */
  95. background-color: #36393f;
  96. border-radius: 0px 0px 20px 20px;
  97. bottom: 0;
  98. height: calc(100% - 130px);
  99. margin: 20px;
  100. overflow: none;
  101. padding: 20px;
  102. position: absolute;
  103. right: 0;
  104. width: calc(100% - 300px);
  105. }
  106.  
  107. .tabcontent { /* CONTAINER TAB CONTENT */
  108. display: none;
  109. height: 100%;
  110. overflow: none;
  111. width: 100%;
  112. }
  113.  
  114. /* ----------------------------------------------------------------------- */
  115. /* ----------------------------- tab buttons ----------------------------- */
  116.  
  117. #btncontainer button { /* tab buttons */
  118. background-color: inherit;
  119. border: none;
  120. color: #dee1e9;
  121. cursor: pointer;
  122. display: inline;
  123. font-family: inherit;
  124. margin: 0;
  125. outline: none;
  126. padding: 15px;
  127. text-transform: uppercase;
  128. }
  129.  
  130. #btncontainer button:hover { /* tab buttons hover */
  131. background-color: #f57794;
  132. color: #f4f8ff;
  133. transition: 0.4s;
  134. }
  135.  
  136. #btncontainer button.active { /* active tab button */
  137. background-color: #f57794;
  138. color: #f4f8ff;
  139. }
  140.  
  141. /* ----------------------------------------------------------------------- */
  142. /* -------------------------------- text --------------------------------- */
  143.  
  144. h1 { /* sidebar title */
  145. color: #f5d177;
  146. font-family: Fira Sans;
  147. font-size: 2em;
  148. font-weight: normal;
  149. margin-top: 15px;
  150. text-align: center;
  151. text-transform: uppercase;
  152. }
  153.  
  154. h2 { /* character names */
  155. bottom: -10;
  156. color: #f5d177;
  157. font-family: Kristi;
  158. font-size: 5em;
  159. font-weight: normal;
  160. position: absolute;
  161. right: 18;
  162. }
  163.  
  164. h3 { /* block titles */
  165. color: #f5d177;
  166. font-family: Fira Sans;
  167. font-size: 1.5em;
  168. font-weight: normal;
  169. margin-bottom: 10px;
  170. text-align: right;
  171. text-transform: uppercase;
  172. }
  173.  
  174. a {
  175. color: #f57794; /* link color */
  176. text-decoration: none;
  177. }
  178.  
  179. a:hover {
  180. color: #f5d177; /* link hover color */
  181. transition: 0.4s;
  182. }
  183.  
  184. b { /* bold text */
  185. color: #f57794;
  186. }
  187.  
  188. i { /* italic text */
  189. color: #f5d177;
  190. }
  191.  
  192. /* ----------------------------------------------------------------------- */
  193. /* --------------------------- sidebar content --------------------------- */
  194.  
  195. #sidebarimage { /* sidebar icon */
  196. background-color: #2f3136;
  197. border-radius: 100%;
  198. padding: 10px;
  199. width: 130px;
  200. }
  201.  
  202. .sidebarlinks { /* sidebar links */
  203. background-color: #5c616d;
  204. border-radius: 20px;
  205. color: #dee1e9;
  206. font-size: 15px;
  207. margin: 20px 0px;
  208. padding: 12px 15px;
  209. text-transform: uppercase;
  210. }
  211.  
  212. .sidebarlinks:hover {
  213. background-color: #f57794;
  214. color: #f4f8ff;
  215. transition: 0.4s;
  216. }
  217.  
  218. /* ----------------------------------------------------------------------- */
  219. /* -------------------------- character content -------------------------- */
  220.  
  221. .characterpic { /* 2000x3000 */
  222. border-radius: 20px;
  223. float: right;
  224. height: 100%;
  225. }
  226.  
  227. .content { /* container for text */
  228. float: left;
  229. width: calc(100% - 420px);
  230. }
  231.  
  232. .block { /* content blocks */
  233. border: 1px solid #f57794;
  234. border-radius: 20px;
  235. float: left;
  236. height: 240px;
  237. line-height: 18px;
  238. margin: 0px 20px 20px 10px;
  239. overflow: auto;
  240. padding: 20px;
  241. width: 300px;
  242. -ms-overflow-style: none;
  243. }
  244.  
  245. .block::-webkit-scrollbar {
  246. display: none;
  247. }
  248.  
  249. #left { /* left column */
  250. border-right: 1px solid #f57794;
  251. float: left;
  252. line-height: 20px;
  253. margin-right: 20px;
  254. padding-right: 20px;
  255. text-transform: uppercase;
  256. width: auto;
  257. }
  258.  
  259. #right { /* right column */
  260. float: left;
  261. line-height: 20px;
  262. }
  263.  
  264. .pictures { /* little pictures */
  265. border: 2px solid #f57794;
  266. border-radius: 100%;
  267. float: left;
  268. margin: 8px 5px;
  269. padding: 5px;
  270. width: 75px;
  271. }
  272.  
  273. .pictures:hover {
  274. cursor: cell;
  275. transition: 0.4s;
  276. }
  277.  
  278. /* ----------------------------------------------------------------------- */
  279. /* ---------------------------- bottom credit ---------------------------- */
  280.  
  281. #credit {
  282. color: #5c616d;
  283. border-radius: 5px;
  284. bottom: 0;
  285. display: inline;
  286. font-style: italic;
  287. left: 0;
  288. margin: 25px 0px 25px 36px;
  289. padding: 10px;
  290. position: fixed;
  291. }
  292.  
  293. #credit:hover {
  294. color: #dee1e9;
  295. transition: 0.4s;
  296. }
  297.  
  298. /* ----------------------------------------------------------------------- */
  299.  
  300. </style>
  301.  
  302. </head>
  303.  
  304. <body>
  305.  
  306. <!--------------------------- START SIDEBAR MENU --------------------------->
  307.  
  308. <div id="sidemenu">
  309.  
  310. <a href="/">
  311. <img id="sidebarimage" src="https://i.imgur.com/llSaaBi.jpg">
  312. </a>
  313.  
  314. <h1>sunflower</h1>
  315.  
  316. <a href="">
  317. <div class="sidebarlinks">
  318. Link 1
  319. </div>
  320. </a>
  321.  
  322. <a href="">
  323. <div class="sidebarlinks">
  324. Link 2
  325. </div>
  326. </a>
  327.  
  328. <a href="">
  329. <div class="sidebarlinks">
  330. Link 3
  331. </div>
  332. </a>
  333.  
  334. <a href="">
  335. <div class="sidebarlinks">
  336. Link 4
  337. </div>
  338. </a>
  339.  
  340. <a href="">
  341. <div class="sidebarlinks">
  342. Link 5
  343. </div>
  344. </a>
  345.  
  346. </div>
  347.  
  348. <!---------------------------- END SIDEBAR MENU ---------------------------->
  349.  
  350. <!--------------------------- START TAB BUTTONS ---------------------------->
  351.  
  352. <div id="btncontainer">
  353.  
  354. <button class="tablinks" onclick="openTab(event, 'Tab 1')" id="defaultOpen">
  355. character 1
  356. </button>
  357.  
  358. <button class="tablinks" onclick="openTab(event, 'Tab 2')">
  359. character 2
  360. </button>
  361.  
  362. <button class="tablinks" onclick="openTab(event, 'Tab 3')">
  363. character 3
  364. </button>
  365.  
  366. </div>
  367.  
  368. <!---------------------------- END TAB BUTTONS ----------------------------->
  369.  
  370. <!--------------------------- START MAIN CONTENT---------------------------->
  371.  
  372. <div id="container">
  373.  
  374. <!---------------------------- START TAB 1 ----------------------------->
  375.  
  376. <div id="Tab 1" class="tabcontent">
  377.  
  378. <div class="content">
  379.  
  380. <h2>Character Name</h2>
  381.  
  382. <!-- START BLOCK 1 -->
  383.  
  384. <div class="block">
  385.  
  386. <h3>facts</h3>
  387.  
  388. <div id="left">
  389.  
  390. name
  391. <br>
  392. nickname
  393. <br>
  394. age
  395. <br>
  396. gender
  397. <br>
  398. pronouns
  399. <br>
  400. sexuality
  401. <br>
  402. alignment
  403. <br>
  404. zodiac
  405. <br>
  406. height
  407. <br>
  408. hobbies
  409.  
  410. </div>
  411.  
  412. <div id="right">
  413.  
  414. name
  415. <br>
  416. nickname
  417. <br>
  418. age
  419. <br>
  420. gender
  421. <br>
  422. pronouns
  423. <br>
  424. sexuality
  425. <br>
  426. alignment
  427. <br>
  428. zodiac
  429. <br>
  430. height
  431. <br>
  432. hobbies
  433.  
  434. </div>
  435.  
  436. </div>
  437.  
  438. <!-- END BLOCK 1 -->
  439.  
  440. <!-- START BLOCK 2 -->
  441.  
  442. <div class="block">
  443.  
  444. <h3>aesthetic</h3>
  445.  
  446. <img class="pictures" src="https://i.imgur.com/v14QFVD.png"
  447. title="#5C616D">
  448.  
  449. <img class="pictures" src="https://i.imgur.com/mErhw4s.png"
  450. title="#36393F">
  451.  
  452. <img class="pictures" src="https://i.imgur.com/ockK8p3.png"
  453. title="#2F3136">
  454.  
  455. <img class="pictures" src="https://i.imgur.com/VtyzEcO.png"
  456. title="#F5D177">
  457.  
  458. <img class="pictures" src="https://i.imgur.com/H6N8Cif.png"
  459. title="#F57794">
  460.  
  461. <img class="pictures" src="https://i.imgur.com/PS9MOZV.png"
  462. title="#F4F8FF">
  463.  
  464. </div>
  465.  
  466. <!-- END BLOCK 2 -->
  467.  
  468. <!-- START BLOCK 3 -->
  469.  
  470. <div class="block">
  471.  
  472. <h3>relationships</h3>
  473.  
  474. <img class="pictures" src="https://i.imgur.com/WSJ6om6.jpg"
  475. title="friends">
  476.  
  477. <img class="pictures" src="https://i.imgur.com/WSJ6om6.jpg"
  478. title="lovers">
  479.  
  480. <img class="pictures" src="https://i.imgur.com/WSJ6om6.jpg"
  481. title="siblings">
  482.  
  483. <img class="pictures" src="https://i.imgur.com/WSJ6om6.jpg"
  484. title="strangers">
  485.  
  486. <img class="pictures" src="https://i.imgur.com/WSJ6om6.jpg"
  487. title="acquaintances">
  488.  
  489. <img class="pictures" src="https://i.imgur.com/WSJ6om6.jpg"
  490. title="enemies">
  491.  
  492. </div>
  493.  
  494. <!-- END BLOCK 3 -->
  495.  
  496. <!-- START BLOCK 4 -->
  497.  
  498. <div class="block">
  499.  
  500. <h3>bio</h3>
  501.  
  502. You can put a character bio here. If you're wondering what a link looks like, <a href="">this is the answer</a>. There's also <b>bold text</b> as well as <i>italic text</i>, so go wild! It has automatic overflow, so you can put as much text here as you want.
  503.  
  504. <br><br>
  505.  
  506. 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. 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.
  507.  
  508. <br><br>
  509.  
  510. 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. 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.
  511.  
  512. </div>
  513.  
  514. <!-- END BLOCK 4 -->
  515.  
  516. </div>
  517.  
  518. <img class="characterpic" src="https://i.imgur.com/LvbAEzE.jpg">
  519.  
  520. </div>
  521.  
  522. <!----------------------------- END TAB 1 ------------------------------>
  523.  
  524. <!---------------------------- START TAB 2 ----------------------------->
  525.  
  526. <div id="Tab 2" class="tabcontent">
  527.  
  528. <div class="content">
  529.  
  530. <h2>Character Name</h2>
  531.  
  532. <!-- START BLOCK 1 -->
  533.  
  534. <div class="block">
  535.  
  536. <h3>facts</h3>
  537.  
  538. <div id="left">
  539.  
  540. name
  541. <br>
  542. nickname
  543. <br>
  544. age
  545. <br>
  546. gender
  547. <br>
  548. pronouns
  549. <br>
  550. sexuality
  551. <br>
  552. alignment
  553. <br>
  554. zodiac
  555. <br>
  556. height
  557. <br>
  558. hobbies
  559.  
  560. </div>
  561.  
  562. <div id="right">
  563.  
  564. name
  565. <br>
  566. nickname
  567. <br>
  568. age
  569. <br>
  570. gender
  571. <br>
  572. pronouns
  573. <br>
  574. sexuality
  575. <br>
  576. alignment
  577. <br>
  578. zodiac
  579. <br>
  580. height
  581. <br>
  582. hobbies
  583.  
  584. </div>
  585.  
  586. </div>
  587.  
  588. <!-- END BLOCK 1 -->
  589.  
  590. <!-- START BLOCK 2 -->
  591.  
  592. <div class="block">
  593.  
  594. <h3>aesthetic</h3>
  595.  
  596. <img class="pictures" src="https://i.imgur.com/v14QFVD.png"
  597. title="#5C616D">
  598.  
  599. <img class="pictures" src="https://i.imgur.com/mErhw4s.png"
  600. title="#36393F">
  601.  
  602. <img class="pictures" src="https://i.imgur.com/ockK8p3.png"
  603. title="#2F3136">
  604.  
  605. <img class="pictures" src="https://i.imgur.com/VtyzEcO.png"
  606. title="#F5D177">
  607.  
  608. <img class="pictures" src="https://i.imgur.com/H6N8Cif.png"
  609. title="#F57794">
  610.  
  611. <img class="pictures" src="https://i.imgur.com/PS9MOZV.png"
  612. title="#F4F8FF">
  613.  
  614. </div>
  615.  
  616. <!-- END BLOCK 2 -->
  617.  
  618. <!-- START BLOCK 3 -->
  619.  
  620. <div class="block">
  621.  
  622. <h3>relationships</h3>
  623.  
  624. <img class="pictures" src="https://i.imgur.com/WSJ6om6.jpg"
  625. title="friends">
  626.  
  627. <img class="pictures" src="https://i.imgur.com/WSJ6om6.jpg"
  628. title="lovers">
  629.  
  630. <img class="pictures" src="https://i.imgur.com/WSJ6om6.jpg"
  631. title="siblings">
  632.  
  633. <img class="pictures" src="https://i.imgur.com/WSJ6om6.jpg"
  634. title="strangers">
  635.  
  636. <img class="pictures" src="https://i.imgur.com/WSJ6om6.jpg"
  637. title="acquaintances">
  638.  
  639. <img class="pictures" src="https://i.imgur.com/WSJ6om6.jpg"
  640. title="enemies">
  641.  
  642. </div>
  643.  
  644. <!-- END BLOCK 3 -->
  645.  
  646. <!-- START BLOCK 4 -->
  647.  
  648. <div class="block">
  649.  
  650. <h3>bio</h3>
  651.  
  652. You can put a character bio here. If you're wondering what a link looks like, <a href="">this is the answer</a>. There's also <b>bold text</b> as well as <i>italic text</i>, so go wild! It has automatic overflow, so you can put as much text here as you want.
  653.  
  654. <br><br>
  655.  
  656. 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. 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.
  657.  
  658. <br><br>
  659.  
  660. 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. 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.
  661.  
  662. </div>
  663.  
  664. <!-- END BLOCK 4 -->
  665.  
  666. </div>
  667.  
  668. <img class="characterpic" src="https://i.imgur.com/HaLlBse.jpg">
  669.  
  670. </div>
  671.  
  672. <!----------------------------- END TAB 2 ------------------------------>
  673.  
  674. <!---------------------------- START TAB 3 ----------------------------->
  675.  
  676. <div id="Tab 3" class="tabcontent">
  677.  
  678. <div class="content">
  679.  
  680. <h2>Character Name</h2>
  681.  
  682. <!-- START BLOCK 1 -->
  683.  
  684. <div class="block">
  685.  
  686. <h3>facts</h3>
  687.  
  688. <div id="left">
  689.  
  690. name
  691. <br>
  692. nickname
  693. <br>
  694. age
  695. <br>
  696. gender
  697. <br>
  698. pronouns
  699. <br>
  700. sexuality
  701. <br>
  702. alignment
  703. <br>
  704. zodiac
  705. <br>
  706. height
  707. <br>
  708. hobbies
  709.  
  710. </div>
  711.  
  712. <div id="right">
  713.  
  714. name
  715. <br>
  716. nickname
  717. <br>
  718. age
  719. <br>
  720. gender
  721. <br>
  722. pronouns
  723. <br>
  724. sexuality
  725. <br>
  726. alignment
  727. <br>
  728. zodiac
  729. <br>
  730. height
  731. <br>
  732. hobbies
  733.  
  734. </div>
  735.  
  736. </div>
  737.  
  738. <!-- END BLOCK 1 -->
  739.  
  740. <!-- START BLOCK 2 -->
  741.  
  742. <div class="block">
  743.  
  744. <h3>aesthetic</h3>
  745.  
  746. <img class="pictures" src="https://i.imgur.com/v14QFVD.png"
  747. title="#5C616D">
  748.  
  749. <img class="pictures" src="https://i.imgur.com/mErhw4s.png"
  750. title="#36393F">
  751.  
  752. <img class="pictures" src="https://i.imgur.com/ockK8p3.png"
  753. title="#2F3136">
  754.  
  755. <img class="pictures" src="https://i.imgur.com/VtyzEcO.png"
  756. title="#F5D177">
  757.  
  758. <img class="pictures" src="https://i.imgur.com/H6N8Cif.png"
  759. title="#F57794">
  760.  
  761. <img class="pictures" src="https://i.imgur.com/PS9MOZV.png"
  762. title="#F4F8FF">
  763.  
  764. </div>
  765.  
  766. <!-- END BLOCK 2 -->
  767.  
  768. <!-- START BLOCK 3 -->
  769.  
  770. <div class="block">
  771.  
  772. <h3>relationships</h3>
  773.  
  774. <img class="pictures" src="https://i.imgur.com/WSJ6om6.jpg"
  775. title="friends">
  776.  
  777. <img class="pictures" src="https://i.imgur.com/WSJ6om6.jpg"
  778. title="lovers">
  779.  
  780. <img class="pictures" src="https://i.imgur.com/WSJ6om6.jpg"
  781. title="siblings">
  782.  
  783. <img class="pictures" src="https://i.imgur.com/WSJ6om6.jpg"
  784. title="strangers">
  785.  
  786. <img class="pictures" src="https://i.imgur.com/WSJ6om6.jpg"
  787. title="acquaintances">
  788.  
  789. <img class="pictures" src="https://i.imgur.com/WSJ6om6.jpg"
  790. title="enemies">
  791.  
  792. </div>
  793.  
  794. <!-- END BLOCK 3 -->
  795.  
  796. <!-- START BLOCK 4 -->
  797.  
  798. <div class="block">
  799.  
  800. <h3>bio</h3>
  801.  
  802. You can put a character bio here. If you're wondering what a link looks like, <a href="">this is the answer</a>. There's also <b>bold text</b> as well as <i>italic text</i>, so go wild! It has automatic overflow, so you can put as much text here as you want.
  803.  
  804. <br><br>
  805.  
  806. 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. 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.
  807.  
  808. <br><br>
  809.  
  810. 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. 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.
  811.  
  812. </div>
  813.  
  814. <!-- END BLOCK 4 -->
  815.  
  816. </div>
  817.  
  818. <img class="characterpic" src="https://i.imgur.com/hnADTjf.jpg">
  819.  
  820. </div>
  821.  
  822. <!----------------------------- END TAB 3 ------------------------------>
  823.  
  824. </div>
  825.  
  826. <!---------------------------- END MAIN CONTENT----------------------------->
  827.  
  828. <!-- don't edit beyond this point please! colors can be modified in <style> -->
  829.  
  830. <a id="credit" target="blank" href="https://nuclearthemes.tumblr.com/">
  831. page theme by bones.
  832. </a>
  833.  
  834. <script src="https://unpkg.com/popper.js@1"></script>
  835. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  836. <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/svg-arrow.css" />
  837.  
  838. <script>
  839. tippy('[title]', {
  840. theme: 'custom',
  841. arrow: false,
  842. delay: [200, 0],
  843. zIndex: 9999999999,
  844. maxWidth: 300,
  845.  
  846. content(reference) {
  847. const title = reference.getAttribute('title');
  848. reference.removeAttribute('title');
  849. return title;
  850. },
  851. });
  852.  
  853. function openTab(evt, tabName) {
  854. var i, tabcontent, tablinks;
  855. tabcontent = document.getElementsByClassName("tabcontent");
  856. for (i = 0; i < tabcontent.length; i++) {
  857. tabcontent[i].style.display = "none";
  858. }
  859.  
  860. tablinks = document.getElementsByClassName("tablinks");
  861. for (i = 0; i < tablinks.length; i++) {
  862. tablinks[i].className = tablinks[i].className.replace(" active", "");
  863. }
  864.  
  865. document.getElementById(tabName).style.display = "block";
  866. evt.currentTarget.className += " active";
  867. }
  868.  
  869. document.getElementById("defaultOpen").click();
  870. </script>
  871.  
  872. </body>
  873.  
  874. </html>
Advertisement
Add Comment
Please, Sign In to add comment