API tools faq
paste
azriels

illyria

azriels
Dec 17th, 2019
897
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 9.84 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <head>
  3. <!--
  4.  
  5.    PAGE 01. ILLYRIA
  6.        by @azriels
  7.      
  8.            - do not touch the credit pls ty
  9.            - tumblr controls by @cyantists
  10.            - base code by @sorrism
  11.            - if u have questions, mssg azriels.tumblr.com/ask
  12.          
  13.    thank you for using!
  14.  
  15. -->
  16.  
  17.  
  18. <title>about me</title> <!--browser tab title-->
  19.  
  20.  <!--scripts and fonts -->
  21. <link rel="shortcut icon" href="{favicon}">
  22. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  23. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  24.  
  25. <!--CSS customization here. -->
  26.  
  27. <style type="text/css">
  28.  
  29. /* tumblr controls by @cyantists*/
  30. iframe.tmblr-iframe {
  31.     z-index:99999999999999!important;
  32.     top:0!important;
  33.     right:0!important;
  34.     opacity:0.4!important;
  35.     color:#ccc;
  36.     /* delete invert(1) from here */
  37.         filter:invert(1) contrast(150%);
  38.         -webkit-filter:invert(1) contrast(150%);
  39.         -o-filter:invert(1) contrast(150%);
  40.         -moz-filter:invert(1) contrast(150%);
  41.         -ms-filter:invert(1) contrast(150%);
  42.     /* to here if your blog has a dark background */
  43.     transform:scale(0.65);
  44.     transform-origin:100% 0;
  45.     -webkit-transform:scale(0.65);
  46.     -webkit-transform-origin:100% 0;
  47.     -o-transform:scale(0.65);
  48.     -o-transform-origin:100% 0;
  49.     -moz-transform:scale(0.65);
  50.     -moz-transform-origin:100% 0;
  51.     -ms-transform:scale(0.65);
  52.     -ms-transform-origin:100% 0;}
  53.  
  54. iframe.tmblr-iframe:hover {
  55.     opacity:0.6!important;
  56. }
  57.  
  58. /*tumblr controls and lightbox*/
  59. .tmblr-lightbox {
  60.     background:rgba({RGBcolor:background}, .95)!important;
  61.     }
  62.  
  63. .tmblr-lightbox img {
  64.     opacity:0;
  65. }
  66.  
  67. .lightbox-caption {
  68.     color:#979797!important;
  69.     font-family:inherit!important;
  70.     font-size:1em!important;
  71.     font-weight:normal!important;
  72.     text-shadow:none!important;
  73. }
  74.  
  75. .lightbox-image {
  76.     -moz-box-shadow:none!important;
  77.     -webkit-box-shadow:none!important;
  78.     box-shadow:none!important;
  79.     -moz-border-radius:0px!important;
  80.     -webkit-border-radius:0px!important;
  81.     border-radius:0px!important;
  82.     padding:0px!important;
  83.     border:0!important;  
  84.     opacity:1!important;
  85. }
  86.  
  87. .vignette {
  88.     opacity:0!Important;
  89. }
  90.  
  91. .iframe-controls--desktop {
  92.     white-space:nowrap!important;
  93.     top:5px!important;
  94.     right:5px!important;
  95.     opacity:1!important;
  96.     position:fixed!important;
  97. }
  98.  
  99. /* tooltip*/
  100. #s-m-t-tooltip{
  101.     position:absolute;
  102.     margin:12px;
  103.     max-width:250px;
  104.     text-transform:lowercase;
  105.     letter-spacing:.5px;
  106.     line-height:1em;
  107.     z-index:999;
  108.     padding:9px;
  109.     border-radius:3px;
  110.     background:#eaeaea;
  111.     color:#bababa;
  112.     font-weight:700;
  113.     letter-spacing:1px;
  114.     font-size:9.5px;
  115.     font-family:'Roboto', sans-serif;
  116. }
  117.  
  118. /*main structure*/
  119. body {
  120.     background:#fefefe; /*change background color here*/
  121.     color:#7D7D7D;
  122.     font:10px/1.4em georgia, serif;
  123.     word-wrap:break-word;    
  124.     text-align:center;
  125.     margin:0;
  126. }
  127.  
  128. a {
  129.     color:#ccc; /*change link color here*/
  130.     text-decoration:none;
  131.     transition:all .3s linear;    
  132.     -webkit-transition:all .3s linear;
  133.     -o-transition:all .3s linear;
  134.     -moz-transition:all .3s linear;      
  135. }
  136.  
  137. a, a img {
  138.     cursor:pointer;
  139. }
  140.  
  141. a:hover {
  142.     color:#A52A2A!important; /* change link hover color here */
  143.     text-decoration:none;
  144. }
  145.  
  146. img {
  147.     opacity:1;
  148.     border:0;
  149.     text-decoration:none;
  150.     max-width:100%;
  151.     height:auto;
  152.     display:block;
  153. }
  154.  
  155. blockquote {
  156.     padding:.25em 0 .25em 15px;
  157.     margin:.5em 0;
  158.     border-left:1px solid #eaeaea;
  159. }
  160.  
  161. pre {
  162.     padding:0;
  163.     margin:0;
  164.     line-height:inherit!important;
  165.     background:transparent;
  166.     font-family:inherit!Important;
  167.     font-size:inherit!important;
  168.     white-space:pre-wrap;
  169.     white-space:-moz-pre-wrap;
  170.     white-space:-pre-wrap;
  171.     white-space:-o-pre-wrap;
  172.     word-wrap:break-word;
  173. }
  174.  
  175. p {
  176.     margin:1em 0;
  177. }
  178.  
  179. p:first-of-type {
  180.     margin-top:0;
  181. }
  182.  
  183. p:last-of-type {
  184.     margin-bottom:0;
  185. }
  186.  
  187. b, strong, b a, strong a {
  188.     font-weight:bold!important;
  189.     color:{color:title};
  190. }
  191.  
  192. small, big, sub, pre {
  193.     font-size:1em!important;
  194.     line-height:1.4em!important;
  195.     vertical-align:baseline!important;
  196. }
  197.  
  198. h1, h2, h3, h4, {
  199.     margin:1.5em 0;
  200.     font-size:1.5em;
  201.     padding:0;
  202.     color:#444;
  203.     font-weight:bold;
  204. }
  205.  
  206. h5 {
  207.     margin:1px;
  208.     font-weight:bold;
  209. }
  210.  
  211. .posts h1:first-child, .posts h2:first-child, .posts h3:first-child, .posts h4:first-child {margin-top:0;}
  212.  
  213. /*header*/
  214. .header {
  215.     width:500px; /*make sure this matches width of the box*/
  216.     top:18%;
  217.     left:50%;
  218.     transform:translate(-50%,-50%);
  219.     position:fixed;
  220.  
  221. }
  222.  
  223. .himg {
  224.     display:block;
  225.     width:60px;
  226.     height:60px;
  227.     -moz-border-radius:100px;
  228.     -webkit-border-radius:100px;
  229.     border-radius:100px;
  230.     margin:0 auto 20px auto;
  231.     border:5px solid {color:#A52A2A};
  232. }
  233.  
  234. #description {
  235.     margin-top:10px;
  236. }
  237.  
  238. nav {
  239.     display:block;
  240.     margin-top:10px;
  241. }
  242.  
  243. nav a {
  244.     display:inline-block;
  245.     margin:0 5px;
  246.     border:0;
  247. }
  248.  
  249. /* b o x */
  250. section {
  251.     width:500px; /* width of the box */
  252.     height:350px;
  253.     top:60%;
  254.     left:50%;
  255.     transform:translate(-50%,-50%);
  256.     position:fixed;
  257.     border:1px solid #eaeaea;
  258.     padding:20px;
  259.     background:#fff;
  260.     border-radius:5px;
  261. }
  262.  
  263. /*info bar*/
  264. .h {
  265.     margin-bottom:10px;
  266.     padding-bottom:15px;
  267.     text-align:left;
  268.     font-style:italic;
  269.     line-height:40px;
  270.     font-size:13px;
  271.     border-bottom:1px solid #eaeaea;
  272. }
  273.  
  274. .h a {
  275.     border:none;
  276.     margin-left:15px;
  277. }
  278.  
  279. .details {
  280.     display:grid;
  281.     grid-template-columns:25% 25% 25% 25%;
  282.     grid-gap:4px;
  283.     margin-bottom:4px;
  284. }
  285.  
  286. .details span {
  287.     background-color:#fafafa;
  288.     border:1px solid #f7f7f7;
  289.     font-size:10px;
  290.     padding:1px 3px;
  291.     border-radius:2px;
  292. }
  293.  
  294. .details span b {
  295.     font-size:9px;
  296.     letter-spacing:0.5px;
  297.     margin-right:1px;
  298. }
  299.  
  300. /**about block**/
  301. .abt {
  302.     text-align:left;
  303.     font-style:italic;
  304.     font-size:10px;
  305. }
  306.  
  307. .aquote {
  308.     text-align:right;
  309.     font-size:11px!important;
  310.  
  311. }
  312.  
  313. .content {
  314.     line-height:20px;
  315.     max-height:200px;
  316.     overflow:scroll;
  317.     text-align:justify;
  318.     margin-bottom:4px;
  319.     border-bottom:1px solid #eaeaea;
  320. }
  321.  
  322. /*content scrollbar*/
  323. .content::-webkit-scrollbar {
  324.     width:1px;
  325. }
  326.  
  327. .content::-webkit-scrollbar-thumb {
  328.     background:#eaeaea;
  329. }
  330.  
  331.  
  332. .tags {
  333.     margin-top:15px;
  334.     padding-bottom:15px;
  335.     margin-bottom:10px;
  336.     display:grid;
  337.     grid-template-columns:10% 30% 30% 30%;
  338.     grid-gap:4px;
  339.     margin-bottom:4px;
  340. }
  341.  
  342. .tags span {
  343.     background-color:#fafafa;
  344.     border:1px solid #f7f7f7;
  345.     font-size:10px;
  346.     padding:1px 3px;
  347.     border-radius:2px;
  348. }
  349.  
  350. .tags span b {
  351.     font-size:9px;
  352.     letter-spacing:0.5px;
  353.     margin-right:1px;
  354. }
  355.  
  356. /** credit. no touchy!!!!!!!! **/
  357. .c {
  358.     position:fixed;
  359.     right:15px;
  360.     bottom:15px;
  361.     font-size:10px;
  362.     z-index:5;
  363. }
  364.  
  365. </style>
  366.  
  367. </head>
  368.  
  369. <body>
  370.  
  371. <!--edit icon, desc, and links here -->
  372. <div class="header">
  373.     <img class="himg" src="{PortraitURL-128}"/> <!--currently your default icon. add any image link here to change the icon                     to whatever you want.-->
  374.    
  375.     <div id="description">
  376.     <!--description-->
  377.         ❝ a song lyric, a quote, anything you want, or nothing at all ❞
  378.     <!--dont delete the quotation marks, otherwise they'll look weird lol-->
  379.     </div>
  380.        
  381.     <nav> <!--links. you can add as many as you want -->
  382.     <a href="/">home</a>
  383.     <a href="/ask">ask</a>
  384.     <a href="/archive">archive</a>
  385.     <a href="/">link1</a>
  386.     <a href="/">link2</a>
  387.     <a href="/">link3</a>
  388.     </nav>
  389.    
  390. </div>
  391.  
  392. <section>
  393.     <div class="h">
  394.         <div class="details">
  395. <!--this is where u fill in the info boxes. you can change anything in between the <b></b> to whatever category you want. // you can delete as many as you want and the box will adjust (try to keep them in groups of four though!!!) -->
  396.                 <span><b>name:</b> </span>
  397.                 <span><b>age:</b> </span>
  398.                 <span><b>pronouns:</b> </span>
  399.                 <span><b>birthday:</b> </span>
  400.                 <span><b>mbti:</b> </span>
  401.                 <span><b>location:</b> </span>
  402.                 <span><b>sign:</b> </span>
  403.                 <span><b>sexuality:</b> </span>
  404.         </div>
  405.     </div>
  406.  
  407.     <div class="content">
  408.         <h5 class="abt">about: </h5> <!--title/heading -->      
  409. <!-- this is the body section of your about. you can use <b>bold text</b>, <i>italics,</i> <s>strikethroughs</s> and <blockquote>blockquotes</blockquote> you can add as much text as you want. the box will scroll. use <p> to denote new paragraphs  -->
  410.        
  411.  
  412.  
  413. <!--up to here-->
  414.     </div>
  415.    
  416.     <div class="tags">
  417.         <!--a space for u to add your favorite/most important or most used tags! please keep it at three only -->
  418.         <h5 class="abt">tags:</h5>
  419.             <span><a href="/">#tag1</a></span>
  420.             <span><a href="/">#tag2</a></span>
  421.             <span><a href="/">#tag3</a></span>
  422.     </div>
  423.    
  424. </section>
  425.  
  426. <!-- scripts -->
  427. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>  
  428. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  429. <script>
  430. jQuery.noConflict();
  431. (function($){
  432. $(document).ready(function(){
  433. $("a[title],img[title],[title]").style_my_tooltips({
  434. tip_follows_cursor:true,
  435. tip_delay_time:30,
  436. tip_fade_speed:300,
  437. attribute:"title"
  438. });
  439. });
  440. })(jQuery);
  441. </script>
  442.  
  443. <!--credit. no touchy!-->
  444.  
  445. <div class="c"><a href="http://azriels.tumblr.com" title="azriels">☾</a></div>
  446.  
  447.    
  448.    
  449. </body>
  450.    
  451. </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!