Advertisement
southcodes

youth | about page

May 20th, 2022 (edited)
1,166
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!--
  2.  
  3.     - about page 'youth' 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://fontawesome.com/
  11.  
  12.  -->
  13. <!DOCTYPE html>
  14. <html>
  15. <head>
  16.     <title>{title}</title>
  17.    
  18.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  19.  
  20.     <link rel="shortcut icon" href="{favicon}">
  21.     <meta name="description" content="{MetaDescription}"/>
  22.  
  23.     <!-- fonts -->
  24.     <link rel="preconnect" href="https://fonts.googleapis.com">
  25.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  26.     <link href="https://fonts.googleapis.com/css2?family=Corinthia:wght@400;700&family=Karla:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
  27.  
  28.     <!-- normalize -->
  29.     <link href="https://necolas.github.io/normalize.css/7.0.0/normalize.css" rel="stylesheet">
  30.  
  31. <style>
  32. :root {
  33.     --background:#ffffff;
  34.     --text:#333333;
  35.     --links: pink;
  36.     --links-hover: #78368c;
  37.     --borders:#eeeeee;
  38.     --icons: pink
  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. * {box-sizing: border-box;}
  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. /* wrappers */
  65.  
  66. main {
  67.     width:50rem;
  68.     max-width: 90vw;
  69.     margin:5rem auto;
  70. }
  71.  
  72. #header-wrapper {
  73.     display: flex;
  74.     flex-flow: row wrap;
  75.     justify-content: space-evenly;
  76.     align-items: center;
  77.     margin: 5rem auto 0;
  78.     max-width: 90vw;
  79. }
  80.  
  81. /* page title */
  82.  
  83. #page-title {
  84.     /* title font size */
  85.     font-size: 5.5rem;
  86.  
  87.     padding: 1rem 4rem 1rem 1rem;
  88.     text-align: right;
  89.     font-weight: 400;
  90.     font-family:'Corinthia', cursive;
  91.     width: calc(50% - 15rem / 2);
  92. }
  93.  
  94. /* header image */
  95.  
  96. figure.header-image {
  97.     border: 12px solid transparent;
  98.     outline: 1px solid var(--borders);
  99.     width:15rem;
  100.     height: 15rem;
  101.     max-width: 90vw;
  102.     border-radius: 100%;
  103. }
  104.  
  105. img.header-image {
  106.     display: block;
  107.     margin: 0;
  108.     width: 100%;
  109.     height: 100%;
  110.     border-radius: 100%;
  111.     object-fit: cover;
  112. }
  113.  
  114. /* icons navigation */
  115.  
  116. #navigation {
  117.     list-style: none;
  118.     padding: 1rem;
  119.     width: calc(50% - 15rem / 2);
  120. }
  121. #navigation ul,#navigation li {list-style-type:none;margin:0;padding:0;}
  122.  
  123. #navigation ul {
  124.     display: flex;
  125.     flex-flow: row wrap;
  126.     justify-content: space-around;
  127.     max-width: 15rem;
  128. }
  129.  
  130. #navigation li{display: inline-block;}
  131. #navigation .fa-solid {font-size: 1.3rem; color:var(--icons)}
  132. #navigation .fa-solid:hover {color: var(--links-hover);}
  133.  
  134. /* details */
  135.  
  136. #details {
  137.     margin-top: 4rem;
  138.     text-align: center;
  139.     font-weight: 600;
  140.     line-height: 200%;
  141. }
  142.  
  143. #details li {
  144.     list-style: none;
  145.     display: inline-block;
  146.     margin:0 1rem;
  147.     vertical-align: middle;
  148. }
  149.  
  150. #details li:before {
  151.     content:'\f111';
  152.     font-family: 'Font Awesome 5 Free';
  153.     font-weight: 900;
  154.     font-size: .6rem;
  155.     color:var(--icons);
  156.     margin-right: 1rem;
  157.     vertical-align: middle;
  158. }
  159.  
  160. /* description */
  161.  
  162. #text {
  163.     margin: 4rem auto 0;
  164.     background-color: #fafafa;
  165.     border: 1px solid var(--borders);
  166.     padding:2rem;
  167.     max-width: 40rem;
  168.     line-height: 160%;
  169. }
  170.  
  171. /* links and socials */
  172.  
  173. #links-wrapper {
  174.     margin-top: 4rem;
  175.     display: flex;
  176.     flex-flow: row wrap;
  177.     justify-content: space-around;
  178.     text-align: center;
  179.     line-height: 170%;
  180. }
  181.  
  182. #links,#socials {
  183.     width: 50%;
  184.     flex-grow: 1;
  185. }
  186.  
  187. #links li{
  188.     list-style:none;
  189.     margin: 1rem 1.5rem;padding: 0;
  190.     display: inline-block;
  191. }
  192.  
  193. #links a {
  194.     color:var(--text);
  195.     font-weight: 600;
  196.     border-bottom: 1px solid var(--links)
  197. }
  198. #links a:hover {color:var(--links-hover);}
  199.  
  200. #socials i {
  201.     margin:1rem 1.5rem;
  202.     font-size: 1.3rem;
  203. }
  204.  
  205. /* MEDIA */
  206.  
  207. @media only screen and (min-width:0px) and (max-width:800px) {
  208.    
  209.     #header-wrapper {
  210.         display: flex;
  211.         flex-flow: column wrap;
  212.         justify-content: space-evenly;
  213.         align-items: center;
  214.     }
  215.  
  216.     #page-title {
  217.         width:100%;
  218.         margin:0 0 2rem;
  219.         padding: 0;
  220.         text-align: center;
  221.     }
  222.  
  223.     figure.header-image {
  224.         margin-bottom: 2rem;
  225.     }
  226.  
  227.     #navigation {
  228.         list-style: none;
  229.         width:100%;
  230.         max-width: 20rem;
  231.     }
  232.  
  233.     #navigation ul {
  234.         max-width:20rem;
  235.     }
  236.  
  237.     #links-wrapper {
  238.         flex-direction: column;
  239.     }
  240.  
  241.     #links,#socials {
  242.         width: 100%;
  243.     }
  244.  
  245.     #socials {
  246.         margin-top: 4rem;
  247.     }
  248. }
  249.  
  250. </style>
  251.    
  252. </head>
  253. <body>
  254.  
  255.     <header id="header-wrapper">
  256.  
  257.         <!-- page title -->
  258.         <h1 id="page-title">title</h1>
  259.  
  260.         <!-- header image -->
  261.         <figure class="header-image"><img src="IMAGE URL" alt="" class="header-image"></figure>
  262.  
  263.         <nav id="navigation"><ul>
  264.  
  265.             <li><a href="/"><i class="fa-solid fa-home"></i></a></li>
  266.            
  267.             <li><a href="/ask"><i class="fa-solid fa-envelope"></i></a></li>
  268.            
  269.             <li><a href="LINK URL"><i class="fa-solid fa-bars"></i></a></li>
  270.         </ul></nav>
  271.        
  272.     </header>
  273.  
  274.    
  275. <main>
  276.  
  277.     <section id="details">
  278.         <li>name</li>
  279.         <li>age</li>
  280.         <li>location</li>
  281.         <li>pronouns</li>
  282.     </section>
  283.  
  284.     <section id="text">
  285.         text
  286.     </section>
  287.  
  288.     <section id="links-wrapper">
  289.  
  290.         <article id="links">
  291.             <li><a href="">#link 1</a></li>
  292.             <li><a href="">link 2</a></li>
  293.         </article>
  294.  
  295.         <article id="socials">
  296.  
  297.             <!-- find more icons at https://fontawesome.com/icons -->
  298.  
  299.             <a href=""><i class="fa-brands fa-twitter"></i></a>
  300.             <a href=""><i class="fa-brands fa-instagram"></i></a>
  301.             <a href=""><i class="fa-brands fa-paypal"></i></a>
  302.             <a href=""><i class="fa-brands fa-facebook"></i></a>
  303.         </article>
  304.     </section>
  305.  
  306. </main>
  307.  
  308. <!-- do not touch -->
  309. <div style="position:fixed;bottom:2rem;right:2rem;z-index:999999999999999999999!important;font-size:.9rem;letter-spacing:.03rem;"><a href="https://southcodes.tumblr.com" title="coded by southcodes" target="_blank">SC</a></div>
  310.  
  311. <!-- icon font -->
  312. <script src="https://kit.fontawesome.com/0993e30c04.js" crossorigin="anonymous"></script>
  313. </body>
  314. </html>
Advertisement
RAW Paste Data Copied
Advertisement