Advertisement
Guest User

Untitled

a guest
Jul 29th, 2016
86
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.73 KB | None | 0 0
  1. <style>
  2. @import url(https://fonts.googleapis.com/css?family=Press+Start+2P);
  3. body {
  4. background-image:url(https://thenotebook14.files.wordpress.com/2013/10/lothl-rien-lothlorien-9548725-1181-526.jpg);
  5. background-repeat:no-repeat;
  6. background-size:100%;
  7. background-color:black;
  8. background-position: 0%;
  9. height:97.5%;
  10. color:#FFFFFF;
  11. font-family:'Press Start 2P', cursive;
  12. font-size:90%;
  13. }
  14. .pfor {
  15. display:none;
  16. }
  17. #profile {
  18. background-color:transparent;
  19. border:none;
  20. }
  21. #content {
  22. position:fixed;
  23. top:-1%;
  24. left:70%;
  25. height:100%;
  26. width:20%;
  27. padding:1%;
  28. border:2px solid #FFFFFF;
  29. background-color:#111111;
  30. text-align:center;
  31. opacity:0.95;
  32. }
  33. #mugshot {
  34. position:relative;
  35. height:30%;
  36. border:2px solid #FFFFFF;
  37. border-radius:3px;
  38. }
  39. #mug2 {
  40. position:relative;
  41. top:47%;
  42. height:20%;
  43. border:2px solid #FFFFFF;
  44. border-radius:3px;
  45. }
  46. .infobox {
  47. position:absolute;
  48. margin-bottom:1%;
  49. height:10%;
  50. width:90%;
  51. background-color:#777771;
  52. border-radius:3px;
  53. border:2px solid #FFFFFF;
  54. overflow:hidden;
  55. -o-transition:.8s;
  56. -ms-transition:.8s;
  57. -moz-transition:.8s;
  58. -webkit-transition:.8s;
  59. transition:.8s;
  60. }
  61. #one:hover {
  62. z-index:2;
  63. height:60%;
  64. }
  65. #two:hover {
  66. z-index:2;
  67. height:50%;
  68. }
  69. #three:hover {
  70. z-index:2;
  71. height:40%;
  72. }
  73. #four:hover {
  74. z-index:2;
  75. height:30%;
  76. }
  77. .text {
  78. position:absolute;
  79. top:3%;
  80. left:3%;
  81. height:94%;
  82. width:94%;
  83. opacity:0;
  84. overflow:hidden;
  85. -o-transition:1s;
  86. -ms-transition:1s;
  87. -moz-transition:1s;
  88. -webkit-transition:1s;
  89. transition:1s;
  90. }
  91. .text:hover {
  92. opacity:1;
  93. overflow-y:auto;
  94. }
  95. #title {
  96. position:fixed;
  97. top:1%;
  98. left:2%;
  99. width:30%;
  100. text-align:left;
  101. font-size:120%;
  102. }
  103. #title2 {
  104. position:fixed;
  105. bottom:1%;
  106. left:38%;
  107. width:30%;
  108. text-align:right;
  109. font-size:120%;
  110. }
  111. p {
  112. text-indent:5%;
  113. }
  114. i {
  115. color:#c0c0c0;
  116. }
  117. a {
  118. text-decoration:none;
  119. color:#7799CC;
  120. }
  121. #credit {
  122. text-decoration:none;
  123. color:#007ba7;
  124. position:fixed;
  125. right:1%;
  126. bottom:0%;
  127. font-family: UnifrakturCook, Brush Script MT, script, cursive;
  128. }
  129. </style>
  130.  
  131. <div id="title">
  132. "Aman ed' i'<span style="color:#ff879b;">ithil miqule</span>. ed' i' anar."
  133. </div>
  134. <div id="title2">
  135. "Blessed by<span style="color:#ff879b;">the moon</span>.
  136. Kissed by the sun."
  137. </div>
  138.  
  139. <div id="content">
  140. <img src="https://s-media-cache-ak0.pinimg.com/736x/38/d8/c8/38d8c882032a677d50f57a552794b3f6.jpg" id="mugshot"/>
  141.  
  142. <div class="infobox" id="one" style="top:32%;">
  143. <div class="text">
  144. <h3>Stats</h3>
  145. <p>
  146. <b>Name:</b>
  147. <br>Haze Silvermoon
  148. <br><br>
  149. <b>Species:</b>
  150. <br>Elven Cleric
  151. <br><br>
  152. <b>Gender:</b>
  153. <br>Female
  154. <br><br>
  155. <b>Age:</b>
  156. <br>Stat here
  157. <br><br>
  158. <b>Hair:</b>
  159. <br>White
  160. <br><br>
  161. <b>Eyes:</b>
  162. <br>Silver
  163. <br><br>
  164. <b>Height:</b>
  165. <br>5'6"
  166. <br><br>
  167. <b>Weight:</b>
  168. <br>Stat here
  169. <br><br>
  170. <b>Build:</b>
  171. <br>rihta!
  172. <br><br>
  173. <b>Orientation:</b>
  174. <br>Demi
  175. </p>
  176.  
  177. </div>
  178. </div>
  179.  
  180. <div class="infobox" id="two" style="top:43%;">
  181. <div class="text">
  182. <h3>About</h3>
  183. <p>
  184. Well lets see guess I should tell you my name not that it going to matter anyway but regardless my name is Haze Silvermoon I am a battle hardened Cleric also double as healer, I have seen enough war and death watching soldiers and innocent people die for no reason at all. But my life did not start out so simple either. I was orphaned at a young age. How was I orphaned well my mother and father was murdered in front of me which left me on my own, over time a gang of thieves forced me to join them it was a good life I even learned to love and fell in love with one of the members his name was Laar Dragonfang sadly he was killed.
  185. <br>
  186. <br>
  187. He died during what was to be a routine heist of gold from a caravan heading to a nearby rich lord. What we did not know is that some of our own members had betrayed us all the better half of the gang was killed at the caravan. As for me I was beaten and stabbed several times and left for dead in wooded area. I crawled several yards before my body would no longer let me move, it was then that I prayed for the first time in my entire life: I felt my wounds healing very quickly all the pain I was feeling left me as I opened my eyes I saw a beautiful light and in my heart I felt for the first time faith and how it can be used to help others.
  188. <br>
  189. <br>
  190. But now I am starting to question my faith each battle my heart would sink lower in my chest and I have started questioning my faith because if I can't do my job and save them what the heck is the point of it all. I have gotten tired of seeing my friends die while I tried to save them...but instead they would slip into eternal sleep never to see the sun again. Now I travel trying to put the past behind me and move forward with my life not sure what will happen or where I am going."
  191. </p>
  192. </div>
  193. </div>
  194.  
  195. <div class="infobox" id="three" style="top:54%;">
  196. <div class="text">
  197. <h3>Extras</h3>
  198. <p>
  199. The only thing Haze carries in a staff with magical abilities.
  200. <br>
  201. <br>
  202. Haze is an epic level character with summons and spells, if you want to know more please PM me and I will be glad to give a rundown.
  203. </p>
  204. </div>
  205. </div>
  206.  
  207. <div class="infobox" id="four" style="top:65%;">
  208. <div class="text">
  209. <h3>OOC</h3>
  210. <ul>
  211. <li>Be polite, say if you need to afk or leave. </li>
  212. <li>Story is love.</li>
  213. <li>IC is IC and OOC is OOC.</li>
  214. <li>3rd person roleplayer. Mirror poster.</li>
  215. <li>Pics are not mine.</li>
  216. <li>I am not perfect. Don't be a grammar nazi.</li>
  217. <li>No DRAMA!</li>
  218. <li>Real Life first.</li>
  219. </ul>
  220. <audio controls style="width:100%;" loop="1" autoplay="1">
  221. <source src="http://puu.sh/qj24m/4c63963b77.mp3" type="audio/mpeg">
  222. </audio>
  223. </div>
  224. </div>
  225.  
  226. <img src="https://images.alphacoders.com/448/448925.jpg" id="mug2"/>
  227. </div>
  228.  
  229. <a href="http://cera-nore.deviantart.com/" id="credit" target="_blank" title="Firefox 1366x768
  230. Inform me of issues.">Coder</a>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement