API tools faq
paste
southcodes

roll deep | commissions page

southcodes
Dec 27th, 2023 (edited)
713
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 25.93 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.    
  3.     - commissions page 'roll deep' 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://cappuccicons.com/ and http://fontawesome.io/icons/
  11.  
  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=Raleway:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&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.     <!-- font icons -->
  33.     <link href="https://icons.cappuccicons.com/cpf.css" rel="stylesheet">
  34.    
  35. <style>
  36. :root {
  37.     --background:#fafafa;
  38.     --boxes-background: #fff;
  39.     --text:#333;
  40.     --links: #a48cdb;
  41.     --links-hover: #89368c;
  42.     --accents: rgb(204, 173, 230);
  43.     --icons: #7b368c;
  44.     --borders:#eee;
  45.   }
  46.  
  47. * {
  48.     margin: 0;
  49.     padding: 0;
  50.     box-sizing: border-box;
  51. }
  52.  
  53. .tmblr-iframe {display:none!important;}
  54.  
  55. ::-webkit-scrollbar-thumb:vertical {border-left:2px solid var(--accents);}
  56. ::-webkit-scrollbar {width:6px}
  57. ::-webkit-scrollbar-track-piece{margin:5px 0;}
  58.  
  59. pre {font-family:consolas;
  60.     white-space: pre-wrap;       /* css-3 */
  61.     white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  62.     white-space: -pre-wrap;      /* Opera 4- */
  63.     white-space: -o-pre-wrap;    /* Opera 7 */
  64.     word-wrap: break-word;}      /* Internet Explorer 5.5+ */
  65.  
  66. body, figure{margin:0;padding:0}
  67. html{font: 14px 'Karla', sans-serif;}
  68. body {font-size:14px;color:var(--text);background:var(--background);}
  69. a {text-decoration: none;color:var(--links);word-break:break-word;}
  70. a:hover {color:var(--links-hover);}
  71. blockquote {margin:0;padding:0;}
  72. img {max-width:100%;height: auto;display: block;margin:0}
  73. hr {border:0;border-top:1px solid var(--borders);margin:0;}
  74. p {margin:1rem 0;line-height: 160%;}
  75. h2 {font-size: 1.7rem;margin:0 0 2rem;display: flex;align-items: center;text-transform: capitalize;line-height: 170%;}
  76. h3 {font-size: 1.5rem;margin:1.5rem 0}
  77. ol,ul {margin:2rem 0}
  78. li {margin:.5rem 0 .5rem 3rem;padding-left:1rem}
  79. li::marker {
  80.     font-size: 1.1rem;
  81.     color:var(--accents);
  82.     font-weight: 900;
  83. }
  84.  
  85. ol li {
  86.     list-style: decimal-leading-zero;}
  87.  
  88. /* top bar */
  89.  
  90. #topbar {
  91.     position: fixed;left:0;right:0;top:0;
  92.     z-index: 9;
  93.     border-bottom: 1px solid var(--borders);
  94.     padding:0rem 2rem;
  95.     display: flex;
  96.     justify-content: space-between;
  97.     align-items: center;
  98.     background-color: var(--boxes-background);
  99. }
  100.  
  101. #topbar h2 {
  102.     text-transform: uppercase;
  103.     font-size: 1rem;
  104.     font-weight: 600;
  105.     letter-spacing: .03rem;
  106.     color:var(--accents);
  107.     margin-top: 2rem;
  108. }
  109.  
  110. /* top bar image */
  111.  
  112. figure.topbar-image {
  113.     width:3rem;
  114.     height:3rem;
  115. }
  116.  
  117. img.topbar-image {
  118.     width: 100%;
  119.     height: 100%;
  120.     object-fit: cover;
  121.     border-radius: 100%;
  122. }
  123.  
  124. /* top bar navigation */
  125.  
  126. #page-navigation li{
  127.     margin:0 1.5rem;
  128.     display: inline-block;
  129. }
  130.  
  131. #page-navigation i {
  132.     font-size: 1.2rem;
  133.     color: var(--icons);
  134. }
  135.  
  136. /* main content */
  137.  
  138. #wrapper {
  139.     width: calc(100% - 17rem);
  140.     margin:3rem 0 7rem 17rem;
  141.     padding-top: 8rem;
  142. }
  143.  
  144. #wrapper h2:before {
  145.     content: '\f111';
  146.     font-family: 'font awesome 5 free';
  147.     font-weight: 900;
  148.     color: var(--icons);
  149.     margin-right: 1rem;
  150.     font-size: .7rem;
  151. }
  152.  
  153. main, header {
  154.     width:90%;
  155.     max-width: 40rem;
  156.     margin:auto;
  157. }    
  158.  
  159. #contact,#terms,#cancel,#faq {
  160.     background-color: var(--boxes-background);
  161.     border:1px solid var(--borders);
  162.     padding: 2rem 2rem 3rem;
  163. }
  164.  
  165.  
  166. /* header */
  167.  
  168. #upper-header{
  169.     background-color: var(--boxes-background);
  170.     padding: 2rem;
  171.     border: 1px solid var(--borders);
  172. }
  173.  
  174. #page-title {
  175.     font: 700 1.8rem 'Raleway', sans-serif;
  176.     text-transform: uppercase;
  177.     text-align: center;
  178.     margin:2rem 0;
  179.     letter-spacing: .06rem;
  180. }
  181.  
  182. #page-title a {
  183.     color:var(--text);
  184. }
  185.  
  186. #page-title::first-letter {
  187.     color: var(--accents);
  188.     font-size: 2.5rem;
  189. }
  190.  
  191. #about {
  192.     text-align: justify;
  193.     margin-top: 3rem;
  194. }
  195.  
  196. #page-links {
  197.     margin-top: 3rem;
  198. }
  199.  
  200. #page-links nav ul {
  201.     display: flex;
  202.     justify-content: space-around;
  203.     flex-wrap: wrap;
  204. }
  205.  
  206. #page-links nav ul li {
  207.     padding: 7px;
  208.     border:1px solid #eee;
  209.     margin:1rem;
  210.     border-radius: 4px;
  211.     list-style: none;
  212. }
  213.  
  214.  
  215. #page-links nav ul li:hover {
  216.     background-color: var(--accents);
  217. }
  218.  
  219. /* contact */
  220.  
  221. #contact {
  222.     padding:3rem
  223. }
  224.  
  225. #contact h2 {
  226.     margin:0 0 3rem;
  227. }
  228.  
  229. #socials{
  230.     display: flex;
  231.     justify-content: space-around;
  232.     margin-top: 4rem;list-style: none;
  233.     text-align: center;
  234. }
  235.  
  236. #socials li{
  237.     padding:0;margin:0
  238. }
  239.  
  240. #contact #socials .cp {
  241.     padding: 10px;
  242.     background-color: var(--boxes-background);
  243.     font-size: 1.5rem;
  244.     border-radius: 100%;
  245.     border:1px solid var(--borders);
  246. }
  247.  
  248. /* contact buttons */
  249.  
  250. #contact-buttons {
  251.     margin: 3rem 0 0;
  252.     list-style: none;
  253.     text-align: center;
  254.     display: flex;
  255.     justify-content: space-around;
  256.     flex-wrap: wrap;
  257. }
  258.  
  259. #contact-buttons li {
  260.     padding:0;margin:0
  261. }
  262.  
  263. #contact-buttons li{    
  264.     background-color: var(--accents);
  265.     border:0;
  266.     padding:1rem;
  267.     margin:1rem 0 0;
  268.     border-radius: 4px;  
  269.     display: flex;
  270.     align-items: center;
  271.     text-transform: uppercase;
  272.     letter-spacing: .03rem;
  273.     font: 600 1rem 'Karla', sans-serif;
  274. }
  275.  
  276. #contact-buttons a{
  277.     color: var(--text);
  278. }
  279.  
  280. #contact-buttons i{
  281.     margin-right: 1rem;
  282. }
  283.  
  284. /* sidebar */
  285.  
  286. aside {
  287.     position:fixed;top:0;left:0;bottom:0;
  288.     background-color: var(--boxes-background);
  289.     border:1px solid var(--borders);
  290.     overflow: auto;
  291.     width: 17rem;
  292.     padding:7rem 2rem 4rem;
  293.     text-align: right;
  294.     font-family: 'raleway', sans-serif;
  295.     text-transform: uppercase;
  296.     font-weight: 600;
  297.     font-size: .9rem;
  298.     letter-spacing: .05rem;
  299. }
  300.  
  301. aside hr {
  302.     margin:3rem 0  
  303. }
  304.  
  305. aside #toggles {
  306.     margin-bottom: 3rem;
  307. }
  308.  
  309. aside #slots-open .slots-taken{
  310.     color:#aaa;
  311.     margin-left: 1rem;
  312.     font-size: 1rem;
  313. }
  314.  
  315. aside #slots-open .slots-total{
  316.     font-size: 1.2rem;
  317.     color:var(--accents)
  318. }
  319.  
  320. #aside-nav li{
  321.     font-weight: 800;
  322.     letter-spacing: .07rem;
  323. }
  324.  
  325. aside li {
  326.     display: flex;
  327.     align-items: center;
  328.     justify-content: flex-end;
  329.     margin:2rem 0
  330. }
  331.  
  332. aside i {
  333.     font-size: 1.4rem;
  334. }
  335.  
  336. aside .fa-toggle-on{
  337.     color: var(--icons);
  338.     margin-left:1rem
  339. }
  340.  
  341. aside .fa-toggle-off{
  342.     color: #aaa;
  343.     margin-left:1rem
  344. }
  345.  
  346. aside nav li {
  347.     margin:2rem 0;
  348.     font-size: .9rem;
  349. }
  350.  
  351. /* terms */
  352.  
  353. #terms .terms-list,#terms .terms-list {
  354.     margin:3rem 0
  355. }
  356.  
  357. #terms .terms-list li::marker {
  358.     font-size: 1.1rem;
  359.     color:var(--accents);
  360.     font-weight: 900;
  361. }
  362.  
  363. #terms ol.terms-list li{
  364.     list-style: decimal-leading-zero;
  365.     margin:1rem 0 1rem 2rem;
  366.     padding-left: 1rem;
  367. }
  368.  
  369. #terms ul.terms-list li{
  370.     margin:1rem 0 1rem 2rem;
  371.     list-style: disc;
  372. }
  373.  
  374. #terms .terms-list li::marker {
  375.     font-size: 1.1rem;
  376.     color:var(--accents);
  377. }
  378.  
  379. /* how to */
  380.  
  381. #how-to {
  382.     background-color: var(--boxes-background);
  383.     border:1px solid var(--borders);
  384.     padding: 2rem;
  385. }
  386.  
  387. #how-to ol li {
  388.     list-style: decimal-leading-zero;
  389.     margin:1rem 0 1rem 2rem;
  390.     padding-left: 1rem;
  391. }
  392.  
  393. #how-to ol {
  394.     margin-top: 2rem;
  395. }
  396.  
  397. #how-to ol li::marker{
  398.     font-size: 1.1rem;
  399.     color:var(--accents);
  400.     font-weight: 900;
  401. }
  402.  
  403. /* do's and don'ts */
  404.  
  405. #do-donts {
  406.     column-count: 2;
  407.     column-gap:1rem;
  408.     margin:4rem 0 2rem;
  409.     text-align: center;
  410. }
  411.  
  412. #do-donts li {
  413.     margin:0rem 0 2rem;
  414.     list-style: none;
  415. }
  416.  
  417. #do-donts li:last-of-type {
  418.     margin-bottom: 0;
  419. }
  420.  
  421. #do-donts ul,#do-donts ol{
  422.     margin:0
  423. }
  424.  
  425. .dos li:before{
  426.     content: '\f058';
  427.     font-family: 'font awesome 5 free';
  428.     color:green;
  429.     font-weight: 900;
  430.     margin-right: 1rem;
  431.    
  432. }
  433.  
  434. .donts li:before{
  435.     content: '\f057';
  436.     font-weight: 900;
  437.     font-family: 'font awesome 5 free';
  438.     color:red;
  439.     margin-right: 1rem;
  440. }
  441.  
  442.  
  443. /* prices */
  444.  
  445. #prices {
  446.     column-count: 2;
  447.     column-gap: 2rem;
  448.     padding:0
  449. }
  450.  
  451. .example {
  452.     break-inside: avoid;
  453.     padding:0;  
  454.     border: 1px solid var(--borders);
  455.     background-color: var(--boxes-background);
  456.     margin-bottom:3rem
  457. }
  458.  
  459. .example-image {
  460.     width: 100%;
  461. }
  462.  
  463. .example-info h3 {
  464.     margin: 0;
  465.     font:800 1.4rem 'Karla', sans-serif;
  466.     text-transform: uppercase;
  467.     line-height: 150%;
  468.     padding: 1.2rem 1rem;
  469.     text-align: center ;
  470.     letter-spacing: .04rem;
  471.  
  472.     background-color: var(--accents);
  473. }
  474.  
  475. .example-price {
  476.     padding: 1rem;
  477.     text-align: center ;
  478.     font-size: 1.5rem;
  479.     font-weight: 800;
  480.     text-shadow:
  481.     1px 1px 0 var(--accents), 0px 1px 1px var(--accents),
  482.     2px 1px 1px var(--accents), 1px 2px 1px var(--accents),
  483.     3px 2px 1px var(--accents), 2px 3px 1px var(--accents)
  484. }
  485.  
  486. .example-type-info {
  487.     padding: 1rem;
  488.     border-top: 1px solid var(--borders);
  489.     font-size: 1.1rem;
  490. }
  491.  
  492. /* faq */
  493.  
  494. #faq {
  495.     margin:0 0 5rem
  496. }
  497.  
  498. .faq-line {
  499.     margin:3.5rem 0
  500. }
  501.  
  502. .faq-line:last-of-type {margin-bottom: 0;}
  503.  
  504. .faq-question {
  505.     background-color: var(--accents);
  506.     padding:1rem;
  507.     font-weight: 600;
  508.     font-size: 1.1rem;
  509. }
  510.  
  511. .faq-answer {
  512.     background-color: var(--background);
  513.     padding:2rem;
  514.     border:1px solid var(--accents)
  515. }
  516.  
  517. /* other */
  518.  
  519. #ask_form {
  520.     margin-top:3rem;
  521. }
  522.  
  523.  
  524. #to-top {
  525.     display:none;
  526.     position:fixed; bottom:5rem;right:2rem;
  527.     font-size: 1.5rem;
  528. }
  529.  
  530. /* footer */
  531.  
  532. #last-update {
  533.     position: fixed;left:0;right:0;bottom:0;
  534.     background-color: var(--accents);
  535.     padding:  1rem 2rem;
  536.     text-transform: uppercase;
  537.     font-family: 'Raleway', sans-serif;
  538.     font-weight: 700;
  539.     letter-spacing: .04rem;
  540.     font-size: .8rem;
  541. }
  542.  
  543. /* MEDIA */
  544.  
  545. @media only screen and (min-width:0px) and (max-width:670px) {
  546.  
  547.    
  548.     #wrapper {
  549.         width: calc(100%);
  550.         margin:3rem 0 7rem 0;
  551.     }
  552.  
  553.     aside {
  554.         position:static;
  555.         width: 100%;
  556.         margin-top: 9rem;
  557.         padding-top:0 ;
  558.     }
  559.    
  560.     aside li {
  561.         justify-content: normal;
  562.     }
  563.        
  564.     #aside-nav ul {
  565.         display: flex;
  566.         align-items: center ;
  567.         justify-content: center;
  568.         flex-flow: row;
  569.         flex-wrap: wrap;
  570.         margin:0;
  571.         text-align: center;
  572.         /* line-height: 300%; */
  573.     }
  574.    
  575.     #aside-nav ul li{
  576.         padding: 0;margin: 1rem 0;
  577.         display: inline-block;
  578.     }
  579.    
  580.     #aside-nav ul li:after{
  581.         content: '\f111';
  582.         font-family: 'font awesome 5 free';
  583.         font-weight: 900;
  584.         color: var(--icons);
  585.         padding:3px ;
  586.         margin:0 1rem;
  587.         font-size: .5rem;
  588.         vertical-align: middle;
  589.         border-radius: 100%;
  590.         border: 1px solid var(--borders);
  591.     }
  592.  
  593.    
  594.     #aside-nav ul li:last-of-type:after{
  595.         display: none;
  596.     }
  597.  
  598.    
  599.     #prices {
  600.         column-count: 1;
  601.         column-gap: 0;
  602.         padding:0
  603.     }
  604.  
  605. }
  606. </style>
  607.    
  608. </head>
  609. <body id="top">
  610.  
  611.     <!-- top bar -->
  612.  
  613. <section id="topbar">
  614.  
  615.     <!-- icon image -->
  616.  
  617.     <figure class="topbar-image"><img src="ICON IMAGE URL" alt="" class="topbar-image"></figure>
  618.    
  619.     <!-- topbar page title -->
  620.     <h2><a href="/">roll deep</a></h2>
  621.  
  622.     <!-- tumblr navigation -->
  623.     <nav id="page-navigation"><ul>
  624.  
  625.         <li><a target="_blank" href="https://www.tumblr.com/follow/{name}"><i class="fa-solid fa-plus"></i></a></li>
  626.        
  627.         {block:AskEnabled}<li><a target="_blank" href="/ask"><i class="fa-solid fa-envelope"></i></a></li>{/block:AskEnabled}
  628.        
  629.         <li><a target="_blank" href="https://www.tumblr.com/dashboard"><i class="fa-brands fa-tumblr"></i></a></li>
  630.     </ul></nav>
  631.  
  632. </section>
  633.  
  634.  
  635.  
  636. <section id="wrapper">
  637.    
  638.  
  639. <header>
  640.  
  641.     <section id="upper-header">
  642.  
  643.         <!-- page title -->
  644.  
  645.         <h1 id="page-title"><a href="/">page title</a></h1>  
  646.  
  647.         <!-- page about -->
  648.         <article id="about">
  649.             <p>about text</p>
  650.         </article>
  651.  
  652.         <article id="page-links">
  653.  
  654.             <!-- page links -->
  655.             <nav><ul>
  656.                 <li><a href="URL">link name</a></li>
  657.                 <li><a href="URL">link name</a></li>
  658.                 <li><a href="URL">link name</a></li>
  659.                 <li><a href="URL">link name</a></li>
  660.                 <li><a href="URL">link name</a></li>
  661.             </ul></nav>
  662.         </article>
  663.        
  664.     </section>
  665.  
  666.    
  667. <aside>
  668.  
  669.     <!-- sidebar/header open/closed toggles -->
  670.    
  671.     <article id="toggles">
  672.  
  673.         <!-- inbox closed/open -->
  674.  
  675.         <li>
  676.             inbox
  677.            
  678.             <!-- CHANGE CODE BELOW ACCORDINGLY:
  679.                
  680.                 IF INBOX CLOSED:
  681.                
  682.                 <i class="fa-solid fa-toggle-off"></i>
  683.            
  684.                 IF INBOX OPEN:
  685.                
  686.                 <i class="fa-solid fa-toggle-on"></i>
  687.            
  688.             -->
  689.  
  690.             <i class="fa-solid fa-toggle-on"></i>
  691.  
  692.         </li>
  693.        
  694.         <!-- slots -->
  695.  
  696.         <li>
  697.             slots
  698.  
  699.         <span id="slots-open">
  700.            
  701.             <!-- slots taken -->
  702.             <span class="slots-taken">0</span>
  703.            
  704.             <!-- total of slots -->
  705.             <span class="slots-total">/8</span>
  706.  
  707.         </span>
  708.  
  709.             <!-- CHANGE CODE BELOW ACCORDINGLY:
  710.                
  711.                 IF SLOTS CLOSED:
  712.                
  713.                 <i class="fa-solid fa-toggle-off"></i>
  714.            
  715.                 IF SLOTS OPEN:
  716.                
  717.                 <i class="fa-solid fa-toggle-on"></i>
  718.            
  719.             -->
  720.  
  721.             <i class="fa-solid fa-toggle-off"></i>
  722.  
  723.    
  724.         </li>
  725.  
  726.         <!-- commissions open/closed -->
  727.         <li>
  728.             commissions
  729.  
  730.           <!-- CHANGE CODE BELOW ACCORDINGLY:
  731.                
  732.                 IF COMMISSIONS CLOSED:
  733.                
  734.                 <i class="fa-solid fa-toggle-off"></i>
  735.            
  736.                 IF COMMISSIONS OPEN:
  737.                
  738.                 <i class="fa-solid fa-toggle-on"></i>
  739.            
  740.             -->
  741.  
  742.             <i class="fa-solid fa-toggle-off"></i>
  743.  
  744.         </li>
  745.        
  746.         <!-- requests open/closed -->
  747.         <li>
  748.  
  749.             requests
  750.  
  751.               <!-- CHANGE CODE BELOW ACCORDINGLY:
  752.                
  753.                 IF REQUESTS CLOSED:
  754.                
  755.                 <i class="fa-solid fa-toggle-off"></i>
  756.            
  757.                 IF REQUESTS OPEN:
  758.                
  759.                 <i class="fa-solid fa-toggle-on"></i>
  760.            
  761.             -->
  762.  
  763.             <i class="fa-solid fa-toggle-off"></i>
  764.  
  765.         </li>
  766.  
  767.     </article>
  768.  
  769.     <hr>
  770.  
  771.     <!-- anchor links navigation within page -->
  772.  
  773.     <nav id="aside-nav"><ul>
  774.  
  775.         <li><a class="anchor-link" href="#wrapper">header</a></li>
  776.        
  777.         <li><a class="anchor-link" href="#contact-anchor">contact</a></li>
  778.        
  779.         <li><a class="anchor-link" href="#terms-anchor">terms</a></li>
  780.        
  781.         <li><a class="anchor-link" href="#prices-anchor">prices</a></li>
  782.        
  783.         <li><a class="anchor-link" href="#how-to-anchor">how to commission</a></li>
  784.        
  785.         <li><a class="anchor-link" href="#cancel-anchor">cancellation</a></li>
  786.        
  787.         <li><a class="anchor-link" href="#faq-anchor">faq</a></li>
  788.  
  789.     </ul></nav>
  790.  
  791. </aside>
  792.  
  793. <!-- contact section -->
  794.  
  795.    
  796.     <div id="contact-anchor" style="height: 9rem;"></div>
  797.     <section id="contact">
  798.  
  799.         <!-- contact section title -->
  800.  
  801.         <h2>Contact</h2>
  802.        
  803.  
  804.         <!-- social links
  805.        
  806.             find more icons at https://cappuccicons.com/
  807.  
  808.         -->
  809.  
  810.     <ul id="socials">
  811.         <li><a href=""><i class="cp cp-twitter"></i></a></li>
  812.         <li><a href=""><i class="cp cp-instagram"></i></a></li>
  813.         <li><a href=""><i class="cp cp-ko-fi"></i></a></li>
  814.         <li><a href=""><i class="cp cp-paypal"></i></a></li>
  815.     </ul>
  816.  
  817.     <!-- contact buttons -->
  818.  
  819.     <ul id="contact-buttons">
  820.  
  821.         <a href=""><li><i class="cp cp-chat"></i>dm me</li></a>
  822.        
  823.         <a href=""><li><i class="cp cp-envelope"></i>email@gmail.com</li></a>
  824.        
  825.     </ul>
  826.     </section>
  827.  
  828.     <!-- upper header end -->
  829.  
  830.     <!-- terms section start -->
  831.  
  832.     <div id="terms-anchor" style="height: 9rem;"></div>
  833.     <section id="terms">
  834.        
  835.         <!-- terms section title -->
  836.         <h2>terms</h2>
  837.  
  838.         <article id="terms-text">
  839.  
  840.             <!-- terms section text -->
  841.  
  842.             <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Enim dolorem iure eveniet quam officiis quasi distinctio deleniti omnis odit laboriosam officia est, hic explicabo? Dolorum inventore numquam nisi id ullam.</p>
  843.             <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Enim dolorem iure eveniet quam officiis quasi distinctio deleniti omnis odit laboriosam officia est, hic explicabo? Dolorum inventore numquam nisi id ullam.</p>
  844.  
  845.         </article>
  846.    
  847.         <!-- terms  numbered list -->
  848.         <ol class="terms-list">
  849.  
  850.             <li>terms</li>
  851.            
  852.             <li>terms</li>
  853.            
  854.             <li>terms</li>
  855.         </ol>
  856.    
  857.         <!-- terms  bullet list -->
  858.         <ul class="terms-list">
  859.             <li>terms</li>
  860.            
  861.             <li>terms</li>
  862.            
  863.             <li>terms</li>
  864.         </ul>
  865.      
  866.         <!-- do's and don'ts start -->
  867.         <article id="do-donts">
  868.            
  869.             <div class="dos"><ul>
  870.                 <li>yes</li>
  871.                 <li>yes</li>
  872.                 <li>yes</li>
  873.             </ul></div>
  874.  
  875.             <div class="donts"><ul>
  876.                 <li>no</li>
  877.                 <li>no</li>
  878.                 <li>no</li>
  879.             </ul></div>
  880.            
  881.  
  882.         </article>
  883.  
  884.     </section>
  885.     <!-- terms end -->
  886.  
  887. </header>
  888.  
  889. <main>
  890.  
  891.  
  892.     <!-- commission types and prices start. see templates below, add as many as you want! -->
  893.  
  894.     <div id="prices-anchor" style="height: 9rem;"></div>
  895.     <section id="prices">
  896.  
  897.  
  898.         <!-- TEMPLATE: commission type example with image start -->
  899.  
  900.         <article class="example">
  901.  
  902.             <div class="example-info">
  903.  
  904.                 <!-- commission type name -->
  905.                 <h3>sketch</h3>
  906.                
  907.                 <!-- commission price -->
  908.                 <div class="example-price">30$</div>
  909.  
  910.             </div>
  911.  
  912.             <!--  image-->
  913.             <figure class="example-image"><img src="IMAGE URL" alt="" class="example-image"></figure>
  914.  
  915.             <!-- commission type info -->
  916.             <div class="example-type-info">
  917.                 <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia, tempore?</p>
  918.             </div>
  919.  
  920.         </article>
  921.                
  922.         <!-- TEMPLATE: price example with image end -->
  923.  
  924.  
  925.         <!-- TEMPLATE: price example without image start -->
  926.  
  927.         <article class="example">
  928.  
  929.             <div class="example-info">
  930.  
  931.                 <!-- commission type name -->
  932.                 <h3>sketch</h3>
  933.                
  934.                 <!-- commission price -->
  935.                 <div class="example-price">30$</div>
  936.  
  937.                 <div class="example-type-info">
  938.                     <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia, tempore?</p>
  939.                 </div>
  940.  
  941.             </div>
  942.            
  943.  
  944.  
  945.         </article>
  946.        
  947.         <!-- TEMPLATE: price example without image end -->
  948.  
  949.         <article class="example">
  950.  
  951.             <div class="example-info">
  952.  
  953.                 <!-- commission type name -->
  954.                 <h3>sketch</h3>
  955.                
  956.                 <!-- commission price -->
  957.                 <div class="example-price">30$</div>
  958.  
  959.             </div>
  960.  
  961.             <!--  image-->
  962.             <figure class="example-image"><img src="IMAGE URL" alt="" class="example-image"></figure>
  963.  
  964.             <!-- commission type info -->
  965.             <div class="example-type-info">
  966.                 <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officia, tempore?</p>
  967.             </div>
  968.  
  969.         </article>
  970.  
  971.  
  972.  
  973.  
  974.     </section>
  975.     <!-- prices and examples end -->
  976.  
  977.  
  978.     <!-- how to commission section -->
  979.    
  980.     <div id="how-to-anchor" style="height: 9rem;"></div>
  981.     <section id="how-to">
  982.  
  983.         <!-- how to commission title -->
  984.         <h2>How to commission</h2>
  985.  
  986.         <!-- how to commission info -->
  987.         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe, debitis earum numquam eos totam facilis modi architecto asperiores dicta, reprehenderit cumque excepturi nesciunt repudiandae voluptatem consequatur, soluta repellendus possimus! Quasi.</p>
  988.  
  989.         <h3>subtitle</h3>
  990.  
  991.         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe, debitis earum numquam eos totam facilis modi architecto asperiores dicta, reprehenderit cumque excepturi nesciunt repudiandae voluptatem consequatur, soluta repellendus possimus! Quasi.</p>
  992.  
  993.         <!-- how to commission steps bullet list-->
  994.         <ul>
  995.             <li>step one</li>
  996.             <li>step two</li>
  997.         </ul>
  998.  
  999.         <!-- how to commission steps numbered list-->
  1000.         <ol>
  1001.             <li>step three</li>
  1002.             <li>step four</li>
  1003.         </ol>
  1004.     </section>
  1005.  
  1006.  
  1007.     <!-- cancelling section -->
  1008.  
  1009.     <div id="cancel-anchor" style="height: 9rem;"></div>
  1010.     <section id="cancel">
  1011.        
  1012.         <h2>How to cancel commissions/request for changes</h2>
  1013.  
  1014.         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo deserunt provident ipsum at qui. Possimus saepe, facere qui quos dolor, in, placeat laudantium tempore ducimus repellendus repellat. Sapiente, maxime assumenda.</p>
  1015.        
  1016.         <h3>subtitle</h3>
  1017.  
  1018.         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo deserunt provident ipsum at qui. Possimus saepe, facere qui quos dolor, in, placeat laudantium tempore ducimus repellendus repellat. Sapiente, maxime assumenda.</p>
  1019.  
  1020.         <!-- bullet list -->
  1021.         <ul>
  1022.             <li>a</li>
  1023.             <li>a</li>
  1024.         </ul>
  1025.        
  1026.         <!-- numbered list -->
  1027.         <ol>
  1028.             <li>a</li>
  1029.             <li>a</li>
  1030.         </ol>
  1031.        
  1032.     </section>
  1033.  
  1034.     <!-- faq section -->
  1035.    
  1036.     <div id="faq-anchor" style="height: 9rem;"></div>
  1037.     <section id="faq">
  1038.  
  1039.         <!-- faq section title -->
  1040.         <h2>f.a.q</h2>
  1041.  
  1042.         <!-- faq section text -->
  1043.         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque nulla, earum a amet voluptate eligendi ipsa quasi vero dolore quidem nisi nesciunt at libero numquam in tempora distinctio odio debitis!</p>
  1044.  
  1045.         <h3>subtitle</h3>
  1046.        
  1047.         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque nulla, earum a amet voluptate eligendi ipsa quasi vero dolore quidem nisi nesciunt at libero numquam in tempora distinctio odio debitis!</p>
  1048.  
  1049.  
  1050.         <!-- question start -->
  1051.  
  1052.         <article class="faq-line">
  1053.             <div class="faq-question">
  1054.                
  1055.                 <p>question</p>
  1056.            
  1057.             </div>
  1058.  
  1059.             <div class="faq-answer">
  1060.            
  1061.                 <p>answer</p>
  1062.            
  1063.             </div>
  1064.         </article>
  1065.  
  1066.         <!-- question end -->
  1067.  
  1068.  
  1069.        
  1070.         <!-- question start -->
  1071.  
  1072.         <article class="faq-line">
  1073.             <div class="faq-question">
  1074.                
  1075.                 <p>question</p>
  1076.            
  1077.             </div>
  1078.  
  1079.             <div class="faq-answer">
  1080.            
  1081.                 <p>answer</p>
  1082.            
  1083.             </div>
  1084.         </article>
  1085.  
  1086.         <!-- question end -->
  1087.  
  1088.     </section>
  1089.  
  1090.         <iframe frameborder="0" scrolling="no" width="100%" height="190" src="https://www.tumblr.com/ask_form/{name}.tumblr.com" style="background-color: transparent; overflow: hidden; width: 100%; height: 190px;" id="ask_form" data-ruffle-polyfilled=""></iframe>
  1091.  
  1092. </main>
  1093.  
  1094. </section>
  1095. <!-- wrapper end -->
  1096.  
  1097.  
  1098. <footer id="last-update">
  1099.     last updated: 02/07/2022
  1100. </footer>
  1101.  
  1102. <a href="#wrapper" class="anchor-link" id="to-top"><i class="fa-solid fa-chevron-up"></i></a>
  1103.  
  1104. <!-- do not touch -->
  1105. <div style="position:fixed;bottom:4rem;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>
  1106.  
  1107. <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
  1108.  
  1109. <!-- icons fonts -->
  1110.  
  1111. <!-- cappuccicons -->
  1112. <script src="https://pull.cappuccicons.com/cpf.js"></script>
  1113.  
  1114. <!-- fontawesome -->
  1115. <script src="https://kit.fontawesome.com/0993e30c04.js" crossorigin="anonymous"></script>
  1116.  
  1117. <script>
  1118. $(document).ready(function(){
  1119.     $(document).scroll(function() {
  1120.     var y = $(this).scrollTop();
  1121.     if (y > 500) {$('#to-top').fadeIn();}
  1122.     else {$('#to-top').fadeOut();}});
  1123.  
  1124.     $('.anchor-link').click(function(){
  1125.     $('html, body').animate({
  1126.     scrollTop: $( $(this).attr('href') ).offset().top
  1127.     }, 450); return false;});
  1128. });
  1129. </script>
  1130. </body>
  1131. </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!