reveriee

twist of fate (ic)

Jan 25th, 2021 (edited)
121
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. [comment][font=Arial][font=Karla]--CODE BY REVERIEE--[/font][/font]
  2. twist of fate, in-character code. do not remove credit (visible or not) or claim as your own.
  3.  
  4. -- to change the colors/images/fonts, change the variables below --
  5. in order to change fonts, change the font in the variable, along with the corresponding font in the call-out tag in the comment above
  6.  
  7. [/comment][border=0;
  8.  
  9. /*colors here*/
  10.  
  11. --main: #81466b;
  12. --dark: #291528;
  13. --minibg: white;
  14. --fontcolor: #000;
  15. /*secondary font color here*/
  16. --fontcontrast: white;
  17. --rgb: rgba(0, 0, 0, 0.58);
  18. --lightrgb: rgba(255, 255, 255, 0.5);
  19.  
  20. /*imgs here*/
  21.  
  22. --circlepic: url(https://64.media.tumblr.com/a80f125e7ab125e43f844ff9c42f92c0/1a5443bebeed17e6-41/s500x750/9f74ab11595261f25134a86302a53398f6f03310.png);
  23. --mainpic: url(https://i.imgur.com/dxbdy73.jpg);
  24. --outfit: url(https://inkistyle.com/wp-content/uploads/2019/11/exo-suho39s-outfit-on-instagram-on-november-11-2019.jpg);
  25. --location: url(https://cdn.cnn.com/cnnnext/dam/assets/170519143658-dandong-bridge.jpg);
  26. /*feel free to replace this with a solid hex color, gradient, etc*/
  27. --bg: url(https://i.imgur.com/NhEOxgn.jpg);
  28.  
  29. /*fonts here*/
  30.  
  31. --header: 'Arial', sans-serif;
  32. --font: 'Karla', sans-serif;
  33.  
  34. /*cursor*/
  35. cursor: url(https://66.media.tumblr.com/232c090ebdd37ae4bc17adb54e1e0344/tumblr_inline_ol4nwhvSwg1uxxza6_75sq.png), auto!important;
  36.  
  37. font-smoothing:antialiased; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;height:fit-content;height:-moz-fit-content;max-width:670px;margin:auto;padding:0][border=0;background:var(--bg);background-size:cover;max-width:670px;height:fit-content;height:-moz-fit-content;padding:0 15px 10px 15px;display:flex;flex-wrap:wrap;position:relative;justify-content:space-between][border=0;box-sizing:border-box;margin:auto;width:300px;height:395px;padding:0 5px 5px 5px][border=0;box-sizing:border-box;margin:auto;width:96%;height:135px;background:var(--rgb);padding:15px;border-left:15px solid var(--dark);border-right:15px solid var(--dark)][/border][border=0;height:80px;width:100%;padding:0][border=0;box-sizing:border-box;width:95px;height:95px;background:var(--circlepic)
  38.  
  39. /*change circle pic sizing and positioning here*/
  40.  
  41. 50% 50%;background-size:150%;border-radius:100%;position:relative;top:-15px;float:left;left:15px][/border][border=0;box-sizing:border-box;float:right;width:calc(100% - 115px);height:75px;padding:0 15px 0 0][border=0;padding:5px 0 0 0;text-align:center;font-family:var(--header);font-weight:bold;color:var(--main);font-size:23px;text-transform:uppercase;position:relative][comment]
  42.  
  43. --NAME HERE--
  44. ideally, keep this one line (you can reduce font size), but the tabs below will accommodate if you make it 2+ lines. in that case, just change the heights of the other elements as needed.
  45.  
  46. [/comment]myeong-un[/border][border=0;height:60%;width:100%;padding:0][border=0;height:312%;width:20%;transform:rotate(-90deg);padding:0;position:relative;left:40%;top:-110%;z-index:4][border=0;padding:0;width:84%;height:100%;overflow:hidden][tabs][comment]
  47.  
  48. --DEFAULT TAB--
  49.  
  50. [/comment][tab=.][border=0;box-sizing:border-box;background: var(--minibg);position:absolute;height:140px;width:155px;padding:10px;top:4px;left:-165px;transform:rotate(90deg);border-radius:10px;z-index:5][border=0;background:var(--mainpic)
  51.  
  52. /*change default img size and positioning here*/
  53.  
  54. 50% 80%;background-size:160%;height:100%;width:100%;padding:0;color:transparent],[/border][border=0;clip-path: polygon(5% 0%, 0% 100%, 100% 100%);background: var(--minibg);padding:0;position:absolute;height:20px;width:10px;top:-19px;left:9%][/border][/border][/tab][comment]
  55.  
  56. --MOOD TAB--
  57.  
  58. [/comment][tab=.][border=0;box-sizing:border-box;background: var(--minibg);position:absolute;height:140px;width:155px;padding:10px;top:4px;left:-165px;transform:rotate(90deg);border-radius:10px;z-index:5][border=0;background:var(--dark);padding:3px 5px;border-radius:5px 5px 5px 0;height:fit-content;width:fit-content;height:-moz-fit-content;width:-moz-fit-content;font-family:var(--font);font-size:11px;line-height:130%;color:var(--fontcontrast);margin-bottom:5px]how are you feeling?[/border][border=0;float:right;padding:0;max-width:90%][border=0;background:var(--main);float:right;padding:3px 5px;border-radius:5px 5px 0 5px;height:fit-content;width:fit-content;height:-moz-fit-content;width:-moz-fit-content;font-family:var(--font);font-size:11px;line-height:130%;color: var(--fontcontrast);bottom:5px][comment]
  59.  
  60. --INSERT MOOD HERE--
  61.  
  62. [/comment]put how you're feeling over here !! (mood, no scroll)[/border][/border][border=0;clip-path: polygon(50% 0%, 0% 100%, 100% 100%);background: var(--minibg);padding:0;position:absolute;height:20px;width:10px;top:-19px;left:25%][/border][/border][/tab][comment]
  63.  
  64. --OUTFIT TAB--
  65.  
  66. [/comment][tab=.][border=0;box-sizing:border-box;background: var(--minibg);position:absolute;height:140px;width:155px;padding:10px;top:4px;left:-165px;transform:rotate(90deg);border-radius:10px;z-index:5][border=0;box-sizing:border-box;padding:0;background:var(--outfit)
  67.  
  68. /*change outfit img sizing and positioning here*/
  69.  
  70. 50% 50%;background-size:cover;height:100%;width:100%;padding:0][border=0;background:var(--lightrgb);height:fit-content;width:fit-content;height:-moz-fit-content;width:-moz-fit-content;padding:3px;color:black;font-size:11px;top:6px;left:6px;border-radius:3px;position:relative]outfit[/border][/border][border=0;clip-path: polygon(50% 0%, 0% 100%, 100% 100%);background: var(--minibg);padding:0;position:absolute;height:20px;width:10px;top:-19px;left:44.5%][/border][/border][/tab][comment]
  71.  
  72. --LOCATION TAB--
  73.  
  74. [/comment][tab=.][border=0;box-sizing:border-box;background: var(--minibg);position:absolute;height:140px;width:155px;padding:10px;top:4px;left:-165px;transform:rotate(90deg);border-radius:10px;z-index:5][border=0;box-sizing:border-box;padding:0;background:var(--location)
  75.  
  76. /*change location img sizing and positioning here*/
  77.  
  78. 50% 50%;background-size:cover;height:100%;width:100%;padding:0;display:flex;justify-content:flex-start][border=0;background:var(--lightrgb);height:fit-content;width:fit-content;height:-moz-fit-content;width:-moz-fit-content;padding:3px;color:black;font-size:11px;top:6px;left:6px;border-radius:3px;position:relative]location[/border][border=0;background:var(--lightrgb);height:fit-content;width:fit-content;height:-moz-fit-content;width:-moz-fit-content;padding:3px;color:black;font-size:11px;top:-6px;left:-41px;border-radius:3px;position:relative;align-self:flex-end][comment]
  79.  
  80. --INSERT LOCATION HERE--
  81.  
  82. [/comment]here[/border][/border][border=0;clip-path: polygon(50% 0%, 0% 100%, 100% 100%);background: var(--minibg);padding:0;position:absolute;height:20px;width:10px;top:-19px;left:63%][/border][/border][/tab][comment]
  83.  
  84. --TAGS TAB--
  85.  
  86. [/comment][tab=.][border=0;box-sizing:border-box;background: var(--minibg);position:absolute;height:140px;width:155px;padding:10px;top:4px;left:-165px;transform:rotate(90deg);border-radius:10px;z-index:5][border=0;border-box;box-sizing;width:100%;height:100%;padding:0;overflow:hidden][border=0; height:100%; width:200%; padding:0; overflow:auto][border=0; height:auto; width:50%; padding:0; box-sizing:border-box][border=0;width:100%;height:fit-content;height:-moz-fit-content;padding:0][border=0;background:var(--dark);padding:3px 5px;border-radius:5px 5px 5px 0;height:fit-content;width:fit-content;height:-moz-fit-content;width:-moz-fit-content;font-family:var(--font);font-size:11px;line-height:130%;color: var(--fontcontrast);margin-bottom:5px]mentions[/border][/border][border=0;width:90%;height:fit-content;height:-moz-fit-content;padding:0;float:right][border=0;background:var(--main);float:right;padding:3px 5px;border-radius:5px 5px 0 5px;height:fit-content;width:fit-content;height:-moz-fit-content;width:-moz-fit-content;font-family:var(--font);font-size:11px;line-height:130%;color: var(--fontcontrast);margin-bottom:5px][comment]
  87.  
  88. --MENTIONS HERE--
  89.  
  90. [/comment]@reveriee[/border][/border][border=0;width:100%;height:fit-content;height:-moz-fit-content;padding:0][border=0;background:var(--dark);padding:3px 5px;border-radius:5px 5px 5px 0;height:fit-content;width:fit-content;height:-moz-fit-content;width:-moz-fit-content;font-family:var(--font);font-size:11px;line-height:130%;color: var(--fontcontrast);margin-bottom:5px;float:left]interactions[/border][/border][border=0;width:90%;height:fit-content;height:-moz-fit-content;padding:0;float:right][border=0;float:right;padding:0;max-width:90%][border=0;background:var(--main);float:right;padding:3px 5px;border-radius:5px 5px 0 5px;height:fit-content;width:fit-content;height:-moz-fit-content;width:-moz-fit-content;font-family:var(--font);font-size:11px;line-height:130%;color: var(--fontcontrast);bottom:5px][comment]
  91.  
  92. --INTERACTIONS HERE--
  93.  
  94. [/comment]@reveriee
  95. this thing scrolls whee[/border][/border][/border][border=0;clip-path: polygon(100% 0%, 0% 100%, 100% 100%);background: var(--minibg);padding:0;position:absolute;height:20px;width:10px;top:-19px;left:77%][/border][/border][/border][/border][/border][/tab][/tabs][/border][comment]
  96.  
  97. --TAB COVERS HERE--
  98.  
  99. [/comment][border=0;width:32px;height:110%;padding:0;position:absolute;top:-5%;left:22%;pointer-events:none;border-radius:10px;background: var(--minibg)][border=0;padding:0;background:var(--dark);border-radius:100%;height:24px;width:24px;line-height:26px;text-align:center;font-family:var(--header);font-weight:bold;color:var(--main);font-size:10px;transform:rotate(90deg);position:relative;top:4.5%;left:13%][comment]
  100.  
  101. --DEFAULT TAB FA ICON HERE--
  102.  
  103. [/comment][fa] fa-home [/fa][/border][border=0;padding:0;background:var(--dark);border-radius:100%;height:24px;width:24px;line-height:26px;text-align:center;font-family:var(--header);font-weight:bold;color:var(--main);font-size:10px;transform:rotate(90deg);top:8%;position:relative;left:13%][comment]
  104.  
  105. --MOOD TAB FA ICON HERE--
  106.  
  107. [/comment][fa] fa-heartbeat [/fa][/border][border=0;padding:0;background:var(--dark);border-radius:100%;height:24px;width:24px;line-height:26px;text-align:center;font-family:var(--header);font-weight:bold;color:var(--main);font-size:10px;transform:rotate(90deg);position:relative;top:11%;left:13%][comment]
  108.  
  109. --OUTFIT TAB FA ICON HERE--
  110.  
  111. [/comment][fa] fa-tshirt [/fa][/border][border=0;padding:0;background:var(--dark);border-radius:100%;height:24px;width:24px;line-height:26px;text-align:center;font-family:var(--header);font-weight:bold;color:var(--main);font-size:10px;transform:rotate(90deg);position:relative;top:14.5%;left:13%][comment]
  112.  
  113. --LOCATION TAB FA ICON HERE--
  114.  
  115. [/comment][fa] fa-map-marker-alt [/fa][/border][border=0;padding:0;background:var(--dark);border-radius:100%;height:24px;width:24px;line-height:26px;text-align:center;font-family:var(--header);font-weight:bold;color:var(--main);font-size:10px;transform:rotate(90deg);position:relative;top:17.5%;left:13%][comment]
  116.  
  117. --TAGS TAB FA ICON HERE--
  118.  
  119. [/comment][fa] fa-comment-alt [/fa][/border][/border][/border][/border][/border][/border][border=0;height:40%;width:100%;padding:0;display:flex;justify-content:flex-start;top:-3%;position:relative;z-index:1][border=0;box-sizing:border-box;height:calc(100% - 14px);width:125px;padding:0 15px;color: var(--fontcontrast);font-size:9px;font-family:var(--header);text-transform:lowercase;text-align:justify;letter-spacing:1px;overflow:hidden;top:12px;position:relative;line-height:13.5px][comment]
  120.  
  121. --LONG QUOTE HERE--
  122. write a long quote -- it'll cut off at the appropriate area. to emphasize certain words, copy and paste the tags used in the example below
  123.  
  124. [/comment]yet the menace of the [border=0;letter-spacing:1.5px;color:var(--dark);font-weight:bold;font-style:italic;padding:0;display:inline-block]years[/border] Finds and shall find me unafraid. It matters not [border=0;letter-spacing:1.5px;color:var(--main);font-weight:bold;font-style:italic;padding:0;display:inline-block]how[/border] strait the gate, How charged with punishments the scroll, [border=0;letter-spacing:1.5px;color:var(--dark);font-weight:bold;font-style:italic;padding:0;display:inline-block]i[/border] am the [border=0;letter-spacing:1.5px;color:var(--main);font-weight:bold;font-style:italic;padding:0;display:inline-block]master[/border] of my [border=0;letter-spacing:1.5px;color:var(--dark);font-weight:bold;font-style:italic;padding:0;display:inline-block]fate[/border]: I am the captain of my [border=0;letter-spacing:1.5px;color:var(--main);font-weight:bold;font-style:italic;padding:0;display:inline-block]soul[/border]. invictus by william ernest henley[/border][/border][/border][border=0;box-sizing:border-box;margin:auto;width:340px;height:380px;padding:15px 5px 5px 5px;flex:340px][border=0;box-sizing:border-box;margin:auto;width:100%;height:100%;background: var(--minibg);padding:13px 0;overflow:hidden][border=0; height:100%; width:200%; padding:0; overflow:auto;][border=0; height:auto; width:51.5%; padding:0 17px; box-sizing:border-box; font-family:var(--font); font-size:11px;text-align:justify;color:var(--fontcolor); line-height:130%][comment]
  125.  
  126. --MAIN POST HERE--
  127.  
  128. [/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Donec massa sapien faucibus et molestie ac feugiat sed lectus. Eleifend quam adipiscing vitae proin sagittis nisl rhoncus mattis rhoncus. Auctor elit sed vulputate mi. Morbi quis commodo odio aenean sed adipiscing diam donec. Id consectetur purus ut faucibus pulvinar elementum integer enim. Nibh nisl condimentum id venenatis. Faucibus et molestie ac feugiat sed lectus vestibulum mattis ullamcorper. Et malesuada fames ac turpis egestas integer eget aliquet nibh. A lacus vestibulum sed arcu. Amet consectetur adipiscing elit pellentesque habitant morbi tristique. Sapien nec sagittis aliquam malesuada bibendum. Pellentesque dignissim enim sit amet venenatis urna. Id donec ultrices tincidunt arcu non sodales neque sodales. Posuere urna nec tincidunt praesent. Interdum consectetur libero id faucibus nisl tincidunt eget nullam non. Potenti nullam ac tortor vitae purus. Nullam non nisi est sit. Sed velit dignissim sodales ut eu sem integer. Nec tincidunt praesent semper feugiat.
  129.  
  130. Velit aliquet sagittis id consectetur purus. Enim eu turpis egestas pretium aenean. Placerat vestibulum lectus mauris ultrices. Fermentum iaculis eu non diam phasellus vestibulum. Iaculis at erat pellentesque adipiscing commodo. Diam vel quam elementum pulvinar etiam non quam. Volutpat lacus laoreet non curabitur gravida arcu. Tellus in metus vulputate eu scelerisque felis. Volutpat commodo sed egestas egestas. Netus et malesuada fames ac turpis egestas maecenas. Habitant morbi tristique senectus et. Euismod in pellentesque massa placerat duis ultricies lacus. Ornare quam viverra orci sagittis eu volutpat.
  131.  
  132. Amet nulla facilisi morbi tempus iaculis urna id volutpat. Turpis in eu mi bibendum. Platea dictumst quisque sagittis purus sit. Id diam vel quam elementum pulvinar etiam non quam lacus. Morbi leo urna molestie at elementum eu facilisis. Lacus luctus accumsan tortor posuere ac ut consequat semper viverra. Diam sit amet nisl suscipit adipiscing bibendum est. Bibendum arcu vitae elementum curabitur vitae. Rhoncus dolor purus non enim praesent elementum facilisis leo vel. Non pulvinar neque laoreet suspendisse interdum consectetur libero. Volutpat consequat mauris nunc congue nisi vitae.[/border][/border][/border][/border][/border][border=0;padding:5px;margin:auto;text-align:center;font-size:11px; font-family:var(--font); color:var(--main);][comment]
  133.  
  134. --DO NOT REMOVE CREDIT--
  135.  
  136. [/comment]coded by reveriee.[/border][/border]
RAW Paste Data Copied