API tools faq
paste
darianella

"Sociopathic Brilliance" tumblr about me page HTML code

darianella
Jul 2nd, 2013
1,172
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 13.57 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head><title>{Title}</title>
  4. <link rel="shortcut icon" href="{Favicon}">
  5. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  6.  
  7. <link href='http://fonts.googleapis.com/css?family=Sorts+Mill+Goudy:400,400italic' rel='stylesheet' type='text/css'>
  8.  
  9. <style type="text/css">
  10.  
  11. /*basics*/
  12.  
  13. ::-webkit-scrollbar {
  14.     width: 7px;
  15.     height: 7px;
  16.     /*you want to change the color of the scrollbar background? here's where to look*/
  17.     background-color:#c7c7c7;
  18. }
  19.  
  20. ::-webkit-scrollbar-thumb {
  21.     /*want to change the color of the scrollbar tab? yep. right there.*/
  22.     background: #232323;
  23. }
  24.  
  25. @font-face{
  26.     font-family: 'Sorts Mill Goudy', serif;
  27. }
  28.  
  29. iframe{
  30.     opacity: 0.9;
  31.     filter:alpha(opacity=90);
  32.     -moz-opacity: 0.9;
  33.     -khtml-opacity: 0.9;
  34. }
  35.  
  36. iframe#tumblr_controls {
  37.     right:3px !important; position: fixed !important;-webkit-transition: opacity 0.7s linear;opacity: 0.2;-webkit-transition: all 0.8s ease-out;-moz-transition: all 0.8s ease-out;transition: all 0.8s ease-out;}
  38.  
  39. iframe#tumblr_controls:hover{-webkit-transition: opacity 0.7s linear;opacity: 1;-webkit-transition: all 0.4s ease-out;-moz-transition: all 0.4s ease-out;transition: all 0.4s ease-out;}
  40.  
  41.  
  42.  
  43. /*basic derps*/
  44.  
  45. body{
  46.     margin-top:0;
  47.     margin-left:0;
  48.     /*you know the drill by now--that controls the color, size, and font family of your body text. right below that is the spot where you can put the image you want for your background url. in this case, it'll be your lower background. remember to keep your apostrophes, though!*/
  49.     color:#2b2929;
  50.     font-size:10px;
  51.     font-family:trebuchet ms;
  52.     line-height:100%;
  53.     background-image:url('https://lh5.googleusercontent.com/-UloCFVzpLZ4/UOSrh7npuWI/AAAAAAAADmA/dRJyqWrZNNk/s500/solid.png');
  54.     background-attachment: fixed;
  55.     background-repeat: repeat;
  56. }
  57.  
  58. a{
  59.     text-decoration:none;
  60.     outline:none;
  61.     -moz-outline-style:none;
  62.     /*the color of links within your text boxes, yo.*/
  63.     color:#5a0c0c;
  64.     -webkit-transition: all 0.5s linear;
  65.     -moz-transition: all 0.5s linear;
  66.     -o-transition: all 0.5s linear;
  67. }
  68.  
  69.  
  70. em{
  71.     /*color of italic text*/
  72.     color:#3d0f0f;
  73. }
  74.  
  75. strong{
  76.     /*color of bolded text*/
  77.     color:#222121;
  78.     font-weight:strong;
  79. }
  80.  
  81. img{
  82.     border:none;
  83. }
  84.  
  85. blockquote{
  86.     padding:5px;
  87.     padding-left:10px;
  88.     border-left:2px solid #ffffff;
  89.     background-color:#e9e9e9;
  90. }
  91.  
  92. blockquote blockquote{
  93.     padding-left:10px;
  94.     padding:5px;
  95.     border-left:1px dashed #ffffff;
  96.     background-color:#d6c8c8;
  97. }
  98.  
  99. pre{
  100.     font-size:8px;
  101.     max-width:490px;
  102.     overflow:auto;
  103.     background-color:#bcbbbb;
  104.     padding:5px;
  105.     text-align:center;
  106. }
  107.  
  108. pre::-webkit-scrollbar {
  109.     width: 2px;
  110.     height: 2px;
  111. }
  112.  
  113. pre::-webkit-scrollbar-thumb {
  114.     background: #331b1b;
  115. }
  116.  
  117. /*when you highlight stuff, these will be your colors. remember to do it thrice.*/
  118.  
  119. ::selection {
  120. background:#cfcece;
  121. color: #633838;
  122. }
  123.  
  124. ::-moz-selection {
  125. background: #cfcece;
  126. color: #633838;
  127. }
  128.  
  129. ::-webkit-selection {
  130. background: #cfcece;
  131. color: #633838;
  132. }
  133.  
  134. /*bars*/
  135.  
  136. #topback{
  137.     position:fixed;
  138.     width:100%;
  139.     height:300px;
  140.     /*background image for the top half of this page*/
  141.     background-image:url('https://lh4.googleusercontent.com/-vBoYBRR_vbo/UOSrhZmmVDI/AAAAAAAADl4/g39pl9JASPo/s100/az_subtle.png');
  142.     background-attachment: fixed;
  143.     background-repeat: repeat;
  144. }
  145.    
  146.  
  147. #large{
  148.     position:fixed;
  149.     width:100%;
  150.     height:100px;
  151.     margin-top:300px;
  152.     /*color of the largest horizontal bar*/
  153.     background-color:#6b4f4f;
  154. }
  155.  
  156. #small{
  157.     position:fixed;
  158.     width:100%;
  159.     height:40px;
  160.     margin-top:415px;
  161.     /*color of the middle horizontal bar*/
  162.     background-color:#ffffff;
  163. }
  164.  
  165. #vsmall{
  166.     position:fixed;
  167.     width:100%;
  168.     height:20px;
  169.     margin-top:515px;
  170.     /*color of the little horizontal bar*/
  171.     background-color:#4e4e4e;
  172. }
  173.  
  174. /*about*/
  175.  
  176. #aboutborder{
  177.     position:fixed;
  178.     margin-top:250px;
  179.     margin-left:100px;
  180.     height:360px;
  181.     width:510px;
  182.     /*this is the color of the border around the left box. i recommend making it the same color as you did for #small, the middle horizontal bar. it looks cooler that way.*/
  183.     background-color:#ffffff;
  184. }
  185.  
  186. #aboutback{
  187.     position:fixed;
  188.     margin-top:20px;
  189.     margin-left:20px;
  190.     height:300px;
  191.     padding:10px;
  192.     width:450px;
  193.     /*this is the color for the background behind your text on the left box*/
  194.     background-color:#e9e9e9;
  195. }
  196.  
  197. #desc{
  198.     position:fixed;
  199.     margin-top:7px;
  200.     margin-left:10px;
  201.     height:285px;
  202.     width:430px;
  203.     padding-right:5px;
  204.     line-height:120%;
  205.     font-size:11px;
  206.     text-align:justify;
  207.     overflow:auto;
  208. }
  209.  
  210. #title{
  211.     position:fixed;
  212.     margin-top:200px;
  213.     width:510px;
  214.     font-family: 'Sorts Mill Goudy', serif;
  215.     font-size:45px;
  216.     text-align:center;
  217.     margin-left:100px;
  218.     /*here you can change the color of your title*/
  219.     color:#000000;
  220. }
  221.    
  222. /*about pt. II*/
  223.  
  224.  
  225. #aboutborderII{
  226.     position:fixed;
  227.     margin-top:365px;
  228.     margin-left:730px;
  229.     height:280px;
  230.     width:470px;
  231.     /*here's the color for the border around the right box. like with the other one, i recommend using the same color you did for #vsmall, or the smallest horizontal bar. it looks really neat that way.*/
  232.     background-color:#4e4e4e;
  233. }
  234.  
  235. #aboutbackII{
  236.     position:fixed;
  237.     margin-top:20px;
  238.     margin-left:20px;
  239.     height:220px;
  240.     padding:10px;
  241.     width:410px;
  242.     /*background for the box behind the text on your right box*/
  243.     background-color:#b8b6b6;
  244. }
  245.  
  246. #descII{
  247.     position:fixed;
  248.     margin-top:7px;
  249.     margin-left:10px;
  250.     height:205px;
  251.     width:390px;
  252.     line-height:120%;
  253.     padding-right:5px;
  254.     font-size:11px;
  255.     text-align:justify;
  256.     overflow:auto;
  257. }
  258.  
  259.  
  260.  
  261. /*navigation*/
  262.  
  263. #nav{
  264.     position:fixed;
  265.     margin-top:285px;
  266.     height:10px;
  267.     width:470px;
  268.     margin-left:730px;
  269.     text-align:center;
  270. }
  271.  
  272. .nav{
  273.     display:inline-block;
  274.     width:55px;
  275.     height:12px;
  276.     padding-top:3px;
  277.     /*font for your links*/
  278.     font-family:monospace;
  279.     font-size:10px;
  280.     text-transform:uppercase;
  281.     /*color of your links. i recommend making it the same color as your largest horizontal bar, #large, for the best look*/
  282.     background-color:#6b4f4f;
  283.     /*color of the words in your links*/
  284.     color:#ffffff;
  285.     border-left:0px solid transparent;
  286.     border-right:0px solid transparent;
  287.     -webkit-transition: all 0.3s linear;
  288.     -moz-transition: all 0.3s linear;
  289.     -o-transition: all 0.3s linear;
  290.     -ms-transition: all 0.3s linear;
  291. }
  292.  
  293. .nav:hover{
  294.     /*the color of the borders that appear when you hover over your links are here. remember to change both of them*/
  295.     border-left:10px solid #6b4f4f;
  296.     border-right:10px solid #6b4f4f;
  297.     /*here's the color the background of your links turn when you hover over them*/
  298.     background-color:#ffffff;
  299.     /*here's the color of the text when you hover over your links*/
  300.     color:#4e4e4e;
  301.     height:15px;
  302.     padding-top:5px;
  303. }
  304.  
  305.  
  306. /*credit*/
  307.  
  308.  
  309. #credit{
  310.     position:fixed;
  311.     bottom:10px;
  312.     right:10px;
  313.     z-index:1;
  314.     -webkit-transition: all 0.3s linear;
  315.     -moz-transition: all 0.3s linear;
  316.     -o-transition: all 0.3s linear;
  317.     -ms-transition: all 0.3s linear;
  318.         -webkit-filter: grayscale(100%);
  319.       -moz-filter: grayscale(100%);
  320.       -ms-filter: grayscale(100%);
  321.       -o-filter: grayscale(100%);
  322. }
  323.  
  324. #credit:hover{
  325.    -webkit-filter: grayscale(0%);
  326.   -moz-filter: grayscale(0%);
  327.   -ms-filter: grayscale(0%);
  328.   -o-filter: grayscale(0%);
  329. }
  330.    
  331.  
  332.  
  333. {CustomCSS}
  334.    
  335. body {cursor: url(http://www.dolliehost.com/dolliecrave/cursors/cursors-arrow/arrow38.gif), progress !important;}
  336.    
  337. a:hover {cursor: url(http://cur.cursors-4u.net/others/oth-6/oth589.cur), progress !important;}
  338.    
  339. </style>
  340.  
  341.  
  342.    
  343. </head><body>
  344.  
  345.  
  346. <a href="http://redfox-themes.tumblr.com"><img src="https://lh5.googleusercontent.com/-jDb8l0m6g2s/ULvHPyFukjI/AAAAAAAACoA/FRBmvQsxRkc/s22/fox.gif" id="credit"><!--<div id="credname">redfox themes</div>--></a>
  347.  
  348. <div id="topback"></div>
  349. <div id="large"></div>
  350. <div id="small"></div>
  351. <div id="vsmall"></div>
  352.  
  353. <div id="nav">
  354.     <a href="/" class="nav">home</a>
  355.     <a href="/ask" class="nav">message</a>
  356.     <a href="/archive" class="nav">archive</a>
  357.    
  358.     <!--add the urls of the links you want to add in place of the slash between both of those sets of quotation marks, and the titles in place of "link 1" and "link 2" respectively. if you don't want to use any links, don't worry! just delete those two lines of code (but remember to leave the closing div below them!), and the other three links will automatically center.-->
  359.    
  360.     <a href="/" class="nav">link 1</a>
  361.     <a href="/" class="nav">link 2</a>
  362. </div>
  363.  
  364.  
  365.     <!--add a fun title in place of About Me if you want-->
  366. <div id="title">About Me</div>
  367.  
  368. <div id="aboutborder">
  369.     <div id="aboutback">
  370.         <div id="desc">
  371.        
  372.         <!--add whatever want to add in the left box here, in place of all of this lorem ipsum. remember that it's endless, so you can put as much stuff in there as you want, use two html breaks, as you can see below, to separate paragraphs.-->
  373.        
  374. [32] Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit amet, consectetur, adipisci[ng] velit, sed quia non numquam [do] eius modi tempora inci[di]dunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur?
  375.  
  376. <br><br>
  377.  
  378. [33] At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi. <br><br>
  379.  
  380. Id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat…
  381.  
  382. <br><br>
  383.  
  384. Ore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit.
  385.  
  386.  
  387.  
  388.         </div>
  389.     </div>
  390. </div>
  391.  
  392. <!--if you don't want the second box, just delete everything from here until the closing body tag below. don't delete the closing body tag, though. that would be bad. -->
  393.  
  394. <div id="aboutborderII">
  395.     <div id="aboutbackII">
  396.         <div id="descII">
  397.        
  398.         <!--you know the drill. replace everything below with whatever you want in the right box.-->
  399.        
  400.             [32] Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit amet, consectetur, adipisci[ng] velit, sed quia non numquam [do] eius modi tempora inci[di]dunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? <br><br>
  401.  
  402. [33] At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi. <br><br>
  403.  
  404. Id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat… <br><br>
  405.            
  406.         </div>
  407.     </div>
  408. </div>
  409.  
  410.  
  411. </body></html>
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!