API tools faq
paste
kay_kodes

jess code help

kay_kodes
Jul 8th, 2022 (edited)
25
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.79 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <center>
  3. <link href="https://fonts.googleapis.com/css2?family=PT+Serif&display=swap" rel="stylesheet">
  4.  
  5. <link href="https://fonts.cdnfonts.com/css/the-hustle" rel="stylesheet">
  6.  
  7. <meta name="viewport" content="width=device-width, initial-scale=1">
  8. <style>
  9. /*Scrollbar*/
  10. ::-webkit-scrollbar {width: 0px;}
  11. ::-webkit-scrollbar-thumb {background: #eee;}
  12. ::-webkit-scrollbar-thumb:hover {background: #fff;}
  13.  
  14. @font-face {
  15. font-family: 'The Hustle', sans-serif;
  16. src: url('https://fonts.cdnfonts.com/css/the-hustle')
  17.  
  18. }
  19. h1{
  20. font-family: 'The Hustle', sans-serif;
  21. font-size:40px;
  22. text-shadow: 0 0 40px #fff, 0 0 50px #bbb, 0 0 60px #fff, 0 0 70px #bbb, 0 0 80px #fff, 0 0 90px #bbb, 0 0 100px #fff;
  23.  
  24. }
  25. h2{
  26. font-family: 'The Hustle', sans-serif;
  27. font-size:20px;
  28. margin-left:10px;
  29. margin-right:10px;
  30. text-shadow: 0 0 40px #fff, 0 0 50px #bbb, 0 0 60px #fff, 0 0 70px #bbb, 0 0 80px #fff, 0 0 90px #bbb, 0 0 100px #fff;
  31.  
  32. }
  33.  
  34. .box{
  35. position: relative;
  36. text-align: center;
  37.  
  38. }
  39. .page{
  40. text-decoration: none;
  41. color:black;
  42. padding: 10px
  43.  
  44. }
  45.  
  46. .columnone{
  47. float: center;
  48. width:530px;
  49. height:640px; background:url(https://i.pinimg.com/236x/7d/b5/21/7db5212cfe38e80d8ffca7e5a13cf1f6.jpg);
  50. border: 2px #000 ;
  51. margin-left:10px;
  52. margin-right: 10px;
  53. margin-top:0px;
  54. margin-bottom: 0px;
  55. overflow:hidden;
  56. color:#000;
  57. font-size:12px;
  58. background-size:cover;
  59. }
  60.  
  61. .columntwo{
  62. float:left;
  63. width:400px;
  64. height:510px;
  65. margin-right:10px;
  66. margin-bottom: 2px;
  67. overflow: auto;
  68. background-color: #eee;
  69. margin-top:20px;
  70. box-shadow: -4px -2px 16px 0px #fff, 4px 2px 16px 0px #fff;
  71. color: #000;
  72. font-size: 12px
  73.  
  74. }
  75.  
  76. button {
  77. width:150px;
  78. height:90px;
  79. margin-top:0px;
  80. overflow: hidden;
  81. border: 0px solid #fff;
  82. color: #fff;
  83. font-weight: bold;
  84. font-size: 15px;
  85. text-shadow: 0 0 40px #fff, 0 0 50px #bbb, 0 0 60px #fff, 0 0 70px #bbb, 0 0 80px #fff, 0 0 90px #bbb, 0 0 100px #fff;
  86.  
  87. </style>
  88.  
  89. <div class="columnone">
  90. <div id="one" class="tabcontent">
  91. <div style="text-align:justify;width:500px;height:615px;overflow:hidden;margin-top:10px;background-color: rgba(255, 255, 255, 0.3);margin-bottom:10px;border:#fff 1px solid">
  92. <!--FULL NAME HERE-->
  93. <center>
  94. <h1>Aurora Mitchell</h1>
  95. <img src="https://i.pinimg.com/474x/00/3f/53/003f532eda76f34f6c779bc670ad5d3f.jpg" style="width:150px;height:150px;border: 2px solid #fff;margin-right:10px;margin-bottom:5px;margin-top:0px;box-shadow: 1px 1px 6px 2px #fff;margin-left:10px;border-radius:100%;object-fit:cover">
  96.  
  97. <h2>"There's always a place for psychos like me."</h2>
  98.  
  99. </center>
  100.  
  101. <div style="text-align:center;margin-left:10px;font-size:12px;margin-right:10px;margin-top:30px">
  102. <b style="font-size:20px">OOC INFO</b>
  103. <p><b>Name - Jess
  104. <br> Timezone - EST
  105. <br> Contact Method - Ask for Discord!
  106. </b>
  107.  
  108.  
  109. <!--BUTTONS-->
  110. <div class="button">
  111. <button class="tablinks" onclick="openCity(event, 'one')" id="defaultOpen"style="margin-top:40px;margin-left:5px;width:40px;height:40px;background: url(https://cdn-icons-png.flaticon.com/512/25/25694.png)center;background-size:cover;"></button>
  112.  
  113. <button class="tablinks" onclick="openCity(event, 'two')" id="defaultOpen"style="margin-top:10px;margin-left:5px;width:70px;height:37px;background: url(https://cdn.discordapp.com/attachments/871345898469355533/993831761823932476/person-icon-in-flat-style-man-symbol-vector-21095933-removebg-preview.png)center;background-size:cover"></button>
  114.  
  115. <button class="tablinks" onclick="openCity(event, 'three')" id="defaultOpen"style="margin-top:10px;margin-left:0px;width:60px;height:40px;background: url(https://cdn.discordapp.com/attachments/871345898469355533/993863644658028604/flat-group-of-people-icon-symbol-background-vector-11573571-removebg-preview.png)center;background-size:cover"></button>
  116.  
  117. <button class="tablinks" onclick="openCity(event, 'four')" id="defaultOpen"style="margin-top:10px;margin-left:10px;width:60px;height:45px;background: url(https://cdn.discordapp.com/attachments/871345898469355533/993863645140353074/imgbin-photography-photographer-computer-icons-photography-free-icon-camera-logo-X9zc9Ac2qLP8FQHyCCDSp4bN0-removebg-preview.png)center;background-size:cover"></button>
  118.  
  119. <p><p><center style="margin-top:80px"><a href="https://kkodes.wixsite.com/dreamer" style="color:#000;font-size:10px"><b><u>kay kodes</u></b></a></center>
  120. </div></div></div></div>
  121.  
  122. <!----------------->
  123.  
  124. <!--BASIC, ABOUT, FIRST IMPRESSIONS, PERSONALITY-->
  125. <div id="two" class="tabcontent">
  126. <div style="margin-top:0px;overflow:hidden;background:#919e96;height:650px;background-size:cover">
  127. <div style="text-align:justify;width:500px;height:615px;overflow:auto;margin-top:10px;background-color: rgba(255, 255, 255, 0.6);margin-bottom:10px;border:#fff 1px solid">
  128. <center><h1 style="margin-left:10px;margin-right:10px">Brief Facts</h1></center>
  129.  
  130. <div style="margin-left:10px;margin-right:10px">
  131. <p>
  132. <b style="font-size:20px"><u>BASICS</u></b>
  133.  
  134. <p><b>name.</b> Aurora Mitchell<br>
  135. <b>age.</b>see profile<br>
  136. <b>orientation.</b>bisexual<br>
  137. <b>birthday.</b> October 30th<br>
  138. <b>birthplace.</b> Strasbourg, France<br>
  139. <b>current residence.</b> The hub<br><br>
  140.  
  141. <i>DON'T BE FOOLED, THIS GIRL IS SOMETHING. FEAR HER, BECAUSE SHE WILL ONLY END THE WORLD IF SHE WANTED TO.
  142. </i>
  143.  
  144. <p><b>origin cluster.</b> Physica<br>
  145. <b>origin.</b> Assassin Training<br>
  146. <b>status.</b> Expert assassin<br>
  147.  
  148. <b>occupation.</b> Lead Editor of the Hub Chronicles
  149.  
  150. <div style=" border-left: 2px solid #fff; padding-left: 10px">
  151. <p><b>mother.</b> ANASTASIA MITCHELL<br>
  152. <b>father.</b> THOMAS MITCHELL
  153.  
  154. <div style=" border-left: 2px solid #fff; padding-left: 10px;margin-left:10px">
  155. </div>
  156. </div>
  157. <br>
  158. <b>significant other.</b> nothing serious
  159. <p style="margin-top:25px">
  160.  
  161. <!--ABOUT-->
  162. <b style="font-size:20px"><u>ABOUT</u></b>
  163. <p>
  164. <img src="https://preview.redd.it/axdc92gz6q191.jpg?width=640&crop=smart&auto=webp&s=a9694be68486ecd8872b3ff05454b57783faf7c8" style="width:150px;height:150px;border-radius:100%;border: 2px solid #fff;float:right;margin-right:8px;margin-bottom:5px;margin-left:10px;box-shadow: 1px 1px 6px 2px #fff;object-fit:cover">
  165.  
  166. <p>Aurora is a mystical and romantic name that means "dawn" in Latin. An aurora also refers to a natural light display in the Earth's sky called the aurora polaris, or polar lights, visible only in high-latitude regions like the North and South Poles.<P>
  167.  
  168. Aurora is beautiful, and everyone knows it. Standing tall with a slight tan, she has dark wavy hair and a few freckles. She has an athletic build, and a strong stamina.<p>
  169. <p>
  170.  
  171. <!--FIRST IMPRESSIONS-->
  172. <b style="font-size:20px"><u>FIRST IMPRESSIONS</u></b>
  173. Aurora Mitchell is a french woman with a taste for murder. Born into an assassin family, she was trained into a murderer from a young age. So upon first meeting, your eyes land on an intimidating woman. If her looks could kill, they would.
  174. Aurora is self-centered, careless, and stubborn. She's everything people fear to be. She knows what she ants, and isn't afraid to fight for it. She can be hard to getalong with, but that is only because of the face she puts on for the world.
  175.  
  176. <p>
  177. <img src="https://i.pinimg.com/736x/1a/e5/49/1ae54930977144d159113101e4ef556a.jpg" style="width:150px;height:150px;border-radius:100%;border: 2px solid #fff;float:left;margin-right:10px;margin-bottom:5px;margin-top:3px;box-shadow: 1px 1px 6px 2px #fff;margin-left:10px;object-fit:cover">
  178. </p>
  179.  
  180. <!--PERSONALITY-->
  181. <b style="font-size:20px"><u>PERSONALITY</u></b>
  182. <p>
  183. <img src="https://i.pinimg.com/736x/18/69/be/1869be5bd7f6d056db2c14533f6b2fad.jpg" style="width:150px;height:150px;border-radius:100%;border: 2px solid #fff;float:right;margin-right:8px;margin-bottom:5px;margin-left:10px;box-shadow: 1px 1px 6px 2px #fff;object-fit:cover">
  184.  
  185. <p>Don't decieve her looks. Aurora is a cold woman with a careless attitude. She is sarcastic and likes to play with her words. Befriending her is rather hard, as she doesn't seem to let you gain the perfect opinion on her. Aurora is a psycho. Murder is what eases her, as it has become a habit due to the rough past she grew up with. Everyone fears or hates her. Unless she reveals a small patch of sympathy, you're better off on her bad side.
  186.  
  187.  
  188. </p>
  189. <center><button class="tablinks" onclick="openCity(event, 'one')" id="defaultOpen"style="margin-top:10px;margin-left:5px;width:40px;height:40px;background: url(https://cdn-icons-png.flaticon.com/512/25/25694.png)center;background-size:cover;margin-right:10px"></button>
  190.  
  191. <button class="tablinks" onclick="openCity(event, 'three')" id="defaultOpen"style="margin-top:10px;margin-left:0px;width:60px;height:40px;background: url(https://cdn.discordapp.com/attachments/871345898469355533/993863644658028604/flat-group-of-people-icon-symbol-background-vector-11573571-removebg-preview.png)center;background-size:cover"></button>
  192. </center>
  193. <div>
  194. </div></div>
  195. <br></div></div></div>
  196.  
  197. <!----------------->
  198.  
  199. <!--RELATIONS-->
  200. <div id="three" class="tabcontent">
  201.  
  202. <div style="margin-top:0px;overflow:hidden;background:#919e96;height:650px;background-size:cover">
  203.  
  204. <div style="text-align:justify;width:500px;height:615px;overflow:auto;margin-top:10px;background-color: rgba(255, 255, 255, 0.6);margin-bottom:10px;border:1px #fff solid">
  205.  
  206.  
  207. <div style="margin-left:10px; margin-right:10px">
  208. <center><h1 style="margin-left:10px;margin-right:10px">Relations</h1></center>
  209.  
  210. <!--each relation-->
  211. <div style="padding:5%;border:#000 0px solid;width:390px;height:120px;margin-right:10px;float:left;overflow:auto">
  212. <img src="https://worldofmarvel.eu/user/profile/Acacia-ciervo/profile-picture" style="width:120px;height:120px;border:solid #fff;border-radius:100%;float:left;margin-left:-10px;margin-bottom:10px;margin-right:10px;box-shadow: 1px 1px 6px 2px #fff;object-fit:cover">
  213. <p><b>Acacia Ciervo | It was easy to love without loving...</b></p>
  214. <p>Nothing serious, the first agreement. A flirting after another sparked a relationship that was inclusive. They don't love, they date without dating. Its the relationship filled with flirting and hookups... The only way for the two psychos to break lose from the world
  215. </div><br>
  216.  
  217. <!--each relation-->
  218. <div style="padding:5%;border:#000 0px solid;width:390px;height:120px;margin-right:10px;float:left;overflow:auto">
  219. <img src="https://worldofmarvel.eu/user/profile/veda-alderidge/profile-picture" style="width:120px;height:120px;border:solid #fff;border-radius:100%;float:left;margin-left:-10px;margin-bottom:10px;margin-right:10px;box-shadow: 1px 1px 6px 2px #fff;object-fit:cover">
  220. <p><b>Veda Alderidge | Best friend, the flirt, a sister that was never blood...</b></p>
  221. <p>With similar backgrounds, Aurora found it easy to befriend Veda - a fellow assassin in her life. They couldn't help but having a spark in the past, a flirting that was often playful even now. Aurora sees Veda as the sister she never had.
  222. </div><br>
  223.  
  224. <!--each relation-->
  225. <div style="padding:5%;border:#000 0px solid;width:390px;height:120px;margin-right:10px;float:left;overflow:auto">
  226. <img src="https://worldofmarvel.eu/user/profile/Patricio-Ariztegui/profile-picture" style="width:120px;height:120px;border:solid #fff;border-radius:100%;float:left;margin-left:-10px;margin-bottom:10px;margin-right:10px;box-shadow: 1px 1px 6px 2px #fff;object-fit:cover">
  227. <p><b>Patricio Ariztegui | You're the poison that boils my blood...</b></p>
  228. <p>Everything about Patricio just nauseates Aurora, including his prescense. She often compared him to a dog, an annoying one. She can't stand his humor, and she certainly would never get along with him.
  229. </div><br>
  230.  
  231. <!--each relation-->
  232. <div style="padding:5%;border:#000 0px solid;width:390px;height:120px;margin-right:10px;float:left;overflow:auto">
  233. <img src="https://worldofmarvel.eu/user/profile/Aldric-Mikhailov/profile-picture" style="width:120px;height:120px;border:solid #fff;border-radius:100%;float:left;margin-left:-10px;margin-bottom:10px;margin-right:10px;box-shadow: 1px 1px 6px 2px #fff;object-fit:cover">
  234. <p><b>Aldric Mikhailov | If only I were able to truly hate you...</b></p>
  235. <p>From first meetings, Aldric was never someone Aurora took to kindly. However, considering he was the man for Veda, Aurora kept her murderous dreams to herself for the sake of her friend. She considers him a frenemy, a friend for Veda and an enemy for her liking.
  236. </div><br>
  237.  
  238. <!--each relation-->
  239. <div style="padding:5%;border:#000 0px solid;width:390px;height:120px;margin-right:10px;float:left;overflow:auto">
  240. <img src="https://worldofmarvel.eu/user/profile/brooke-ainsworth/profile-picture" style="width:120px;height:120px;border:solid #fff;border-radius:100%;float:left;margin-left:-10px;margin-bottom:10px;margin-right:10px;box-shadow: 1px 1px 6px 2px #fff;object-fit:cover">
  241. <p><b>Brooke Ainsworth | You were young, but different than the rest...</b></p>
  242. <p>When meeting the young girl, Aurora instinctively had a soft spot for her. She couldn't explain why, but everything about her told Aurora to befriend her. And so she did, and despite their ages they manage to get along particularly well.
  243. </div><br><p>
  244. more relations - view on profile)
  245. </p>
  246. <center>
  247. <button class="tablinks" onclick="openCity(event, 'two')" id="defaultOpen"style="margin-top:10px;margin-left:5px;width:70px;height:37px;background: url(https://cdn.discordapp.com/attachments/871345898469355533/993831761823932476/person-icon-in-flat-style-man-symbol-vector-21095933-removebg-preview.png)center;background-size:cover"></button>
  248.  
  249. <button class="tablinks" onclick="openCity(event, 'one')" id="defaultOpen"style="margin-top:10px;margin-left:5px;width:40px;height:40px;background: url(https://cdn-icons-png.flaticon.com/512/25/25694.png)center;background-size:cover"></button>
  250.  
  251. <button class="tablinks" onclick="openCity(event, 'four')" id="defaultOpen"style="margin-top:10px;margin-left:10px;width:60px;height:45px;background: url(https://cdn.discordapp.com/attachments/871345898469355533/993863645140353074/imgbin-photography-photographer-computer-icons-photography-free-icon-camera-logo-X9zc9Ac2qLP8FQHyCCDSp4bN0-removebg-preview.png)center;background-size:cover"></button>
  252. </center>
  253. <div>
  254. </div>
  255. <br></div></div></div></div>
  256.  
  257.  
  258. <!----------------->
  259.  
  260. <!--AESTHETICS AND VISUALS-->
  261. <div id="four" class="tabcontent">
  262.  
  263. <div style="margin-top:0px;overflow:hidden;background:#919e96;height:650px;background-size:cover">
  264.  
  265. <div style="text-align:justify;width:500px;height:615px;overflow:auto;margin-top:10px;background-color: rgba(255, 255, 255, 0.6);margin-bottom:10px;border:1px solid #fff">
  266.  
  267.  
  268. <center><h1 style="margin-left:10px;margin-right:10px">Aesthetics</h1>
  269.  
  270. <!--each aesthetic-->
  271. <img src="https://i.pinimg.com/236x/7d/b5/21/7db5212cfe38e80d8ffca7e5a13cf1f6.jpg" style="width:200px;height:200px;margin-left:2px;margin-right:0px;margin-top:10px;margin-bottom: 2px;border: #fff 2px solid;box-shadow: 2px 2px 7px 3px #fff;object-fit:cover;border-radius:100%">
  272.  
  273. <!--each aesthetic-->
  274. <img src="https://64.media.tumblr.com/c139155a75262c361dd81b4b7abb652c/84629d68a4406a7e-2f/s1280x1920/082777c76129f3ebd816d52fbe7ba7ff9ef2b059.jpg" style="width:200px;height:200px;margin-left:20px;margin-right:px;margin-top:10px;margin-bottom: 2px;border: #fff 2px solid;box-shadow: 2px 2px 7px 3px #fff;object-fit:cover;border-radius:100%">
  275.  
  276. <br>
  277.  
  278. <!--each aesthetic-->
  279. <img src="https://64.media.tumblr.com/58d1182e92aed33d997f9b16205f213b/7a6de16b6fa74a8b-6b/s540x810/ebdb9b7b0a8420800bb5b06812c753ec4918cf30.jpg" style="width:200px;height:200px;margin-left:2px;margin-right:px;margin-top:10px;margin-bottom: 2px;border: #fff 2px solid;box-shadow: 2px 2px 7px 3px #fff;border-radius:100%">
  280.  
  281. <!--each aesthetic-->
  282. <img src="https://64.media.tumblr.com/80bdcf12a2f96ccc299cbd93df5e843e/d655471c6e839e08-19/s540x810/a613888309c7f9e788905926d4d7d740b940bacf.jpg" style="width:200px;height:200px;margin-left:20px;margin-right:px;margin-top:10px;margin-bottom: 2px;border: #fff 2px solid;box-shadow: 2px 2px 7px 3px #fff;object-fit:cover;border-radius:100%">
  283.  
  284. <br>
  285.  
  286. <!--each aesthetic-->
  287. <img src="https://i.pinimg.com/474x/3f/88/78/3f88789845a3dfc42e4b0724d2e71502.jpg" style="width:200px;height:200px;margin-left:2px;margin-right:px;margin-top:10px;margin-bottom: 2px;border: #fff 2px solid;box-shadow: 2px 2px 7px 3px #fff;object-fit:cover;border-radius:100%">
  288.  
  289. <!--each aesthetic-->
  290. <img src="https://64.media.tumblr.com/ba5fc2be678f2bf8381c269f83cc7b26/4a84c45ab280d29c-48/s540x810/e29b3ac11b28f29258306d7d781e91ffcd65b4c5.jpg" style="width:200px;height:200px;margin-left:20px;margin-right:px;margin-top:10px;margin-bottom: 2px;border: #fff 2px solid;box-shadow: 2px 2px 7px 3px #fff;object-fit:cover;border-radius:100%">
  291.  
  292. </center>
  293. <center>
  294. <button class="tablinks" onclick="openCity(event, 'three')" id="defaultOpen"style="margin-top:15px;margin-left:0px;width:60px;height:40px;background: url(https://cdn.discordapp.com/attachments/871345898469355533/993863644658028604/flat-group-of-people-icon-symbol-background-vector-11573571-removebg-preview.png)center;background-size:cover"></button>
  295.  
  296. <button class="tablinks" onclick="openCity(event, 'one')" id="defaultOpen"style="margin-top:10px;margin-left:5px;width:40px;height:40px;background: url(https://cdn-icons-png.flaticon.com/512/25/25694.png)center;background-size:cover"></button></center>
  297. <div>
  298. </div>
  299. <br></div></div></div>
  300.  
  301.  
  302. <div>
  303. <div>
  304.  
  305. </div></div></div></div></div> </div>
  306.  
  307. <link rel="preconnect" href="https://fonts.googleapis.com">
  308. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  309. <link href="https://fonts.googleapis.com/css2?family=Sacramento&display=swap" rel="stylesheet">
  310.  
  311. <script>
  312. function openCity(evt, cityName) {
  313. var i, tabcontent, tablinks;
  314. tabcontent = document.getElementsByClassName("tabcontent");
  315. for (i = 0; i < tabcontent.length; i++) {
  316. tabcontent[i].style.display = "none";
  317. }
  318. tablinks = document.getElementsByClassName("tablinks");
  319. for (i = 0; i < tablinks.length; i++) {
  320. tablinks[i].className = tablinks[i].className.replace(" active", "");
  321. }
  322. document.getElementsByClassName("tablinks");
  323. for (i = 0; i < tablinks.length; i++) {
  324. tablinks[i].className = tablinks[i].className.replace(" active", "");
  325. }
  326. document.getElementById(cityName).style.display = "block";
  327. evt.currentTarget.className += " active";
  328. }
  329.  
  330. // Get the element with id="defaultOpen" and click on it
  331. document.getElementById("defaultOpen").click();
  332. </script>
  333.  
  334.  
  335. <div style="display:none"><iframe width="560" height="315" src="https://www.youtube.com/embed/3u2YbzQHT14" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  336. </div>
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!