Advertisement
bythestars

orphan

Mar 29th, 2019
122
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.18 KB | None | 0 0
  1. <style type="text/css">
  2. @import url('https://fonts.googleapis.com/css?family=Oswald|Kaushan Script|Satisfy');
  3.  
  4. #no {
  5. position: absolute;
  6. left: 0px;
  7. top: 0px;
  8. right: 0px;
  9. bottom: 0px;}
  10.  
  11. ::-webkit-scrollbar {
  12. width: 1px;}
  13.  
  14. ::-webkit-scrollbar-thumb {
  15. background: transparent;}
  16.  
  17. ::selection {
  18. color: #000;
  19. background: #fff;}
  20.  
  21. body {
  22. background-color: #110d17;
  23. background-image: url(https://www.transparenttextures.com/patterns/asfalt-light.png);
  24. cursor: url('https://78.media.tumblr.com/232c090ebdd37ae4bc17adb54e1e0344/tumblr_inline_ol4nwhvSwg1uxxza6_540.png'), default;}
  25.  
  26. h2 {
  27. height: 24px;
  28. background-color: #483861;
  29. text-align: center;
  30. font-family: 'Oswald';
  31. color: #a08ebe;
  32. font-size: 18px;
  33. line-height: 24px;
  34. letter-spacing: 2px;
  35. text-transform: lowercase;
  36. font-weight: bold;
  37. margin-top: 5px;
  38. margin-bottom: 12px;}
  39.  
  40. a {
  41. color: #0e0b13;
  42. text-decoration: none;}
  43.  
  44. .pic {
  45. position: absolute;
  46. height: 200px;
  47. width: 350px;
  48. background-image: url('https://i.imgur.com/HT90emX.gif');
  49. background-attachment: absolute;
  50. background-size: 100% 100%;
  51. bottom: 360px;
  52. right: 10px;}
  53.  
  54. .pic1 {
  55. position: absolute;
  56. height: 100px;
  57. width: 100px;
  58. background-image: url('https://i.imgur.com/h07A3mp.jpg?1');
  59. background-attachment: absolute;
  60. background-size: 100% 100%;
  61. bottom: 20px;
  62. right: 10px;}
  63.  
  64. .pic2 {
  65. position: absolute;
  66. height: 100px;
  67. width: 100px;
  68. background-image: url('https://i.imgur.com/qkX3x9n.png?1');
  69. background-attachment: absolute;
  70. background-size: 100% 100%;
  71. bottom: 20px;
  72. right: 125px;}
  73.  
  74. .pic3 {
  75. position: absolute;
  76. height: 100px;
  77. width: 100px;
  78. background-image: url('https://i.imgur.com/E80jenT.png?1');
  79. background-attachment: absolute;
  80. background-size: 100% 100%;
  81. bottom: 20px;
  82. right: 242px;}
  83.  
  84. .pic4 {
  85. position: absolute;
  86. height: 100px;
  87. width: 100px;
  88. background-image: url('https://i.imgur.com/hQzh51K.jpg?1');
  89. background-attachment: absolute;
  90. background-size: 100% 100%;
  91. bottom: 20px;
  92. right: 360px;}
  93.  
  94. .alpha {
  95. position: fixed;
  96. height: 610px;
  97. width: 510px;
  98. background-image: url();
  99. background-color: #0e0b13;
  100. padding: 10px;
  101. overflow: auto;
  102. bottom: 50%;
  103. left: 50%;
  104. margin-left: -270px;
  105. margin-bottom: -300px;}
  106.  
  107. .con {
  108. position: fixed;
  109. height: 550px;
  110. width: 450px;
  111. background-image: url();
  112. background-color: #483861;
  113. Border: 10px solid;
  114. Border-color: #241c31;
  115. padding: 10px;
  116. overflow: auto;
  117. bottom: 50%;
  118. left: 50%;
  119. margin-left: -250px;
  120. margin-bottom: -280px;}
  121.  
  122. .stats {
  123. position: absolute;
  124. height: 200px;
  125. width: 200px;
  126. font-family: calibri;
  127. color: #000;
  128. font-size: 11px;
  129. letter-spacing: 0px;
  130. text-transform: none;
  131. background-color: #a08ebe;
  132. padding: 10px;
  133. line-height: 22px;
  134. text-align: justify;
  135. overflow: auto;
  136. top: 250px;
  137. left: 40px;}
  138.  
  139. .stats span {
  140. font-family: 'Oswald';
  141. color: #483861;
  142. font-size: 10px;
  143. letter-spacing: 2px;
  144. text-transform: Uppercase;
  145. font-weight: bold;
  146. margin-right: 3px;}
  147.  
  148. .box {
  149. position: absolute;
  150. height: 200px;
  151. width: 200px;
  152. font-family: calibri;
  153. color: #000;
  154. font-size: 11px;
  155. letter-spacing: 0px;
  156. text-transform: none;
  157. background-color: #a08ebe;
  158. padding: 10px;
  159. line-height: 22px;
  160. text-align: justify;
  161. overflow: auto;
  162. opacity: 0;
  163. bottom: 50%;
  164. left: 50%;
  165. margin-left: -230px;
  166. margin-bottom: -10000000px;}
  167.  
  168. .box:target {
  169. opacity: 1;
  170. bottom: 50%;
  171. left: 50%;
  172. margin-left: -230px;
  173. margin-bottom: -140px;}
  174.  
  175. .ooc {
  176. position: absolute;
  177. height: 200px;
  178. width: 200px;
  179. font-family: calibri;
  180. color: #000;
  181. font-size: 11px;
  182. letter-spacing: 0px;
  183. text-transform: none;
  184. background-color: #a08ebe;
  185. padding: 10px;
  186. line-height: 22px;
  187. text-align: justify;
  188. overflow: auto;
  189. bottom: 160px;
  190. left: 270px;
  191. z-index: 9;}
  192.  
  193. .ooc span {
  194. display: inline-block;
  195. font-family: 'Oswald';
  196. color: #483861;
  197. font-size: 10px;
  198. letter-spacing: 2px;
  199. text-transform: Uppercase;
  200. font-weight: bold;
  201. margin-right: 3px;}
  202.  
  203. .navi {
  204. position: absolute;
  205. background-color: transparent;
  206. bottom: 130%;
  207. left: 28%;
  208. margin-left: -80px;
  209. margin-bottom: -370px;
  210. z-index: 9;}
  211.  
  212. a.nav:link, a.nav:active, a.nav:visited{
  213. display: inline-block;
  214. margin-left: 0px;
  215. font-family: 'oswald';
  216. color: #0e0b13;
  217. font-size: 15px;
  218. letter-spacing: 2px;
  219. text-transform: uppercase;
  220. text-decoration: none;
  221. font-weight: bold;
  222. margin-right: 10px;
  223. cursor: url('https://78.media.tumblr.com/232c090ebdd37ae4bc17adb54e1e0344/tumblr_inline_ol4nwhvSwg1uxxza6_540.png'), default;}
  224.  
  225. .title {
  226. position: absolute;
  227. font-family: 'Satisfy', cursive;
  228. color: #a7a5a7;
  229. font-size: 18px;
  230. letter-spacing: 2px;
  231. text-transform: lowercase;
  232. font-weight: ;
  233. bottom: 50%;
  234. left: 50%;
  235. margin-left: 20px;
  236. margin-bottom: 20px;
  237. text-shadow: -5px 2px 0px #483861;}
  238.  
  239. .title2 {
  240. position: absolute;
  241. font-family: 'Satisfy', cursive;
  242. font-weight: bold;
  243. bottom: 50%;
  244. left: 50%;
  245. margin-left: 40px;
  246. margin-bottom: 35px;
  247. background: transparent;
  248. font-size: 100px;
  249. letter-spacing: 2px;
  250. width: 200px;
  251. background: url('https://i.imgur.com/i6nZy4z.gif');
  252. background-position: 10;
  253. background-size: auto;
  254. background-repeat: repeat;
  255. -webkit-text-fill-color: transparent;
  256. -webkit-background-clip: text;
  257. display: block;
  258. text-align: center center
  259. text-transform: uppercase;
  260. opacity: 0.6;
  261. z-index: 14000;}
  262. </style>
  263.  
  264. <div id="no" oncontextmenu="return false;">
  265.  
  266. <div class="alpha">
  267. <div class="con">
  268. <div class="pic"></div>
  269. <div class="pic1"></div>
  270. <div class="pic2"></div>
  271. <div class="pic3"></div>
  272. <div class="pic4"></div></div>
  273.  
  274. <div class="stats">
  275. <h2>{ Statistics :</h2>
  276. <font style=float:left><span>Name:</span></font> <font style=float:right>Cassandra Cain</font><br>
  277. <font style=float:left><span>Current Alias:</span></font> <font style=float:right>Orphan</font><br>
  278. <font style=float:left><span>Aliases:</span></font> <font style=float:right>Batgirl, Black Bat, Kasumi,</font><br>
  279. <font style=float:left><span></span></font> <font style=float:right>The Nothing</font><br>
  280. <font style=float:left><span>Age:</span></font> <font style=float:right>Sixteen</font><br>
  281. <font style=float:left><span>Occupation:</span></font> <font style=float:right>---</font><br>
  282. <font style=float:left><span>Affiliation:</span></font> <font style=float:right>---</font><br>
  283. <font style=float:left><span>Status:</span></font> <font style=float:right>Single</font><br>
  284. <font style=float:left><span>Sexuality:</span></font> <font style=float:right>Demisexual</font><br><br>
  285.  
  286. <font style=float:left><span>Species:</span></font> <font style=float:right>---</font><br>
  287. <font style=float:left><span>Gender:</span></font> <font style=float:right>Female</font><br>
  288. <font style=float:left><span>Height:</span></font> <font style=float:right>---</font><br>
  289. <font style=float:left><span>Weight:</span></font> <font style=float:right>---</font><br>
  290. <font style=float:left><span>Hair:</span></font> <font style=float:right>---</font><br>
  291. <font style=float:left><span>Eyes:</span></font> <font style=float:right>---</font><br><br>
  292.  
  293. <font style=float:left><span>---:</span></font> <font style=float:right>---</font><br>
  294. <font style=float:left><span>---:</span></font> <font style=float:right>---</font><br>
  295. <font style=float:left><span>---:</span></font> <font style=float:right>---</font><br>
  296. </div>
  297.  
  298. <div class="ooc">
  299. <h2>{ Out Of :</h2>
  300. <span>✘</span> Code done by <a target="_blank" href="https://2.roleplay.chat/profile.php?user=Nix">Nix</a>.<br>
  301. <span>✘</span> DC Comics preferred. Others accepted.<br>
  302. <span>✘</span> Snowball, one-liners, third-person, etc.<br>
  303. <span>✘</span> Flirty but #loyalto<a target="_blank" href="https://www.youtube.com/watch?v=P_SlAzsXa7E">thecause</a>.<br>
  304. <span>✘</span> Discord and other OOC details earned.<br>
  305. <span>✘</span> <a target="_blank" href="link">Current theme.</a><br>
  306. </div>
  307. <div class="navi">
  308. <a class="nav" href="#one">One.</a><br>
  309. <a class="nav" href="#two">Two.</a><br>
  310. <a class="nav" href="#three">Three.</a><br>
  311. <a class="nav" href="#four">Four.</a><br>
  312. <a class="nav" href="#five">Five.</a>
  313. </div>
  314. </div>
  315.  
  316. <div id="one" class="box">
  317. <h2>{ Something :</h2>
  318. </div>
  319.  
  320. <div id="two" class="box">
  321. <h2>{ Something 2 :</h2>
  322. </div>
  323.  
  324. <div id="three" class="box">
  325. <h2>{ Something 3 :</h2>
  326. </div>
  327.  
  328. <div id="four" class="box">
  329. <h2>{ Something 4 :</h2>
  330. </div>
  331.  
  332. <div class="title"></div>
  333.  
  334. <div class="title2"></div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement