Advertisement
RageQxeen

White Fox

Oct 7th, 2022
174
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 9.99 KB | None | 0 0
  1. <html>
  2. <body><style type="text/css">
  3.  
  4. @import url(https://fonts.googleapis.com/css?family=Cinzel+Decorative|Cinzel|Crimson+Text);
  5.  
  6. html, body {
  7. background: rgb(214,214,214);
  8. background: -moz-radial-gradient(circle, rgba(214,214,214,1) 0%, rgba(88,87,87,1) 51%, rgba(0,0,0,1) 100%);
  9. background: -webkit-radial-gradient(circle, rgba(214,214,214,1) 0%, rgba(88,87,87,1) 51%, rgba(0,0,0,1) 100%);
  10. background: radial-gradient(circle, rgba(214,214,214,1) 0%, rgba(88,87,87,1) 51%, rgba(0,0,0,1) 100%);
  11. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#d6d6d6",endColorstr="#000000",GradientType=1);
  12. }
  13.  
  14. ::-webkit-scrollbar-button:vertical:{
  15. background-color: #transparent;}
  16.  
  17. ::-webkit-scrollbar-thumb:vertical {
  18. background-color:#transparent;
  19. height:150px;}
  20.  
  21. ::-webkit-scrollbar-thumb:horizontal {
  22. background-color:#transparent;
  23. height:60px;}
  24.  
  25.  
  26. ::-webkit-scrollbar {
  27. height:60px;
  28. width:5px;
  29. background-color:#transparent;}
  30.  
  31.  
  32. body .fade {
  33. background-color: #000;
  34. background-image:url("http://i.picpar.com/Cdxe.png");
  35. background-size: 70%;
  36. background-repeat: no-repeat;
  37. background-position: center top;
  38. width: 100%;
  39. height: 100%;
  40. margin:auto;
  41. position: absolute;
  42. right: 0%;
  43. bottom: 0%;
  44. z-index: 99999;
  45. opacity: 1;
  46. animation-fill-mode: ease-in-out forwards;
  47. }
  48.  
  49. body:hover .fade{
  50. animation: fader ease-in-out 10s;
  51. animation-iteration-count: 1;
  52. transform-origin: 50% 50%;
  53. animation-fill-mode:ease-in-out forwards;
  54. -webkit-animation: fader ease-in-out 10s;
  55. -webkit-animation-iteration-count: 1;
  56. -webkit-transform-origin: 50% 50%;
  57. -webkit-animation-fill-mode:forwards;
  58. -moz-animation: fader ease-in-out 10s;
  59. -moz-animation-iteration-count: 1;
  60. -moz-transform-origin: 50% 50%;
  61. -moz-animation-fill-mode:forwards;
  62. -o-animation: fader ease-in-out 10s;
  63. -o-animation-iteration-count: 1;
  64. -o-transform-origin: 50% 50%;
  65. -o-animation-fill-mode:forwards;
  66. -ms-animation: fader ease-in-out 10s;
  67. -ms-animation-iteration-count: 1;
  68. -ms-transform-origin: 50% 50%;
  69. -ms-animation-fill-mode:forwards;
  70. }
  71.  
  72. @keyframes fader{
  73. 0% {
  74. opacity:1;
  75. transform: scaleX(1.00) scaleY(1.00) ;
  76. }
  77. 50% {
  78. opacity:0;
  79. transform: scaleX(NaN) scaleY(NaN) ;
  80. }
  81. 100% {
  82. z-index: -1;
  83. opacity: 0;
  84. }
  85. }
  86.  
  87. @-moz-keyframes fader{
  88. 0% {
  89. opacity:1;
  90. -moz-transform: scaleX(1.00) scaleY(1.00) ;
  91. }
  92. 50% {
  93. opacity:0;
  94. -moz-transform: scaleX(NaN) scaleY(NaN) ;
  95. }
  96. 100% {
  97. z-index: -1;
  98. opacity: 0;
  99. }
  100. }
  101.  
  102. @-webkit-keyframes fader {
  103. 0% {
  104. opacity:1;
  105. -webkit-transform: scaleX(1.00) scaleY(1.00) ;
  106. }
  107. 50% {
  108. opacity:0;
  109. -webkit-transform: scaleX(NaN) scaleY(NaN) ;
  110. }
  111. 100% {
  112. z-index: -1;
  113. opacity: 0;
  114. }
  115. }
  116.  
  117. @-o-keyframes fader {
  118. 0% {
  119. opacity:1;
  120. -o-transform: scaleX(1.00) scaleY(1.00) ;
  121. }
  122. 50% {
  123. opacity:0;
  124. -o-transform: scaleX(NaN) scaleY(NaN) ;
  125. }
  126. 100% {
  127. z-index: -1;
  128. opacity: 0;
  129. }
  130. }
  131.  
  132. @-ms-keyframes fader {
  133. 0% {
  134. opacity:1;
  135. -ms-transform: scaleX(1.00) scaleY(1.00) ;
  136. }
  137. 50% {
  138. opacity:0;
  139. -ms-transform: scaleX(NaN) scaleY(NaN) ;
  140. }
  141. 100% {
  142. z-index: -1;
  143. opacity: 0;
  144. }}
  145.  
  146. #image {
  147. width: 30vw;
  148. margin: 0px;
  149. border: none;
  150. height: 40vw;
  151. background-color:transparent;
  152. position: absolute;
  153. left: 0vw;
  154. bottom: -8vw;
  155. background-image:url("http://i.picpar.com/Orxe.png");
  156. background-repeat:no-repeat;
  157. background-position: bottom;
  158. background-size: 100%;
  159. z-index: 2;
  160. }
  161.  
  162. #container {
  163. background-color: #000000;
  164. background-image: url("https://www.transparenttextures.com/patterns/real-carbon-fibre.png");
  165. width: 70vw;
  166. height: 28.5vw;
  167. margin:auto;
  168. position: absolute;
  169. padding: 5px;
  170. right: 10vw;
  171. top: 15vw;
  172. z-index:1;
  173. border: 1px solid #000;
  174. -webkit-animation: slide-in-left 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  175. animation: slide-in-left 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  176. }
  177.  
  178. #content {
  179. background-color:#c0c0c0;
  180. width: 40vw;
  181. height: 27vw;
  182. margin:auto;
  183. position: absolute;
  184. padding: 5px;
  185. font-family: 'Crimson Text', cursive;
  186. font-size: 18px;
  187. color: #000;
  188. right: 1vw;
  189. bottom: .5vw;
  190. z-index: 99;
  191. border: #000000 solid 2px;
  192. }
  193.  
  194. #nav {
  195. background-color: transparent;
  196. width: 12vw;
  197. height: .5vw;
  198. margin:auto;
  199. position: absolute;
  200. right: .5vw;
  201. bottom: -.5vw;
  202. text-align:right;
  203. z-index: 99;
  204. }
  205.  
  206. #nav a, #nav a:link, #nav a:visited {
  207. display:inline-block;
  208. height: .8vw;
  209. width: .8vw;
  210. text-decoration:none;
  211. background: #c0c0c0;
  212. margin: 5px;
  213. border: double #000 5px;
  214. border-radius: 50%;
  215. -webkit-transition: 0.5s linear;
  216. -moz-transition: 0.5s linear;
  217. -o-transition: 0.5s linear;
  218. transition: 0.5s linear;
  219. }
  220.  
  221. #nav a:active, #nav a:hover {
  222. display:inline-block;
  223. height: .8vw;
  224. width: .8vw;
  225. text-decoration:none;
  226. background: #666;
  227. margin: 5px;
  228. border: double #000 5px;
  229. border-radius: 50%;
  230. -webkit-transition: 0.5s linear;
  231. -moz-transition: 0.5s linear;
  232. -o-transition: 0.5s linear;
  233. transition: 0.5s linear;
  234. }
  235.  
  236. .name {position: absolute;
  237. font-family: 'Cinzel Decorative';
  238. color: #fff;
  239. font-size: 4vw;
  240. top: -4.5vw;
  241. right: -2vw;
  242. width:55vw;
  243. height: 6vw;
  244. border: 0px solid #000;
  245. text-align: justify;
  246. text-shadow: -1px 0 #c0c0c0, 0 1px #000,1px 0 #000, 0 -1px #c0c0c0;
  247. overflow: auto;
  248. padding:5px 5px 5px 5px;
  249. z-index: 2;}
  250.  
  251. .title { background: transparent;
  252. background:url('https://supernaturalwriting.files.wordpress.com/2019/06/sparkling-stars-in-sky-gif.gif?w=412&h=231&crop=1') repeat;
  253. background-position: top;
  254. position: absolute;
  255. font-family: 'Cinzel Decorative';
  256. font-size: 4vw;
  257. top: -4.5vw;
  258. right: -2vw;
  259. width:55vw;
  260. height: 6vw;
  261. text-align: justify;
  262. padding:5px 5px 5px 5px;
  263. -webkit-text-fill-color: transparent;
  264. -webkit-background-clip: text;
  265. z-index: 3;}
  266.  
  267. .lyrics {position: absolute;
  268. font-family: 'Cinzel';
  269. color: #95A1D8;
  270. font-size: 1.5vw;
  271. bottom: 7vw;
  272. left: 20vw;
  273. width: 60vw;
  274. height: 5vw;
  275. border: 0px solid #000;
  276. text-align: center;
  277. text-shadow: -1px 0 #c0c0c0, 0 1px #000,1px 0 #000, 0 -1px #c0c0c0;
  278. overflow: auto;
  279. padding:5px 5px 5px 5px;
  280. z-index: 100;}
  281.  
  282. @-webkit-keyframes slide-in-left {
  283. 0% {
  284. -webkit-transform: translateX(-1000px);
  285. transform: translateX(-1000px);
  286. opacity: 0;
  287. }
  288. 100% {
  289. -webkit-transform: translateX(0);
  290. transform: translateX(0);
  291. opacity: 1;
  292. }
  293. }
  294. @keyframes slide-in-left {
  295. 0% {
  296. -webkit-transform: translateX(-1000px);
  297. transform: translateX(-1000px);
  298. opacity: 0;
  299. }
  300. 100% {
  301. -webkit-transform: translateX(0);
  302. transform: translateX(0);
  303. opacity: 1;
  304. }
  305. }
  306.  
  307.  
  308. i{color: #111;}
  309. b{color: #000;}
  310. a{color: #444; text-decoration: none;}
  311. h1{border-bottom: 1px solid #000; text-align: center; font-size: 30px; font-family: 'Cinzel', cursive; color: #000;}
  312. h2{border-bottom: 1px solid #000; text-align: left; font-size: 30px; font-family: 'Cinzel', cursive; color: #000;}
  313. h3{border-bottom: 1px solid #000; text-align: right; font-size: 30px; font-family: 'Cinzel', cursive; color: #000;}
  314. </style>
  315. <div class="fade">
  316. <div class="lyrics">A hero is an ordinary individual who finds the strength to persevere and endure in spite of overwhelming obstacles.</div></div>
  317.  
  318. <div id="container">
  319. <div id="image"></div>
  320.  
  321. <div class="name">Hidden Hero: White Fox</div>
  322. <div class="title">Hidden Hero: White Fox</div>
  323.  
  324. <div id="nav">
  325. <a href="#one"></a>
  326. <a href="#two"></a>
  327. <a href="#three"></a>
  328. <a href="#four"></a>
  329. </div>
  330.  
  331. <div id="content">
  332. <div style="width: 40vw; height: 27vw; overflow-y: hidden;">
  333.  
  334. <a name="one"></a>
  335. <div style="width: 40vw; height: 27vw; overflow: auto;" align="center">
  336. <span style="float:left;"><b>Name</b></span><span style="float:right;">Sato <a title="素 (su) meaning 'plain, white silk, prime' From Japanese 狐 (ko) meaning 'fox'">Suko</a></span><br>
  337. <span style="float:left;"><b>Alias</b></span><span style="float:right;">The Hidden Hero: White Fox</span><br>
  338. <span style="float:left;"><b>Gender</b></span><span style="float:right;">Female</span><br>
  339. <span style="float:left;"><b>Age</b></span><span style="float:right;">25</span><br>
  340. <span style="float:left;"><b>Race</b></span><span style="float:right;">Human</span><br>
  341. <span style="float:left;"><b>Voice</b></span><span style="float:right;"><a href="https://youtu.be/Lzl6UyaKTE8" target="_blank">Nana Mizuki | Collen Clinkenbeard</a></span><br><br>
  342. <span style="float:left;"><b>Height</b></span><span style="float:right;">5'5"</span><br>
  343. <span style="float:left;"><b>Weight</b></span><span style="float:right;">135 lbs</span><br>
  344. <span style="float:left;"><b>Eyes</b></span><span style="float:right;">Unknown</span><br>
  345. <span style="float:left;"><b>Hair</b></span><span style="float:right;">White</span><br>
  346. <span style="float:left;"><b>Build</b></span><span style="float:right;">Athletic</span><br><br>
  347. <span style="float:left;"><b>Orientation</b></span><span style="float:right;">Heterosexual</span><br>
  348. <span style="float:left;"><b>Relationship</b></span><span style="float:right;">Unshackled</span><br>
  349. <span style="float:left;"><b>Occupation</b></span><span style="float:right;">Pro Hero</span><br>
  350. <span style="float:left;"><b>Alignment</b></span><span style="float:right;">Lawful Neutral</span><br><br><br>
  351. </div>
  352.  
  353. <a name="two"></a>
  354. <div style="width: 40vw; height: 27vw; overflow: auto;" align="left">
  355. <h1>Combat</h1>
  356.  
  357. </div>
  358.  
  359.  
  360. <a name="three"></a>
  361. <div style="width: 40vw; height: 27vw; overflow: auto;" align="center">
  362. <h1>Contacts</h1>
  363. <a target="_blank" href="PROFILE LINK HERE"><img src="IMAGE LINK HERE" height="75" width="75" align="left" border="3"></a><br>
  364. <center><b>- Name -</b><br> <i>foe/friend</i><br> small note.</center><br><br><br><br>
  365. </div>
  366.  
  367. <a name="four"></a>
  368. <div style="width: 40vw; height: 27vw; overflow: auto;" align="left">
  369. <h1>Out of Character</h1>
  370.  
  371. <center><b>00</b>. Code made by <a href="/profile.php?user=RageQxeen" target="_blank">RageQxeen</a>, do not steal.<br><br></center>
  372. <b>01</b>. OOC.<br>
  373. </div>
  374. </div>
  375. </div>
  376. </div>
  377. </body>
  378. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement