API tools faq
paste
ofcuteboys

About Me Page 03-Concise

ofcuteboys
Mar 29th, 2014
308
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.80 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>
  4. <title>{Title}</title>
  5. <link rel="shortcut icon" href="{Favicon}">
  6. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  7.  
  8. <!---
  9.  
  10.  
  11. 888 8888888 888b d888 8888888888 .d8888b.
  12. 888 888 8888b d8888 888 d88P Y88b
  13. 888 888 88888b.d88888 888 Y88b.
  14. 888 888 888Y88888P888 8888888 "Y888b.
  15. 888 888 888 Y888P 888 888 "Y88b.
  16. 888 888 888 Y8P 888 888 "888
  17. 888 888 888 " 888 888 Y88b d88P
  18. 88888888 8888888 888 888 8888888888 "Y8888P"
  19.  
  20.  
  21. ABOUT ME PAGE 03 BY OFCUTEBOYS/LIMESTHEMES/CAROLINE --Concise--
  22.  
  23. This is the first about me page in my Triple Page Pack
  24.  
  25. It's type #2-Modern
  26.  
  27. Add your own images, links, description, and more!
  28.  
  29. Enjoy it! If this doesn't suit your fancy, check out the rest of the pack.
  30.  
  31. Make sure to follow the rules, and if you have any questions, go to http://limesthemes.tumblr.com/support !
  32.  
  33.  
  34. --->
  35.  
  36.  
  37. <style type="text/css">
  38.  
  39.  
  40. body {
  41. background-color:black;
  42. font-family:Helvetica;
  43. font-size:11px;
  44. color:white;
  45. }
  46.  
  47. a {
  48. color:white;
  49. text-decoration:none;
  50. -webkit-transition-duration:.3s;
  51. -moz-transition-duration:.3s;
  52. -o-transition-duration:.3s;
  53. }
  54.  
  55. a:hover {
  56. color:#00b3cd;
  57. }
  58.  
  59. h1 {
  60. font-size:18px;
  61. font-weight:normal;
  62. letter-spacing:2px;
  63. color:{color:text};
  64. }
  65.  
  66.  
  67. blockquote {
  68. padding:10px;
  69. background-color:#F5F5F5;
  70. text-align:justify;
  71. }
  72.  
  73. blockquote blockquote {
  74. padding-left:10px;
  75. border-left:2px solid {color:accent};
  76. }
  77.  
  78.  
  79. ::selection {
  80. background-color:{color:accent};
  81. }
  82.  
  83.  
  84. ::-webkit-scrollbar {
  85. width:1px;
  86. background-color:white;
  87. }
  88.  
  89.  
  90.  
  91. #credit {
  92. bottom:3px;
  93. position:fixed;
  94. right:10px;
  95. float:right;
  96. font-family:calibri;
  97. color:black;
  98. font-size:9px;
  99. letter-spacing:1px;
  100. text-transform:uppercase;
  101. padding:5px;
  102.  
  103. }
  104.  
  105. #credit a {
  106. color:white;
  107. background-color:black;
  108. padding:5px;
  109. -webkit-transition-duration:.8s;
  110. -moz-transition-duration:.8s;
  111. -o-transition-duration:.8s;
  112. -ms-transition-duration:.8s;
  113. }
  114.  
  115. #credit a:hover {
  116. color:white;
  117. background-color:#00b3cd;
  118. }
  119.  
  120. #topbunk {
  121. position:fixed; /*---don't change this---*/
  122. background-color:white; /*---it looks best white but you can change it if you want to---*/
  123. width:102%;/*---don't change this---*/
  124. height:100px;/*---don't change this---*/
  125. margin-top:-10px;/*---don't change this---*/
  126. margin-left:-10px;/*---don't change this---*/
  127. }
  128.  
  129. #actualfuckingcontent_top {
  130. width:500px;/*---don't change this---*/
  131. left:50%;/*---don't change this---*/
  132. margin-left:-250px;/*---don't change this---*/
  133. position:fixed;/*---don't change this---*/
  134. height:100px;/*---don't change this---*/
  135. }
  136.  
  137. .firstletter {
  138. width:60px;
  139. z-index:-999;
  140. left:50%;
  141. margin-left:-35px;
  142. position:fixed;
  143. margin-top:13px;
  144. color:white;
  145. font-size:35px;
  146. text-align:center;
  147. padding-top:10px;
  148. font-family:Helvetica;
  149. border:2px solid white;
  150. font-weight:100;
  151. height:50px;
  152. background-color:black;
  153. -webkit-border-radius:33px;
  154. -moz-border-radius:33px;
  155. -o-border-radius:33px;
  156. -ms-border-radius:33px;
  157. -webkit-transition-duration:.8s;
  158. -moz-transition-duration:.8s;
  159. -o-transition-duration:.8s;
  160. -ms-transition-duration:.8s;
  161. }
  162.  
  163. #topbunk:hover .firstletter {
  164. opacity:.2;
  165. background-color:white;
  166. border-color:black;
  167. color:black;
  168. -webkit-transform:rotate(360deg);
  169. }
  170.  
  171. .name {
  172. font-family:helvetica;
  173. text-transform:uppercase;
  174. padding-bottom:5px;
  175. width:100px;
  176. border-bottom:1px solid #77b3cd;
  177. color:black;
  178. font-weight:500;
  179. letter-spacing:5px;
  180. font-size:14px;
  181. text-align:center;
  182. left:50%;
  183. position:fixed;
  184. overflow:hidden;
  185. margin-left:-90px;
  186. margin-top:35px;
  187. opacity:0;
  188. -webkit-transition-duration:.8s;
  189. -moz-transition-duration:.8s;
  190. -o-transition-duration:.8s;
  191. -ms-transition-duration:.8s;
  192. }
  193.  
  194. #topbunk:hover .name {
  195. width:180px;
  196. opacity:1;
  197. }
  198.  
  199. #actualfuckingcontent_body {
  200. margin-top:140px;
  201. position:fixed;
  202. width:500px;
  203. height:500px;
  204. margin-left:-250px;
  205. left:50%;
  206. }
  207.  
  208. #theimage {
  209. width:220px;
  210. margin-left:20px;
  211. margin-top:30px;
  212. background-color:white;
  213. border:3px solid black;
  214. -webkit-transition-duration:2s;
  215. -moz-transition-duration:2s;
  216. -ms-transition-duration:2s;
  217. -o-transition-duration:2s;
  218. }
  219.  
  220. #theimage img {
  221. width:200px;
  222. height:200px;
  223. padding:10px;
  224. }
  225.  
  226.  
  227. #links {
  228. width:200px;
  229. display:block;
  230. margin-left:22px;
  231. margin-top:20px;
  232. }
  233.  
  234. #links a {
  235. color:white;
  236. text-transform:uppercase;
  237. font-size:12px;
  238. letter-spacing:4px;
  239. border:1px solid white;
  240. display:block;
  241. width:205px;
  242. padding:7px;
  243. margin-top:10px;
  244. text-align:center;
  245. -webkit-transition-duration:.6s;
  246. -moz-transition-duration:.6s;
  247. -ms-transition-duration:.6s;
  248. -o-transition-duration:.6s;
  249. }
  250.  
  251. #links a:hover {
  252. background-color:white;
  253. color:#000;
  254. border-color:#fff;
  255. }
  256.  
  257. #info {
  258. width:160px;
  259. height:209px;
  260. line-height:210%;
  261. margin-top:-434px;
  262. margin-left:260px;
  263. display:block;
  264. border:1px solid white;
  265. padding-bottom:10px;
  266. padding-left:20px;
  267. padding-right:20px;
  268. text-align:justify;
  269. }
  270.  
  271. .infor {
  272. color:white;
  273. text-transform:uppercase;
  274. font-size:12px;
  275. letter-spacing:4px;
  276. margin-top:10px;
  277. -webkit-transition-duration:.6s;
  278. -moz-transition-duration:.6s;
  279. -ms-transition-duration:.6s;
  280. -o-transition-duration:.6s;
  281. }
  282.  
  283. .inform {
  284. font-size:11px;
  285. color:#77bbcd;
  286. text-transform:none;
  287. font-weight:400;
  288. padding-right:10px;
  289. }
  290.  
  291. #description {
  292. width:183px;
  293. padding:10px;
  294. background-color:white;
  295. height:170px;
  296. margin-top:23px;
  297. margin-left:260px;
  298. color:black;
  299. font-size:10px;
  300. letter-spacing:1px;
  301. line-height:150%;
  302. text-align:justify;
  303. overflow:scroll
  304. }
  305.  
  306.  
  307. </style>
  308.  
  309. </head>
  310. <body>
  311.  
  312. <div id="topbunk">
  313. <div id="actualfuckingcontent_top">
  314. <div class="firstletter">F<!---REPLACE F WITH THE FIRST LETTER OF YOUR NAME---></div>
  315. <div class="name">NAME HERE</div>
  316. </div>
  317. </div>
  318.  
  319. <div id="actualfuckingcontent_body">
  320. <div id="theimage"><img src="IMAGE URL HERE"></div>
  321. <div id="links">
  322. <a href="/">index</a>
  323. <a href="/">mail</a>
  324. <a href="/">tags</a>
  325. <a href="/">face</a>
  326. <a href="http://ofcuteboys.tumblr.com">credit</a>
  327. </div>
  328.  
  329. <div id="info">
  330. <div class="infor"><span class="inform">name</span>NAME GOES HERE</div>
  331. <div class="infor"><span class="inform">age</span>AGE GOES HERE</div>
  332. <div class="infor"><span class="inform">hometown</span>PLACE OF ORIGIN GOES HERE</div>
  333. <div class="infor"><span class="inform">food</span>FAVORITE FOOD GOES HERE</div>
  334. <div class="infor"><span class="inform">music</span>FAVORITE MUSIC GENRE GOES HERE</div>
  335. <div class="infor"><span class="inform">show</span>FAVORITE SHOW GOES HERE</div>
  336. </div>
  337.  
  338. <div id="description">
  339. <p>This little box here will scroll if you overflow it, so don't worry too much about space and length. This theme is the about me page for anyone who likes to keep things simple. It also has an image, which my other page does not. I sincerely hope you enjoy using it!</p>
  340.  
  341. Should I write myself out of the history books
  342. And mark a place in time for every chance you took?
  343. Don't get me wrong,
  344. I know you've got your life in place
  345. I've yet to take the hint, someday
  346. I'm sure I'll get the picture
  347. And stop waiting up
  348.  
  349. When it all comes down
  350. To a sunrise on the East Side,
  351. Will you be there to carry home
  352. The remains of my wasted youth?
  353. This wasted time on you
  354. Has left me shaking in waiting,
  355. Shaking in waiting for something more
  356.  
  357. Tonight is alive with the promise of a street-fight,
  358. And there's money on the table
  359. That says your cheap shots won't be able
  360. To break bones
  361. I've yet to break a sweat
  362. I'll make your past regret its future
  363. Here's to you
  364. </div>
  365.  
  366.  
  367. </div>
  368.  
  369. <div id="credit"><a href="http://ofcuteboys.tumblr.com/">ofcuteboys</a></div><!---DO NOT TOUCH THIS--->
  370.  
  371.  
  372. </body></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!