API tools faq
paste
southcodes

CHARACTER PAGE #2 ART IS THE WEAPON

southcodes
Sep 9th, 2020 (edited)
599
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 8.49 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.  
  3.     - character page #2 'art is the weapon' 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.  
  11.  -->
  12.  
  13. <!DOCTYPE html>
  14. <html>
  15. <head>
  16.     <title>{title}</title>
  17.  
  18.     <link rel="shortcut icon" href="{favicon}">
  19.     <meta name="description" content="{MetaDescription}"/>
  20.  
  21.     <!-- normalize css -->
  22.     <link href="https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel="stylesheet">
  23.  
  24.     <!-- fonts -->
  25.     <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600|Montserrat:500,600" rel="stylesheet">
  26.  
  27. <style type="text/css">
  28.  
  29. body, figure{margin: 0;padding: 0}
  30. html{font-size: 14px}
  31. body {font: 1rem 'Open Sans', sans-serif;
  32.     background: var(--background-color);}
  33. a {text-decoration: none;}
  34. b {font-weight: 600}
  35.  
  36. /*  quick color customization  */
  37.  
  38. :root {
  39.     --background-color:#fcfcfc;
  40.     --borders-and-accents-color:#eeeeee;
  41.     --containers-background:#ffffff;
  42. }
  43.  
  44. body {
  45.     color:#333   /*text color*/
  46. }
  47.  
  48. a {
  49.     color: #ccc;  /*links color*/
  50. }
  51.  
  52. a:hover {
  53.     color:#36608c;  /*links hover color*/
  54. }
  55.  
  56. .tmblr-iframe {margin:.7rem;opacity:.6;-ms-transform: scale(0.85); /* IE 9 */-webkit-transform: scale(0.85); /* Safari */transform: scale(0.85);}
  57. .tmblr-iframe:hover {opacity:.8;}
  58.  
  59. ::-webkit-scrollbar-thumb:vertical {border-left:2px solid var(--borders-and-accents-color);}
  60. ::-webkit-scrollbar {width:6px}
  61. ::-webkit-scrollbar-track-piece{margin:5px 0;}
  62.  
  63. /*  header  */
  64.  
  65. header,#navi {
  66.     background:var(--containers-background);
  67.     width:95%;
  68.     max-width:500px;
  69.     margin: 8rem auto 0;
  70.     box-sizing: border-box;
  71.     padding: 1rem;
  72.     border: 1px solid var(--borders-and-accents-color);
  73.     position: relative;}
  74.  
  75. #himg {
  76.     width: 5rem;
  77.     height: 5rem;
  78.     object-fit: cover;
  79.     border-radius: 100%;
  80.     position: absolute;
  81.     top:-2.5rem;left:-2.5rem;}
  82.  
  83. #btitle {
  84.     margin: 1rem 0 0;
  85.     font:600 1.8rem 'Montserrat', sans-serif;
  86.     text-transform: uppercase;
  87.     box-shadow: inset 0 -14px var(--borders-and-accents-color);
  88. }
  89.  
  90. #subtitle {
  91.     margin: .7rem  0 1.5rem;
  92.     letter-spacing: .05rem;
  93.     font:600 .9rem 'Open Sans', sans-serif;
  94.     line-height: 170%
  95. }
  96.  
  97. #desc {
  98.     font:400 .95rem 'Open Sans', sans-serif;
  99.     font-style: italic;
  100.     line-height: 180%;
  101.     letter-spacing: .05rem;
  102.     text-align: center;
  103.     color:#666;
  104. }
  105.  
  106. /*  nav  */
  107.  
  108. #navi ul,#navi li {list-style-type:none;margin:0;padding:0;}
  109. #navi li {display: inline-block;margin-right: 1rem;line-height: 250%}
  110. #navi {
  111.     margin: 1rem auto;
  112.     font:500 1.1rem 'Montserrat',sans-serif;
  113.     text-transform: uppercase;
  114. }
  115. #navi ul {
  116.     display: flex;
  117.     flex-flow: row wrap;
  118.     justify-content: space-around;}
  119. #navi a {
  120.     color:#000;
  121.     border-bottom: 4px solid var(--borders-and-accents-color);padding-bottom: .3rem
  122. }
  123.  
  124. /* characters */
  125.  
  126. .char {
  127.     width:95%;
  128.     max-width:500px;
  129.     margin:0rem auto 7rem;
  130.     border-top: 1px solid var(--borders-and-accents-color);
  131.     padding-top: 7rem;}
  132. .char:first-of-type {border:0;margin-top: 0}
  133. .char * {box-sizing:border-box;}
  134.  
  135. .charimg {
  136.     width:10rem;
  137.     height:10rem;
  138.     display:inline-block;
  139.     object-fit:cover;
  140.     vertical-align:middle;
  141.     border:12px solid var(--borders-and-accents-color);
  142.     padding:0;
  143.     margin:0 1rem  0 0;
  144.     background: var(--borders-and-accents-color)
  145. }
  146.  
  147.  
  148. .char .name {
  149.     font:500 1.2rem 'Montserrat', sans-serif;
  150.     margin:0;
  151.     display:inline-block;
  152.     vertical-align:middle;
  153.     width:calc(100% - 11.5rem);
  154. }
  155.  
  156. .char .name:first-letter {
  157.     font:600 1.3rem 'Montserrat', sans-serif;
  158.     padding:.2rem .5rem;
  159.     background:var(--borders-and-accents-color);
  160.     margin-right:.2rem;
  161. }
  162.  
  163. .asl {
  164.     margin-top: 2rem;
  165.     font:600 .9rem 'Open Sans',sans-serif;
  166.     letter-spacing: .07rem;
  167.     text-transform: uppercase;
  168. }
  169.  
  170.  
  171. .bio {
  172.     padding:1rem;
  173.     border:1px solid var(--borders-and-accents-color);
  174.     margin:1rem 0;
  175.     line-height: 180%;
  176.     letter-spacing: .04rem;
  177.     background: var(--containers-background)}
  178. .bio p {margin:1.5rem 0;}
  179. .bio p:first-of-type {margin-top: 0}
  180. .bio p:last-of-type {margin-bottom: 0}
  181.  
  182. .dtitle {
  183.     text-transform: uppercase;
  184.     font:600 .95rem 'Open Sans', sans-serif;
  185.     letter-spacing: .04rem;
  186.     border-bottom: 1px solid var(--borders-and-accents-color);
  187.     padding-bottom: .2rem;
  188.     margin-right: .5rem
  189. }
  190.  
  191. .bio hr {
  192.     border:0;
  193.     border-top: 1px solid var(--borders-and-accents-color);
  194.     margin:2rem 0;
  195. }
  196.  
  197. .gallery {
  198.     display:flex;
  199.     flex-flow: row nowrap;
  200.     justify-content: space-around;
  201.     background:var(--borders-and-accents-color);
  202. }
  203.  
  204. .quote {
  205.     padding: 1rem;
  206.     margin-top: 1rem;
  207.     background:var(--borders-and-accents-color);
  208.     font-size: .95rem;
  209.     letter-spacing: .04rem;
  210.     font-style: italic;
  211. }
  212.  
  213. .galimg {
  214.     width: calc(100% / 5 - 2rem);
  215.     margin:1rem .5rem;
  216.     height:100%}
  217. .galimg:first-of-type {margin-left: 1rem}
  218. .galimg:last-of-type {margin-right: 1rem}
  219.  
  220. .charlinks {
  221.     margin-top: 1rem;
  222.     border:1px solid var(--borders-and-accents-color);
  223.     padding: 1rem;
  224.     text-transform: uppercase;
  225.     font-size: .9rem;
  226.     letter-spacing: .05rem;
  227.     background: var(--containers-background);
  228.     line-height: 200%
  229. }
  230. .charlinks a {
  231.     margin-right: 1.6rem;
  232.     word-break:break-word
  233. }
  234.  
  235.  
  236. /* DONT TOUCH */
  237.  
  238. #sc {z-index:9999;position:fixed;bottom:1.5rem;right:2rem;line-height:0%;padding:1rem .5rem;font-size:.8rem;background:white;font-family:'Open Sans', sans-serif;color:#777;}
  239.  
  240. </style>    
  241. </head>
  242. <body>
  243.  
  244. <header>
  245.  
  246.     <img id="himg" src="HEADER IMAGE URL"/>
  247.    
  248.     <h1 id="btitle">
  249.         page title
  250.     </h1>
  251.  
  252.     <h2 id="subtitle">
  253.        
  254.         <!-- please wrap your paragraphs around <p></p> -->
  255.  
  256.         <p>page subtitle.</p>
  257.     </h2>
  258.  
  259.  
  260.     <div id="desc">
  261.         <!-- please wrap your paragraphs around <p></p> -->
  262.  
  263.         <p>page description.</p>
  264.     </div>
  265.  
  266.  
  267. </header>
  268.  
  269.  
  270.     <nav id="navi"><ul>
  271.         <li><a href="link url">link 1</a></li>
  272.         <li><a href="link url">link 2</a></li>
  273.         <li><a href="link url">link 3</a></li>
  274.     </ul></nav>
  275.  
  276. <main>
  277.  
  278.     <!-- CHARACTERS START  -->
  279.  
  280. <!-- character one -->
  281.  
  282. <section class="char">
  283.  
  284.     <img class="charimg" src="ICON IMAGE URL"/>
  285.    
  286.    
  287.     <h2 class="name">
  288.         NAME SURNAME
  289.  
  290.         <div class="asl">
  291.             ## | ##/## | ##
  292.         </div>
  293.     </h2>
  294.  
  295.  
  296.     <article class="bio">
  297.  
  298.         <div class="details">
  299.  
  300.             <!-- add as many as you want -->
  301.  
  302.             <p><span class="dtitle">field:</span> value</p>
  303.            
  304.             <p><span class="dtitle">field:</span> value</p>
  305.  
  306.         </div>
  307.  
  308.         <hr>   <!-- line division between biography and details -->
  309.  
  310.         <!-- biography start
  311.  
  312.          please wrap your paragraphs around <p></p> -->
  313.  
  314.          <p>Etiam nulla purus, tempor nec dui ac, condimentum feugiat orci. Duis egestas ultricies dictum. In eu semper mi. Vivamus sit amet nisl ipsum.</p>
  315.  
  316.          <p>Etiam nulla purus, tempor nec dui ac, condimentum feugiat orci. Duis egestas ultricies dictum. In eu semper mi. Vivamus sit amet nisl ipsum.</p>
  317.  
  318.         <article class="quote">
  319.            
  320.             <p>« Etiam nulla purus, tempor nec dui ac, condimentum feugiat orci. Duis egestas ultricies dictum. In eu semper mi. Vivamus sit amet nisl ipsum. »</p>
  321.  
  322.         </article>
  323.  
  324.     </article>
  325.  
  326.    
  327.    
  328.     <article class="gallery">
  329.  
  330.     <!-- gallery images
  331.  
  332.         add up to FIVE images all of the SAME HEIGHT -->
  333.  
  334.  
  335.         <img class="galimg" src="IMAGE URL"/>
  336.        
  337.         <img class="galimg" src="IMAGE URL"/>
  338.  
  339.         <img class="galimg" src="IMAGE URL"/>
  340.        
  341.         <img class="galimg" src="IMAGE URL"/>
  342.  
  343.         <img class="galimg" src="IMAGE URL"/>
  344.    
  345.     </article>
  346.    
  347.    
  348.    
  349.     <article class="charlinks">
  350.         <!-- character links, add as many as you want -->
  351.  
  352.         <a class="clink" href="#">#character tag</a>
  353.        
  354.         <a class="clink" href="#">#character tag</a>
  355.        
  356.         <a class="clink" href="#">#character tag</a>
  357.      
  358.  
  359.     </article>
  360.    
  361. </section> <!-- character end -->
  362.  
  363.  
  364.  
  365.  
  366.  
  367. </main>
  368.  
  369.  
  370.  
  371. <!-- DONT TOUCH -->
  372.  
  373.  <a id="sc" href="https://southcodes.tumblr.com" target="_blank" title="southcodes">SC</a>
  374.  
  375. </body>
  376. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!