API tools faq
paste
Advertisement
southcodes

silver | about page

southcodes
Aug 17th, 2022
3,453
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 16.50 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.     - about page 'silver' by skye southcodes.tumblr.com
  3.     - modify as you please but please do not touch the credit
  4.     - any errors? need help? have questions? let me know!
  5.     southcodes.tumblr.com/inbox
  6.    
  7.     - normalize css by https://github.com/necolas
  8.     - fonts by google
  9.     - icon font by http://fontawesome.io/icons/
  10.  
  11.  -->
  12. <!DOCTYPE html>
  13. <html>
  14. <head>
  15.     <title>{title}</title>
  16.    
  17.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  18.  
  19.     <link rel="shortcut icon" href="{favicon}">
  20.     <meta name="description" content="{MetaDescription}"/>
  21.  
  22.     <!-- fonts -->
  23.     <link rel="preconnect" href="https://fonts.googleapis.com">
  24.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  25.     <link href="https://fonts.googleapis.com/css2?family=Corinthia:wght@400;700&family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Karla:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap" rel="stylesheet">
  26.    
  27.     <!-- normalize -->
  28.     <link href="https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel="stylesheet">
  29.    
  30. <style>
  31. :root {
  32.     --background:#fafafa;
  33.     --boxes-background:#fff;
  34.     --text:#333;
  35.     --links: #829fbb;
  36.     --links-hover: #36608c;
  37.     --borders:#eee;
  38.     --icons: #36608c;
  39. }
  40.  
  41. .tmblr-iframe {margin:.7rem;opacity:.6;-ms-transform: scale(0.85);-webkit-transform: scale(0.85); /* Safari */transform: scale(0.85);}
  42. .tmblr-iframe:hover {opacity:.8;}
  43.  
  44. ::-webkit-scrollbar-thumb:vertical {border-left:2px solid var(--borders);}
  45. ::-webkit-scrollbar {width:6px}
  46. ::-webkit-scrollbar-track-piece{margin:5px 0;}
  47.  
  48. pre {font-family:consolas;
  49.     white-space: pre-wrap;       /* css-3 */
  50.     white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  51.     white-space: -pre-wrap;      /* Opera 4- */
  52.     white-space: -o-pre-wrap;    /* Opera 7 */
  53.     word-wrap: break-word;}      /* Internet Explorer 5.5+ */
  54.  
  55. body, figure{margin:0;padding:0}
  56. html{font: 14px 'Karla', sans-serif;}
  57. body {font-size:14px;color:var(--text);background:var(--background);}
  58. a {text-decoration: none;color:var(--links);word-break:break-word;}
  59. a:hover {color:var(--links-hover);}
  60. blockquote {margin:0;padding:0;}
  61. img {max-width:100%;height: auto;display: block;margin: .7rem 0}
  62. hr {border:0;border-top:1px solid var(--borders);margin:0;}
  63.  
  64. * {
  65.     box-sizing: border-box;
  66. }
  67.  
  68. .box-divider {
  69.     margin:2rem auto;
  70.     width: 10rem;
  71. }
  72.  
  73. /* boxes */
  74.  
  75. #container {
  76.     display: flex;
  77.     justify-content: space-around;
  78.     flex-flow: row wrap;
  79.     background-color: var(--background);
  80.     max-width: 65rem;
  81.     margin:7rem auto
  82. }
  83.  
  84. #links-box {
  85.     width: 28%;
  86. }
  87. #about-box {
  88.     width: 37%;
  89. }
  90.  
  91. .box-inner {
  92.     background-color: var(--boxes-background);
  93.     padding:1rem;
  94.     border:1px solid var(--borders);
  95.     border-radius:5px;
  96. }
  97.  
  98. /* navigation section */
  99.  
  100. #main-navigation {
  101.     list-style: none;
  102.     display: flex;
  103.     flex-flow: row wrap;
  104.     justify-content: space-around;
  105.     text-align: center;
  106.     margin-bottom: 1rem;
  107. }
  108.  
  109. #main-navigation-responsive {
  110.     display: none;
  111. }
  112.  
  113. #main-navigation li {
  114.     background-color: var(--boxes-background);
  115.     border: 1px solid var(--borders);
  116.     width:3rem;
  117.     height:3rem;
  118.     line-height: 3rem;
  119.     border-radius:5px;
  120. }
  121.  
  122. #about-links, #about-tags {
  123.     margin-top: 2rem;
  124.     text-align: center;
  125. }
  126.  
  127. #about-links li {
  128.     display: inline-block;
  129.     margin:1rem 0
  130. }
  131.  
  132. #about-links span {
  133.     padding: .4rem;
  134.     background-color: var(--boxes-background);
  135.     border: 1px solid var(--borders);
  136.     border-radius: 3px;
  137. }
  138.  
  139. #about-links li:after {
  140.     content: '\f111';
  141.     font-family: 'Font Awesome 5 Free';
  142.     font-weight: 900;
  143.     font-size: .2rem;
  144.     color:var(--icons);
  145.     vertical-align: middle;
  146.     margin:0 1rem
  147. }
  148.  
  149. #about-links li:last-of-type:after {display: none;}
  150.  
  151. #about-tags li{
  152.     display: inline-block;
  153.     border: 1px solid var(--borders);
  154.     border-radius: 3px;
  155.     padding: .4rem;
  156.     margin:0 .3rem 1rem;
  157. }
  158.  
  159. #about-tags li:before {
  160.     content: '# ';
  161.     color:var(--icons)
  162. }
  163.  
  164. /* blogs */
  165.  
  166. #blogs-wrapper {list-style: none;}
  167.  
  168. #blogs-wrapper li{
  169.     display: flex;
  170.     flex-flow: row wrap;
  171.     align-items:center;
  172.     justify-content: space-between;
  173.     margin: 1rem 0;
  174.     padding:0 .5rem;
  175.     transition-duration: .3s;
  176. }
  177.  
  178. #blogs-wrapper li:hover{
  179.     background-color: var(--links);
  180.     border-radius: 5px;
  181. }
  182.  
  183. .blog-image {
  184.     width:4.5rem;
  185.     height:4.5rem;
  186.     object-fit: cover;
  187.     padding: .5rem;
  188.     border: 1px solid var(--borders);
  189.     border-radius: 100%;
  190.     background-color: var(--boxes-background);
  191. }
  192.  
  193. #blogs-wrapper .blogs-names{
  194.     width: calc(100% - 5.5rem);
  195.     font-family: 'Montserrat', sans-serif;
  196.     font-weight: 600;
  197. }
  198.  
  199. .blogs-names {margin: 1rem 0;}
  200.  
  201. .blog-title {
  202.     display: block;
  203.     font:600 1rem 'Montserrat', sans-serif;
  204.     text-transform: uppercase;
  205. }
  206.  
  207. .blog-subtitle {
  208.     display: block;
  209.     font:500 .85rem 'Montserrat', sans-serif;
  210.     font-style: italic;
  211.     margin-top: .5rem;
  212. }
  213.  
  214. /* progress bars */
  215.  
  216. #progress-bars-wrapper {
  217.     padding: 0 1rem;
  218. }
  219.  
  220. .progress-bar {
  221.     width: 100%;
  222.     height:10px;
  223.     background-color: var(--background);
  224.     position: relative;
  225.     text-align: right;
  226.     border-radius: 3px;
  227.     margin:0 0 3rem;
  228. }
  229.  
  230. h3.progress-bar-name {
  231.     margin:0 0 1rem;
  232.     font:500 1rem 'Karla', sans-serif
  233. }
  234.  
  235. .bar-filling {
  236.     position: absolute;top:0;bottom:0;left:0;
  237.     background-color: var(--links);
  238.     border-radius: 3px;
  239. }
  240.  
  241. .bar-progress {
  242.     position: absolute;top:0;bottom:0;right:0;
  243.     z-index: 100000;
  244.     font-size: 1rem;
  245.     margin-top: -3px;
  246.     font:900 .9rem 'Montserrat', sans-serif
  247. }
  248.  
  249. .current-progress {
  250.     font:600 .85rem 'Montserrat', sans-serif;
  251.     color:#888
  252. }
  253.  
  254. /* socials */
  255.  
  256. #about-socials nav {
  257.     display: flex;
  258.     justify-content: space-around;
  259.     flex-flow: row wrap;
  260.     list-style: none;
  261. }
  262.  
  263. #about-socials nav li {
  264.     margin:1rem;
  265.     font-size: 1.2rem;
  266. }
  267.  
  268. /* about section */
  269.  
  270. /* about title subtitle */
  271. #about-header {
  272.     display: flex;
  273.     flex-flow: row wrap;
  274.     justify-content: space-between;
  275.     align-items: center;
  276.     margin:1rem 0;
  277.     background-color: var(--background);
  278.     padding:1rem;
  279.     border:1px solid var(--borders);
  280.     border-radius:5px;
  281. }
  282.  
  283. #page-title{
  284.     font:600 1.3rem 'Montserrat', sans-serif;
  285.     margin:.2rem 0;
  286. }
  287.  
  288. #username {
  289.     font:400 1rem 'karla', sans-serif;
  290.     letter-spacing: .04rem;
  291.     margin: .2rem 0;
  292.     color: #666;
  293. }
  294.  
  295. #about-subtitle {
  296.     font:400 .9rem 'karla', sans-serif;
  297.     font-style: italic;  
  298.     letter-spacing: .04rem;
  299.     width: 100%;
  300.     margin: 1.2rem 0 0;
  301. }
  302.  
  303. /* about image */
  304.  
  305. .about-image {
  306.     width: 100%;
  307.     margin:2rem 0 0;
  308.     padding:0;
  309.     height: 100%;
  310.     object-fit: cover;
  311.     border-radius:5px;
  312. }
  313.  
  314. /* about info */
  315.  
  316. #about-info {
  317.     margin-top: 2rem;
  318.     font-size: 1rem;
  319.     text-align: center;
  320. }
  321.  
  322. #about-info li{
  323.     list-style: none;
  324.     display: inline-block;
  325.     margin:.5rem 0
  326. }
  327.  
  328. #about-info li:after{
  329.     content: '\f111';
  330.     font-family: 'Font Awesome 5 Free';
  331.     font-weight: 900;
  332.     margin:0 1rem;
  333.     font-size: .4rem;
  334.     color: var(--icons);
  335.     vertical-align: middle;
  336. }
  337.  
  338. #about-info li:last-of-type:after{
  339.     content: '';
  340.     display:none;
  341. }
  342.  
  343. #about-text {
  344.     background-color: var(--background);
  345.     padding:1rem;
  346.     border:1px solid var(--borders);
  347. }
  348.  
  349. /* likes and dislikes */
  350.  
  351. #likes-dislikes {
  352.     line-height: 175%;
  353.     padding: 0 1rem;
  354.     font-style: italic;
  355. }
  356.  
  357. #likes-dislikes div {margin:1.5rem 0;}
  358.  
  359. #likes-dislikes li{
  360.     list-style: none;
  361.     margin:0 1rem 0 0;
  362.     display: inline-block;
  363. }
  364.  
  365. #likes-dislikes li::after{
  366.     content:'';
  367.     display: none;
  368. }
  369.  
  370. #likes-dislikes .fa-solid {
  371.     font-size: 1.2rem;
  372.     vertical-align: middle;
  373.     margin-right: 1rem;
  374. }
  375.  
  376. /* gallery */
  377.  
  378. #gallery .box-inner {
  379.     background-color: transparent;
  380.     padding:0;
  381.     border:0;
  382.     border-radius:0;
  383. }
  384.  
  385. .gallery-image {
  386.     height: 8rem;
  387.     width: 8rem;
  388.     object-fit: cover;
  389.     border:10px solid var(--boxes-background);
  390.     outline: 1px solid #eee;
  391.     margin:0 0  2rem 0;
  392.     border-radius:5px;
  393. }
  394.  
  395.  
  396. /* MEDIA */
  397.  
  398. @media only screen and (min-width:00px) and (max-width:700px) {
  399.  
  400.     #main-navigation {display: none;}
  401.  
  402.     #main-navigation-responsive {
  403.         display: block;
  404.         list-style: none;
  405.         display: flex;
  406.         flex-flow: row wrap;
  407.         justify-content: space-around;
  408.         text-align: center;
  409.         margin-bottom: 1rem;
  410.     }
  411.  
  412.     #main-navigation-responsive li {
  413.         background-color: var(--boxes-background);
  414.         border: 1px solid var(--borders);
  415.         width:3rem;
  416.         height:3rem;
  417.         line-height: 3rem;
  418.         border-radius:5px;
  419.     }
  420.  
  421.     #container {
  422.         display: flex;
  423.         justify-content: center;
  424.         flex-flow: column;
  425.         background-color: var(--background);
  426.         max-width: 65rem;
  427.         width: 90vw;
  428.         margin:7rem auto
  429.     }
  430.  
  431.     #links-box {
  432.         width: 100%;
  433.         margin:5rem auto 2rem;
  434.         order: 2;
  435.  
  436.     }
  437.     #about-box {
  438.         width: 100%;
  439.         margin:auto;
  440.         order: 1;
  441.     }
  442.  
  443.     #gallery {
  444.         order: 3;
  445.     }
  446.    
  447.     #gallery {
  448.         background-color: transparent;
  449.         padding:0;
  450.         border:0;
  451.         border-radius:0;
  452.         display: flex;
  453.         flex-flow: row wrap;
  454.         margin: 3rem auto;
  455.         justify-content: space-between;
  456.         width: 90vw;
  457.         max-width: 30rem;
  458.     }
  459.  
  460.     .gallery-image {
  461.         height: 6rem;
  462.         width: 6rem;
  463.         object-fit: cover;
  464.         border:10px solid var(--boxes-background);
  465.         outline: 1px solid #eee;
  466.         margin:0 0  2rem 0;
  467.         border-radius:5px;
  468.     }
  469.  
  470. }
  471.  
  472. </style>
  473. </head>
  474. <body>
  475.  
  476. <main id="container">
  477.  
  478. <!-- responsive main navigation start -->
  479. <nav id="main-navigation-responsive">
  480.  
  481.     <li><a href="/"><i class="fa-solid fa-home"></i></a></li>
  482.    
  483.     <li><a href="/ask"><i class="fa-solid fa-envelope"></i></a></li>
  484.    
  485.     <li><a target="_blank" href="https://www.tumblr.com/follow/{name}"><i class="fa-solid fa-plus"></i></a></li>
  486.  
  487. </nav>
  488. <!-- responsive main navigation end -->
  489.  
  490. <!-- navigations section start -->
  491. <section id="links-box" class="container-box">
  492.  
  493.     <!-- main navigation start -->
  494.     <nav id="main-navigation">
  495.    
  496.         <li><a href="/"><i class="fa-solid fa-home"></i></a></li>
  497.    
  498.         <li><a href="/ask"><i class="fa-solid fa-envelope"></i></a></li>
  499.    
  500.         <li><a target="_blank" href="https://www.tumblr.com/follow/{name}"><i class="fa-solid fa-plus"></i></a></li>
  501.    
  502.     </nav>
  503.     <!-- main navigation end -->
  504.  
  505.     <div class="box-inner">
  506.  
  507.         <!-- links -->
  508.     <article id="about-links">
  509.         <li><a href=""><span>link 1</span></a></li>
  510.         <li><a href=""><span>link 2</span></a></li>
  511.         <li><a href=""><span>link 3</span></a></li>
  512.     </article>
  513.  
  514.         <!-- tags -->
  515.     <article id="about-tags">
  516.         <li><a href="">tag 1</a></li>
  517.         <li><a href="">tag 2</a></li>
  518.         <li><a href="">tag 3</a></li>
  519.     </article>
  520.  
  521.  
  522.     <hr class="box-divider">
  523.  
  524.  
  525.     <!-- progres bars start -->
  526.     <article id="progress-bars-wrapper">
  527.  
  528.  
  529.         <!-- bar start -->
  530.         <h3 class="progress-bar-name">progress bar name</h3>
  531.        
  532.         <!-- change the 50% to fill the bar -->
  533.         <div class="progress-bar">
  534.             <div class="bar-filling" style="width:50%"></div>
  535.             <div class="bar-progress">
  536.                 <span class="current-progress">50</span> / 100%
  537.             </div>
  538.         </div>
  539.         <!-- bar end -->
  540.  
  541.  
  542.  
  543.         <!-- bar start -->
  544.         <h3 class="progress-bar-name">progress bar name</h3>
  545.        
  546.         <!-- change the 50% to fill the bar -->
  547.         <div class="progress-bar">
  548.             <div class="bar-filling" style="width:50%"></div>
  549.             <div class="bar-progress">
  550.                 <span class="current-progress">50</span> / 100%
  551.             </div>
  552.         </div>
  553.         <!-- bar end -->
  554.  
  555.  
  556.     </article>
  557.     <!-- progres bars end -->
  558.  
  559.    
  560.     <hr class="box-divider">
  561.  
  562.  
  563.     <!-- blogs start -->
  564.     <article id="blogs-wrapper">
  565.        
  566.        
  567.         <!-- blog start -->
  568.         <a href="BLOG LINK" target="_blank"><li><img src="BLOG IMAGE" alt="" class="blog-image">
  569.  
  570.             <div class="blogs-names">
  571.                 <!-- blog name -->
  572.                 <span class="blog-title">blog name</span>
  573.                 <!-- blog subtitle -->
  574.                 <span class="blog-subtitle">subtitle</span>
  575.             </div>
  576.  
  577.         </li></a>
  578.         <!-- blog end -->
  579.  
  580.        
  581.        
  582.         <!-- blog start -->
  583.         <a href="BLOG LINK" target="_blank"><li><img src="BLOG IMAGE" alt="" class="blog-image">
  584.  
  585.             <div class="blogs-names">
  586.                 <!-- blog name -->
  587.                 <span class="blog-title">blog name</span>
  588.                 <!-- blog subtitle -->
  589.                 <span class="blog-subtitle">subtitle</span>
  590.             </div>
  591.  
  592.         </li></a>
  593.         <!-- blog end -->
  594.  
  595.  
  596.  
  597.     </article>
  598.     <!-- blogs end -->
  599.    
  600.     <hr class="box-divider">
  601.  
  602.     <!-- socials start -->
  603.     <article id="about-socials">
  604.         <!-- find more icons at http://fontawesome.io/icons/ -->
  605.  
  606.         <nav>
  607.             <li><a href=""><i class="fa-brands fa-twitter"></i></a></li>
  608.             <li><a href=""><i class="fa-brands fa-tumblr"></i></a></li>
  609.             <li><a href=""><i class="fa-brands fa-instagram"></i></a></li>
  610.             <li><a href=""><i class="fa-brands fa-snapchat"></i></a></li>
  611.             <li><a href=""><i class="fa-brands fa-tiktok"></i></a></li>
  612.             <li><a href=""><i class="fa-brands fa-facebook"></i></a></li>
  613.             <li><a href=""><i class="fa-brands fa-patreon"></i></a></li>
  614.         </nav>
  615.  
  616.     </article>
  617.     <!-- socials end -->
  618.  
  619. </div></section>
  620. <!-- navigations section end -->
  621.  
  622.  
  623.  
  624. <!-- about section start -->
  625. <section id="about-box" class="container-box"><div class="box-inner">
  626.        
  627.  
  628.     <!-- title username subtitle start -->
  629.     <div id="about-header">
  630.        
  631.         <h1 id="page-title">title</h1>
  632.        
  633.         <h2 id="username">@{name}</h2>
  634.        
  635.         <h3 id="about-subtitle">Lorem, ipsum dolor sit amet lorh consectetur adipisicing elit.</h3>
  636.        
  637.     </div>
  638.     <!-- title username subtitle end -->
  639.  
  640.  
  641.     <!-- about image start -->
  642.     <figure class="about-image"><img class="about-image" src="ABOUT IMAGE" alt=""></figure>
  643.     <!-- about image end -->
  644.  
  645.  
  646.     <!-- info start -->
  647.     <article id="about-info">
  648.         <li>detail</li>
  649.         <li>detail</li>
  650.         <li>detail</li>
  651.     </article>
  652.     <!-- info end -->
  653.  
  654.     <hr class="box-divider">
  655.  
  656.     <!-- about start -->
  657.     <article id="about-text">
  658.  
  659.         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit repudiandae quasi dolor eveniet laborum pariatur repellendus eius quis. Magni veniam sed unde iste illo recusandae expedita dolore, nesciunt eveniet adipisci.</p>
  660.  
  661.     </article>
  662.     <!-- about end-->
  663.  
  664.     <hr class="box-divider">
  665.  
  666.     <!-- likes/dislikes start -->
  667.     <article id="likes-dislikes">
  668.  
  669.         <div>
  670.             <i class="fa-solid fa-circle-check" style="color:green"></i>
  671.             <li>like 1</li>
  672.             <li>like 2</li>
  673.             <li>like 3</li>
  674.         </div>
  675.  
  676.         <div>
  677.             <i class="fa-solid fa-circle-xmark" style="red"></i>
  678.             <li>dislike 1</li>
  679.             <li>dislike 2</li>
  680.             <li>dislike 3</li>
  681.         </div>
  682.  
  683.        
  684.    
  685.     </article>
  686.     <!-- likes/dislikes end -->
  687.  
  688. </div></section>
  689. <!-- about section start -->
  690.  
  691.  
  692. <!-- gallery section start -->
  693. <section id="gallery" class="container-box">
  694.    
  695. <img src="GALLERY IMAGE" alt="" class="gallery-image">
  696.  
  697.  
  698. <img src="GALLERY IMAGE" alt="" class="gallery-image">
  699.  
  700.  
  701. <img src="GALLERY IMAGE" alt="" class="gallery-image">
  702.  
  703.  
  704. <img src="GALLERY IMAGE" alt="" class="gallery-image">
  705.  
  706.  
  707. </section>
  708. <!-- gallery section end -->
  709.  
  710. </main>
  711.  
  712. <!-- do not touch -->
  713. <div style="position:fixed;bottom:2rem;right:2rem;z-index:999999999999999999999!important;font-size:.7rem;letter-spacing:.03rem;"><a href="https://southcodes.tumblr.com" title="coded by southcodes" target="_blank">SC</a></div>
  714.  
  715. <!-- icons font -->
  716. <script src="https://kit.fontawesome.com/0993e30c04.js" crossorigin="anonymous"></script>
  717.  
  718. </body>
  719. </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!