API tools faq
paste
Advertisement
southcodes

moonstone | about page

southcodes
Sep 28th, 2022
1,516
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 8.45 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.     - page 'moonstone' 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:#ffffff;
  34.     --text:#333;
  35.     --links: #6aa8bd;
  36.     --links-hover: #294a6d;
  37.     --borders:#eeeeee;
  38.     --icons: #36608c;
  39.     --lighter-text: #aaaaaa;
  40.   }
  41.  
  42. .tmblr-iframe {margin:.7rem;opacity:.6;-ms-transform: scale(0.85);-webkit-transform: scale(0.85); /* Safari */transform: scale(0.85);}
  43. .tmblr-iframe:hover {opacity:.8;}
  44.  
  45. ::-webkit-scrollbar-thumb:vertical {border-left:2px solid var(--borders);}
  46. ::-webkit-scrollbar {width:6px}
  47. ::-webkit-scrollbar-track-piece{margin:5px 0;}
  48.  
  49. pre {font-family:consolas;
  50.     white-space: pre-wrap;       /* css-3 */
  51.     white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  52.     white-space: -pre-wrap;      /* Opera 4- */
  53.     white-space: -o-pre-wrap;    /* Opera 7 */
  54.     word-wrap: break-word;}      /* Internet Explorer 5.5+ */
  55.  
  56. * {margin:0;padding:0;box-sizing: border-box;}
  57. p {margin:1rem 0}
  58. body, figure{margin:0;padding:0}
  59. html{font: 14px 'Karla', sans-serif;}
  60. body {font-size:14px;color:var(--text);background:var(--background);}
  61. a {text-decoration: none;color:var(--links);word-break:break-word;}
  62. a:hover {color:var(--links-hover);}
  63. blockquote {margin:0;padding:0;}
  64. img {max-width:100%;height: auto;display: block;margin:0}
  65. hr {border:0;border-top:1px solid var(--borders);margin:0;}
  66. ul,ol,li {list-style: none;margin:0;padding:0}
  67.  
  68. #wrapper {
  69.   width: 90vw;
  70.   max-width: 65rem;
  71.   margin:0 auto;
  72.   display: flex;
  73.   justify-content: center;
  74.   align-items: center;
  75.   height: 100vh;
  76. }
  77.  
  78. #flex {
  79.   background-color: var(--box-background);
  80.   overflow: auto;
  81.   width: 100%;
  82.   height: 80vh;
  83.   margin:5rem auto;
  84. }
  85.  
  86. /* header */
  87. header {
  88.   padding:3rem 4rem;
  89. }
  90.  
  91. .header-favicon {
  92.   width:5rem;
  93.   height:5rem;
  94.   border-radius: 100%;
  95.   object-fit: cover;
  96.   aspect-ratio: 1 / 1;
  97. }
  98.  
  99. #upper-header,#header-navigation ul {
  100.   display: flex;
  101.   justify-content: space-between;
  102.   align-items: center;
  103. }
  104.  
  105. /* header navigation */
  106.  
  107. #header-navigation li {
  108.   margin:0 2rem;
  109. }
  110.  
  111. #header-navigation i {
  112.   font-size: 1.1rem;
  113.   width:2.8rem;
  114.   height:2.8rem;
  115.   line-height: 2.8rem;
  116.   border:1px solid var(--borders);
  117.   border-radius: 100%;
  118.   text-align: center;
  119.   color:var(--icons);
  120.   transition-duration: .2s;
  121. }
  122.  
  123. #header-navigation li:hover i {
  124.   color: var(--box-background);
  125.   background-color: var(--icons);
  126. }
  127.  
  128. #page-title {
  129.   font:600 2rem 'Montserrat', sans-serif;
  130.   margin:2rem 0 0
  131. }
  132.  
  133. #username {
  134.   margin:.5rem 0 0;
  135.   font-size:1rem;
  136.   letter-spacing: 1px;
  137.   font-weight: 400;
  138.   color: var(--lighter-text);
  139. }
  140.  
  141. /* following and followers */
  142.  
  143. #header-counter {
  144.   display: flex;
  145.   margin:2rem 0 0;
  146.   text-transform: capitalize;
  147. }
  148.  
  149. #header-counter li {
  150.   margin-right: 2rem;
  151.   font-weight: 600;
  152.   font-size: 1.1rem;
  153. }
  154.  
  155. /* main content */
  156.  
  157. #divider {
  158.   margin:4rem 4rem 3rem
  159. }
  160. #divider-responsive {
  161.   display: none;
  162. }
  163.  
  164. #main-content {
  165.   padding:3rem 4rem 6rem;
  166.   display: flex;
  167.   flex-wrap: wrap;
  168.   justify-content: space-between;
  169. }
  170.  
  171. #about,#page-links {
  172.   width: 48%;
  173. }
  174.  
  175. #about {
  176.   line-height: 130%;
  177.   letter-spacing: .3px;
  178. }
  179.  
  180. #page-links {
  181.   text-align: right;
  182.   text-transform: capitalize;
  183.   letter-spacing: 1px;
  184. }
  185.  
  186. #page-links nav:last-of-type {
  187.   margin-bottom: 0;
  188. }
  189.  
  190. #page-links .fa-solid{
  191.   margin-left: 1rem;
  192.   font-size: .9rem;
  193. }
  194.  
  195. #page-links h3{
  196.   font-size: 1.4rem;
  197.   margin-bottom: 1rem;
  198. }
  199.  
  200. #links,#tags {
  201.   margin-bottom: 3rem;
  202. }
  203.  
  204. #links li,#tags li{
  205.   margin:1rem 0 1rem 2rem;
  206.   display: inline-block;
  207. }
  208.  
  209. #links a,#tags a{
  210.   color:var(--lighter-text)
  211. }
  212.  
  213. #links a:hover,#tags a:hover{
  214.   color: var(--links-hover);
  215. }
  216.  
  217. /* MEDIA */
  218.  
  219. @media only screen and (min-width:0) and (max-width:800px) {
  220.    
  221.  
  222.   #main-content {
  223.     display: block
  224.   }
  225.  
  226.   #about,#page-links {
  227.     width: 100%;
  228.   }
  229.  
  230.   #page-links {
  231.     margin-top: 3rem;
  232.   }
  233.  
  234.   #divider-responsive {
  235.     display: block;
  236.     margin:6rem 0
  237.   }
  238.  
  239.  
  240. }
  241. </style>
  242.    
  243. </head>
  244. <body>
  245.  
  246. <section id="wrapper"><div id="flex">
  247.  
  248. <header>
  249.  
  250. <div id="upper-header">
  251.    
  252.     <!-- header icon -->
  253.     <figure class="header-favicon"><img src="{favicon}" alt="favicon image" class="header-favicon"></figure>
  254.  
  255.     <!-- header links -->
  256.     <nav id="header-navigation"><ul>
  257.         <li><a title="home" href="/"><i class="fa-solid fa-home"></i></a></li>
  258.        
  259.         <li><a title="follow" href="https://www.tumblr.com/follow/{name}"><i class="fa-solid fa-plus"></i></a></li>
  260.        
  261.         <li><a title="go to dashboard" target="_blank" href="https://tumblr.com"><i class="fa-brands fa-tumblr"></i></a></li>
  262.     </ul></nav>
  263.  
  264. </div>
  265. <!-- upper header end -->
  266.  
  267.     <!-- page title -->
  268.     <h1 id="page-title">{title}</h1>
  269.  
  270.     <!-- your username -->
  271.     <h2 id="username">@username</h2>
  272.  
  273.     <!-- following and followers count -->
  274.     <ul id="header-counter">
  275.         <li>729 following</li>
  276.         <li>2921 followers</li>
  277.     </ul>
  278.  
  279. </header>
  280.  
  281. <hr id="divider">
  282.  
  283. <main id="main-content">
  284.  
  285. <!-- about start -->
  286. <article id="about">
  287.  
  288.     <!-- !! wrap you paragraphs between <p>paragraph</p> -->
  289.    
  290.     <p>Lorem <b>bold</b> ipsum dolor, sit amet consectetur adipisicing elit. Quas voluptatem aliquam odio? Sequi, necessitatibus praesentium. Sequi  <a href="">link</a> illum neque, et maxime ad saepe, natus excepturi quas distinctio recusandae porro temporibus ratione.</p>
  291.     <p>Lorem <b>bold</b> ipsum dolor, sit amet consectetur adipisicing elit. Quas voluptatem aliquam odio? Sequi, necessitatibus praesentium. Sequi  <a href="">link</a> illum neque, et maxime ad saepe, natus excepturi quas distinctio recusandae porro temporibus ratione.</p>
  292.     <p>Lorem <b>bold</b> ipsum dolor, sit amet consectetur adipisicing elit. Quas voluptatem aliquam odio? Sequi, necessitatibus praesentium. Sequi  <a href="">link</a> illum neque, et maxime ad saepe, natus excepturi quas distinctio recusandae porro temporibus ratione.</p>
  293.  
  294.     <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quas voluptatem aliquam odio? Sequi, necessitatibus praesentium. Sequi illum neque,  <em>italic</em> et maxime ad saepe, natus excepturi quas distinctio recusandae porro temporibus ratione.</p>
  295.  
  296. </article>
  297. <!-- about end -->
  298.  
  299.  
  300. <hr id="divider-responsive">
  301.  
  302. <!-- tags and links start -->
  303. <article id="page-links">
  304.    
  305.     <!-- links -->
  306.     <nav id="links">
  307.  
  308.         <h3>links <i class="fa-solid fa-chevron-down"></i></h3>
  309.    
  310.     <ul>
  311.  
  312.         <li><a href="">link</a></li>
  313.         <li><a href="">link</a></li>
  314.         <li><a href="">link</a></li>
  315.         <li><a href="">link</a></li>
  316.     </ul></nav>
  317.    
  318.    
  319.     <!-- tags -->
  320.     <nav id="tags">
  321.    
  322.         <h3>tags <i class="fa-solid fa-chevron-down"></i></h3>
  323.    
  324.     <ul>
  325.         <li><a href="">tag</a></li>
  326.         <li><a href="">tag</a></li>
  327.         <li><a href="">tag</a></li>
  328.         <li><a href="">tag</a></li>
  329.         <li><a href="">tag</a></li>
  330.     </ul></nav>
  331.  
  332. </article>
  333. <!-- tags and links end -->
  334.  
  335. </main>
  336. </div></section>
  337.  
  338.  
  339. <!-- do not touch -->
  340. <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>
  341.  
  342. <!-- icons font -->
  343. <script src="https://kit.fontawesome.com/0993e30c04.js" crossorigin="anonymous"></script>
  344. </body>
  345. </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!