API tools faq
paste
southcodes

ABOUT #2: rookie

southcodes
Feb 1st, 2017
738
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 6.49 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2.    
  3.     about #2 'rookie' by sur 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/ask
  7.    
  8. -->
  9.  
  10. <!DOCTYPE html>
  11. <head>
  12.  
  13.     <title>{Title}</title>
  14.  
  15.     <link rel="shortcut icon" href="{favicon}">
  16.     <link rel="alternate" type="application/rss+xml" href="{RSS}">
  17.  
  18. <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
  19. <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
  20.  
  21. <style type="text/css">
  22.  
  23. ::-webkit-scrollbar-thumb:vertical {
  24.     background-color: #ddd;
  25.     height: 0px;
  26.     border: 3px solid #fff;
  27. }
  28.  
  29. ::-webkit-scrollbar {
  30.     background-color: inherit;
  31.     height:0px;
  32.     width:7px;
  33. }
  34.  
  35. .tmblr-iframe {
  36.     margin:10px;
  37.     opacity:.2;
  38.     -moz-transition-duration: 0.2s;
  39.     -o-transition-duration: 0.2s;
  40.     -webkit-transition-duration: 0.2s;
  41.     transition-duration: 0.2s;
  42. }
  43.  
  44. .tmblr-iframe:hover{
  45.     opacity:.65;
  46.     -moz-transition-duration: 0.6s;
  47.     -o-transition-duration: 0.6s;
  48.     -webkit-transition-duration: 0.6s;
  49.     transition-duration: 0.6s;
  50. }
  51.  
  52. #s-m-t-tooltip{
  53.     font-family:calibri;
  54.     max-width:300px;
  55.     margin-top:25px;
  56.     margin-left:15px;
  57.     z-index:999999;
  58.     letter-spacing:1.6px;
  59.     text-transform:uppercase;
  60.     font-size:8.5px;
  61.     border: solid 1px #ddd;
  62.     background-color:#fcfcfc;
  63.     color:#666;
  64.     padding:3px 5px;
  65. }
  66.  
  67. body {
  68.     color:#000;
  69.     font-size:13px;
  70.     font-family: 'Lato', sans-serif;
  71.     background-color:#fefefe;
  72.     letter-spacing:.7px;
  73. }
  74.  
  75. a{
  76.     color:#8c8c8c;
  77.     text-decoration:none;
  78.     -moz-transition-duration: 0.6s;
  79.     -o-transition-duration: 0.6s;
  80.     -webkit-transition-duration: 0.6s;
  81.     transition-duration: 0.6s;
  82. }
  83.  
  84. a:hover{
  85.     color:#000;
  86.     -moz-transition-duration: 0.6s;
  87.     -o-transition-duration: 0.6s;
  88.     -webkit-transition-duration: 0.6s;
  89.     transition-duration: 0.6s;
  90. }
  91.  
  92.                 /*              container                */
  93.  
  94. .container {
  95.     width:520px;
  96.     position:absolute;
  97.     left:50%;
  98.     top:50%;
  99.     -webkit-transform: translateX(-50%) translateY(-50%);
  100.     -moz-transform: translateX(-50%) translateY(-50%);
  101.     -ms-transform: translateX(-50%) translateY(-50%);
  102.     transform: translateX(-50%) translateY(-50%);
  103. }
  104.  
  105. .header {
  106.     background:#fdfdfd;
  107.     border: 1px solid #ededed;
  108.     padding:5px 0;
  109.     margin: 0 0 30px;
  110. }
  111.  
  112. .title {
  113.     letter-spacing:1.5px;
  114.     font-size:14px;
  115.     font-family:montserrat;
  116.     margin-bottom:7px;
  117.     text-transform:uppercase;
  118.     text-align:center;
  119. }
  120.  
  121. .title a{
  122.     color:#000;
  123. }
  124.  
  125. .links {
  126.     font-family:calibri;
  127.     font-size:11px;
  128.     letter-spacing:1.5px;
  129.     text-transform:uppercase;
  130.     text-align:center;
  131. }
  132.  
  133. .links a{
  134.     padding-right:7px;
  135. }
  136.  
  137. .links a:last-child{
  138.     padding-right:0px;
  139. }
  140.  
  141. .about {
  142.     text-align:justify;
  143.     line-height:23px;
  144.     min-height:120px;
  145. }
  146.  
  147. .minibox {
  148.     width:250px;
  149.     height:110px;
  150.     display:inline-block;
  151.     float:right;
  152.     margin: 3px 0 0 10px;
  153.     border: 1px solid #ededed;
  154.     background:#fcfcfc;
  155. }
  156.  
  157. .image {
  158.     display:inline-block;
  159. }
  160.  
  161. .image img {
  162.     width:110px;
  163.     height:110px;
  164. }
  165.  
  166. .quote{
  167.     height:100px;
  168.     margin-top:5px;
  169.     display:inline-block;
  170.     float:right;
  171.     background:#fdfdfd;
  172. }
  173.  
  174. .quotetext {
  175.     width:130px;
  176.     height:100px;
  177.     overflow:auto;
  178.     margin:auto;
  179.     line-height:18px;
  180.     text-align:center;
  181.     font-size:11px;
  182.     letter-spacing:1px;
  183.     display: flex;
  184.     justify-content: center;
  185.     flex-direction: column; /* if the quote needs a scroll, delete this line */
  186.     padding-right:5px;
  187. }
  188.  
  189. .navi {
  190.     font-style:italic;
  191.     line-height:26px;
  192.     font-size:11.5px;
  193. }
  194.  
  195. .navi a{
  196.     padding:0 0 0 15px;
  197. }
  198.  
  199. span.ltitle {
  200.     padding-right:3px;
  201.     font-weight:bold;
  202. }
  203.  
  204. span.line {
  205.     padding-right:15px;
  206. }
  207.  
  208. span.line:last-child {
  209.     padding-right:0px;
  210. }
  211.  
  212. .details{
  213.     margin:20px 0;
  214.     font-size:12px;
  215.     text-align:center;
  216.     letter-spacing:1px;
  217.     text-transform:lowercase;
  218.     line-height:18px;
  219. }
  220.  
  221. .border {
  222.     height:1px;
  223.     width:250px;
  224.     margin: 23px auto 20px;
  225.     background:#ddd;
  226. }
  227.  
  228. .credit {
  229.     font-family:calibri;
  230.     position:fixed;
  231.     bottom:10px;
  232.     right:10px;
  233. }
  234.  
  235. .credit a{
  236.     color:#666;
  237.     font-size:11px;
  238.     font-variant:small-caps;
  239. }
  240.  
  241. </style>
  242. </head>
  243.  
  244. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  245. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  246. <script>
  247. (function($){
  248. $(document).ready(function(){
  249. $("a[title]").style_my_tooltips({
  250. tip_follows_cursor:true,
  251. tip_delay_time:30,
  252. tip_fade_speed:300,
  253. attribute:"title"
  254. });
  255. });
  256. })(jQuery);
  257. </script>
  258.  
  259. <body>
  260. <div class="container">
  261.  
  262.  
  263. <div class="header">
  264.     <div class="title">about title</div>
  265.     <div class="links">
  266.         <a href="/">return</a>
  267.         <a href="/ask">inbox</a>
  268.         <a href="https://www.tumblr.com/">dash</a>
  269.     </div>
  270. </div>
  271.  
  272. <div class="minibox">
  273. <div class="quote">
  274.     <!-- if this text is long and needs a scroll bar, search for '.quotetext' in     the code  -->
  275.      <div class="quotetext">add something, if you wish</div>
  276. </div>
  277.    
  278. <div class="image"><a href="/"><img src="IMG URL"/></a></div>
  279.  
  280. </div>
  281.  
  282. <div class="about">
  283.     this is your about, write freely
  284.    
  285.     <!-- if you dont want this text delete from this line+ -->
  286.     <div class="extraq" style="text-align:center;font-style:italic;font-size:11px; width:390px; margin:20px auto 0px;">« this is another optional space, you should try to make the text above long enough so this fits under the image »
  287. </div>
  288.     <!-- +to this line -->
  289.    
  290. </div>
  291.  
  292. <div class="details">
  293.         <span class="line"><b>title</b>: xxxxxx</span>
  294.         <span class="line"><b>title</b>: xxx</span>
  295. </div>
  296.  
  297. <div class="border"></div>
  298.  
  299. <div class="navi">
  300.  
  301.     <!-- start 1st links (add as many as you want!) -->
  302.     <span class="ltitle">title 1</span> —
  303.         <a href="/">link 1</a>
  304.         <a href="/">link 2</a>
  305.     <!-- end 1st links -->
  306.    
  307.     <!-- start 2nd links -->
  308.     <br><span class="ltitle">title 2</span> —
  309.         <a href="/">link 1</a>
  310.         <a href="/">link 2</a>
  311.     <!-- end 2nd links -->
  312.    
  313. </div>
  314.  
  315. </div>
  316. <!-- keep intact <3 -->
  317. <div class="credit"><a href="http://southcodes.tumblr.com" title="southcodes">s.</a></div>
  318.  
  319. </body>
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!