API tools faq
paste
Advertisement
southcodes

ultra lento | about page

southcodes
Dec 26th, 2022 (edited)
2,222
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 8.10 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.     - page 'ultra lento' 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=Karla:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700;1,800&family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&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.     --box-background: #fff;
  34.     --text:#333;
  35.     --links: #8cb3db;
  36.     --links-hover: #36608c;
  37.     --borders:#eee;
  38.     --icons: #36608c;
  39.     --links-tags-background:#36608c;
  40.     --links-tags-text:#fff;
  41.   }
  42.  
  43. .tmblr-iframe {margin:.7rem;opacity:.6;-ms-transform: scale(0.85);-webkit-transform: scale(0.85); /* Safari */transform: scale(0.85);}
  44. .tmblr-iframe:hover {opacity:.8;}
  45.  
  46. ::-webkit-scrollbar-thumb:vertical {border-left:2px solid var(--borders);}
  47. ::-webkit-scrollbar {width:6px}
  48. ::-webkit-scrollbar-track-piece{margin:5px 0;}
  49.  
  50. pre {font-family:consolas;
  51.     white-space: pre-wrap;       /* css-3 */
  52.     white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  53.     white-space: -pre-wrap;      /* Opera 4- */
  54.     white-space: -o-pre-wrap;    /* Opera 7 */
  55.     word-wrap: break-word;}      /* Internet Explorer 5.5+ */
  56.  
  57. body, figure{margin:0;padding:0}
  58. html{font: 14px 'Karla', sans-serif;}
  59. body {font-size:14px;color:var(--text);background:var(--background);}
  60. a {text-decoration: none;color:var(--links);word-break:break-word;}
  61. a:hover {color:var(--links-hover);}
  62. blockquote {margin:0;padding:0;}
  63. img {max-width:100%;height: auto;display: block;margin:0}
  64. hr {border:0;border-top:1px solid var(--borders);margin:0;}
  65. nav, nav ul, nav ol, nav li {list-style-type:none;margin:0;padding:0;}
  66.  
  67.  
  68. * {box-sizing: border-box;}
  69.  
  70. /* wrappers */
  71.  
  72. #wrapper {
  73.     display: flex;
  74.     justify-content: center;
  75.     align-items: center;
  76.     height: 100vh;
  77. }
  78.  
  79. main {
  80.     max-width: 25rem;
  81.     width: 90vw;
  82.     max-height: 90vh;
  83.     padding:1rem;
  84.     background-color: var(--box-background);
  85.     border:1px solid var(--borders);
  86.     border-radius: 7px;
  87.     overflow: auto;
  88. }
  89.  
  90. /* main navi */
  91.  
  92. #page-navigation {
  93.     padding:2rem 1rem 3rem;
  94. }
  95.  
  96. #page-navigation ul{
  97.     display: flex;
  98.     text-align: center;
  99. }
  100.  
  101. #page-navigation li{
  102.     width: 100%;
  103.     border-right:1px solid var(--borders);
  104. }
  105.  
  106. #page-navigation a{
  107.     width: 100%;color: var(--icons);
  108. }
  109.  
  110. #page-navigation i{
  111.     font-size: 1.1rem;
  112. }
  113.  
  114. #page-navigation li:last-of-type {
  115.     border-right:0;
  116. }
  117.  
  118. /*  header  */
  119.  
  120. /* images */
  121.  
  122. figure.header-image {
  123.     width: 100%;
  124.     height: 12rem;
  125. }
  126.  
  127. img.header-image {
  128.     width: 100%;
  129.     height: 100%;
  130.     object-fit: cover;
  131.     border-radius: 7px;
  132. }
  133.  
  134. figure.header-icon{
  135.     width: 6em;
  136.     height: 6em;
  137.     margin:-2.5rem auto 0;
  138.     border: 5px solid var(--box-background);
  139.     position: relative;
  140.     z-index: 9999;
  141.     border-radius: 100%
  142. }
  143.  
  144. img.header-icon{
  145.     width: 100%;
  146.     height: 100%;
  147.     object-fit: cover;
  148.     border-radius: 100%
  149. }
  150.  
  151. /* titles */
  152.  
  153. #blog-title {
  154.     margin:1rem 0 0;
  155.     font:600 1.7rem 'Montserrat', sans-serif;
  156.     text-align: center;
  157. }
  158.  
  159. #username {
  160.     margin:.3rem 0 0;
  161.     font:400 1rem 'Karla', sans-serif;
  162.     text-align: center;
  163.     color: #777;
  164. }
  165.  
  166. /* details */
  167.  
  168. #details {
  169.     display: flex;
  170.     justify-content: center;
  171.     text-align: center;
  172.     margin-top: 1.5rem;
  173. }
  174.  
  175. #details i {
  176.     display: block;
  177.     margin-bottom: .7rem;
  178.     color:var(--icons)
  179. }
  180.  
  181. .detail-box {
  182.     width: 100%;
  183.     padding: 1rem .5rem;
  184.     border-right: 1px solid var(--borders);
  185. }
  186.  
  187. .detail-box:last-of-type {
  188.     border-right:0;
  189. }
  190.  
  191. /* about */
  192.  
  193. #about {
  194.     margin-top: 2rem;
  195.     padding:1rem;
  196.     background-color: #fafafa;
  197. }
  198.  
  199. /* links */
  200.  
  201. #links-divider {
  202.     margin:2rem auto;
  203.     width: 100%;
  204.     max-width: 15rem;
  205. }
  206.  
  207. #page-tags, #page-links{
  208.     margin-top: 2rem;
  209. }
  210.  
  211. #page-tags li, #page-links li{
  212.     display: inline-block;
  213.     padding:.6rem;
  214.     background-color: var(--links-tags-background);
  215.     margin:0 1rem 1rem;
  216.     border-radius: 4px;
  217. }
  218.  
  219. #page-tags a, #page-links a{
  220.     color:var(--links-tags-text)
  221. }
  222.  
  223. /* socials */
  224. #socials {
  225.     margin: 3rem 0 2rem;}
  226.  
  227. #socials ul {
  228.     display: flex;
  229.     flex-wrap: wrap;
  230.     justify-content: space-around;
  231. }
  232.  
  233. #socials i {
  234.     color: var(--icons);
  235.     padding:7px;
  236.     border-radius: 100%;
  237.     font-size: 1.4rem;
  238. }
  239. </style>
  240.    
  241. </head>
  242. <body>
  243.  
  244. <div id="wrapper"><main>
  245.  
  246. <header>
  247.  
  248.     <nav id="page-navigation"><ul>
  249.        
  250.         <li><a href="/" title="home"><i class="fa-solid fa-home"></i></a></li>
  251.        
  252.         <li><a href="/ask" title="inbox"><i class="fa-solid fa-envelope"></i></a></li>
  253.        
  254.         <li><a target="_blank" href="https://www.tumblr.com/dashboard" title="dashboard"><i class="fa-brands fa-tumblr"></i></a></li>
  255.     </ul></nav>
  256.  
  257.     <figure class="header-image"><img src="HEADER IMAGE URL" alt="" class="header-image"></figure>
  258.  
  259.     <figure class="header-icon"><img src="ICON IMAGE URL" alt="" class="header-icon"></figure>
  260.  
  261.     <h1 id="blog-title">Title</h1>
  262.  
  263.     <h2 id="username">@{name}</h2>
  264.  
  265.     <section id="details">
  266.         <div class="detail-box">
  267.             <i class="fa-solid fa-user"></i>
  268.             name
  269.         </div>
  270.        
  271.         <div class="detail-box">
  272.             <i class="fa-solid fa-calendar-days"></i>
  273.             age
  274.         </div>
  275.        
  276.         <div class="detail-box">
  277.             <i class="fa-solid fa-circle-info"></i>
  278.             pronouns
  279.         </div>
  280.     </section>
  281.  
  282. </header>
  283.  
  284. <section id="about">
  285.     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore repellat error voluptas iure quibusdam, magni molestias ad beatae alias ullam ut commodi perferendis. Tenetur id, sint ipsa totam quia error?</p>
  286.  
  287.     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore repellat error voluptas iure quibusdam, magni molestias ad beatae alias ullam ut commodi perferendis. Tenetur id, sint ipsa totam quia error?</p>
  288. </section>
  289.  
  290.  
  291. <nav id="page-links"><ul>
  292.     <li><a href="link url">link 1</a></li>
  293.     <li><a href="link url">link 2</a></li>
  294.     <li><a href="link url">link 3</a></li>
  295. </ul></nav>
  296.  
  297. <hr id="links-divider">
  298.  
  299. <nav id="page-tags"><ul>
  300.     <li><a href="tag url"># tag 1</a></li>
  301.     <li><a href="tag url"># tag 2</a></li>
  302.     <li><a href="tag url"># tag 3</a></li>
  303. </ul></nav>
  304.  
  305. <nav id="socials"><ul>
  306.  
  307.     <!-- find more icons at http://fontawesome.io/icons/ -->
  308.  
  309.     <li><a href=""><i class="fa-brands fa-twitter"></i></a></li>
  310.     <li><a href=""><i class="fa-brands fa-instagram"></i></a></li>
  311.     <li><a href=""><i class="fa-brands fa-facebook"></i></a></li>
  312.     <li><a href=""><i class="fa-brands fa-paypal"></i></a></li>
  313. </ul>
  314.    
  315. </nav>
  316.  
  317. </main></div>
  318.  
  319. <!-- do not touch -->
  320. <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>
  321.  
  322.  
  323. <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
  324.  
  325. <!-- icons font -->
  326. <script src="https://kit.fontawesome.com/0993e30c04.js" crossorigin="anonymous"></script>
  327.  
  328. <script>
  329. // $( document ).ready(function() {
  330. // });
  331. </script>
  332. </body>
  333. </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!