Advertisement
cat_inthe_cradle

Harley Quinn

Apr 25th, 2017
645
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.34 KB | None | 0 0
  1. <style type="text/css">
  2.  
  3. @import url(https://fonts.googleapis.com/css?family=Emilys+Candy|Share);
  4. @font-face{font-family: lights; src: url('https://dl.dropboxusercontent.com/s/462qkir0mfrci8y/IgniteTheLight.ttf');}
  5.  
  6. body{
  7. background-color: #FAE2CA;
  8. background-image: url();
  9. background-size: auto;
  10. background-repeat: repeat;
  11. color: #4D5562;
  12. font: normal 1.9vmin/105% 'tahoma';
  13. text-align: justify;
  14. cursor: url(http://cur.cursors-4u.net/cursors/cur-9/cur817.cur), progress !important;}
  15. a:hover {cursor: url(http://cur.cursors-4u.net/cursors/cur-9/cur817.cur), progress !important;}
  16.  
  17. ::-webkit-scrollbar {
  18. height: 0px; width: 0px;
  19. background-color: #1e90ff;}
  20. ::-webkit-scrollbar-thumb {
  21. background-color: #ff69b4;}
  22.  
  23. ::selection {
  24. background: #4D5562;
  25. color: #FAE2CA;}
  26. ::-moz-selection {
  27. background: #4D5562;;
  28. color: #FAE2CA;}
  29.  
  30.  
  31. #render {
  32. position: absolute; pointer-events: none;
  33. margin: auto; bottom: 0; right: 0; left: 0;
  34. height: 38%; width: 20%;
  35. border: none;
  36. background-image:url(http://i.picpar.com/Detc.jpg);
  37. background-repeat: no-repeat;
  38. background-size: 100%;
  39. background-position: 42% 5%;
  40. opacity: 1;
  41. z-index: -10;}
  42.  
  43.  
  44. #heart{
  45. margin-top: -28%; margin-left: -13%;
  46. height: 25%; width: 15%;
  47. -ms-transform: rotate(-4.4deg);
  48. -webkit-transform: rotate(-4.4deg);
  49. transform: rotate(-4.4deg);}
  50. h4 {
  51. color: black;
  52. font: 30.0vmin/1.5 Helvetica, sans-serif;}
  53. h4.love {
  54. position: absolute; margin-top: -30%;
  55. background: url(https://s-media-cache-ak0.pinimg.com/564x/57/5a/ff/575affbcb741fe912044dcfbe1df8872.jpg) 0% 75% no-repeat;
  56. background-size: 120%;
  57. -webkit-filter: brightness(115%);
  58. -webkit-background-clip: text;
  59. -webkit-text-fill-color: transparent;}
  60.  
  61. #bubble {
  62. position: absolute;
  63. margin: auto; bottom: 36%; right: 0; left: 10%;
  64. height: 34%; width: 20%;
  65. background-image:url(http://i.picpar.com/Eetc.png);
  66. background-repeat: no-repeat;
  67. background-size: 100%;
  68. background-position: 42% 5%;
  69. opacity: 1;
  70. z-index: 10;}
  71.  
  72. #content {
  73. position: absolute;
  74. margin: auto; top: 4.90%; right: 5%; left: 0%;
  75. height: 68.50%; width: 76%;
  76. padding: 1.5% 7%;
  77. border-radius: 5.5vmin;
  78. text-align: center;
  79. opacity: 1;
  80. z-index: 10;
  81. -ms-transform: rotate(-4.4deg);
  82. -webkit-transform: rotate(-4.4deg);
  83. transform: rotate(-4.4deg);}
  84.  
  85. #img{
  86. position: absolute;
  87. top: 0%; left: 0%;
  88. max-width: 100%;
  89. max-height: 100%;
  90. border: none;
  91. border: 1px solid black;
  92. background-image:url(http://data.whicdn.com/images/250575794/large.gif);
  93. background-repeat: no-repeat;
  94. background-size: 100%;
  95. background-position: 50% 50%;
  96. opacity: 1;}
  97.  
  98. #name {
  99. position: absolute; pointer-events: none;
  100. margin: auto; bottom: 68.70%; right: 0; left: 8%;
  101. height: 3vmin; width: 27vmin;
  102. color: #4D5562;
  103. font: normal 3.50vmin/75% 'emilys candy';
  104. text-align: left;
  105. opacity: 1;
  106. z-index: 15;
  107. -ms-transform: rotate(-4deg);
  108. -webkit-transform: rotate(-4deg);
  109. transform: rotate(-4deg);
  110. transition: all 0.5s ease-in-out;
  111. -webkit-transition: all 0.5s ease-in-out;
  112. -moz-transition: all 0.5s ease-in-out;
  113. -o-transition: all 0.5s ease-in-out;
  114. -ms-transition: all 0.5s ease-in-out;}
  115. body:hover #title1{color: #2D3AE3; opacity: 1;}
  116.  
  117. .quotes {
  118. font: normal 2vmin/120% 'lights';}
  119.  
  120. .underline{
  121. border-bottom: .3vmin dotted #c03;
  122. width: 100%;
  123. display: block;}
  124.  
  125. a.tagz span {
  126. position: fixed;
  127. margin: auto; top: -25%; left: 100%;
  128. height: 100%; width: 100%;
  129. padding: 1.5% 7%;
  130. border: .3vmin solid #4D5562;
  131. border-radius: 5vmin;
  132. background-color: rgba(77, 85, 98, 1);
  133. color: #FAE2CA;
  134. font: normal 1.4vmin/105% 'share';
  135. visibility: hidden; opacity: 0;
  136. z-index: 20; overflow: auto;
  137. transition: all .5s ease-in-out;
  138. -webkit-transition: all .5s ease-in-out;
  139. -moz-transition: all .5s ease-in-out;
  140. -o-transition: all .5s ease-in-out;
  141. -ms-transition: all .5s ease-in-out;}
  142. a.tagz:hover span{
  143. visibility: visible; opacity: 1;}
  144.  
  145. a.tagz2 span {
  146. position: fixed;
  147. margin: auto; top: -25%; left: 100%;
  148. height: 100%; width: 70%;
  149. padding: 1.5% 7%;
  150. border: .3vmin solid #4D5562;
  151. border-radius: 5vmin;
  152. background-color: rgba(77, 85, 98, 1);
  153. color: #FAE2CA;
  154. font: normal 1.4vmin/105% 'share';
  155. visibility: hidden; opacity: 0;
  156. z-index: 20; overflow: hidden;
  157. transition: all .5s ease-in-out;
  158. -webkit-transition: all .5s ease-in-out;
  159. -moz-transition: all .5s ease-in-out;
  160. -o-transition: all .5s ease-in-out;
  161. -ms-transition: all .5s ease-in-out;}
  162. a.tagz2:hover span{
  163. visibility: visible; opacity: 1;}
  164.  
  165. .h5 {
  166. margin-top: 2%;
  167. font: normal 2.5vmin/75% 'emilys candy';
  168. text-decoration: underline;
  169. text-decoration-color: #AA2B24;
  170. opacity: 1;}
  171.  
  172. .f1 {
  173. position: absolute; top: 0px; left: 0px;
  174. height: 218px; width: 150px;
  175. border: 1px solid #000;
  176. background-image:url(http://data.whicdn.com/images/209026179/large.gif);
  177. background-repeat: no-repeat;
  178. background-size: cover;
  179. background-position: 85% 10%;
  180. -moz-box-shadow: 10px 10px 10px 38px rgba(15,0,20,.6);
  181. -webkit-box-shadow: 10px 10px 10px 38px rgba(15,0,20,.6);
  182. box-shadow: 10px 10px 10px 38px rgba(15,0,20,.6);}
  183.  
  184. /* LINKS */
  185.  
  186. a, a:link, a:visited ,a:active a:hover{
  187. text-decoration: none;
  188. color: transparent;
  189. background-color: rgba(61, 63, 76, .7);
  190. background-image: -webkit-linear-gradient(left, #c03 -5%, #000 50%, #eee 50%, transparent 50%);
  191. background-position: 100% 0;
  192. background-size: 200% 200%;
  193. cursor: url('http://cur.cursors-4u.net/cursors/cur-9/cur823.cur'), progress !important;
  194. -webkit-background-clip: text;
  195. -webkit-transition: all 1s ease;
  196. -moz-transition: all 1s ease;
  197. -o-transition: all 1s ease; }
  198.  
  199. a:hover{
  200. background-position: 0 0;
  201. color: transparent;}
  202.  
  203. .mbox{}
  204. .musicbox{
  205. position: absolute;
  206. bottom: 1%; left: .5%;
  207. height: 2.5vmin; width: 2.5vmin;
  208. border-radius: 0px;
  209. border: .1vmin dotted #111;
  210. background-color: #FAE2CA;
  211. color: #444;
  212. font-size: 2.8vmin;
  213. text-align: center;
  214. overflow: hidden;
  215. z-index: 2;
  216. opacity: 1;}
  217.  
  218. .musicbox:active {color: #111;}
  219.  
  220. .tunes{
  221. margin-top: -2px; margin-left: -15%;
  222. height: 2.7vmin; width: 2.9vmin;
  223. overflow: hidden;
  224. opacity: .1;}
  225.  
  226. .indent {position: absolute; top: 13%; left: -5%;}
  227.  
  228. p{
  229. margin-top: .5vmin; margin-bottom: .5vmin;
  230. text-align: justify;
  231. line-height: 120%;}
  232.  
  233. b{
  234. color: #AA2B24;
  235. font-family: impact;
  236. font-weight: normal;
  237. font-size: 1.2vmin;}
  238.  
  239. .d1{color: #292929;}
  240. .d2{color: #660000;}
  241. .d3{color: #aaa;}
  242.  
  243. </style>
  244.  
  245.  
  246. <div id="render"></div>
  247. <div id="bubble"><div id="content">
  248. <span class="underline"><a class="tagz">Dr. Harleen Quinzel<span>
  249. <div class="box"><div class="h5">Mad Love</div><br>
  250. A tragedy that she should fall for Gotham's most notorious criminal mastermind. It was, in many ways, a joke from start to finish. <br><br> As a newly graduated clinical psychiatrist, Harley had begged her associates to give her a chance at Arkham's greatest mental mystery, the Clown Prince of Crime. She was proud, fearless, and arrogant, believing herself ready to face any challenge the Joker could throw at her - but he had her pegged as a fool from the very beginning. His charm was irresistibly intoxicating, and she soon found herself drunk on love. <br><br>
  251. Though she had always wanted to delve into the minds of the criminally insane, what she didn't realize is that there was a flaw within her own personality that drew her to them, like a moth to the deadly flame. Arkham was a two-way mirror. When she gazed upon the Joker for the first time, a hidden part of herself was reflected back. He was the one to see her for her true potential and he seized that opportunity with great finesse. He knew how to work her, and she learned more from him about twisting situations and manipulating others than she ever learned from any book on psychology. Harleen Quinzel had this character locked up inside of her, and the Joker was the key that let Harley Quinn out.</div></span></a>/ Female / 27</span>
  252. 5'7" / 140 lbs / Bisexual / <a class="tagz2">. . . ❤ ?<span>
  253. <div class="box"><div id="heart"><h4 class="love">❤</h4></div></span>
  254. </div></span></a>
  255. <br><br>
  256. <p><div class="quotes">"Take a break and play a while, doo da, doo da. Guaranteed I'll make you smile, oh the doo da day."</div><br>
  257. This is a <a class="tagz">placeholder layout<span><div class="box"><div class="h5">TYPIST NOTES</div>
  258. <p><b>❤</b> WIP; this is just general OOC for now.</p>
  259. <p><b>❤</b> DC/Marvel Multiverse only. Non-negotiable. </p>
  260. <p><b>❤</b> I'm extremely rusty with both Harley's character and creative writing atm, so give me some time to get up to speed. I promise I'll improve. </p>
  261. <p><b>❤</b> I write Harley with her original incarnation in mind, mixed heavily with my own personal interpretation. RP is no fun to me if I can't take creative liberties. <br>
  262. <p><b>❤</b> No ERP - ever. No insta-pairings unless I know you, and even then there has to be some build-up. I'm open to non-canon pairings, though I'm also partial toward my favorites. </p>
  263. <p><b>❤</b> Patient writer, I can be slow myself. Quality > Quantity, Semi-to-Multi para.</p>
  264. <p><b>❤</b> I have a condition that makes me dizzy, so I may need breaks. It makes writing difficult for me at times, so if I'm moving slowly I apologize in advance. </p>
  265. </div></span></a>
  266. until I have the time to make something nice!</p>
  267. </div></div>
  268. <div id="name">HARLEY QUiNN</div>
  269.  
  270.  
  271. <div class="mbox">
  272. <div class="musicbox"><span class="indent">❤</span><div class="tunes"><audio controls>
  273. <source src="https://dl.dropboxusercontent.com/s/7t3wsnja6p5bu3k/AHS%20-%20Carousel.mp3?dl=0">
  274. </audio></div></div></div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement