API tools faq
paste
longituddeonda

character page

longituddeonda
Dec 16th, 2020 (edited)
715
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 31.18 KB | None | 0 0
raw download clone embed print report
  1. <!-----
  2.  
  3. ;; characters one: tangerine ;;
  4.  
  5. character/muse page by ebrothemes
  6.  
  7. TERMS OF USE:
  8. - do not remove or edit the credit.
  9.            (it will automatically change color
  10.            along with your color customizations.)
  11. - do not repost/redistribute.
  12. - do not take parts of the code and use it as your own.
  13. - do not use as a base code.
  14.  
  15.  
  16. CREDITS:
  17. honeybee icons by suiomi
  18.  
  19. INSTRUCTIONS:
  20. this page is designed so that the only customization you need to make in the css is the colors, and with variables theres only one place where you'll need to change them.
  21.  
  22. the instructions for how to set up the tabs and fill in the information are where the rest of the content is
  23.  
  24. COLORS:
  25. if you want to change the colors, ONLY mess with the colors in the ::root section which will change the colors across the code
  26.  
  27. as long as you ensure that for white, grey, black, the colors are in order from light to dark and that the black value can be read over the accent value, it should all work.
  28.  
  29. (ex. if you switch black and white you'll get a dark version, but because the white isn't legible on the accent yellow, you'll want to find a darker accent color.)
  30.  
  31.  
  32. x camila
  33.  
  34. ----->
  35.  
  36. <!DOCTYPE html>
  37. <html>
  38. <html lang="en-US">
  39. <head>
  40.  
  41. <title>characters</title>  
  42.  
  43. <link rel="shortcut icon" href="{Favicon}">
  44. <meta name="viewport" content="width=device-width, initial-scale=1">
  45.  
  46. <!-- honeybee icons by suiomi -->
  47. <link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
  48.  
  49.  
  50. <link rel="preconnect" href="https://fonts.gstatic.com">
  51. <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
  52.  
  53. <link href="https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
  54.  
  55.  
  56. <style type="text/css">
  57.  
  58. /*body > iframe:first-child { display: none !important; }*/
  59.  
  60. /* if you want to remove the 'follow' button and stuff from the top of the page, uncomment this bit ^ */
  61.  
  62. :root {
  63.     --black: #000000;
  64.     --white: #ffffff;
  65.     --grey: #939597;
  66.     --accent: #F5DF4D;
  67. }
  68.  
  69. ::-webkit-scrollbar {
  70.   width: 5px;
  71. }
  72.  
  73. ::-webkit-scrollbar-track {
  74.   background: var(--white);
  75.   border-left: 2px solid var(--black);
  76. }
  77.  
  78. ::-webkit-scrollbar-thumb {
  79.   background: var(--black);
  80. }
  81.  
  82. /* BODY */
  83.  
  84. body {
  85.     color: var(--black);
  86.     font-family: 'Fira Sans', sans-serif;
  87.     background: var(--white);
  88. }
  89.  
  90. .credit {
  91.     position: fixed;
  92.     border: 2px solid var(--grey);
  93.     bottom: 20px;
  94.     right: 20px;
  95.     height: 25px;
  96.     width: 25px;
  97.     display: flex;
  98.     justify-content: center;
  99.     align-items: center;
  100.     font-family: 'Roboto Mono', monospace;
  101.     font-size:17.5px;
  102.     border-radius: 100%;
  103.     background: var(--white);
  104.     font-weight: 400;
  105.     opacity: 0.5;
  106.     box-shadow: 0px 0px 10px -2px rgba(0,0,0,0.5);
  107.     transition: 200ms;
  108. }
  109.  
  110. .credit a {
  111.     text-decoration: none;
  112.     color: var(--grey);
  113. }
  114.  
  115. .credit:hover {
  116.     opacity: 1;
  117. }
  118.  
  119. .tabcontainer {
  120.     width: 750px;
  121.     height: 500px;
  122.     position: fixed;
  123.     top: calc(50% - 252px);
  124.     left: calc(50% - 377px);
  125.     background: var(--white);
  126.     border: 2px solid var(--black);
  127.     display: flex;
  128.     z-index: 5;
  129. }
  130.  
  131. .tabcontents {
  132.     width: 500px;
  133.     height: 500px;
  134. }
  135.  
  136. /* TITLE PAGE */
  137.  
  138. #title-page {
  139.     position: absolute;
  140.     top: 0;
  141.     left: 250px;
  142.     z-index: 1;
  143.     height: 500px;
  144.     width: 500px;
  145.     display: flex;
  146.     flex-direction: column;
  147.     justify-content: center;
  148.     align-items: center;  
  149.     background: var(--accent);
  150.     transition: 0.5s;
  151. }
  152.  
  153. .title {
  154.     font-family: 'Roboto Mono', monospace;
  155.     font-size: 2.5em;
  156.     font-weight: 800;
  157. }
  158.  
  159. .author {
  160.     font-family: 'Roboto Mono', monospace;
  161.     font-size: 1.3em;
  162. }
  163.  
  164. .t-desc {
  165.     font-size: 0.9em;
  166.     padding: 15px 50px;
  167. }
  168.  
  169. .t-links {
  170.     display: flex;
  171.     margin: 0 50px;
  172.     flex-flow: row wrap;
  173.     justify-content: center;
  174. }
  175.  
  176. .t-links a {
  177.     color: var(--black);
  178.     text-decoration: none;
  179.     font-family: 'Roboto Mono', monospace;
  180.     font-size: 0.8em;
  181.     border: 2px solid var(--black);
  182.     padding: 5px 7px;
  183.     margin: 5px 5px;
  184.     transition: 0.3s;
  185. }
  186.  
  187. .t-links a:hover {
  188.     background: var(--white);
  189.     font-weight: 800;
  190. }
  191.  
  192. /* TABS */
  193.  
  194. .tab {
  195.     width: 248px;
  196.     height: 500px;
  197.     border-right: 2px solid var(--black);
  198.     overflow: auto;
  199.     z-index: 1;
  200. }
  201.  
  202. .tab button {
  203.   background-color: inherit;
  204.   width: 100%;
  205.   height: 110px;
  206.   border: 0px;
  207.   border-bottom: 2px solid var(--black);
  208.   padding: 0px;
  209.   outline: none;
  210.   cursor: pointer;
  211.   transition: 0.3s;
  212.   display: flex;
  213.   justify-content: space-between;
  214.   align-items: center;
  215. }
  216.  
  217. .tab button:last-child {
  218.     border-bottom: 0px;
  219. }
  220.  
  221. .tab button:hover {
  222.   background-color: var(--accent);
  223. }
  224.  
  225. .tab button.active {
  226.   background-color: var(--accent);
  227. }
  228.  
  229.  
  230. .num {
  231.     font-family: 'Roboto Mono', monospace;
  232.     font-weight: 300;
  233.     color: var(--grey);
  234.     padding: 10px;
  235. }
  236.  
  237. .char-pic {
  238.     width: 70px!important;
  239.     height: 70px;
  240.     border-radius: 50px;
  241.     overflow: hidden;
  242. }
  243.  
  244. .char-pic img {
  245.     display: block;
  246.     filter: grayscale(100%);
  247.     width: 100%;
  248.     height: auto;
  249. }
  250.  
  251. .tab button.active > .char-pic img {
  252.     filter: grayscale(0%);
  253. }
  254.  
  255. .char-info {
  256.     width: 115px;
  257.     padding: 10px;
  258.     flex-shrink: 3;
  259. }
  260.  
  261. .char-info name {
  262.     display: block;
  263.     color: var(--black);
  264.     font-weight: 700;
  265.     font-size: 1.3em;
  266. }
  267.  
  268. .char-info info {
  269.     display: block;
  270.     font-family: 'Roboto Mono', monospace;
  271.     color: var(--black);
  272.     font-size: 0.8em;
  273. }
  274.  
  275. /* TAB PAGES*/
  276.  
  277. .tabcontent {
  278.     position: relative;
  279.     top: 0;
  280.     background: var(--white);
  281.     width: 500px;
  282.     height: 500px;
  283.     display: none;
  284.     z-index: 10;
  285.     animation: fadeEffect 1s;
  286. }
  287.  
  288. .content-wrapper {
  289.     width: 500px;
  290.     height: 500px;
  291.     overflow: auto;
  292.     position: relative;
  293.     top: -22px;
  294. }
  295.  
  296. .row {
  297.     border-bottom: 2px solid var(--black);
  298. }
  299.  
  300. .row:last-child {
  301.     border-bottom: 0px;
  302. }
  303.  
  304. .x-button {
  305.   position: sticky;
  306.   float: right;
  307.   cursor: pointer;
  308.   font-family: 'Roboto Mono', monospace;
  309.   text-transform: uppercase;
  310.   height: 20px;
  311.   width: 20px;
  312.   top: 0;
  313.   right: 0;
  314.   display: flex;
  315.   justify-content: center;
  316.   align-items: center;
  317.   border-left: 2px solid var(--black);
  318.   border-bottom: 2px solid var(--black);
  319.   transition: 0.3s;
  320.   background: var(--white);
  321.   z-index: 9999;
  322. }
  323.  
  324. .x-button:hover {
  325.     background: var(--accent);
  326. }
  327.  
  328. @keyframes fadeEffect {
  329.   0% {opacity: 0;}
  330.   100% {opacity: 1;}
  331. }
  332.  
  333. /* UPPER ROW */
  334.  
  335. .toprow {
  336.     display: flex;
  337. }
  338.  
  339. .bigimg {
  340.     width: 248px;
  341.     height: 373px;
  342.     border-right: 2px solid var(--black);
  343.     overflow: hidden;
  344.     text-align: center;
  345. }
  346.  
  347. .img-inner {
  348.     display: flex;
  349.     justify-content: center;
  350.     width: 248px;
  351.     height: 373px;
  352. }
  353.  
  354. .img-inner img {
  355.     width: auto;
  356.     height: 373px;
  357.     display: block;
  358. }
  359.  
  360. .toptext {
  361.     width: 250px;
  362. }
  363. .charname {
  364.     background: var(--accent);
  365.     border-bottom: 2px solid var(--black);
  366.     width: 100%;
  367.     display: flex;
  368.     justify-content: center;
  369.     align-items: center;
  370.     height: 110px;
  371.     font-family: 'Roboto Mono', monospace;
  372.     font-weight: 500;
  373.     font-size: 1.2em;
  374. }
  375.  
  376. .stats {
  377.     display: flex;
  378.     flex-flow: row wrap;
  379. }
  380.  
  381. .fact {
  382.     border-bottom: 2px solid var(--black);
  383.     height: 40px;
  384.     width: calc(50% - 1px);
  385.     display: flex;
  386.     justify-content: space-between;
  387.     align-items: center;
  388. }
  389.  
  390. .left {
  391.    border-right: 2px solid var(--black);
  392. }
  393.  
  394. .staticon {
  395.     width: 40px;
  396.     height: 40px;
  397.     background: var(--grey);
  398.     border-right: 2px solid var(--black);
  399.     display: flex;
  400.     justify-content: center;
  401.     align-items: center;
  402.     color: var(--white);
  403. }
  404.  
  405. .stattext {
  406.     padding: 10px;
  407.     font-family: 'Roboto Mono', monospace;
  408.     font-weight: 400;
  409.     font-size: 0.7em;
  410. }
  411.  
  412. .charquote {
  413.     height: 177px;
  414.     display: flex;
  415.     justify-content: center;
  416.     align-items: center;
  417.     font-weight: 400;
  418.     font-size: 1.2em;
  419.     padding: 0px 25px;
  420.     text-align: center;
  421.     font-style: italic;
  422. }
  423.  
  424. /* TAG ROW */
  425.  
  426. .midrow {
  427.     min-height: 75px;
  428.     display: flex;
  429.     flex-flow: row wrap;
  430.     justify-content: center;
  431.     align-items: center;
  432.     padding: 25px;
  433. }
  434.  
  435. .midrow a {
  436.     color: var(--black);
  437.     background: var(--white);
  438.     text-decoration: none;
  439.     font-family: 'Roboto Mono', monospace;
  440.     font-size: 0.8em;
  441.     border: 2px solid var(--black);
  442.     padding: 5px 7px;
  443.     margin: 3px 5px;
  444.     transition: 0.3s;
  445. }
  446.  
  447. .midrow a:hover {
  448.     background: var(--accent);
  449.     font-weight: 800;
  450. }
  451.  
  452. /* TEXT ROW */
  453.  
  454. .lowerrow {
  455.     padding: 25px;
  456.     padding-bottom: 25px;
  457. }
  458.  
  459. .lowerrow > *:last-child {
  460.     margin-bottom: 0;
  461.     padding-bottom: 0;
  462. }
  463.  
  464. .lowerrow > table:last-child {
  465.     margin-bottom: 0;
  466.     padding-bottom: 0;
  467. }
  468.  
  469. .lowerrow > *:first-child {
  470.     margin-top: 0;
  471.     padding-top: 0;
  472. }
  473.  
  474. .lowerrow h1, .lowerrow h2, .lowerrow h3, .lowerrow h4, .lowerrow h5, .lowerrow h6 {
  475.     font-family: 'Roboto Mono', monospace;
  476.     margin: 0;
  477.     padding: 10px 0;
  478.     border-left: 4px solid var(--black);
  479.     padding-left: 10px;
  480.     background: var(--accent);
  481.     width: calc(100% - 14px);
  482. }
  483.  
  484. .lowerrow a {
  485.     text-decoration: none;
  486.     padding: 1px 3px;
  487.     margin: -1px -3px;
  488.     background: var(--accent);
  489.     color: var(--black);
  490.     transition: 500ms;
  491. }
  492.  
  493. .lowerrow a:hover {
  494.     background: var(--grey);
  495. }
  496.  
  497. .lowerrow hr {
  498.     margin: 0.5em 70px;
  499.     border: 1px solid var(--black);
  500. }
  501.  
  502. hr.full {
  503.     margin: 25px -25px;
  504.     border: 1px solid var(--black);    
  505. }
  506.  
  507. .lowerrow ol, .lowerrow li {
  508.     margin: 1em 0;
  509.     padding: 0 0 0 25px;
  510. }
  511.  
  512. .lowerrow li {
  513.     margin: 0;
  514.     padding: 0;
  515. }
  516.  
  517. .lowerrow blockquote {
  518.     border-left: 2px solid var(--black);
  519.     padding: 10px 20px;
  520.     background: var(--accent);
  521.     font-style: italic;
  522. }
  523.  
  524. .lowerrow dt {
  525.     font-weight: 500;
  526.     background: var(--accent);
  527.     padding: 2px 5px;
  528.     margin: -2px 0;
  529. }
  530. .lowerrow dd {
  531.     font-family: 'Roboto Mono', monospace;
  532.     font-size: 0.8em;
  533.     padding: 10px 0px;
  534. }
  535.  
  536. .lowerrow table, .lowerrow th, .lowerrow td {
  537.     border: 2px solid var(--black);
  538.     text-align: center;
  539.     vertical-align: center;
  540. }
  541.  
  542. .lowerrow table {
  543.     margin: 16px 0px;
  544.     width: 100%;
  545.     border-collapse: collapse;
  546. }
  547.  
  548. .lowerrow th {
  549.     background: var(--accent);
  550.     font-family: 'Roboto Mono', monospace;
  551.     font-weight: 700;
  552. }
  553.  
  554. .lowerrow td, .lowerrow th {
  555.     padding: 5px;
  556. }
  557.  
  558. </style>
  559. </head>
  560.  
  561. <!--
  562.  
  563. INSTRUCTIONS
  564.  
  565. There's two main parts to this
  566.    1. The tabs' structure and function
  567.    2. The content of the tabs
  568.    
  569. When you install this, there's five tabs already set up. This will give you instructison on how to add more or remove them, and below, you'll find how to customize the content of the tabs.
  570.  
  571. Each tab is a button with a function that ties it to a tab div. You can copy or delete the buttons as many times as you want and the tab will scroll. You'll need to update the number next to the photo along with the content.
  572.  
  573.    <button class="tablinks" onclick="openChar(event, 'ID')">
  574.        <div class="num">01</div>
  575.        <div class="char-pic"><img src="IMG URL"></div>
  576.        <div class="char-info">
  577.            <name>name here</name>
  578.            <info>age - fc - other</info>
  579.        </div>
  580.    </button>
  581.  
  582. Additionally, in the button's info, you'll see
  583.    onclick="openChar(event, '###')
  584.    
  585. The only thing you should change for each button is the ### part (which probably looks like c1, c2, c3 etc. or ID if you copy it from here)
  586.  
  587. I would suggest renaming all of these to the character whose button it is to keep track of things. Remember to keep it within the quotation marks.
  588.  
  589. Then, below, there's the tab content. Each button is linked to one section, and you must rename the id (and NOT the class) to match what you put on the button.
  590.  
  591.  
  592.  
  593. For example, if your character's name is Alex, your button will look like
  594.  
  595.    <button class="tablinks" onclick="openChar(event, 'alex')">
  596.    
  597. and your div will look like
  598.  
  599.    <div id="alex" class="tabcontent">
  600.  
  601. -->
  602.  
  603. <body>
  604. <div class="tabcontainer">
  605.  
  606.  
  607. <!-- TITLE PAGE -->
  608.  
  609.  
  610. <div id="title-page">
  611.     <div class="title">characters</div>
  612.     <div class="author">by @username</div>
  613.     <div class="t-desc">Fill in here with whatever description you want, it will fill up the box while remaining centered. Just don't add to much or it will overflow. You can also just remove this whole div if you don't want it</div>
  614.     <div class="t-links">
  615.         <a href="/">home</a>
  616.         <a href="/ask">ask</a>
  617.         <a href="#">link 1</a>
  618.         <a href="#">link 2</a> <!-- You can add more links and they'll format themselves-->
  619.     </div>
  620. </div>
  621.  
  622.  
  623.  
  624.  
  625.  
  626. <!-- TABS -->
  627.  
  628. <div class="tab">
  629.  
  630.  
  631.  
  632.     <button class="tablinks" onclick="openChar(event, 'c1')">
  633.         <div class="num">01</div>
  634.         <div class="char-pic"><img src="https://via.placeholder.com/70"></div>
  635.         <div class="char-info">
  636.             <name>name here</name>
  637.             <info>age - fc - other</info>
  638.         </div>
  639.     </button>
  640.    
  641.    
  642.     <button class="tablinks" onclick="openChar(event, 'c2')">
  643.         <div class="num">02</div>
  644.         <div class="char-pic"><img src="https://via.placeholder.com/70"></div>
  645.         <div class="char-info">
  646.             <name>name here</name>
  647.             <info>age - fc - other</info>
  648.         </div>
  649.     </button>
  650.    
  651.    
  652.     <button class="tablinks" onclick="openChar(event, 'c3')">
  653.         <div class="num">03</div>
  654.         <div class="char-pic"><img src="https://via.placeholder.com/70"></div>
  655.         <div class="char-info">
  656.             <name>name here</name>
  657.             <info>age - fc - other</info>
  658.         </div>
  659.     </button>
  660.    
  661.    
  662.     <button class="tablinks" onclick="openChar(event, 'c4')">
  663.         <div class="num">04</div>
  664.         <div class="char-pic"><img src="https://via.placeholder.com/70"></div>
  665.         <div class="char-info">
  666.             <name>name here</name>
  667.             <info>age - fc - other</info>
  668.         </div>
  669.     </button>
  670.    
  671.    
  672.     <button class="tablinks" onclick="openChar(event, 'c5')">
  673.         <div class="num">05</div>
  674.         <div class="char-pic"><img src="https://via.placeholder.com/70"></div>
  675.         <div class="char-info">
  676.             <name>name here</name>
  677.             <info>age - fc - other</info>
  678.         </div>
  679.     </button>
  680.    
  681.    
  682. </div>
  683.  
  684.  
  685. <!--
  686.  
  687. TAB DIRECTIONS
  688.  
  689. There's three (and a half) parts to the tab.
  690.    1. The 'toprow' with the photo, name, info, and quotes
  691.    2. The 'midrow' with the tags
  692.    3. The 'lowerrow' with the text.
  693. (the half is the x button. Don't touch it unless you want to change the x to a different symbol.)
  694.  
  695. These three rows are essentially modular, but the page is designed for the toprow and midrow to take up the entirety of a tab, and the lowerrow is optional and will cause the content to scroll.
  696.  
  697. If you move them around or duplicate them, they will stay pretty well formatted, but I do recommend keeping the toprow at the top.
  698.  
  699. The tumblr preview will likely scroll on tabs that shouldn't scroll, please check the live page, it should be fixed there. if it's not, feel free to contact me.
  700.  
  701. As for each row...
  702.  
  703.  
  704.  
  705.  
  706. TOPROW
  707.  
  708. Image -
  709.    The image is actually 248px x 373px, but 250x375 will work.
  710.  
  711.    It will also crop, resize, and center your image if it is wider than the aspect ratio (i.e. if your image is longer horizontally, a square, or even a few pixels wider than 250px)
  712.  
  713. Icons -
  714.    You can change the icons for the stats by going to @suiomi's honeybee icon page, https://honeybee.suiomi.com/
  715.  
  716.    Choose an icon, and then replace
  717.        <span class="th th-moon"></span> (or whatever the existing icon is)
  718.  
  719.    with
  720.        <span class="th th-icon-name"></span>
  721.    
  722.  
  723. MIDROW
  724.  
  725. This row is only formatted for links. You can add as many links as you want, and it will format them. The number of links it will fit without scrolling depending on the text of your links, but any more than two rows will scroll.
  726.  
  727. LOWERROW
  728.  
  729. This row is fully formatted for text. Please wrap everything in the appropriate tags for the full effect. Below is a list of all the tags that you can use...
  730.  
  731. (headings)
  732. <h1></h1>
  733. <h2></h2>
  734. <h3></h3>
  735. <h4></h4>
  736. <h5></h5>
  737. <h6></h6>
  738.  
  739. (text)
  740. <p></p>             -wrap all paragraphs in this
  741. <i></i>             -italics
  742. <b></b>             -bold
  743. <a href="link"></a> -hyperlink
  744. <blockquote></blockquote>
  745.  
  746. (lists)
  747. --unordered list--
  748. <ul>
  749.  <li>list item</li>
  750.  <li>list item</li>
  751.  <li>list item</li>
  752. </ul>  
  753.  
  754. --ordered list--
  755. <ol>
  756.  <li>list item</li>
  757.  <li>list item</li>
  758.  <li>list item</li>
  759. </ol>
  760.  
  761. (horizontal lines)
  762. <hr>                -regular line break
  763. <hr class="full">   -line that spans entire div
  764.  
  765. (definition list)
  766. <dl>
  767.   <dt>term</dt>
  768.   <dd>definition</dd>
  769.   <dt>term</dt>
  770.   <dd>definition</dd>
  771. </dl>
  772.  
  773. (table)
  774.        - this is an empty 2 x 3 table
  775.        with a heading row like in the preview,
  776.        add/remove rows, columns, and the heading row as you please
  777.        
  778. <table>
  779.  <thead>
  780.    <tr>
  781.      <th></th>
  782.      <th></th>
  783.    </tr>
  784.  </thead>
  785.  <tbody>
  786.    <tr>
  787.      <td></td>
  788.      <td></td>
  789.    </tr>
  790.    <tr>
  791.      <td></td>
  792.      <td></td>
  793.    </tr>
  794.  </tbody>
  795. </table>
  796.  
  797. -->
  798.  
  799. <!-- TAB CONTENT -->
  800.  
  801.  
  802.  
  803. <!-- start content -->
  804.  
  805. <div id="c1" class="tabcontent"> <!-- remember to match the id to the button -->
  806. <div class="x-button" onclick="closeTab()">X</div>
  807. <div class="content-wrapper">
  808.  
  809.  
  810. <div class="toprow row">
  811.  
  812.  
  813. <!-- image...
  814.  
  815. replace the placeholder link with the link to your image
  816.  
  817. the dimensions are actually 248x373, but 250x375 will work.
  818.  
  819. It will also crop, resize, and center your image if it is wider than the aspect ratio (i.e. if your image is longer horizontally, a square, or even a few pixels wider than 250px) -->
  820.  
  821.  
  822.     <div class="bigimg"><div class="img-inner"><img src="https://via.placeholder.com/250x375"></div></div>
  823.    
  824.    
  825.    
  826. <div class="toptext">
  827.  
  828.  
  829. <!-- name here -->
  830. <div class="charname">tab one</div>
  831.  
  832.  
  833.  
  834. <!-- info section...
  835.  
  836.  You can change the icons for the stats by going to @suiomi's honeybee icon page, https://honeybee.suiomi.com/
  837.  
  838.    Choose an icon, and then replace
  839.        <span class="th th-moon"></span> (or whatever the existing icon is)
  840.  
  841.    with
  842.        <span class="th th-icon-name"></span>
  843.        
  844. -->
  845. <div class="stats">
  846.         <div class="fact left">
  847.             <div class="staticon"><span class="th th-moon"></span></div>
  848.             <div class="stattext">age</div>
  849.         </div>
  850.         <div class="fact">
  851.             <div class="staticon"><span class="th th-constellation"></span></div>
  852.             <div class="stattext">birthday</div>
  853.         </div>
  854.         <div class="fact left">
  855.             <div class="staticon"><span class="th th-planet-1"></span></div>
  856.             <div class="stattext">mbti</div>
  857.         </div>
  858.         <div class="fact">
  859.             <div class="staticon"><span class="th th-sun"></span></div>
  860.             <div class="stattext">status</div>
  861.         </div>
  862. </div>
  863.  
  864.  
  865.  
  866. <!-- quote here -->
  867. <div class="charquote">quote here</div>
  868.  
  869.  
  870.  
  871. </div>
  872. </div>
  873.  
  874.  
  875.  
  876. <!-- tags row, feel free to add more tags. if you add more than two rows, it will scroll. -->
  877.  
  878. <div class="midrow row">
  879. <a href="#">tag one</a>
  880. <a href="#">tag two</a>
  881. <a href="#">tag three</a>
  882. <a href="#">tag four</a>
  883. </div>
  884.  
  885.  
  886.  
  887. <!-- lower row - remove this if you don't want the text section -->
  888. <div class="lowerrow row">
  889.  
  890.  
  891.    
  892. <p>sample text<p>
  893.  
  894. <h1>heading one</h1>
  895. <p>paragraph tag</p>
  896. <h2>heading two</h2>
  897. <p>paragraph tag</p>
  898. <h3>heading three</h3>
  899. <p>paragraph tag</p>
  900. <h4>heading four</h4>
  901. <p>paragraph tag</p>
  902. <h5>heading five</h5>
  903. <p>paragraph tag</p>
  904. <h6>heading six</h6>
  905.  
  906. <p>paragraph tag</p>  
  907. <i>italics</i>            
  908. <b>bold</b>            
  909. <a href="#">link</a>
  910. <blockquote>blockquote</blockquote>
  911.  
  912. <ul>
  913.   <li>unordered list item</li>
  914.   <li>list item</li>
  915.   <li>list item</li>
  916. </ul>  
  917.  
  918.  
  919. <ol>
  920.   <li>ordered list item</li>
  921.   <li>list item</li>
  922.   <li>list item</li>
  923. </ol>
  924.  
  925. <p>horizontal line</p>
  926. <hr>              
  927. <p>full horizontal line</p>
  928. <hr class="full">
  929.  
  930. <dl>
  931.    <dt>term</dt>
  932.    <dd>definition</dd>
  933.    <dt>term</dt>
  934.    <dd>definition</dd>
  935. </dl>
  936.  
  937.        
  938. <table>
  939.   <thead>
  940.     <tr>
  941.       <th>table</th>
  942.       <th>heading</th>
  943.     </tr>
  944.   </thead>
  945.   <tbody>
  946.     <tr>
  947.       <td>row</td>
  948.       <td>2</td>
  949.     </tr>
  950.     <tr>
  951.       <td>1</td>
  952.       <td>2</td>
  953.     </tr>
  954.   </tbody>
  955. </table>
  956.    
  957. </div>
  958.  
  959.  
  960.  
  961. </div>
  962. </div>
  963.  
  964. <!-- end content -->
  965.  
  966.  
  967. <!-- start content -->
  968.  
  969. <div id="c2" class="tabcontent"> <!-- remember to match the id to the button -->
  970. <div class="x-button" onclick="closeTab()">X</div>
  971. <div class="content-wrapper">
  972.  
  973.  
  974. <div class="toprow row">
  975.  
  976.  
  977. <!-- image...
  978.  
  979. replace the placeholder link with the link to your image
  980.  
  981. the dimensions are actually 248x373, but 250x375 will work.
  982.  
  983. It will also crop, resize, and center your image if it is wider than the aspect ratio (i.e. if your image is longer horizontally, a square, or even a few pixels wider than 250px) -->
  984.  
  985.  
  986.     <div class="bigimg"><div class="img-inner"><img src="https://via.placeholder.com/250x375"></div></div>
  987.    
  988.    
  989.    
  990. <div class="toptext">
  991.  
  992.  
  993. <!-- name here -->
  994. <div class="charname">tab two</div>
  995.  
  996.  
  997.  
  998. <!-- info section...
  999.  
  1000.  You can change the icons for the stats by going to @suiomi's honeybee icon page, https://honeybee.suiomi.com/
  1001.  
  1002.    Choose an icon, and then replace
  1003.        <span class="th th-moon"></span> (or whatever the existing icon is)
  1004.  
  1005.    with
  1006.        <span class="th th-icon-name"></span>
  1007.        
  1008. -->
  1009. <div class="stats">
  1010.         <div class="fact left">
  1011.             <div class="staticon"><span class="th th-moon"></span></div>
  1012.             <div class="stattext">age</div>
  1013.         </div>
  1014.         <div class="fact">
  1015.             <div class="staticon"><span class="th th-constellation"></span></div>
  1016.             <div class="stattext">birthday</div>
  1017.         </div>
  1018.         <div class="fact left">
  1019.             <div class="staticon"><span class="th th-planet-1"></span></div>
  1020.             <div class="stattext">mbti</div>
  1021.         </div>
  1022.         <div class="fact">
  1023.             <div class="staticon"><span class="th th-sun"></span></div>
  1024.             <div class="stattext">status</div>
  1025.         </div>
  1026. </div>
  1027.  
  1028.  
  1029.  
  1030. <!-- quote here -->
  1031. <div class="charquote">quote here</div>
  1032.  
  1033.  
  1034.  
  1035. </div>
  1036. </div>
  1037.  
  1038.  
  1039.  
  1040. <!-- tags row, feel free to add more tags. if you add more than two rows, it will scroll. -->
  1041.  
  1042. <div class="midrow row">
  1043. <a href="#">tag one</a>
  1044. <a href="#">tag two</a>
  1045. <a href="#">tag three</a>
  1046. <a href="#">tag four</a>
  1047. </div>
  1048.  
  1049.  
  1050.  
  1051. <!-- lower row - remove this if you don't want the text section -->
  1052. <div class="lowerrow row">
  1053.  
  1054.  
  1055.  
  1056. <p>text goes here</p>
  1057.  
  1058.  
  1059.  
  1060. </div>  
  1061. </div>
  1062. </div>
  1063.  
  1064. <!-- end content -->
  1065.  
  1066.  
  1067.  
  1068.  
  1069.  
  1070. <!-- start content -->
  1071.  
  1072. <div id="c3" class="tabcontent"> <!-- remember to match the id to the button -->
  1073. <div class="x-button" onclick="closeTab()">X</div>
  1074. <div class="content-wrapper">
  1075.  
  1076.  
  1077. <div class="toprow row">
  1078.  
  1079.  
  1080. <!-- image...
  1081.  
  1082. replace the placeholder link with the link to your image
  1083.  
  1084. the dimensions are actually 248x373, but 250x375 will work.
  1085.  
  1086. It will also crop, resize, and center your image if it is wider than the aspect ratio (i.e. if your image is longer horizontally, a square, or even a few pixels wider than 250px) -->
  1087.  
  1088.  
  1089.     <div class="bigimg"><div class="img-inner"><img src="https://via.placeholder.com/250x375"></div></div>
  1090.    
  1091.    
  1092.    
  1093. <div class="toptext">
  1094.  
  1095.  
  1096. <!-- name here -->
  1097. <div class="charname">tab three</div>
  1098.  
  1099.  
  1100.  
  1101. <!-- info section...
  1102.  
  1103.  You can change the icons for the stats by going to @suiomi's honeybee icon page, https://honeybee.suiomi.com/
  1104.  
  1105.    Choose an icon, and then replace
  1106.        <span class="th th-moon"></span> (or whatever the existing icon is)
  1107.  
  1108.    with
  1109.        <span class="th th-icon-name"></span>
  1110.        
  1111. -->
  1112. <div class="stats">
  1113.         <div class="fact left">
  1114.             <div class="staticon"><span class="th th-moon"></span></div>
  1115.             <div class="stattext">age</div>
  1116.         </div>
  1117.         <div class="fact">
  1118.             <div class="staticon"><span class="th th-constellation"></span></div>
  1119.             <div class="stattext">birthday</div>
  1120.         </div>
  1121.         <div class="fact left">
  1122.             <div class="staticon"><span class="th th-planet-1"></span></div>
  1123.             <div class="stattext">mbti</div>
  1124.         </div>
  1125.         <div class="fact">
  1126.             <div class="staticon"><span class="th th-sun"></span></div>
  1127.             <div class="stattext">status</div>
  1128.         </div>
  1129. </div>
  1130.  
  1131.  
  1132.  
  1133. <!-- quote here -->
  1134. <div class="charquote">quote here</div>
  1135.  
  1136.  
  1137.  
  1138. </div>
  1139. </div>
  1140.  
  1141.  
  1142.  
  1143. <!-- tags row, feel free to add more tags. if you add more than two rows, it will scroll. -->
  1144.  
  1145. <div class="midrow row">
  1146. <a href="#">tag one</a>
  1147. <a href="#">tag two</a>
  1148. <a href="#">tag three</a>
  1149. <a href="#">tag four</a>
  1150. </div>
  1151.  
  1152.  
  1153.  
  1154. <!-- lower row - remove this if you don't want the text section -->
  1155. <div class="lowerrow row">
  1156.  
  1157.  
  1158.  
  1159. <p>text goes here</p>
  1160.  
  1161.  
  1162.  
  1163. </div>  
  1164. </div>
  1165. </div>
  1166.  
  1167. <!-- end content -->
  1168.  
  1169.  
  1170.  
  1171. <!-- start content -->
  1172.  
  1173. <div id="c4" class="tabcontent"> <!-- remember to match the id to the button -->
  1174. <div class="x-button" onclick="closeTab()">X</div>
  1175. <div class="content-wrapper">
  1176.  
  1177.  
  1178. <div class="toprow row">
  1179.  
  1180.  
  1181. <!-- image...
  1182.  
  1183. replace the placeholder link with the link to your image
  1184.  
  1185. the dimensions are actually 248x373, but 250x375 will work.
  1186.  
  1187. It will also crop, resize, and center your image if it is wider than the aspect ratio (i.e. if your image is longer horizontally, a square, or even a few pixels wider than 250px) -->
  1188.  
  1189.  
  1190.     <div class="bigimg"><div class="img-inner"><img src="https://via.placeholder.com/250x375"></div></div>
  1191.    
  1192.    
  1193.    
  1194. <div class="toptext">
  1195.  
  1196.  
  1197. <!-- name here -->
  1198. <div class="charname">tab four</div>
  1199.  
  1200.  
  1201.  
  1202. <!-- info section...
  1203.  
  1204.  You can change the icons for the stats by going to @suiomi's honeybee icon page, https://honeybee.suiomi.com/
  1205.  
  1206.    Choose an icon, and then replace
  1207.        <span class="th th-moon"></span> (or whatever the existing icon is)
  1208.  
  1209.    with
  1210.        <span class="th th-icon-name"></span>
  1211.        
  1212. -->
  1213. <div class="stats">
  1214.         <div class="fact left">
  1215.             <div class="staticon"><span class="th th-moon"></span></div>
  1216.             <div class="stattext">age</div>
  1217.         </div>
  1218.         <div class="fact">
  1219.             <div class="staticon"><span class="th th-constellation"></span></div>
  1220.             <div class="stattext">birthday</div>
  1221.         </div>
  1222.         <div class="fact left">
  1223.             <div class="staticon"><span class="th th-planet-1"></span></div>
  1224.             <div class="stattext">mbti</div>
  1225.         </div>
  1226.         <div class="fact">
  1227.             <div class="staticon"><span class="th th-sun"></span></div>
  1228.             <div class="stattext">status</div>
  1229.         </div>
  1230. </div>
  1231.  
  1232.  
  1233.  
  1234. <!-- quote here -->
  1235. <div class="charquote">quote here</div>
  1236.  
  1237.  
  1238.  
  1239. </div>
  1240. </div>
  1241.  
  1242.  
  1243.  
  1244. <!-- tags row, feel free to add more tags. if you add more than two rows, it will scroll. -->
  1245.  
  1246. <div class="midrow row">
  1247. <a href="#">tag one</a>
  1248. <a href="#">tag two</a>
  1249. <a href="#">tag three</a>
  1250. <a href="#">tag four</a>
  1251. </div>
  1252.  
  1253.  
  1254.  
  1255. <!-- lower row - remove this if you don't want the text section -->
  1256. <div class="lowerrow row">
  1257.  
  1258.  
  1259.  
  1260. <p>text goes here</p>
  1261.  
  1262.  
  1263.  
  1264. </div>  
  1265. </div>
  1266. </div>
  1267.  
  1268. <!-- end content -->
  1269.  
  1270.  
  1271.  
  1272.  
  1273. <!-- start content -->
  1274.  
  1275. <div id="c5" class="tabcontent"> <!-- remember to match the id to the button -->
  1276. <div class="x-button" onclick="closeTab()">X</div>
  1277. <div class="content-wrapper">
  1278.  
  1279.  
  1280. <div class="toprow row">
  1281.  
  1282.  
  1283. <!-- image...
  1284.  
  1285. replace the placeholder link with the link to your image
  1286.  
  1287. the dimensions are actually 248x373, but 250x375 will work.
  1288.  
  1289. It will also crop, resize, and center your image if it is wider than the aspect ratio (i.e. if your image is longer horizontally, a square, or even a few pixels wider than 250px) -->
  1290.  
  1291.  
  1292.     <div class="bigimg"><div class="img-inner"><img src="https://via.placeholder.com/250x375"></div></div>
  1293.    
  1294.    
  1295.    
  1296. <div class="toptext">
  1297.  
  1298.  
  1299. <!-- name here -->
  1300. <div class="charname">tab five</div>
  1301.  
  1302.  
  1303.  
  1304. <!-- info section...
  1305.  
  1306.  You can change the icons for the stats by going to @suiomi's honeybee icon page, https://honeybee.suiomi.com/
  1307.  
  1308.    Choose an icon, and then replace
  1309.        <span class="th th-moon"></span> (or whatever the existing icon is)
  1310.  
  1311.    with
  1312.        <span class="th th-icon-name"></span>
  1313.        
  1314. -->
  1315. <div class="stats">
  1316.         <div class="fact left">
  1317.             <div class="staticon"><span class="th th-moon"></span></div>
  1318.             <div class="stattext">age</div>
  1319.         </div>
  1320.         <div class="fact">
  1321.             <div class="staticon"><span class="th th-constellation"></span></div>
  1322.             <div class="stattext">birthday</div>
  1323.         </div>
  1324.         <div class="fact left">
  1325.             <div class="staticon"><span class="th th-planet-1"></span></div>
  1326.             <div class="stattext">mbti</div>
  1327.         </div>
  1328.         <div class="fact">
  1329.             <div class="staticon"><span class="th th-sun"></span></div>
  1330.             <div class="stattext">status</div>
  1331.         </div>
  1332. </div>
  1333.  
  1334.  
  1335.  
  1336. <!-- quote here -->
  1337. <div class="charquote">quote here</div>
  1338.  
  1339.  
  1340.  
  1341. </div>
  1342. </div>
  1343.  
  1344.  
  1345.  
  1346. <!-- tags row, feel free to add more tags. if you add more than two rows, it will scroll. -->
  1347.  
  1348. <div class="midrow row">
  1349. <a href="#">tag one</a>
  1350. <a href="#">tag two</a>
  1351. <a href="#">tag three</a>
  1352. <a href="#">tag four</a>
  1353. </div>
  1354.  
  1355.  
  1356.  
  1357. <!-- lower row - remove this if you don't want the text section -->
  1358. <div class="lowerrow row">
  1359.  
  1360.  
  1361.  
  1362. <p>text goes here</p>
  1363.  
  1364.  
  1365.  
  1366. </div>  
  1367. </div>
  1368. </div>
  1369.  
  1370. <!-- end content -->
  1371.  
  1372.  
  1373. </div>
  1374.  
  1375. <div class="credit"><a href="https://ebrothemes.tumblr.com" title="ebrothemes" style="color:var(--grey);">E</a></div>
  1376.  
  1377. <script>
  1378. function openChar(evt, charNum) {
  1379.   var i, tabcontent, tablinks;
  1380.   tabcontent = document.getElementsByClassName("tabcontent");
  1381.   for (i = 0; i < tabcontent.length; i++) {
  1382.    tabcontent[i].style.display = "none";
  1383.  }
  1384.  tablinks = document.getElementsByClassName("tablinks");
  1385.  for (i = 0; i < tablinks.length; i++) {
  1386.    tablinks[i].className = tablinks[i].className.replace(" active", "");
  1387.  }
  1388.  document.getElementById(charNum).style.display = "block";
  1389.  evt.currentTarget.className += " active";
  1390.  document.getElementById('title-page').style.opacity = "0";
  1391. }
  1392. </script>
  1393. <script>
  1394. function closeTab() {
  1395.     tabs = document.getElementsByClassName("tablinks");
  1396.     for (i = 0; i < tabs.length; i++) {
  1397.        if (tabs[i].classList.contains('active')) {
  1398.            tabs[i].classList.remove('active')
  1399.        }
  1400.    }
  1401.    content = document.getElementsByClassName("tabcontent");
  1402.    for (i = 0; i < content.length; i++) {
  1403.        content[i].style.display = "none";
  1404.    }
  1405.    document.getElementById('title-page').style.opacity = "1"
  1406. }
  1407. </script>
  1408. </body>
  1409. </html>
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!