API tools faq
paste
Advertisement
gasphard-ulliel

P001: Sirens

gasphard-ulliel
Jan 1st, 2013
13,940
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.25 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. <html>
  5.  
  6. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  7. <script src="/path/to/jquery.masonry.min.js"></script>
  8.  
  9. <head>
  10.  
  11. <style type="text/css">
  12.  
  13. body {
  14. font-family: Cambria; /*edit the font type here*/
  15. font-size: 12px; /*edit the font size here*/
  16. background-color: #ffffff; /*edit the background color*/
  17. background-image: url(''); /*put the url of your background image between '', if any */
  18. background-attachment: fixed;
  19. text-align: justify;
  20. color: #cccccc; /*edit the hex code to change the color of the text*/
  21. }
  22.  
  23. a:link, a:active, a:visited {
  24. color: #cccccc; /*edit the hex code to change the color of the general links text*/
  25. text-decoration: none;
  26. transition: all 0.6s ease-out;
  27. -webkit-transition: all 0.6s ease-out;
  28. -moz-transition: all 0.6s ease-out;
  29. -o-transition: all 0.6s ease-out;
  30. }
  31.  
  32. a:hover {
  33. color: #313131; /*edit the hex code to change the color of the links when hovered*/
  34. transition: all 0.6s ease-out;
  35. -webkit-transition: all 0.6s ease-out;
  36. -moz-transition: all 0.6s ease-out;
  37. -o-transition: all 0.6s ease-out;
  38. }
  39.  
  40. ::-webkit-scrollbar-thumb {
  41. background-color: #cccccc; /*edit the hex code to change the color of the scrollbar*/
  42. height:100px;
  43. }
  44.  
  45. ::-webkit-scrollbar {
  46. height:25px;
  47. width:9px;
  48. background-color: #fff; /*edit the hex code to change the color of the scrollbar background*/
  49. }
  50.  
  51. iframe#tumblr_controls {
  52. margin-top: 75px;
  53. position: fixed !important;
  54. right:6px !important;
  55. opacity: 0;
  56. width: auto;
  57. border-radius: 10px;
  58. -webkit-transition: all 0.8s ease-in-out;
  59. -moz-transition: all 0.8s ease-in-out;
  60. -o-transition: all 0.8s ease-in-out;
  61. }
  62.  
  63. iframe#tumblr_controls:hover {
  64. -webkit-transition: all 0.8s ease-in-out;
  65. -moz-transition: all 0.8s ease-in-out;
  66. -o-transition: all 0.8s ease-in-out;
  67. opacity: 0.2;
  68. border-radius: 5px;
  69. }
  70.  
  71. #container1 {
  72. position: absolute;
  73. width: 100%;
  74. margin-left: -10px;
  75. height: auto;
  76. text-align: center;
  77. margin-top: 10px;
  78. }
  79.  
  80. /*CUSTOMIZABLE CSS*/
  81.  
  82. /*NAVIGATION LINKS*/
  83.  
  84. .links {
  85. text-align: center;
  86. width: auto;
  87. margin-top: 10px;
  88. }
  89.  
  90. .links a {
  91. margin: 2px;
  92. border: 1px solid #e6e6e6; /*edit the hex code to change the color of the links border*/
  93. padding: 3px;
  94. display: inline;
  95. text-transform: uppercase;
  96. font-size: 10px;
  97. font-family: calibri;
  98. color: #cccccc; /*edit the hex code to change the color of the links*/
  99. background-color: #fff; /*edit the hex code to change the color of links background*/
  100. -webkit-transition: all 0.8s ease-in-out;
  101. -moz-transition: all 0.8s ease-in-out;
  102. -o-transition: all 0.8s ease-in-out;
  103. }
  104.  
  105. .links a:hover {
  106. color: #99999;
  107. border: 1px solid #999999; /*edit the hex code to change the color of the links border when hovered*/
  108. -webkit-transition: all 0.4s ease-in-out;
  109. -moz-transition: all 0.4s ease-in-out;
  110. -o-transition: all 0.4s ease-in-out;
  111. }
  112.  
  113.  
  114. #container2 {
  115. position: relative;
  116. width: 890px;
  117. text-align: center;
  118. margin: 20px auto;
  119. }
  120.  
  121. /*OUTER BOX*/
  122.  
  123. #boxes {
  124. width: 270px;
  125. height: 520px;
  126. border: 1px solid #e6e6e6; /*edit the hex code to change the color of the outer box border*/
  127. margin: auto;
  128. display: inline-block;
  129. position: auto;
  130. }
  131.  
  132. /*CHARACTER'S PROFILE PICTURE*/
  133.  
  134. #images {
  135. margin-left: 10px;
  136. margin-top: 10px;
  137. width: 250px;
  138. height: 500px;
  139. position: absolute;
  140. }
  141.  
  142. /*NAME BANNER*/
  143.  
  144. #names {
  145. margin-left: 10px;
  146. margin-top: 450px;
  147. opacity: 0.5;
  148. text-transform: uppercase;
  149. font-family: calibri;
  150. font-size: 12px;
  151. background-color: #fff; /*edit the hex code to change the color of character name's banner*/
  152. color: #656464; /*edit the hex code to change the color of the character name's text*/
  153. padding: 5px;
  154. width: 240px;
  155. position: absolute;
  156. text-align: center;
  157. -webkit-transition: all 0.6s ease-in-out;
  158. -moz-transition: all 0.6s ease-in-out;
  159. -o-transition: all 0.6s ease-in-out;
  160. transition-delay: 0.6s;
  161. -moz-transition-delay: 0.6s;
  162. -webkit-transition-delay: 0.6s;
  163. -o-transition-delay: 0.6s;
  164. }
  165.  
  166. #boxes:hover #names {
  167. opacity: 0;
  168. -webkit-transition: all 0.6s ease-in-out;
  169. -moz-transition: all 0.6s ease-in-out;
  170. -o-transition: all 0.6s ease-in-out;
  171. }
  172.  
  173. /*DESCRIPTION BOX*/
  174.  
  175. #desc {
  176. position: absolute;
  177. background-color: #fff; /*edit the hex code to change the color of the description box background*/
  178. color: #656464; /*edit the hex code to change the color of the description text*/
  179. text-align: justify;
  180. height: 0px;
  181. overflow: hidden;
  182. opacity: 0;
  183. width: 230px;
  184. padding: 10px;
  185. margin-left: 10px;
  186. margin-top: 10px;
  187. -webkit-transition: all 0.6s ease-in-out;
  188. -moz-transition: all 0.6s ease-in-out;
  189. -o-transition: all 0.6s ease-in-out;
  190. }
  191.  
  192. #boxes:hover #desc {
  193. opacity: 0.7;
  194. height: 435px;
  195. border-bottom: 5px solid #cccccc;
  196. overflow-x: hidden;
  197. overflow-y: auto;
  198. -webkit-transition: all 0.6s ease-in-out;
  199. -moz-transition: all 0.6s ease-in-out;
  200. -o-transition: all 0.6s ease-in-out;
  201. transition-delay: 0.6s;
  202. -moz-transition-delay: 0.6s;
  203. -webkit-transition-delay: 0.6s;
  204. -o-transition-delay: 0.6s;
  205. }
  206.  
  207. /*LINKS BOX*/
  208.  
  209. .nav {
  210. position: absolute;
  211. width: 230px;
  212. margin-top: 500px;
  213. height: 20px;
  214. margin-left: 10px;
  215. background-color: #fff; /*edit the hex code to change the color of the links box background*/
  216. text-align: center;
  217. padding: 10px;
  218. opacity: 0;
  219. -webkit-transition: all 0.6s ease-in-out;
  220. -moz-transition: all 0.6s ease-in-out;
  221. -o-transition: all 0.6s ease-in-out;
  222. }
  223.  
  224. #boxes:hover .nav {
  225. opacity: 0.7;
  226. margin-top: 470px;
  227. -webkit-transition: all 0.6s ease-in-out;
  228. -moz-transition: all 0.6s ease-in-out;
  229. -o-transition: all 0.6s ease-in-out;
  230. transition-delay: 0.6s;
  231. -moz-transition-delay: 0.6s;
  232. -webkit-transition-delay: 0.6s;
  233. -o-transition-delay: 0.6s;
  234. }
  235.  
  236. .nav a {
  237. padding: 5px;
  238. margin: 2px;
  239. text-transform: uppercase;
  240. font-family: calibri; /*edit the font type of the links*/
  241. font-size: 10px; /*edit the font size of the links*/
  242. text-align: center;
  243. display: inline;
  244. background-color: #656464; /*edit the hex code to change the color of the links background*/
  245. color: #fff; /*edit the hex code to change the color of the links*/
  246. border-radius: 4px;
  247. -webkit-transition: all 0.4s ease-in-out;
  248. -moz-transition: all 0.4s ease-in-out;
  249. -o-transition: all 0.4s ease-in-out;
  250. }
  251.  
  252. .nav a:hover {
  253. background-color: #000; /*edit the hex code to change the color of the links background when hovered*/
  254. color: #fff; /*edit the hex code to change the color of the links when hovered*/
  255. -webkit-transition: all 0.4s ease-in-out;
  256. -moz-transition: all 0.4s ease-in-out;
  257. -o-transition: all 0.4s ease-in-out;
  258. }
  259.  
  260. /*CREDIT*/
  261.  
  262. .credit {
  263. position: fixed;
  264. color: #fff;
  265. background-color: #000;
  266. bottom: 5px;
  267. right: 10px;
  268. text-transform: uppercase;
  269. font-family: calibri;
  270. border-radius: 200px;
  271. padding: 4px 8px 4px 8px;
  272. font-size: 16px;
  273. opacity: 0.5;
  274. -webkit-transition: all 0.5s ease-out;
  275. -moz-transition: all 0.5s ease-out;
  276. -o-transition: all 0.5s ease-out;
  277. }
  278.  
  279. .credit:hover {
  280. opacity: 1;
  281. -webkit-transition: all 0.5s ease-out;
  282. -moz-transition: all 0.5s ease-out;
  283. -o-transition: all 0.5s ease-out;
  284. }
  285.  
  286. .credit a {
  287. color: #fff;
  288. }
  289.  
  290. .credit a:hover {
  291. color: #656464;
  292. border: none;
  293. }
  294.  
  295. /*
  296.  
  297. SIRENS PAGE THEME ©GASPHARD-ULLIEL.TUMBLR.COM
  298.  
  299. Please do not:
  300. → Move or remove the credit. Moving to a page must be done with permission from the maker.
  301. → Claim as your own. You may edit as much as you wish but it doesn't mean the theme is yours.
  302. → Take a chunk of the code and use it in your/other thememaker's code, unless permitted and credited.
  303. → Use as a base code.
  304.  
  305. */
  306.  
  307. </style>
  308. </head>
  309.  
  310. <body>
  311.  
  312. <table align="center">
  313.  
  314. <div id="container1">
  315.  
  316. <div class="links">
  317. <a href="/">main page</a>
  318. <a href="/ask">message</a>
  319. <a href="http://tumblr.com">dashboard</a>
  320. <!--this is where you add more links-->
  321. </div>
  322.  
  323.  
  324.  
  325. <div id="container2" align="center">
  326.  
  327.  
  328. <!--BOX 1-->
  329. <div id="boxes">
  330. <div id="images"><img src="http://24.media.tumblr.com/tumblr_menwwfEHUZ1rb4sfeo1_400.jpg" width="250"></div><!--change the url of your character's image url-->
  331. <div id="names">Legolas</div><!--your character's name-->
  332. <div id="desc">
  333. <b>Species:</b> Elf <br>
  334. <b>Face Claim:</b> Orlando Bloom<br>
  335. <b>Bio:</b></br>
  336. Legolas was the son of Thranduil, King of the Woodland Realm of Northern Mirkwood, who appears as "the Elvenking" in The Hobbit. Thranduil ruled over the Silvan Elves or "Wood-elves" of Mirkwood.</br>
  337. Although he lived among the Silvan Elves, Legolas was not one himself. His father Thranduil had originally come from Lindon; he and his son were actually Sindar, or "Grey Elves", called in the singular Sinda; "Sindarin" was their language. A small minority of Sindar (headed by Thranduil by the time of The Hobbit) ruled the predominantly Silvan Woodland Realm. Thranduil himself was the son of Oropher. Legolas' mother is never mentioned; the Elves of Mirkwood have no Queen at the time of The Hobbit.</br>
  338. The realm's Sindar minority, who should have been more noble and wise than the Silvan Elves, went "native" at the end of the First Age. After Melkor was defeated and all of the grand Elf-kingdoms of Beleriand were destroyed, the Sindar returned to "a simpler time" in their culture. The realm of Lothlórien was similar to the Woodland Realm in that a community of Silvan Elves was ruled by a non-Silvan minority, namely Galadriel and Celeborn.
  339. </div>
  340. <div class="nav">
  341. <a href="/">roleplay</a>
  342. <a href="/">account</a>
  343. </div>
  344. </div>
  345.  
  346.  
  347. <!--BOX 2-->
  348. <div id="boxes">
  349. <div id="images"><img src="http://25.media.tumblr.com/tumblr_menxevDoug1rb4sfeo1_400.jpg" width="250"></div>
  350. <div id="names">peter parker</div>
  351. <div id="desc">
  352. <b>Age:</b> 21</br>
  353. <b>Face Claim:</b> Andrew Garfield</br>
  354. <b>Bio:</b><br>
  355. Peter Parker was orphaned at the age of six when his parents were killed in an airplane crash overseas. He went to live with his uncle and aunt, Ben and May Parker, in Forest Hills, New York. Parker was extremely bright and became a high honors student at Midtown High School. Parker's shyness and scholastic interest often made him a social outcast.
  356. </div>
  357. <div class="nav">
  358. <a href="/">roleplay</a>
  359. <a href="/">account</a>
  360. </div>
  361. </div>
  362.  
  363.  
  364. <!--BOX 3-->
  365. <div id="boxes">
  366. <div id="images"><img src="http://25.media.tumblr.com/tumblr_menxojwsbX1rb4sfeo1_400.jpg" width="250"></div>
  367. <div id="names">your character's name</div>
  368. <div id="desc">
  369. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut lacinia consectetur purus id hendrerit. Integer eu felis ipsum. Vestibulum interdum tincidunt lobortis. Pellentesque aliquet tincidunt arcu. Aliquam elementum laoreet elit, non laoreet leo malesuada vel. Mauris porttitor interdum nibh. Integer at arcu turpis, quis luctus mauris. Cras quis pharetra elit. Ut tincidunt, quam sit amet dignissim tempus, ipsum neque condimentum risus, a auctor elit nulla quis nunc. Fusce suscipit lobortis urna sit amet lacinia.
  370. </div>
  371. <div class="nav">
  372. <a href="/">roleplay</a>
  373. <a href="/">account</a>
  374. </div>
  375. </div>
  376.  
  377.  
  378. <!--BOX 4-->
  379. <div id="boxes">
  380. <div id="images"><img src="http://25.media.tumblr.com/tumblr_menxgrIynD1rb4sfeo1_400.jpg" width="250"></div>
  381. <div id="names">your character's name</div>
  382. <div id="desc">
  383.  
  384. </div>
  385. <div class="nav">
  386. <a href="/">roleplay</a>
  387. <a href="/">account</a>
  388. </div>
  389. </div>
  390.  
  391.  
  392. <!--BOX 5-->
  393. <div id="boxes">
  394. <div id="images"><img src="http://25.media.tumblr.com/tumblr_menxocj4X51rb4sfeo1_400.jpg" width="250"></div>
  395. <div id="names">your character's name</div>
  396. <div id="desc">
  397.  
  398. </div>
  399. <div class="nav">
  400. <a href="/">roleplay</a>
  401. <a href="/">account</a>
  402. </div>
  403. </div>
  404.  
  405.  
  406. <!--BOX 6-->
  407. <div id="boxes">
  408. <div id="images"><img src="http://24.media.tumblr.com/tumblr_menxeiJqwF1rb4sfeo1_400.jpg" width="250"></div>
  409. <div id="names">your character's name</div>
  410. <div id="desc">
  411.  
  412. </div>
  413. <div class="nav">
  414. <a href="/">roleplay</a>
  415. <a href="/">account</a>
  416. </div>
  417. </div>
  418.  
  419.  
  420. <!--
  421. To add more boxes, copy these below </div> above:
  422.  
  423. <div id="boxes">
  424. <div id="images"><img src="" width="250"></div>
  425. <div id="names">your character's name</div>
  426. <div id="desc">
  427.  
  428. </div>
  429. <div class="nav">
  430. <a href="/">roleplay</a>
  431. <a href="/">account</a>
  432. </div>
  433. </div>
  434.  
  435. -->
  436.  
  437.  
  438. </div>
  439.  
  440. <div class="credit"><a href="http://gasphard-ulliel.tumblr.com" title="theme by gasphard-ulliel">❦</a></div>
  441.  
  442. </body>
  443. </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!