Advertisement
ofcuteboys

About Me Page 02-Verbose

Mar 29th, 2014
162
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.39 KB | None | 0 0
  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. ABOUT ME PAGE 01 BY CAROLINE/LIMESTHEMES/OFCUTEBOYS
  21.  
  22. [[it's not really 01, I made one before but it's gross and I deleted it]]
  23.  
  24. This is my little space to be fun so you know what, you should read it :)
  25.  
  26. I'll write it later
  27.  
  28. I'm too lazy now
  29.  
  30. follow my rules please and thank you
  31.  
  32.  
  33. --->
  34.  
  35.  
  36.  
  37.  
  38.  
  39. <style type="text/css">
  40.  
  41.  
  42. body {
  43. background-color:{color:background};
  44. font-family:Helvetica;
  45. font-size:11px;
  46. color:{color:text};
  47. }
  48.  
  49. a {
  50. color:{color:link};
  51. text-decoration:none;
  52. -webkit-transition-duration:.3s;
  53. -moz-transition-duration:.3s;
  54. -o-transition-duration:.3s;
  55. }
  56.  
  57. a:hover {
  58. color:{color:hover};
  59. }
  60.  
  61. h1 {
  62. font-size:18px;
  63. font-weight:normal;
  64. letter-spacing:2px;
  65. color:{color:text};
  66. }
  67.  
  68.  
  69. blockquote {
  70. padding:10px;
  71. background-color:#F5F5F5;
  72. text-align:justify;
  73. }
  74.  
  75. blockquote blockquote {
  76. padding-left:10px;
  77. border-left:2px solid {color:accent};
  78. }
  79.  
  80. #credit {
  81. bottom:3px;
  82. position:fixed;
  83. right:10px;
  84. float:right;
  85. font-family:calibri;
  86. color:black;
  87. font-size:9px;
  88. letter-spacing:1px;
  89. text-transform:uppercase;
  90. padding:5px;
  91.  
  92. }
  93.  
  94. #credit a {
  95. color:black;
  96. background-color:white;
  97. padding:5px;
  98. -webkit-transition-duration:.8s;
  99. -moz-transition-duration:.8s;
  100. -o-transition-duration:.8s;
  101. -ms-transition-duration:.8s;
  102. }
  103.  
  104. #credit a:hover {
  105. color:white;
  106. background-color:#00bdb3;
  107. }
  108.  
  109.  
  110. #c_block {
  111. width:600px;
  112. height:600px;
  113. left:50%;
  114. position:fixed;
  115. margin-left:-300px;
  116. top:50%;
  117. margin-top:-300px;
  118. }
  119.  
  120. .firstletter {
  121. width:60px;
  122. z-index:-999;
  123. left:50%;
  124. margin-left:-35px;
  125. position:fixed;
  126. margin-top:13px;
  127. color:black;
  128. font-size:35px;
  129. text-align:center;
  130. padding-top:10px;
  131. font-family:Helvetica;
  132. border:2px solid black;
  133. font-weight:100;
  134. height:50px;
  135. background-color:white;
  136. -webkit-border-radius:33px;
  137. -moz-border-radius:33px;
  138. -o-border-radius:33px;
  139. -ms-border-radius:33px;
  140. -webkit-transition-duration:.8s;
  141. -moz-transition-duration:.8s;
  142. -o-transition-duration:.8s;
  143. -ms-transition-duration:.8s;
  144. }
  145.  
  146. #thetop:hover .firstletter {
  147. opacity:.3;
  148. background-color:black;
  149. border-color:white;
  150. color:white;
  151. -webkit-transform:rotate(360deg);
  152. }
  153.  
  154. .name {
  155. font-family:helvetica;
  156. text-transform:uppercase;
  157. padding-bottom:5px;
  158. width:100px;
  159. border-bottom:1px solid #ff809b;
  160. color:white;
  161. font-weight:200;
  162. letter-spacing:5px;
  163. font-size:14px;
  164. text-align:center;
  165. left:50%;
  166. position:fixed;
  167. overflow:hidden;
  168. margin-left:-90px;
  169. margin-top:45px;
  170. opacity:0;
  171. -webkit-transition-duration:.8s;
  172. -moz-transition-duration:.8s;
  173. -o-transition-duration:.8s;
  174. -ms-transition-duration:.8s;
  175. }
  176.  
  177. #thetop:hover .name {
  178. width:180px;
  179. opacity:1;
  180. }
  181.  
  182. .dot {
  183. position:fixed;
  184. width:100px;
  185. height:100px;
  186. }
  187.  
  188. #thetop {
  189. background-color:black;
  190. width:600px;
  191. text-align:center;
  192. position:fixed;
  193. height:100px;
  194. border:1px solid #666;
  195. }
  196.  
  197. #thetop:hover #links {
  198. opacity:1;
  199. }
  200.  
  201. #links {
  202. display:block;
  203. width:100%;
  204. font-family:Helvetica;
  205. letter-spacing:3px;
  206. margin-left:-13px;
  207. margin-top:55px;
  208. opacity:0;
  209. z-index:999999999;
  210. text-align:center;
  211. -webkit-transition-duration:.8s;
  212. -moz-transition-duration:.8s;
  213. -o-transition-duration:.8s;
  214. -ms-transition-duration:.8s;
  215. }
  216.  
  217. #links a {
  218. display:inline-block;
  219. padding:3px;
  220. width:20px;
  221. margin-left:20px;
  222. color:white;
  223. padding-left:5px;
  224. text-transform:uppercase;
  225. -webkit-transition-duration:.8s;
  226. -moz-transition-duration:.8s;
  227. -o-transition-duration:.8s;
  228. -ms-transition-duration:.8s;
  229. }
  230.  
  231. #links a:hover {
  232. color:#ff809b;
  233. }
  234.  
  235. .bodycolumn {
  236. color:black;
  237. width:290px;
  238. margin-top:120px;
  239. margin-left:0px;
  240. line-height:180%;
  241. text-align:justify;
  242. font-family:Helvetica;
  243. letter-spacing:1px;
  244. font-size:11px;
  245. float:left;
  246. height:480px;
  247. font-weight:500;
  248. overflow:scroll;
  249. }
  250.  
  251. ::-webkit-scrollbar {
  252. width:1px;
  253. background-color:transparent;
  254. }
  255.  
  256.  
  257.  
  258. </style>
  259.  
  260. </head>
  261. <body>
  262. <div id="c_block">
  263. <div id="thetop">
  264. <div class="dot">
  265. <div class="firstletter">C</div>
  266. <div class="name">Caroline</div></div>
  267.  
  268. <div id="links">
  269. <a href="/">i</a>
  270. <a href="/ask" style="margin-top:15px;">ii</a>
  271. <a href="http://ofcuteboys.tumblr.com">iii</a>
  272. </div>
  273. </div>
  274. <div class="bodycolumn">
  275. <p>My name is Caroline, and I am a 16 year old high school sophomore from the US. I am a social activist, a mediocre theme maker, a pop punk enthusiast, an extrovert, a francophile, and a french fry addict.</p>
  276. <p> ex·tro·vert [ek-struh-vurt]: "an outgoing, gregarious person." I love talking to and meeting new people. I work best in crowded places. I like to give advice. If you come talk to me, we will be friends, and that's that.</p>
  277. <p>In terms of social justice or social activism, there are a number of issues I am extremely passionate about, including body image and media literacy, mental illness, LGBTQ rights, and feminism. I do my best to educate myself around these issues, and I learn and develop new opinions every day. Feel free to engage me on these subjects, whether you support or oppose my views. If you are respectful, I will respect you. If I say something that you disagree with, or if I say anything that offends you, let me know in a kind manner. Ignorant messages will be ignored, but I am happy to engage these issues politely, and I know that I will sometimes be wrong.</p>
  278. <p>I am a tiny bit obsessed with European culture and the French language, and I have a total weakness for foreign boys [and their accents-especially their accents!] I'm nowhere near fluent in French, but if it's your native language, you can always try talking to me in french and I'll do my best to be accurate in my reply! That goes for any language - if you would like to send me a message in your native language because you don't speak english or you aren't comfortable conversing in english, feel free! I am just as capable of using an online translator, and I think that the assumption on tumblr that we are all english-speakers is ridiculous.</p>
  279.  
  280.  
  281. </div>
  282.  
  283.  
  284. <div class="bodycolumn" style="margin-left:20px;">
  285.  
  286. <p>Now for the last few things I listed. Mediocre theme maker, pop punk enthusiast, and french fry addict. I think french fry addiction really speaks for itself, so I'll let that one slide.</p>
  287. <p>I've been making tumblr themes since August of 2013. In November of the same year, I wiped my theme blog and restarted. I no longer liked my old themes-they were glitchy, poorly designed, and had so many mistakes in the coding that to revamp them was just ridiculous.</p>
  288. <p>Once I restarted my theme blog and moved from ofcuteboyscodes to my current theme blog, <a href="http://limesthemes.tumblr.com">limesthemes</a>, I began making themes that I am a lot prouder of. I am largely endebted to my theme making groups for this growth-the classy coders, the HTML experts, the code royals, and the code cunts. Since then, I have established my own HTML group, The Code Co. You all helped me get to where I am now, and I cannot thank you enough!</p>
  289. <p>Now for pop punk. Where to start? I fell in love with All Time Low when I was in the 4th grade. My best friend at the time had "Dear Maria, Count Me In" on her iPod nano, and we used to listen to it all the time. I've been hooked ever since. I've been to two ATL concerts and am MASSIVELY excited for my third one in May!</p>
  290. <p>Since ATL, my love for pop punk bands has grown exponentially. Time for A List Of Bands I Love: All Time Low, We The Kings, Mayday Parade, Pierce The Veil, Sleeping With Sirens, Red Car Wire, Stereo Skyline, Blink 182, American Hi-Fi, Boys Like Girls, Jimmy Eat World, Panic! At the Disco, Fall Out Boy, +44, Forever the Sickest Kids, Patent Pending, The Click Five, A Day To Remember, The All American Rejects, Cartel, Good Charlotte, The Summer Set, The White Tie Affair, The Killers, The Maine, and so many others.</p>
  291.  
  292. </div>
  293.  
  294.  
  295. </div>
  296.  
  297.  
  298.  
  299. <div id="credit"><a href="http://ofcuteboys.tumblr.com/">ofcuteboys</a></div>
  300.  
  301.  
  302. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement