API tools faq
paste
kay_kodes

don't blame me || profile text

kay_kodes
Jul 8th, 2022
249
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.24 KB | None | 0 0
raw download clone embed print report
  1. ♡ hello! i am back with a very very special code. so this is a profile text- a result of https://alyscodes.tumblr.com/ and my work! we did a collab and it was amazing. i very much enjoyed working with her- aly is just superb at this and i would definitely code with her again. so! we are working on a matching BS- don't fret. but enjoy this one first and please keep the credits or we'll come after you <3 ♡
  2.  
  3. best dreams,
  4. kay <3
  5.  
  6.  
  7. --CODE STARTS BELOW THIS TEXT--
  8. <html>
  9. <center>
  10. <link href="https://fonts.googleapis.com/css2?family=PT+Serif&display=swap" rel="stylesheet">
  11.  
  12. <link href="https://dl.dropbox.com/s/so6oa8mohfumanj/Antro_Vectra.otf" rel="stylesheet">
  13.  
  14. <meta name="viewport" content="width=device-width, initial-scale=1">
  15. <style>
  16. /*Scrollbar*/
  17. ::-webkit-scrollbar {width: 0px;}
  18. ::-webkit-scrollbar-thumb {background: #eee;}
  19. ::-webkit-scrollbar-thumb:hover {background: #fff;}
  20. @font-face {
  21. font-family: 'antrov'; src: url('https://dl.dropbox.com/s/so6oa8mohfumanj/Antro_Vectra.otf')}
  22. htitle {
  23. font-family:'antrov';
  24. font-size:40px;
  25. font-weight:bold;
  26. }
  27.  
  28. .box{
  29. position: relative;
  30. text-align: center;
  31.  
  32. }
  33. .page{
  34. text-decoration: none;
  35. color:black;
  36. padding: 10px
  37.  
  38. }
  39.  
  40. .columnone{
  41. float: left;
  42. width:380px;
  43. height:510px;
  44. background: url('https://i.pinimg.com/474x/af/5e/90/af5e90cf7f5af5e750e88e3011b06ac4.jpg');
  45. border: 2px #000 ;
  46. margin-left:10px;
  47. margin-right: 10px;
  48. margin-top:20px;
  49. margin-bottom: -25px;
  50. overflow:hidden;
  51. box-shadow: -4px -2px 16px 0px #fff, 4px 2px 16px 0px #fff;
  52. outline: 1px solid #fff;
  53. outline-offset: -6px;
  54. }
  55.  
  56.  
  57. .columntwo{
  58. float:left;
  59. width:400px;
  60. height:510px;
  61. margin-right:10px;
  62. margin-bottom: 2px;
  63. overflow: auto;
  64. margin-top:20px;
  65. box-shadow: -4px -2px 16px 0px #fff, 4px 2px 16px 0px #fff;
  66. color: #000;
  67. font-size: 12px;
  68. outline: 1px solid #fff;
  69. outline-offset: -6px;
  70. }
  71.  
  72.  
  73.  
  74. /* From uiverse.io */
  75. button {
  76. padding: 1.3em 3em;
  77. font-size: 12px;
  78. text-transform: uppercase;
  79. letter-spacing: 2.5px;
  80. font-weight: 500;
  81. color: #000;
  82. background-color: #000;
  83. border: 2px #b00b1e;
  84. border-radius: 100%;
  85. box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.0);
  86. transition: all 0.3s ease 0s;
  87. cursor: pointer;
  88. outline: none;
  89. }
  90.  
  91. button:hover {
  92. background-color: #b00b1e;
  93. box-shadow: 0px 15px 20px;
  94. color: ;
  95. transform: translateY(-7px);
  96. }
  97.  
  98. button:active {
  99. transform: translateY(-1px);}
  100.  
  101.  
  102. .relations{
  103. padding: 50px;
  104. display: flex;
  105. justify-content: center;
  106. flex-wrap: wrap;
  107. margin-top:-50px;
  108. }
  109. .rela-ima{
  110. width: 100px;
  111. height: 100px;
  112. border-radius: 50%;
  113. overflow: hidden;
  114. border: 10px solid var(--color-bl);
  115. margin: 4px 5px 5px;
  116. box-shadow: 1px 1px 6px 2px #fff;
  117. }
  118. .rela-hover{
  119. background: #351B0C;
  120. position: relative;
  121. top: -104px;
  122. width: 100px;
  123. height: 100px;
  124. transition: 1s;
  125. transform: scale(0);
  126. border-radius: 50%;
  127. margin: 0px;
  128. display: flex;
  129. justify-content: center;
  130. align-items: center;
  131. flex-direction: column;
  132. }
  133.  
  134. .rela-ima:hover
  135. .rela-hover{
  136. transform: scale(1);
  137. }
  138.  
  139. .rela-hover span{
  140. color: #351B0C;
  141. position: relative;
  142. font-size: 25px;
  143. }
  144. .rela-hover strong{
  145. font-size: 12px;
  146. color: white;
  147. position: relative;
  148. top: -6px;
  149. text-align: center;
  150. text-transform: uppercase;
  151. }
  152.  
  153. .rela-hover i{
  154. font-size: 10px;
  155. color: #999;
  156. position: relative;
  157. top: -6px;
  158. text-align: center;
  159. text-transform: lowercase;
  160. }
  161.  
  162. .dates {
  163. position:relative;
  164. top: 24px;
  165. left: 100px;
  166. }
  167.  
  168. .date {
  169. border-bottom: 1px solid #333;
  170. width: 200px;
  171. text-align: right;
  172. line-height: 200%;
  173. font-size: 8px;
  174. text-transform: uppercase;
  175. letter-spacing: 2px;
  176. color: black;
  177. }
  178.  
  179. .titles {
  180. position: relative;
  181. top: -91px;
  182. left:70px;
  183. }
  184.  
  185.  
  186. .titlestwo {
  187. width: 200px;
  188. border-bottom: 1px solid transparent;
  189. line-height: 200%;
  190. font-size: 8px;
  191. text-transform: uppercase;
  192. letter-spacing: 4px;
  193. color: white;
  194. }
  195.  
  196. .titlestwo b {
  197. font-weight: bold;
  198. border-bottom: 1px solid black;
  199. color: #000;
  200. }
  201.  
  202.  
  203. h2 {
  204. font-weight: normal;
  205. border-bottom: 1px solid #000;
  206. color: black;
  207. letter-spacing: 6px;
  208. }
  209.  
  210. h1 {
  211. font-weight: lighter;
  212. color: black;
  213. font-size:12px;
  214. letter-spacing: 0px;
  215. padding:10px;
  216. margin-left:10px;
  217. margin-right: 10px;
  218. margin-top:-20px;
  219. margin-bottom: -25px;
  220. text-align:justify;
  221. }
  222.  
  223.  
  224. </style>
  225.  
  226. <div class="columnone">
  227. <!--FULL NAME HERE-->
  228. <p>
  229. <htitle style="color:#fff;font-size:35px">Your Name Here</htitle>
  230. <br>
  231. <img src="https://i.pinimg.com/474x/56/b4/39/56b439ac47d6207b7c45eab58e6fd75c.jpg" style="width:150px;height:150px;border: 2px solid #fff;margin-right:10px;margin-bottom:5px;margin-top:10px;box-shadow: 1px 1px 6px 2px #fff;margin-left:10px;border-radius:100%">
  232.  
  233. <div style="text-align:center;margin-left:10px;font-size:12px;margin-right:10px;margin-top:30px;color:white">
  234. <b style="font-size:20px;color:white">OOC INFO</b>
  235. <p><b>Name - Insert Name Here
  236. <br> Timezone - Insert Timezone Here
  237. <br> Contact Method - Insert Contact Method Here
  238. <br><center style="margin-top:5px"><a href="https://kkodes.wixsite.com/dreamer" style="color:#fff;font-size:10px"><b><u>kay kodes</u></b></a> <b style="color:#fff">&</b> <a href="https://alyscodes.tumblr.com/" style="color:#fff;font-size:10px"><b><u>aly's codes</u></b></a></center>
  239. </b>
  240. </div>
  241.  
  242. <!--BUTTONS-->
  243. <br>
  244. <button class="tablinks" onclick="openCity(event, 'one')" id="defaultOpen"style="margin-top:10px;margin-left:5px;width:40px;height:70px;background: url(https://i.pinimg.com/474x/e6/99/4e/e6994eff8608c54bdde695708896fa8a.jpg)center;background-size:cover;box-shadow: 1px 1px 6px 2px #fff"></button>
  245.  
  246. <button class="tablinks" onclick="openCity(event, 'two')" id="defaultOpen"style="margin-top:10px;margin-left:15px;width:40px;height:70px;background: url(https://i.pinimg.com/474x/d9/a2/97/d9a2973a8cf9daa363e1b7501de5e53f.jpg)center;background-size:cover;box-shadow: 1px 1px 6px 2px #fff"></button>
  247.  
  248. <button class="tablinks" onclick="openCity(event, 'three')" id="defaultOpen"style="margin-top:10px;margin-left:15px;width:40px;height:70px;background: url(https://i.pinimg.com/474x/5b/a4/33/5ba433bca80b8daf203acb530f866a1c.jpg)center;background-size:cover;box-shadow: 1px 1px 6px 2px #fff"></button>
  249.  
  250. <button class="tablinks" onclick="openCity(event, 'four')" id="defaultOpen"style="margin-top:10px;margin-left:15px;width:40px;height:70px;background: url(https://i.pinimg.com/474x/fa/46/0c/fa460cfa805b80c85551df62ed519eee.jpg)center;background-size:cover;box-shadow: 1px 1px 6px 2px #fff"></button>
  251.  
  252. </div></div>
  253.  
  254. <!--COLUMN 2 FOR PAGE-->
  255. <div class="columntwo">
  256.  
  257. <!--BS PAGE 1-->
  258. <div id="one" class="tabcontent">
  259. <div style="margin-top:0px;overflow:auto;background:url(https://i.pinimg.com/474x/10/89/03/1089032c896d08c30bb3a45c86393fb6.jpg);height:510px">
  260. <div style="text-align:justify;width:370px;height:490px;overflow:auto;margin-top:10px;background-color: rgba(255, 255, 255, 0.6);margin-bottom:10px;overflow-x:hidden">
  261. <br>
  262. <center><htitle>Brief Facts</htitle></center>
  263.  
  264.  
  265.  
  266.  
  267. <div class="dates">
  268.  
  269. <div class="date">something</div>
  270. <div class="date">something</div>
  271. <div class="date">something</div>
  272. <div class="date">something</div>
  273. <div class="date">something</div>
  274. <div class="date">something</div>
  275. <div class="date">something</div>
  276. </div>
  277.  
  278.  
  279. <div class="titles">
  280.  
  281. <div class="titlestwo"><b>Name</b></div>
  282. <div class="titlestwo"><b>IG Age</b></div>
  283. <div class="titlestwo"><b>Orientation</b></div>
  284. <div class="titlestwo"><b>Gender</b></div>
  285. <div class="titlestwo"><b>IG Job</b></div>
  286. <div class="titlestwo"><b>Faction</b></div>
  287. <div class="titlestwo"><b>Status</b></div>
  288.  
  289. </div>
  290.  
  291. <p style="margin-left:10px;margin-right:10px;margin-top:-60px">
  292. <center><h2> <div class= chocolate><font color= #000>A</font>PPEARANCE</div></h2><br>
  293. <img src="https://i.pinimg.com/474x/91/48/1d/91481d8ec400c5a169c6042106c6db68.jpg" style="width:100px;height:100px;border: 2px solid #fff;margin-right:10px;margin-bottom:5px;margin-top:px;box-shadow: 1px 1px 6px 2px #fff;margin-left:10px;border-radius:100%;float:left;object-fit:cover">
  294. <h1> Lorem ipsum dolor sit amet. Quo dolorem vitae id illum laboriosam quo vitae praesentium expedita incidunt sit incidunt incidunt sed eligendi eligendi. Aut nesciunt aliquid et autem saepe sed nesciunt neque non sint incidunt. Sit mollitia enim nam officiis dolore ut eveniet exercitationem et consequatur quisquam et optio sapiente rem quod repudiandae.</h1>
  295. <br><br><br><br><br><br><br>
  296.  
  297. <p style="margin-left:10px;margin-right:10px;margin-top:-60px">
  298. <center><h2> <div class= chocolate><font color= #000>P</font>ERSONALITY</div></h2><br>
  299. <img src="https://i.pinimg.com/474x/02/25/81/0225810bdf4ecb61ee2dd93d2a08508e.jpg" style="width:100px;height:100px;border: 2px solid #fff;margin-right:10px;margin-bottom:5px;margin-top:px;box-shadow: 1px 1px 6px 2px #fff;margin-left:10px;border-radius:100%;float:right;object-fit:cover">
  300. <h1> Lorem ipsum dolor sit amet. Quo dolorem vitae id illum laboriosam quo vitae praesentium expedita incidunt sit incidunt incidunt sed eligendi eligendi. Aut nesciunt aliquid et autem saepe sed nesciunt neque non sint incidunt. Sit mollitia enim nam officiis dolore ut eveniet exercitationem et consequatur quisquam et optio sapiente rem quod repudiandae.</h1>
  301.  
  302.  
  303.  
  304.  
  305. <div>
  306. </div>
  307. <br></div></div></div>
  308.  
  309. <!--BS PAGE 2-->
  310. <div id="two" class="tabcontent">
  311. <div style="margin-top:0px;overflow:auto;background:url(https://i.pinimg.com/474x/10/89/03/1089032c896d08c30bb3a45c86393fb6.jpg);height:510px">
  312. <div style="text-align:justify;width:370px;height:490px;overflow:auto;margin-top:10px;background-color: rgba(255, 255, 255, 0.6);margin-bottom:10px;overflow-x:hidden">
  313. <br>
  314. <center><htitle>Relations</htitle></center>
  315.  
  316. <br>
  317.  
  318.  
  319.  
  320. <div class="relations">
  321.  
  322. <div class="rela-ima"><img src="https://via.placeholder.com/100x100"><div class="rela-hover">
  323. </span>
  324. <strong>name</strong>
  325. <i>relation</i>
  326. </div></div>
  327.  
  328. <div class="rela-ima"><img src="https://via.placeholder.com/100x100"><div class="rela-hover">
  329. </span>
  330. <strong>name</strong>
  331. <i>relation</i>
  332. </div></div>
  333.  
  334. <div class="rela-ima"><img src="https://via.placeholder.com/100x100"><div class="rela-hover">
  335. </span>
  336. <strong>name</strong>
  337. <i>relation</i>
  338. </div></div>
  339.  
  340. <div class="rela-ima"><img src="https://via.placeholder.com/100x100"><div class="rela-hover">
  341. </span>
  342. <strong>name</strong>
  343. <i>relation</i>
  344. </div></div>
  345.  
  346. <div class="rela-ima"><img src="https://via.placeholder.com/100x100"><div class="rela-hover">
  347. </span>
  348. <strong>name</strong>
  349. <i>relation</i>
  350. </div></div>
  351.  
  352. <div class="rela-ima"><img src="https://via.placeholder.com/100x100"><div class="rela-hover">
  353. </span>
  354. <strong>name</strong>
  355. <i>relation</i>
  356.  
  357.  
  358.  
  359. </div></div></div></div></div></div>
  360.  
  361. <!--BS PAGE 3-->
  362. <div id="three" class="tabcontent">
  363.  
  364. <div style="margin-top:0px;overflow:auto;background:url(https://i.pinimg.com/474x/10/89/03/1089032c896d08c30bb3a45c86393fb6.jpg);height:510px">
  365. <div style="text-align:justify;width:370px;height:490px;overflow:auto;margin-top:10px;background-color: rgba(255, 255, 255, 0.6);margin-bottom:10px;overflow-x:hidden">
  366. <br>
  367. <center><htitle>Aesthetics</htitle></center>
  368. <center>
  369. <p>
  370. <!--each image-->
  371. <img src="https://i.pinimg.com/736x/67/07/31/670731ead371f961b207f85fa31545d3.jpg" style="width:120px;height:120px;border:solid #fff;box-shadow: 1px 1px 6px 2px #fff;object-fit:cover;margin-left:10px;margin-top:10px;border-radius:100%">
  372. <!--each image-->
  373. <img src="https://i.pinimg.com/474x/d5/6e/ff/d56eff8b421ca16ef622a8b58a41cb55.jpg" style="width:120px;height:120px;border:solid #fff;box-shadow: 1px 1px 6px 2px #fff;object-fit:cover;margin-left:10px;margin-top:10px;border-radius:100%">
  374. <!--each image-->
  375. <img src="https://i.pinimg.com/736x/ed/b1/c4/edb1c475f679b1bb5399c0f1f3e19d0d.jpg" style="width:120px;height:120px;border:solid #fff;box-shadow: 1px 1px 6px 2px #fff;object-fit:cover;margin-left:10px;margin-top:10px;border-radius:100%">
  376. <!--each image-->
  377. <img src="https://i.pinimg.com/474x/19/6b/c1/196bc13e94a61eb5fedefb73bd9f4cf1.jpg" style="width:120px;height:120px;border:solid #fff;box-shadow: 1px 1px 6px 2px #fff;object-fit:cover;margin-left:10px;margin-top:10px;border-radius:100%">
  378. <!--each image-->
  379. <img src="https://i.pinimg.com/474x/8d/65/cb/8d65cb6ec735bf21c0faad3b28fa5053.jpg" style="width:120px;height:120px;border:solid #fff;box-shadow: 1px 1px 6px 2px #fff;object-fit:cover;margin-left:10px;margin-top:10px;border-radius:100%">
  380. <!--each image-->
  381. <img src="https://i.pinimg.com/474x/47/10/3b/47103b54312070efcd2c35fa1f1d7e3e.jpg" style="width:120px;height:120px;border:solid #fff;box-shadow: 1px 1px 6px 2px #fff;object-fit:cover;margin-left:10px;margin-top:10px;border-radius:100%">
  382. </center>
  383. <div>
  384. </div>
  385. <br></div></div></div>
  386.  
  387.  
  388. <!--BS PAGE 4-->
  389. <div id="four" class="tabcontent">
  390.  
  391. <div style="margin-top:0px;overflow:auto;background:url(https://i.pinimg.com/474x/10/89/03/1089032c896d08c30bb3a45c86393fb6.jpg);height:510px">
  392. <div style="text-align:justify;width:370px;height:490px;overflow:auto;margin-top:10px;background-color: rgba(255, 255, 255, 0.6);margin-bottom:10px;">
  393. <br>
  394. <center><htitle>Brief History</htitle></center>
  395.  
  396. <p style="margin-left:10px;margin-right:10px">
  397. <img src="https://i.pinimg.com/474x/ec/6e/6b/ec6e6ba25dd6516ccfb8fad6268731f2.jpg" style="width:100px;height:100px;border: 2px solid #fff;margin-right:10px;margin-bottom:5px;margin-top:px;box-shadow: 1px 1px 6px 2px #fff;margin-left:10px;border-radius:100%;float:left;object-fit:cover">
  398. Lorem ipsum dolor sit amet. Quo dolorem vitae id illum laboriosam quo vitae praesentium expedita incidunt sit incidunt incidunt sed eligendi eligendi. Aut nesciunt aliquid et autem saepe sed nesciunt neque non sint incidunt. Sit mollitia enim nam officiis dolore ut eveniet exercitationem et consequatur quisquam et optio sapiente rem quod repudiandae.Aut nesciunt aliquid et autem saepe sed nesciunt neque non sint incidunt. Sit mollitia enim nam officiis dolore ut eveniet exercitationem et consequatur quisquam et optio sapiente rem quod repudiandae.
  399.  
  400. <p style="margin-left:10px;margin-right:10px">
  401. Lorem ipsum dolor sit amet. Quo dolorem vitae id illum laboriosam quo vitae praesentium expedita incidunt sit incidunt incidunt sed eligendi eligendi. Aut nesciunt aliquid et autem saepe sed nesciunt neque non sint incidunt. Sit mollitia enim nam officiis dolore ut eveniet exercitationem et consequatur quisquam et optio sapiente rem quod repudiandae.
  402. <p>
  403.  
  404. <img src="https://i.pinimg.com/474x/dc/0f/08/dc0f081dfb78828526576cd351ee93a2.jpg" style="width:100px;height:100px;border: 2px solid #fff;margin-right:10px;margin-bottom:5px;margin-top:px;box-shadow: 1px 1px 6px 2px #fff;margin-left:10px;border-radius:100%;float:right;object-fit:cover">
  405. <p style="margin-left:10px;margin-right:10px">
  406. Lorem ipsum dolor sit amet. Quo dolorem vitae id illum laboriosam quo vitae praesentium expedita incidunt sit incidunt incidunt sed eligendi eligendi. Aut nesciunt aliquid et autem saepe sed nesciunt neque non sint incidunt. Sit mollitia enim nam officiis dolore ut eveniet exercitationem et consequatur quisquam et optio sapiente rem quod repudiandae.Aut nesciunt aliquid et autem saepe sed nesciunt neque non sint incidunt. Sit mollitia enim nam officiis dolore ut eveniet exercitationem et consequatur quisquam et optio sapiente rem quod repudiandae.
  407.  
  408.  
  409. <p style="margin-left:10px;margin-right:10px">
  410. Lorem ipsum dolor sit amet. Quo dolorem vitae id illum laboriosam quo vitae praesentium expedita incidunt sit incidunt incidunt sed eligendi eligendi. Aut nesciunt aliquid et autem saepe sed nesciunt neque non sint incidunt. Sit mollitia enim nam officiis dolore ut eveniet exercitationem et consequatur quisquam et optio sapiente rem quod repudiandae.
  411.  
  412. <img src="https://i.pinimg.com/474x/fd/b4/c5/fdb4c5a803172ea31edceea67d1630bc.jpg" style="width:100px;height:100px;border: 2px solid #fff;margin-right:10px;margin-bottom:5px;margin-top:10px;box-shadow: 1px 1px 6px 2px #fff;margin-left:10px;border-radius:100%;float:left;object-fit:cover">
  413. <p style="margin-left:10px;margin-right:10px">
  414. Lorem ipsum dolor sit amet. Quo dolorem vitae id illum laboriosam quo vitae praesentium expedita incidunt sit incidunt incidunt sed eligendi eligendi. Aut nesciunt aliquid et autem saepe sed nesciunt neque non sint incidunt. Sit mollitia enim nam officiis dolore ut eveniet exercitationem et consequatur quisquam et optio sapiente rem quod repudiandae.Quo dolorem vitae id illum laboriosam quo vitae praesentium. Sit mollitia enim nam officiis dolore ut eveniet exercitationem et consequatur quisquam et optio sapiente rem quod repudiandae.Quo dolorem vitae id illum laboriosam quo vitae praesentium.
  415. <div>
  416. </div>
  417. <br></div></div></div>
  418.  
  419.  
  420. <div>
  421. <div>
  422.  
  423. </div></div></div></div></div> </div>
  424.  
  425. <link rel="preconnect" href="https://fonts.googleapis.com">
  426. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  427. <link href="https://fonts.googleapis.com/css2?family=Sacramento&display=swap" rel="stylesheet">
  428.  
  429. <script>
  430. function openCity(evt, cityName) {
  431. var i, tabcontent, tablinks;
  432. tabcontent = document.getElementsByClassName("tabcontent");
  433. for (i = 0; i < tabcontent.length; i++) {
  434. tabcontent[i].style.display = "none";
  435. }
  436. tablinks = document.getElementsByClassName("tablinks");
  437. for (i = 0; i < tablinks.length; i++) {
  438. tablinks[i].className = tablinks[i].className.replace(" active", "");
  439. }
  440. document.getElementsByClassName("tablinks");
  441. for (i = 0; i < tablinks.length; i++) {
  442. tablinks[i].className = tablinks[i].className.replace(" active", "");
  443. }
  444. document.getElementById(cityName).style.display = "block";
  445. evt.currentTarget.className += " active";
  446. }
  447.  
  448. // Get the element with id="defaultOpen" and click on it
  449. document.getElementById("defaultOpen").click();
  450. </script>
  451.  
  452. <div style="display:none">
  453. <iframe src="https://www.youtube.com/embed/kRJKB291Z1g?autoplay=1&amp;loop=1&amp;playlist=kRJKB291Z1g" frameborder="0" allow="autoplay; clipboard-write; "></iframe>
  454. </div>
Advertisement
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!