Advertisement
marshallsmyth

branandcass

Aug 26th, 2017
195
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 5.21 KB | None | 0 0
  1.  
  2. </script>
  3. <body>
  4.  
  5.  
  6.  
  7. <style>
  8. body {
  9. background-image:url(http://orig14.deviantart.net/4738/f/2017/042/5/8/succubus_love__htf_comm_by_catthing-dayp3di.png);
  10. background-attachment:fixed;
  11. background-size:100% 100%;
  12. background-color:#ff007d;
  13. color:#8be0e0;
  14. text-shadow:10px 10px 0px #424242;
  15. text-align:center;
  16. }
  17. @keyframes resonate {
  18. 50% {box-shadow:0px 0px 10px 20px #8be0e0;}
  19. 100% {height:1200px;width:1200px;box-shadow:0px 0px 10px 20px;}
  20. }
  21. @-o-keyframes resonate {
  22. 50% {box-shadow:0px 0px 10px 20px #8be0e0;}
  23. 100% {height:1200px;width:1200px;box-shadow:0px 0px 10px 20px;}
  24. }
  25. @-moz-keyframes resonate {
  26. 50% {box-shadow:0px 0px 10px 20px #8be0e0;}
  27. 100% {height:1200px;width:1200px;box-shadow:0px 0px 10px 20px;}
  28. }
  29. @-webkit-keyframes resonate {
  30. 50% {box-shadow:0px 0px 10px 20px #8be0e0;}
  31. 100% {height:1200px;width:1200px;box-shadow:0px 0px 30px 60px;}
  32. }
  33. #resonate, #profile {
  34. position:fixed;
  35. top:50%;
  36. left:50%;
  37. border-radius:50%;
  38. transform: translateX(-50%) translateY(-50%);
  39. -o-transform: translateX(-50%) translateY(-50%);
  40. -moz-transform: translateX(-50%) translateY(-50%);
  41. -webkit-transform: translateX(-50%) translateY(-50%);
  42. }
  43. #resonate {
  44. height:505px;
  45. width:505px;
  46. animation:resonate 2s infinite;
  47. -o-animation:resonate 2s infinite;
  48. -moz-animation:resonate 2s infinite;
  49. -webkit-animation:resonate 2s infinite;
  50. }
  51. #profile, #navbar a {
  52. background-color:#000000;
  53. box-shadow:0px 0px 10px 10px #8be0e0;
  54. transition:2s;
  55. -o-transition:2s;
  56. -moz-transition:2s;
  57. -webkit-transition:2s;
  58. }
  59. #profile {
  60. height:500px;
  61. width:500px;
  62. opacity:0.1;
  63. }
  64. #profile:hover, #navbar a:hover {
  65. opacity:0.8;
  66. }
  67. .infobox, #navbar a, h1 {
  68. position:absolute;
  69. }
  70. .infobox {
  71. z-index:1;
  72. top:25%;
  73. left:15%;
  74. height:60%;
  75. width:70%;
  76. opacity:0;
  77. overflow-y:auto;
  78. overflow-x:hidden;
  79. transition:1s;
  80. -o-transition:1s;
  81. -moz-transition:1s;
  82. -webkit-transition:1s;
  83. }
  84. .infobox:target {
  85. z-index:2;
  86. opacity:1;
  87. }
  88. #navbar {
  89. position:fixed;
  90. top:87.5%;
  91. left:5%;
  92. height:8%;
  93. width:90%;
  94. }
  95. #navbar a {
  96. top:0%;
  97. bottom:0%;
  98. width:15%;
  99. opacity:0.2;
  100. }
  101. #navbar a:first-child {
  102. left:0%;
  103. transform:skewX(45deg);
  104. -o-transform:skewX(45deg);
  105. -moz-transform:skewX(45deg);
  106. -webkit-transform:skewX(45deg);
  107. }
  108. #navbar a:nth-child(2) {
  109. left:21%;
  110. transform:skewX(45deg);
  111. -o-transform:skewX(45deg);
  112. -moz-transform:skewX(45deg);
  113. -webkit-transform:skewX(45deg);
  114. }
  115. #navbar a:nth-child(3) {
  116. right:21%;
  117. transform:skewX(-45deg);
  118. -o-transform:skewX(-45deg);
  119. -moz-transform:skewX(-45deg);
  120. -webkit-transform:skewX(-45deg);
  121. }
  122. #navbar a:nth-child(4) {
  123. right:0%;
  124. transform:skewX(-45deg);
  125. -o-transform:skewX(-45deg);
  126. -moz-transform:skewX(-45deg);
  127. -webkit-transform:skewX(-45deg);
  128. }
  129. h1 {
  130. top:5%;
  131. left:25%;
  132. width:50%;
  133. }
  134. a {
  135. color:#ffffff;
  136. }
  137. img {
  138. width:100%;
  139. }
  140. ::-webkit-scrollbar {
  141. width:10px;
  142. height:10px;
  143. background-color:#7e7e7e;
  144. }
  145. ::-webkit-scrollbar-thumb:vertical {
  146. background-color:#000000;
  147. border:3px solid #8be0e0;
  148. }
  149. ::-webkit-scrollbar-thumb:horizontal {
  150. background-color:#000000;
  151. border:1px solid #8be0e0;
  152. }
  153. #credit {
  154. text-decoration:none;
  155. color:#007ba7;
  156. position:fixed;
  157. right:1%;
  158. bottom:0%;
  159. background-color:#ffffff;
  160. border-radius:5px;
  161. font-family: UnifrakturCook, Brush Script MT, script, cursive;
  162. font-size:16px;
  163. text-shadow:none;
  164. }
  165. </style>
  166.  
  167. <div id="resonate"></div>
  168. <div id="profile">
  169. <h1>Hibikase</h1>
  170.  
  171. <div class="infobox" id="01">
  172. <audio controls ="1" loop="1">
  173. <source src="http://k003.kiwi6.com/hotlink/chotei841g/Hibikase.mp3" type="audio/mpeg">
  174. </audio>
  175.  
  176. <h2>Stats</h2>
  177. <p>
  178. <b>Name:</b> Thelielle (rhymes with Delilah)
  179. <br>
  180. <b>Species:</b> Hybrid Oni/succubus, or as i like to call her. a onibus
  181. <br>
  182. <b>Gender:</b> Futanari after her two mothers.
  183. <br>
  184. <b>Age:</b> just been born I age 9 years per week
  185. <br>
  186. <b>Hair:</b> blond
  187. <br>
  188. <b>Eyes:</b> purplily
  189. <br>
  190. <b>Height:</b> 7.5 feet. (once she gets to 18)
  191. <br>
  192. <b>Weight:</b> about 5 hamburgers currently.
  193. <br>
  194. <b>Build:</b> rather top heavy for a baby.
  195. <br>
  196. <b>Orientation:</b> unknown.
  197. </p>
  198. </div>
  199.  
  200. <div class="infobox" id="02">
  201. <h2>About</h2>
  202. <p>
  203. nothing much to say right now since she's still just a baby, but i will try and think of more to add here over the next two weeks and little by little i will expand this.
  204. </p>
  205. <a target="_blank" href="https://s-media-cache-ak0.pinimg.com/236x/48/f5/77/48f5778e2e42ee5df34b098ffce5cf26.jpg" target="_blank">Link</a>
  206. </div>
  207.  
  208. <div class="infobox" id="03">
  209. <h2>OOC</h2>
  210. <ul>
  211. <li>if you have any questions about my profile feel free to ask me, and if you want to after you read my profile tell me what you think i could improve on.</li>
  212. <li>i'm open for anything besides scat, to much gore and death.</li>
  213. <li>please feel free to ask me for help with anything, i'm a helpful person IRL.</li>
  214. <li>do not be afraid to ask me to roleplay, if i'm online it mostly means i'm up for an RP.</li>
  215. <li>Bullet five</li>
  216. <li>Bullet six</li>
  217. <li>Bullet seven</li>
  218. <li>Bullet eight</li>
  219. </ul>
  220. </div>
  221. </div>
  222.  
  223. <div id="navbar">
  224. <a href="#01"></a>
  225. <a href="#02"></a>
  226. <a href="#03"></a>
  227. <a href="#00"></a>
  228. </div>
  229.  
  230. <a target="_blank" href="http://ladycerattani.wixsite.com/cera-codes" id="credit" target="_blank" title="VS#26
  231. Firefox 1366x768
  232. Inform me of issues.">Coder</a>
  233.  
  234.  
  235.  
  236. </body>
  237. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement