API tools faq
paste
hanthesunbeam1

unlucky charms (light)

hanthesunbeam1
Sep 29th, 2020 (edited)
109
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 34.03 KB | None | 0 0
raw download clone embed print report
  1. [comment]once again my colors are weirdly named. Mainp is purple, mainb is green, bg is the main background, text is white that is most of the text boxes, the grid is the grid pattern. b=basic tab p=persona tab h=history tab and r=relationship tab
  2. [/comment][border=0; display: block; position: relative; box-sizing: border-box; width: 600px; height: 510px; line-height: 0px; margin: auto; overflow: hidden; padding:0px;
  3. --bg: #f5f5f5;
  4. --mainb: #A8CDB0;
  5. --mainp: #C6A1F8;
  6. --text: #fff;
  7. --grid: url(https://data.whicdn.com/images/138718968/original.png);
  8. --coverpic1: url(https://i.pinimg.com/474x/16/8b/2f/168b2f20365934636f2981a49a09fd0c.jpg);
  9. --coverpic2: url(https://i.pinimg.com/474x/cd/c1/17/cdc1178a244b112ffd68ed9f335ad8b0.jpg);
  10. --coverpic3: url(https://i.pinimg.com/474x/3b/d9/d6/3bd9d699fb0fbdd3113a72cc26078d1f.jpg);
  11. --bpic1: url(https://i.pinimg.com/474x/f1/14/b0/f114b00f38ef10e9855f47720037f8ac.jpg);
  12. --bpic2: url(https://i.pinimg.com/474x/6f/84/96/6f84963ff3795d6e72fb200831512bd6.jpg);
  13. --bpic3: url(https://i.pinimg.com/474x/f0/f5/ac/f0f5acae28390ef67b3192cbe1201dcb.jpg);
  14. --bpic4: url(https://i.pinimg.com/474x/13/36/55/1336550ba88618061c021bf4f57300d3.jpg);
  15. --gallery1: url(https://i.pinimg.com/474x/b5/9f/a4/b59fa4103b28ff76400a3c821f29123c.jpg);
  16. --gallery2: url(https://i.pinimg.com/474x/81/1f/cd/811fcd7f9b696ad5f02ac7a370f5eb0f.jpg);
  17. --gallery3: url(https://i.pinimg.com/474x/10/8b/4a/108b4a2343aeafbf3a0a13d40035ce16.jpg);
  18. --gallery4: url(https://i.pinimg.com/474x/a4/d5/b4/a4d5b4b53067bcfc2116a5d65beb3bc8.jpg);
  19. --gallery5: url(https://i.pinimg.com/474x/0a/e8/a6/0ae8a63372f2899de0c81b664603521c.jpg);
  20. --gallery6: url(https://i.pinimg.com/474x/97/3e/7a/973e7a1424220bcac6279583ae16b36f.jpg);
  21. --ppic1: url(https://i.pinimg.com/474x/0b/aa/d2/0baad2bb95afedbfbd55b3e63c587d0f.jpg);
  22. --ppic2: url(https://i.pinimg.com/474x/93/21/86/932186ea78c5ce34796b07df12007fa4.jpg);
  23. --hpic: url(https://i.pinimg.com/474x/ce/17/da/ce17da1cc260fd8a3e41dbcfa62db131.jpg);
  24. --rpic1: url(https://i.pinimg.com/474x/31/d1/8e/31d18e2af9eb9a6b9e405beac67e1c53.jpg);
  25. --rpic2: url(https://i.pinimg.com/474x/ba/97/b6/ba97b615db6e26c40e6dcdfe275ee784.jpg);]
  26.  
  27. [border=0; position: relative; box-sizing: border-box; margin: auto; width: 500px; top: 0px; height: 50px; z-index:1; padding: 0px;]
  28. [border=0; position: absolute; box-sizing: border-box; margin: auto; background: var(--bg); top: 0px; width: 500px; height: 500px; z-index:2; box-shadow: 10px 10px 0px var(--mainb);]
  29.  
  30. [comment]tab cover[/comment]
  31. [border=0; box-sizing: border-box; width: 100px; height: 150px; opacity: 1; position: absolute; top: 369px; left: -50px; z-index: 4; pointer-events: none;]
  32.  
  33. [border=0; box-sizing: border-box; position: absolute; background: var(--mainb); height: 25px; width: 100%; top: 0px; padding: 0px; color: var(--text);display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: flex-start; flex-direction: row;][border=0; padding-top: 5px; padding-left: 10px;][fa]fas fa-lock-alt [/fa][/border][border=0; padding-top: 5px; padding-right: 10px;][fa]fas fa-key-skeleton[/fa][/border][/border]
  34.  
  35. [border=0; box-sizing: border-box; position: absolute; background: var(--mainb); height: 25px; width: 100%; top: 29px;text-align: right; padding: 0px; color: var(--text);display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: flex-start; flex-direction: row;][border=0; padding-top: 5px; padding-left: 10px;][fa]fas fa-lock-alt [/fa][/border][border=0; padding-top: 5px; padding-right: 10px;][fa]fas fa-key-skeleton[/fa][/border][/border]
  36.  
  37. [border=0; box-sizing: border-box; position: absolute; background: var(--mainb); height: 25px; width: 100%; top: 58px;text-align: right; padding: 0px; color: var(--text);display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: flex-start; flex-direction: row;][border=0; padding-top: 5px; padding-left: 10px;][fa]fas fa-lock-alt [/fa][/border][border=0; padding-top: 5px; padding-right: 10px;][fa]fas fa-key-skeleton[/fa][/border][/border]
  38.  
  39. [border=0; box-sizing: border-box; position: absolute; background: var(--mainb); height: 25px; width: 100%; top: 88px; padding: 0px; color: var(--text);display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: flex-start; flex-direction: row;][border=0; padding-top: 5px; padding-left: 10px;][fa]fas fa-lock-alt [/fa][/border][border=0; padding-top: 5px; padding-right: 10px;][fa]fas fa-key-skeleton[/fa][/border][/border]
  40. [/border]
  41.  
  42. [border=0; width: 0px; padding: 0px; width: 100px; height: 120px; margin-left: -50px; margin-top: 360px; overflow: hidden;][tabs]
  43.  
  44. [tab=001]
  45. [border=0; position: absolute; box-sizing: border-box; background: var(--mainp); top: 15px; left: 210px; height: 15px; width: 325px; z-index: 2; box-shadow: 0px 5px 0px var(--text);][/border]
  46.  
  47. [border=0; position: absolute; box-sizing: border-box; background-position: right; background: var(--grid); background-size: 107%; background-position: center; top: 45px; left: 50px; width: 395px; height: 355px; z-index:2;][/border]
  48.  
  49. [comment]the front quote is about one line. not very much can go here.[/comment]
  50. [border=0; position: absolute; box-sizing: border-box; padding: 0px; padding-left: 10px; line-height: 10px; font-size: 20px; color: black; top: 70px; left: 290px; background: var(--mainb); text-shadow: 2px 2px white; z-index: 3; ][font=Cabin]"quote line one here"[/font][/border]
  51. [border=0; position: absolute; box-sizing: border-box; padding: 0px; padding-left: 10px; line-height: 10px; font-size: 20px; color: black; top: 100px; left: 240px; background: var(--mainb); text-shadow: 2px 2px white; z-index: 3;][font=Cabin]"and a quote line two here"[/font][/border]
  52.  
  53. [comment]cover pictures 1-3[/comment]
  54. [border=0; position: absolute; box-sizing: border-box; background-position: right; background: var(--coverpic1); background-size: cover; background-position: bottom center; top: 10px; left: 10px; width: 230px; height: 230px; z-index: 3; box-shadow: 5px 5px 0px black; filter: grayscale(100%);][/border]
  55.  
  56. [border=0; position: absolute; box-sizing: border-box; background-position: right; background: var(--coverpic2); background-size: cover; background-position: top center; top: 150px; left: 220px; width: 260px; height: 265px; z-index: 3; box-shadow: 5px 5px 0px black; ][/border]
  57.  
  58. [border=0; position: absolute; box-sizing: border-box; background-position: right; background: var(--coverpic3); background-size: 190%; background-position: 30% 35%; top: 270px; left: 50px; width: 200px; height: 200px; z-index: 3; box-shadow: 5px 5px 0px black; filter: grayscale(100%);][/border]
  59.  
  60. [comment]name title[/comment]
  61. [border=0; position: absolute; box-sizing: border-box; padding-left: 10px; padding-right: 10px; line-height: 43px; font-size: 35px; color: var(--mainp); top: 420px; left: 227px; background: var(--text); box-shadow: 5px 5px var(--mainp);z-index: 3;][font=Cabin]- name is here[/font][/border][/tab]
  62.  
  63. [tab=002]
  64. [border=0; position: absolute; box-sizing: border-box; background: var(--text); background-size: cover; background-position: center; top: 10px; left: 10px; width: 320px; height: 150px; z-index: 3; filter: grayscale(0%);]
  65.  
  66. [comment]top pic next to text box[/comment]
  67. [border=0; position: absolute; box-sizing: border-box; background: var(--bpic1); background-size: cover; background-position: top center; top: 5px; left: 5px; width: 140px; height: 140px; z-index: 3; box-shadow: 5px 5px 0px var(--text); ][/border]
  68.  
  69. [comment]scroll[/comment]
  70. [border=0;position: absolute; box-sizing: border-box; left: 150px; width: 160px; height: 100%; top: 5px; display: flex; flex-direction: column; overflow: hidden; text-align: justify; padding:0px;][border= 0; box-sizing: border-box; padding: 0; width: 200%; flex: 1; position: relative; overflow: auto; margin-bottom: 10px;][border=0; box-sizing: border-box; left-padding: 10px; padding-right: 10px; padding-top: 0px; width: 165px; font-size: 12px; color: black; line-height: 16px; text-transform: lowercase;][comment]
  71.  
  72. tags are here
  73. [/comment][border=0; display: inline-block; padding: 0px; background: var(--mainp); border-radius: 3px; padding-left: 7px; padding-right: 7px; line-height: 13px; font-size: 13px; ][font=Cabin]name[/font][/border] info
  74. [border=0; display: inline-block; padding: 0px; background: var(--mainp); border-radius: 3px; padding-left: 7px; padding-right: 7px; line-height: 14px; font-size: 13px;][font=Cabin]alias[/font][/border] info
  75. [border=0; display: inline-block; padding: 0px; background: var(--mainp); border-radius: 3px; padding-left: 7px; padding-right: 7px; line-height: 14px; font-size: 13px;][font=Cabin]age[/font][/border] info
  76. [border=0; display: inline-block; padding: 0px; background: var(--mainp); border-radius: 3px; padding-left: 7px; padding-right: 7px; line-height: 14px; font-size: 13px;][font=Cabin]gender[/font][/border] info
  77. [border=0; display: inline-block; padding: 0px; background: var(--mainp); border-radius: 3px; padding-left: 7px; padding-right: 7px; line-height: 14px; font-size: 13px;][font=Cabin]sexuality[/font][/border] info
  78. [border=0; display: inline-block; padding: 0px; background: var(--mainp); border-radius: 3px; padding-left: 7px; padding-right: 7px; line-height: 14px; font-size: 13px;][font=Cabin]p.o.b[/font][/border] info
  79. [border=0; display: inline-block; padding: 0px; background: var(--mainp); border-radius: 3px; padding-left: 7px; padding-right: 7px; line-height: 14px; font-size: 13px;][font=Cabin]d.o.b[/font][/border] info
  80. [border=0; display: inline-block; padding: 0px; background: var(--mainp); border-radius: 3px; padding-left: 7px; padding-right: 7px; line-height: 14px; font-size: 13px;][font=Cabin]role[/font][/border] info
  81. [border=0; display: inline-block; padding: 0px; background: var(--mainp); border-radius: 3px; padding-left: 7px; padding-right: 7px; line-height: 14px; font-size: 13px;][font=Cabin]fc[/font][/border] info
  82. [/border][/border] [/border][/border]
  83.  
  84. [border=0; position: absolute; box-sizing: border-box; background: var(--text); background-size: cover; background-position: center; top: 165px; left: 10px; width: 320px; height: 200px; z-index: 3; ]
  85.  
  86. [comment]scroll[/comment]
  87. [border=0;position: absolute; box-sizing: border-box; left: 0px; width: 320px; height: 100%; top: 5px; display: flex; flex-direction: column; overflow: hidden; text-align: justify; padding: 0px;][border= 0; box-sizing: border-box; padding: 0; width: 200%; flex: 1; position: relative; overflow: auto; margin-bottom: 25px;][border=0; box-sizing: border-box; left-padding: 10px; padding-right: 10px; padding-top: 0px; width: 320px; font-size: 12px; color: black; line-height: 16px;][comment]
  88.  
  89. tags are here
  90. [/comment][border=0; display: inline-block; padding: 0px; background: var(--mainp); border-radius: 3px; padding-left: 7px; padding-right: 7px; line-height: 14px; font-size: 13px;][font=Cabin]hair[/font][/border] Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Accumsan lacus vel facilisis volutpat est velit egestas dui id.
  91.  
  92. [border=0; display: inline-block; padding: 0px; background: var(--mainp); border-radius: 3px; padding-left: 7px; padding-right: 7px; line-height: 14px; font-size: 13px;][font=Cabin]eyes[/font][/border] Consequat nisl vel pretium lectus quam id leo. Lacus vestibulum sed arcu non odio euismod lacinia at quis. Nullam ac tortor vitae purus faucibus ornare. Augue mauris augue neque gravida in fermentum et sollicitudin.
  93.  
  94. [border=0; display: inline-block; padding: 0px; background: var(--mainp); border-radius: 3px; padding-left: 7px; padding-right: 7px; line-height: 14px; font-size: 13px;][font=Cabin]height[/font][/border] oop
  95.  
  96. [border=0; display: inline-block; padding: 0px; background: var(--mainp); border-radius: 3px; padding-left: 7px; padding-right: 7px; line-height: 14px; font-size: 13px;][font=Cabin]weight[/font][/border] oop
  97.  
  98. [border=0; display: inline-block; padding: 0px; background: var(--mainp); border-radius: 3px; padding-left: 7px; padding-right: 7px; line-height: 14px; font-size: 13px;][font=Cabin]body type[/font][/border] Nibh tellus molestie nunc non blandit. Enim tortor at auctor urna nunc id cursus metus. Tortor condimentum lacinia quis vel eros. Consequat semper viverra nam libero justo laoreet sit.
  99.  
  100. [border=0; display: inline-block; padding: 0px; background: var(--mainp); border-radius: 3px; padding-left: 7px; padding-right: 7px; line-height: 14px; font-size: 13px;][font=Cabin]body mods & tattoos[/font][/border] Non tellus orci ac auctor augue mauris augue. Eget nulla facilisi etiam dignissim diam. Aliquam sem fringilla ut morbi tincidunt augue interdum velit. Erat imperdiet sed euismod nisi porta.
  101.  
  102. [border=0; display: inline-block; padding: 0px; background: var(--mainp); border-radius: 3px; padding-left: 7px; padding-right: 7px; line-height: 14px; font-size: 13px;][font=Cabin]style[/font][/border] Nulla aliquet porttitor lacus luctus accumsan tortor posuere ac. Semper viverra nam libero justo laoreet. A pellentesque sit amet porttitor eget dolor morbi. Egestas sed sed risus pretium. Sit amet cursus sit amet dictum sit. At varius vel pharetra vel turpis nunc eget lorem. Lacus vel facilisis volutpat est velit egestas dui id ornare. Pharetra sit amet aliquam id diam maecenas ultricies.
  103.  
  104. [border=0; display: inline-block; padding: 0px; background: var(--mainp); border-radius: 3px; padding-left: 7px; padding-right: 7px; line-height: 14px; font-size: 13px;][font=Cabin]gallery[/font][/border]
  105.  
  106. [border=0; position: relative; width: 100%; height: auto; display: flex; justify-items: center; align-content: center; justify-content: space-around; flex-flow: row wrap; padding: 0px; line-height: 0px;]
  107.  
  108. [comment]gallery images[/comment]
  109. [border=0; box-sizing: border-box; background: var(--gallery1); background-size: cover; background-position: top center; width: 140px; height: 140px; z-index: 3; box-shadow: 5px 5px 0px var(--text); margin-bottom: 10px;][/border]
  110.  
  111. [border=0; box-sizing: border-box; background: var(--gallery2); background-size: cover; background-position: center; width: 140px; height: 140px; z-index: 3; box-shadow: 5px 5px 0px var(--text); margin-bottom: 10px;][/border]
  112.  
  113. [border=0; box-sizing: border-box; background: var(--gallery3); background-size: cover; background-position: center; width: 140px; height: 140px; z-index: 3; box-shadow: 5px 5px 0px var(--text); margin-bottom: 10px;][/border]
  114.  
  115. [border=0; box-sizing: border-box; background: var(--gallery4); background-size: cover; background-position: center; width: 140px; height: 140px; z-index: 3; box-shadow: 5px 5px 0px var(--text); margin-bottom: 10px;][/border]
  116.  
  117. [border=0; box-sizing: border-box; background: var(--gallery5); background-size: cover; background-position: center; width: 140px; height: 140px; z-index: 3; box-shadow: 5px 5px 0px var(--text); ;margin-bottom: 10px;][/border]
  118.  
  119. [border=0; box-sizing: border-box; background: var(--gallery6); background-size: cover; background-position: center; width: 140px; height: 140px; z-index: 3; box-shadow: 5px 5px 0px var(--text); margin-bottom: 10px;][/border]
  120. [/border][/border][/border][/border][/border]
  121.  
  122. [border=0; position: absolute; box-sizing: border-box; background-position: right; background: var(--grid); background-size: 107%; background-position: center; top: 10px; left: 50px; width: 390px; height: 485px; z-index:2;][/border]
  123.  
  124. [comment]bottom two pics[/comment]
  125. [border=0; position: absolute; box-sizing: border-box; background: var(--bpic2); background-size: cover; background-position: center; top: 345px; left: 160px; width: 200px; height: 140px; z-index: 4; box-shadow: 5px 0px 0px black; filter: grayscale(0%);][/border]
  126.  
  127. [border=0; position: absolute; box-sizing: border-box; background: var(--bpic3); background-size: cover; background-position: top center; top: 400px; left: 80px; width: 110px; height: 90px; z-index: 4; box-shadow: 5px 5px 0px var(--mainp);filter: grayscale(0%);][/border]
  128.  
  129. [comment]tall right pic[/comment]
  130. [border=0; position: absolute; box-sizing: border-box; background: var(--bpic4); background-size: cover; background-position: center; top: 10px; left: 335px; width: 150px; height: 475px; z-index: 3; box-shadow: 5px 5px 0px var(--text);filter: grayscale(0%);][/border]
  131.  
  132. [/tab]
  133.  
  134. [tab=003]
  135. [border=0; position: absolute; top: 25px; left: 0px; height: 10px; width: 90%; padding: 0px; z-index: 2;][tabs]
  136.  
  137. [tab=persona0000000000001]
  138.  
  139. [comment]top title one[/comment]
  140. [border=0; position: absolute; top: -10px; left: 10px; height: 10px; width: 90%; padding: 0px; z-index: 5; box-sizing: border-box; padding-left: 10px; padding-right: 10px; line-height: 43px; font-size: 50px; color: var(--mainp); text-shadow: 3px 3px 0px black; pointer-events: none;][font=Cabin]persona.[/font][/border]
  141.  
  142. [comment]top title two[/comment]
  143. [border=0; position: absolute; top: -10px; left: 265px; height: 10px; width: 90%; padding: 0px; z-index: 5; box-sizing: border-box; padding-left: 10px; padding-right: 10px; line-height: 43px; font-size: 50px; color: black; text-shadow: 3px 3px 0px var(--mainp); pointer-events: none;][font=Cabin]history.[/font][/border]
  144.  
  145. [comment]bottom big pic[/comment]
  146. [border=0; position: absolute; box-sizing: border-box; background-position: right; background: var(--ppic1); background-size: cover; background-position: center; top: 275px; left: 60px; width: 440px; height: 200px; z-index: 4; border-left: 10px solid white; ][/border]
  147.  
  148. [border=0; position: absolute; box-sizing: border-box; background-position: right; background-image: var(--grid); background-color: var(--bg); background-size: cover; background-position: 107%; top: 0px; left: 10px; width: 480px; height: 280px; z-index:3; pointer-events: none;][/border]
  149.  
  150. [border=0; position: absolute; box-sizing: border-box; background: var(--text); background-size: cover; background-position: center; top: 25px; left: 20px; width: 240px; height: 200px; z-index: 4; filter: grayscale(0%); border-bottom: 5px solid var(--mainb);]
  151.  
  152. [comment]scroll[/comment]
  153. [border=0;position: absolute; box-sizing: border-box; left: 0px; width: 230px; height: 98%; top: 5px; display: flex; flex-direction: column; overflow: hidden; text-align: justify; padding: 0px;][border= 0; box-sizing: border-box; padding: 0; width: 200%; flex: 1; position: relative; overflow: auto; margin-top: 15px;][border=0; box-sizing: border-box; left-padding: 10px; padding-right: 10px; padding-top: 0px; width: 230px; font-size: 12px; color: black; line-height: 16px;][comment]
  154.  
  155. tags here
  156. [/comment][border=0; display: inline-block; padding: 0px; background: var(--mainb); border-radius: 3px; padding-left: 7px; padding-right: 7px; line-height: 14px; font-size: 13px;][font=Cabin]persona[/font][/border] Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Accumsan lacus vel facilisis volutpat est velit egestas dui id.
  157.  
  158. [border=0; display: inline-block; padding: 0px; background: var(--mainb); border-radius: 3px; padding-left: 7px; padding-right: 7px; line-height: 14px; font-size: 13px;][font=Cabin]positive traits[/font][/border] Consequat nisl vel pretium lectus quam id leo. Lacus vestibulum sed arcu non odio euismod lacinia at quis. Nullam ac tortor vitae purus faucibus ornare. Augue mauris augue neque gravida in fermentum et sollicitudin.
  159.  
  160. [border=0; display: inline-block; padding: 0px; background: var(--mainb); border-radius: 3px; padding-left: 7px; padding-right: 7px; line-height: 14px; font-size: 13px;][font=Cabin]negative traits[/font][/border] oop
  161.  
  162. [border=0; display: inline-block; padding: 0px; background: var(--mainb); border-radius: 3px; padding-left: 7px; padding-right: 7px; line-height: 14px; font-size: 13px;][font=Cabin]personality type[/font][/border]
  163. [/border][/border][/border][/border]
  164.  
  165. [border=0; position: absolute; box-sizing: border-box; background: #000; top: 130px; left: 245px; width: 24px; height: 150px; z-index: 4; ][/border]
  166.  
  167. [border=0; position: absolute; box-sizing: border-box; background: var(--text); background-size: cover; background-position: center; top: 135px; left: 250px; width: 240px; height: 150px; z-index: 4; filter: grayscale(0%); border-bottom: 5px solid var(--mainp);]
  168.  
  169. [comment]scroll[/comment]
  170. [border=0;position: absolute; box-sizing: border-box; left: 0px; width: 240px; height: 100%; top: 0px; display: flex; flex-direction: column; overflow: hidden; text-align: justify; padding: 0px;][border= 0; box-sizing: border-box; padding: 0; width: 200%; flex: 1; position: relative; overflow: auto; margin-top: 15px;][border=0; box-sizing: border-box; left-padding: 10px; padding-right: 10px; padding-top: 0px; width: 240px; font-size: 12px; color: black; line-height: 16px;][comment]
  171.  
  172. tags here
  173. [/comment][border=0; display: inline-block; padding: 0px; background: var(--mainb); border-radius: 3px; padding-left: 7px; padding-right: 7px; line-height: 14px; font-size: 13px;][font=Cabin]likes[/font][/border] oop
  174.  
  175. [border=0; display: inline-block; padding: 0px; background: var(--mainb); border-radius: 3px; padding-left: 7px; padding-right: 7px; line-height: 14px; font-size: 13px;][font=Cabin]dislikes[/font][/border] Nibh tellus molestie nunc non blandit. Enim tortor at auctor urna nunc id cursus metus. Tortor condimentum lacinia quis vel eros. Consequat semper viverra nam libero justo laoreet sit.
  176.  
  177. [border=0; display: inline-block; padding: 0px; background: var(--mainb); border-radius: 3px; padding-left: 7px; padding-right: 7px; line-height: 14px; font-size: 13px;][font=Cabin]fears[/font][/border] Non tellus orci ac auctor augue mauris augue. Eget nulla facilisi etiam dignissim diam. Aliquam sem fringilla ut morbi tincidunt augue interdum velit. Erat imperdiet sed euismod nisi porta.
  178.  
  179. [border=0; display: inline-block; padding: 0px; background: var(--mainb); border-radius: 3px; padding-left: 7px; padding-right: 7px; line-height: 14px; font-size: 13px;][font=Cabin]hobbies[/font][/border] Nulla aliquet porttitor lacus luctus accumsan tortor posuere ac. Semper viverra nam libero justo laoreet. A pellentesque sit amet porttitor eget dolor morbi. Egestas sed sed risus pretium. Sit amet cursus sit amet dictum sit. At varius vel pharetra vel turpis nunc eget lorem. Lacus vel facilisis volutpat est velit egestas dui id ornare. Pharetra sit amet aliquam id diam maecenas ultricies.[/border][/border][/border][/border]
  180.  
  181. [comment]little top pic[/comment]
  182. [border=0; position: absolute; box-sizing: border-box; background-position: right; background: var(--ppic2); background-size: cover; background-position: center; top: 25px; left: 270px; width: 210px; height: 115px; z-index: 4; box-shadow: 5px 0px 0px var(--mainp); pointer-events: none;][/border]
  183. [/tab]
  184.  
  185. [tab=history0000000000002]
  186.  
  187. [comment]top title 1[/comment]
  188. [border=0; position: absolute; top: -10px; left: 10px; height: 10px; width: 90%; padding: 0px; z-index: 5; box-sizing: border-box; padding-left: 10px; padding-right: 10px; line-height: 43px; font-size: 50px; color: black; text-shadow: 3px 3px 0px var(--mainb); pointer-events: none;][font=Cabin]persona.[/font][/border]
  189.  
  190. [comment]top title 2[/comment]
  191. [border=0; position: absolute; top: -10px; left: 265px; height: 10px; width: 90%; padding: 0px; z-index: 5; box-sizing: border-box; padding-left: 10px; padding-right: 10px; line-height: 43px; font-size: 50px; color: var(--mainb); text-shadow: 3px 3px 0px black; pointer-events: none;][font=Cabin]history.[/font][/border]
  192.  
  193. [border=0; position: absolute; box-sizing: border-box; background-position: 107%; background-image: var(--grid); background-color: var(--bg); background-size: cover; background-position: center; top: 0px; left: 10px; width: 480px; height: 280px; z-index:3; pointer-events: none;][/border]
  194.  
  195. [border=0; position: absolute; box-sizing: border-box; background: var(--text); background-size: cover; background-position: center; top: 25px; left: 20px; width: 440px; height: 200px; z-index: 4; filter: grayscale(0%);]
  196.  
  197. [comment]scroll[/comment]
  198. [border=0;position: absolute; box-sizing: border-box; left: 0px; width: 440px; height: 98%; top: 5px; display: flex; flex-direction: column; overflow: hidden; text-align: justify; padding: 0px;][border= 0; box-sizing: border-box; padding: 0; width: 200%; flex: 1; position: relative; overflow: auto; margin-top: 15px;][border=0; box-sizing: border-box; left-padding: 10px; padding-right: 10px; padding-top: 0px; width: 440px; font-size: 12px; color: black; line-height: 16px;][comment]
  199.  
  200. tag and text
  201. [/comment]
  202. [border=0; display: inline-block; padding: 0px; background: var(--mainp); border-radius: 3px; padding-left: 7px; padding-right: 7px; line-height: 14px; font-size: 13px;][font=Cabin]backstory[/font][/border] Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Accumsan lacus vel facilisis volutpat est velit egestas dui id. Consequat nisl vel pretium lectus quam id leo. Lacus vestibulum sed arcu non odio euismod lacinia at quis. Nullam ac tortor vitae purus faucibus ornare. Augue mauris augue neque gravida in fermentum et sollicitudin.Consequat nisl vel pretium lectus quam id leo. Lacus vestibulum sed arcu non odio euismod lacinia at quis. Nullam ac tortor vitae purus faucibus ornare. Augue mauris augue neque gravida in fermentum et sollicitudin.Consequat nisl vel pretium lectus quam id leo. Lacus vestibulum sed arcu non odio euismod lacinia at quis. Nullam ac tortor vitae purus faucibus ornare. Augue mauris augue neque gravida in fermentum et sollicitudin. Consequat nisl vel pretium lectus quam id leo. Lacus vestibulum sed arcu non odio euismod lacinia at quis. Nullam ac tortor vitae purus faucibus ornare. Augue mauris augue neque gravida in fermentum et sollicitudin. Consequat nisl vel pretium lectus quam id leo. Lacus vestibulum sed arcu non odio euismod lacinia at quis. Nullam ac tortor vitae purus faucibus ornare. Augue mauris augue neque gravida in fermentum et sollicitudin.[/border][/border][/border][/border]
  203.  
  204. [comment]bottom pic[/comment]
  205. [border=0; position: absolute; box-sizing: border-box; background-position: right; background: var(--hpic); background-size: cover; background-position: 50% 50%; top: 275px; left: 60px; width: 440px; height: 200px; z-index: 4; border-left: 10px solid white; ][/border]
  206.  
  207. [border=0; position: absolute; box-sizing: border-box; background-position: right; background: var(--mainp); opacity: 20%; top: 275px; left: 60px; width: 440px; height: 200px; z-index: 4; border-left: 10px solid white; ][/border][border=0; position: absolute; box-sizing: border-box; background: var(--mainp); top: 235px; left: 50px; height: 15px; width: 500px; z-index: 4; box-shadow: 0px 5px 0px var(--text);][/border]
  208. [/tab][/tabs][/border]
  209. [/tab]
  210.  
  211. [tab=004]
  212.  
  213. [comment]title[/comment]
  214. [border=0; position: absolute; box-sizing: border-box; padding-left: 10px; padding-right: 10px; line-height: 43px; font-size: 40px; color: var(--mainp); top: 395px; left: 70px; background: var(--text); box-shadow: 5px 5px var(--mainp);z-index: 3;][font=Cabin]- relationships[/font][/border]
  215.  
  216. [comment]side pic[/comment]
  217. [border=0; position: absolute; box-sizing: border-box; background-position: right; background: var(--rpic1); background-size: cover; background-position: 50% 50%; top: 15px; left: 15px; width: 150px; height: 325px; z-index: 4; box-shadow: 5px 5px 0px var(--text); filter: grayscale(70%);][/border]
  218.  
  219. [border=0; position: absolute; box-sizing: border-box; background-position: right; background: var(--mainb); opacity: 20%; top: 15px; left: 15px; width: 150px; height: 325px; z-index: 4; box-shadow: 5px 5px 0px var(--text);][/border]
  220.  
  221. [comment]bottom pic[/comment]
  222. [border=0; position: absolute; box-sizing: border-box; background-position: right; background: var(--rpic2); background-size: cover; background-position: top center; top: 350px; left: 350px; width: 140px; height: 140px; z-index: 4; filter: grayscale(80%);][/border]
  223.  
  224. [border=0; position: absolute; box-sizing: border-box; background-position: right; background: var(--mainb); opacity: 20%;top: 350px; left: 350px; width: 140px; height: 140px; z-index: 4;][/border]
  225.  
  226. [comment]scroll[/comment]
  227. [border=0; position: absolute; box-sizing: border-box; top: 15px; left: 185px; height: 330px; width: 330px; z-index: 3; z-index: 3; display: flex; flex-direction: column; overflow: hidden; text-align: justify; padding: 0px;][border=0; box-sizing: border-box; padding: 0; width: 200%; flex: 1; position: relative; overflow: auto;][border=0; box-sizing: border-box; left-padding: 0px; padding-right: 0px; width: 330px; font-size: 12px; color: black; line-height: 16px; height: 100%; display: flex; flex-direction: column; flex-wrap: nowrap; justify-items: center; align-items: flex-start;][font= Roboto][comment]
  228.  
  229. first relationship box--change the background: url(); for the fc, you can also copy one and paste it in in order to add more boxes.
  230.  
  231. [/comment][border=0; width: 100%; background: #fff; box-shadow: 5px 5px 0px var(--mainp); display: flex; flex-direction: row; flex-wrap: wrap; justify-items: center; justify-content: space-between; align-items: flex-start;][border=0;width: 100px; height: 100px; background: url(https://user-images.githubusercontent.com/194400/49531010-48dad180-f8b1-11e8-8d89-1e61320e1d82.png); background-size: cover; background-position: 50% 50%; margin-bottom: 10px;][/border][border=0; flex: 1;padding: 0px; padding-top: 25px; padding-left: 10px; margin-bottom: 20px; font-size: 15px; line-height: 19px;][font= Cabin]name
  232. (age)
  233. relationship [/font][/border]
  234. [border=0; width:100%; padding: 0px; padding-left: 5px;]tbd[/border][/border][comment]
  235. end of first relationship box
  236.  
  237. [/comment]
  238. [border=0; width: 100%; background: #fff; box-shadow: 5px 5px 0px var(--mainp); display: flex; flex-direction: row; flex-wrap: wrap; justify-items: center; justify-content: space-between; align-items: flex-start;][border=0;width: 100px; height: 100px; background: url(https://user-images.githubusercontent.com/194400/49531010-48dad180-f8b1-11e8-8d89-1e61320e1d82.png); background-size: cover; background-position: 50% 50%; margin-bottom: 10px;][/border][border=0; flex: 1;padding: 0px; padding-top: 25px; padding-left: 10px; margin-bottom: 20px; font-size: 15px; line-height: 19px;][font= Cabin]name
  239. (age)
  240. relationship [/font][/border]
  241. [border=0; width:100%; padding: 0px; padding-left: 5px;]tbd[/border][/border]
  242. [border=0; width: 100%; background: #fff; box-shadow: 5px 5px 0px var(--mainp); display: flex; flex-direction: row; flex-wrap: wrap; justify-items: center; justify-content: space-between; align-items: flex-start;][border=0;width: 100px; height: 100px; background: url(https://user-images.githubusercontent.com/194400/49531010-48dad180-f8b1-11e8-8d89-1e61320e1d82.png); background-size: cover; background-position: 50% 50%; margin-bottom: 10px;][/border][border=0; flex: 1;padding: 0px; padding-top: 25px; padding-left: 10px; margin-bottom: 20px; font-size: 15px; line-height: 19px;][font= Cabin]name
  243. (age)
  244. relationship [/font][/border]
  245. [border=0; width:100%; padding: 0px; padding-left: 5px;]tbd[/border][/border]
  246. [border=0; width: 100%; background: #fff; box-shadow: 5px 5px 0px var(--mainp); display: flex; flex-direction: row; flex-wrap: wrap; justify-items: center; justify-content: space-between; align-items: flex-start;][border=0;width: 100px; height: 100px; background: url(https://user-images.githubusercontent.com/194400/49531010-48dad180-f8b1-11e8-8d89-1e61320e1d82.png); background-size: cover; background-position: 50% 50%; margin-bottom: 10px;][/border][border=0; flex: 1;padding: 0px; padding-top: 25px; padding-left: 10px; margin-bottom: 20px; font-size: 15px; line-height: 19px;][font= Cabin]name
  247. (age)
  248. relationship [/font][/border]
  249. [border=0; width:100%; padding: 0px; padding-left: 5px;]tbd[/border][/border]
  250. [border=0; width: 100%; background: #fff; box-shadow: 5px 5px 0px var(--mainp); display: flex; flex-direction: row; flex-wrap: wrap; justify-items: center; justify-content: space-between; align-items: flex-start;][border=0;width: 100px; height: 100px; background: url(https://user-images.githubusercontent.com/194400/49531010-48dad180-f8b1-11e8-8d89-1e61320e1d82.png); background-size: cover; background-position: 50% 50%; margin-bottom: 10px;][/border][border=0; flex: 1;padding: 0px; padding-top: 25px; padding-left: 10px; margin-bottom: 20px; font-size: 15px; line-height: 19px;][font= Cabin]name
  251. (age)
  252. relationship [/font][/border]
  253. [border=0; width:100%; padding: 0px; padding-left: 5px;]tbd[/border][/border]
  254. [border=0; width: 100%; background: #fff; box-shadow: 5px 5px 0px var(--mainp); display: flex; flex-direction: row; flex-wrap: wrap; justify-items: center; justify-content: space-between; align-items: flex-start;][border=0;width: 100px; height: 100px; background: url(https://user-images.githubusercontent.com/194400/49531010-48dad180-f8b1-11e8-8d89-1e61320e1d82.png); background-size: cover; background-position: 50% 50%; margin-bottom: 10px;][/border][border=0; flex: 1;padding: 0px; padding-top: 25px; padding-left: 10px; margin-bottom: 20px; font-size: 15px; line-height: 19px;][font= Cabin]name
  255. (age)
  256. relationship [/font][/border]
  257. [border=0; width:100%; padding: 0px; padding-left: 5px;]tbd[/border][/border]
  258. [border=0; width: 100%; background: #fff; box-shadow: 5px 5px 0px var(--mainp); display: flex; flex-direction: row; flex-wrap: wrap; justify-items: center; justify-content: space-between; align-items: flex-start;][border=0;width: 100px; height: 100px; background: url(https://user-images.githubusercontent.com/194400/49531010-48dad180-f8b1-11e8-8d89-1e61320e1d82.png); background-size: cover; background-position: 50% 50%; margin-bottom: 10px;][/border][border=0; flex: 1;padding: 0px; padding-top: 25px; padding-left: 10px; margin-bottom: 20px; font-size: 15px; line-height: 19px;][font= Cabin]name
  259. (age)
  260. relationship [/font][/border]
  261. [border=0; width:100%; padding: 0px; padding-left: 5px;]tbd[/border][/border]
  262. [/font][/border][/border][/border]
  263. [border=0; position: absolute; box-sizing: border-box; background-position: right; background: var(--grid); background-size: 102%; background-position: center; top: 100px; left: 80px; width: 400px; height: 300px; z-index:2; pointer-events: none;][/border]
  264. [/tab]
  265. [/tabs][/border]
  266.  
  267. [/border][/border][/border][comment]
  268.  
  269. credit, do not remove please c:
  270. [/comment][border=0; position: relative; margin: auto; text-align: center; font-size: 10px; width: 500px; line-height: 12px;]coded by hanthesunbeam[/border]
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!