API tools faq
paste
southcodes

is it over now? | characters page

southcodes
Dec 10th, 2023
2,289
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 14.61 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3.     - characters page 'is it over now?' 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://feathericons.com/
  11.     - carousel by https://yeolithm.com/carousel/tutorial
  12.  
  13.  -->
  14. <!DOCTYPE html>
  15. <html>
  16. <head>
  17.     <title>{title}</title>
  18.    
  19.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  20.  
  21.     <link rel="shortcut icon" href="{favicon}">
  22.     <meta name="description" content="{MetaDescription}"/>
  23.  
  24.     <!-- fonts -->
  25.     <link rel="preconnect" href="https://fonts.googleapis.com">
  26.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  27.     <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=Inconsolata:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
  28.    
  29.     <!-- normalize -->
  30.     <link href="https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel="stylesheet">
  31.    
  32. <style>
  33.  
  34. :root {
  35.     --outside-background: #f6f6f6;
  36.     --background:#ffffff;
  37.     --text:#333;
  38.     --links: #aaa;
  39.     --links-hover: #000;
  40.     --borders:#ddd;
  41.     --icons: #aaa;
  42. }
  43.  
  44. .tmblr-iframe {margin:.7rem;opacity:.6;-ms-transform: scale(0.85);-webkit-transform: scale(0.85); /* Safari */transform: scale(0.85);}
  45. .tmblr-iframe:hover {opacity:.8;}
  46.  
  47. ::-webkit-scrollbar-thumb:vertical {border-left:2px solid var(--borders);}
  48. ::-webkit-scrollbar {width:6px}
  49. ::-webkit-scrollbar-track-piece{margin:5px 0;}
  50.  
  51. pre {font-family:consolas;
  52.     white-space: pre-wrap;       /* css-3 */
  53.     white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  54.     white-space: -pre-wrap;      /* Opera 4- */
  55.     white-space: -o-pre-wrap;    /* Opera 7 */
  56.     word-wrap: break-word;}      /* Internet Explorer 5.5+ */
  57.  
  58. * {margin: 0;padding: 0; box-sizing: border-box;}
  59. p {margin:1rem 0}
  60. body, figure{margin:0;padding:0}
  61. html{font: 14px 'Karla', sans-serif;}
  62. body {font-size:14px;color:var(--text);background:var(--background);}
  63. a {text-decoration: none;color:var(--links);word-break:break-word;}
  64. a:hover {color:var(--links-hover);}
  65. blockquote {margin:0;padding:0;}
  66. img {max-width:100%;height: auto;display: block;margin:0}
  67. hr {border:0;border-top:1px solid var(--borders);margin:0;}
  68.  
  69. /* carousel global */
  70.  
  71. #book-button:checked ~ #carousel #panels {-webkit-transform: translateY(0);transform: translateY(0);}
  72. #characters-button:checked ~ #carousel #panels {    -webkit-transform: translateY(-100%);transform: translateY-100%);}
  73.  
  74. /* content */
  75.  
  76. #container {
  77.     display: flex;
  78.     height: 100vh;
  79. }
  80.  
  81. #carousel, #carousel-navigation {
  82.     flex: initial;
  83.     display: block;
  84. }
  85.  
  86. #carousel {
  87.     overflow: hidden;
  88.     width: 100%;
  89.     height: 100vh;
  90.     background-color: var(--outside-background);
  91. }
  92.  
  93. /* carousel navigation */
  94.  
  95. #carousel-navigation  {padding: 6rem 0rem 3rem 3rem;}
  96.  
  97. [class^="label_"] {
  98.     transition: .2s;
  99.     display: block;
  100.     cursor: pointer;
  101.     padding: .7rem .8rem;
  102.     border-radius: 5px;
  103.     margin-bottom: 3rem;
  104. }
  105.  
  106. [class^="label_"]:hover {background-color: var(--icons);}
  107.  
  108. #carousel-navigation .feather-icon {
  109.     width: 20px;
  110.     height: 20px;
  111.     opacity: 1;
  112.     color:var(--icons)
  113. }
  114.  
  115. #book-button:checked ~ #carousel-navigation .label_book,
  116. #characters-button:checked ~ #carousel-navigation .label_characters{background-color: var(--icons);}
  117.  
  118. #book-button:checked ~ #carousel-navigation .label_book .feather-icon,
  119. #characters-button:checked ~ #carousel-navigation .label_characters .feather-icon{color: var(--background);}
  120.  
  121. [class^="label_"]:hover .feather-icon{color: var(--background)!important;}
  122.  
  123. /* panels */
  124.  
  125. #panels {
  126.     position: relative;
  127.     width: 100%;
  128.     max-width: 65rem;
  129.     height: 100%;
  130.     transition: .3s;
  131. }
  132.  
  133. [class^="panel_"] {
  134.     overflow: auto;
  135.     position: relative;
  136.     width: inherit;
  137.     height: inherit;    
  138.     padding: 3rem;
  139.     background-color: var(--background);
  140. }
  141.  
  142. /* book panel */
  143.  
  144. /* book section */
  145.  
  146. /* book cover */
  147.  
  148. .book-cover {
  149.     width: 100%;
  150.     height: 20rem;
  151. }
  152.  
  153. img.book-cover {
  154.     width: 100%;
  155.     height: 100%;
  156.     object-fit: cover;
  157. }
  158.  
  159. /* page title */
  160.  
  161. #page-title {
  162.     font: 500 2rem 'Inconsolata', monospace;
  163.     text-align: center;
  164.     margin-top: 3rem;
  165. }
  166.  
  167. /* book summary */
  168.  
  169. #book-summary {
  170.     max-width: 50rem;
  171.     margin:3rem auto 0;
  172.     letter-spacing: .04rem;
  173.     line-height: 130%;
  174. }
  175.  
  176. /* divider dot */
  177.  
  178. #divider {
  179.     margin:5rem auto;
  180.     position: relative;
  181. }
  182.  
  183. #divider hr {
  184.     max-width: 80%;
  185.     width: 38rem;
  186.     position: absolute;
  187.     z-index: 0;
  188.     inset: 0;
  189.     margin: auto;
  190. }
  191.  
  192. #divider .feather-icon {
  193.     margin: auto;
  194.     color:var(--icons);
  195.     width: 45px;
  196.     height: 45px;
  197.     display: block;
  198.     z-index: 1;
  199.     position: relative;
  200.     background-color: var(--icons);
  201.     border:15px solid var(--background);
  202.     border-radius: 100%;
  203. }
  204.  
  205. /* author section */
  206.  
  207. figure.author-image {
  208.     width: 15rem;
  209.     height: 15rem;
  210.     float:left;
  211.     margin:0 2rem 1rem 0;
  212.     border:.7rem solid var(--background);
  213.     outline: 1px solid var(--borders);
  214. }
  215.  
  216. img.author-image {
  217.     width: 100%;
  218.     height: 100%;
  219.     object-fit: cover;
  220. }
  221.  
  222. /* author name */
  223.  
  224. #author-name {font: 500 2rem 'Inconsolata', monospace;}
  225. #author-name::first-letter {
  226.     color: var(--icons);
  227.     font-weight: 600;
  228. }
  229.  
  230. /* author about */
  231.  
  232. #author-about {
  233.     margin-top: 2rem;
  234.     letter-spacing: .03rem;
  235.     line-height: 110%;
  236.     max-width: 50rem;
  237. }
  238.  
  239. /* author links */
  240.  
  241. #author-links nav ul {
  242.     list-style: none;
  243.     margin-top: 2rem;
  244. }
  245.  
  246. #author-links nav ul li{
  247.     display: inline-block;
  248.     margin:.5rem  1.5rem .5rem 0;
  249.     padding: .3rem .5rem;
  250.     border: 1px solid var(--borders);
  251.     border-radius: 3px;
  252. }
  253.  
  254. /* sns */
  255.  
  256. #author-sns {margin-top: 2rem;}
  257.  
  258. #author-sns nav ul{list-style: none;}
  259.  
  260. #author-sns nav ul li{
  261.     margin:0 2rem 1rem 0;
  262.     display: inline-block;
  263. }
  264.  
  265. #author-sns .fa-brands {
  266.     color: var(--icons);
  267.     font-size: 1.5rem;
  268. }
  269.  
  270. /* characters panel */
  271.  
  272. .column-count {
  273.     column-gap: 1rem;
  274.     column-count: 2;
  275. }
  276.  
  277. .character {
  278.     width: 18rem;
  279.     break-inside: avoid;
  280.     margin-bottom: 10rem;
  281. }
  282.  
  283. .character-flex {
  284.     display: flex;
  285.     position: relative;
  286. }
  287.  
  288. /* character image */
  289.  
  290. figure.character-image {
  291.     width: 15rem;
  292.     height: 15rem;
  293.     flex-shrink: 0;
  294.     border: 10px solid transparent;
  295.     outline: 1px solid var(--borders);
  296.     margin-bottom: 1rem;
  297. }
  298.  
  299. img.character-image {
  300.     width: 100%;
  301.     height: 100%;
  302.     object-fit: cover;
  303. }
  304.  
  305. /* character palette */
  306.  
  307. .palette {
  308.     display: flex;
  309.     flex-direction: column;
  310.     justify-content: space-evenly;
  311.     align-items: flex-end;
  312.     height: 12rem;
  313.     width: 100%;
  314. }
  315.  
  316. .palette .palette-color {
  317.     width: 2rem;
  318.     height: 2rem;
  319. }
  320.  
  321. /* character faceclaim */
  322.  
  323. figure.faceclaim-image {
  324.     width: 5rem;
  325.     height: 5rem;
  326.     flex-shrink: 0;
  327.     position: absolute;
  328.     inset: auto 0 -1rem auto;
  329. }
  330.  
  331. img.faceclaim-image {
  332.     width: 100%;
  333.     height: 100%;
  334.     object-fit: cover;
  335.     border-radius: 5px;
  336. }
  337.  
  338. .faceclaim-name {
  339.     font:500 .8rem 'karla', sans-serif;
  340.     text-transform: uppercase;
  341.     margin-top: .5rem;
  342.     text-align: right;
  343.     background-color: var(--background);
  344.     padding: .5rem;
  345.     border-radius: 5px;
  346. }
  347.  
  348. /* character name */
  349.  
  350. .character-name {  
  351.     font:500 1.4rem 'karla', monospace;
  352.     margin:1rem 5rem 2rem 0
  353. }
  354.  
  355. /* character details */
  356.  
  357. .character-details {margin-right: 5rem;}
  358.  
  359. .character-details ul {list-style-position: inside;}
  360.  
  361. .character-details ul li {margin:.5rem 0}
  362. .character-details ul li::marker{color:var(--icons);}
  363.  
  364. /* character gallery */
  365.  
  366. .gallery {
  367.     display: flex;
  368.     justify-content: space-between;
  369. }
  370.  
  371. .gallery-image {
  372.     width: 5rem;
  373.     height: 5rem;
  374.     object-fit: cover;
  375. }
  376.  
  377. /* MEDIA */
  378.  
  379. @media only screen and (min-width:0px) and (max-width:789px) {
  380.    
  381.     figure.author-image {
  382.         width: 10rem;
  383.         height: 10rem;
  384.     }
  385.  
  386.     .column-count {column-count: 1;}
  387.  
  388.     .character {
  389.         display: block;
  390.         width: 22rem;
  391.     }
  392.        
  393.     figure.character-image {
  394.         width: 18rem;
  395.         height: 18rem;
  396.     }
  397.  
  398.     .palette {
  399.         height: 15rem;
  400.         width: 100%;
  401.     }
  402.  
  403.     .palette .palette-color {
  404.         width: 3rem;
  405.         height: 3rem;
  406.     }
  407.  
  408.  
  409. }
  410. </style>
  411.    
  412. </head>
  413. <body>
  414.  
  415. <div id="container">      
  416.  
  417. <!-- carousel inputs -->
  418. <input hidden type="radio" name="carousel-control" id="book-button" checked /><input hidden type="radio" name="carousel-control" id="characters-button"/>
  419.  
  420. <!-- carousel navigation -->
  421. <nav id="carousel-navigation">    
  422.  
  423.     <label for="book-button" title="book cover" class="label_book"><i class="feather-icon" data-feather="home"></i></label>        
  424.  
  425.     <label for="characters-button" title="characters" class="label_characters"><i class="feather-icon" data-feather="user"></i></label>
  426.  
  427. </nav>
  428. <!-- carousel navigation end -->              
  429.  
  430. <!-- main content -->
  431. <main id="carousel"><div id="panels">                
  432.  
  433.     <!-- book cover -->
  434.  
  435.     <section class="panel_book">
  436.  
  437.         <!-- book cover image -->
  438.         <figure class="book-cover"><img src="IMAGE URL" alt="" class="book-cover"></figure>
  439.  
  440.         <h1 id="page-title">
  441.             <!-- page title -->
  442.             title
  443.         </h1>
  444.  
  445.         <article id="book-summary">
  446.             <!-- book description. please wrap paragraphs between <p>paragraph</p> -->
  447.             <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum aut libero, eum perferendis voluptatum iusto asperiores porro repellat ullam suscipit, enim ducimus cumque ab laborum nostrum iure similique doloremque consequatur.</p>
  448.             <p>paragraph</p>
  449.         </article>
  450.  
  451.         <figure id="divider"><i class="feather-icon" data-feather="circle"></i><hr></figure>
  452.        
  453.         <!-- author image -->
  454.         <figure class="author-image"><img src="AUTHOR IMAGE URL" alt="" class="author-image"></figure>
  455.  
  456.         <h2 id="author-name">
  457.             <!-- author name -->
  458.             name
  459.         </h2>
  460.  
  461.         <article id="author-about">
  462.             <!-- about the author -->
  463.             <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, ipsa. Labore ratione tempore minima, ad dolorem harum qui, corrupti cupiditate tempora, alias deleniti atque eveniet debitis saepe ipsa soluta repudiandae.</p>
  464.         </article>
  465.  
  466.         <!-- book links -->
  467.         <article id="author-links"><nav><ul>
  468.             <!-- author links. add as many as you want -->
  469.             <li><a href="LINK URL">LINK NAME</a></li>
  470.             <li><a href="LINK URL">LINK NAME</a></li>
  471.             <li><a href="LINK URL">LINK NAME</a></li>
  472.         </ul></nav></article>
  473.  
  474.         <article id="author-sns"><nav><ul>
  475.             <!-- find more icons at https://fontawesome.com/search?o=r&m=free&f=brands -->
  476.             <li><a href="LINK"><i class="fa-brands fa-twitter"></i></a></li>
  477.             <li><a href="LINK"><i class="fa-brands fa-instagram"></i></a></li>
  478.             <li><a href="LINK"><i class="fa-brands fa-paypal"></i></a></li>
  479.         </ul></nav></article>
  480.  
  481.     </section>    
  482.  
  483.     <!-- characters -->
  484.    
  485.     <section class="panel_characters"><div class="column-count">
  486.  
  487.      <!-- to add more characters copy paste from 'character start' to 'character end' -->
  488.          
  489.         <!-- character start -->
  490.                
  491.         <article class="character"><div class="character-flex">
  492.  
  493.                 <figure class="character-image">
  494.                     <!-- character image -->
  495.                 <img class="character-image" src="CHARACTER IMAGE URL" alt=""></figure>
  496.  
  497.                 <article class="palette">
  498.                     <!-- change the word color for the color you want. dont add more than three colors -->
  499.                     <div class="palette-color" style="background-color: COLOR;"></div>
  500.                     <div class="palette-color" style="background-color: COLOR;"></div>
  501.                     <div class="palette-color" style="background-color: COLOR;"></div>
  502.                 </article>
  503.                
  504.                 <figure class="faceclaim-image">
  505.                     <!-- faceclaim image -->
  506.                     <img src="FACECLAIM IMAGE URL" alt="" class="faceclaim-image">
  507.                     <h4 class="faceclaim-name">
  508.                         FACECLAIM NAME
  509.                     </h4>
  510.                 </figure>
  511.  
  512.             </div><!-- flex end -->
  513.  
  514.             <h3 class="character-name">
  515.                 character name.
  516.             </h3>
  517.  
  518.             <article class="character-details"><ul>
  519.                 <li>detail</li>
  520.                 <li>detail</li>
  521.                 <li>detail</li>
  522.             </ul></article>
  523.  
  524.             <article class="character-bio">
  525.                 <!-- please wrap your paragraphs between <p></p> -->
  526.                 <p>character bio paragraph</p>
  527.                 <p>character bio paragraph</p>
  528.             </article>
  529.  
  530.             <article class="gallery">
  531.                 <!-- gallery images. dont add more than three -->
  532.                 <figure class="gallery-image"><img src="GALLERY IMAGE URL" alt="" class="gallery-image"></figure>
  533.                 <figure class="gallery-image"><img src="GALLERY IMAGE URL" alt="" class="gallery-image"></figure>
  534.                 <figure class="gallery-image"><img src="GALLERY IMAGE URL" alt="" class="gallery-image"></figure>
  535.             </article>
  536.        
  537.         </article>
  538.        
  539.         <!-- character end -->
  540.            
  541.  
  542.  
  543.            
  544.            
  545.     </div><!-- column count --></section> <!-- panel_characters -->
  546.  
  547. </div> <!-- panels --></main> <!-- carousel -->
  548.  
  549. </div> <!-- container -->
  550.  
  551. <!-- do not touch -->
  552. <div style="position:fixed;bottom:2rem;left:4rem;z-index:999999999999999999999!important;font-size:.7rem;letter-spacing:.03rem;"><a style="color: var(--icons);" href="https://southcodes.tumblr.com" title="coded by southcodes" target="_blank">SC</a></div>
  553.  
  554. <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
  555.  
  556. <!-- icons font -->
  557. <script src="https://unpkg.com/feather-icons/dist/feather.min.js" crossorigin="anonymous"></script>
  558.  
  559. <!-- icons font -->
  560. <script src="https://kit.fontawesome.com/0993e30c04.js" crossorigin="anonymous"></script>
  561.  
  562. <script>
  563.     feather.replace();
  564. </script>
  565. </body>
  566. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!