deer_of_9_colours

request: garden of words [cs]

Apr 27th, 2021 (edited)
96
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 40.91 KB | None | 0 0
  1. [border=0px; position: relative; margin: auto; width: 600px; height: 500px; background: var(--bgcolor); overflow: hidden; padding: 0px; border-radius: 10px;
  2. --bgcolor: #BBDFC5;
  3. --visagetext: #85E363;
  4. --nametag: #74BE89;
  5. --nameleaf: #C8E5CF;
  6. --basicsbox: #94CC7B;
  7. --lines: #628B48;
  8. --plantpot: #713355;
  9. --flower: #E16684;
  10. --cloud: #609DA9;
  11. --preferencetitle: #6AA267;
  12. --statbarpercent: #07393C;
  13. --preferencebox: #40653E;
  14. --preferenceicon: #CFC7D1;
  15. --flowerbush1: #B5CA8D;
  16. --flowerbush2: #8BB174;
  17. --flowers: #C1334D;
  18. --timelinebox: #90EEF3;
  19. --backstorybox: #4F695D;
  20. --relationsbox: #A5DB94;
  21. --relationstext: #AFE9E0;
  22. --relationslines: #101D42;
  23. --tab3bg: #CADBC0;
  24. --tab4bg: #C0DC93;
  25. --tab4bgtop: #9CC856;
  26. --musicplayer: #DCEAD7;
  27. --songtitle: #8BA02C;
  28. --namesidepic: url(https://64.media.tumblr.com/25da46a335e8f3f2fe3353fb2529db26/65bd96ca63a3773a-1d/s500x750/ad0e52de3139942cb7125d95f6d122ffcd8f4507.png);
  29. --visagepic: url(https://64.media.tumblr.com/633cbad46d3626078a3b696d2c3603e4/dc2e7a095f069de4-29/s640x960/7d9cca4ee6a7c5eed1294dcdc6565918de0ce4f1.jpg);
  30. --basicspic: url(https://64.media.tumblr.com/07cef9969b56f796774fdda8a4deacea/dc2e7a095f069de4-7f/s400x600/a750387c92dd31843e52082052cce34fe291614a.jpg);][comment] THIS IS WHERE THE CODE FOR EACH TAB STARTS + SIDE PIC + NAME[/comment]
  31. [border=0px; background: var(--namesidepic); background-position: 50% 50%; background-size: cover; border-radius: 8px; height: 220px; width: 165px; margin-left: 10px; position: relative; top: -6px; margin-left: 15px; z-index: 1; border: 5px solid var(--lines)][/border][border=0px; background: transparent; width: 170px; height: 100px; position: relative; left: 35px; top: 20px][border=0px; position: relative; left: -2px; margin: auto; margin-top: 15px; display: flex; flex-flow: row wrap; align-items: center; justify-content: space-around; line-height: 30px][tabs]
  32.  
  33. [tab=1][border=0px; position: absolute; left: 157px; top: -260px; width: 80px; height: 1px; border-top: 5px solid var(--lines)][border=0px; border-radius: 50%; height: 35px; width: 35px; background: var(--nametag); position: relative; top: -40px; left: 50px; display: flex; flex-flow: row wrap; align-items: center; justify-content: space-around; color: var(--nameleaf); font-size: 28px; z-index: 1][fa]fab fa-pagelines[/fa][/border][/border][border=0px; border-radius: 10px; padding: 18px; width: fit-content; height: fit-content; border-top: 10px solid var(--nametag); background: var(--nameleaf); display: flex; flex-flow: row wrap; align-items: center; justify-content: space-around; position: absolute; top: -275px; left: 250px; color: black; font-size: 25px; font-weight: bold; text-transform: uppercase; text-align: center][FONT=Karla][/FONT]Alexandra Huntington Elbereth[/border][comment] CODE FOR THE SCROLL BOXES [/comment]
  34. [border=0px; width: 310px; height: 270px; position: absolute; top: -130px; left: 195px; border-radius: 10px; z-index: 1; border: 5px solid var(--lines)][border=0px; width: 110px; height: 135px; background: var(--visagepic); background-size: cover; background-position: 50% 50%; border-radius: 4px 0px 0px 0px; position: relative; top: -10px; left: -10px][/border][border=0px; width: 180px; height: 135px; background: var(--nametag); position: relative; top: -165px; left: 120px; overflow: hidden][border=0px; position: relative; height: 98%; width: 100%; overflow-X: hidden; overflow-Y: scroll; padding-right: 80px;][border=0px; font-size: 25px; color: var(--visagetext); text-shadow: 1.4px 1.4px var(--lines); margin-top: -20px; width: fit-content; height: 12px; border-bottom: 7px solid var(--bgcolor); margin-left: auto; margin-top: -25px][FONT=Beth Ellen]Visage[/FONT][/border][border=0px; text-align: left; font-size: 12px; line-height: 120%; color: black][FONT=Karla]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer interdum ipsum at rhoncus suscipit. Aenean placerat viverra pulvinar. Donec convallis, elit et consequat lacinia, libero augue rutrum ipsum, nec lobortis magna magna at felis. Maecenas consequat nulla non dolor lacinia iaculis. Donec porttitor nulla tortor, sed convallis orci ornare eu. Donec et elementum diam. Donec id nibh commodo, semper ex id, tempus diam. Suspendisse potenti. Suspendisse potenti. Mauris cursus ligula fermentum odio egestas facilisis. Aenean a vehicula lectus, nec dictum augue. Cras vulputate mi finibus egestas rutrum.[/FONT][/border][/border][/border][border=0px; width: 110px; height: 115px; background: var(--basicspic); background-size: cover; background-position: 50% 50%; position: relative; top: -170px; left: 10px; margin-left: auto; border-top: 5px solid var(--lines)][/border][border=0px; width: 180px; height: 115px; background: var(--basicsbox); position: relative; top: -310px; right: 10px; margin-right: auto; overflow: hidden; border-top: 5px solid var(--lines)][border=0px; position: relative; height: 98%; width: 100%; overflow-X: hidden; overflow-Y: scroll; padding-right: 80px;][border=0px; font-size: 25px; color: var(--visagetext); text-shadow: 1.4px 1.4px var(--lines); margin-top: -20px; width: fit-content; height: 12px; border-bottom: 7px solid var(--bgcolor); margin-right: auto; margin-top: -25px; position: relative; left: -5px][FONT=Beth Ellen]Basics[/FONT][/border][border=0px; text-align: right; font-size: 12px; line-height: 120%; color: black][FONT=Karla]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer interdum ipsum at rhoncus suscipit. Aenean placerat viverra pulvinar. Donec convallis, elit et consequat lacinia, libero augue rutrum ipsum, nec lobortis magna magna at felis. Maecenas consequat nulla non dolor lacinia iaculis. Donec porttitor nulla tortor, sed convallis orci ornare eu. Donec et elementum diam. Donec id nibh commodo, semper ex id, tempus diam. Suspendisse potenti. Suspendisse potenti. Mauris cursus ligula fermentum odio egestas facilisis. Aenean a vehicula lectus, nec dictum augue. Cras vulputate mi finibus egestas rutrum.[/FONT][/border][/border][/border][/border][/tab]
  35.  
  36. [comment] CODE FOR VICES + VIRTUES [/comment]
  37. [tab=2][border=0px; position: absolute; top: -280px; left: 185px; width: 320px; height: 410px; border: 5px solid var(--lines); background: var(--nameleaf); z-index: 1][border=0px; clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%); width: 64px; height: 30px; background: var(--plantpot); transform: rotate(-180deg); margin-top: 360px; margin-left: auto; position: relative; left: -25; z-index: 2; display: flex; flex-flow: row wrap; justify-content: space-around; align-items: center; font-size: 11px; color: white][border=0px; height: fit-content: width: fit-content; transform: rotate(-180deg)]click me![/border][/border][border=0px; width: 1px; height: 1px; display: flex; align-items: center; justify-content: flex-end; margin-top: -90px; margin-left: auto; position: relative; left: 5px; line-height: 0px][tabs]
  38.  
  39. [tab=s][border=0px; width: 318px; height: 265px; background: var(--nametag); position: absolute; top: -330px; left: -314px][border=0px; height: calc(48%); width: calc(101%); background: var(--basicsbox); margin-left: -10px; margin-top: -10px; border-bottom: 10px solid white][border=0px; width: 128px; height: 30px; background: var(--lines); transform: rotate(-90deg); margin-top: 38px; margin-left: -60px; display: flex; align-items: center; justify-content: space-around; font-size: 25px; color: white; text-transform: uppercase; font-weight: bold][FONT=Karla]Virtues[/FONT][/border][border=0px; width: 270px; height: 128px; margin-left: auto; position: relative; left: 10px; top: -100px; overflow: hidden; line-height: 110%][border=0px; overflow-X: hidden; overflow-Y: scroll; width: 98%; height: 98%; text-align: justify; font-size: 12px; color: black; padding-right: 80px][FONT=Karla]Donec convallis, elit et consequat lacinia, libero augue rutrum ipsum, nec lobortis magna magna at felis. Maecenas consequat nulla non dolor lacinia iaculis. Donec porttitor nulla tortor, sed convallis orci ornare eu. Donec et elementum diam. Donec id nibh commodo, semper ex id, tempus diam. Suspendisse potenti. Suspendisse potenti. Mauris cursus ligula fermentum odio egestas facilisis. Aenean a vehicula lectus, nec dictum augue. Cras vulputate mi finibus egestas rutrum
  40. [/FONT][/border][/border]
  41. [border=0px; width: 118px; height: 30px; transform: rotate(-270deg); background: var(--lines); display: flex; align-items: center; justify-content: space-around; font-size: 25px; text-transform: uppercase; font-weight: bold; color: white; margin-left: 240px; margin-top: -55px][FONT=Karla]Vices[/FONT][/border][border=0px; width: 270px; height: 108px; margin-left: auto; position: relative; left: -38px; top: -90px; overflow: hidden; line-height: 110%][border=0px; overflow-X: hidden; overflow-Y: scroll; width: 98%; height: 94%; text-align: justify; font-size: 12px; color: black; padding-right: 80px][FONT=Karla]Donec convallis, elit et consequat lacinia, libero augue rutrum ipsum, nec lobortis magna magna at felis. Maecenas consequat nulla non dolor lacinia iaculis. Donec porttitor nulla tortor, sed convallis orci ornare eu. Donec et elementum diam. Donec id nibh commodo, semper ex id, tempus diam. Suspendisse potenti. Suspendisse potenti. Mauris cursus ligula fermentum odio egestas facilisis. Aenean a vehicula lectus, nec dictum augue. Cras vulputate mi finibus egestas rutrum Donec porttitor nulla tortor, sed convallis orci ornare eu. Donec et elementum diam. Donec id nibh commodo, semper ex id, tempus diam. Suspendisse potenti. Suspendisse potenti. Mauris cursus ligula fermentum odio egestas facilisis. Aenean a vehicula lectus, nec dictum augue. Cras vulputate mi finibus egestas rutrumDonec porttitor nulla tortor, sed convallis orci ornare eu. Donec et elementum diam. Donec id nibh commodo, semper ex id, tempus diam. Suspendisse potenti. Suspendisse potenti. Mauris cursus ligula fermentum odio egestas facilisis. Aenean a vehicula lectus, nec dictum augue. Cras vulputate mi finibus egestas rutrumDonec porttitor nulla tortor, sed convallis orci ornare eu. Donec et elementum diam. Donec id nibh commodo, semper ex id, tempus diam. Suspendisse potenti. Suspendisse potenti. Mauris cursus ligula fermentum odio egestas facilisis. Aenean a vehicula lectus, nec dictum augue. Cras vulputate mi finibus egestas rutrum[/FONT][/border][/border][/border]
  42. [border=0px; height: 100px; width: 200px; overflow: hidden; margin-top: 140px; margin-left: 15px; text-transform: lowercase; color: white; text-shadow: 1.8px 1.8px red][border=0px; overflow-X: hidden; overflow-Y: scroll; height: 100%; width: 98%; padding-right: 80px; line-height: 110%; margin-top: -10px; margin-left: -10px; display: flex; flex-flow: row wrap; align-items: center; justify-content: space-evenly][border=0px; padding: 5px; display: inline-block; background: pink]intp[/border]
  43.  
  44. [border=0px; padding: 5px; display: inline-block; background: pink]type 8[/border]
  45.  
  46. [border=0px; padding: 5px; display: inline-block; background: pink; color: white]aquarius[/border]
  47.  
  48. [border=0px; padding: 5px; display: inline-block; background: pink; color: white]virgo rising[/border]
  49.  
  50. [border=0px; padding: 5px; display: inline-block; background: pink; color: white]scorpio moon[/border]
  51.  
  52. [border=0px; padding: 5px; display: inline-block; background: pink; color: white]chaotic neutral[/border]
  53.  
  54. [border=0px; padding: 5px; display: inline-block; background: pink; color: white]pastel[/border]
  55.  
  56. [border=0px; padding: 5px; display: inline-block; background: pink; color: white]slytherin[/border]
  57.  
  58. [border=0px; padding: 5px; display: inline-block; background: pink; color: white]water bender[/border]
  59.  
  60. [border=0px; padding: 5px; display: inline-block; background: pink; color: white]white swan[/border][/border][/border][/border][/tab]
  61. [tab=p][border=0px; width: 317px; height: 200px; position: absolute; top: -330px; left: -312px; display: flex; flex-flow: row wrap; align-items: center; justify-content: space-evenly]
  62. [comment] STAT BARS: TO CHANGE AMOUNT OF COLOR, CHANGE PERCENTAGES [/comment]
  63. [border=0px; margin-left: -5px; border-radius: 30px; width: 120px; height: 3px; background: white][border=0px; position: relative; margin-top: -30px; margin-left: -10px; font-size: 15px; color: var(--statbarpercent); font-weight: bold][FONT=Karla]intelligence[/FONT][/border][border=0px; border-radius: 30px; height: 3px; width: 50%; margin-left: -10px; margin-top: -1px; background: var(--statbarpercent)][/border][/border]
  64.  
  65. [border=0px; border-radius: 30px; width: 120px; height: 3px; background: white][border=0px; position: relative; margin-top: -30px; margin-left: -10px; font-size: 15px; color: var(--statbarpercent); font-weight: bold][FONT=Karla]impulsivity[/FONT][/border][border=0px; border-radius: 30px; height: 3px; width: 80%; margin-left: -10px; margin-top: -1px; background: var(--statbarpercent)][/border][/border]
  66.  
  67. [border=0px; border-radius: 30px; width: 120px; height: 3px; background: white][border=0px; position: relative; margin-top: -30px; margin-left: -10px; font-size: 15px; color: var(--statbarpercent); font-weight: bold][FONT=Karla]confidence[/FONT][/border][border=0px; border-radius: 30px; height: 3px; width: 25%; margin-left: -10px; margin-top: -1px; background: var(--statbarpercent)][/border][/border]
  68.  
  69. [border=0px; border-radius: 30px; width: 120px; height: 3px; background: white][border=0px; position: relative; margin-top: -30px; margin-left: -10px; font-size: 15px; color: var(--statbarpercent); font-weight: bold][FONT=Karla]charisma[/FONT][/border][border=0px; border-radius: 30px; height: 3px; width: 67%; margin-left: -10px; margin-top: -1px; background: var(--statbarpercent)][/border][/border]
  70.  
  71. [border=0px; border-radius: 30px; width: 120px; height: 3px; background: white][border=0px; position: relative; margin-top: -30px; margin-left: -10px; font-size: 15px; color: var(--statbarpercent); font-weight: bold][FONT=Karla]generosity[/FONT][/border][border=0px; border-radius: 30px; height: 3px; width: 75%; margin-left: -10px; margin-top: -1px; background: var(--statbarpercent)][/border][/border]
  72.  
  73. [border=0px; border-radius: 30px; width: 120px; height: 3px; background: white][border=0px; position: relative; margin-top: -30px; margin-left: -10px; font-size: 15px; color: var(--statbarpercent); font-weight: bold][FONT=Karla]optimism[/FONT][/border][border=0px; border-radius: 30px; height: 3px; width: 90%; margin-left: -10px; margin-top: -1px; background: var(--statbarpercent)][/border][/border][/border][comment] CODE FOR LIKES/DISLIKES BEGINS HERE [/comment]
  74.  
  75. [border=0px; width: 195px; height: 160px; border-radius: 5px; background: var(--preferencebox); position: absolute; top: -100px; left: -293px][border=0px; color: white; font-size: 15px; margin: auto; position: relative; top: -25px; background: var(--preferencetitle); border-radius: 10px; font-weight: bold; text-transform: uppercase; width: fit-content; height: 8px; display: flex; align-items: center][FONT=Poppins]likes / dislikes / fears [/FONT][/border][border=0px; width: 99%; height: 87%; margin-top: -18px; margin-left: -10px; overflow: hidden][border=0px; margin-top: -10px; overflow-X: hidden; overflow-Y: scroll; height: 98%; width: 98%; padding-right: 80px; display: flex; flex-flow: row wrap][border=0px; width: 200px; height: fit-content; position: relative; left: 1px; margin-top: -10px; display: flex; flex-flow: no wrap; line-height: 100%][border=0px; margin-right: auto; font-size: 30px; color: var(--preferenceicon)][fa] fa-music[/fa][/border][border=0px; margin-left: auto; font-size: 13px; color: white; text-align: right][FONT=Karla][B] FAVOURITE ARTIST[/B]
  76. The Script[/FONT][/border][/border]
  77.  
  78. [border=0px; width: 200px; height: fit-content; position: relative; left: 1px; margin-top: -10px; display: flex; flex-flow: no wrap; line-height: 100%][border=0px; margin-right: auto; font-size: 30px; color: var(--preferenceicon)][fa] fas fa-utensils[/fa][/border][border=0px; margin-left: auto; font-size: 13px; color: white; text-align: right][FONT=Karla][B] FAVOURITE FOOD[/B]
  79. Spaghetti[/FONT][/border][/border]
  80.  
  81. [border=0px; width: 200px; height: fit-content; position: relative; left: 1px; margin-top: -10px; display: flex; flex-flow: no wrap; line-height: 100%][border=0px; margin-right: auto; font-size: 30px; color: var(--preferenceicon)][fa] fas fa-mug[/fa][/border][border=0px; margin-left: auto; font-size: 13px; color: white; text-align: right][FONT=Karla][B] FAVOURITE DRINK[/B]
  82. Green Tea[/FONT][/border][/border]
  83.  
  84. [border=0px; width: 200px; height: fit-content; position: relative; left: 1px; margin-top: -10px; display: flex; flex-flow: no wrap; line-height: 100%][border=0px; margin-right: auto; font-size: 30px; color: var(--preferenceicon)][fa] fas fa-compass[/fa][/border][border=0px; margin-left: auto; font-size: 13px; color: white; text-align: right][FONT=Karla][B] FAVOURITE PLACE[/B]
  85. Hangzhou, China[/FONT][/border][/border]
  86.  
  87. [border=0px; width: 200px; height: fit-content; position: relative; left: 1px; margin-top: -10px; display: flex; flex-flow: no wrap; line-height: 100%][border=0px; margin-right: auto; font-size: 30px; color: var(--preferenceicon)][fa] fas fa-film[/fa][/border][border=0px; margin-left: auto; font-size: 13px; color: white; text-align: right][FONT=Karla][B] FAVOURITE FILM[/B]
  88. Raise the Red Lantern[/FONT][/border][/border]
  89.  
  90. [border=0px; width: 200px; height: fit-content; position: relative; left: 1px; margin-top: -10px; display: flex; flex-flow: no wrap; line-height: 100%][border=0px; margin-right: auto; font-size: 30px; color: var(--preferenceicon)][fa] fa-music[/fa][/border][border=0px; margin-left: auto; font-size: 13px; color: white; text-align: right][FONT=Karla][B] FAVOURITE ARTIST[/B]
  91. The Script[/FONT][/border][/border]
  92.  
  93. [border=0px; width: 200px; height: fit-content; position: relative; left: 1px; margin-top: -10px; display: flex; flex-flow: no wrap; line-height: 100%][border=0px; margin-right: auto; font-size: 30px; color: var(--preferenceicon)][fa] fas fa-clouds[/fa][/border][border=0px; margin-left: auto; font-size: 13px; color: white; text-align: right][FONT=Karla][B] FAVOURITE WEATHER[/B]
  94. Stormy[/FONT][/border][/border]
  95.  
  96. [border=0px; width: 200px; height: fit-content; position: relative; left: 1px; margin-top: -10px; display: flex; flex-flow: no wrap; line-height: 100%][border=0px; margin-right: auto; font-size: 30px; color: var(--preferenceicon)][fa] fas fa-palette[/fa][/border][border=0px; margin-left: auto; font-size: 13px; color: white; text-align: right][FONT=Karla][B] FAVOURITE COLOUR[/B]
  97. Turquoise[/FONT][/border][/border]
  98.  
  99. [border=0px; width: 200px; height: fit-content; position: relative; left: 1px; margin-top: -10px; display: flex; flex-flow: no wrap; line-height: 100%][border=0px; margin-right: auto; font-size: 30px; color: var(--preferenceicon)][fa] fad fa-books[/fa][/border][border=0px; margin-left: auto; font-size: 13px; color: white; text-align: right][FONT=Karla][B] FAVOURITE BOOK [/B]
  100. Everything I Never Told You[/FONT][/border][/border]
  101.  
  102. [border=0px; width: 200px; height: fit-content; position: relative; left: 1px; margin-top: -10px; display: flex; flex-flow: no wrap; line-height: 100%;][border=0px; margin-right: auto; font-size: 30px; color: var(--preferenceicon)][fa] fas fa-spider[/fa][/border][border=0px; margin-left: auto; font-size: 13px; color: white; text-align: right][FONT=Karla][B] FEARS[/B]
  103. Spiders[/FONT][/border][/border]
  104.  
  105. [border=0px; width: 200px; height: fit-content; position: relative; left: 1px; margin-top: -10px; display: flex; flex-flow: no wrap; line-height: 100%][border=0px; margin-right: auto; font-size: 30px; color: var(--preferenceicon)][fa] fas fa-ghost[/fa][/border][border=0px; margin-left: auto; font-size: 13px; color: white; text-align: right][FONT=Karla][B] FEARS[/B]
  106. Ghosts[/FONT][/border][/border]
  107.  
  108. [/border][/border][/border]
  109. [/tab][/tabs][/border] [comment] FLOWERPOT + CLOUD TABS [/comment]
  110. [border=0px; width: 60px; height: 60px; position: relative; top: -95px; left: -5px; margin-left: auto; pointer-events: none; background: var(--nameleaf)][border=0px; width: 95%; height: 50%; pointer-events: none; position: relative; top: 20px; left: 0px; z-index: 1; color: var(--flower); font-size: 45px][fa] fas fa-flower-daffodil [/fa][/border][border=0px; border-radius: 50%; width: 45%; height: 35%; pointer-events: none; position: relative; top: -65px; left: 12px; color: var(--cloud); font-size: 25px][fa] fas fa-cloud-rain [/fa][/border][/border]
  111. [/border][/tab]
  112.  
  113. [tab=3][border=0px; position: absolute; top: -280px; left: 185px; width: 320px; height: 410px; border: 5px solid var(--lines); background: var(--tab3bg); z-index: 1; overflow: hidden][border=0px; width: 60px; height: 40px; margin-left: auto; position: relative; top: -15px; left: -15px; display: flex; flex-flow: row wrap; align-items: center; justify-content: center; line-height: 0px][tabs]
  114. [tab=aaaaa][border=0px; width: 318px; height: 408px; position: absolute; top: 6px; left: -234px; pointer-events: none][border=0px; width: fit-content; height: 2px; font-size: 30px; font-weight: bold; color: black; z-index: 1; pointer-events: none; border-bottom: 10px solid gray][FONT=Beth Ellen]History[/FONT][/border][border=0px; border-radius: 10px; width: 160px; height: 120px; background: var(--timelinebox); position: relative; top: 20px; overflow: hidden][border=0px; overflow-X: hidden; overflow-Y: scroll; width: 97%; height: 96%; text-align: left; line-height: 105%; color: black; padding-right: 80px; pointer-events: auto][FONT=Karla][SIZE=15px][B]ACHIEVEMENTS[/B] [/SIZE]
  115. [SIZE=12px]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ex odio, tempor in dictum quis, luctus vestibulum arcu. Donec venenatis est justo, ac finibus est luctus sed. Vivamus eu sapien sapien. Quisque ultrices ullamcorper urna ac scelerisque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed a elit bibendum, maximus elit at, condimentum arcu.[/SIZE][/FONT][/border][/border][border=0px; border-radius: 50%; width: 40px; height: 40px; background: pink; margin-left: auto; position: relative; left: -40px; top: -50px][/border]
  116. [border=0px; width: 290px; height: 170px; border-radius: 10px; background: var(--backstorybox); margin-right: auto; position: relative; top: -20px; left: 5px; pointer-events: auto; overflow: hidden; line-height: 105%][border=0px; overflow-X: hidden; overflow-Y: scroll; width: 98%; height: 98%; padding-right: 80px; text-align: justify; color: white][FONT=Karla][SIZE=15px][B][RIGHT]Backstory.[/RIGHT][/B][/SIZE]
  117. [SIZE=12px]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ex odio, tempor in dictum quis, luctus vestibulum arcu. Donec venenatis est justo, ac finibus est luctus sed. Vivamus eu sapien sapien. Quisque ultrices ullamcorper urna ac scelerisque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed a elit bibendum, maximus elit at, condimentum arcu. Sed sed metus dolor. Nulla mattis sem at risus fringilla lobortis. Nam nec semper mauris. Cras non ligula rutrum, cursus mi non, aliquet ligula. Suspendisse congue eros massa, et tempor dui mollis eu. Suspendisse sollicitudin nibh non elit mattis, quis posuere eros aliquam. Vestibulum volutpat ultricies nunc, id malesuada dolor elementum at. Pellentesque tristique leo quis feugiat interdum.
  118.  
  119. Curabitur eget malesuada ipsum. Phasellus molestie pulvinar fringilla. In malesuada lorem eleifend neque pellentesque, sit amet tincidunt tellus pellentesque. Vivamus egestas tortor vel tortor varius, nec egestas est bibendum. Fusce leo risus, laoreet vitae sapien ut, porta viverra turpis. Aliquam sodales tortor mi, eu suscipit lectus mattis a. Cras sodales est nec malesuada sollicitudin. Mauris scelerisque[/SIZE][/FONT][/border][/border]
  120. [/border][/tab]
  121. [tab=b][border=0px; width: 318px; height: 340px; position: absolute; left: -234px; top: 80px; pointer-events: auto][border=0px; overflow-X: hidden; overflow-Y: scroll; width: 95%; height: 95%; line-height: 110%; padding-right: 80px; display: flex; flex-flow: row wrap; justify-content: center; background: var(--relationsbox); margin-left: -10px; line-height: 120%][border=0px; width: fit-content; height: 7px; font-size: 30px; font-weight: bold; color: black; z-index: 1; border-bottom: 10px solid gray; position: absolute; top: -60px; margin-left: -120px][FONT=Beth Ellen]Relations[/FONT][/border][comment] PERSONAL RELATIONS BOXES BEGINS HERE[/comment]
  122.  
  123. [border=0px; width: fit-content; height: fit-content][border=0px; border-radius: 10px; width: 120px; height: 120px; background: url(https://64.media.tumblr.com/288a0de8b27833582b1b08b34e07c54d/4216d7744b216278-47/s540x810/8e971bb051871a59a9f9b2ae5bd6cba553afef27.gifv); background-position: 50% 50%; background-size: cover; border: 4px solid var(--relationslines); margin-right: auto][border=0px; width: 1px; height: 40px; border-right: 5px solid var(--relationslines); position: relative; top: 130px; left: 15px][/border][border=0px; width: 1px; height: 40px; border-right: 5px solid var(--relationslines); position: relative; top: 70px; left: 50px][/border][/border][border=0px; border-radius: 10px; width: 220px; height: fit-content; background: var(--relationstext); z-index: 1; position: relative; top: 30px; font-size: 12px; line-height: 110%; text-align: center; color: black][FONT=Karla][border=0px; margin-top: -40px][RIGHT][SIZE=20px][B][FONT=Poppins][COLOR=white]Alexandra Huntington[/COLOR][/FONT][/B][/SIZE][/RIGHT][/border]
  124. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ex odio, tempor in dictum quis, luctus vestibulum arcu. Donec venenatis est justo, ac finibus est luctus sed. Vivamus eu sapien sapien. Quisque ultrices ullamcorper urna ac scelerisque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed a elit bibendum, maximus elit at, condimentum arcu. Sed sed metus dolor. Nulla mattis sem at risus fringilla lobortis. Nam nec semper mauris. Cras non ligula rutrum, cursus mi non, aliquet ligula. Suspendisse congue eros massa, et tempor dui mollis eu. Suspendisse sollicitudin nibh non elit mattis, quis posuere eros aliquam. Vestibulum volutpat ultricies nunc, id malesuada dolor elementum at. Pellentesque tristique leo quis feugiat interdum.[/FONT][/border][/border][comment] !! COPY THIS BOX BELOW ; IT HAS PADDING SO THE BOXES WILL STAY SPREAD OUT !! [/comment]
  125.  
  126. [border=0px; width: fit-content; height: fit-content; padding-top: 40px][border=0px; border-radius: 10px; width: 120px; height: 120px; background: url(https://64.media.tumblr.com/288a0de8b27833582b1b08b34e07c54d/4216d7744b216278-47/s540x810/8e971bb051871a59a9f9b2ae5bd6cba553afef27.gifv); background-position: 50% 50%; background-size: cover; border: 4px solid var(--relationslines); margin-right: auto][border=0px; width: 1px; height: 40px; border-right: 5px solid var(--relationslines); position: relative; top: 130px; left: 15px][/border][border=0px; width: 1px; height: 40px; border-right: 5px solid var(--relationslines); position: relative; top: 70px; left: 50px][/border][/border][border=0px; border-radius: 10px; width: 220px; height: fit-content; background: var(--relationstext); z-index: 1; position: relative; top: 30px; font-size: 12px; line-height: 110%; text-align: center; color: black][FONT=Karla][border=0px; margin-top: -40px][RIGHT][SIZE=20px][B][FONT=Poppins][COLOR=white]Alexandra Huntington[/COLOR][/FONT][/B][/SIZE][/RIGHT][/border]
  127. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ex odio, tempor in dictum quis, luctus vestibulum arcu. Donec venenatis est justo, ac finibus est luctus sed. Vivamus eu sapien sapien. Cras non ligula rutrum, cursus mi non, aliquet ligula. Suspendisse congue eros massa, et tempor dui mollis eu. Suspendisse sollicitudin nibh non elit mattis, quis posuere eros aliquam. Vestibulum volutpat ultricies nunc, id malesuada dolor elementum at. Pellentesque tristique leo quis feugiat interdum.[/FONT][/border][/border]
  128.  
  129. [border=0px; width: fit-content; height: fit-content; padding-top: 40px][border=0px; border-radius: 10px; width: 120px; height: 120px; background: url(https://64.media.tumblr.com/288a0de8b27833582b1b08b34e07c54d/4216d7744b216278-47/s540x810/8e971bb051871a59a9f9b2ae5bd6cba553afef27.gifv); background-position: 50% 50%; background-size: cover; border: 4px solid var(--relationslines); margin-right: auto][border=0px; width: 1px; height: 40px; border-right: 5px solid var(--relationslines); position: relative; top: 130px; left: 15px][/border][border=0px; width: 1px; height: 40px; border-right: 5px solid var(--relationslines); position: relative; top: 70px; left: 50px][/border][/border][border=0px; border-radius: 10px; width: 220px; height: fit-content; background: var(--relationstext); z-index: 1; position: relative; top: 30px; font-size: 12px; line-height: 110%; text-align: center; color: black][FONT=Karla][border=0px; margin-top: -40px][RIGHT][SIZE=20px][B][FONT=Poppins][COLOR=white]Alexandra Huntington[/COLOR][/FONT][/B][/SIZE][/RIGHT][/border]
  130. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ex odio, tempor in dictum quis, luctus vestibulum arcu. Donec venenatis est justo, ac finibus est luctus sed. Vivamus eu sapien sapien. Quisque ultrices ullamcorper urna ac scelerisque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed a elit bibendum, maximus elit at, condimentum arcu. Sed sed metus dolor. Nulla mattis sem at risus fringilla lobortis. Nam nec semper mauris. Cras non ligula rutrum, cursus mi non, aliquet ligula. Suspendisse congue eros massa, et tempor dui mollis eu. Suspendisse sollicitudin nibh non elit mattis, quis posuere eros aliquam. Vestibulum volutpat ultricies nunc, id malesuada dolor elementum at. Pellentesque tristique leo quis feugiat interdum.[/FONT][/border][/border]
  131.  
  132. [border=0px; width: fit-content; height: fit-content; padding-top: 40px][border=0px; border-radius: 10px; width: 120px; height: 120px; background: url(https://64.media.tumblr.com/288a0de8b27833582b1b08b34e07c54d/4216d7744b216278-47/s540x810/8e971bb051871a59a9f9b2ae5bd6cba553afef27.gifv); background-position: 50% 50%; background-size: cover; border: 4px solid var(--relationslines); margin-right: auto][border=0px; width: 1px; height: 40px; border-right: 5px solid var(--relationslines); position: relative; top: 130px; left: 15px][/border][border=0px; width: 1px; height: 40px; border-right: 5px solid var(--relationslines); position: relative; top: 70px; left: 50px][/border][/border][border=0px; border-radius: 10px; width: 220px; height: fit-content; background: var(--relationstext); z-index: 1; position: relative; top: 30px; font-size: 12px; line-height: 110%; text-align: center; color: black][FONT=Karla][border=0px; margin-top: -40px][RIGHT][SIZE=20px][B][FONT=Poppins][COLOR=white]Alexandra Huntington[/COLOR][/FONT][/B][/SIZE][/RIGHT][/border]
  133. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ex odio, tempor in dictum quis, luctus vestibulum arcu. Donec venenatis est justo, ac finibus est luctus sed. Vivamus eu sapien sapien. Quisque ultrices ullamcorper urna ac scelerisque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed a elit bibendum, maximus elit at, condimentum arcu. Sed sed metus dolor. Nulla mattis sem at risus fringilla lobortis. Nam nec semper mauris. Cras non ligula rutrum, cursus mi non, aliquet ligula. Suspendisse congue eros massa, et tempor dui mollis eu. Suspendisse sollicitudin nibh non elit mattis, quis posuere eros aliquam. Vestibulum volutpat ultricies nunc, id malesuada dolor elementum at. Pellentesque tristique leo quis feugiat interdum.[/FONT][/border][/border]
  134.  
  135. [border=0px; width: fit-content; height: fit-content; padding-top: 40px][border=0px; border-radius: 10px; width: 120px; height: 120px; background: url(https://64.media.tumblr.com/288a0de8b27833582b1b08b34e07c54d/4216d7744b216278-47/s540x810/8e971bb051871a59a9f9b2ae5bd6cba553afef27.gifv); background-position: 50% 50%; background-size: cover; border: 4px solid var(--relationslines); margin-right: auto][border=0px; width: 1px; height: 40px; border-right: 5px solid var(--relationslines); position: relative; top: 130px; left: 15px][/border][border=0px; width: 1px; height: 40px; border-right: 5px solid var(--relationslines); position: relative; top: 70px; left: 50px][/border][/border][border=0px; border-radius: 10px; width: 220px; height: fit-content; background: var(--relationstext); z-index: 1; position: relative; top: 30px; font-size: 12px; line-height: 110%; text-align: center; color: black][FONT=Karla][border=0px; margin-top: -40px][RIGHT][SIZE=20px][B][FONT=Poppins][COLOR=white]Alexandra Huntington[/COLOR][/FONT][/B][/SIZE][/RIGHT][/border]
  136. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ex odio, tempor in dictum quis, luctus vestibulum arcu. Donec venenatis est justo, ac finibus est luctus sed. Vivamus eu sapien sapien. Quisque ultrices ullamcorper urna ac scelerisque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed a elit bibendum, maximus elit at, condimentum arcu. Sed sed metus dolor. Nulla mattis sem at risus fringilla lobortis. Nam nec semper mauris. Cras non ligula rutrum, cursus mi non, aliquet ligula. Suspendisse congue eros massa, et tempor dui mollis eu. Suspendisse sollicitudin nibh non elit mattis, quis posuere eros aliquam. Vestibulum volutpat ultricies nunc, id malesuada dolor elementum at. Pellentesque tristique leo quis feugiat interdum.[/FONT][/border][/border]
  137.  
  138. [/border][/border][/tab]
  139. [/tabs][/border][comment] FLOWER BUSH TABS [/comment]
  140. [border=0px; border-radius: 50%; width: 140px; height: 140px; background: var(--flowerbush2); margin-left: auto; margin-top: -142px; position: relative; left: 28px; pointer-events: none; z-index: 1][border=0px; position: relative; top: 25px; left: 70px; font-size: 30px; color: var(--flowers)][fa] fa-flower [/fa] [/border][border=0px; position: relative; top: 0px; left: 20px; font-size: 20px; color: var(--flowers)][fa] fa-flower [/fa] [/border][border=0px; border-radius: 50%; height: 100px; width: 100px; background: var(--flowerbush1); position: relative; left: 70px; top: -30px; font-size: 13px; color: white][border=0px; position: relative; left: -40px; top: 0px; line-height: 105%; pointer-events: auto]click on the flowers![/border]
  141. [/border][/border][/border][/tab]
  142.  
  143. [tab=4][border=0px; position: absolute; top: -280px; left: 185px; width: 320px; height: 410px; border: 5px solid var(--lines); background: var(--tab4bgtop); z-index: 1; overflow: hidden][border=0px; width: fit-content; height: 12px; font-size: 30px; font-weight: bold; color: black; z-index: 1; pointer-events: none; border-bottom: 10px solid gray; margin-top: -10px; margin-left: auto][FONT=Beth Ellen]Pictures[/FONT][/border][border=0px; width: 318px; height: 345px; position: relative; margin-left: -9px; margin-top: 22px; background: var(--tab4bg); overflow-X: hidden; overflow-Y: scroll; padding-right: 80px; display: flex; flex-flow: row wrap; align-items: center; justify-content: center][comment] INSERT PICS HERE [/comment]
  144.  
  145. [border=0px; width: 100px; height: 100px; background: url(https://64.media.tumblr.com/667daa836594a9e6e388571a7bfc12be/ee6bac3ede8c74ee-ee/s640x960/a7882985392b5a36b17c0366f83d09d0e511a384.jpg); background-size: cover; background-position: 50% 50%; border; border-bottom: 10px solid var(--tab4bg); border-left: 15px solid var(--tab4bg)][/border]
  146.  
  147. [border=0px; width: 100px; height: 100px; background: url(https://64.media.tumblr.com/667daa836594a9e6e388571a7bfc12be/ee6bac3ede8c74ee-ee/s640x960/a7882985392b5a36b17c0366f83d09d0e511a384.jpg); background-size: cover; background-position: 50% 50%; border; border-bottom: 10px solid var(--tab4bg); border-left: 15px solid var(--tab4bg)][/border]
  148.  
  149. [border=0px; width: 100px; height: 100px; background: url(https://64.media.tumblr.com/667daa836594a9e6e388571a7bfc12be/ee6bac3ede8c74ee-ee/s640x960/a7882985392b5a36b17c0366f83d09d0e511a384.jpg); background-size: cover; background-position: 50% 50%; border; border-bottom: 10px solid var(--tab4bg); border-left: 15px solid var(--tab4bg)][/border]
  150.  
  151. [border=0px; width: 100px; height: 100px; background: url(https://64.media.tumblr.com/667daa836594a9e6e388571a7bfc12be/ee6bac3ede8c74ee-ee/s640x960/a7882985392b5a36b17c0366f83d09d0e511a384.jpg); background-size: cover; background-position: 50% 50%; border; border-bottom: 10px solid var(--tab4bg); border-left: 15px solid var(--tab4bg)][/border]
  152.  
  153. [border=0px; width: 100px; height: 100px; background: url(https://64.media.tumblr.com/667daa836594a9e6e388571a7bfc12be/ee6bac3ede8c74ee-ee/s640x960/a7882985392b5a36b17c0366f83d09d0e511a384.jpg); background-size: cover; background-position: 50% 50%; border; border-bottom: 10px solid var(--tab4bg); border-left: 15px solid var(--tab4bg)][/border]
  154.  
  155. [border=0px; width: 100px; height: 100px; background: url(https://64.media.tumblr.com/667daa836594a9e6e388571a7bfc12be/ee6bac3ede8c74ee-ee/s640x960/a7882985392b5a36b17c0366f83d09d0e511a384.jpg); background-size: cover; background-position: 50% 50%; border; border-bottom: 10px solid var(--tab4bg); border-left: 15px solid var(--tab4bg)][/border]
  156.  
  157. [border=0px; width: 100px; height: 100px; background: url(https://64.media.tumblr.com/667daa836594a9e6e388571a7bfc12be/ee6bac3ede8c74ee-ee/s640x960/a7882985392b5a36b17c0366f83d09d0e511a384.jpg); background-size: cover; background-position: 50% 50%; border; border-bottom: 10px solid var(--tab4bg); border-left: 15px solid var(--tab4bg)][/border]
  158.  
  159. [border=0px; width: 100px; height: 100px; background: url(https://64.media.tumblr.com/667daa836594a9e6e388571a7bfc12be/ee6bac3ede8c74ee-ee/s640x960/a7882985392b5a36b17c0366f83d09d0e511a384.jpg); background-size: cover; background-position: 50% 50%; border; border-bottom: 10px solid var(--tab4bg); border-left: 15px solid var(--tab4bg)][/border]
  160.  
  161. [border=0px; width: 100px; height: 100px; background: url(https://64.media.tumblr.com/667daa836594a9e6e388571a7bfc12be/ee6bac3ede8c74ee-ee/s640x960/a7882985392b5a36b17c0366f83d09d0e511a384.jpg); background-size: cover; background-position: 50% 50%; border; border-bottom: 10px solid var(--tab4bg); border-left: 15px solid var(--tab4bg)][/border]
  162.  
  163. [border=0px; width: 100px; height: 100px; background: url(https://64.media.tumblr.com/667daa836594a9e6e388571a7bfc12be/ee6bac3ede8c74ee-ee/s640x960/a7882985392b5a36b17c0366f83d09d0e511a384.jpg); background-size: cover; background-position: 50% 50%; border; border-bottom: 10px solid var(--tab4bg); border-left: 15px solid var(--tab4bg)][/border]
  164.  
  165. [border=0px; width: 100px; height: 100px; background: url(https://64.media.tumblr.com/667daa836594a9e6e388571a7bfc12be/ee6bac3ede8c74ee-ee/s640x960/a7882985392b5a36b17c0366f83d09d0e511a384.jpg); background-size: cover; background-position: 50% 50%; border; border-bottom: 10px solid var(--tab4bg); border-left: 15px solid var(--tab4bg)][/border]
  166.  
  167. [border=0px; width: 100px; height: 100px; background: url(https://64.media.tumblr.com/667daa836594a9e6e388571a7bfc12be/ee6bac3ede8c74ee-ee/s640x960/a7882985392b5a36b17c0366f83d09d0e511a384.jpg); background-size: cover; background-position: 50% 50%; border; border-bottom: 10px solid var(--tab4bg); border-left: 15px solid var(--tab4bg)][/border]
  168.  
  169. [/border][/border][/tab]
  170. [/tabs][/border][/border]
  171. [comment] THE MAIN TABS (SYMBOLS) CODE BEGINS HERE; DO NOT MESS WITH SPACING [/comment]
  172.  
  173. [border=0px; background: var(--bgcolor); border: 0px solid black; width: 124px; height: 130px; position: relative; top: -150px; left: 60px; display: flex; flex-flow: row wrap; justify-content: space-around; pointer-events: none; line-height: 20px; color: var(--lines); font-size: 20px][border=0px; width: 40px; height: fit-content; margin-top: -10px; text-align: center] [fa] fa-user [/fa][/border]
  174. [border=0px; width: 40px; height: fit-content; margin-top: -10px][fa] fa-book [/fa][/border]
  175. [border=0px; width: 40px; height: fit-content; margin-top: -40px; margin-left: 0px; text-align: center][fa] fas fa-info [/fa][/border]
  176. [border=0px; width: 40px; height: fit-content; margin-top: -40px; margin-left: 0px; text-align: left][fa] fa-camera-alt [/fa][/border][/border][comment] !!! LINES FOR SQUARE STARTS HERE !!! [/comment]
  177. [border=0px; width: 1px; height: 92px; border-right: 5px solid var(--lines); position: absolute; top: 255px; left: 50px][/border][border=0px; width: 200px; height: 1px; border-top: 5px solid var(--lines); position: absolute; top: 362px; left: 72px; pointer-events: none][/border][border=0px; width: 1px; height: 100px; border-right: 5px solid var(--lines); position: absolute; top: 280px; left: 100px; pointer-events: none][/border]
  178. [comment] INSERT SOUNDCLOUD INK HERE [/comment]
  179. [border=0px; width: 150px; height: 50px; position: relative; top: -285px; left: 25px][MEDIA=soundcloud]https://soundcloud.com/tianzhen/wild-flowers[/MEDIA][/border][border=0px; background: var(--musicplayer); border-radius: 30px; width: 160px; height: 50px; position: relative; top: -360px; left: 25px; pointer-events: none; display: flex; align-items: center; font-size: 30px; color: var(--songtitle)][border=0px; position: relative; left: 10px][fa] fa-play [/fa][/border][border=0px; font-size: 12px; width: 70%; height: fit-content; line-height: 102%; text-align: right][FONT=Poppins][B]Wild Flowers[/B]
  180. Tian Zhen[/FONT][/border][/border]
  181. [/border]
  182. [border=0px; margin-left: auto; font-size: 10px; color: gray; text-align: center; margin-top: -25px; letter-spacing: 0.3px][FONT=Poppins]code by butterfly aubade [/FONT][/border]
Add Comment
Please, Sign In to add comment