API tools faq
paste
Advertisement
kay_kodes

true to my lover || profile text

kay_kodes
Jul 6th, 2022
311
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 18.76 KB | None | 0 0
raw download clone embed print report
  1. ♡ okay this is one of the simplest PT i've ever done. and honestly it looks pretty good! i love the buttons and the format. enjoy and don't steal :3 ♡
  2.  
  3. best dreams,
  4. kay <3
  5.  
  6. --CODE STARTS BELOW THIS TEXT--
  7. <html>
  8. <center>
  9. <link href="https://fonts.googleapis.com/css2?family=PT+Serif&display=swap" rel="stylesheet">
  10.  
  11. <link href="https://fonts.cdnfonts.com/css/the-hustle" rel="stylesheet">
  12.  
  13. <meta name="viewport" content="width=device-width, initial-scale=1">
  14. <style>
  15. /*Scrollbar*/
  16. ::-webkit-scrollbar {width: 0px;}
  17. ::-webkit-scrollbar-thumb {background: #eee;}
  18. ::-webkit-scrollbar-thumb:hover {background: #fff;}
  19.  
  20. @font-face {
  21. font-family: 'The Hustle', sans-serif;
  22. src: url('https://fonts.cdnfonts.com/css/the-hustle')
  23.  
  24. }
  25. h1{
  26. font-family: 'The Hustle', sans-serif;
  27. font-size:40px;
  28. 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;
  29.  
  30. }
  31. h2{
  32. font-family: 'The Hustle', sans-serif;
  33. font-size:20px;
  34. margin-left:10px;
  35. margin-right:10px;
  36. 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;
  37.  
  38. }
  39.  
  40. .box{
  41. position: relative;
  42. text-align: center;
  43.  
  44. }
  45. .page{
  46. text-decoration: none;
  47. color:black;
  48. padding: 10px
  49.  
  50. }
  51.  
  52. .columnone{
  53. float: center;
  54. width:530px;
  55. height:650px; background:url(https://i.pinimg.com/736x/61/66/de/6166de72be5a6d28fc56f6db328f4c72.jpg);
  56. border: 2px #000 ;
  57. margin-left:10px;
  58. margin-right: 10px;
  59. margin-top:20px;
  60. margin-bottom: 20px;
  61. overflow:hidden;
  62. box-shadow: -4px -2px 16px 0px #fff, 4px 2px 16px 0px #fff;
  63. color:#000;
  64. font-size:12px;
  65. background-size:cover;
  66. }
  67.  
  68. .columntwo{
  69. float:left;
  70. width:400px;
  71. height:510px;
  72. margin-right:10px;
  73. margin-bottom: 2px;
  74. overflow: auto;
  75. background-color: #eee;
  76. margin-top:20px;
  77. box-shadow: -4px -2px 16px 0px #fff, 4px 2px 16px 0px #fff;
  78. color: #000;
  79. font-size: 12px
  80.  
  81. }
  82.  
  83. button {
  84. width:150px;
  85. height:90px;
  86. margin-top:0px;
  87. overflow: hidden;
  88. border: 0px solid #fff;
  89. color: #fff;
  90. font-weight: bold;
  91. font-size: 15px;
  92. 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;
  93.  
  94. </style>
  95.  
  96. <div class="columnone">
  97. <div id="one" class="tabcontent">
  98. <div style="text-align:justify;width:500px;height:625px;overflow:hidden;margin-top:10px;background-color: rgba(255, 255, 255, 0.3);margin-bottom:10px;border:#fff 1px solid">
  99. <!--FULL NAME HERE-->
  100. <center>
  101. <h1>First Name and Last Name</h1>
  102. <img src="https://i.pinimg.com/474x/4a/c3/41/4ac341a2eaaba07e7391968d5c4b6cf0.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">
  103.  
  104. <h2>"And there's a dazzling haze, a mysterious way about you dear."</h2>
  105.  
  106. </center>
  107.  
  108. <div style="text-align:center;margin-left:10px;font-size:12px;margin-right:10px;margin-top:30px">
  109. <b style="font-size:20px">OOC INFO</b>
  110. <p><b>Name - Insert Name Here
  111. <br> Timezone - Insert Timezone Here
  112. <br> Contact Method - Insert Contact Method Here
  113. </b>
  114.  
  115.  
  116. <!--BUTTONS-->
  117. <div class="button">
  118. <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>
  119.  
  120. <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>
  121.  
  122. <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>
  123.  
  124. <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>
  125.  
  126. <p><p><center style="margin-top:90px"><a href="https://kkodes.wixsite.com/dreamer" style="color:#000;font-size:10px"><b><u>kay kodes</u></b></a></center>
  127. </div></div></div></div>
  128.  
  129. <!----------------->
  130.  
  131. <!--BASIC, ABOUT, FIRST IMPRESSIONS, PERSONALITY-->
  132. <div id="two" class="tabcontent">
  133. <div style="margin-top:0px;overflow:hidden;background:#919e96;height:650px;background-size:cover">
  134. <div style="text-align:justify;width:500px;height:625px;overflow:auto;margin-top:10px;background-color: rgba(255, 255, 255, 0.6);margin-bottom:10px;border:#fff 1px solid">
  135. <center><h1 style="margin-left:10px;margin-right:10px">Brief Facts</h1></center>
  136.  
  137. <div style="margin-left:10px;margin-right:10px">
  138. <p>
  139. <b style="font-size:20px"><u>BASICS</u></b>
  140.  
  141. <p><b>name.</b> insert name here<br>
  142. <b>nickname(s).</b> insert nickname(s) here<br>
  143. <b>orientation.</b> insert orientation here<br>
  144. <b>birthday.</b> insert birthday here<br>
  145. <b>birthplace.</b> insert birthplace here<br>
  146. <b>current residence.</b> insert current residence here<br><br>
  147.  
  148. <b>quote.</b><i> being happy is always a win</i>
  149.  
  150. <p><b>house/faction/kingdom.</b> insert placement here<br>
  151. <b>bloodline.</b> insert bloodline here<br>
  152. <b>status.</b> insert status here<br>
  153. <b>graduate/student year.</b> insert year here<br>
  154. <b>occupation.</b> insert occupation here
  155.  
  156. <div style=" border-left: 2px solid #fff; padding-left: 10px">
  157. <p><b>mother.</b> insert name here<br>
  158. <b>father.</b> insert name here
  159.  
  160. <div style=" border-left: 2px solid #fff; padding-left: 10px;margin-left:10px">
  161. <b>sister.</b> insert name here<br>
  162. <b>brother.</b> insert name here<br>
  163. </div>
  164. </div>
  165. <br>
  166. <b>significant other.</b> insert name here
  167. <p style="margin-top:25px">
  168.  
  169. <!--ABOUT-->
  170. <b style="font-size:20px"><u>ABOUT</u></b>
  171. <p>
  172. <img src="https://i.pinimg.com/474x/bb/fd/76/bbfd76f5f54bae767fae510335a180af.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">
  173.  
  174. <p>Et ultrices neque ornare aenean euismod. Tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla facilisi. Maecenas volutpat blandit aliquam etiam erat velit. Rhoncus est pellentesque elit ullamcorper dignissim cras. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Vel orci porta non pulvinar neque laoreet. Tortor id aliquet lectus proin nibh nisl condimentum id. Interdum velit euismod in pellentesque massa. Aliquam faucibus purus in massa tempor nec feugiat nisl. Donec ac odio tempor orci dapibus ultrices in. Lacus sed viverra tellus in. Vel pharetra vel turpis nunc. Eget dolor morbi non arcu. Magna fermentum iaculis eu non diam. Pellentesque habitant morbi tristique senectus et netus et malesuada. Adipiscing bibendum est ultricies integer quis. Donec pretium vulputate sapien nec sagittis aliquam malesuada. Facilisis volutpat est velit egestas dui id ornare arcu. Ipsum faucibus vitae aliquet nec ullamcorper sit amet risus nullam. Varius vel pharetra vel turpis nunc eget.
  175. <p>
  176.  
  177. <!--FIRST IMPRESSIONS-->
  178. <b style="font-size:20px"><u>FIRST IMPRESSIONS</u></b>
  179.  
  180. <p>
  181. <img src="https://i.pinimg.com/474x/ed/87/8a/ed878a1a22b3609d6351fb7e97e0b830.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">
  182.  
  183. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nibh mauris cursus mattis molestie a iaculis at erat. Et malesuada fames ac turpis egestas sed tempus urna et. At auctor urna nunc id. Malesuada fames ac turpis egestas sed tempus urna et pharetra. Id nibh tortor id aliquet lectus proin nibh nisl. Velit sed ullamcorper morbi tincidunt ornare massa eget egestas. At auctor urna nunc id cursus metus. Sit amet consectetur adipiscing elit duis tristique. Eu augue ut lectus arcu bibendum at varius vel pharetra. Volutpat diam ut venenatis tellus in metus. Imperdiet massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Vel turpis nunc eget lorem dolor. us metus. Sit amet consectetur adipiscing elit duis tristique. Eu augue ut lectus arcu bibendum at varius vel pharetra.</p>
  184.  
  185. <!--PERSONALITY-->
  186. <b style="font-size:20px"><u>PERSONALITY</u></b>
  187. <p>
  188. <img src="https://i.pinimg.com/474x/16/90/3c/16903c473a824d8485c96ad5923c3462.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">
  189.  
  190. <p>Et ultrices neque ornare aenean euismod. Tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla facilisi. Maecenas volutpat blandit aliquam etiam erat velit. Rhoncus est pellentesque elit ullamcorper dignissim cras. Iaculis urna id volutpat lacus laoreet non curabitur gravida. Vel orci porta non pulvinar neque laoreet. Tortor id aliquet lectus proin nibh nisl condimentum id. Interdum velit euismod in pellentesque massa. Aliquam faucibus purus in massa tempor nec feugiat nisl. Donec ac odio tempor orci dapibus ultrices in. Lacus sed viverra tellus in. Vel pharetra vel turpis nunc. Eget dolor morbi non arcu. Magna fermentum iaculis eu non diam. Pellentesque habitant morbi tristique senectus et netus et malesuada. Adipiscing bibendum est ultricies integer quis. Donec pretium vulputate sapien nec sagittis aliquam malesuada. Facilisis volutpat est velit egestas dui id ornare arcu. Ipsum faucibus vitae aliquet nec ullamcorper sit amet risus nullam. Varius vel pharetra vel turpis nunc eget.
  191.  
  192. </p>
  193. <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>
  194.  
  195. <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>
  196. </center>
  197. <div>
  198. </div></div>
  199. <br></div></div></div>
  200.  
  201. <!----------------->
  202.  
  203. <!--RELATIONS-->
  204. <div id="three" class="tabcontent">
  205.  
  206. <div style="margin-top:0px;overflow:hidden;background:#919e96;height:650px;background-size:cover">
  207.  
  208. <div style="text-align:justify;width:500px;height:625px;overflow:auto;margin-top:10px;background-color: rgba(255, 255, 255, 0.6);margin-bottom:10px;border:1px #fff solid">
  209.  
  210.  
  211. <div style="margin-left:10px; margin-right:10px">
  212. <center><h1 style="margin-left:10px;margin-right:10px">Relations</h1></center>
  213.  
  214. <!--each relation-->
  215. <div style="padding:5%;border:#000 0px solid;width:390px;height:120px;margin-right:10px;float:left;overflow:auto">
  216. <img src="IMG_LINK" 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">
  217. <p><b>Relation | Name</b></p>
  218. <p>Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi.
  219. </div><br>
  220.  
  221. <!--each relation-->
  222. <div style="padding:5%;border:#000 0px solid;width:390px;height:120px;margin-right:10px;float:left;overflow:auto">
  223. <img src="IMG_LINK" 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">
  224. <p><b>Relation | Name</b></p>
  225. <p>Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi.
  226. </div><br>
  227.  
  228. <!--each relation-->
  229. <div style="padding:5%;border:#000 0px solid;width:390px;height:120px;margin-right:10px;float:left;overflow:auto">
  230. <img src="IMG_LINK" 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">
  231. <p><b>Relation | Name</b></p>
  232. <p>Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi.
  233. </div><br>
  234.  
  235. <!--each relation-->
  236. <div style="padding:5%;border:#000 0px solid;width:390px;height:120px;margin-right:10px;float:left;overflow:auto">
  237. <img src="IMG_LINK" 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">
  238. <p><b>Relation | Name</b></p>
  239. <p>Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi.
  240. </div><br>
  241.  
  242. <!--each relation-->
  243. <div style="padding:5%;border:#000 0px solid;width:390px;height:120px;margin-right:10px;float:left;overflow:auto">
  244. <img src="IMG_LINK" 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">
  245. <p><b>Relation | Name</b></p>
  246. <p>Lorem ipsum dolor sit amet. Est dolor consectetur et galisum saepe et sunt odit qui maiores quasi.
  247. </div><br>
  248.  
  249. </p>
  250. <center>
  251. <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>
  252.  
  253. <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>
  254.  
  255. <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>
  256. </center>
  257. <div>
  258. </div>
  259. <br></div></div></div></div>
  260.  
  261.  
  262. <!----------------->
  263.  
  264. <!--AESTHETICS AND VISUALS-->
  265. <div id="four" class="tabcontent">
  266.  
  267. <div style="margin-top:0px;overflow:hidden;background:#919e96;height:650px;background-size:cover">
  268.  
  269. <div style="text-align:justify;width:500px;height:625px;overflow:auto;margin-top:10px;background-color: rgba(255, 255, 255, 0.6);margin-bottom:10px;border:1px solid #fff">
  270.  
  271.  
  272. <center><h1 style="margin-left:10px;margin-right:10px">Aesthetics</h1>
  273.  
  274. <!--each aesthetic-->
  275. <img src="IMG_LINK" 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%">
  276.  
  277. <!--each aesthetic-->
  278. <img src="IMG_LINK" 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%">
  279.  
  280. <br>
  281.  
  282. <!--each aesthetic-->
  283. <img src="IMG_LINK" 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%">
  284.  
  285. <!--each aesthetic-->
  286. <img src="IMG_LINK" 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%">
  287.  
  288. <br>
  289.  
  290. <!--each aesthetic-->
  291. <img src="IMG_LINK" 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%">
  292.  
  293. <!--each aesthetic-->
  294. <img src="IMG_LINK" 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%">
  295.  
  296. </center>
  297. <center>
  298. <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>
  299.  
  300. <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>
  301. <div>
  302. </div>
  303. <br></div></div></div>
  304.  
  305.  
  306. <div>
  307. <div>
  308.  
  309. </div></div></div></div></div> </div>
  310.  
  311. <link rel="preconnect" href="https://fonts.googleapis.com">
  312. <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  313. <link href="https://fonts.googleapis.com/css2?family=Sacramento&display=swap" rel="stylesheet">
  314.  
  315. <script>
  316. function openCity(evt, cityName) {
  317. var i, tabcontent, tablinks;
  318. tabcontent = document.getElementsByClassName("tabcontent");
  319. for (i = 0; i < tabcontent.length; i++) {
  320. tabcontent[i].style.display = "none";
  321. }
  322. tablinks = document.getElementsByClassName("tablinks");
  323. for (i = 0; i < tablinks.length; i++) {
  324. tablinks[i].className = tablinks[i].className.replace(" active", "");
  325. }
  326. document.getElementsByClassName("tablinks");
  327. for (i = 0; i < tablinks.length; i++) {
  328. tablinks[i].className = tablinks[i].className.replace(" active", "");
  329. }
  330. document.getElementById(cityName).style.display = "block";
  331. evt.currentTarget.className += " active";
  332. }
  333.  
  334. // Get the element with id="defaultOpen" and click on it
  335. document.getElementById("defaultOpen").click();
  336. </script>
  337.  
  338.  
  339. <div style="display:none">
  340. <iframe src="https://www.youtube.com/embed/cvUAzpn48xA?autoplay=1&amp;loop=1&amp;playlist=cvUAzpn48xA" frameborder="0" allow="autoplay; clipboard-write; "></iframe>
  341. </div>
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!