API tools faq
paste
Advertisement
southcodes

lyoko | book page

southcodes
Aug 30th, 2022 (edited)
3,080
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 36.56 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3.     - book page 'lyoko' [revamp of 'garage kids'] by skye southcodes.tumblr.com
  4.     - modify as you please but please do not touch the credit
  5.     - any errors? need help? have questions? let me know!
  6.     southcodes.tumblr.com/inbox
  7.    
  8.     - normalize css by https://github.com/necolas
  9.     - fonts by google
  10.     - icon font by https://fontawesome.com/icons
  11.     - pop ups by http://jsfiddle.net/WGPhG/1123/
  12.    
  13. -->
  14.  
  15. <!DOCTYPE html>
  16. <html>
  17. <head>
  18.     <title>{title}</title>
  19.    
  20.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  21.  
  22.     <link rel="shortcut icon" href="{favicon}">
  23.  
  24.     <link rel="alternate" type="application/rss+xml" href="{RSS}">
  25.  
  26.     <meta name="description" content="{MetaDescription}"/>
  27.  
  28.     <meta charset="UTF-8">
  29.     <!-- fonts -->
  30.     <link rel="preconnect" href="https://fonts.googleapis.com">
  31.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  32.     <link href="https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
  33.  
  34.     <!-- normalize css -->
  35.     <link rel="stylesheet" type="text/css" href="https://necolas.github.io/normalize.css/8.0.1/normalize.css">
  36.  
  37. <style>
  38. :root {
  39.     --background:#fafafa;
  40.     --inner-background: #fff;
  41.     --text:#333;
  42.     --links:rgb(230, 173, 216);
  43.     --links-hover:rgb(148, 19, 148);
  44.     --borders: #eee;
  45.     --lighter-text: #999;
  46.     --icons: pink
  47. }
  48.  
  49. .tmblr-iframe {z-index:9999999999999999!important;margin:8rem .7rem .7rem;opacity:.6;-ms-transform: scale(0.85); /* IE 9 */-webkit-transform: scale(0.85); /* Safari */transform: scale(0.85);}
  50. .tmblr-iframe:hover {opacity:.8;}
  51.  
  52. ::-webkit-scrollbar-thumb:vertical {border-left:2px solid var(--links)}
  53. ::-webkit-scrollbar {width:6px;height:0;}
  54. ::-webkit-scrollbar-track-piece{margin:5px 0;}
  55.  
  56. pre {font-family:consolas;
  57.     white-space: pre-wrap;       /* css-3 */
  58.     white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  59.     white-space: -pre-wrap;      /* Opera 4- */
  60.     white-space: -o-pre-wrap;    /* Opera 7 */
  61.     word-wrap: break-word;      /* Internet Explorer 5.5+ */
  62.     background:#fafafa;
  63.     border:1px solid var(--borders);
  64.     padding:1rem;
  65. }
  66.  
  67. body, figure{margin:0;padding:0}
  68. html{font: 14px 'Karla', sans-serif;}
  69. body {font-size:1rem;color:var(--text);background:var(--background)}
  70. a {text-decoration: none;color:var(--links);word-break:break-word;}
  71. a:hover {color:var(--links-hover);}
  72. blockquote {margin:0;padding:0;}
  73. blockquote blockquote {border-left:1px solid var(--borders);padding:.1rem 0 .1rem .7rem;}
  74. img {max-width:100%;height: auto;display: block;margin: 0}
  75. hr {border:0;border-top:1px solid var(--borders);margin:1rem 0;}
  76. video { max-width:100%;}
  77.  
  78. /*  global  */
  79.  
  80. * {box-sizing: border-box;}
  81.  
  82. nav * {list-style-type:none;margin:0;padding:0;}
  83.  
  84. /* top bar */
  85.  
  86. #topbar {
  87.     position: sticky;top:0;left:0;right:0;
  88.     background-color: var(--inner-background);
  89.     border-bottom: 1px solid var(--borders);
  90.     padding: 1rem 3rem;
  91.     display: flex;
  92.     flex-flow: row wrap;
  93.     align-items: center;
  94.     justify-content: space-between;
  95.     z-index: 99999;
  96. }
  97.  
  98. #topbar-inside {
  99.     display: flex;
  100.     flex-flow: row wrap;
  101.     align-items: center;
  102. }
  103.  
  104. /* icon image */
  105.  
  106. figure.icon-image {
  107.     width: 5rem;
  108.     height: 5rem;
  109.     margin-right: 3rem;
  110.     border: 7px solid var(--inner-background);
  111.     outline: 1px solid var(--borders);
  112.     border-radius: 100%;
  113. }
  114.  
  115. img.icon-image {
  116.     width: 100%;
  117.     height: 100%;
  118.     object-fit: cover;
  119.     border-radius: 100%;  
  120. }
  121.  
  122. /* page title */
  123.  
  124. #page-title {
  125.     font: 600 1.5rem 'Montserrat', sans-serif;
  126.     margin-right: 1rem;
  127.     text-transform: uppercase;
  128. }
  129.  
  130. /* header username */
  131.  
  132. #username {
  133.     font: 400 .9rem 'Montserrat', sans-serif;
  134.     font-style: italic;
  135.     letter-spacing: .05rem;
  136.     color:var(--lighter-text)
  137. }
  138.  
  139. /* header navigation */
  140.  
  141. #topbar-navigation {
  142.     text-align: right;
  143.     margin:1rem 0 ;
  144.     font-weight: 600;
  145. }
  146.  
  147. #topbar-navigation li{
  148.     display: inline-block;
  149.     margin:0;
  150.     font-size: 1rem;
  151.     text-transform: uppercase;
  152.     line-height: 170%;
  153.     letter-spacing: .05rem;
  154. }
  155.  
  156. #topbar-navigation li::after {
  157.     vertical-align: middle;
  158.     font-family: 'Font Awesome 5 Free';
  159.     content:'\f111';
  160.     font-size: .4rem;
  161.     margin:0 1.5rem;
  162.     font-weight: 900;
  163.     color: var(--icons);
  164.     border: 2px solid var(--inner-background);
  165.     outline: 1px solid var(--borders);
  166.     border-radius: 100%;
  167. }
  168.  
  169. #topbar-navigation li:last-of-type:after {display: none;}
  170.  
  171. /* book content */
  172.  
  173. main {
  174.     width: 90vw;
  175.     max-width: 45rem;
  176.     margin:5rem auto
  177. }
  178.  
  179. /* book header images */
  180.  
  181. .book-image{
  182.     width: 100%;
  183.     object-fit: cover;
  184.     object-position: 50% 90%;
  185. }
  186.  
  187. #book-icon {
  188.     width: 13rem;
  189.     height: 13rem;
  190.     object-fit: cover;
  191.     border-radius: 100%;
  192.     margin-top: -7rem;
  193.     margin-right: 2rem;
  194.     position: relative;
  195.     z-index: 9999;
  196.     border:10px solid var(--inner-background);
  197.     outline: 1px solid var(--borders);    
  198. }
  199.  
  200. /* characters */
  201.  
  202. #characters-wrapper {margin:2rem 0}
  203.  
  204. /* character icon */
  205.  
  206. figure.character-icon {
  207.     width: 8rem;
  208.     aspect-ratio: 1 / 1;
  209.     display: inline-block;
  210.     margin:1.5rem 1rem;
  211.     cursor: pointer;
  212.     vertical-align: bottom;
  213.     position: relative;
  214.     transition-duration: .2s;
  215. }
  216. img.character-icon {
  217.     width: 8rem;
  218.     aspect-ratio: 1 / 1;
  219.     border:8px solid var(--inner-background);
  220.     outline: 1px solid var(--borders);
  221. }
  222.  
  223. /* character icon name */
  224.  
  225. .icon-character-name {
  226.     font:600 .85rem 'Montserrat', sans-serif;
  227.     margin:0;
  228.     text-align: center;
  229.     position: absolute;
  230.     left:0;bottom:8px;right:0;
  231.     background-color: rgba(255,255,255,.7);
  232.     padding:8px 10px;
  233.     overflow: auto;
  234.     max-height: 7.5rem;
  235.     text-transform: uppercase;
  236.     line-height: 140%;
  237.     transition-duration: .2s;
  238. }
  239.  
  240. figure.character-icon:hover .icon-character-name{
  241.     opacity: 0;
  242.     transition-duration: .2s;
  243. }
  244.  
  245. /* characters pop ups */
  246.  
  247. .character-popup {
  248.     display: none;
  249.     position:fixed;top:0px;left:0px;bottom:0px;right:0px;  
  250.     margin:auto;
  251.     background-color: var(--inner-background);
  252.     border:1px solid var(--borders);
  253.     z-index:100000000000000000;
  254.     width:90vw;
  255.     max-width: 45rem;
  256.     height:80vh;
  257.     max-width: 45rem;
  258.     box-shadow: 7px 7px 7px #eee;
  259. }
  260.  
  261. .character-wrapper {
  262.     width:90vw;
  263.     max-width: 45rem;
  264.     height:80vh;
  265.     max-width: 45rem;
  266.     overflow: auto;
  267.     padding: 2rem;
  268. }
  269.  
  270. .close-popup {
  271.     position: absolute;top:1rem;right:1rem;
  272.     cursor:pointer;
  273.     margin:0;
  274.     font-size: 1.6rem;
  275.     color:var(--icons)
  276. }
  277.  
  278. /* pop up character name */
  279.  
  280. .character-name {
  281.     margin:0 0;
  282.     vertical-align: middle;
  283.     font-family: 'Montserrat', sans-serif;
  284.     font-weight: 600;
  285. }
  286.  
  287. .character-name:before {
  288.     content: '\f111';
  289.     font-family: 'Font Awesome 5 Free';
  290.     font-weight: 900;
  291.     margin:0 1rem 0 0;
  292.     font-size: 1rem;
  293.     border:3px solid var(--inner-background);
  294.     outline:1px solid var(--borders);
  295.     border-radius: 100%;
  296.     color:var(--icons);
  297.     vertical-align: middle;
  298. }
  299.  
  300. /* pop up character subtitle */
  301.  
  302. .character-subtitle {
  303.     margin:.7rem 0 1rem;
  304.     font:400 1.1rem 'Karla', sans-serif;
  305.     font-style: italic;
  306.     color:var(--lighter-text);
  307.     letter-spacing: .07rem;
  308.     padding-left: 2.2rem;
  309.     position: relative;
  310. }
  311.  
  312. .character-subtitle:before {
  313.     content: '';
  314.     position: absolute;left:0;top:50%;
  315.     width:1.5rem;
  316.     height:1px;
  317.     background:var(--lighter-text);
  318. }
  319.  
  320. .character-image-details-wrapper {
  321.     display: flex;
  322.     flex-flow: row wrap;
  323.     justify-content: space-between;
  324.     margin-top: 4rem;
  325. }
  326.  
  327. /* pop up character image */
  328.  
  329. figure.character-image{
  330.     width:18rem;
  331.     height: 18rem;
  332.     border:12px solid var(--inner-background);
  333.     outline: 1px solid var(--borders);
  334. }
  335. img.character-image{
  336.     width: 100%;
  337.     height: 100%;
  338.     object-fit: cover;
  339. }
  340.  
  341. /* character details */
  342.  
  343. .character-details {
  344.     width: calc(100% - 20rem);
  345.     height:18rem;
  346.     padding: 1rem;
  347.     overflow:auto;
  348.     list-style: none;
  349. }
  350.  
  351. .character-details li{
  352.     margin-bottom:1.3rem
  353. }
  354.  
  355. .character-details li:before {
  356.     content: '\f111';
  357.     font-family: 'Font Awesome 5 Free';
  358.     font-weight: 900;
  359.     margin-right: 1rem;
  360.     font-size: .4rem;
  361.     border:3px solid var(--inner-background);
  362.     outline:1px solid var(--borders);
  363.     border-radius: 100%;
  364.     color:var(--icons);
  365.     vertical-align: middle;
  366. }
  367.  
  368. /* character about */
  369.  
  370. .character-about {
  371.     margin:3rem 2rem;
  372.     /* letter-spacing: .02rem; */
  373.     line-height: 145%;
  374. }
  375.  
  376. /* progress bars and stats */
  377.  
  378. .links-and-stats-wrapper {
  379.     display: flex;
  380.     flex-flow: row wrap;
  381.     justify-content:space-between;
  382. }
  383.  
  384. .nav-stats-divider {
  385.     width:1px;
  386.     background-color: var(--borders);
  387.     height:12rem
  388. }
  389.  
  390. /* character navigation */
  391.  
  392. .character-navigation {
  393.     width:49%;
  394.     flex-grow: 1;
  395.     height:12rem;
  396.     overflow: auto;
  397.     padding: 1rem;
  398. }
  399.  
  400. /* tags */
  401.  
  402. .character-tags {
  403.     margin-top: 1.5rem;
  404. }
  405. .character-tags li{
  406.     display: inline-block;
  407.     margin:1rem 1rem 1rem 0;
  408.     padding:.5rem;
  409.     border:1px solid #eee;
  410. }
  411.  
  412. /* links */
  413.  
  414. .character-links {
  415.     margin-bottom: 1.5rem;
  416. }
  417.  
  418. .character-links li{
  419.     margin:1rem 0;
  420.     border-bottom: 1px solid #eee;
  421.     padding-bottom: 1rem;
  422. }
  423.  
  424. .character-links li:before{
  425.     content: '\f111';
  426.     font-family: 'Font Awesome 5 Free';
  427.     font-weight: 900;
  428.     margin-right: 1rem;
  429.     font-size: .4rem;
  430.     border:2px solid var(--inner-background);
  431.     outline:1px solid var(--borders);
  432.     color: var(--icons);
  433.     border-radius: 100%;
  434.     font-style: normal;
  435. }
  436.  
  437. /* stats */
  438.  
  439. .stats-wrapper {
  440.     width:49%;
  441.     flex-grow: 1;
  442.     height:12rem;
  443.     overflow: auto;
  444.     list-style: none;
  445.     padding: 0 2rem;
  446. }
  447.  
  448. .stat-container {
  449.     margin: 2rem 0;
  450. }
  451.  
  452. .stats-name {
  453.     font:600 .9rem 'Montserrat', sans-serif;
  454.     text-transform: uppercase;
  455.     margin-bottom: 1rem;
  456. }
  457.  
  458. .stat-square {
  459.     border-radius: 100%;
  460.     width:1.1rem;
  461.     max-width: 10%;
  462.     background-color: #eee;
  463.     aspect-ratio: 1 / 1;
  464.     border:2px solid white;
  465.     display: inline-block;}
  466. .stat-fill-1 .stat-square:nth-of-type(1),
  467. .stat-fill-2 .stat-square:nth-of-type(-n+2),
  468. .stat-fill-3 .stat-square:nth-of-type(-n+3),
  469. .stat-fill-4 .stat-square:nth-of-type(-n+4),
  470. .stat-fill-5 .stat-square:nth-of-type(-n+5),
  471. .stat-fill-6 .stat-square:nth-of-type(-n+6),
  472. .stat-fill-7 .stat-square:nth-of-type(-n+7),
  473. .stat-fill-8 .stat-square:nth-of-type(-n+8),
  474. .stat-fill-9 .stat-square:nth-of-type(-n+9),
  475. .stat-fill-10 .stat-square:nth-of-type(-n+10)
  476. {background:var(--icons);}
  477.  
  478.  
  479. /* gallery */
  480.  
  481. .gallery {
  482.     margin-top:2rem;
  483.     display: flex;
  484.     flex-flow: row nowrap;
  485.     justify-content: space-between;
  486.  
  487. }
  488.  
  489. /* gallery images */
  490.  
  491. figure.gallery-image {
  492.     margin:1rem 2rem;
  493.     border:7px solid var(--inner-background);
  494.     outline:1px solid var(--borders);
  495.     aspect-ratio: 1 / 1;
  496.     width: 8rem;
  497. }
  498. img.gallery-image {
  499.     width: 100%;
  500.     object-fit: cover;
  501.     aspect-ratio: 1 / 1;
  502. }
  503.  
  504. /* music */
  505.  
  506. .music-section {
  507.     margin-top: 4rem;
  508.     padding:0 2rem 2rem;
  509. }
  510.  
  511. .music-section .song-image{
  512.     width:6rem;
  513.     height:6rem;
  514.     object-fit: cover;
  515.     border-radius: 100%;
  516.     margin-right: 2rem;
  517. }
  518.  
  519. .music-section div {margin:1rem 0}
  520.  
  521. .song-name {
  522.     font:700 1.2rem 'Montserrat', sans-serif;
  523.     text-transform: uppercase;
  524.     letter-spacing: .03rem;
  525. }
  526.  
  527. .song-name:after {
  528.     content: ' — ';
  529.     font-weight: 400;
  530.     color: var(--lighter-text);
  531. }
  532.  
  533. .song-artist {
  534.     text-transform: uppercase;
  535.     font:600 .9rem 'Montserrat', sans-serif;
  536.     letter-spacing: .04rem;
  537.     font-style: italic;
  538. }
  539.  
  540. .song-album {
  541.     font-size: .9rem;
  542.     color: var(--lighter-text);
  543.     font-style: italic;
  544.     letter-spacing: .03rem;
  545. }
  546.  
  547.  
  548. /* info wrapper */
  549.  
  550. #info-wrapper {  
  551.     list-style: none;
  552.     background-color: white;
  553.     padding: 1rem;
  554.     border: 1px solid #eee;
  555. }
  556.  
  557. #info-wrapper li {
  558.     margin:1.3rem;
  559.     display: inline-block;
  560.     color: var(--lighter-text);
  561.     font-style: italic;
  562.     letter-spacing: .04rem;
  563. }
  564.  
  565. #info-wrapper li:before {
  566.     content: '\f111';
  567.     font-family: 'Font Awesome 5 Free';
  568.     font-weight: 900;
  569.     margin-right: 1rem;
  570.     font-size: .4rem;
  571.     border:2px solid var(--inner-background);
  572.     outline:1px solid var(--borders);
  573.     color: var(--icons);
  574.     border-radius: 100%;
  575.     font-style: normal;
  576. }
  577.  
  578. .info-title {
  579.     font-weight: 600;
  580.     position: relative;
  581.     margin-right: 4rem;
  582.     color: var(--text);
  583.     font-style: normal;
  584.     letter-spacing: 0;
  585.     text-transform: uppercase;
  586. }
  587.  
  588. .info-title:after {
  589.     content: '';
  590.     position: absolute;right:-3rem;top:50%;
  591.     width:2rem;
  592.     height: 1px;
  593.     vertical-align: middle;
  594.     background-color: var(--borders);
  595. }
  596.  
  597. /* book content */
  598.  
  599. #book-content {
  600.     border: 1px solid var(--borders);
  601.     padding: 1rem 2rem;
  602.     background-color: var(--inner-background);
  603.     margin:2rem auto
  604. }
  605.  
  606. .chapter-divider {
  607.     width:80%;
  608.     max-width: 25rem;
  609.     margin:5rem auto
  610. }
  611.  
  612. /* book title */
  613.  
  614. #book-title {
  615.     font-size: 2.3rem;
  616.     text-align: center;
  617.     text-transform: uppercase;
  618.     font-family: 'Montserrat', sans-serif;
  619.     margin:3rem 0 0rem;
  620.     line-height: 175%;
  621.     font-weight: 600;
  622. }
  623.  
  624. #book-title span{
  625.     box-shadow: inset 0 -15px pink;
  626.     padding:0 .6rem 0
  627. }
  628.  
  629. /* author */
  630.  
  631. #author {
  632.     text-align: center;
  633.     font-style: italic;
  634.     letter-spacing: .04rem;
  635.     font-weight: 500;
  636. }
  637.  
  638. #author:before {
  639.     content:'— ';
  640. }
  641.  
  642. #author:after {
  643.     content:' —';
  644. }
  645.  
  646. /* book subtitle */
  647.  
  648. #book-subtitle {
  649.     text-align: center;
  650.     color:var(--lighter-text);
  651.     font-size: .9rem;
  652.     letter-spacing: .04rem;
  653.     margin-top: 2rem;
  654. }
  655.  
  656. /* book chapter  */
  657.  
  658. .book-chapter {
  659.     margin:7rem 0 5rem;
  660.     font-size:1.1rem;
  661.     letter-spacing:.03rem;
  662.     line-height:130%;
  663. }
  664.  
  665. /* chapter title  */
  666.  
  667. .chapter-title{    
  668.     text-align: center;
  669.     font-size: 1.3rem;
  670.     margin-bottom: 2rem;
  671.     font-family: 'Montserrat', sans-serif;
  672.     text-transform: uppercase;
  673.     letter-spacing: .04rem;
  674.     font-weight: 600;
  675. }
  676.  
  677. /* chapter subtitle */
  678.  
  679. .chapter-subtitle {
  680.     font-size: 1rem;
  681.     font-style: italic;
  682.     color:var(--lighter-text);
  683.     letter-spacing: .05rem;
  684.     margin:0 0 3rem;
  685. }
  686.  
  687.  
  688. /* faq */
  689.  
  690. #faq-wrapper {
  691.     width: 90vw;
  692.     max-width: 45rem;
  693.     margin:5rem auto;
  694.     background-color: var(--inner-background);
  695.     border: 1px solid var(--borders);
  696.     padding: 1rem 2rem;
  697.     line-height:130%;
  698. }
  699.  
  700. #faq-wrapper p {
  701.     margin:0;
  702.     padding:1rem 0
  703. }
  704.  
  705. .faq-divider {
  706.     width: 85%;
  707.     max-width: 25rem;
  708.     margin:3rem auto
  709. }
  710.  
  711. /* faq note */
  712.  
  713. #faq-note {
  714.     margin-bottom: 2rem;
  715. }
  716.  
  717. #faq-note li,#faq-note ul{list-style: none;margin:0;padding:0}
  718.  
  719. #faq-note li {margin:1rem}
  720.  
  721. #faq-note li:before {
  722.     vertical-align: middle;
  723.     font-family: 'Font Awesome 5 Free';
  724.     content:'\f111';
  725.     font-size: .4rem;
  726.     margin:0 1rem 0 0;
  727.     font-weight: 900;
  728.     color: var(--icons);
  729.     border: 2px solid var(--inner-background);
  730.     outline: 1px solid var(--borders);
  731.     border-radius: 100%;
  732. }
  733.  
  734. /* faq accordion */
  735.  
  736. /* faq question */
  737.  
  738. .ui-accordion-header {
  739.     margin-bottom: 1rem;
  740.     font-weight: 600;
  741.     font-size: 1.1rem;
  742.     cursor: pointer;
  743.     padding:1rem ;
  744.     border: 1px solid var(--borders);
  745.     background-color: var(--background);
  746. }
  747.  
  748. /* faq answer */
  749.  
  750. .ui-accordion-content {
  751.     padding:.5rem 1rem  3rem;
  752. }
  753.  
  754. .ui-accordion-content:last-of-type {
  755.     border:0
  756. }
  757.  
  758. #accordion .fa-envelope,#accordion .fa-share {
  759.     color: var(--icons);
  760.     font-size: 1.4rem;
  761.     font-weight: 900;
  762.     margin-right: 1rem;
  763. }
  764.  
  765. /* other */
  766.  
  767. #go-to-top {
  768.     position: fixed;right:2rem;bottom:4rem;
  769.     display: none;
  770.     font-size: 1.3rem;
  771. }
  772.  
  773. .responsive-divider {
  774.     display: none;
  775. }
  776.  
  777. /* MEDIA */
  778.  
  779. @media only screen and (min-width:0px) and (max-width:600px) {
  780.    
  781.     .responsive-divider {
  782.         display: block;
  783.     }
  784.  
  785.     .character-name {
  786.         margin-bottom: 1rem;
  787.     }
  788.  
  789.     .character-subtitle {
  790.         margin-bottom: 2rem;    
  791.     }
  792.  
  793.     figure.character-image{
  794.         width:18rem;
  795.         height: 18rem;
  796.         border:12px solid var(--inner-background);
  797.         outline: 1px solid var(--borders);
  798.         margin-bottom: 2rem;
  799.         margin-top:1rem;
  800.     }
  801.     img.character-image{
  802.         width: 100%;
  803.         height: 100%;
  804.         object-fit: cover;
  805.     }    
  806.    
  807.     .character-image-details-wrapper {
  808.         display: flex;
  809.         flex-flow: row wrap;
  810.         justify-content: space-between;
  811.         margin-top: 0rem;
  812.     }
  813.  
  814.     .character-details {
  815.         width: 100%;
  816.         height:100%;
  817.         padding: 1rem;
  818.         overflow:auto;
  819.         list-style: none;
  820.         margin-bottom: 0;
  821.     }
  822.  
  823.     .character-about {
  824.         margin:3rem 0 2rem;
  825.     }    
  826.        
  827.     .links-and-stats-wrapper {
  828.         display: block;
  829.     }
  830.  
  831.     .stats-wrapper {
  832.         width:100%;
  833.         flex-grow: 1;
  834.         height:100%;
  835.         overflow: auto;
  836.         list-style: none;
  837.         padding: 0 2rem;
  838.     }
  839.  
  840.     .nav-stats-divider {
  841.         display: none;
  842.     }
  843.  
  844.     .character-navigation {
  845.         width:100%;
  846.         flex-grow: 1;
  847.         height:100%;
  848.         overflow: auto;
  849.         padding: 1rem;
  850.     }
  851. }
  852.  
  853.  
  854. </style>
  855. </head>
  856. <body id="top">
  857.  
  858. <header id="topbar">
  859.  
  860.     <div id="topbar-inside">
  861.         <!-- topbar icon -->
  862.         <figure class="icon-image"><img src="topbar icon image url" alt="" class="icon-image"></figure>
  863.  
  864.         <!-- page title -->
  865.         <h1 id="page-title">{title}</h1>
  866.  
  867.         <!-- username -->
  868.         <h2 id="username">@{name}</h2>
  869.     </div>
  870.  
  871.     <!-- topbar navigation -->
  872.     <nav id="topbar-navigation">
  873.  
  874.         <!-- this link will scroll down to the faq section -->
  875.         <li><a class="anchor-link" href="#faq-wrapper">faq</a></li>
  876.        
  877.         <li><a href="">link</a></li>
  878.        
  879.         <li><a href="">link</a></li>
  880.        
  881.         <li><a href="">link</a></li>
  882.     </nav>
  883.  
  884. </header>
  885.  
  886. <main>
  887.  
  888.  
  889.  
  890.     <!-- main header image -->
  891.     <figure class="book-image"><img src="header image" alt="" class="book-image"/></figure>
  892.  
  893.     <!-- header icon -->
  894.     <img src="header icon image url" id="book-icon" align="right"/>
  895.  
  896.  
  897.  
  898.  
  899.     <!-- characters wrapper start -->
  900.     <section id="characters-wrapper">
  901.  
  902.  
  903.  
  904.        
  905.         <!-- character start -->
  906.  
  907.  
  908.  
  909.         <!-- character icon start -->
  910.         <figure class="character-icon" onClick="openPopup(this);">
  911.             <h3 class="icon-character-name">
  912.  
  913.                 <!-- character icon name -->
  914.                 character name
  915.             </h3>
  916.  
  917.             <!-- character icon image -->
  918.             <img src="character icon image" alt="" class="character-icon">
  919.         </figure>
  920.         <!-- character icon end -->
  921.  
  922.  
  923.  
  924.         <!-- character pop up start-->
  925.  
  926.         <div class="character-popup"><i onclick="closePopup();" class="fa-solid fa-xmark close-popup"></i><div class="character-wrapper">
  927.  
  928.             <!-- character pop up name -->
  929.             <h1 class="character-name">character name</h1>
  930.            
  931.             <!-- character pop up subtitle -->
  932.             <h2 class="character-subtitle">character subtitle</h2>
  933.  
  934.  
  935.             <!-- image and details start -->
  936.             <div class="character-image-details-wrapper">
  937.  
  938.                 <!-- character image -->
  939.                 <figure class="character-image"><img src="character image" alt="" class="character-image"></figure>
  940.  
  941.                 <!-- character details start -->
  942.                 <article class="character-details">
  943.  
  944.                     <li>item</li>
  945.                     <li>item</li>
  946.                     <li>item</li>
  947.                    
  948.                 </article>
  949.                 <!-- character details end -->
  950.  
  951.             </div>
  952.             <!-- image and details end -->
  953.  
  954.             <!-- show a divider in responsive layout -->
  955.             <hr class="responsive-divider">
  956.        
  957.            
  958.             <!-- character about start -->
  959.             <article class="character-about">
  960.                 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum porro harum impedit accusamus explicabo quas. Consequatur, magni minus! Sunt quam eum ea incidunt accusamus quia consequatur! Error architecto laudantium quas?</p>
  961.             </article>
  962.             <!-- character about end -->
  963.  
  964.  
  965.             <!-- links and stats wrapper start -->
  966.             <section class="links-and-stats-wrapper">
  967.  
  968.                 <!-- character links and tags start -->
  969.                 <article class="character-navigation">
  970.  
  971.                     <nav class="character-links">
  972.                         <!-- character links -->
  973.                         <li><a href="">link</a></li>
  974.                         <li><a href="">link</a></li>
  975.                         <li><a href="">link</a></li>
  976.                     </nav>
  977.  
  978.                    
  979.                     <nav class="character-tags">
  980.                         <!-- character tags -->
  981.                         <li><a href="">tag  </a></li>
  982.                         <li><a href="">tag</a></li>
  983.                         <li><a href="">tag</a></li>
  984.                     </nav>
  985.  
  986.                 </article>
  987.                 <!-- character links and tags end -->
  988.  
  989.  
  990.                 <!-- divider between the navigation and the stats -->
  991.                 <hr class="nav-stats-divider">
  992.  
  993.  
  994.                 <!-- stats start -->
  995.                 <article class="stats-wrapper">
  996.  
  997.                     <li class="stat-container">
  998.                         <!-- stat name -->
  999.                         <div class="stats-name">stat name 1</div>
  1000.  
  1001.                         <!-- change number of 'stat-fill-2' to fill the bar-->
  1002.                         <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>
  1003.                     </li>
  1004.  
  1005.                     <li class="stat-container">
  1006.                         <!-- stat name -->
  1007.                         <div class="stats-name">stat name 2</div>
  1008.  
  1009.                         <!-- change number of 'stat-fill-4' to fill the bar-->
  1010.                         <div class="stats-value stat-fill-4"><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>
  1011.                     </li>
  1012.  
  1013.                 </article>
  1014.                 <!-- stats end -->
  1015.        
  1016.  
  1017.             </section>
  1018.             <!-- progress bar and stats wrapper end -->
  1019.  
  1020.  
  1021.             <!-- gallery start -->
  1022.             <article class="gallery">
  1023.  
  1024.                 <figure class="gallery-image"><img src="gallery image url" alt="" class="gallery-image"></figure>
  1025.                
  1026.  
  1027.                 <figure class="gallery-image"><img src="gallery image url" alt="" class="gallery-image"></figure>
  1028.  
  1029.                 <figure class="gallery-image"><img src="gallery image url" alt="" class="gallery-image"></figure>
  1030.  
  1031.             </article>
  1032.             <!-- gallery end -->
  1033.  
  1034.             <!-- music section start -->
  1035.             <article class="music-section">
  1036.                 <!-- song image -->
  1037.                 <img class="song-image" src="music cover image url" align="left"></img>
  1038.  
  1039.                 <!-- song name -->
  1040.                 <span class="song-name">song name</span>
  1041.  
  1042.                 <!-- song artist -->
  1043.                 <div class="song-artist">artist</div>
  1044.  
  1045.                 <!-- song album -->
  1046.                 <div class="song-album">album</div>
  1047.             </article>
  1048.             <!-- music section end -->
  1049.  
  1050.         </div></div>
  1051.        
  1052.         <!-- character pop up end -->
  1053.  
  1054.  
  1055.  
  1056.         <!-- character end -->
  1057.        
  1058.  
  1059.  
  1060.        
  1061.         <!-- character start -->
  1062.  
  1063.  
  1064.  
  1065.         <!-- character icon start -->
  1066.         <figure class="character-icon" onClick="openPopup(this);">
  1067.             <h3 class="icon-character-name">
  1068.  
  1069.                 <!-- character icon name -->
  1070.                 character name
  1071.             </h3>
  1072.  
  1073.             <!-- character icon image -->
  1074.             <img src="character icon image" alt="" class="character-icon">
  1075.         </figure>
  1076.         <!-- character icon end -->
  1077.  
  1078.  
  1079.  
  1080.         <!-- character pop up start-->
  1081.  
  1082.         <div class="character-popup"><i onclick="closePopup();" class="fa-solid fa-xmark close-popup"></i><div class="character-wrapper">
  1083.  
  1084.             <!-- character pop up name -->
  1085.             <h1 class="character-name">character name</h1>
  1086.            
  1087.             <!-- character pop up subtitle -->
  1088.             <h2 class="character-subtitle">character subtitle</h2>
  1089.  
  1090.  
  1091.             <!-- image and details start -->
  1092.             <div class="character-image-details-wrapper">
  1093.  
  1094.                 <!-- character image -->
  1095.                 <figure class="character-image"><img src="character image" alt="" class="character-image"></figure>
  1096.  
  1097.                 <!-- character details start -->
  1098.                 <article class="character-details">
  1099.  
  1100.                     <li>item</li>
  1101.                     <li>item</li>
  1102.                     <li>item</li>
  1103.                    
  1104.                 </article>
  1105.                 <!-- character details end -->
  1106.  
  1107.             </div>
  1108.             <!-- image and details end -->
  1109.  
  1110.             <!-- show a divider in responsive layout -->
  1111.             <hr class="responsive-divider">
  1112.        
  1113.            
  1114.             <!-- character about start -->
  1115.             <article class="character-about">
  1116.                 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorum porro harum impedit accusamus explicabo quas. Consequatur, magni minus! Sunt quam eum ea incidunt accusamus quia consequatur! Error architecto laudantium quas?</p>
  1117.             </article>
  1118.             <!-- character about end -->
  1119.  
  1120.  
  1121.             <!-- links and stats wrapper start -->
  1122.             <section class="links-and-stats-wrapper">
  1123.  
  1124.                 <!-- character links and tags start -->
  1125.                 <article class="character-navigation">
  1126.  
  1127.                     <nav class="character-links">
  1128.                         <!-- character links -->
  1129.                         <li><a href="">link</a></li>
  1130.                         <li><a href="">link</a></li>
  1131.                         <li><a href="">link</a></li>
  1132.                     </nav>
  1133.  
  1134.                    
  1135.                     <nav class="character-tags">
  1136.                         <!-- character tags -->
  1137.                         <li><a href="">tag  </a></li>
  1138.                         <li><a href="">tag</a></li>
  1139.                         <li><a href="">tag</a></li>
  1140.                     </nav>
  1141.  
  1142.                 </article>
  1143.                 <!-- character links and tags end -->
  1144.  
  1145.  
  1146.                 <!-- divider between the navigation and the stats -->
  1147.                 <hr class="nav-stats-divider">
  1148.  
  1149.  
  1150.                 <!-- stats start -->
  1151.                 <article class="stats-wrapper">
  1152.  
  1153.                     <li class="stat-container">
  1154.                         <!-- stat name -->
  1155.                         <div class="stats-name">stat name 1</div>
  1156.  
  1157.                         <!-- change number of 'stat-fill-2' to fill the bar-->
  1158.                         <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>
  1159.                     </li>
  1160.  
  1161.                     <li class="stat-container">
  1162.                         <!-- stat name -->
  1163.                         <div class="stats-name">stat name 2</div>
  1164.  
  1165.                         <!-- change number of 'stat-fill-4' to fill the bar-->
  1166.                         <div class="stats-value stat-fill-4"><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>
  1167.                     </li>
  1168.  
  1169.                 </article>
  1170.                 <!-- stats end -->
  1171.        
  1172.  
  1173.             </section>
  1174.             <!-- progress bar and stats wrapper end -->
  1175.  
  1176.  
  1177.             <!-- gallery start -->
  1178.             <article class="gallery">
  1179.  
  1180.                 <figure class="gallery-image"><img src="gallery image url" alt="" class="gallery-image"></figure>
  1181.                
  1182.  
  1183.                 <figure class="gallery-image"><img src="gallery image url" alt="" class="gallery-image"></figure>
  1184.  
  1185.                 <figure class="gallery-image"><img src="gallery image url" alt="" class="gallery-image"></figure>
  1186.  
  1187.             </article>
  1188.             <!-- gallery end -->
  1189.  
  1190.             <!-- music section start -->
  1191.             <article class="music-section">
  1192.                 <!-- song image -->
  1193.                 <img class="song-image" src="music cover image url" align="left"></img>
  1194.  
  1195.                 <!-- song name -->
  1196.                 <span class="song-name">song name</span>
  1197.  
  1198.                 <!-- song artist -->
  1199.                 <div class="song-artist">artist</div>
  1200.  
  1201.                 <!-- song album -->
  1202.                 <div class="song-album">album</div>
  1203.             </article>
  1204.             <!-- music section end -->
  1205.  
  1206.         </div></div>
  1207.        
  1208.         <!-- character pop up end -->
  1209.  
  1210.  
  1211.  
  1212.         <!-- character end -->
  1213.        
  1214.  
  1215.  
  1216.    
  1217.  
  1218.  
  1219.     </section>
  1220.     <!-- characters wrapper end -->
  1221.  
  1222.  
  1223.  
  1224.  
  1225.     <div id="info-wrapper">
  1226.        
  1227.         <!-- book info -->
  1228.         <li><span class="info-title">title</span> value</li>
  1229.        
  1230.         <li><span class="info-title">title</span> value</li>
  1231.        
  1232.         <li><span class="info-title">title</span> value</li>
  1233.  
  1234.         <li><span class="info-title">title</span> value</li>
  1235.  
  1236.         <li><span class="info-title">triggers</span> violence, substance abuse, death, sex</li>
  1237.  
  1238.     </div>
  1239.  
  1240.  
  1241.  
  1242.  
  1243.     <!-- book start -->
  1244.     <section id="book-content">
  1245.  
  1246.         <!-- book title -->
  1247.         <h1 id="book-title"><span>book title</span></h1>
  1248.  
  1249.         <!-- book author -->
  1250.         <p id="author">author</p>
  1251.  
  1252.         <!-- book subtitle -->
  1253.         <div id="book-subtitle">
  1254.             <p>subtitle</p>
  1255.         </div>
  1256.  
  1257.         <!-- start book chapter -->
  1258.         <article class="book-chapter">
  1259.  
  1260.             <!-- chapter title -->
  1261.             <h1 class="chapter-title">chapter title 1</h1>
  1262.            
  1263.             <!-- chapter subtitle -->
  1264.             <div class="chapter-subtitle">
  1265.                 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo voluptatum nemo inventore veritatis.
  1266.                 </p>
  1267.             </div>
  1268.  
  1269.             <!-- book content -->
  1270.             <div class="chapter-content">
  1271.  
  1272.                 <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Debitis possimus quam beatae illum aspernatur, incidunt excepturi obcaecati quis officia ipsum, natus necessitatibus velit ab. Neque, beatae quis. Iste, ea eligendi!</p>
  1273.  
  1274.                 <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Debitis possimus quam beatae illum aspernatur, incidunt excepturi obcaecati quis officia ipsum, natus necessitatibus velit ab. Neque, beatae quis. Iste, ea eligendi!</p>
  1275.  
  1276.             </div>
  1277.  
  1278.         </article>
  1279.  
  1280.  
  1281.  
  1282.        
  1283.         <!-- line dividing chapters -->
  1284.         <hr class="chapter-divider">
  1285.  
  1286.  
  1287.  
  1288.  
  1289.         <article class="book-chapter">
  1290.  
  1291.             <!-- chapter title -->
  1292.             <h1 class="chapter-title">chapter title 2</h1>
  1293.            
  1294.             <!-- chapter subtitle -->
  1295.             <div class="chapter-subtitle">
  1296.                 <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo voluptatum nemo inventore veritatis.
  1297.                 </p>
  1298.             </div>
  1299.  
  1300.             <!-- book content -->
  1301.             <div class="chapter-content">
  1302.  
  1303.                 <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Debitis possimus quam beatae illum aspernatur, incidunt excepturi obcaecati quis officia ipsum, natus necessitatibus velit ab. Neque, beatae quis. Iste, ea eligendi!</p>
  1304.  
  1305.                 <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Debitis possimus quam beatae illum aspernatur, incidunt excepturi obcaecati quis officia ipsum, natus necessitatibus velit ab. Neque, beatae quis. Iste, ea eligendi!</p>
  1306.  
  1307.             </div>
  1308.  
  1309.         </article>
  1310.         <!-- end book chapter -->
  1311.  
  1312.  
  1313.  
  1314.     </section>
  1315.     <!-- book end -->
  1316.  
  1317. </main>
  1318.  
  1319. <!-- faq wrapper start -->
  1320. <section id="faq-wrapper">
  1321.  
  1322.     <!-- faq title -->
  1323.     <h2 id="faq-title">F.A.Q.</h2>
  1324.  
  1325.     <article id="faq-note">
  1326.         <!-- faq text -->
  1327.         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Porro, ipsam enim obcaecati nam, culpa tempora, exercitationem eum provident illo asperiores sequi ipsa quos nulla eos sunt dolore deleniti corrupti necessitatibus.</p>
  1328.  
  1329.         <ul>
  1330.             <li>item 1</li>
  1331.             <li>item 2</li>
  1332.             <li>item 3</li>
  1333.         </ul>
  1334.     </article>
  1335.  
  1336.     <hr class="faq-divider">
  1337.    
  1338.         <!-- start faq -->
  1339.  
  1340.     <div id="accordion">
  1341.     <!-- start faq questions & answers -->
  1342.    
  1343.     <!-- if you need to add paragraphs please use <br> instead of <p> -->
  1344.    
  1345.        
  1346.         <!-- question start -->
  1347.         <div class="ui-accordion-header">
  1348.         <i class="fa-solid fa-envelope"></i>
  1349.  
  1350.             question
  1351.            
  1352.         </div>
  1353.        
  1354.         <div class="ui-accordion-content">
  1355.         <i class="fa-solid fa-share"></i>
  1356.  
  1357.             answer
  1358.            
  1359.         </div>
  1360.         <!-- question end -->
  1361.        
  1362.        
  1363.  
  1364.         <!-- question start -->
  1365.         <div class="ui-accordion-header">
  1366.         <i class="fa-solid fa-envelope"></i>
  1367.  
  1368.             question
  1369.            
  1370.         </div>
  1371.        
  1372.         <div class="ui-accordion-content">
  1373.         <i class="fa-solid fa-share"></i>
  1374.  
  1375.             answer
  1376.            
  1377.         </div>
  1378.         <!-- question end -->
  1379.        
  1380.        
  1381.  
  1382.     </div>        <!-- #accordion -->
  1383.  
  1384.  
  1385. </section>
  1386. <!-- faq wrapper end -->
  1387.  
  1388.  
  1389. <footer>
  1390.  
  1391. <a href="#top" class="anchor-link" id="go-to-top"><i class="fa-solid fa-chevron-up"></i></a>
  1392.  
  1393. <!-- do not touch -->
  1394. <div style="position:fixed;bottom:2rem;right:2rem;z-index:999999999999999999999!important;font-size:.9rem;letter-spacing:.03rem;font-weight: 600;"><a href="https://southcodes.tumblr.com" title="coded by southcodes" target="_blank">SC</a></div>
  1395. </footer>
  1396.  
  1397. <!-- icons font -->
  1398. <script src="https://kit.fontawesome.com/0993e30c04.js" crossorigin="anonymous"></script>
  1399.  
  1400. <!-- jquery -->
  1401. <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
  1402.  
  1403. <!-- jquery ui accordion -->
  1404. <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  1405. <script>
  1406.  
  1407.    
  1408. $(document).ready(function(){
  1409.  
  1410.     // disable scroll when popup is open
  1411.     $("figure.character-icon").click(function(){
  1412.         $("body").css("overflow", "hidden");
  1413.     });
  1414.    
  1415.     $(".close-popup").click(function(){
  1416.         $("body").css("overflow", "auto");
  1417.     });
  1418.        
  1419.     // accordion faq
  1420.     $( function() {
  1421.         $( "#accordion" ).accordion({
  1422.         heightStyle: "content"
  1423.         });
  1424.     });
  1425.  
  1426.  
  1427.     // go to top button
  1428.         $(document).scroll(function() {
  1429.         var y = $(this).scrollTop();
  1430.         if (y > 500) {$('#go-to-top').fadeIn();}
  1431.         else {$('#go-to-top').fadeOut();}});
  1432.  
  1433.     // animated anchor links
  1434.         $('.anchor-link').click(function(){
  1435.         $('html, body').animate({
  1436.         scrollTop: $( $(this).attr('href') ).offset().top
  1437.         }, 450); return false;});
  1438.  
  1439.     });
  1440.  
  1441.  
  1442.     // pop ups
  1443.         function openPopup(elem) {
  1444.             $(elem).next().fadeIn(200);
  1445.             $(elem).next().siblings('.character-popup').hide();
  1446.         }
  1447.         function closePopup() {
  1448.             $('.character-popup').fadeOut(300);
  1449.         }
  1450. </script>
  1451. </body>
  1452. </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!