API tools faq
paste
Advertisement
armyofghosts

About Page 01 by armyofghosts

armyofghosts
Feb 11th, 2014
9,453
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.06 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.  
  3. <script type="text/javascript"
  4. src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
  5.  
  6.  
  7.  
  8. <!--- ABOUT PAGE #1 BY ARMYOFGHOSTS :) --->
  9.  
  10.  
  11.  
  12. <!-- jquery -->
  13.  
  14. <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
  15.  
  16. <script src="http://static.tumblr.com/iuw14ew/VSQma1786/jquery.style-my-tooltips.js"></script>
  17.  
  18. <script>
  19.  
  20. (function($){
  21.  
  22. $(document).ready(function(){
  23.  
  24. $("a[title]").style_my_tooltips({
  25.  
  26. tip_follows_cursor:true,
  27.  
  28. tip_delay_time:30,
  29.  
  30. tip_fade_speed:300,
  31.  
  32. attribute:"title"
  33.  
  34. });
  35.  
  36. });
  37.  
  38. })(jQuery);
  39.  
  40. </script>
  41.  
  42. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  43.  
  44. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  45. <title>{Title}</title>
  46. <link rel="shortcut icon" href="{Favicon}" />
  47. <link rel="alternate" type="application/rss+xml" href="{RSS}" />
  48.  
  49. <style type="text/css">
  50.  
  51. /* --- SCROLLBAR ---*/
  52.  
  53. ::-webkit-scrollbar {background-color:#fff; height:5px; width:7px}
  54. ::-webkit-scrollbar-thumb:vertical {background-color:#000; height:50px;border-radius:10px;border:1px solid #fff;}
  55. ::-webkit-scrollbar-thumb:horizontal {background-color:#fff; height:5px!important}
  56.  
  57. /*---TOOLTIP---*/
  58.  
  59. #s-m-t-tooltip {
  60. max-width:300px;
  61. padding:2px;
  62. margin:10px 0px 0px 10px;
  63. padding:3px 5px;
  64. background-color:#333;
  65. text-transform:none;
  66. font-size:9px;
  67. font-family:helvetica;
  68. letter-spacing:1px;
  69. color:#fff;
  70. z-index:999;
  71. }
  72.  
  73. /* --- BODY ---*/
  74.  
  75. #container {
  76. width:485px;
  77. height:350px;
  78. display:block;
  79. margin-top:15px;
  80. margin-left:-45px;
  81. }
  82.  
  83. body{
  84. background:#fff;
  85. font-size:11px;
  86. line-height:10px;
  87. padding-bottom:50px;
  88. }
  89.  
  90. a:link, a:active, a:visited{
  91. color:#333;
  92. text-decoration:none;
  93. -webkit-transition: all 0.5s linear;
  94. -moz-transition: all 0.5s linear;
  95. transition: all 0.5s linear;
  96. }
  97.  
  98. a:hover{
  99. color: #ccc;
  100. text-decoration: none;
  101. -moz-transition-duration:.5s;
  102. -webkit-transition-duration:.5s;
  103. -o-transition-duration:.5s;
  104. }
  105.  
  106. h2 {
  107. font-size: 15px;
  108. font-family: helvetica;
  109. font-weight:bolder;
  110. text-transform:lowercase;
  111. letter-spacing:1px;
  112. }
  113.  
  114. /* --- TITLE ---*/
  115.  
  116. #title {
  117. margin-top:130px;
  118. width:600px;
  119. font-size: 20px;
  120. font-family: helvetica;
  121. font-weight:bolder;
  122. text-transform:lowercase;
  123. letter-spacing:2px;
  124. text-align: left;
  125. padding-bottom: 15px;
  126. padding-top: 36px;
  127. color: #333;
  128. border-bottom:solid 1px #e8e8e8;
  129. }
  130.  
  131. #title a {
  132. color: #333;
  133. -moz-transition-duration:.4s;
  134. -webkit-transition-duration:.4s;
  135. -o-transition-duration:.4s;
  136. }
  137.  
  138. #title a:hover {
  139. letter-spacing:3px;
  140. color: #333;
  141. -moz-transition-duration:.4s;
  142. -webkit-transition-duration:.4s;
  143. -o-transition-duration:.4s;
  144. }
  145.  
  146.  
  147. /* --- LINKS ---*/
  148.  
  149. .links {
  150. margin-left:350px;
  151. margin-top:-15px;
  152. background:#fff;
  153. text-align:right;
  154. word-spacing:10px;
  155. letter-spacing:1px;
  156. width:150px;
  157. padding:10px;
  158. font-family: helvetica;
  159. font-weight:lighter;
  160. font-size:9px;
  161. text-transform:lowercase;
  162. -moz-transition-duration:.4s;
  163. -webkit-transition-duration:.4s;
  164. -o-transition-duration:.4s;
  165. }
  166.  
  167.  
  168. .links a {
  169. color:#333;
  170. }
  171.  
  172. .links a:hover {
  173. color:#ccc;
  174. -moz-transition-duration:.4s;
  175. -webkit-transition-duration:.4s;
  176. -o-transition-duration:.4s;
  177. }
  178.  
  179. /* --- TEXT ---*/
  180.  
  181. #about {
  182. margin-left:128px;
  183. margin-top:15px;
  184. text-align:left;
  185. display:block;
  186. overflow:scroll;
  187. height:350px;
  188. width:405px;
  189. font-family: helvetica;
  190. font-weight:lighter;
  191. font-size:11px;
  192. line-height:150%;
  193. padding:10px;
  194. padding-left:20px;
  195. border-left:1px solid #ccc;
  196. }
  197.  
  198. #about a {
  199. text-decoration:underline;
  200. color:#727272;
  201. }
  202.  
  203. #about a:hover {
  204. color:#ccc;
  205. }
  206.  
  207. #pic {
  208. margin-top:-345px;
  209. margin-left:-30px;
  210. float:left;
  211. height:120px;
  212. width:120px;
  213. padding:5px;
  214. border:1px solid #e8e8e8;
  215. }
  216.  
  217. #pic img {
  218. height:120px;
  219. width:120px;
  220. }
  221.  
  222. #basics {
  223. margin-left:-10px;
  224. width:140px;
  225. margin-top:10px;
  226. text-align:left;
  227. overflow:scroll;
  228. padding:5px;
  229. font-family: helvetica;
  230. font-weight:lighter;
  231. font-size:9px;
  232. text-transform:uppercase;
  233. letter-spacing:1px;
  234. }
  235.  
  236. #basics p {
  237. border-bottom:1px solid #e8e8e8;
  238. padding-bottom:5px;
  239. }
  240.  
  241. /*---CREDIT---*/
  242.  
  243. #cred {
  244. position:fixed;
  245. bottom:10px;
  246. right:10px;
  247. font-size:12px;
  248. font-family:arial;
  249. font-weight:bold;
  250. letter-spacing:-2px;
  251. padding:5px;
  252. }
  253.  
  254. #cred a {
  255. color:#000;
  256. }
  257.  
  258. </style>
  259.  
  260. </head>
  261.  
  262. <center>
  263.  
  264. <div id="head">
  265.  
  266. <!-- TITLE -->
  267. <div id="title"><a href="/">about me</a></div>
  268.  
  269. <!-- LINKS -->
  270. <div class="links">
  271. <a href="http://tumblr.com/dashboard">dash</a>
  272. <a href="/">Link1</a>
  273. <a href="/">link2</a>
  274. <a href="/">link3</a>
  275. </div></div></center>
  276.  
  277.  
  278. <center>
  279.  
  280. <div id="container">
  281.  
  282. <div id="about">
  283.  
  284. <h2>Hello!</h2>
  285.  
  286. Hiya so yeah this is an 'about' page, in case you haven't noticed. You can put as much stuff as you'd like and it'll adjust itself to scroll yay
  287.  
  288. <p>
  289.  
  290. The obligatory "this is what it looks like" text: <u>underlined</u>, <i>italicised</i>, <b>in bold</b>, and here is <a href="/">a link</a>.
  291.  
  292. <br>
  293.  
  294. <h2>Info</h2>
  295.  
  296. For the title, you'll have to put it in between &#60;h1&#62; or &#60;h2&#62;, but h2 works best!
  297.  
  298. <p>
  299.  
  300. Well okay uh I don't really have much else to write here so I'll just put filler text, but if there's anything else you'd like better explained or clarified, you're more than welcome to leave me an ask! Enjoy :)
  301.  
  302. <hr>
  303.  
  304. <h2>Filler</h2>
  305.  
  306. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc blandit tellus sed ornare aliquam. Fusce nec elementum erat, eget rutrum est. Maecenas eget tincidunt sapien. Suspendisse laoreet enim sit amet tellus ornare, vel eleifend nisl tincidunt. In eget molestie risus. In pharetra suscipit odio, quis scelerisque quam dictum quis. In tincidunt lectus nec turpis sollicitudin tincidunt. Maecenas vitae pretium felis, ac elementum lacus. Donec suscipit ornare enim eget accumsan. Nulla facilisi. Phasellus ac nisi mi. Vestibulum sollicitudin eros et tellus accumsan, eu accumsan diam scelerisque. Vivamus neque leo, ornare vitae lacinia non, vulputate sed risus. Ut iaculis nec nunc a congue.
  307.  
  308. </div>
  309.  
  310. <div id="pic">
  311.  
  312. <img src="http://31.media.tumblr.com/avatar_194637f60a35_128.png">
  313.  
  314. <div id="basics">
  315.  
  316. <br><br>
  317.  
  318. <h2><u>Basics:</u></h2>
  319.  
  320. <p><b>Name</b>: Prerna</p>
  321.  
  322. <p><b>Age</b>: Fourteen</p>
  323.  
  324. <p><b>Place</b>: New York City</p>
  325.  
  326. <p><b>Fandoms</b>: Too many</p>
  327.  
  328. <p><b>Fav band</b>: 3DG and FoB</p>
  329.  
  330. </div></div></div>
  331.  
  332. </center>
  333.  
  334. <div id="cred"> <a title="armyofghosts"href="http://armyofghosts.tumblr.com/">AG</a> </div>
  335.  
  336. </body>
  337. </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!