API tools faq
paste
penvmbral

page 01 - seafoam (about)

penvmbral
Feb 4th, 2019
1,534
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 7.29 KB | None | 0 0
raw download clone embed print report
  1. <!doctype HTML>
  2. <html>
  3.  
  4. <!-- page 01: seafoam (about) by penvmbral @ tumblr -->
  5.  
  6. <head>
  7. <title>{Title}</title>
  8. <link rel="shortcut icon" href="{Favicon}">
  9.  
  10. <!--Fonts-->
  11. <link href="https://fonts.googleapis.com/css?family=Lato|Noto+Serif+SC" rel="stylesheet">
  12. <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  13.  
  14. <style type="text/css">
  15.     /* Scrollbar and Selection Styling */
  16.     /* Custom scrollbars are not visible in Firefox. */
  17.    
  18.     ::-webkit-scrollbar-thumb:vertical {
  19.         background-color: #B9DBD1;
  20.         height:5px;
  21.         border: #fff 1px solid;
  22.     }
  23.    
  24.     ::-webkit-scrollbar-thumb:horizontal {
  25.         background-color: #B9DBD1;
  26.         height:5px!important;
  27.         border: #fff 1px solid;
  28.     }
  29.  
  30.     ::-webkit-scrollbar {
  31.         background-color: #ddd;
  32.         border: #fff 2px solid;
  33.         height:3px;
  34.         width:5px;
  35.     }
  36.  
  37.     ::-moz-selection {
  38.        background-color: #B9DBD1;
  39.        color: #477075;
  40.     }
  41.  
  42.     ::selection {
  43.        background-color: #B9DBD1;
  44.        color: #477075;
  45.     }
  46.    
  47.     /* Tumblr Controls Styling */
  48.    
  49.     .tmblr-iframe {
  50.         white-space: nowrap;
  51.         -webkit-filter: invert(100%);
  52.         -moz-filter: invert(100%);
  53.         -o-filter: invert(100%);
  54.         -ms-filter: invert(100%);
  55.         filter: invert(100%);
  56.         opacity: .2;
  57.         transition: .4s;
  58.         -webkit-transition: .4s;
  59.         -moz-transition: .4s;
  60.         position: fixed!important;
  61.         right: -20px!important;
  62.         transform:scale(0.5,0.5);
  63.     }
  64.    
  65.     .tmblr-iframe:hover { opacity:1; }
  66.    
  67.     /* Content Styling */
  68.    
  69.     a {
  70.         text-decoration: none;
  71.         color: #7f7f7f;
  72.         border-bottom: #ddd 1px solid;
  73.         -webkit-transition-duration: 0.5s;
  74.     }
  75.    
  76.     a:hover {
  77.         color: #000;
  78.         border-bottom: 1px #80C7C2 solid;
  79.     }
  80.    
  81.     b, strong, i, em {
  82.         color: #000;
  83.     }
  84.    
  85.     u, underline {
  86.         text-decoration: none;
  87.         border-bottom: 1px #000 solid;
  88.     }
  89.    
  90.     p {
  91.         text-indent: 15px;
  92.     }
  93.    
  94.     ul {
  95.         list-style-type: square;
  96.         color: #80C7C2;
  97.     }
  98.    
  99.     ol {
  100.         list-style-type: decimal-leading-zero;
  101.         color: #80C7C2;
  102.     }
  103.    
  104.     li span {
  105.         color: #777;
  106.     }
  107.    
  108.     blockquote {
  109.         background: #fafafa;
  110.         width: 75%;
  111.         padding: 10px;
  112.         margin: auto;
  113.         font-family: 'Noto Serif SC', serif;
  114.         font-style: italic;
  115.     }
  116.    
  117.     h1, h2, h3, h4, h5, h6, h7, h8 {
  118.         font-family: 'Noto Serif SC', serif;
  119.     }
  120.    
  121.     /* Page Styling */
  122.    
  123.     body {
  124.         background: #fff;
  125.         font-family: 'Lato', sans-serif;
  126.         font-size: 12px;
  127.         color: #555;
  128.         line-height: 150%;
  129.     }
  130.    
  131.     #contain {
  132.         width: 500px;
  133.         height: 400px;
  134.         margin: auto;
  135.         margin-top: 7%;
  136.     }
  137.    
  138.     .info {
  139.         position: relative;
  140.         width: 250px;
  141.         float: left;
  142.         height: 70px;
  143.         padding: 5px;
  144.         margin: 5px;
  145.         border-right: #ddd 1px solid;
  146.     }
  147.  
  148.         .info img{
  149.             float: left;
  150.             width: 70px;
  151.             height: 70px;
  152.             border: 1px transparent solid;
  153.             margin: 5px;
  154.             margin-top: 3px;
  155.             border-radius: 6px;
  156.         }
  157.        
  158.         .t {
  159.             text-transform: lowercase;
  160.             font-family: 'Noto Serif SC', serif;
  161.             font-weight: bold;
  162.             color: #000;
  163.         }
  164.    
  165.     .nav {
  166.         position: relative;
  167.         width: 50%;
  168.         float: left;
  169.         height: 40px;
  170.         margin: 5px;
  171.         vertical-align: middle;
  172.     }
  173.    
  174.         .nav a {
  175.             display: inline-block;
  176.             font-style: italic;
  177.             text-transform: lowercase;
  178.             padding: 2px;
  179.             border: 1px transparent solid;
  180.             vertical-align: middle;
  181.         }
  182.        
  183.         .nav a:hover {
  184.             color: #000;
  185.             border-bottom: #80C7C2 1px solid;
  186.             border-top: #80C7C2 1px solid;
  187.         }
  188.    
  189.     .social {
  190.         position: relative;
  191.         width: 225px;
  192.         height: 70px;
  193.         float: right;
  194.         text-align: center;
  195.     }
  196.    
  197.         .valign {
  198.             float: left;
  199.             width: 100%;
  200.             height: 50%;
  201.             margin-bottom: -3%;
  202.         }
  203.        
  204.         .slink {
  205.             clear: both;
  206.             height: 30px;
  207.         }
  208.        
  209.         .social i {
  210.             display: inline-block;
  211.             font-size: 27px;
  212.             width: 35px;
  213.             height: 30px;
  214.             padding-top: 2px;
  215.             margin-left: 7px;
  216.             margin-right: 7px;
  217.             text-align: center;
  218.         }
  219.        
  220.         .social a {
  221.             border: none;
  222.         }
  223.        
  224.         .social a i {
  225.             color: #ddd;
  226.             -webkit-transition-duration: 0.5s;
  227.         }
  228.        
  229.         .social a:hover i {
  230.             color: #B9DBD1;
  231.         }
  232.    
  233.     .content {
  234.         position: relative;
  235.         clear: both;
  236.         margin-top: 190px;
  237.         width: 490px;
  238.         padding: 10px;
  239.         height: 300px;
  240.         overflow-y: scroll;
  241.     }
  242.    
  243.     .c {position: absolute; bottom: 10px; right: 10px; width: 19px; height: 10px; padding-top: 1px; padding-bottom: 10px; padding-right: 3px; text-align: center; font-style: italic; border: 1px #ddd solid; font-family: 'Noto Serif SC', serif; opacity: 0.7; -webkit-transition-duration: 0.5s;}
  244.     .c:hover { opacity: 1; border: #B9DBD1 1px solid; }
  245.     .c a { border: none; }
  246.     .c a:hover { color: #B9DBD1; }
  247.    
  248. </style>
  249. </head>
  250. <body>
  251.     <div id="contain">
  252.     <div class="info">
  253.         <img class="icon" src="{PortraitURL-128}" />
  254.         <span class="t">name &middot;</span> your name<br />
  255.         <span class="t">pronouns &middot;</span> they/them<br />
  256.         <span class="t">zodiac &middot;</span> virgo<br />
  257.         <span class="t">mbti &middot;</span> xxxx
  258.     </div>
  259.    
  260.     <div class="social">
  261.         <div class="valign">&nbsp;</div>
  262.         <div class="slink">
  263.         <a href="#"><i class="fab fa-twitter"></i></a>
  264.         <a href="#"><i class="fab fa-instagram"></i></a>
  265.         <a href="#"><i class="fab fa-spotify"></i></a>
  266.         <a href="#"><i class="fab fa-pinterest"></i></a>
  267.         </div>
  268.     </div>
  269.    
  270.     <div class="content">
  271.         <p><b>bold</b> <i>italic</i> <u>underline</u> <strike>strikethrough</strike> <a href="#">link</a></p>
  272.         <blockquote>blockquote</blockquote>
  273.         <ul>
  274.             <li><span>unordered list content must be in span tags or the text will the the same color as the bullet</span></li>
  275.         </ul>
  276.        
  277.         <ol>
  278.             <li><span>ordered list content must also be in span tags or the text will be the same color as the numbers.</span></li>
  279.         </ol>
  280.        
  281.         <p>This box will stretch to be up to 300px tall. If you go over this height it will scroll automatically.</p>
  282.        
  283.         <p>Basic HTML knowledge is required to use this page. Questions can be directed to penvmbral @ tumblr but I may not answer right away and it's important to know that Google is your friend. If you just want to change a color, consider using resources like Google's built-in color picker or <a href="https://color.adobe.com/create/color-wheel/">Adobe's Color CC</a>. Background colors are set with the <i>&ldquo;background&rdquo;</i> CSS selector and font colors are set by <i>&ldquo;color&rdquo;</i>.</p>
  284.        
  285.         <p>Paragraphs must be wrapped in &lt;p&gt; tags in order to be indented and spaced correctly. You <b>can</b> just make two linebreaks with two &lt;br /&gt; but the result won't be indented.</p>
  286.        
  287.         <p>Again, when in doubt, Google is your friend.</p>
  288.        
  289.         <p>Social link icons are in the embedded webfont, <a href="https://origin.fontawesome.com/">Font Awesome</a>. If you want to swap out the icons with ones of your own, then check the docs for a list of icons you can use. It says on their website, but I'll say it here too; please don't use brand-related icons for things not related to the brands themselves. Here, they are meant to link to your profiles on those respective websites.</p>
  290.     </div>
  291.    
  292.     <div class="nav">
  293.         <a href="/">home</a>
  294.         <a href="/ask">message</a>
  295.         <a href="/">extra</a>
  296.         <a href="/">extra</a>
  297.         <a href="/">extra</a>
  298.         <a href="/">extra</a>
  299.     </div>
  300.  
  301.     <!--CREDIT DO NOT ERASE-->
  302.     <div class="c"><a href="https://penvmbral.tumblr.com">v</a></div>
  303.    
  304. </body>
  305. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!