API tools faq
paste
Advertisement
gasphard-ulliel

character page 001

gasphard-ulliel
Sep 27th, 2012
11,062
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.08 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.  
  4. <!--
  5. CHARACTER PAGE 001 by GASPHARD-ULLIEL
  6.  
  7. Please don't:
  8. 1. Remove or move the credit
  9. 2. Use this as a base code
  10. 3. Claim as your own or redistribute
  11. Thank you!
  12.  
  13. If there's any error in the coding please tell me and I'll fix it. I hope you enjoy using this theme! C:
  14.  
  15.  
  16. -->
  17.  
  18. <html>
  19.  
  20. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  21. <script src="/path/to/jquery.masonry.min.js"></script>
  22.  
  23. <head>
  24.  
  25. <!--FONTS-->
  26. <link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'>
  27. <link href='http://fonts.googleapis.com/css?family=Galdeano|Berkshire+Swash' rel='stylesheet' type='text/css'>
  28.  
  29. <style type="text/css">
  30.  
  31. body {
  32. font-family: 'droid serif', serif;
  33. font-size: 11px;
  34. background-color: #ffffff;
  35. background-image: url('http://24.media.tumblr.com/tumblr_maznd6sHNe1rfymxfo1_400.png');
  36. background-attachment: fixed;
  37. text-align: justify;
  38. }
  39.  
  40. a:link, a:active, a:visited {
  41. color: #fff;
  42. text-decoration: none;
  43. transition: all 0.6s ease-out;
  44. -webkit-transition: all 0.6s ease-out;
  45. -moz-transition: all 0.6s ease-out;
  46. -o-transition: all 0.6s ease-out;
  47. }
  48.  
  49. a:hover {
  50. color: #26afaf;
  51. transition: all 0.6s ease-out;
  52. -webkit-transition: all 0.6s ease-out;
  53. -moz-transition: all 0.6s ease-out;
  54. -o-transition: all 0.6s ease-out;
  55. }
  56.  
  57. ::-webkit-scrollbar-thumb:vertical {
  58. background-color: #26afaf;
  59. height:100px;
  60. }
  61.  
  62. ::-webkit-scrollbar {
  63. height:25px;
  64. width:4px;
  65. background-color: #000;
  66. }
  67.  
  68. iframe#tumblr_controls {
  69. margin-top: 75px;
  70. position: fixed !important;
  71. right:6px !important;
  72. opacity: 0;
  73. width: auto;
  74. border-radius: 10px;
  75. -webkit-transition: all 0.8s ease-in-out;
  76. -moz-transition: all 0.8s ease-in-out;
  77. -o-transition: all 0.8s ease-in-out;
  78. }
  79.  
  80. iframe#tumblr_controls:hover {
  81. -webkit-transition: all 0.8s ease-in-out;
  82. -moz-transition: all 0.8s ease-in-out;
  83. -o-transition: all 0.8s ease-in-out;
  84. opacity: 0.2;
  85. border-radius: 5px;
  86. }
  87.  
  88. /*BANNER*/
  89. #container1 {
  90. margin-top: -10px;
  91. margin-left: -10px;
  92. width: 1000%;
  93. background-image: url('http://24.media.tumblr.com/tumblr_mai5xkLw1i1rfymxfo1_400.png');
  94. background-attachment: fixed;
  95. position: fixed;
  96. height: 70px;
  97. border-bottom: 2px solid #000; /*to change border color, change the hex code*/
  98. opacity: 0.7;
  99. z-index: 9999;
  100. }
  101.  
  102. .title {
  103. position: fixed;
  104. float: left;
  105. color: #fff;
  106. font-family: 'berkshire swash', cursive;
  107. font-size: 36px;
  108. top: 10px;
  109. left: 40px;
  110. }
  111.  
  112. .links {
  113. position: fixed;
  114. height: 20px;
  115. width: auto;
  116. margin-top: 48px;
  117. right: 10px;
  118. }
  119.  
  120. .links:hover a {
  121. opacity: 0.3;
  122. background-color: #26afaf; /*to change the color when you hover over the links*/
  123. }
  124.  
  125. .links a {
  126. padding: 2px 6px 2px 6px;
  127. font-size: 10px;
  128. letter-spacing: 0px;
  129. text-align: center;
  130. overflow: hidden;
  131. background-color: #fff;
  132. color: #000;
  133. text-decoration: none;
  134. margin-left: 3px;
  135. display: inline;
  136. text-transform: uppercase;
  137. border-radius: 3px;
  138. opacity: 0.6;
  139. transition: all 0.6s ease-out;
  140. -webkit-transition: all 0.6s ease-out;
  141. -moz-transition: all 0.6s ease-out;
  142. -o-transition: all 0.6s ease-out;
  143. }
  144.  
  145. .links a:hover {
  146. opacity: 1;
  147. transition: all 0.6s ease-out;
  148. -webkit-transition: all 0.6s ease-out;
  149. -moz-transition: all 0.6s ease-out;
  150. -o-transition: all 0.6s ease-out;
  151. }
  152.  
  153. #container2 {
  154. margin-top: 75px;
  155. position: absolute;
  156. width: 740px;
  157. margin-left: 160px;
  158. height: auto;
  159. }
  160.  
  161. /*OUTER BOX*/
  162. .boxxxie {
  163. margin-top: 15px;
  164. margin-bottom: 15px;
  165. position: relative;
  166. width: 740px;
  167. height: 230px;
  168. }
  169.  
  170. .boxxxiez {
  171. width: 740px;
  172. height: 230px;
  173. position: relative;
  174. background-color: #111111;
  175. border: 1px solid #000;
  176. opacity: 0.4;
  177. z-index: 1;
  178. }
  179.  
  180. /*CHARACTER IMAGE*/
  181. .pic {
  182. float: left;
  183. margin-top: 20px;
  184. margin-left: 20px;
  185. margin-right: 10px;
  186. width: 150px;
  187. height: 150px;
  188. border: 20px solid #000;
  189. opacity: 1;
  190. z-index: 2;
  191. position: absolute;
  192. overflow: hidden;
  193. }
  194.  
  195. /*BASIC INFORMATION*/
  196. .main {
  197. float: left;
  198. margin-top: 20px;
  199. margin-left: 220px;
  200. background-color: #000;
  201. width: 500px;
  202. height: 190px;
  203. opacity: 1;
  204. position: absolute;
  205. }
  206.  
  207. .name {
  208. font-size: 20px;
  209. text-transform: uppercase;
  210. letter-spacing: 2px;
  211. text-align: center;
  212. margin-top: 50px;
  213. width: 420px;
  214. padding-bottom: 10px;
  215. margin-left: 40px;
  216. border-bottom: 1px solid #fff;
  217. color: #fff;
  218. }
  219.  
  220. .info {
  221. margin-top: 10px;
  222. font-size: 12px;
  223. letter-spacing: 1px;
  224. margin-left: 40px;
  225. margin-right: 40px;
  226. overflow: hidden;
  227. color: #fff;
  228. text-align: center;
  229. }
  230.  
  231.  
  232. /*DESCRIPTION*/
  233. .boxxxiezz {
  234. margin-top: 20px;
  235. margin-left: 220px;
  236. background-color: transparent;
  237. width: 500px;
  238. height: 190px;
  239. position: absolute;
  240. z-index: 10;
  241. }
  242.  
  243. .desc {
  244. position: absolute;
  245. margin: 20px;
  246. padding: 10px;
  247. width: 440px;
  248. height: 130px;
  249. background-color: #0e0e0e;
  250. color: #fff;
  251. text-align: justify;
  252. overflow: auto;
  253. opacity: 0;
  254. z-index: 11;
  255. transition: all 0.6s ease-out;
  256. -webkit-transition: all 0.6s ease-out;
  257. -moz-transition: all 0.6s ease-out;
  258. -o-transition: all 0.6s ease-out;
  259. }
  260.  
  261. .boxxxiezz:hover .desc {
  262. opacity: 1;
  263. margin-top: 20px;
  264. transition: all 0.6s ease-out;
  265. -webkit-transition: all 0.6s ease-out;
  266. -moz-transition: all 0.6s ease-out;
  267. -o-transition: all 0.6s ease-out;
  268. }
  269.  
  270. /*END OF CUSTOMIZABLE CSS*/
  271.  
  272. #credit {
  273. position: fixed;
  274. bottom: 5px;
  275. right: 6px;
  276. background-color: #000;
  277. color: #fff;
  278. opacity: 0.4;
  279. height: auto;
  280. width: auto;
  281. padding: 5px;
  282. font-size: 10px;
  283. border-radius: 3px;
  284. transition: all 0.6s ease-out;
  285. -webkit-transition: all 0.6s ease-out;
  286. -moz-transition: all 0.6s ease-out;
  287. -o-transition: all 0.6s ease-out;
  288. }
  289.  
  290. #credit:hover {
  291. opacity: 1;
  292. transition: all 0.6s ease-out;
  293. -webkit-transition: all 0.6s ease-out;
  294. -moz-transition: all 0.6s ease-out;
  295. -o-transition: all 0.6s ease-out;
  296. }
  297.  
  298. #credit a {
  299. text-decoration: none;
  300. color: #fff;
  301. transition: all 0.6s ease-out;
  302. -webkit-transition: all 0.6s ease-out;
  303. -moz-transition: all 0.6s ease-out;
  304. -o-transition: all 0.6s ease-out;
  305. }
  306.  
  307. #credit a:hover {
  308. color: #fff;
  309. transition: all 0.6s ease-out;
  310. -webkit-transition: all 0.6s ease-out;
  311. -moz-transition: all 0.6s ease-out;
  312. -o-transition: all 0.6s ease-out;
  313. }
  314.  
  315. </style>
  316. </head>
  317.  
  318. <body>
  319.  
  320. <div id="container1">
  321. <div class="title">My Characters</div>
  322. <div class="links">
  323. <a href="/">home</a>
  324. <a href="/">link 1</a>
  325. <a href="/">link 2</a>
  326. <a href="/">link 3</a>
  327. <a href="/">link 4</a>
  328. <a href="/">link 5</a>
  329. </div>
  330. </div>
  331.  
  332. <div id="container2">
  333.  
  334. <!--BOX #01-->
  335. <div class="boxxxie">
  336. <div class="pic"><img src="http://25.media.tumblr.com/tumblr_mazux2S8tx1rfymxfo1_250.jpg"></div>
  337. <div class="main">
  338. <div class="name">Austin Davids</div>
  339. <div class="info">Lafayette Woods - 18 - Student - Werewolf</div>
  340. <div class="info"><b>Status:</b> Inactive</div>
  341. </div>
  342. <div class="boxxxiezz">
  343. <div class="desc">
  344. <b>Bio:</b> Austin has been living in Lafayette Woods for his entire life. He was born there and lost his parents there. His parents were murdered by wild wolves when he was still 9 in their house at the side of the woods. He was left maimed and dying in his house when Callum found him. Callum decided to save him by turning him into a werewolf and adopted him.
  345. Austin has never regretted the day he was turned into a werewolf. He’s very grateful and loves Callum like a father. He’s always the good kid; he gets good grades at school and spends most of his time helping Callum in the bookstore even though Callum has never pressurized him to do any of those. But that’s the Austin that Callum needs to know.</br>
  346. His motto is “What you don’t know won’t hurt you”. That’s the motto that builds the other Austin. The Austin at school, the Austin outside their home. He smokes and drinks hard liquors. He sleeps with girls. Sometimes he provokes people so he can fight and get away with it. He’s sneaky and good at managing his façade.</br>
  347. Being one of the fastest werewolves makes it easy for Austin to hunt, and he uses that to get more money after being taken under his teacher’s wings. With his Maths teacher, Braxton Hyde, and his fellow hunter, Silver Valentine, Austin often hunts animals and dries their blood to feed the vampires. He doesn’t mind doing it since he doesn’t hold any grudge on the vampires, but he’s afraid that Callum might end up being angry at him if he knows.</p>
  348. <b>Face Claim:</b>Josh Hutcherson</br>
  349. <b>Roleplay:</b> <a href="/">Lafayette Woods</a>
  350. </div>
  351. </div>
  352. <div class="boxxxiez"></div>
  353. </div>
  354.  
  355. <!--BOX #02-->
  356. <div class="boxxxie">
  357. <div class="pic"><img src="http://25.media.tumblr.com/tumblr_mazv43flgw1rfymxfo2_250.jpg"></div>
  358. <div class="main">
  359. <div class="name">Juliet Le Blanc</div>
  360. <div class="info">Lafayette Woods - 18/272 - Student - Vampire</div>
  361. <div class="info"><b>Status:</b> Deceased</div>
  362. </div>
  363. <div class="boxxxiezz">
  364. <div class="desc">
  365. <b>Bio:</b> Juliet is the youngest vampire of the Le Blanc family, and the most unsociable of four. Since the day her family moved to Lafayette Woods two years ago, Juliet hasn’t been able to make any close friends since she always feels out of place. She’d rather spend her time alone browsing on the internet and watching the television just to catch up with the world that she’s in. Her mind sometimes still belongs to the 20th century, and she’s still constantly amazed by the technology that she has now.</br>
  366. Lately Juliet’s been trying to socialize more, since the vampire world bored her and she wants to know more about the humans. She tries to be friendlier and smile all the time even though it was hard for her at first. Sooner or later, she’s sure, the title “Queen of Goth” that she got at school would disappear if she keeps trying. Sometimes it’s hard for her to not get annoyed at humans, though. Many of the girls only befriend her just because they want her brother’s number. Some of them would later come out from her brother’s room in the morning, and she’s sick of that.</br>
  367. Just like the other Le Blanc family members, Juliet has achieved the highest level of control possible that the scent of human’s blood doesn’t affect her anymore. She feeds on does’ blood which she buys from the closest dealer possible because she’s too lazy to hunt.
  368. </p>
  369. <b>Relationships: </b><a href="/">Alexandre Le Blanc</a> (Father), <a href="/">Ashford Le Blanc</a> (Brother)</br>
  370. <b>Face Claim:</b> Nina Dobrev</br>
  371. <b>Roleplay:</b> <a href="/">Lafayette Woods</a>
  372. </div>
  373. </div>
  374. <div class="boxxxiez"></div>
  375. </div>
  376.  
  377. <!--BOX #03-->
  378. <div class="boxxxie">
  379. <div class="pic"><img src="http://25.media.tumblr.com/tumblr_mazux2S8tx1rfymxfo4_250.jpg"></div>
  380. <div class="main">
  381. <div class="name">Kevin Whitby</div>
  382. <div class="info">Harry Potter RP - 17 - Hufflepuff - 7th Year - Muggleborn</div>
  383. <div class="info"><b>Status:</b> Inactive</div>
  384. </div>
  385. <div class="boxxxiezz">
  386. <div class="desc">
  387. <b>Personality:</b> Kevin is the typical Hufflepuff; kind, loyal, and he always puts friendship above everything. He's also a very gentle person. Kevin is always unfortunate when it comes to hexing that he barely passed his Charms class every year. However, to even it out, Kevin is very good in Divination.
  388. </p>
  389. <b>Face Claim:</b> Andrew Garfield</br>
  390. <b>Roleplay:</b> <a href="/">Harry Potter RP</a><br>
  391. </div>
  392. </div>
  393. <div class="boxxxiez"></div>
  394. </div>
  395.  
  396. <!--BOX #04-->
  397. <div class="boxxxie">
  398. <div class="pic"><img src="http://25.media.tumblr.com/tumblr_mazv43flgw1rfymxfo1_250.jpg"></div>
  399. <div class="main">
  400. <div class="name">Gwen Stacy</div>
  401. <div class="info">The Avengers - 21 - College Student - No Super Power</div>
  402. <div class="info"><b>Status:</b> Active</div>
  403. </div>
  404. <div class="boxxxiezz">
  405. <div class="desc">
  406. <b>Bio:</b> N/A
  407. </p>
  408. <b>Face Claim:</b> Emma Stone</br>
  409. <b>Roleplay:</b> <a href="/">Avengers RP</a><br>
  410. <b>Link to Account:</b> [<a href="/">x</a>]
  411. </div>
  412. </div>
  413. <div class="boxxxiez"></div>
  414. </div>
  415.  
  416. <!--END OF CUSTOMIZABLE HTML-->
  417.  
  418. <div id="credit">
  419. <a href="http://gasphard-ulliel.tumblr.com">THEME</a>
  420. </div>
  421.  
  422. </body>
  423. </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!