API tools faq
paste
Advertisement
bythestars

Jean Grey - Code

bythestars
Aug 17th, 2020
43
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.16 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3. <script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  4. <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  5. <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.5/dat.gui.min.js"></script>
  6. <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
  7. <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.min.js"></script>
  8. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  9. <script src="https://roleplay.chat/jquery.tooltipster.js?v=8"></script>
  10. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
  11. <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.js"></script>
  12. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
  13. <link href="https://roleplay.chat/tooltipster.css" rel="stylesheet" type="text/css">
  14. <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  15. <script defer>
  16. window.onload = function() {
  17.  
  18. };
  19. </script>
  20.  
  21. <script type="text/javascript">
  22. $(document).ready(function() {
  23. // Tooltip only Text
  24. $('.masterTooltip').hover(function(){
  25. // Hover over code
  26. var title = $(this).attr('title');
  27. $(this).data('tipText', title).removeAttr('title');
  28. $('<p class="tooltip"></p>')
  29. .text(title)
  30. .appendTo('body')
  31. .fadeIn('slow');
  32. }, function() {
  33. // Hover out code
  34. $(this).attr('title', $(this).data('tipText'));
  35. $('.tooltip').remove();
  36. }).mousemove(function(e) {
  37. var mousex = e.pageX + 20; //Get X coordinates
  38. var mousey = e.pageY + 10; //Get Y coordinates
  39. $('.tooltip')
  40. .css({ top: mousey, left: mousex })
  41. });
  42. });
  43. </script>
  44.  
  45. <style>
  46. @import url('https://fonts.googleapis.com/css?family=Nova Square|Quicksand:500|Righteous');
  47.  
  48.  
  49. body {background-color: #212d22; cursor: url(https://i.imgur.com/TZ2YtWJ.png), auto;}
  50.  
  51. ::-webkit-scrollbar {
  52. width: 4px;
  53. }
  54.  
  55. /* Track */
  56. ::-webkit-scrollbar-track {
  57. background: #;
  58. }
  59.  
  60. /* Handle */
  61. ::-webkit-scrollbar-thumb {
  62. background: #;
  63. }
  64.  
  65. /* Handle on hover */
  66. ::-webkit-scrollbar-thumb:hover {
  67. background: #;
  68. }
  69.  
  70.  
  71.  
  72.  
  73. /* The typing effect */
  74. @keyframes typing {
  75. from { width: 0 }
  76. to { width: 100% }
  77. }
  78.  
  79. /* The typewriter cursor effect */
  80. @keyframes blink-caret {
  81. from, to { border-color: transparent }
  82. 50% { border-color: }
  83. }
  84.  
  85. a {font-family: Nova Square;
  86. color: #abe8b0;
  87. font-weight: bold;
  88. font-size: 12px;
  89. text-transform: ;
  90. text-decoration: none;
  91. font-weight: 100; cursor: url(https://i.imgur.com/TZ2YtWJ.png), auto;}
  92.  
  93. .KAL{
  94. position:fixed;
  95. bottom:5px;
  96. left:95%;
  97.  
  98. width: 50px; height: 30px;
  99. }
  100.  
  101. .mainbox {position: fixed; background-color: #121913; width: 770px; height: 330px; border: 3px solid; border-color: #abe8b0; margin: auto; left: -40px; right: 0px; top: 50px; bottom: 0px; background-size: 100%; z-index:0; border-radius:0px; box-shadow: 1px 2px 2px #; }
  102.  
  103. .box1 {position: fixed; background-color: #212d22; width: 250px; height: 300px; border: 0px solid; border-color: #000; margin: auto; left: -530px; right: 0px; top: 50px; bottom: 0px; background-size: 100%; z-index:0; border-radius:0px; box-shadow: 1px 2px 2px #; }
  104.  
  105. .box2 {position: fixed; background-color: #212d22; width: 250px; height: 250px; border: 0px solid; border-color: #000; margin: auto; left:-5px; right: 0px; top: 0px; bottom: 0px; background-size: 100%; z-index:0; border-radius:0px; box-shadow: 1px 2px 2px #; }
  106.  
  107. .fr1{ width: 40px; height: 40px; margin-bottom: 10px; margin-top: 10px; margin-right: 3px; margin-left: 2px; border: 5px solid #212d22; border-radius: 100px }
  108.  
  109. .mainimg {position: absolute; width: 900px; height: 450px; border: px solid; border-color: #abe8b0; top: -120.5px; left: 245; background: url(https://i.imgur.com/dGjNJZl.png
  110. ); background-size: 100%; z-index:99;border-radius:0px; box-shadow: 1px 2px 2px #; transition: 0.5s; filter:drop-shadow(0px 0px 0px #);}
  111.  
  112.  
  113. .mainbox:hover .mainimg{position: absolute; width: 900px; height: 450px; border: px solid; border-color: #abe8b0; top: -120.5px; left: 245; background: url(https://i.imgur.com/tsUWrlF.png
  114. ); background-size: 100%; z-index:99;border-radius:2px; box-shadow: 1px 2px 2px #; transition: 1.0s; filter:drop-shadow(0px 0px 10px #ff5ed0); }
  115.  
  116.  
  117. .titler { letter-spacing:0; z-index: 4; position: fixed; left: 18px; bottom:325px; font-family: 'Nova Square', cursive; font-size: 75px; color: #433c4d; -webkit-text-fill-color: transparent; background: -webkit-linear-gradient(transparent, transparent), url('') repeat; background: -o-linear-gradient(transparent, transparent); -webkit-background-clip: text; background-position: left; background-size: cover; position: absolute; width: 500px; /* Safari */ text-shadow: 0px 0px 1px #509b56; transition: 0.5s;
  118. }
  119.  
  120.  
  121. .mainbox:hover .titler { letter-spacing:0; z-index: 4; position: fixed; left: 18px; bottom:325px; font-family: 'Nova Square', cursive; font-size: 75px; color: #433c4d; -webkit-text-fill-color: transparent; background: -webkit-linear-gradient(transparent, transparent), url('https://i.gifer.com/B63Q.gif') repeat; background: -o-linear-gradient(transparent, transparent); -webkit-background-clip: text; background-position: left; background-size: cover; position: absolute; width: 500px; /* Safari */ text-shadow: 0px 0px 9px #509b56; transition: 0.5s; }
  122.  
  123.  
  124. .titler2 { letter-spacing:0; z-index: 4; position: fixed; left: -30px; bottom:-80px; font-family: 'Nova Square', cursive; font-size: 75px; color: #433c4d; -webkit-text-fill-color: transparent; background: -webkit-linear-gradient(transparent, transparent), url('') repeat; background: -o-linear-gradient(transparent, transparent); -webkit-background-clip: text; background-position: left; background-size: cover; position: absolute; width: 800px; /* Safari */ text-shadow: 0px 0px 1px #509b56; -webkit-transform: rotate(90deg);
  125. -moz-transform: rotate(180deg);
  126. -o-transform: rotate(180deg);
  127. -ms-transform: rotate(180deg);
  128. transform: rotate(180deg);
  129. transition: 0.5s;
  130. }
  131.  
  132.  
  133.  
  134. .mainbox:hover .titler2 { letter-spacing:0; z-index: 4; position: fixed; left: -30px; bottom:-80px; font-family: 'Nova Square', cursive; font-size: 75px; color: #433c4d; -webkit-text-fill-color: transparent; background: -webkit-linear-gradient(transparent, transparent), url('https://i.gifer.com/B63Q.gif') repeat; background: -o-linear-gradient(transparent, transparent); -webkit-background-clip: text; background-position: left; background-size: cover; position: absolute; width: 800px; /* Safari */ text-shadow: 0px 0px 9px #509b56; -webkit-transform: rotate(90deg);
  135. -moz-transform: rotate(180deg);
  136. -o-transform: rotate(180deg);
  137. -ms-transform: rotate(180deg);
  138. transform: rotate(180deg);
  139. transition: 0.5s;
  140. }
  141.  
  142.  
  143. .x1{position: absolute; width: 50px; height: 50px; border: px solid; border-color: #abe8b0; top: 270px; left: 290; background: url(https://i.imgur.com/hM2X7eY.png
  144. ); background-size: 100%; z-index:99;border-radius:0px; box-shadow: 1px 2px 2px #; transition: 0.5s; }
  145.  
  146. .x1:hover {filter:drop-shadow(0px 0px 3px #ff5ed0); transition:0.5s;}
  147. .x2:hover {filter:drop-shadow(0px 0px 3px #ff5ed0); transition:0.5s;}
  148. .x3:hover {filter:drop-shadow(0px 0px 3px #ff5ed0); transition:0.5s;}
  149. .x4:hover {filter:drop-shadow(0px 0px 3px #ff5ed0); transition:0.5s;}
  150.  
  151. .x2{position: absolute; width: 50px; height: 50px; border: px solid; border-color: #abe8b0; top: 270px; left: 350; background: url(https://i.imgur.com/hM2X7eY.png
  152. ); background-size: 100%; z-index:99;border-radius:0px; box-shadow: 1px 2px 2px #; transition: 0.5s; filter:drop-shadow(0px 0px 0px #);}
  153.  
  154. .x3{position: absolute; width: 50px; height: 50px; border: px solid; border-color: #abe8b0; top: 270px; left: 410; background: url(https://i.imgur.com/hM2X7eY.png
  155. ); background-size: 100%; z-index:99;border-radius:0px; box-shadow: 1px 2px 2px #; transition: 0.5s; filter:drop-shadow(0px 0px 0px #);}
  156.  
  157. .x4{position: absolute; width: 50px; height: 50px; border: px solid; border-color: #abe8b0; top: 270px; left: 470; background: url(https://i.imgur.com/hM2X7eY.png
  158. ); background-size: 100%; z-index:99;border-radius:0px; box-shadow: 1px 2px 2px #; transition: 0.5s; filter:drop-shadow(0px 0px 0px #);}
  159.  
  160. .cutbox1{position: fixed; background-color: #121913; width: 250px; height: 30px; border: px solid; border-color: #000; margin: auto; left:-530px; right: 0px; top: 0px; bottom: 190px; background-size: 100%; z-index:1; border-radius:0px; box-shadow: 1px 2px 2px #; }
  161.  
  162.  
  163. .cutbox2{position: fixed; background-color: #121913; width: 250px; height: 30px; border: px solid; border-color: #000; margin: auto; left:-5px; right: 0px; top: 0px; bottom: 190px; background-size: 100%; z-index:1; border-radius:0px; box-shadow: 1px 2px 2px #; }
  164.  
  165.  
  166. .ooc { letter-spacing: 0; z-index: 5; position: fixed; left: 317px; bottom: 272px; font-family: 'Nova Square', cursive; font-size: 22px; color: #509b56; position: absolute; width: 800px; }
  167.  
  168. .stat{ letter-spacing: 0; z-index: 5; position: fixed; left: 78px; bottom: 272px; font-family: 'Nova Square', cursive; font-size: 22px; color: #509b56; position: absolute; width: 800px; }
  169.  
  170. .inbox1{position: fixed; background-color: #121913; width: 250px; height: 220px; border: 0px solid; border-color: #; margin: auto; left: -530px; right: 0px; top: 95px; bottom: 0px; background-size: 100%; z-index:3; border-radius:0px; box-shadow: 1px 2px 2px #; }
  171.  
  172.  
  173. .inbox2{position: fixed; background-color: #121913; width: 250px; height: 170px; border: 0px solid; border-color: #; margin: auto; left: -5px; right: 0px; top: 45px; bottom: 0px; background-size: 100%; z-index:3; border-radius:0px; box-shadow: 1px 2px 2px #; }
  174.  
  175. .words {position: absolute; bottom: 87px; left: 295px; margin: auto; letter-spacing:1;
  176. opacity:1;
  177. height: 165px;
  178. width: 220px;
  179. padding: 0px;
  180. text-align: justify;
  181. font-size: 10px;
  182. overflow: auto;
  183. text-indent: 0px;
  184. color: #509b56;
  185. font-family: Quicksand;
  186. z-index: 99;
  187. }
  188.  
  189. b {
  190. font-family: Nova Square;
  191. color: #ff5ed0;
  192. font-weight: bold;
  193. font-size: 12px;
  194. text-transform: uppercase;
  195. font-weight: 100;
  196. }
  197.  
  198. .put{position: absolute; bottom: 40px; left: 20px; margin: auto;
  199. opacity:0;
  200. height: 210px;
  201. width: 245px;
  202. padding: 0px;
  203. text-align: center;
  204. font-size: 1px;
  205. overflow: auto;
  206. text-indent: 0px;
  207. color: #e7e7e7;
  208. font-family: Barlow Condensed;
  209.  
  210. z-index:0;overflow:auto transition: all 0.9s ease-in-out;
  211. -webkit-transition: all 0.4s ease-in-out;
  212. -moz-transition: all 0.4s ease-in-out;
  213. -o-transition: all 0.4s ease-in-out;
  214. -ms-transition: all 0.4s ease-in-out;}
  215.  
  216.  
  217.  
  218.  
  219. .put:target{ opacity:1;
  220. z-index:11;transition: all 0.4s ease-in-out;
  221. -webkit-transition: all 0.4s ease-in-out;
  222. -moz-transition: all 0.4s ease-in-out;z
  223. -o-transition: all 0.4s ease-in-out;
  224. -ms-transition: all 0.4s ease-in-out;overflow:auto;}
  225.  
  226. p.td {
  227. text-align: right;
  228. font-family: Quicksand;
  229. margin-left: 35px;
  230. font-size: 10px;
  231. line-height: 1px;
  232. color: #509b56; }
  233.  
  234. td {
  235. text-align: left;
  236. line-height: 30px; }
  237.  
  238.  
  239.  
  240. .new{position: absolute; bottom: 40px; left: 15px; margin: auto;
  241. opacity:0;
  242. height: 190px;
  243. width: 240px;
  244. padding:10px;
  245. text-align: center;
  246. font-size: 13px;
  247. overflow: auto;
  248. text-ident: 10px;
  249.  
  250.  
  251. z-index:0;overflow:auto transition: all 0.9s ease-in-out;
  252. -webkit-transition: all 0.4s ease-in-out;
  253. -moz-transition: all 0.4s ease-in-out;
  254. -o-transition: all 0.4s ease-in-out;
  255. -ms-transition: all 0.4s ease-in-out;}
  256.  
  257. p{
  258. font-family: 'Quicksand';
  259. font-size: 10px;
  260. letter-spacing: 0px;
  261. word-spacing: 0px;
  262. color: #509b56;
  263. text-align: justify;
  264.  
  265. line-height: 20px;
  266. margin: 0px 0px 0px 1px;}
  267.  
  268.  
  269.  
  270.  
  271. strong {
  272. font-family: Nova Square;
  273. color: #ff5ed0;
  274. font-weight: bold;
  275. font-size: 13px;
  276. text-transform: uppercase;
  277. font-weight: 100; }
  278.  
  279.  
  280. .new:target{ opacity:1;
  281. z-index:11;transition: all 0.4s ease-in-out;
  282. -webkit-transition: all 0.4s ease-in-out;
  283. -moz-transition: all 0.4s ease-in-out;
  284. -o-transition: all 0.4s ease-in-out;
  285. -ms-transition: all 0.2s ease-in-out;overflow:auto;}
  286.  
  287.  
  288. </style>
  289. </head>
  290. <body>
  291.  
  292.  
  293.  
  294. <div class="mainbox">
  295.  
  296. <a target="_blank" href="https://roleplay.chat/profile.php?user=Kal" ><img src="https://i.imgur.com/Msn91L7.png" class="KAL"/></a>
  297.  
  298.  
  299. <div class="titler">JEAN GREY</div>
  300. <div class="mainimg"></div>
  301. <div class="titler2">MARVEL GIRL</div>
  302.  
  303. <a href="#01"><div class="x1"></div></a>
  304. <a href="#02"><div class="x2"></div></a>
  305. <a href="#03"><div class="x3"></div></a>
  306. <a href="#04"><div class="x4"></div></a>
  307.  
  308. <div class="cutbox2"></div>
  309. <div class="cutbox1"></div>
  310.  
  311. <div class="inbox1"></div>
  312. <div class="inbox2"></div>
  313.  
  314. <div class="ooc">Out of Character</div>
  315.  
  316. <div class="stat">The Redhead</div>
  317.  
  318. <div class="words">
  319.  
  320. <br><b>⇀</b> Code made by <a target="_blank" href="https://4.roleplay.chat/profile.php?user=Kal">Kal</a> for the sole use of Star. Please do not steal or alter the code. Just shoot him a DM or inbox message. <br><br>
  321.  
  322. <b>⇀</b> I'm a legend in my spare time. Just a smol raptor wearing a panda suit. Please give me all the cookies! I flirt a lot, knee jerk reaction, swear. <a target="_blank" href="https://www.youtube.com/watch?v=P_SlAzsXa7E">#loyaltothecause</a> though! <br><br>
  323.  
  324. <b>⇀</b> Do us all a favor, and don't put forth the effort to actually upset me. I have the right to refuse interaction IC and OOC. Discord and gaming info available for friends!<br><br>
  325.  
  326. <b>⇀</b> Mildly canon divergent, finding my own voice and just wanting to have some fun. I am big on story and character development, no issue with crossovers or doubles. Just let's find our own unique tunes, okay?<br><br>
  327.  
  328. <b>⇀</b> Shit-poster extraordinaire, often snowballing into para when muse is aroused from it's slumber. Up for most scenes, even those that may be dark/violent. Smut reserved for writing partner. <br><br>
  329.  
  330. </div>
  331.  
  332.  
  333. <div id="01" class="put">
  334.  
  335. <table border="0" cellspacing="-10">
  336.  
  337. <tr>
  338. <td><b>Name</b></td>
  339. <td>
  340. <p class="td">Jean Elaine Grey</p>
  341. </td>
  342. </tr><br>
  343.  
  344. <tr>
  345. <td><b>Codename</b></td>
  346. <td>
  347. <p class="td">Marvel Girl, Phoenix</p>
  348. </td>
  349. </tr><br>
  350.  
  351. <tr>
  352. <td><b>Age</b></td>
  353. <td>
  354. <p class="td">Eighteen</p>
  355. </td>
  356. </tr>
  357. <tr>
  358. <td><b>D.O.B.</b></td>
  359. <td>
  360. <p class="td">October 27, 1984</p>
  361. </td>
  362. </tr>
  363. <tr>
  364. <td><b>Ethnicity</b></td>
  365. <td>
  366. <p class="td">American</p>
  367. </td>
  368. </tr>
  369. <tr>
  370. <td><b>Gender</b></td>
  371. <td>
  372. <p class="td">Female</p>
  373. </td>
  374. </tr>
  375. <tr>
  376. <td><b>Build</b></td>
  377. <td>
  378. <p class="td">Athletic</p>
  379. </td>
  380. </tr>
  381. <tr>
  382. <td><b>Species</b></td>
  383. <td>
  384. <p class="td">Mutant</p>
  385. </td>
  386. </tr>
  387.  
  388. <tr>
  389. <td><b>Abilities</b></td>
  390. <td>
  391. <p class="td">Telekinesis, Telepathy, etc</p>
  392. </td>
  393. </tr>
  394. <tr>
  395. <td><b>Height</b></td>
  396. <td>
  397. <p class="td">5'6''</p>
  398. </td>
  399. </tr>
  400.  
  401. <tr>
  402. <td><b>Orientation</b></td>
  403. <td>
  404. <p class="td">Heterosexual</p>
  405. </td>
  406. </tr>
  407.  
  408. <tr>
  409. <td><b>Paramour</b></td>
  410. <td>
  411. <p class="td">Scott Summers</p>
  412. </td>
  413. </tr>
  414.  
  415.  
  416. </table>
  417. </div>
  418.  
  419.  
  420. <div id="02" class="new"> <strong>History</strong><br><br><p> </p>
  421. </span>
  422. <p>
  423. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  424.  
  425.  
  426.  
  427.  
  428.  
  429. </div>
  430.  
  431.  
  432.  
  433. <div id="03" class="new"><strong>Friends and Connections</strong><br><br>
  434.  
  435. <a target="_blank" href="https://roleplay.chat/profile.php?user=Scott"><img src="https://i.imgur.com/6MhTcyN.png" class="fr1" title="Scott Summers, Cyclops - My soulmate."></a>
  436.  
  437. <a target="_blank" href="https://roleplay.chat/profile.php?user=Kitty+Pryde"><img src="https://i.imgur.com/ggLkSI1.png" class="fr1" title="Kitty Pryde, Shadowcat - My best friend."></a>
  438.  
  439. <a target="_blank" href="https://4.roleplay.chat/profile.php?user=Piotr%20Rasputin"><img src="https://i.imgur.com/ta2j5AF.jpg?1" class="fr1" title="Piotr Rasputin, Colossus - My loyal comrade."></a>
  440.  
  441. <a target="_blank" href="https://roleplay.chat/profile.php?user=USERHERE"><img src="https://i.imgur.com/hM2X7eY.png" class="fr1" title="Something about them."></a><br><br>
  442.  
  443. <a target="_blank" href="https://roleplay.chat/profile.php?user=USERHERE"><img src="https://i.imgur.com/hM2X7eY.png" class="fr1" title="Something about them."></a>
  444.  
  445. <a target="_blank" href="https://roleplay.chat/profile.php?user=USERHERE"><img src="https://i.imgur.com/hM2X7eY.png" class="fr1" title="Something about them."></a>
  446.  
  447. <a target="_blank" href="https://roleplay.chat/profile.php?user=USERHERE"><img src="https://i.imgur.com/hM2X7eY.png" class="fr1" title="Something about them."></a>
  448.  
  449. <a target="_blank" href="https://roleplay.chat/profile.php?user=USERHERE"><img src="https://i.imgur.com/hM2X7eY.png" class="fr1" title="Something about them."></a>
  450.  
  451.  
  452. </span></a>
  453.  
  454.  
  455.  
  456.  
  457.  
  458.  
  459. </div>
  460.  
  461.  
  462.  
  463. <div class="box1">
  464.  
  465.  
  466.  
  467.  
  468. </div>
  469.  
  470.  
  471.  
  472. <div class="box2">
  473.  
  474.  
  475.  
  476. </div>
  477. </div>
  478.  
  479.  
  480. </body>
  481. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!