API tools faq
paste
Trevania

Summer Love ;; About Me Page

Trevania
Jun 18th, 2012
206
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.65 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">
  3.  
  4.  
  5.  
  6.  
  7.  
  8.  
  9. <!----
  10. PAGE DESIGNED BY STEPHANIE TREVANIA
  11. DO NOT ATTEMPT TO RECREATE OR REDISRIBUTE
  12. DO NOT REMOVE THE CREDIT.
  13. I WILL FIND YOU IF YOU DO.
  14. PLUS, WHY WOULD YOU DO SUCH A THING.
  15. IF YOU NEED HELP, DROP ME A LINE OR GOOGLE IT
  16.  
  17. T R E V A N I A . T U M B L R . C O M
  18.  
  19. ------>
  20.  
  21.  
  22.  
  23.  
  24.  
  25.  
  26.  
  27. <head>
  28. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  29. <title>About Me</title>
  30.  
  31.  
  32. <style type="text/css">
  33.  
  34. body {
  35. background-color: #FFF;
  36. background-image: url ('INSERT URL HERE');
  37. background-attachment: fixed;
  38. font-family: calibri;
  39. font-size:10px;
  40. overflow: scroll;
  41. }
  42. #main {
  43. background-color:#000000;
  44. margin-left: 140px;
  45. margin-right: 50px;
  46. margin-top: 80px;
  47. width: 50em;
  48. }
  49.  
  50. a:link {
  51. text-decoration:none;
  52. color:#666;
  53. }
  54. a:active{
  55. text-decoration:none;
  56. }
  57. a:visited{
  58. text-decoration:none;
  59. color:#699;}
  60. a:hover{
  61. text-decoration:none;
  62. letter-spacing:2px;
  63. font-style:italic;
  64. color:#FF6600;
  65. }
  66.  
  67. small{
  68. font-size:8px
  69. }
  70.  
  71. b, strong{
  72. color: #F63;
  73. }
  74. i, em {
  75. color: #999;
  76. }
  77.  
  78. u, underline {
  79. color:#85D8CB;
  80. }
  81.  
  82. s , strikethrough {
  83. color:#CC3;
  84. }
  85.  
  86. blockquote {
  87. padding:0px;
  88. padding-left:5px;
  89. margin:5px;
  90. border-left:2px solid
  91. border-color:#C03;
  92. }
  93.  
  94. #title {
  95.  
  96. width: 200px;
  97. height: 20px;
  98. position:absolute;
  99. margin-top:5px;
  100. margin-left:100px;
  101. font-family:calibri;
  102. font-size:10px;
  103. text-transform:uppercase;
  104. padding-top: 5px;
  105. letter-spacing: 3px;
  106. border-bottom: dotted 1px;
  107. }
  108.  
  109. #title a {
  110. font-style:italic;
  111. font-family: georgia;
  112. text-transform:lowercase;
  113. }
  114.  
  115.  
  116. #sidebar {
  117. position: fixed;
  118. margin-top:35px;
  119. margin-left: 100px;
  120. width: 200px;
  121. height: 300px;
  122. postion: fixed;
  123. max-height: 400px;
  124. }
  125.  
  126. #sidebar img {
  127. width: 185px;
  128. height: 185px;
  129. margin-top: 7px;
  130. margin-bottom: 5px;
  131. position:relative;
  132. }
  133.  
  134. #description {
  135. max-height: 200px;
  136. max-width: inherit;
  137. text-align:justify;
  138. position:absolute;
  139. margin-top: 25px;
  140. overflow:hidden;
  141. font-size:9px;
  142.  
  143. }
  144.  
  145. #links {
  146. letter-spacing:2px;
  147. max-height: 100px;
  148. max-width: inherit;
  149. text-align:center;
  150. position:absolute;
  151. margin-top: -10px;
  152. margin-left: 15px;
  153. overflow:auto;
  154. font-size:9px;
  155. border-bottom: dotted 1px;
  156. }
  157.  
  158. #content {
  159. background-color: #F9F9F9;
  160. width: 400px;
  161. height: 310px;
  162. margin-left: 300px;
  163. margin-top: -225px;
  164. position:fixed;
  165. padding:50px;
  166. z-index:auto;
  167.  
  168. }
  169. #content img {
  170. background-color:#fff;
  171. background-image:url();
  172. width: 230px;
  173. height: 370px;
  174. margin-left: -30px;
  175. margin-top: -30px;
  176. position:absolute;
  177. border: none;
  178. overflow: hidden;
  179. }
  180.  
  181. .paragraph {
  182. float: left;
  183. position: absolute;
  184. width: 210px;
  185. height: 360px;
  186. margin-top: -30px;
  187. margin-left: 210px;
  188. overflow:auto;
  189. padding: 5px;
  190.  
  191. }
  192.  
  193.  
  194. #nav1 {
  195.  
  196. width:99px;
  197. position: absolute;
  198. margin-top: 50px;
  199. margin-left: 890px;
  200. margin-bottom: 10px;
  201. background-color:#F90;
  202. -moz-transition: all .6s ease-in-out;
  203. -o-transition: all .6s ease-in-out;
  204. transition: all .6s ease-in-out;
  205. -webkit-transition: all .6s ease-in-out;
  206. }
  207.  
  208. #nav1 a {
  209. width: 299px;
  210. height: 10px;
  211. font:10px calibri;
  212. font-style:italic;
  213. text-transform:lowercase;
  214. color: transparent;
  215. -moz-transition: all .6s ease-in-out;
  216. -o-transition: all .6s ease-in-out;
  217. transition: all .6s ease-in-out;
  218. -webkit-transition: all .6s ease-in-out;
  219.  
  220. }
  221.  
  222. #nav1:hover {
  223.  
  224. width:130px;
  225.  
  226. }
  227. #nav1:hover a {
  228.  
  229. padding:0px 60px 1px 80px;
  230. display: inline;
  231. color:#FFF;
  232. -webkit-transition: color .25s ease-out .25s;
  233. }
  234.  
  235. #nav2 {
  236.  
  237. width:79px;
  238. position: absolute;
  239. margin-top:62px;
  240. margin-left: 890px;
  241. background-color: #F66;
  242. -moz-transition: all .6s ease-in-out;
  243. -o-transition: all .6s ease-in-out;
  244. transition: all .6s ease-in-out;
  245. -webkit-transition: all .6s ease-in-out;
  246. }
  247.  
  248. #nav2 a {
  249. width: 299px;
  250. height: 10px;
  251. font:10px calibri;
  252. font-style:italic;
  253. text-transform:lowercase;
  254. color: transparent;
  255. -moz-transition: all .6s ease-in-out;
  256. -o-transition: all .6s ease-in-out;
  257. transition: all .6s ease-in-out;
  258. -webkit-transition: all .6s ease-in-out;
  259.  
  260. }
  261.  
  262. #nav2:hover {
  263.  
  264. width:130px;
  265.  
  266. }
  267. #nav2:hover a {
  268.  
  269. padding:0px 60px 1px 80px;
  270. display: inline;
  271. color:#FFF;
  272. -webkit-transition: color .25s ease-out .25s;
  273. }
  274.  
  275. #nav3 {
  276.  
  277. width:109px;
  278. position: absolute;
  279. margin-top:74px;
  280. margin-left: 890px;
  281. background-color:#6CF;
  282. -moz-transition: all .6s ease-in-out;
  283. -o-transition: all .6s ease-in-out;
  284. transition: all .6s ease-in-out;
  285. -webkit-transition: all .6s ease-in-out;
  286. }
  287.  
  288. #nav3 a {
  289. width: 299px;
  290. height: 10px;
  291. font:10px calibri;
  292. font-style:italic;
  293. text-transform:lowercase;
  294. color: transparent;
  295. -moz-transition: all .6s ease-in-out;
  296. -o-transition: all .6s ease-in-out;
  297. transition: all .6s ease-in-out;
  298. -webkit-transition: all .6s ease-in-out;
  299.  
  300. }
  301.  
  302. #nav3:hover {
  303.  
  304. width:130px;
  305.  
  306. }
  307. #nav3:hover a {
  308.  
  309. padding:0px 60px 1px 80px;
  310. display: inline;
  311. color:#FFF;
  312. -webkit-transition: color .25s ease-out .25s;
  313. }
  314.  
  315. #nav4 {
  316.  
  317. width:69px;
  318. position: absolute;
  319. margin-top:86px;
  320. margin-left: 890px;
  321. background-color:#6C9;
  322. -moz-transition: all .6s ease-in-out;
  323. -o-transition: all .6s ease-in-out;
  324. transition: all .6s ease-in-out;
  325. -webkit-transition: all .6s ease-in-out;
  326. }
  327.  
  328. #nav4 a {
  329. width: 299px;
  330. height: 10px;
  331. font:10px calibri;
  332. font-style:italic;
  333. text-transform:lowercase;
  334. color: transparent;
  335. -moz-transition: all .6s ease-in-out;
  336. -o-transition: all .6s ease-in-out;
  337. transition: all .6s ease-in-out;
  338. -webkit-transition: all .6s ease-in-out;
  339.  
  340. }
  341.  
  342. #nav4:hover {
  343.  
  344. width:130px;
  345.  
  346. }
  347. #nav4:hover a {
  348.  
  349. padding:0px 60px 1px 80px;
  350. display: inline;
  351. color:#FFF;
  352. -webkit-transition: color .25s ease-out .25s;
  353. }
  354.  
  355. #nav5 {
  356.  
  357. width:59px;
  358. position: absolute;
  359. margin-top:99px;
  360. margin-left: 890px;
  361. background-color:#FC0;
  362. -moz-transition: all .6s ease-in-out;
  363. -o-transition: all .6s ease-in-out;
  364. transition: all .6s ease-in-out;
  365. -webkit-transition: all .6s ease-in-out;
  366. }
  367.  
  368. #nav5 a {
  369. width: 299px;
  370. height: 10px;
  371. font:10px calibri;
  372. font-style:italic;
  373. text-transform:lowercase;
  374. color: transparent;
  375. -moz-transition: all .6s ease-in-out;
  376. -o-transition: all .6s ease-in-out;
  377. transition: all .6s ease-in-out;
  378. -webkit-transition: all .6s ease-in-out;
  379.  
  380. }
  381.  
  382. #nav5:hover {
  383.  
  384. width:130px;
  385.  
  386. }
  387. #nav5:hover a {
  388.  
  389. padding:0px 60px 1px 80px;
  390. display: inline;
  391. color:#FFF;
  392. -webkit-transition: color .25s ease-out .25s;
  393. }
  394.  
  395. #credit {
  396. position:absolute;
  397. left:0px;
  398. bottom: 0px;
  399. z-index:-1;
  400. font-style:italic;
  401. }
  402.  
  403. ::-webkit-scrollbar {
  404. width: 10px;
  405. height: 25px;
  406. }
  407.  
  408. ::-webkit-scrollbar-button:start:decrement,
  409. ::-webkit-scrollbar-button:end:increment {
  410. height: 10px;
  411. display: block;
  412. background-color: #F7F7F7;
  413. border: 1px solid #eee;
  414. }
  415. ::-webkit-scrollbar-track-piece {
  416. background-color: #ffffff;
  417. }
  418. ::-webkit-scrollbar-thumb:vertical {
  419. height: 25px;
  420. background-color: #FCFCF5;
  421. border: 1px solid #eee;
  422. }
  423.  
  424. </style>
  425. <div id="main">
  426.  
  427. <!---ADDITIONAL LINKS----->
  428.  
  429. <div id="nav1"><a href="[ URL HERE ]">[ INSERT TEXT HERE ]</a></div>
  430. <div id="nav2"><a href="[ URL HERE ]">[ INSERT TEXT HERE ]</a></div>
  431. <div id="nav3"><a href="[ URL HERE ]">[ INSERT TEXT HERE ]</a></div>
  432. <div id="nav4"><a href="[ URL HERE ]">[ INSERT TEXT HERE ]</a></div>
  433. <div id="nav5"><a href="[ YOUR TUMBLR URL HERE ]">back</a></div>
  434.  
  435. <!---TITLE----->
  436.  
  437. <div id="title"><center><a href="[ PAGE URL HERE ]">[ TITLE HERE ]</a></center></div>
  438.  
  439.  
  440. <div id="sidebar">
  441.  
  442. <!---SIDEBAR IMAGE----->
  443.  
  444. <div class="simage">
  445. <center><img src="[ IMAGE URL HERE ]" /></center><br /></div>
  446.  
  447. <!---LINKS----->
  448.  
  449. <div id="links">
  450. L<a href="[ URL HERE ]">INK 1</a> L<a href="[ URL HERE ]">INK 2</a> L<a href="[ URL HERE ]">INK 3</a> L<a href="[ URL HERE ]">INK 4</a> <a href="trevania.tumblr.com">©</a><br /><br />
  451. </div>
  452.  
  453. <!---DESCRIPTION----->
  454.  
  455. <div id="description">
  456. [ INSERT DESCRIPTION HERE ]
  457. </div>
  458.  
  459. <!---CONTENT----->
  460.  
  461. <div id="content">
  462.  
  463. <!---CONTENT IMAGE----->
  464.  
  465. <div id="content img">
  466.  
  467. <img src="[ IMAGE URL HERE ]" />
  468.  
  469. </div>
  470.  
  471. <div class="paragraph">
  472.  
  473. [ INSERT DESCRIPTION HERE ]
  474.  
  475. </div>
  476.  
  477.  
  478.  
  479.  
  480.  
  481. </div>
  482. </div>
  483. </div>
  484. </div>
  485. <div id="credit"><a href="tomhardies.tumblr.com">© trevania</a></div>
  486.  
  487.  
  488.  
  489.  
  490.  
  491.  
  492.  
  493.  
  494.  
  495.  
  496.  
  497. </head>
  498.  
  499. <body>
  500. </body>
  501. </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!