Advertisement
southcodes

silver | about page

Aug 17th, 2022
1,037
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 16.50 KB | None | 0 0
  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