RageQxeen

Mayumi

Aug 19th, 2022
91
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.35 KB | None | 0 0
  1. <html>
  2. <body><style type="text/css">
  3.  
  4. @import url('https://fonts.googleapis.com/css?family=Eagle+Lake|Neucha|Sofia|Walter+Turncoat|Montserrat');
  5.  
  6. html, body {
  7. background: #777;
  8. background-image:url("");
  9. background-size:400px;
  10. background-repeat:no-repeat;
  11. background-position:center bottom;
  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. #image {
  32. width: 250px;
  33. margin: 0px;
  34. border: none;
  35. height: 700px;
  36. background-color:transparent;
  37. position: absolute;
  38. right: 8%;
  39. bottom: 0%;
  40. background-image:url("http://i.picpar.com/QZpd.png");
  41. background-repeat:no-repeat;
  42. background-position: bottom;
  43. background-size: 100%;
  44. }
  45.  
  46. #container {
  47. background-color: transparent;
  48. background-image:url("");
  49. width: 650px;
  50. height: 550px;
  51. margin:auto;
  52. position: absolute;
  53. left: 20%;
  54. top: 5%;
  55. font-family: 'Montserrat', cursive;
  56. padding: 10px;
  57. border: 2px solid #000;
  58. box-shadow: 2px 2px 10px 10px #999;
  59. -webkit-animation: mymove 5s; /* Safari 4.0 - 8.0 */
  60. animation: mymove 5s;
  61. -webkit-animation-timing-function: ease-in-out;
  62. animation-timing-function: ease-in-out;
  63. z-index:1;
  64. }
  65.  
  66.  
  67. @-webkit-keyframes mymove {
  68. from {opacity: 0}
  69. to {opacity: 1}
  70. }
  71.  
  72. #nav {
  73. background-color: transparent;
  74. width: 300px;
  75. height:45px;
  76. margin:auto;
  77. position: absolute;
  78. left: 18%;
  79. bottom: 0%;
  80. text-align: center;
  81. text-decoration: none;
  82. z-index:1;
  83. }
  84.  
  85. #nav a, #nav a:link, #nav a:visited {
  86. display:inline-block;
  87. text-decoration: none;
  88. text-align: center;
  89. background: #000;
  90. color: transparent;
  91. box-shadow: 0px 0px 5px #0000FF;
  92. padding: 4px;
  93. height: 4px;
  94. width: 30px;
  95. border-radius: 5px;
  96. }
  97.  
  98. #nav a:active, #nav a:hover {
  99. display:inline-block;
  100. height: 4px;
  101. width: 30px;
  102. text-decoration:none;
  103. background: #0000FF;
  104. box-shadow: 0px 0px 5px #000;
  105. color: transparent;
  106. margin: 0px;
  107. }
  108.  
  109. .header{
  110. position:absolute;
  111. width: 300px;
  112. background:#transparent;
  113. height:55px;
  114. overflow:hidden;
  115. font-family: 'Eagle Lake', cursive;
  116. font-size: 35px;
  117. font-weight: bold;
  118. font-style:none;
  119. color:#fff;
  120. letter-spacing: 0px;
  121. text-transform:none;
  122. text-align:right;
  123. text-shadow: 2px 0 #000, 0 2px #000, 2px 0 #000, 0 2px #000;
  124. z-index: 100;
  125. }
  126.  
  127. #name {
  128. z-index:15;
  129. position: absolute;
  130. right: 28%;
  131. bottom: 0%;
  132. margin: auto;
  133. background: #transparent;
  134. width: 500px;
  135. height: 90px;
  136. font-family: 'Sofia', cursive;
  137. font-size: 45px;
  138. background: url(https://thumbs.gfycat.com/FamousPertinentBighornsheep-max-1mb.gif) 0px 0px repeat;
  139. -webkit-text-fill-color: transparent;
  140. -webkit-background-clip: text;
  141. background-position: center;
  142. display:block;
  143. text-align: center;
  144. letter-spacing: 1px;
  145. -webkit-transition:opacity 2s linear;
  146. line-height:3.6vw;
  147. }
  148.  
  149. #nameunder{
  150. z-index:15;
  151. position: absolute;
  152. right: 28%;
  153. bottom: 0%;
  154. margin: auto;
  155. background: #transparent;
  156. width: 500px;
  157. height: 90px;
  158. font-family: 'Sofia', cursive;
  159. font-size: 45px;
  160. -webkit-text-fill-color: #470d0d;
  161. text-transform: none;
  162. -webkit-background-clip: text;
  163. display:block;
  164. text-shadow: -1px 0 #333, 0 1px #000,1px 0 #000, 0 -1px #333;
  165. text-align: center;
  166. letter-spacing: 1px;
  167. -webkit-transition:opacity 2s linear;
  168. line-height:3.6vw;
  169. }
  170.  
  171. #icon {
  172. width: 100px;
  173. margin: 0px;
  174. border: 5px solid #000;
  175. height: 100px;
  176. background-color: #000;
  177. position: absolute;
  178. left: 11%;
  179. bottom: 19%;
  180. background-image:url("http://i.picpar.com/oaqd.jpg");
  181. background-repeat:no-repeat;
  182. background-position: center;
  183. background-size: 100%;
  184. }
  185.  
  186. #icon2 {
  187. width: 100px;
  188. margin: 0px;
  189. border: 5px solid #000;
  190. height: 100px;
  191. background-color: #000;
  192. position: absolute;
  193. left: 11%;
  194. bottom: 37%;
  195. background-image:url("http://i.picpar.com/paqd.png");
  196. background-repeat:no-repeat;
  197. background-position: center;
  198. background-size: 100%;
  199. }
  200.  
  201. #icon3 {
  202. width: 100px;
  203. margin: 0px;
  204. border: 5px solid #000;
  205. height: 100px;
  206. background-color: #000;
  207. position: absolute;
  208. left: 11%;
  209. bottom: 55%;
  210. background-image:url("http://i.picpar.com/qaqd.jpg");
  211. background-repeat:no-repeat;
  212. background-position: center;
  213. background-size: 100%;
  214. }
  215.  
  216. #icon4 {
  217. width: 100px;
  218. margin: 0px;
  219. border: 5px solid #000;
  220. height: 100px;
  221. background-color: #000;
  222. position: absolute;
  223. left: 11%;
  224. bottom: 73%;
  225. background-image:url("http://i.picpar.com/raqd.jpg");
  226. background-repeat:no-repeat;
  227. background-position: center;
  228. background-size: 100%;
  229. }
  230.  
  231.  
  232.  
  233. #editthis{ position:fixed;height: 27px; width: 30px; bottom: 6.5%; right: 62%; margin: auto; z-index:99;}
  234.  
  235. #music1{ position:fixed; padding:2px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out;}
  236.  
  237. #music1:hover #music2{ opacity: 0; margin-top:-20px; z-index:-1;}
  238.  
  239. #music1:hover #music3{ opacity: .5; margin-top:-5px; z-index:99;}
  240.  
  241. #music1:hover #musiclist{ opacity: .5;}
  242.  
  243. #music2{ opacity: .5; background-color:#000000; padding:6px; border-radius: 100%; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out;}
  244.  
  245. #music3{ opacity: 0; position:fixed; background-color:#000000; background-image: url('https://www.pngkey.com/png/full/11-113290_playbutton-video-player-button-pngx.png'); background-repeat: no-repeat; background-size: 25px; border:1px dotted #b3b3e5; border-radius: 50px; width:25px; height:25px; z-index:99 margin-left:0px; overflow:hidden; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;}
  246.  
  247. h1 {font-family: 'Walter Turncoat', cursive; text-align: center; border-bottom: 1px solid #000;}
  248. h2 {font-family: 'Neucha', cursive; }
  249. a {text-decoration: none; color: #111;}
  250. i {color: #0000FF; font-weight: bold;}
  251.  
  252. .credit{
  253. position: fixed;
  254. bottom: 0px;
  255. left: 2px;
  256. height: 25px;
  257. width: 25px;
  258. line-height: 15px;
  259. font-size: 10px;
  260. color: #000;
  261. text-align: center;
  262. font-family: roboto;
  263. }
  264.  
  265. #Layout {position: fixed; left: 0px; top: 0px; right: 0px; bottom: 0px;}
  266. </style>
  267. <div id="Layout" oncontextmenu="return false;">
  268.  
  269. <div class="credit" title="Profile by RageQxeen">♛</div>
  270.  
  271. <div id="nav">
  272. <a href="#one">Main</a>
  273. <a href="#two">Seco</a>
  274. <a href="#three">Thir</a>
  275. <a href="#four">Four</a>
  276. </div>
  277.  
  278. <div class="header" style="bottom: 1%; right: 30%;">the itako</div>
  279.  
  280. <div id="nameunder">Mayumi Fujiwara</div><div id="name">Mayumi Fujiwara</div>
  281.  
  282. <div id="editthis"><div id="music1"><div id="music2">
  283. <img src="http://38.media.tumblr.com/tumblr_m7w2py1dEP1r6o8v2.gif" style="opacity: 0.8;"></div>
  284. <div id="music3"><Div style="margin-top:4px;">
  285. <audio controls style="opacity: 0;"><source src="http://k003.kiwi6.com/hotlink/m7gko43anf/Satsuriku_no_Tenshi_-_Angels_of_Death_Opening_VITAL_FULL_by_Masaaki_Endo.mp3"></audio>
  286. </div></div></div></div>
  287.  
  288. <div id="icon"></div>
  289. <div id="icon2"></div>
  290. <div id="icon3"></div>
  291. <div id="icon4"></div>
  292.  
  293. <div id="image"></div>
  294.  
  295. <div id="container">
  296. <div style="width: 650px; height: 550px; overflow-y: hidden;">
  297.  
  298. <a name="one"></a>
  299. <div style="width: 650px; height: 550px; overflow: auto;" align="center">
  300. <h1>the usual</h1>
  301. <span style="float:left;"><b>Name</b></span><span style="float:right;"></span><br>
  302. <span style="float:left;"><b>Alias(es)</b></span><span style="float:right;"><a title="">hover</a></span><br>
  303. <span style="float:left;"><b>Hero Name</b></span><span style="float:right;"></span><br>
  304. <span style="float:left;"><b>Gender</b></span><span style="float:right;"></span><br>
  305. <span style="float:left;"><b>Age</b></span><span style="float:right;"></span><br>
  306. <span style="float:left;"><b>Race</b></span><span style="float:right;"></span><br>
  307. <span style="float:left;"><b>Voice</b></span><span style="float:right;"></span><br>
  308. <span style="float:left;"><b>Class</b></span><span style="float:right;"></span><br><br>
  309. <span style="float:left;"><b>Height</b></span><span style="float:right;"></span><br>
  310. <span style="float:left;"><b>Weight</b></span><span style="float:right;"></span><br>
  311. <span style="float:left;"><b>Eyes</b></span><span style="float:right;"></span><br>
  312. <span style="float:left;"><b>Hair</b></span><span style="float:right;"></span><br>
  313. <span style="float:left;"><b>Build</b></span><span style="float:right;"></span><br><br>
  314. <span style="float:left;"><b>Orientation</b></span><span style="float:right;"></span><br>
  315. <span style="float:left;"><b>Relationship</b></span><span style="float:right;"></span><br>
  316. <span style="float:left;"><b>Quirk</b></span><span style="float:right;"></span><br>
  317. <span style="float:left;"><b>Affiliation</b></span><span style="float:right;"></span><br><br>
  318. </div>
  319.  
  320. <a name="two"></a>
  321. <div style="width: 650px; height: 550px; overflow: auto;" align="left">
  322. <h1>combat</h1>
  323. <span style="float:left;"><b>Cooperation</b></span><span style="float:right;">●●○○○</span><br><br>
  324. <span style="float:left;"><b>Power</b></span><span style="float:right;">●●●●○</span><br><br>
  325. <span style="float:left;"><b>Speed</b></span><span style="float:right;">●●○○○</span><br><br>
  326. <span style="float:left;"><b>Intelligence</b></span><span style="float:right;">●●●●●</span><br><br>
  327.  
  328. <h2>headcanons</h2>
  329. <ul>
  330. <li>
  331. </ul>
  332. </div>
  333.  
  334.  
  335. <a name="three"></a>
  336. <div style="width: 650px; height: 550px; overflow: auto;" align="center">
  337. <h1>connections</h1>
  338. <a target="_blank" href="/profile.php?user=HERE" title="HERE"><img style="border-radius: 50%" src="HERE" align="left" height="100" width="100"></a>
  339. <a target="_blank" href="/profile.php?user=HERE" title="HERE"><img style="border-radius: 50%" src="HERE" align="left" height="100" width="100"></a>
  340. <a target="_blank" href="/profile.php?user=HERE" title="HERE"><img style="border-radius: 50%" src="HERE" align="left" height="100" width="100"></a>
  341. <a target="_blank" href="/profile.php?user=HERE" title="HERE"><img style="border-radius: 50%" src="HERE" align="left" height="100" width="100"></a>
  342.  
  343. </div>
  344.  
  345.  
  346. <a name="four"></a>
  347. <div style="width: 650px; height: 550px; overflow: auto;" align="center">
  348. <h1>out of character</h1>
  349. <b>00</b>. Made by RageQxeen, free codes can be found <a target="_blank" href="https://alliealgiere.neocities.org">here</a>.<br><br>
  350. <b>01</b>. OOC<br>
  351. </div>
  352.  
  353. </div>
  354. </div>
  355. </div>
  356. </div>
  357. </body>
  358. </html>
Advertisement
Add Comment
Please, Sign In to add comment