API tools faq
paste
Advertisement
southcodes

aelita | character page

southcodes
Mar 19th, 2023
2,096
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 27.32 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.     - page 'aelita' by skye southcodes.tumblr.com
  3.     - modify as you please but please do not touch the credit
  4.     - any errors? need help? have questions? let me know!
  5.     southcodes.tumblr.com/inbox
  6.    
  7.     - normalize css by https://github.com/necolas
  8.     - fonts by google
  9.     - icon font by http://fontawesome.io/icons/
  10.     - tabs by https://www.w3schools.com/howto/howto_js_tabs.asp
  11.  
  12.  
  13.     TO CUSTOMIZE THE CHARACTER TABS PLEASE SEE:
  14.     https://www.w3schools.com/howto/howto_js_tabs.asp
  15.  
  16.  -->
  17. <!DOCTYPE html>
  18. <html>
  19. <head>
  20.     <title>{title}</title>
  21.    
  22.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  23.  
  24.     <link rel="shortcut icon" href="{favicon}">
  25.     <meta name="description" content="{MetaDescription}"/>
  26.  
  27.     <!-- fonts -->
  28.     <link rel="preconnect" href="https://fonts.googleapis.com">
  29.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  30.     <link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&family=Raleway:ital,wght@0,500;0,600;0,700;1,500;1,600;1,700&display=swap" rel="stylesheet">
  31.  
  32.     <!-- normalize css -->
  33.     <link href="https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel="stylesheet">
  34.  
  35. <style>
  36. :root {
  37.     --background:#ffffff;
  38.     --text:#333;
  39.     --secondary-text: #aaa;
  40.     --links: #8cb3db;
  41.     --links-hover: #36608c;
  42.     --borders:#eee;
  43.     --icons: #77a0cc;
  44.     --accents: pink
  45. }
  46.  
  47. .tmblr-iframe {margin:.7rem;opacity:.6;-ms-transform: scale(0.85);-webkit-transform: scale(0.85); /* Safari */transform: scale(0.85);}
  48. .tmblr-iframe:hover {opacity:.8;}
  49.  
  50. ::-webkit-scrollbar-thumb:vertical {border-left:2px solid var(--borders);}
  51. ::-webkit-scrollbar {width:6px}
  52. ::-webkit-scrollbar-track-piece{margin:5px 0;}
  53.  
  54. pre {font-family:consolas;
  55. white-space: pre-wrap;       /* css-3 */
  56. white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  57. white-space: -pre-wrap;      /* Opera 4- */
  58. white-space: -o-pre-wrap;    /* Opera 7 */
  59. word-wrap: break-word;}      /* Internet Explorer 5.5+ */
  60.  
  61. body, figure{margin:0;padding:0}
  62. html{font: 14px 'Karla', sans-serif;}
  63. body {font-size:14px;color:var(--text);background:var(--background);}
  64. a {text-decoration: none;color:var(--links);word-break:break-word;}
  65. a:hover {color:var(--links-hover);}
  66. blockquote {margin:0;padding:0;}
  67. img {max-width:100%;height: auto;display: block;margin:0}
  68. hr {border:0;border-top:1px solid var(--borders);margin:1rem 0;}
  69.  
  70. * {
  71.     box-sizing: border-box;
  72. }
  73.  
  74. /* container */
  75.  
  76. #container {
  77.     display: flex;
  78.     width: 95vw;
  79. }
  80.  
  81. /* character navigation */
  82.  
  83. #character-navigation {
  84.     width: 25rem;
  85.     height: 100vh;
  86.     overflow: auto;
  87.     text-align: center;
  88.     padding:1rem;
  89.     border-right: 1px solid var(--borders);
  90.     background:var(--background);
  91.     z-index: 9;
  92. }
  93.  
  94. #character-navigation button.active {
  95.     background-color: var(--accents);
  96. }
  97.  
  98. .introduction-link {padding:2rem 1rem;}
  99.  
  100. .introduction-link img{
  101.     width: 6.5rem;
  102.     height: 6.5rem;
  103.     border-radius: 100%;
  104.     object-fit: cover;
  105.     margin:auto;
  106.     border:.7rem solid var(--background);
  107.     outline:1px solid var(--borders);
  108. }
  109.  
  110. .introduction-link #navigation-title {
  111.     text-transform: uppercase;
  112.     font-weight: 600;
  113.     margin: 2rem 0 0;
  114.     font-size: 1.1rem;
  115. }
  116.  
  117. #character-navigation .character-link{
  118.     transition: 0.3s;
  119.     border:0;
  120.     display: block;
  121.     width: 100%;
  122.     text-align: center;
  123.     cursor: pointer;
  124.     background-color: transparent;
  125.     border-radius: 4px;
  126.     font-family: 'Montserrat', sans-serif;
  127. }
  128.  
  129. #character-navigation .character-link:focus{outline: 0;}
  130.  
  131. #character-navigation .character-link:not(.introduction-link) {
  132.     padding:2rem 1rem;
  133.     display: flex;
  134.     align-items: center;
  135.     justify-content: space-between;
  136.     text-align: left;
  137. }
  138.  
  139. .character-link-image {
  140.     width: 4rem;
  141.     height: 4rem;
  142.     border-radius: 100%;
  143.     object-fit: cover;
  144. }
  145.  
  146. #character-navigation .character-link-name {width:calc(100% - 6rem);}
  147.  
  148. #character-navigation .character-link-name h2{
  149.     text-transform: uppercase;
  150.     font: 500 1rem 'Montserrat', sans-serif;
  151.     margin:0 0 1rem;
  152.     letter-spacing: .03rem;
  153. }
  154.  
  155. #character-navigation .character-link-name h3{
  156.     margin: 1rem 0 0;
  157.     font: 400 .9rem 'Montserrat', sans-serif;
  158.     color: var(--secondary-text);
  159.     font-style: italic;
  160. }
  161.  
  162. /* main content */
  163.  
  164. main {width: 100%;}
  165.  
  166. .character-tab {animation: fadeEffect 1s;}
  167. @keyframes fadeEffect { from {opacity: 0;} to {opacity: 1;}}
  168.  
  169. /* main icon navigation */
  170.  
  171. #main-navigation {
  172.     list-style:none;
  173.     display: flex;
  174.     flex-wrap: wrap;
  175.     margin-bottom: 4rem;
  176.     align-items: center;
  177. }
  178.  
  179. #main-navigation li{
  180.     margin-right: 2.5rem;
  181.     margin-bottom: 1rem;
  182.     vertical-align: middle;
  183. }
  184.  
  185. #main-navigation .fa-solid {font-size: 1.3rem;}
  186.  
  187. .main-navigation-link {
  188.     padding:.4rem .6rem;
  189.     border:1px solid var(--borders);
  190.     border-radius: 3px;
  191. }
  192.  
  193. /* introduction tab */
  194.  
  195. #introduction {
  196.     overflow: auto;
  197.     height: 100vh;
  198.     padding: 4rem;
  199. }
  200.  
  201. /* title */
  202.  
  203. #page-title {font: 600 2rem 'Raleway', sans-serif}
  204.  
  205. #page-title::before {
  206.     content: '\f111';
  207.     font-family: 'Font Awesome 5 Free';
  208.     font-weight: 900;
  209.     color: var(--icons);
  210.     margin-right: 1.5rem;
  211.     border: 4px solid var(--background);
  212.     outline: 1px solid var(--borders);
  213.     border-radius: 100%;
  214.     font-size: .8rem;
  215.     vertical-align: middle;
  216. }
  217.  
  218. /* subtitle */
  219.  
  220. #page-subtitle {
  221.     color: var(--secondary-text);
  222.     font-style: italic;
  223.     font-size: 1rem;
  224.     letter-spacing: .03rem;
  225. }
  226.  
  227. /* introduction image */
  228.  
  229. #introduction-image {
  230.     width: 15rem;
  231.     height: 15rem;
  232.     border:.7rem solid var(--background);
  233.     outline:1px solid var(--borders);
  234.     margin: 3rem 2rem 1rem 0;
  235.     object-fit: cover;
  236.     float:left
  237. }
  238.  
  239. /* introduction text */
  240.  
  241. #introduction-text {
  242.     margin-top: 4rem;
  243.     line-height: 150%;
  244. }
  245.  
  246. /* introduction details */
  247.  
  248. #introduction-details li{
  249.     display: inline-block;
  250.     list-style: none;
  251.     margin:2rem 0
  252. }
  253.  
  254. #introduction-details li:after{
  255.     content: '\f111';
  256.     font-family: 'Font Awesome 5 Free';
  257.     font-weight: 900;
  258.     color: var(--icons);
  259.     margin:0 1rem;
  260.     border: 2px solid var(--background);
  261.     outline: 1px solid var(--borders);
  262.     border-radius: 100%;
  263.     font-size: .5rem;
  264.     vertical-align: middle;
  265. }
  266.  
  267. #introduction-details li:last-of-type:after{display: none;}
  268.  
  269. /* introduction triggers */
  270.  
  271. #introduction-triggers {margin-top: 2rem;}
  272.  
  273. #introduction-triggers span {
  274.     border-left: 5px solid var(--accents);
  275.     padding: .3rem 0 .3rem .5rem;
  276.     text-transform: uppercase;
  277.     font-weight: 600;
  278. }
  279.  
  280. #introduction-triggers li {
  281.     display: inline-block;
  282.     list-style: none;
  283.     margin:0 1rem;
  284.     font-style: italic;
  285.     color: var(--secondary-text);
  286.     letter-spacing: .05rem;
  287. }
  288.  
  289. /* about the author section */
  290.  
  291. /* about the author divider */
  292.  
  293. #about-divider {
  294.     width: 80%;
  295.     text-align: center;
  296.     color: var(--icons);
  297.     margin:5.5rem auto;
  298.     position: relative;
  299. }
  300.  
  301. #about-divider .fa-solid{
  302.     padding:4px;
  303.     background-color: white;
  304.     border: 1px solid #eee;
  305.     border-radius: 100%;
  306. }
  307.  
  308. #about-divider:after {
  309.     content: '';
  310.     position: absolute;right:0;top:10px;
  311.     width:40%;
  312.     height: 1px;
  313.     background-color: var(--borders);
  314. }
  315.  
  316. #about-divider:before {
  317.     content: '';
  318.     position: absolute;left:0;top:10px;
  319.     width:40%;
  320.     height: 1px;
  321.     background-color: var(--borders);
  322. }
  323.  
  324. /* about the author title */
  325.  
  326. #about-the-author-title span{
  327.     box-shadow: inset 0 -7px var(--accents);
  328.     padding:0 .3rem
  329. }
  330.  
  331. /* about the author image */
  332.  
  333. #author-image {
  334.     width: 80%;
  335.     aspect-ratio: 1 / 1;
  336.     max-width: 13rem;
  337.     margin: 0 0 1rem 1rem;
  338.     border-radius: 100%;
  339.     object-fit: cover;
  340.     float:right
  341. }
  342.  
  343. /* about the author text */
  344.  
  345. #about-the-author {line-height: 150%;}
  346.  
  347. /* about the author details */
  348.  
  349. #about-the-author-details {margin-top: 3rem;}
  350.  
  351. #about-the-author-details li{
  352.     display: inline-block;
  353.     list-style: none;
  354. }
  355.  
  356. #about-the-author-details li:after{
  357.     content: '\f111';
  358.     font-family: 'Font Awesome 5 Free';
  359.     font-weight: 900;
  360.     color: var(--icons);
  361.     margin:0 1rem;
  362.     border: 2px solid var(--background);
  363.     outline: 1px solid var(--borders);
  364.     border-radius: 100%;
  365.     font-size: .5rem;
  366.     vertical-align: middle;
  367. }
  368.  
  369. #about-the-author-details li:last-of-type:after{display: none;}
  370.  
  371. /* character tabs */
  372.  
  373. .character-tab:not(#introduction) {
  374.     display: flex;
  375.     height: 100vh;
  376.     overflow: auto;
  377. }
  378.  
  379. .inner-tab-wrapper {display: flex;}
  380.  
  381. /* character info */
  382.  
  383. .character-tab-inside {
  384.     width: calc(100% - 12rem);
  385.     height: 100vh;
  386.     overflow: auto;
  387.     height: 100vh;
  388.     padding: 4rem;
  389. }
  390.  
  391. /* character name */
  392.  
  393. .character-name {
  394.     font-size: 2.3rem;
  395.     font-family: 'Raleway', sans-serif;
  396.     font-weight: 600;
  397. }
  398.  
  399. .character-name:before {
  400.     content: '\f111';
  401.     font-family: 'Font Awesome 5 Free';
  402.     font-weight: 900;
  403.     color: var(--icons);
  404.     margin-right: 1.5rem;
  405.     border: 4px solid var(--background);
  406.     outline: 1px solid var(--borders);
  407.     border-radius: 100%;
  408.     font-size: .8rem;
  409.     vertical-align: middle;
  410. }
  411.  
  412. .character-subtitle {
  413.     position: relative;
  414.     padding-left: 2.5rem;
  415.     font:400 1rem 'Karla', sans-serif;
  416.     font-style: italic;
  417.     color: var(--secondary-text);
  418.     letter-spacing: .03rem;
  419.     z-index: 0 ;
  420. }
  421.  
  422. .character-subtitle:before {
  423.     background-color: var(--secondary-text);
  424.     content: '';
  425.     width:1.5rem;
  426.     height: 1px;
  427.     position: absolute;
  428.     left:0; top:50%
  429. }
  430.  
  431. /* character details */
  432.  
  433. .character-details {
  434.     list-style: none;
  435.     margin-top: 3rem;
  436.     line-height: 180%;
  437. }
  438.  
  439. .character-details li {margin:1.5rem 0}
  440.  
  441. .character-details li span{
  442.     padding: .4rem .6rem;
  443.     border-bottom: 1px solid var(--borders);
  444. }
  445.  
  446. .character-details li:before{
  447.     content: '\f111';
  448.     font-family: 'Font Awesome 5 Free';
  449.     font-weight: 900;
  450.     color: var(--icons);
  451.     margin-right: 1.5rem;
  452.     border: 2px solid var(--background);
  453.     outline: 1px solid var(--borders);
  454.     border-radius: 100%;
  455.     font-size: .4rem;
  456.     vertical-align: middle;
  457. }
  458.  
  459. /* character about */
  460.  
  461. .character-about {
  462.     margin-top: 3rem;
  463.     line-height: 160%;
  464. }
  465.  
  466. /* character likes/dislikes  */
  467.  
  468. .likes-dislikes-wrapper {
  469.     display: flex;
  470.     flex-flow: row wrap;
  471.     justify-content: space-between;
  472.     text-align: left;
  473.     margin-top: 2rem;
  474. }
  475.  
  476. .likes-dislikes-wrapper ul,.likes-dislikes-wrapper li {
  477.     margin:0;
  478.     list-style: none;
  479. }
  480.  
  481. .likes-dislikes-wrapper li {margin:1rem 0 1.5rem}
  482.  
  483. .character-dislikes {
  484.     width: 50%;
  485.     padding:1rem
  486. }
  487.  
  488. .character-dislikes li:before{  
  489.     content: '\f7a9';
  490.     font-family: 'Font Awesome 5 Free';
  491.     color:grey;
  492.     font-weight: 900;
  493.     margin-right: .5rem;
  494. }
  495.  
  496. .character-likes {
  497.     width: 50%;
  498.     padding:1rem
  499. }
  500.  
  501. .character-likes li:before{
  502.     content: '\f004';
  503.     font-family: 'Font Awesome 5 Free';
  504.     color:var(--icons);
  505.     font-weight: 900;
  506.     margin-right: .5rem;
  507. }
  508.  
  509. /* progress bars  */
  510.  
  511. .progress-bars-wrapper {
  512.     list-style: none;
  513.     display: flex;
  514.     justify-content: space-between;
  515.     flex-flow: row wrap;
  516.     margin:2rem 1rem 0;
  517.     display: flex;
  518.     flex-flow: row wrap;
  519.     justify-content: space-between;
  520.     text-align: left;
  521. }
  522.  
  523. .stat-container {
  524.     margin:1rem 0;
  525.     width: 50%;
  526. }
  527. .stats-name {margin-bottom: .8rem;}
  528.  
  529. .stat-square {
  530.     border-radius: 100%;
  531.     width:1.1rem;
  532.     max-width: 10%;
  533.     background-color: #eee;
  534.     aspect-ratio: 1 / 1;
  535.     border:2px solid var(--background);
  536.     display: inline-block;}
  537. .stat-fill-1 .stat-square:nth-of-type(1),
  538. .stat-fill-2 .stat-square:nth-of-type(-n+2),
  539. .stat-fill-3 .stat-square:nth-of-type(-n+3),
  540. .stat-fill-4 .stat-square:nth-of-type(-n+4),
  541. .stat-fill-5 .stat-square:nth-of-type(-n+5),
  542. .stat-fill-6 .stat-square:nth-of-type(-n+6),
  543. .stat-fill-7 .stat-square:nth-of-type(-n+7),
  544. .stat-fill-8 .stat-square:nth-of-type(-n+8),
  545. .stat-fill-9 .stat-square:nth-of-type(-n+9),
  546. .stat-fill-10 .stat-square:nth-of-type(-n+10)
  547. {background:var(--icons);}
  548.  
  549.   /* character links */
  550.  
  551. .character-link {margin-top:3rem;}
  552.  
  553. .character-link nav ul {
  554.     list-style: none;
  555.     margin: 0;padding: 0;
  556. }
  557.  
  558. .character-link nav ul li{
  559.     list-style: none;
  560.     display: inline-block;
  561.     margin:0 2rem 1rem 0;
  562.     padding:.5rem .6rem;
  563.     border: 1px solid var(--borders);
  564.     border-radius: 3px;
  565. }
  566.  
  567. /* character image and palette */
  568.  
  569. .character-image-palette {
  570.     height: 90vh;
  571.     overflow: hidden;
  572.     margin-top: 5vh;
  573. }
  574.  
  575. /* character image */
  576.  
  577. .character-image {
  578.     width: 20rem;
  579.     object-fit: cover;
  580.     height:calc(100% - 4rem);
  581.     margin-right: 2rem;
  582. }
  583.  
  584. /* character palette */
  585.  
  586. .character-palette {
  587.     display: flex;
  588.     justify-content: space-between;
  589.     width:100%;
  590. }
  591.  
  592. .palette-color {
  593.     width:3rem;
  594.     height: 3rem;
  595.     margin:1rem 0 0
  596. }
  597.  
  598. /* responsive slide in navigation */
  599.  
  600. #hamburger-checkbox {display: none;}
  601. #hamburger {display: none;}
  602.  
  603. /* MEDIA */
  604.  
  605. @media only screen and (min-width:0) and (max-width:650px) {
  606.  
  607.     /* character image */
  608.  
  609.     .character-image {
  610.         width: 20rem;
  611.         object-fit: cover;
  612.         height:calc(100% - 4rem);
  613.         margin-right: 2rem;
  614.     }
  615.  
  616.     /* character palette */
  617.  
  618.     .character-palette {
  619.         display: flex;
  620.         justify-content: space-between;
  621.         width:100%;
  622.     }
  623.  
  624. }
  625.  
  626. @media only screen and (min-width:0) and (max-width:1100px) {
  627.  
  628.     .stat-container {
  629.         margin:1rem 0;
  630.         width: 90%;
  631.     }
  632.    
  633.     .character-dislikes {
  634.         width: 90%;
  635.         padding:1rem
  636.     }
  637. }
  638.  
  639. @media only screen and (min-width:0) and (max-width:800px) {
  640.  
  641.     /* slide in */
  642.  
  643.     #hamburger {
  644.         cursor: pointer;
  645.         z-index: 99999999!important;
  646.         position: fixed;
  647.         left:2rem;top:2rem;
  648.         padding:.5rem;
  649.         font-size: 1.5rem;
  650.         border: 1px solid var(--borders);
  651.         border-radius: 3px;
  652.         color:var(--icons);
  653.         background-color: var(--background);
  654.         display: block;
  655.     }
  656.  
  657.     #hamburger-checkbox:checked~#character-navigation {
  658.         transition: 2s ease;
  659.         transform: translateX(0px);
  660.     }
  661.  
  662.     #character-navigation {
  663.         transform: translateX(-25rem);
  664.         transition: 2s ease;
  665.         width: 25rem!important;
  666.     }
  667.  
  668.     /* content */
  669.  
  670.     #container {
  671.         display: block;
  672.         width: 95%;
  673.     }
  674.  
  675.     #character-navigation {position: absolute ;}
  676.  
  677.     #main-navigation {margin-top: 4rem;}
  678.  
  679. }
  680. </style>
  681. </head>
  682. <body>
  683.    
  684. <section id="container">
  685.  
  686. <input type="checkbox" id="hamburger-checkbox"><label id="hamburger" for="hamburger-checkbox"><i class="fa-solid fa-bars"></i></label>
  687.  
  688. <!-- characters navigation -->
  689. <nav id="character-navigation" class="nav">
  690.    
  691.     <button  id="defaultOpen" class="introduction-link character-link" onclick="openCharacter(event, 'introduction')">
  692.        
  693.         <img src="INTRODUCTION LINK IMAGE URL" alt="">
  694.  
  695.         <h3 id="navigation-title">introduction</h3>
  696.  
  697.     </button>
  698.    
  699.     <hr>
  700.  
  701.     <button  class="character-link" onclick="openCharacter(event, 'character-one')">
  702.        
  703.         <img class="character-link-image" src="CHARACTER NAVIGATION IMAGE" alt="">
  704.  
  705.         <div class="character-link-name">
  706.             <h2>name</h2>
  707.             <h3>subtitle</h3>
  708.         </div>
  709.  
  710.     </button>
  711.  
  712.     <hr>
  713.  
  714.     <button  class="character-link" onclick="openCharacter(event, 'character-two')">
  715.        
  716.         <img class="character-link-image" src="CHARACTER NAVIGATION IMAGE" alt="">
  717.  
  718.         <div class="character-link-name">
  719.             <h2>name</h2>
  720.             <h3>subtitle</h3>
  721.         </div>
  722.  
  723.     </button>
  724.     <hr>
  725.  
  726.     <button  class="character-link" onclick="openCharacter(event, 'character-two')">
  727.        
  728.         <img class="character-link-image" src="CHARACTER NAVIGATION IMAGE" alt="">
  729.  
  730.         <div class="character-link-name">
  731.             <h2>name</h2>
  732.             <h3>subtitle</h3>
  733.         </div>
  734.  
  735.     </button>
  736.  
  737. </nav>
  738.  
  739. <main>
  740.  
  741. <!-- character tabs -->
  742.  
  743. <section id="introduction" class="character-tab">
  744.  
  745.     <nav id="main-navigation">
  746.         <a href="/"><li><i class="fa-solid fa-home"></i></li></a>
  747.         <a href="/ask"><li><i class="fa-solid fa-envelope"></i></li></a>
  748.         <a href="https://www.tumblr.com/follow/{user}"><li><i class="fa-solid fa-plus"></i></li></a>
  749.  
  750.         <li class="main-navigation-link"><a href="">link 1</a></li>
  751.         <li class="main-navigation-link"><a href="">link 1</a></li>
  752.         <li class="main-navigation-link"><a href="">link 1</a></li>
  753.     </nav>
  754.  
  755.     <h1 id="page-title">Title</h1>
  756.  
  757.  
  758.     <h2 id="page-subtitle">page subtitle</h2>
  759.  
  760.  
  761.     <img src="INTRODUCTION TAB IMAGE" alt="" id="introduction-image">
  762.  
  763.  
  764.     <article id="introduction-text">
  765.         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis non voluptatum minus voluptatibus vel hic id earum quasi ipsa tempora! Fugit velit harum quo pariatur, quasi officia deleniti veniam nesciunt.</p>
  766.     </article>
  767.  
  768.     <div style="clear: both;"></div>
  769.    
  770.     <article id="introduction-details">
  771.         <li>genre</li>
  772.         <li>word count</li>
  773.         <li>starting date</li>
  774.     </article>
  775.  
  776.  
  777.     <article id="introduction-triggers">
  778.         <span>triggers:</span>
  779.        
  780.         <li>trigger 1,</li>
  781.         <li>trigger 2,</li>
  782.         <li>trigger 3</li>
  783.     </article>
  784.  
  785.    
  786.     <div id="about-divider"><i class="fa-solid fa-circle"></i></div>
  787.    
  788.  
  789.     <!-- about the author section -->
  790.  
  791.     <img id="author-image" src="AUTHOR IMAGE URL" alt="">
  792.  
  793.     <h2 id="about-the-author-title"><span>About the author</span></h2>
  794.    
  795.     <article id="about-the-author">
  796.         <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus quaerat hic quis tempore corrupti architecto est in, commodi cumque repellendus sint tenetur consequatur? Veritatis neque numquam tenetur illum, minima laboriosam.</p>
  797.         <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus quaerat hic quis tempore corrupti architecto est in, commodi cumque repellendus sint tenetur consequatur? Veritatis neque numquam tenetur illum, minima laboriosam.</p>
  798.     </article>
  799.  
  800.     <article id="about-the-author-details">
  801.         <li>thing</li>
  802.         <li>thing</li>
  803.         <li>thing</li>
  804.     </article>
  805.  
  806. <div style="clear:both"></div>
  807. </section>
  808.  
  809.  
  810. <!-- character start -->
  811.  
  812. <section id="character-one" class="character-tab"><div class="inner-tab-wrapper">
  813.    
  814.     <!-- character information start -->
  815.     <section class="character-tab-inside">
  816.        
  817.         <!-- character name -->
  818.         <h2 class="character-name">name</h2>
  819.  
  820.         <!-- character subtitle -->
  821.         <h3 class="character-subtitle">subtitle</h3>
  822.  
  823.         <!-- character details -->
  824.  
  825.         <article class="character-details">
  826.             <li><span>thing</span></li>
  827.             <li><span>thing lorem</span></li>
  828.             <li><span>thing</span></li>
  829.         </article>
  830.  
  831.         <!-- character about -->
  832.  
  833.         <article class="character-about">
  834.             <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus quaerat hic quis tempore corrupti architecto est in, commodi cumque repellendus sint tenetur consequatur? Veritatis neque numquam tenetur illum, minima laboriosam.</p>
  835.         </article>
  836.  
  837.         <!-- likes and dislikes start -->
  838.         <article class="likes-dislikes-wrapper">
  839.  
  840.             <ul class="character-likes">
  841.                 <li>thing </li>
  842.                 <li>thing </li>
  843.             </ul>
  844.            
  845.             <ul class="character-dislikes">
  846.                 <li>thing </li>
  847.                 <li>thing </li>
  848.             </ul>
  849.  
  850.         </article>            
  851.         <!-- likes and dislikes start -->
  852.  
  853.          <!-- progress bars start -->
  854.          <article class="progress-bars-wrapper">
  855.                
  856.             <li class="stat-container">
  857.                 <!-- stat name -->
  858.                 <div class="stats-name">stat</div>
  859.  
  860.                 <!-- change number below to fill the squares -->
  861.                 <div class="stats-value stat-fill-2"><div class="stat-square"></div><div class="stat-square"></div><div class="stat-square"></div><div class="stat-square"></div><div class="stat-square"></div><div class="stat-square"></div><div class="stat-square"></div><div class="stat-square"></div><div class="stat-square"></div><div class="stat-square"></div></div>
  862.             </li>
  863.  
  864.             <li class="stat-container">
  865.                 <!-- stat name -->
  866.                 <div class="stats-name">stat</div>
  867.  
  868.                 <!-- change number below to fill the squares -->
  869.                 <div class="stats-value stat-fill-2"><div class="stat-square"></div><div class="stat-square"></div><div class="stat-square"></div><div class="stat-square"></div><div class="stat-square"></div><div class="stat-square"></div><div class="stat-square"></div><div class="stat-square"></div><div class="stat-square"></div><div class="stat-square"></div></div>
  870.             </li>
  871.  
  872.         </article>
  873.         <!-- progress bars end -->
  874.  
  875.  
  876.        
  877.         <!-- character links -->
  878.         <article class="character-link">
  879.             <nav><ul>
  880.                 <li><a href="">link</a></li>
  881.                 <li><a href="">link</a></li>
  882.             </ul></nav>
  883.         </article>
  884.  
  885.        
  886.     </section>
  887.     <!-- character information end -->
  888.  
  889.     <!-- character image and palette start -->
  890.     <section class="character-image-palette">
  891.        
  892.         <img class="character-image" src="CHARACTER IMAGE URL" alt="">
  893.    
  894.         <!-- palette -->
  895.         <article class="character-palette">
  896.             <figure class="palette-color" style="background-color: green;"></figure>
  897.             <figure class="palette-color" style="background-color: red;"></figure>
  898.             <figure class="palette-color" style="background-color: yellow;"></figure>
  899.             <figure class="palette-color" style="background-color: blue;"></figure>
  900.         </article>
  901.  
  902.     </section>
  903.     <!-- character image and palette end -->
  904.  
  905. </div><!-- inner wrapper end --></section>
  906.  
  907. <!-- character end -->
  908.  
  909.  
  910.  
  911. <!-- character start -->
  912.  
  913. <section id="character-two" class="character-tab"><div class="inner-tab-wrapper">
  914.    
  915.     <!-- character information start -->
  916.     <section class="character-tab-inside">
  917.        
  918.         <!-- character name -->
  919.         <h2 class="character-name">name1</h2>
  920.  
  921.         <!-- character subtitle -->
  922.         <h3 class="character-subtitle">subtitle</h3>
  923.  
  924.         <!-- character details -->
  925.  
  926.         <article class="character-details">
  927.             <li><span>thing</span></li>
  928.             <li><span>thing lorem</span></li>
  929.             <li><span>thing</span></li>
  930.         </article>
  931.  
  932.         <!-- character about -->
  933.  
  934.         <article class="character-about">
  935.             <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus quaerat hic quis tempore corrupti architecto est in, commodi cumque repellendus sint tenetur consequatur? Veritatis neque numquam tenetur illum, minima laboriosam.</p>
  936.         </article>
  937.  
  938.         <!-- likes and dislikes start -->
  939.         <article class="likes-dislikes-wrapper">
  940.  
  941.             <ul class="character-likes">
  942.                 <li>thing </li>
  943.                 <li>thing </li>
  944.             </ul>
  945.            
  946.             <ul class="character-dislikes">
  947.                 <li>thing </li>
  948.                 <li>thing </li>
  949.             </ul>
  950.  
  951.         </article>            
  952.         <!-- likes and dislikes start -->
  953.  
  954.          <!-- progress bars start -->
  955.          <article class="progress-bars-wrapper">
  956.                
  957.             <li class="stat-container">
  958.                 <!-- stat name -->
  959.                 <div class="stats-name">stat</div>
  960.  
  961.                 <!-- change number below to fill the squares -->
  962.                 <div class="stats-value stat-fill-2"><div class="stat-square"></div><div class="stat-square"></div><div class="stat-square"></div><div class="stat-square"></div><div class="stat-square"></div><div class="stat-square"></div><div class="stat-square"></div><div class="stat-square"></div><div class="stat-square"></div><div class="stat-square"></div></div>
  963.             </li>
  964.  
  965.             <li class="stat-container">
  966.                 <!-- stat name -->
  967.                 <div class="stats-name">stat</div>
  968.  
  969.                 <!-- change number below to fill the squares -->
  970.                 <div class="stats-value stat-fill-2"><div class="stat-square"></div><div class="stat-square"></div><div class="stat-square"></div><div class="stat-square"></div><div class="stat-square"></div><div class="stat-square"></div><div class="stat-square"></div><div class="stat-square"></div><div class="stat-square"></div><div class="stat-square"></div></div>
  971.             </li>
  972.  
  973.         </article>
  974.         <!-- progress bars end -->
  975.  
  976.  
  977.        
  978.         <!-- character links -->
  979.         <article class="character-link">
  980.             <nav><ul>
  981.                 <li><a href="">link</a></li>
  982.                 <li><a href="">link</a></li>
  983.             </ul></nav>
  984.         </article>
  985.  
  986.        
  987.     </section>
  988.     <!-- character information end -->
  989.  
  990.     <!-- character image and palette start -->
  991.     <section class="character-image-palette">
  992.        
  993.         <img class="character-image" src="CHARACTER IMAGE URL" alt="">
  994.    
  995.         <!-- palette -->
  996.         <article class="character-palette">
  997.             <figure class="palette-color" style="background-color: green;"></figure>
  998.             <figure class="palette-color" style="background-color: red;"></figure>
  999.             <figure class="palette-color" style="background-color: yellow;"></figure>
  1000.             <figure class="palette-color" style="background-color: blue;"></figure>
  1001.         </article>
  1002.  
  1003.     </section>
  1004.     <!-- character image and palette end -->
  1005.  
  1006. </div><!-- inner wrapper end --></section>
  1007.  
  1008. <!-- character end -->
  1009.  
  1010. </main>
  1011.  
  1012. </section> <!-- container end -->
  1013.  
  1014. <!-- do not touch -->
  1015. <div style="position:fixed;bottom:2rem;right:2rem;z-index:999999999999999999999!important;font-size:.7rem;letter-spacing:.03rem;"><a href="https://southcodes.tumblr.com" title="coded by southcodes" target="_blank">SC</a></div>
  1016.  
  1017.  
  1018. <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
  1019.  
  1020. <!-- icons font -->
  1021. <script src="https://kit.fontawesome.com/0993e30c04.js" crossorigin="anonymous"></script>
  1022.  
  1023. <script>
  1024.  
  1025. document.getElementById("defaultOpen").click();
  1026.  
  1027. function openCharacter(evt, cityName) {
  1028.  
  1029.   var i, tabcontent, tablinks;
  1030.  
  1031.   tabcontent = document.getElementsByClassName("character-tab");
  1032.   for (i = 0; i < tabcontent.length; i++) {
  1033.     tabcontent[i].style.display = "none";
  1034.   }
  1035.  
  1036.   tablinks = document.getElementsByClassName("character-link");
  1037.   for (i = 0; i < tablinks.length; i++) {
  1038.     tablinks[i].className = tablinks[i].className.replace(" active", "");
  1039.   }
  1040.  
  1041.   document.getElementById(cityName).style.display = "block";
  1042.   evt.currentTarget.className += " active";
  1043. }
  1044.  
  1045. </script>
  1046. </body>
  1047. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!