API tools faq
paste
tricksterkid

request page // sunflower responsive

tricksterkid
Dec 15th, 2020 (edited)
93
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 33.71 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. • Tumblr controls fix by odeysseus >> https://odeysseus.tumblr.com/
  14.  
  15. -->
  16.  
  17. <html>
  18.  
  19. <head>
  20.  
  21. <title>{Name} / title</title> <!-- page title -->
  22.  
  23. <link rel="shortcut icon" href="{Favicon}">
  24.  
  25. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  26.  
  27. <link href="https://fonts.googleapis.com/css?family=Work+Sans:400,400i,700,700i|Kristi:400,400i,700,700i" rel="stylesheet">
  28.  
  29. <script src="https://kit.fontawesome.com/802dca85f3.js" crossorigin="anonymous"></script>
  30.  
  31. <style type="text/css">
  32.  
  33. * {margin:0; padding:0;}
  34.  
  35. /* ----------------------------------------------------------------------- */
  36. /* --------------------------- tumblr controls --------------------------- */
  37.  
  38. .tmblr-iframe {
  39. filter: invert(100%);
  40. -o-filter: invert(100%);
  41. -moz-filter: invert(100%);
  42. -ms-filter: invert(100%);
  43. -webkit-filter: invert(100%);
  44. opacity: 0.2;
  45. position: fixed;
  46. right: 5px;
  47. top: 5px;
  48. transform: scale(0.7,0.7);
  49. transform-origin: 100% 0%;
  50. -ms-transform-origin: 100% 0%;
  51. -webkit-transform-origin: 100% 0%;
  52. transition: 0.4s;
  53. -o-transition: 0.4s;
  54. -moz-transition: 0.4s;
  55. -ms-transition: 0.4s;
  56. -webkit-transition: 0.4s;
  57. white-space: nowrap;
  58. }
  59.  
  60. .tmblr-iframe:hover {
  61. opacity: 1;
  62. }
  63.  
  64. /* ----------------------------------------------------------------------- */
  65. /* --------------------------- custom tooltips --------------------------- */
  66.  
  67. .tippy-tooltip.custom-theme {
  68. background-color: #a84232;
  69. border-radius: 0;
  70. color: #ffffff;
  71. font-family: inherit;
  72. font-size: inherit;
  73. text-align: center;
  74. }
  75.  
  76. /* ----------------------------------------------------------------------- */
  77. /* -------------------- custom selection & scrollbar --------------------- */
  78.  
  79. ::-moz-selection {background: #a84232; color: #ffffff;}
  80. ::selection {background: #a84232; color: #ffffff;}
  81.  
  82. ::-webkit-scrollbar-thumb
  83. {background: #eb7067; border: 5px solid #ffffff; border-radius: 10px;}
  84. ::-webkit-scrollbar-track
  85. {background: #141414; border: 7px solid #ffffff;}
  86. ::-webkit-scrollbar
  87. {width: 15px;}
  88.  
  89. /* ----------------------------------------------------------------------- */
  90. /* ----------------------------- page layout ----------------------------- */
  91.  
  92. body {
  93. background: #ffffff; /* background color */
  94. color: #141414; /* text color */
  95. font-family: Work Sans; /* font */
  96. font-size: 15px; /* font size */
  97. text-align: justify; /* text align */
  98. }
  99.  
  100. #sidemenu { /* side menu */
  101. background-color: #f2f2f2;
  102. border-radius: 20px;
  103. height: calc(100% - 80px);
  104. height: -moz-calc(100% - 80px);
  105. height: -webkit-calc(100% - 80px);
  106. margin: 20px;
  107. overflow: auto;
  108. padding: 20px;
  109. position: absolute;
  110. width: 150px;
  111. -moz-overflow-style: none;
  112. -ms-overflow-style: none;
  113. -o-overflow-style: none;
  114. }
  115.  
  116. #sidemenu::-webkit-scrollbar {
  117. display: none;
  118. }
  119.  
  120. #btncontainer { /* top tab buttons container */
  121. background-color: #f2f2f2;
  122. border-radius: 20px 20px 0px 0px;
  123. height: 50px;
  124. overflow: hidden;
  125. margin: 20px;
  126. position: absolute;
  127. right: 0;
  128. width: calc(100% - 260px);
  129. width: -moz-calc(100% - 260px);
  130. width: -webkit-calc(100% - 260px);
  131. }
  132.  
  133. #container { /* main content */
  134. background-color: #f2f2f2;
  135. border-radius: 0px 0px 20px 20px;
  136. bottom: 0;
  137. height: calc(100% - 130px);
  138. height: -moz-calc(100% - 130px);
  139. height: -webkit-calc(100% - 130px);
  140. margin: 20px;
  141. overflow: none;
  142. padding: 20px;
  143. position: absolute;
  144. right: 0;
  145. width: calc(100% - 300px);
  146. width: -mozcalc(100% - 300px);
  147. width: -webkit-calc(100% - 300px);
  148. }
  149.  
  150. .tabcontent { /* tab content */
  151. display: none;
  152. height: 100%;
  153. overflow: none;
  154. width: 100%;
  155. }
  156.  
  157. /* ----------------------------------------------------------------------- */
  158. /* ----------------------------- tab buttons ----------------------------- */
  159.  
  160. #btncontainer button { /* tab buttons */
  161. background-color: inherit;
  162. border: none;
  163. color: #141414;
  164. cursor: pointer;
  165. display: inline;
  166. font-family: inherit;
  167. margin: 0;
  168. outline: none;
  169. padding: 15px;
  170. text-transform: uppercase;
  171. transition: 0.4s;
  172. -moz-transition: 0.4s;
  173. -ms-transition: 0.4s;
  174. -o-transition: 0.4s;
  175. -webkit-transition: 0.4s;
  176. }
  177.  
  178. #btncontainer button:hover { /* tab buttons hover */
  179. background-color: #eb7067;
  180. color: #ffffff;
  181. transition: 0.4s;
  182. -moz-transition: 0.4s;
  183. -ms-transition: 0.4s;
  184. -o-transition: 0.4s;
  185. -webkit-transition: 0.4s;
  186. }
  187.  
  188. #btncontainer button.active { /* active tab button */
  189. background-color: #eb7067;
  190. color: #ffffff;
  191. }
  192.  
  193. /* ----------------------------------------------------------------------- */
  194. /* --------------------------- sidebar content --------------------------- */
  195.  
  196. img:hover {cursor: cell;}
  197.  
  198. #sidebarimage { /* sidebar icon */
  199. background-color: #ffffff;
  200. border-radius: 100%;
  201. padding: 10px;
  202. width: 130px;
  203. }
  204.  
  205. .sidebarlinks { /* sidebar links */
  206. background-color: #ffffff;
  207. border-radius: 20px;
  208. color: #a84232;
  209. font-size: 15px;
  210. margin: 20px 0px;
  211. padding: 12px 15px;
  212. text-transform: uppercase;
  213. transition: 0.4s;
  214. -moz-transition: 0.4s;
  215. -ms-transition: 0.4s;
  216. -o-transition: 0.4s;
  217. -webkit-transition: 0.4s;
  218. }
  219.  
  220. .sidebarlinks:hover {
  221. background-color: #a84232;
  222. color: #ffffff;
  223. transition: 0.4s;
  224. -moz-transition: 0.4s;
  225. -ms-transition: 0.4s;
  226. -o-transition: 0.4s;
  227. -webkit-transition: 0.4s;
  228. }
  229.  
  230. /* ----------------------------------------------------------------------- */
  231. /* -------------------------- character content -------------------------- */
  232.  
  233. .character {float: right; overflow-x: hidden;}
  234.  
  235. .characterpic { /* 2000x3000 */
  236. border-radius: 20px;
  237. float: right;
  238. height: 100%;
  239. position: relative;
  240. transition: 1s;
  241. -moz-transition: 1s;
  242. -ms-transition: 1s;
  243. -o-transition: 1s;
  244. -webkit-transition: 1s;
  245. }
  246.  
  247. .content { /* container for text */
  248. float: left;
  249. height: 100%;
  250. overflow: auto;
  251. transition: 1s;
  252. -moz-transition: 1s;
  253. -ms-transition: 1s;
  254. -o-transition: 1s;
  255. -webkit-transition: 1s;
  256. width: calc(100% - 400px);
  257. width: -moz-calc(100% - 400px);
  258. width: -webkit-calc(100% - 400px);
  259. -moz-overflow-style: none;
  260. -ms-overflow-style: none;
  261. -o-overflow-style: none;
  262. }
  263.  
  264. .block1 {margin: 0px 20px 20px 10px;}
  265. .block2 {margin: 0px 0px 20px 10px;}
  266. .block3 {margin: 0px 20px 5px 10px;}
  267. .block4 {margin: 0px 0px 5px 10px;}
  268.  
  269. .block { /* content blocks */
  270. border: 1px solid #eb7067;
  271. border-radius: 20px;
  272. float: left;
  273. height: 240px;
  274. line-height: 18px;
  275. overflow: auto;
  276. padding: 20px;
  277. width: 35%;
  278. -moz-overflow-style: none;
  279. -ms-overflow-style: none;
  280. -o-overflow-style: none;
  281. }
  282.  
  283. .pictures { /* little pictures */
  284. border: 2px solid #a84232;
  285. border-radius: 100%;
  286. float: left;
  287. margin: 8px 0px;
  288. padding: 5px;
  289. width: 75px;
  290. }
  291.  
  292. .picturecontainer {
  293. display: flex;
  294. display: -moz-box;
  295. display: -ms-flexbox;
  296. display: -webkit-box;
  297. display: -webkit-flex;
  298. flex-wrap: wrap;
  299. justify-content: space-between;
  300. }
  301.  
  302. #left { /* left column */
  303. border-right: 1px solid #a84232;
  304. float: left;
  305. line-height: 20px;
  306. margin-right: 10px;
  307. padding-right: 10px;
  308. text-transform: uppercase;
  309. }
  310.  
  311. #right {line-height: 20px;} /* right column */
  312.  
  313. .block::-webkit-scrollbar {display: none;}
  314. .content::-webkit-scrollbar {display: none;}
  315.  
  316. /* ----------------------------------------------------------------------- */
  317. /* -------------------------------- text --------------------------------- */
  318.  
  319. h1 { /* sidebar title */
  320. color: #eb7067;
  321. font-family: Work Sans;
  322. font-size: 1.6em;
  323. font-weight: normal;
  324. margin-top: 15px;
  325. text-align: center;
  326. text-transform: uppercase;
  327. }
  328.  
  329. h2 { /* character names */
  330. bottom: -10;
  331. color: #eb7067;
  332. font-family: Kristi;
  333. font-size: 5em;
  334. font-weight: normal;
  335. opacity: 1;
  336. position: absolute;
  337. right: 18;
  338. transition: 1s;
  339. -moz-transition: 1s;
  340. -ms-transition: 1s;
  341. -o-transition: 1s;
  342. -webkit-transition: 1s;
  343. z-index: 999;
  344. }
  345.  
  346. h3 { /* block titles */
  347. color: #a84232;
  348. font-family: Work Sans;
  349. font-size: 1.5em;
  350. font-weight: normal;
  351. margin-bottom: 10px;
  352. text-align: right;
  353. text-transform: uppercase;
  354. }
  355.  
  356. a {
  357. color: #eb7067; /* link color */
  358. text-decoration: none;
  359. transition: 0.4s;
  360. -moz-transition: 0.4s;
  361. -ms-transition: 0.4s;
  362. -o-transition: 0.4s;
  363. -webkit-transition: 0.4s;
  364. }
  365.  
  366. a:hover {
  367. color: #a84232; /* link hover color */
  368. transition: 0.4s;
  369. -moz-transition: 0.4s;
  370. -ms-transition: 0.4s;
  371. -o-transition: 0.4s;
  372. -webkit-transition: 0.4s;
  373. }
  374.  
  375. b {color: #a84232;} /* bold text */
  376.  
  377. /* ----------------------------------------------------------------------- */
  378. /* ----------------------------- responsive ------------------------------ */
  379.  
  380. @media only screen and (max-width: 1225px){
  381. h2 {opacity: 0;}
  382. .characterpic {margin-left: 0; margin-right: -400px;}
  383. .content {width: 100%;}
  384.  
  385. h2, .characterpic, .content {
  386. transition: 1s;
  387. -moz-transition: 1s;
  388. -ms-transition: 1s;
  389. -o-transition: 1s;
  390. -webkit-transition: 1s;
  391. }
  392.  
  393. .block {
  394. width: calc(50% - 65px);
  395. width: -moz-calc(50% - 65px);
  396. width: -webkit-calc(50% - 65px);
  397. }
  398. }
  399.  
  400. @media only screen and (max-width: 700px){
  401. .block:last-of-type {margin-bottom: 5px;}
  402.  
  403. .block {
  404. float: none;
  405. margin: 20px auto;
  406. width: calc(100% - 65px);
  407. width: -moz-calc(100% - 65px);
  408. width: -webkit-calc(100% - 65px);
  409. }
  410. }
  411.  
  412. @media only screen and (max-width: 550px){
  413. .picturecontainer {justify-content: center;}
  414. }
  415.  
  416. /* ----------------------------------------------------------------------- */
  417. /* ------------------------------- credits ------------------------------- */
  418.  
  419. #credit {
  420. border: none;
  421. color: #a84232;
  422. bottom: 0;
  423. font-size: 20px;
  424. font-style: italic;
  425. left: 0;
  426. margin: 10px 0px 20px 90px;
  427. padding: 10px 0px;
  428. position: fixed;
  429. text-align: center;
  430. transition: 0.4s;
  431. -moz-transition: 0.4s;
  432. -ms-transition: 0.4s;
  433. -o-transition: 0.4s;
  434. -webkit-transition: 0.4s;
  435. width: 40px;
  436. }
  437.  
  438. #credit:hover {
  439. color: #ffffff;
  440. transition: 0.4s;
  441. -moz-transition: 0.4s;
  442. -ms-transition: 0.4s;
  443. -o-transition: 0.4s;
  444. -webkit-transition: 0.4s;
  445. }
  446.  
  447. /* ----------------------------------------------------------------------- */
  448.  
  449. </style>
  450.  
  451. </head>
  452.  
  453. <body>
  454.  
  455. <!--------------------------- START SIDEBAR MENU --------------------------->
  456.  
  457. <div id="sidemenu">
  458.  
  459. <a href="/">
  460. <img id="sidebarimage" src="https://i.imgur.com/llSaaBi.jpg">
  461. </a>
  462.  
  463. <h1>page title</h1>
  464.  
  465. <a href="">
  466. <div class="sidebarlinks">
  467. Link 1
  468. </div>
  469. </a>
  470.  
  471. <a href="">
  472. <div class="sidebarlinks">
  473. Link 2
  474. </div>
  475. </a>
  476.  
  477. <a href="">
  478. <div class="sidebarlinks">
  479. Link 3
  480. </div>
  481. </a>
  482.  
  483. <a href="">
  484. <div class="sidebarlinks">
  485. Link 4
  486. </div>
  487. </a>
  488.  
  489. <a href="">
  490. <div class="sidebarlinks">
  491. Link 5
  492. </div>
  493. </a>
  494.  
  495. </div>
  496.  
  497. <!---------------------------- END SIDEBAR MENU ---------------------------->
  498.  
  499. <!--------------------------- START TAB BUTTONS ---------------------------->
  500.  
  501. <div id="btncontainer">
  502.  
  503. <button class="tablinks" onclick="openTab(event, 'Tab 1')" id="defaultOpen">
  504. character 1
  505. </button>
  506.  
  507. <button class="tablinks" onclick="openTab(event, 'Tab 2')">
  508. character 2
  509. </button>
  510.  
  511. <button class="tablinks" onclick="openTab(event, 'Tab 3')">
  512. character 3
  513. </button>
  514.  
  515. </div>
  516.  
  517. <!---------------------------- END TAB BUTTONS ----------------------------->
  518.  
  519. <!--------------------------- START MAIN CONTENT---------------------------->
  520.  
  521. <div id="container">
  522.  
  523. <!-- tab 1 -->
  524.  
  525. <div id="Tab 1" class="tabcontent">
  526.  
  527. <div class="content">
  528.  
  529. <!-- character name -->
  530.  
  531. <h2>Character Name</h2>
  532.  
  533. <!-- block 1-->
  534.  
  535. <div class="block block1">
  536.  
  537. <!-- subtitle -->
  538.  
  539. <h3>facts</h3>
  540.  
  541. <!-- left column -->
  542.  
  543. <div id="left">
  544.  
  545. name
  546. <br>
  547. nickname
  548. <br>
  549. age
  550. <br>
  551. gender
  552. <br>
  553. pronouns
  554. <br>
  555. sexuality
  556. <br>
  557. alignment
  558. <br>
  559. zodiac
  560. <br>
  561. height
  562. <br>
  563. hobbies
  564.  
  565. </div>
  566.  
  567. <!-- right column -->
  568.  
  569. <div id="right">
  570.  
  571. name
  572. <br>
  573. nickname
  574. <br>
  575. age
  576. <br>
  577. gender
  578. <br>
  579. pronouns
  580. <br>
  581. sexuality
  582. <br>
  583. alignment
  584. <br>
  585. zodiac
  586. <br>
  587. height
  588. <br>
  589. hobbies
  590.  
  591. </div>
  592.  
  593. </div>
  594.  
  595. <!-- block 2 -->
  596.  
  597. <div class="block block2">
  598.  
  599. <!-- subtitle -->
  600.  
  601. <h3>aesthetic</h3>
  602.  
  603. <!-- pictures -->
  604.  
  605. <div class="picturecontainer">
  606.  
  607. <img class="pictures" src="https://i.imgur.com/v14QFVD.png"
  608. title="#5C616D">
  609.  
  610. <img class="pictures" src="https://i.imgur.com/mErhw4s.png"
  611. title="#36393F">
  612.  
  613. <img class="pictures" src="https://i.imgur.com/ockK8p3.png"
  614. title="#2F3136">
  615.  
  616. <img class="pictures" src="https://i.imgur.com/VtyzEcO.png"
  617. title="#F5D177">
  618.  
  619. <img class="pictures" src="https://i.imgur.com/H6N8Cif.png"
  620. title="#F57794">
  621.  
  622. <img class="pictures" src="https://i.imgur.com/PS9MOZV.png"
  623. title="#F4F8FF">
  624.  
  625. </div>
  626.  
  627. </div>
  628.  
  629. <!-- block 3 -->
  630.  
  631. <div class="block block3">
  632.  
  633. <!-- subtitle -->
  634.  
  635. <h3>relationships</h3>
  636.  
  637. <!-- pictures -->
  638.  
  639. <div class="picturecontainer">
  640. <img class="pictures" src="https://i.imgur.com/WSJ6om6.jpg"
  641. title="friends">
  642.  
  643. <img class="pictures" src="https://i.imgur.com/WSJ6om6.jpg"
  644. title="lovers">
  645.  
  646. <img class="pictures" src="https://i.imgur.com/WSJ6om6.jpg"
  647. title="siblings">
  648.  
  649. <img class="pictures" src="https://i.imgur.com/WSJ6om6.jpg"
  650. title="strangers">
  651.  
  652. <img class="pictures" src="https://i.imgur.com/WSJ6om6.jpg"
  653. title="acquaintances">
  654.  
  655. <img class="pictures" src="https://i.imgur.com/WSJ6om6.jpg"
  656. title="enemies">
  657.  
  658. </div>
  659.  
  660. </div>
  661.  
  662. <!-- block 4 -->
  663.  
  664. <div class="block block4">
  665.  
  666. <!-- subtitle -->
  667.  
  668. <h3>bio</h3>
  669.  
  670. <!-- write text here -->
  671.  
  672. 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.
  673.  
  674. <br><br>
  675.  
  676. 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.
  677.  
  678. <br><br>
  679.  
  680. 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.
  681.  
  682. </div>
  683.  
  684. </div>
  685.  
  686. <!-- character picture | 2000x3000 -->
  687.  
  688. <div class="character">
  689. <img class="characterpic" src="https://i.imgur.com/HaLlBse.jpg">
  690. </div>
  691.  
  692. </div>
  693.  
  694. <!-- tab 2 -->
  695.  
  696. <div id="Tab 2" class="tabcontent">
  697.  
  698. <div class="content">
  699.  
  700. <!-- character name -->
  701.  
  702. <h2>Character Name</h2>
  703.  
  704. <!-- block 1-->
  705.  
  706. <div class="block block1">
  707.  
  708. <!-- subtitle -->
  709.  
  710. <h3>facts</h3>
  711.  
  712. <!-- left column -->
  713.  
  714. <div id="left">
  715.  
  716. name
  717. <br>
  718. nickname
  719. <br>
  720. age
  721. <br>
  722. gender
  723. <br>
  724. pronouns
  725. <br>
  726. sexuality
  727. <br>
  728. alignment
  729. <br>
  730. zodiac
  731. <br>
  732. height
  733. <br>
  734. hobbies
  735.  
  736. </div>
  737.  
  738. <!-- right column -->
  739.  
  740. <div id="right">
  741.  
  742. name
  743. <br>
  744. nickname
  745. <br>
  746. age
  747. <br>
  748. gender
  749. <br>
  750. pronouns
  751. <br>
  752. sexuality
  753. <br>
  754. alignment
  755. <br>
  756. zodiac
  757. <br>
  758. height
  759. <br>
  760. hobbies
  761.  
  762. </div>
  763.  
  764. </div>
  765.  
  766. <!-- block 2 -->
  767.  
  768. <div class="block block2">
  769.  
  770. <!-- subtitle -->
  771.  
  772. <h3>aesthetic</h3>
  773.  
  774. <!-- pictures -->
  775.  
  776. <div class="picturecontainer">
  777.  
  778. <img class="pictures" src="https://i.imgur.com/v14QFVD.png"
  779. title="#5C616D">
  780.  
  781. <img class="pictures" src="https://i.imgur.com/mErhw4s.png"
  782. title="#36393F">
  783.  
  784. <img class="pictures" src="https://i.imgur.com/ockK8p3.png"
  785. title="#2F3136">
  786.  
  787. <img class="pictures" src="https://i.imgur.com/VtyzEcO.png"
  788. title="#F5D177">
  789.  
  790. <img class="pictures" src="https://i.imgur.com/H6N8Cif.png"
  791. title="#F57794">
  792.  
  793. <img class="pictures" src="https://i.imgur.com/PS9MOZV.png"
  794. title="#F4F8FF">
  795.  
  796. </div>
  797.  
  798. </div>
  799.  
  800. <!-- block 3 -->
  801.  
  802. <div class="block block3">
  803.  
  804. <!-- subtitle -->
  805.  
  806. <h3>relationships</h3>
  807.  
  808. <!-- pictures -->
  809.  
  810. <div class="picturecontainer">
  811. <img class="pictures" src="https://i.imgur.com/WSJ6om6.jpg"
  812. title="friends">
  813.  
  814. <img class="pictures" src="https://i.imgur.com/WSJ6om6.jpg"
  815. title="lovers">
  816.  
  817. <img class="pictures" src="https://i.imgur.com/WSJ6om6.jpg"
  818. title="siblings">
  819.  
  820. <img class="pictures" src="https://i.imgur.com/WSJ6om6.jpg"
  821. title="strangers">
  822.  
  823. <img class="pictures" src="https://i.imgur.com/WSJ6om6.jpg"
  824. title="acquaintances">
  825.  
  826. <img class="pictures" src="https://i.imgur.com/WSJ6om6.jpg"
  827. title="enemies">
  828.  
  829. </div>
  830.  
  831. </div>
  832.  
  833. <!-- block 4 -->
  834.  
  835. <div class="block block4">
  836.  
  837. <!-- subtitle -->
  838.  
  839. <h3>bio</h3>
  840.  
  841. <!-- write text here -->
  842.  
  843. 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.
  844.  
  845. <br><br>
  846.  
  847. 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.
  848.  
  849. <br><br>
  850.  
  851. 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.
  852.  
  853. </div>
  854.  
  855. </div>
  856.  
  857. <!-- character picture | 2000x3000 -->
  858.  
  859. <div class="character">
  860. <img class="characterpic" src="https://i.imgur.com/LvbAEzE.jpg">
  861. </div>
  862.  
  863. </div>
  864.  
  865. <!-- tab 3 -->
  866.  
  867. <div id="Tab 3" class="tabcontent">
  868.  
  869. <div class="content">
  870.  
  871. <!-- character name -->
  872.  
  873. <h2>Character Name</h2>
  874.  
  875. <!-- block 1-->
  876.  
  877. <div class="block block1">
  878.  
  879. <!-- subtitle -->
  880.  
  881. <h3>facts</h3>
  882.  
  883. <!-- left column -->
  884.  
  885. <div id="left">
  886.  
  887. name
  888. <br>
  889. nickname
  890. <br>
  891. age
  892. <br>
  893. gender
  894. <br>
  895. pronouns
  896. <br>
  897. sexuality
  898. <br>
  899. alignment
  900. <br>
  901. zodiac
  902. <br>
  903. height
  904. <br>
  905. hobbies
  906.  
  907. </div>
  908.  
  909. <!-- right column -->
  910.  
  911. <div id="right">
  912.  
  913. name
  914. <br>
  915. nickname
  916. <br>
  917. age
  918. <br>
  919. gender
  920. <br>
  921. pronouns
  922. <br>
  923. sexuality
  924. <br>
  925. alignment
  926. <br>
  927. zodiac
  928. <br>
  929. height
  930. <br>
  931. hobbies
  932.  
  933. </div>
  934.  
  935. </div>
  936.  
  937. <!-- block 2 -->
  938.  
  939. <div class="block block2">
  940.  
  941. <!-- subtitle -->
  942.  
  943. <h3>aesthetic</h3>
  944.  
  945. <!-- pictures -->
  946.  
  947. <div class="picturecontainer">
  948.  
  949. <img class="pictures" src="https://i.imgur.com/v14QFVD.png"
  950. title="#5C616D">
  951.  
  952. <img class="pictures" src="https://i.imgur.com/mErhw4s.png"
  953. title="#36393F">
  954.  
  955. <img class="pictures" src="https://i.imgur.com/ockK8p3.png"
  956. title="#2F3136">
  957.  
  958. <img class="pictures" src="https://i.imgur.com/VtyzEcO.png"
  959. title="#F5D177">
  960.  
  961. <img class="pictures" src="https://i.imgur.com/H6N8Cif.png"
  962. title="#F57794">
  963.  
  964. <img class="pictures" src="https://i.imgur.com/PS9MOZV.png"
  965. title="#F4F8FF">
  966.  
  967. </div>
  968.  
  969. </div>
  970.  
  971. <!-- block 3 -->
  972.  
  973. <div class="block block3">
  974.  
  975. <!-- subtitle -->
  976.  
  977. <h3>relationships</h3>
  978.  
  979. <!-- pictures -->
  980.  
  981. <div class="picturecontainer">
  982. <img class="pictures" src="https://i.imgur.com/WSJ6om6.jpg"
  983. title="friends">
  984.  
  985. <img class="pictures" src="https://i.imgur.com/WSJ6om6.jpg"
  986. title="lovers">
  987.  
  988. <img class="pictures" src="https://i.imgur.com/WSJ6om6.jpg"
  989. title="siblings">
  990.  
  991. <img class="pictures" src="https://i.imgur.com/WSJ6om6.jpg"
  992. title="strangers">
  993.  
  994. <img class="pictures" src="https://i.imgur.com/WSJ6om6.jpg"
  995. title="acquaintances">
  996.  
  997. <img class="pictures" src="https://i.imgur.com/WSJ6om6.jpg"
  998. title="enemies">
  999.  
  1000. </div>
  1001.  
  1002. </div>
  1003.  
  1004. <!-- block 4 -->
  1005.  
  1006. <div class="block block4">
  1007.  
  1008. <!-- subtitle -->
  1009.  
  1010. <h3>bio</h3>
  1011.  
  1012. <!-- write text here -->
  1013.  
  1014. 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.
  1015.  
  1016. <br><br>
  1017.  
  1018. 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.
  1019.  
  1020. <br><br>
  1021.  
  1022. 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.
  1023.  
  1024. </div>
  1025.  
  1026. </div>
  1027.  
  1028. <!-- character picture | 2000x3000 -->
  1029.  
  1030. <div class="character">
  1031. <img class="characterpic" src="https://i.imgur.com/hnADTjf.jpg">
  1032. </div>
  1033.  
  1034. </div>
  1035.  
  1036. </div>
  1037.  
  1038. <!---------------------------- END MAIN CONTENT----------------------------->
  1039.  
  1040. <!-- don't edit beyond this point please! colors can be modified in <style> -->
  1041.  
  1042. <a id="credit" target="blank" title="by bones" href="https://nuclearthemes.tumblr.com/"><i class="fas fa-skull"></i></a>
  1043.  
  1044. <script src="https://unpkg.com/popper.js@1"></script>
  1045. <script src="https://unpkg.com/tippy.js@5/dist/tippy-bundle.iife.js"></script>
  1046. <link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/svg-arrow.css" />
  1047.  
  1048. <script>
  1049. function openTab(evt, tabName) {
  1050. var i, tabcontent, tablinks;
  1051. tabcontent = document.getElementsByClassName("tabcontent");
  1052. for (i = 0; i < tabcontent.length; i++) {
  1053. tabcontent[i].style.display = "none";
  1054. }
  1055.  
  1056. tablinks = document.getElementsByClassName("tablinks");
  1057. for (i = 0; i < tablinks.length; i++) {
  1058. tablinks[i].className = tablinks[i].className.replace(" active", "");
  1059. }
  1060.  
  1061. document.getElementById(tabName).style.display = "block";
  1062. evt.currentTarget.className += " active";
  1063. }
  1064.  
  1065. document.getElementById("defaultOpen").click();
  1066.  
  1067. tippy('[title]', {
  1068. theme: 'custom',
  1069. arrow: false,
  1070. delay: [200, 0],
  1071. zIndex: 9999999999,
  1072. maxWidth: 300,
  1073.  
  1074. content(reference) {
  1075. const title = reference.getAttribute('title');
  1076. reference.removeAttribute('title');
  1077. return title;
  1078. },
  1079. });
  1080. </script>
  1081.  
  1082. </body>
  1083.  
  1084. </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!