API tools faq
paste
RageQxeen

Goddess Code

RageQxeen
Oct 9th, 2023
29
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 8.77 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5.  
  6. /* For any help that is needed, please reach out to RageQxeen or your nearest coder friend, Discord will be shared with those who need it. */
  7.  
  8. @import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative&family=Cinzel&family=Onest&display=swap');
  9.  
  10. ::-webkit-scrollbar-button:vertical:{
  11. background-color: #transparent;}
  12.  
  13. ::-webkit-scrollbar-thumb:vertical {
  14. background-color:#transparent;
  15. height:0px;}
  16.  
  17. ::-webkit-scrollbar-thumb:horizontal {
  18. background-color:#transparent;
  19. height:0px;}
  20.  
  21. ::-webkit-scrollbar {
  22. height:0px;
  23. width:5px;
  24. background-color:#transparent;}
  25.  
  26. html, body {
  27. /* This is the gradient background on the main page, you can go to https://cssgradient.io/ to make your own gradient background or you may request the alternative singular color background. */
  28. background: #614385; /* fallback for old browsers */
  29. background: -webkit-linear-gradient(to right, #516395, #614385); /* Chrome 10-25, Safari 5.1-6 */
  30. background: linear-gradient(to right, #516395, #614385); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  31. }
  32.  
  33. /* The container, basics, ooc and history do not need to be touched, if you want to change the font I recommend going to Google Fonts and using the Import Option to bring that in, replace the top where you see @import completely with your import code, then use ONLY the name of the font to replace "Onest", if there is any confusion please reach out and assistance will be given to you. */
  34.  
  35. #container {
  36. background-color:#27214f;
  37. width: 50vw;
  38. height: 75vw;
  39. margin:auto;
  40. position: absolute;
  41. padding: 5px;
  42. left: 25vw;
  43. top: 3vw;
  44. z-index:1;
  45. box-shadow: 0px 5px 10px #000;
  46. border-top: 2px solid #000;
  47. border-left: 2px solid #000;
  48. border-right: 2px solid #000;
  49. border-radius: 20px 20px 0px 0px;
  50. z-index: 1;
  51. }
  52.  
  53. .basics{
  54. background-color: rgb(0,0,0,0.7);
  55. width: 49vw;
  56. height: 15vw;
  57. margin:auto;
  58. position: absolute;
  59. padding: 5px;
  60. font-family: 'Onest', cursive;
  61. font-size: 18px;
  62. color: #fff;
  63. left: .5vw;
  64. top: 17vw;
  65. z-index:1;
  66. border: #000000 solid 2px;
  67. overflow: scroll;
  68. }
  69.  
  70. .ooc{
  71. background-color: rgb(0,0,0,0.7);
  72. width: 23.5vw;
  73. height: 23vw;
  74. margin:auto;
  75. position: absolute;
  76. padding: 5px;
  77. font-family: 'Onest', cursive;
  78. font-size: 18px;
  79. color: #fff;
  80. left: .5vw;
  81. bottom: .5vw;
  82. z-index:1;
  83. border: #000000 solid 2px;
  84. overflow: scroll;
  85. }
  86.  
  87. .history{
  88. background-color: rgb(0,0,0,0.7);
  89. width: 49vw;
  90. height: 17vw;
  91. margin:auto;
  92. position: absolute;
  93. padding: 5px;
  94. font-family: 'Onest', cursive;
  95. font-size: 18px;
  96. color: #fff;
  97. left: .5vw;
  98. top: 33.2vw;
  99. z-index:1;
  100. border: #000000 solid 2px;
  101. overflow: scroll;
  102. }
  103.  
  104. /* The image itself does not need to be altered excluding where you see background- etc. etc., you will only need to change where it says LINK to the link of your image, if it does not line up correctly you can play with the background-position until it does. The way to read it is simple, the first percentage number is how far horizontally you want to go, the second percentage is the vertical. <- This goes ONLY for #image, it does NOT include #art. Any help will be offered here as well if needed. */
  105.  
  106. #image {
  107. width: 50vw;
  108. padding: 5px;
  109. margin: 0px;
  110. height: 15vw;
  111. background-color:transparent;
  112. position: absolute;
  113. right: 0vw;
  114. top: 0vw;
  115. background-image:url("LINK");
  116. background-repeat:no-repeat;
  117. background-position: 40% 20%;
  118. background-size: cover;
  119. border-radius: 20px 20px 0px 0px;
  120. border-bottom: 4px solid #000;
  121. z-index: 2;
  122. }
  123.  
  124. #art{
  125. width: 30vw;
  126. height: 30vw;
  127. background-color:transparent;
  128. position: absolute;
  129. right: -3vw;
  130. bottom: 0vw;
  131. background-image:url("LINK");
  132. background-repeat:no-repeat;
  133. background-position: bottom;
  134. background-size: 100%;
  135. z-index: 2;
  136. }
  137.  
  138. /* The only thing that needs to be bothered with name and title is the font, maybe the size of it depending on the font, and the image link itself. If resizing the font itself, be sure to adjust the top on BOTH name and title so it aligns correct. Once again, help will be given here if needed. */
  139.  
  140. .name {position: absolute;
  141. font-family: 'Cinzel Decorative';
  142. color: #fff;
  143. font-size: 5vw;
  144. top: 10.5vw;
  145. left: 2.5vw;
  146. width: 47vw;
  147. height: 7vw;
  148. border: 0px solid #000;
  149. text-align: justify;
  150. text-shadow: -1px 0 #c0c0c0, 0 1px #000,1px 0 #000, 0 -1px #c0c0c0;
  151. overflow: auto;
  152. padding:5px 5px 5px 5px;
  153. z-index: 5;
  154. }
  155.  
  156. .title { background: transparent;
  157. background:url('LINK');
  158. background-position: center;
  159. position: absolute;
  160. font-family: 'Cinzel Decorative';
  161. font-size: 5vw;
  162. top: 10.5vw;
  163. left: 2.5vw;
  164. width: 47vw;
  165. height: 7vw;
  166. text-align: justify;
  167. padding:5px 5px 5px 5px;
  168. -webkit-text-fill-color: transparent;
  169. -webkit-background-clip: text;
  170. z-index: 6;}
  171.  
  172. /* Finally, the font styles themselves, i stands for italic, b stands for bold, and a stands for link. You can freely change the colors to whatever hex code you desire, and if you want your links underlined (that includes hover links too!) you can remove the text-decoration snippet from a to get it back. h1's background can be changed freely, and the font itself can be changed as well, don't bother anything else. */
  173.  
  174. i{color: #00aced;}
  175. b{color: #0badd0;}
  176. a{color: #dde7ee; text-decoration: none;}
  177. h1{
  178. background: url('LINK');
  179. background-size: cover;
  180. background-position: center;
  181. text-align: center;
  182. border: 2px solid #000;
  183. border-radius: 15px;
  184. font-size: 30px;
  185. font-family: 'Cinzel', cursive;
  186. color: #000;
  187. text-shadow: 1px 1px 0 #c0c0c0, -1px -1px 0 #c0c0c0, -1px 1px 0 #c0c0c0, 1px -1px 0 #c0c0c0;
  188. line-height: 2;
  189. }
  190. </style>
  191. <script type="text/javascript" >
  192. window.onload = function() {
  193. var isCtrl = false;
  194. document.onkeyup=function(e)
  195. {
  196. if(e.which == 17)
  197. isCtrl=false;
  198. }
  199. document.onkeydown=function(e)
  200. {
  201. if(e.which == 17)
  202. isCtrl=true;
  203. if((e.which == 85) || (e.which == 67) && (isCtrl == true))
  204. {
  205. return false;
  206. }
  207. }
  208. var isNS = (navigator.appName == "Netscape") ? 1 : 0;
  209. if(navigator.appName == "Netscape") document.captureEvents(Event.MOUSEDOWN||Event.MOUSEUP);
  210. function mischandler(){
  211. return false;
  212. }
  213. function mousehandler(e){
  214. var myevent = (isNS) ? e : event;
  215. var eventbutton = (isNS) ? myevent.which : myevent.button;
  216. if((eventbutton==2)||(eventbutton==3)) return false;
  217. }
  218. document.oncontextmenu = mischandler;
  219. document.onmousedown = mousehandler;
  220. document.onmouseup = mousehandler;
  221.  
  222. if (document.addEventListener) { // IE >= 9; other browsers
  223. document.addEventListener('contextmenu', function(e) {
  224. alert(" Try asking RageQxeen for her codes instead."); //here you draw your own menu
  225. e.preventDefault();
  226. }, false);
  227. } else { // IE < 9
  228. document.attachEvent('oncontextmenu', function() {
  229. alert("O sun, abide to death.");
  230. window.event.returnValue = false;
  231. });
  232. }
  233. };
  234. </script>
  235. </head>
  236.  
  237. <body>
  238.  
  239. <div id="container">
  240.  
  241. <div id="image"></div>
  242. <div id="art"></div>
  243.  
  244. <div class="name">The Dark Mother</div>
  245. <div class="title">The Dark Mother</div>
  246.  
  247. <div class="basics">
  248. <div style="width: 49vw; height: 15vw; overflow-y: hidden;">
  249. <font style=float:left><b>Name</b></font> <font style=float:right>HERE</font><br>
  250.  
  251. <font style=float:left><b>Moniker</b></font> <font style=float:right><a title="HERE">hover</a></font><br>
  252.  
  253. <font style=float:left><b>Gender</b></font> <font style=float:right>HERE</font><br>
  254.  
  255. <font style=float:left><b>Apparent Age</b></font> <font style=float:right>HERE</font><br>
  256.  
  257. <font style=float:left><b>Race</b></font> <font style=float:right>HERE</font><br>
  258.  
  259. <font style=float:left><b>Height</b></font> <font style=float:right>HERE</font><br>
  260.  
  261. <font style=float:left><b>Marital</b></font> <font style=float:right><a target="_blank" href="LINK" target="_blank">HERE</a></font><br>
  262.  
  263. <font style=float:left><b>Orientation</b></font> <font style=float:right>HERE</font><br><br>
  264.  
  265. <font style=float:left><b>Playlist</b></font> <font style=float:right><a target="_blank" href="LINK" target="_blank">HERE</a></font><br>
  266.  
  267. <font style=float:left><b>Album</b></font> <font style=float:right><a target="_blank" href="LINK" target="_blank">HERE</a></font><br><br>
  268.  
  269. <font style=float:left><b>Home</b></font> <font style=float:right>HERE</font><br>
  270. </div>
  271. </div>
  272.  
  273. <div class="ooc">
  274. <div style="width: 23.5vw; height: 20vw; overflow-y: hidden;">
  275. <center><b>00</b>. Code made by <a target="_blank" href="https://rageqxeen.neocities.org/" target="_blank">RageQxeen</a>, do not steal.<br><br></center>
  276. <b>01</b>. OOC<br>
  277. <b>02</b>. OOC<br>
  278. <b>03</b>. OOC<br>
  279. <b>04</b>. OOC<br>
  280. <b>05</b>. OOC<br>
  281. </div>
  282. </div>
  283.  
  284. <div class="history">
  285. <div style="width: 49vw; height: 17vw; overflow-y: auto;">
  286. <h1>Abilities</h1>
  287. HERE
  288.  
  289. <h1>History</h1>
  290. HERE
  291. </div>
  292. </div>
  293. </div>
  294. </body>
  295. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!