RageQxeen

Mrow

Aug 30th, 2018
105
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.44 KB | None | 0 0
  1. <html>
  2. <body><style type="text/css">
  3.  
  4. @import url(https://fonts.googleapis.com/css?family=Indie+Flower|Pacifico|Shadows+Into+Light|Dancing+Script|Architects+Daughter|Kaushan+Script|Gloria+Hallelujah|Satisfy|Courgette|Handlee|Rock+Salt|Cookie|Shadows+Into+Light+Two|Tangerine|Pinyon+Script|Great+Vibes|Bad+Script|Marck+Script|Damion|Niconne|Alex+Brush|Yellowtail|Nothing+You+Could+Do|Kalam|Sacramento|Homemade+Apple|Calligraffitti|Just+Another+Hand|Waiting+for+the+Sunrise|Allura|Rancho|Crafty+Girls|Reenie+Beanie|Parisienne|Rochester|Leckerli+One|Grand+Hotel|Merienda+One|Italianno|Montez|Petit+Formal+Script|Give+You+Glory|Delius|Mr+Dafoe|The+Girl+Next+Door|Arizonia|La+Belle+Aurore|Qwigley|Norican|Euphoria+Script|Dawning+of+a+New+Day|Bilbo+Swash+Caps|Meddon|Fondamento|Clicker+Script|Aladin|Delius+Swash+Caps|Rouge+Script|Engagement|Redressed|Aref+Ruqaa);
  5.  
  6. html, body {
  7. background: #ccc;
  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: 300px;
  33. margin: 0px;
  34. border: none;
  35. height: 450px;
  36. background-color:transparent;
  37. position: absolute;
  38. left: 23%;
  39. top: 0%;
  40. background-image:url("http://i.picpar.com/eBTc.png");
  41. background-repeat:no-repeat;
  42. background-position: bottom;
  43. background-size: 100%;
  44. animation: bounce 3s infinite;
  45. -webkit-animation: bounce 3s infinite;
  46. -o-animation: bounce 3s infinite;
  47. image-shadow: 0 0 25px #CC20FF;
  48. }
  49.  
  50. @keyframes bounce{
  51. 0% {top: 0px;}
  52. 50% {top: 10px;}
  53. 100% {top: 0px;}}
  54.  
  55. @-webkit-keyframes bounce {
  56. 0% {top: 0px;}
  57. 50% {top: 10px;}
  58. 100% {top: 0px;}}
  59.  
  60. .image img{ image-shadow: 0 0 25px #CC20FF;}
  61.  
  62. #name {
  63. z-index:15;
  64. position: absolute;
  65. left: 5%;
  66. top: 55%;
  67. margin: auto;
  68. background: #transparent;
  69. width: 55vw;
  70. height: 100px;
  71. font-family: Great Vibes;
  72. font-size: 43px;
  73. background: url(https://thumbs.gfycat.com/ElementaryFormalIndianspinyloach-size_restricted.gif) -20px -20px repeat;
  74. -webkit-text-fill-color: transparent;
  75. -webkit-background-clip: text;
  76. background-position: bottom;
  77. display:block;
  78. text-align: center;
  79. letter-spacing: 1px;
  80. -webkit-transition:opacity 2s linear;
  81. line-height:3.6vw;
  82. }
  83.  
  84. #nameunder{
  85. z-index:15;
  86. position: absolute;
  87. left: 5%;
  88. top: 55%;
  89. margin: auto;
  90. background: #transparent;
  91. width: 55vw;
  92. height: 100px;
  93. font-family: Great Vibes;
  94. font-size: 43px;
  95. -webkit-text-fill-color: transparent;
  96. text-transform: none;
  97. -webkit-background-clip: text;
  98. display:block;
  99. text-shadow: -1px 0 #ccc, 0 1px #000,1px 0 #000, 0 -1px #ccc;
  100. text-align: center;
  101. letter-spacing: 1px;
  102. -webkit-transition:opacity 2s linear;
  103. line-height:3.6vw;
  104. }
  105.  
  106. #content {
  107. background-color:#8b73c9;
  108. width: 450px;
  109. height: 350px;
  110. margin:auto;
  111. position: absolute;
  112. padding: 5px;
  113. font-family: 'Indie Flower', cursive;
  114. color: #000;
  115. right: 19.8%;
  116. bottom: 15%;
  117. z-index:1;
  118. border: #000000 solid 2px;
  119. }
  120.  
  121. #box{
  122. background-color:#8b73c9;
  123. width: 350px;
  124. height: 150px;
  125. margin:auto;
  126. position: absolute;
  127. padding: 5px;
  128. font-family: 'Indie Flower', cursive;
  129. color: #000;
  130. left: 19.8%;
  131. bottom: 15%;
  132. z-index:1;
  133. border: #000000 solid 2px;
  134. }
  135.  
  136. #nav {
  137. background-color: transparent;
  138. width: 250px;
  139. height: 10px;
  140. margin:auto;
  141. position: absolute;
  142. right: 38%;
  143. top: 27%;
  144. text-align: center;
  145. z-index:1;
  146. }
  147.  
  148. #nav a, #nav a:link, #nav a:visited {
  149. display:inline-block;
  150. background: #000;
  151. color: #000;
  152. margin-top: 0px;
  153. margin-bottom: 0px;
  154. margin-left: 0px;
  155. height: 10px;
  156. width: 40px;
  157. border-radius: 5px;
  158. }
  159.  
  160. #nav a:active, #nav a:hover {
  161. display:inline-block;
  162. height: 10px;
  163. width: 40px;
  164. text-decoration:none;
  165. background: #8b73c9;
  166. color: #8b73c9;
  167. margin: 0px;
  168. }
  169.  
  170. #icon {
  171. width: 100px;
  172. margin: 0px;
  173. border: 5px solid #000;
  174. height: 100px;
  175. background-color: #000;
  176. position: absolute;
  177. right: 11%;
  178. top: 32%;
  179. background-image:url("https://i.imgur.com/lnSewhu.jpg");
  180. background-repeat:no-repeat;
  181. background-position: center;
  182. background-size: 100%;
  183. border-radius: 100px;
  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. right: 3%;
  194. top: 32%;
  195. background-image:url("https://i.imgur.com/L7J7kgk.jpg");
  196. background-repeat:no-repeat;
  197. background-position: center;
  198. background-size: 100%;
  199. border-radius: 100px;
  200. }
  201.  
  202. #icon3 {
  203. width: 100px;
  204. margin: 0px;
  205. border: 5px solid #000;
  206. height: 100px;
  207. background-color: #000;
  208. position: absolute;
  209. right: 11%;
  210. top: 48%;
  211. background-image:url("https://i.imgur.com/L4N8HKN.jpg");
  212. background-repeat:no-repeat;
  213. background-position: center;
  214. background-size: 100%;
  215. border-radius: 100px;
  216. }
  217.  
  218. #icon4 {
  219. width: 100px;
  220. margin: 0px;
  221. border: 5px solid #000;
  222. height: 100px;
  223. background-color: #000;
  224. position: absolute;
  225. right: 3%;
  226. top: 48%;
  227. background-image:url("https://i.imgur.com/55e8MFY.jpg");
  228. background-repeat:no-repeat;
  229. background-position: center;
  230. background-size: 100%;
  231. border-radius: 100px;
  232. }
  233.  
  234. #icon5 {
  235. width: 100px;
  236. margin: 0px;
  237. border: 5px solid #000;
  238. height: 100px;
  239. background-color: #000;
  240. position: absolute;
  241. right: 11%;
  242. top: 64%;
  243. background-image:url("https://i.imgur.com/PwmDaSx.jpg");
  244. background-repeat:no-repeat;
  245. background-position: center;
  246. background-size: 100%;
  247. border-radius: 100px;
  248. }
  249.  
  250. #icon6 {
  251. width: 100px;
  252. margin: 0px;
  253. border: 5px solid #000;
  254. height: 100px;
  255. background-color: #000;
  256. position: absolute;
  257. right: 3%;
  258. top: 64%;
  259. background-image:url("https://i.imgur.com/IRmLgIn.jpg");
  260. background-repeat:no-repeat;
  261. background-position: center;
  262. background-size: 100%;
  263. border-radius: 100px;
  264. }
  265.  
  266. .credit{
  267. position: fixed;
  268. bottom: 0px;
  269. left: 2px;
  270. height: 25px;
  271. width: 25px;
  272. line-height: 15px;
  273. font-size: 10px;
  274. color: #000;
  275. text-align: center;
  276. font-family: roboto;
  277. }
  278.  
  279. i{color: #00bfff;}
  280. b{color: #003366;}
  281. a{color: #000; text-decoration: none;}
  282.  
  283. #Layout {position: fixed; left: 0px; top: 0px; right: 0px; bottom: 0px;}
  284. </style>
  285. <div id="Layout" oncontextmenu="return false;">
  286.  
  287. <div class="credit" title="Profile by RageQxeen">♛</div>
  288.  
  289. <div id="nameunder">Mischief Maker</div><div id="name">Mischief Maker</div>
  290.  
  291. <div id="image"></div>
  292.  
  293. <div id="icon"></div>
  294. <div id="icon2"></div>
  295. <div id="icon3"></div>
  296. <div id="icon4"></div>
  297. <div id="icon5"></div>
  298. <div id="icon6"></div>
  299.  
  300. <div id="nav">
  301. <a href="#one"></a>
  302. <a href="#two"></a>
  303. <a href="#three"></a>
  304. <a href="#four"></a>
  305. </div>
  306.  
  307.  
  308. <div id="content">
  309. <div style="width: 450px; height: 350px; overflow-y: hidden;">
  310.  
  311. <a name="one"></a>
  312. <div style="width: 450px; height: 350px; overflow: auto;" align="center">
  313. <span style="float:left;"><b>Name</b></span><span style="float:right;"></span><br>
  314. <span style="float:left;"><b>Alias(es)</b></span><span style="float:right;"><a title="">Hover</a>.</span><br>
  315. <span style="float:left;"><b>Gender</b></span><span style="float:right;"></span><br>
  316. <span style="float:left;"><b>Age</b></span><span style="float:right;"></span><br>
  317. <span style="float:left;"><b>Height</b></span><span style="float:right;"></span><br>
  318. <span style="float:left;"><b>Weight</b></span><span style="float:right;"></span><br>
  319. <span style="float:left;"><b>Orientation</b></span><span style="float:right;"></span><br>
  320. <span style="float:left;"><b>Relationship</b></span><span style="float:right;"></span><br>
  321. <span style="float:left;"><b>Race</b></span><span style="float:right;"></span><br>
  322. <span style="float:left;"><b>Mentality</b></span><span style="float:right;"></span><br>
  323. <span style="float:left;"><b>Eyes</b></span><span style="float:right;"></span><br>
  324. <span style="float:left;"><b>Hair</b></span><span style="float:right;"></span><br>
  325. <span style="float:left;"><b>Build</b></span><span style="float:right;"></span><br>
  326. <span style="float:left;"><b>Affiliation</b></span><span style="float:right;"></span><br><br>
  327. </div>
  328.  
  329. <a name="two"></a>
  330. <div style="width: 450px; height: 350px; overflow: auto;" align="center">
  331.  
  332. TBA
  333. </div>
  334.  
  335.  
  336.  
  337. <a name="three"></a>
  338. <div style="width: 450px; height: 350px; overflow: auto;" align="center">
  339.  
  340. TBA
  341. </div>
  342. </div>
  343. </div>
  344.  
  345. <div id="box">
  346. <a name="four"></a>
  347. <div style="width: 350px; height: 150px; overflow: auto;" align="left">
  348. OOC here
  349.  
  350.  
  351. </div>
  352. </div>
  353. </body>
  354. </html>
Advertisement
Add Comment
Please, Sign In to add comment