• When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!

    Remember to credit artists when using work not your own.

Help Add Another Section In Pre-Made Code

The Boneless

The Boneless

~ Razor Tail ~
Roleplay Type(s)
Hello!
I need some help with one of Uxie's codes.
On the second page I'd like to have one more section like the visage one right under it, (maybe with the picture to the right instead if one gets to be picky, haha).
I hope someone can help me with this!
Thanks in advance fellow roleplayers! =)











scroll








scroll





❝
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse finibus erat mi, vel consectetur neque ultrices a.





credit
















role role role



name.







full name

hello






nicknames

hello






age

hello






d.o.b.

hello






ethnicity

hello






sexuality

hello

































song name


artist




















01.



visage

















height

answer






weight

answer






hair c.

answer






eye c.

answer






faceclaim

answer























02.



psyche









Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tempor purus a lacus iaculis accumsan. Integer justo justo, ultrices interdum feugiat et, pharetra vitae felis. Ut at arcu quis ante vehicula imperdiet. Etiam aliquam dui id commodo faucibus. Ut semper, ipsum et rhoncus mollis, sem sapien consequat turpis, vitae mollis erat eros quis diam. Curabitur feugiat, ligula id feugiat pulvinar, augue nunc blandit nisl, sit amet aliquam lectus turpis non nunc. Suspendisse elementum nisi eget varius aliquet. Quisque non nibh fermentum, efficitur arcu quis, feugiat turpis. Morbi cursus non lacus sed tempus.






likes

answer






dislikes

answer






fears

answer


















03.



history









this scrolls if you add enough content.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse finibus erat mi, vel consectetur neque ultrices a. Nulla facilisi. Fusce at quam ut sem pharetra posuere nec nec enim. Mauris rhoncus fermentum sapien, ac finibus mi tempus sed. Praesent sed eros pulvinar, fringilla dui a, vestibulum nisi. Cras blandit enim laoreet orci porta ultrices. Cras purus erat, commodo a rhoncus ac, dapibus quis mauris.

Ut rhoncus libero eu fermentum bibendum. Nullam ac ipsum augue. Donec commodo dui efficitur iaculis venenatis. Mauris a neque pellentesque, faucibus urna vel, dapibus nulla. Sed tincidunt dui sed dictum vestibulum. Ut venenatis urna in elit hendrerit, eu molestie massa efficitur. Nullam sit amet sem ut ligula gravida ultricies. Etiam gravida quis diam at elementum. In dignissim eros ut sapien fringilla, vel lobortis nibh auctor. Sed ut nibh bibendum, tincidunt ex in, mattis odio. Donec egestas facilisis dapibus. Proin varius ornare sapien, at auctor sem lacinia non.


















04.



gallery


































05.



connections

















character name



Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse finibus erat mi, vel consectetur neque ultrices a. Nulla facilisi. Fusce at quam ut sem pharetra posuere nec nec enim. Mauris rhoncus fermentum sapien, ac finibus mi tempus sed.

















character name



Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse finibus erat mi, vel consectetur neque ultrices a. Nulla facilisi. Fusce at quam ut sem pharetra posuere nec nec enim. Mauris rhoncus fermentum sapien, ac finibus mi tempus sed.

















character name



Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse finibus erat mi, vel consectetur neque ultrices a. Nulla facilisi. Fusce at quam ut sem pharetra posuere nec nec enim. Mauris rhoncus fermentum sapien, ac finibus mi tempus sed.

















character name



Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse finibus erat mi, vel consectetur neque ultrices a. Nulla facilisi. Fusce at quam ut sem pharetra posuere nec nec enim. Mauris rhoncus fermentum sapien, ac finibus mi tempus sed.





















06.



miscellaneous

















whatever

hello






whatever

hello




















♡coded by uxie♡
 
Like this?

Code: 
[comment]coded by uxie!

fonts used:
[font=Poppins]header[/font]
[font=Crimson Pro]quote[/font]
[font=Karla]subheader/body text[/font]

to replace fonts, add/replace them here, and then in the variables below under *fonts; check uxie's tech support in nine lives for more details ( ‾́ ◡ ‾́ )

[/comment][border="transparent;
/*border colour -- make sure it's distinct from the other background*/
--bg-1: #f2f2f2;
/*main background colour*/
--bg-2: #fff;

/*main accent colour*/
--color-1: #f4d977;
/*secondary accent colour*/
--color-2: #f7b885;

/*header colour*/
--h1: var(--bg-2);
/*quote colour*/
--subtitle: #6d4e41;
/*text colour*/
--t-color: #332f2d;

/*fonts used*/
--header: 'Poppins', sans-serif;
--quote: 'Crimson Pro', serif;
--body: 'Karla', sans-serif;

/*background image*/
--bg-img: url('https://i.imgur.com/TWyEAzk.png');
/*big image (left/top)*/
--img-1: url('https://i.imgur.com/B9pGtdT.png');
/*sidebar icon*/
--img-2: url('https://i.imgur.com/3i3rQHZ.png');
/*appearance image*/
--img-3: url('https://i.imgur.com/oJZX872.png');
/*extra info image*/
--img-4: url('https://i.imgur.com/yo1kqq3.png');

/*gallery images*/
--gimg-1: url('https://i.imgur.com/Zirt7gw.png');
--gimg-2: url('https://i.imgur.com/Zirt7gw.png');
--gimg-3: url('https://i.imgur.com/Zirt7gw.png');
--gimg-4: url('https://i.imgur.com/Zirt7gw.png');
--gimg-5: url('https://i.imgur.com/Zirt7gw.png');
--gimg-6: url('https://i.imgur.com/Zirt7gw.png');

/*relationship images*/
--r1: url('https://i.imgur.com/umdCpUF.png');
--r2: url('https://i.imgur.com/umdCpUF.png');
--r3: url('https://i.imgur.com/umdCpUF.png');
--r4: url('https://i.imgur.com/umdCpUF.png');

height:auto; width:100%; max-width:600px; padding:clamp(10px, 2vw, 15px); box-sizing:border-box; background: var(--bg-1); margin:auto; line-height:0; overflow:hidden; position:relative;"][border=transparent; height:auto; width:100%; padding:clamp(10px, 2vw, 15px); box-sizing:border-box; background: var(--bg-2); overflow:hidden;][border=transparent; height:auto; min-height:400px; width:100%; padding:0; display:flex; flex-flow:row wrap; position:relative; overflow:hidden; justify-content:center;]
   [comment]----left/top image----[/comment]
   [border=transparent; height:400px; flex:68; min-width:280px; max-width:340px; padding:0; background: var(--img-1); background-size:cover; box-sizing:border-box; position:relative;

/*edit the following to adjust the cropping of the image*/ background-position:50% 50%;

][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2;][/border][/border][border=transparent; height:400px; flex:32; min-width:200px; padding:0; background: var(--bg-img); background-size:cover; background-position:center;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2;][/border][/border]

   [comment]----right (main container----[/comment]
   [border=transparent; height:400px; width:100%; padding:0; position:absolute; bottom:0; left:0;]
[comment]----filler stuff----[/comment]
[border=transparent; height:400px; width:100%; padding:10px 15px 10px 0; box-sizing:border-box; position:absolute; top:-400px; left:0; display:flex; flex-flow:column nowrap; align-items:center; justify-content:center; pointer-events:none;][border=transparent; height:auto; width:auto; padding:0; color: var(--h1); opacity:0.9; font-size:9.5px; text-transform:uppercase; font-family: var(--header); letter-spacing:2px; font-weight:bold; bottom:10px; right:clamp(5px, 30px - 3.5vw, 10px); position:absolute; z-index:3; text-shadow:1px 1px var(--color-1); pointer-events:none;][fa]fas fa-chevron-right[/fa] scroll[/border][border=transparent; height:calc(100% - 50px); width:calc(100% - 50px); padding:0; box-sizing:border-box; border:1px solid var(--color-1);][/border][/border]
[comment]----filler stuff end----[/comment]
   [border=transparent; height:400px; width:100%; padding:0; overflow:hidden;][border=transparent; height:417px; width:100%; padding:0; overflow-x:scroll; overflow-y:hidden; scroll-snap-type:x mandatory; scroll-behavior: smooth;][border=transparent; height:400px; width:auto; padding:0; display:flex; flex-flow:row nowrap;]

      [comment]----most left----[/comment]
      [border=transparent; height:400px; width:clamp(0px, 65vw - 280px, 340px); padding:0; box-sizing:border-box; flex-shrink:0; scroll-snap-align:start;][border=transparent; height:100%; width:100%; padding:10px 0; box-sizing:border-box; display:flex; flex-flow:column nowrap; justify-content:center; align-items:center; overflow:hidden; position:relative; left:0.3px;]

         [comment]----instruction----[/comment]
         [border=transparent; height:auto; width:auto; padding:0; color: var(--h1); opacity:0.9; font-size:9.5px; text-transform:uppercase; font-family: var(--header); letter-spacing:2px; font-weight:bold; top:5px; right:5px; position:absolute; z-index:3; text-shadow:1px 1px var(--color-1); pointer-events:none;][fa]fas fa-chevron-right[/fa] scroll[/border]

         [comment]----box----[/comment]
         [border=transparent; height:calc(100% - 50px); width:calc(100% - 50px); padding:10px 15px; box-sizing:border-box; border:1px solid var(--color-1); display:flex; flex-flow:column nowrap; justify-content:flex-end;]
[comment]----quote----[/comment]
[border=transparent; height:auto; height:fit-content; width:130px; position:relative; padding:0;

/*increase this value if the text is too light on your image*/ opacity:0.8;

][border=transparent; height:auto; width:auto; padding:0; position:absolute; top:15px; left:-15px; color: var(--color-1); font-size:125px; opacity:0.7; font-style:normal; font-weight:normal; z-index:-1; font-family: sans-serif; line-height:18px;]❝[/border][border=transparent; height:auto; height:fit-content; max-height:108px; width:100%; padding:0; color: var(--subtitle); font-size:11px; font-family: var(--quote); font-style:italic; line-height:18px; letter-spacing:1px; font-weight:bold; overflow:hidden;][comment]

----* * * quote here (keep it short)----

[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse finibus erat mi, vel consectetur neque ultrices a.[/border]
[/border]
[comment]----quote end----[/comment]

[comment]----quote credit----[/comment]
[border=transparent; height:auto; height:fit-content; width:120px; padding:0; display:flex; flex-flow: row nowrap; justify-content:flex-end; align-items:center; opacity:0.75;][border=transparent; height:0; width:30px; border-top:1px solid var(--subtitle); padding:0; flex-shrink:0; margin:2px 8px 0 0;][/border][border=transparent; height:auto; width:auto; padding:0; color: var(--subtitle); font-size:12px; font-family: var(--quote); font-style:oblique; line-height:18px; letter-spacing:0.5px; font-weight:bold; text-align:right;][comment]

----* * * quote credit here----

[/comment]credit[/border][/border]
          [/border]

      [/border][/border]
      [comment]----most left end----[/comment]

      [comment]----left (sidebar)----[/comment]
      [border=transparent; height:400px; width:calc(100vw - 30px); max-width:215px; padding:0; border:8px solid var(--bg-2); border-top:0; border-bottom:0; box-sizing:border-box; flex-shrink:0; display:flex; flex-flow:column nowrap;]

         [comment]----sidebar container----[/comment]
         [border=transparent; height:calc(100% - 55px); width:100%; padding:0 10px; box-sizing:border-box; background:var(--bg-2);][border=transparent; height:100%; width:100%; padding:10px 5px 0 5px; box-sizing:border-box; display:flex; flex-flow:column nowrap; align-items:center; position:relative;]

[comment]----sidebar image----[/comment]
[border=transparent; height:132px; width:132px; padding:8px; border:1px solid var(--color-1); box-sizing:border-box; border-radius:50%; margin-right:auto; flex-shrink:0;][border=transparent; height:100%; width:100%; padding:0; background: var(--img-2); background-size:cover; background-position:50% 50%; position:relative; overflow:hidden; border-radius:50%;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2;][/border][/border][/border]

[comment]----role----[/comment]
[border=transparent; height:auto; width:fit-content; width:-moz-fit-content; max-width:68px; padding:0; position:absolute; top:82px; right:4px;][border=transparent; display:inline; padding:3px 6px; box-sizing:border-box; box-decoration-break:clone; -webkit-box-decoration-break: clone; background: var(--color-1); border-radius:2px; color: var(--h1); font-size:9.5px; text-transform:uppercase; letter-spacing:1.5px; line-height:15px; font-family: var(--body); text-align:right;][comment]

----* * * role here----

[/comment]role role role[/border][/border]

[comment]----name----[/comment]
[border=transparent; height:auto; min-height:36px; max-height:56px; width:100%; padding:0; color: var(--color-1); text-shadow:1px 1px var(--color-2); letter-spacing:2px; font-weight:bold; font-family: var(--header); font-size:34px; line-height:28px; margin-top:14px; flex-shrink:0; overflow:hidden;][comment]

----* * * character first name/nickname here----

[/comment]name.[/border]

[comment]----basics----[/comment]
[border=transparent; height:60%; width:174px; padding:0; margin:20px 0 26px 1px; overflow:hidden;][border=transparent; height:100%; width:191px; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:174px; padding:0; display:flex; flex-flow:column nowrap;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-8px;][/border]

   [comment]----copy this whole thing to make another bit of info----[/comment]
   [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin-top:3px;]
      [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10px; color: var(--h1); flex-shrink:0; margin:5px 8px 0 0;][comment]

----* * * info title here----

[/comment]full name[/border]
      [border=transparent; min-width:fit-content; min-width:-moz-fit-content; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:13px; text-align:left; margin:5px 0 0 0;][comment]

----* * * info contents here----

[/comment]hello[/border]
   [/border]
   [comment]----copy me too!----[/comment]

   [comment]----copy this whole thing to make another bit of info----[/comment]
   [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin-top:3px;]
      [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10px; color: var(--h1); flex-shrink:0; margin:5px 8px 0 0;][comment]

----* * * info title here----

[/comment]nicknames[/border]
      [border=transparent; min-width:fit-content; min-width:-moz-fit-content; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:13px; text-align:left; margin:5px 0 0 0;][comment]

----* * * info contents here----

[/comment]hello[/border]
   [/border]
   [comment]----copy me too!----[/comment]

   [comment]----copy this whole thing to make another bit of info----[/comment]
   [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin-top:3px;]
      [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10px; color: var(--h1); flex-shrink:0; margin:5px 8px 0 0;][comment]

----* * * info title here----

[/comment]age[/border]
      [border=transparent; min-width:fit-content; min-width:-moz-fit-content; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:13px; text-align:left; margin:5px 0 0 0;][comment]

----* * * info contents here----

[/comment]hello[/border]
   [/border]
   [comment]----copy me too!----[/comment]

   [comment]----copy this whole thing to make another bit of info----[/comment]
   [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin-top:3px;]
      [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10px; color: var(--h1); flex-shrink:0; margin:5px 8px 0 0;][comment]

----* * * info title here----

[/comment]d.o.b.[/border]
      [border=transparent; min-width:fit-content; min-width:-moz-fit-content; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:13px; text-align:left; margin:5px 0 0 0;][comment]

----* * * info contents here----

[/comment]hello[/border]
   [/border]
   [comment]----copy me too!----[/comment]

   [comment]----copy this whole thing to make another bit of info----[/comment]
   [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin-top:3px;]
      [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10px; color: var(--h1); flex-shrink:0; margin:5px 8px 0 0;][comment]

----* * * info title here----

[/comment]ethnicity[/border]
      [border=transparent; min-width:fit-content; min-width:-moz-fit-content; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:13px; text-align:left; margin:5px 0 0 0;][comment]

----* * * info contents here----

[/comment]hello[/border]
   [/border]
   [comment]----copy me too!----[/comment]

   [comment]----copy this whole thing to make another bit of info----[/comment]
   [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin-top:3px;]
      [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10px; color: var(--h1); flex-shrink:0; margin:5px 8px 0 0;][comment]

----* * * info title here----

[/comment]sexuality[/border]
      [border=transparent; min-width:fit-content; min-width:-moz-fit-content; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:13px; text-align:left; margin:5px 0 0 0;][comment]

----* * * info contents here----

[/comment]hello[/border]
   [/border]
   [comment]----copy me too!----[/comment]

[/border][/border][/border]
[comment]----basics end----[/comment]
         [/border][/border]
         [comment]----sidebar container end----[/comment]

         [comment]----music player----[/comment]
         [border=transparent; height:55px; width:100%; padding:0; position:relative; flex-shrink:0; border-left:13px solid var(--bg-2); border-right:13px solid var(--bg-2); box-sizing:border-box;][border=transparent; height:55.5px; width:calc(100% + 1.5px); padding:1px 0 0 0; background: var(--color-1); opacity:0.65; position:absolute; top:-0.5px; left:-1px;][/border][border=transparent; height:100%; width:100%; padding:10px 20px; box-sizing:border-box; display:flex; flex-flow:row nowrap; align-items:center; position:relative; z-index:2;]

[comment]----play button----[/comment]
[border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:0; position:relative; overflow:hidden; pointer-events:auto;]
   [border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:0; color: var(--h1); font-size:16px; flex-shrink:0;][fa]fas fa-play[/fa][/border]

   [comment]----actual media player----[/comment]
   [border=transparent; height:100%; width:100%; padding:0; position:absolute; top:0; left:0; opacity:0.01%;]
[comment]----soundcloud (replace the soundcloud link within media tag with your own)----[/comment]
[border=transparent; height:80px; width:180px; padding:0; margin-top:-20px; margin-left:-20px; position:absolute; top:0; left:0;]
   [media=soundcloud]https://soundcloud.com/green-thumb-431624934/phobiafirst-ver[/media]
[/border]

[comment]----google drive (replace the google file code within media tag with your own)----[/comment]
[border=transparent; height:500px; width:500px; margin-top:-313px; margin-left:-103px; padding:0px; /*remove this to use me, and add it to the other*/ display:none;]
   [media=googledrive]google file code here[/MEDIA]
[/border]
   [/border]
   [comment]----actual media player end----[/comment]
[/border]

[comment]----music info----[/comment]
[border=transparent; flex:1; height:auto; padding:0; display:flex; flex-flow:column nowrap; margin-left:25px;]
   [border=transparent; height:auto; width:100%; padding:0; color: var(--h1); font-family: var(--header); line-height:100%; font-size:12px; letter-spacing:1.5px; font-style:oblique; font-weight:bold;][comment]

----* * * song title here----

[/comment]song name[/border]

   [border=transparent; height:auto; width:100%; padding:0; color: var(--h1); font-family: var(--Inter); line-height:100%; font-size:8px; letter-spacing:2px; text-transform:uppercase; margin-top:3px; font-weight:bold;][comment]

----* * * song artist here----

[/comment]artist[/border]
[/border]
[comment]----music info end---[/comment]
         [/border][/border]
         [comment]----music player end----[/comment]
      [/border]
      [comment]----left end----[/comment]

      [comment]----right (main contents)----[/comment]
      [border=transparent; height:400px; width:calc(100vw - 61px); max-width:340px; padding:0; border:clamp(0px, 25px - 3vw, 20px) solid var(--bg-2); border-bottom:clamp(0px, 15px - 1vw, 6px) solid var(--bg-2); border-right:0; border-left:clamp(0px, 0.8vw, 8px) solid var(--bg-2); box-sizing:border-box; flex-shrink:0; scroll-snap-align:end; display:flex; flex-direction:column; overflow:hidden; position:relative;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll; scroll-snap-type:y proximity;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-23px;][/border]

         [comment]----section 1 (appearance)----[/comment]
         [border=transparent; height:auto; width:calc(50% + 28px); padding:0; scroll-snap-align:end; display:flex; flex-flow:column nowrap; border-right:28px solid var(--bg-2); border-top:23px solid var(--bg-2); box-sizing:border-box;]

[comment]----section title container----[/comment]
[border=transparent; height:38px; width:100%; padding:0; border:1px solid var(--color-1); box-sizing:border-box; position:relative; display:flex; flex-flow:row-reverse nowrap;]
[border=transparent; height:1px; width:calc(100% + 2px); padding:0 2px; background: var(--bg-2); position:absolute; top:-2px; left:-1px;][/border]
[border=transparent; height:1px; width:100%; padding:0; background: var(--bg-2); position:absolute; top:-0.2px; left:0;][/border]
[border=transparent; height:1px; width:100%; padding:0; background: var(--bg-2); position:absolute; bottom:-0.2px; left:0;][/border]
   [comment]----section number----[/comment]
   [border=transparent; height:36px; min-width:41px; border:5px solid var(--bg-2); padding:0 3px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; position:relative; flex-shrink:0; margin-left:-1px;][border=transparent; height:100%; width:calc(100% + 1px); padding:1px 0 0 0; opacity:0.4; background: var(--color-1); position:absolute; top:-0.5px; left:-0.8px;][/border][border=transparent; height:auto; width:auto; padding:0; color: var(--h1); font-family: var(--header); line-height:100%; font-size:15px; font-weight:bold; letter-spacing:1px; position:relative; z-index:3; text-align:center; text-shadow:1px 1px var(--color-2); white-space:nowrap;][comment]

----* * * section number here----

[/comment]01.[/border][/border]

   [comment]----section title----[/comment]
   [border=transparent; height:100%; flex:1; padding:0 13px 0 12px; box-sizing:border-box; display:flex; align-items:center; background: var(--bg-2);][border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:3px 5px; box-sizing:border-box; border-radius:2px; background: var(--color-1); font-family: var(--body); font-weight:bold; color: var(--h1); font-size:11px; text-transform:uppercase; letter-spacing:2px; line-height:100%;][comment]

----* * * section title here----

[/comment]visage[/border][/border]
[/border]
[comment]----section title container end----[/comment]

[comment]----section contents----[/comment]
[border=transparent; height:auto; width:100%; padding:15px 0 5px 0; box-sizing:border-box; background: var(--bg-2); display:flex; flex-flow:column nowrap;]
   [comment]----row one----[/comment]
   [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row nowrap;]
      [comment]----icon----[/comment]
      [border=transparent; width:clamp(85px, 10vw, 110px); padding:0; flex-shrink:0;][border=transparent; padding:0; padding-top:100%; border:1px solid var(--color-1); position:relative;][border=transparent; height:100%; width:100%; padding:8px; box-sizing:border-box; position:absolute; top:0; left:0;][border=transparent; height:100%; width:100%; padding:0; background: var(--img-3); background-size:cover;

/*edit the following to adjust the cropping of the image*/ background-position:50% 50%;]
      [border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2;][/border][/border][/border][/border][/border]

      [comment]----appearance contents----[/comment]
      [border=transparent; height:110px; flex:1; margin-left:15px; padding:0; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; display:flex; flex-flow:column nowrap;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-8px;][/border]

         [comment]----copy this whole thing to make another bit of info----[/comment]
         [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin-top:3px;]
[border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10px; color: var(--h1); flex-shrink:0; margin:5px 8px 0 0;][comment]

----* * * info title here----

[/comment]height[/border]
[border=transparent; min-width:fit-content; min-width:-moz-fit-content; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:13px; text-align:left; margin:5px 0 0 0;][comment]

----* * * info contents here----

[/comment]answer[/border]
         [/border]
         [comment]----copy me too!----[/comment]

         [comment]----copy this whole thing to make another bit of info----[/comment]
         [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin-top:3px;]
[border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10px; color: var(--h1); flex-shrink:0; margin:5px 8px 0 0;][comment]

----* * * info title here----

[/comment]weight[/border]
[border=transparent; min-width:fit-content; min-width:-moz-fit-content; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:13px; text-align:left; margin:5px 0 0 0;][comment]

----* * * info contents here----

[/comment]answer[/border]
         [/border]
         [comment]----copy me too!----[/comment]

         [comment]----copy this whole thing to make another bit of info----[/comment]
         [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin-top:3px;]
[border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10px; color: var(--h1); flex-shrink:0; margin:5px 8px 0 0;][comment]

----* * * info title here----

[/comment]hair c.[/border]
[border=transparent; min-width:fit-content; min-width:-moz-fit-content; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:13px; text-align:left; margin:5px 0 0 0;][comment]

----* * * info contents here----

[/comment]answer[/border]
         [/border]
         [comment]----copy me too!----[/comment]

         [comment]----copy this whole thing to make another bit of info----[/comment]
         [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin-top:3px;]
[border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10px; color: var(--h1); flex-shrink:0; margin:5px 8px 0 0;][comment]

----* * * info title here----

[/comment]eye c.[/border]
[border=transparent; min-width:fit-content; min-width:-moz-fit-content; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:13px; text-align:left; margin:5px 0 0 0;][comment]

----* * * info contents here----

[/comment]answer[/border]
         [/border]
         [comment]----copy me too!----[/comment]

         [comment]----copy this whole thing to make another bit of info----[/comment]
         [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin-top:3px;]
[border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10px; color: var(--h1); flex-shrink:0; margin:5px 8px 0 0;][comment]

----* * * info title here----

[/comment]faceclaim[/border]
[border=transparent; min-width:fit-content; min-width:-moz-fit-content; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:13px; text-align:left; margin:5px 0 0 0;][comment]

----* * * info contents here----

[/comment]answer[/border]
         [/border]
         [comment]----copy me too!----[/comment]

      [/border][/border][/border]
      [comment]----appearance contents end----[/comment]
   [/border]
   [comment]----row one end----[/comment]

[/border]
[comment]----section contents end----[/comment]
         [/border]
         [comment]----section 1 end----[/comment]

         [comment]----section 1 (appearance)----[/comment]
         [border=transparent; height:auto; width:calc(50% + 28px); padding:0; scroll-snap-align:end; display:flex; flex-flow:column nowrap; border-right:28px solid var(--bg-2); border-top:23px solid var(--bg-2); box-sizing:border-box;]

[comment]----section title container----[/comment]
[border=transparent; height:38px; width:100%; padding:0; border:1px solid var(--color-1); box-sizing:border-box; position:relative; display:flex; flex-flow:row-reverse nowrap;]
[border=transparent; height:1px; width:calc(100% + 2px); padding:0 2px; background: var(--bg-2); position:absolute; top:-2px; left:-1px;][/border]
[border=transparent; height:1px; width:100%; padding:0; background: var(--bg-2); position:absolute; top:-0.2px; left:0;][/border]
[border=transparent; height:1px; width:100%; padding:0; background: var(--bg-2); position:absolute; bottom:-0.2px; left:0;][/border]
   [comment]----section number----[/comment]
   [border=transparent; height:36px; min-width:41px; border:5px solid var(--bg-2); padding:0 3px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; position:relative; flex-shrink:0; margin-left:-1px;][border=transparent; height:100%; width:calc(100% + 1px); padding:1px 0 0 0; opacity:0.4; background: var(--color-1); position:absolute; top:-0.5px; left:-0.8px;][/border][border=transparent; height:auto; width:auto; padding:0; color: var(--h1); font-family: var(--header); line-height:100%; font-size:15px; font-weight:bold; letter-spacing:1px; position:relative; z-index:3; text-align:center; text-shadow:1px 1px var(--color-2); white-space:nowrap;][comment]

----* * * section number here----

[/comment]02.[/border][/border]

   [comment]----section title----[/comment]
   [border=transparent; height:100%; flex:1; padding:0 13px 0 12px; box-sizing:border-box; display:flex; align-items:center; background: var(--bg-2);][border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:3px 5px; box-sizing:border-box; border-radius:2px; background: var(--color-1); font-family: var(--body); font-weight:bold; color: var(--h1); font-size:11px; text-transform:uppercase; letter-spacing:2px; line-height:100%;][comment]

----* * * section title here----

[/comment]title[/border][/border]
[/border]
[comment]----section title container end----[/comment]

[comment]----section contents----[/comment]
[border=transparent; height:auto; width:100%; padding:15px 0 5px 0; box-sizing:border-box; background: var(--bg-2); display:flex; flex-flow:column nowrap;]
   [comment]----row one----[/comment]
   [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow: row-reverse nowrap;]
      [comment]----icon----[/comment]
      [border=transparent; width:clamp(85px, 10vw, 110px); padding:0; flex-shrink:0;][border=transparent; padding:0; padding-top:100%; border:1px solid var(--color-1); position:relative;][border=transparent; height:100%; width:100%; padding:8px; box-sizing:border-box; position:absolute; top:0; left:0;][border=transparent; height:100%; width:100%; padding:0; background: var(--img-3); background-size:cover;

/*edit the following to adjust the cropping of the image*/ background-position:50% 50%;]
      [border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2;][/border][/border][/border][/border][/border]

      [comment]----appearance contents----[/comment]
      [border=transparent; height:110px; flex:1; padding:0; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; display:flex; flex-flow:column nowrap;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-8px;][/border]

         [comment]----copy this whole thing to make another bit of info----[/comment]
         [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin-top:3px;]
[border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10px; color: var(--h1); flex-shrink:0; margin:5px 8px 0 0;][comment]

----* * * info title here----

[/comment]height[/border]
[border=transparent; min-width:fit-content; min-width:-moz-fit-content; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:13px; text-align:left; margin:5px 0 0 0;][comment]

----* * * info contents here----

[/comment]answer[/border]
         [/border]
         [comment]----copy me too!----[/comment]

         [comment]----copy this whole thing to make another bit of info----[/comment]
         [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin-top:3px;]
[border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10px; color: var(--h1); flex-shrink:0; margin:5px 8px 0 0;][comment]

----* * * info title here----

[/comment]weight[/border]
[border=transparent; min-width:fit-content; min-width:-moz-fit-content; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:13px; text-align:left; margin:5px 0 0 0;][comment]

----* * * info contents here----

[/comment]answer[/border]
         [/border]
         [comment]----copy me too!----[/comment]

         [comment]----copy this whole thing to make another bit of info----[/comment]
         [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin-top:3px;]
[border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10px; color: var(--h1); flex-shrink:0; margin:5px 8px 0 0;][comment]

----* * * info title here----

[/comment]hair c.[/border]
[border=transparent; min-width:fit-content; min-width:-moz-fit-content; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:13px; text-align:left; margin:5px 0 0 0;][comment]

----* * * info contents here----

[/comment]answer[/border]
         [/border]
         [comment]----copy me too!----[/comment]

         [comment]----copy this whole thing to make another bit of info----[/comment]
         [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin-top:3px;]
[border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10px; color: var(--h1); flex-shrink:0; margin:5px 8px 0 0;][comment]

----* * * info title here----

[/comment]eye c.[/border]
[border=transparent; min-width:fit-content; min-width:-moz-fit-content; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:13px; text-align:left; margin:5px 0 0 0;][comment]

----* * * info contents here----

[/comment]answer[/border]
         [/border]
         [comment]----copy me too!----[/comment]

         [comment]----copy this whole thing to make another bit of info----[/comment]
         [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin-top:3px;]
[border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10px; color: var(--h1); flex-shrink:0; margin:5px 8px 0 0;][comment]

----* * * info title here----

[/comment]faceclaim[/border]
[border=transparent; min-width:fit-content; min-width:-moz-fit-content; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:13px; text-align:left; margin:5px 0 0 0;][comment]

----* * * info contents here----

[/comment]answer[/border]
         [/border]
         [comment]----copy me too!----[/comment]

      [/border][/border][/border]
      [comment]----appearance contents end----[/comment]
   [/border]
   [comment]----row one end----[/comment]

[/border]
[comment]----section contents end----[/comment]
         [/border]
         [comment]----section 1 end----[/comment]

         [comment]----section 2 (psyche)----[/comment]
         [border=transparent; height:auto; width:calc(50% + 28px); padding:0; scroll-snap-align:end; display:flex; flex-flow:column nowrap; border-right:28px solid var(--bg-2); border-top:23px solid var(--bg-2); box-sizing:border-box;]

[comment]----section title container----[/comment]
[border=transparent; height:38px; width:100%; padding:0; border:1px solid var(--color-1); box-sizing:border-box; position:relative; display:flex; flex-flow:row-reverse nowrap;]
[border=transparent; height:1px; width:calc(100% + 2px); padding:0 2px; background: var(--bg-2); position:absolute; top:-2px; left:-1px;][/border]
[border=transparent; height:1px; width:100%; padding:0; background: var(--bg-2); position:absolute; top:-0.2px; left:0;][/border]
[border=transparent; height:1px; width:100%; padding:0; background: var(--bg-2); position:absolute; bottom:-0.2px; left:0;][/border]
   [comment]----section number----[/comment]
   [border=transparent; height:36px; min-width:41px; border:5px solid var(--bg-2); padding:0 3px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; position:relative; flex-shrink:0; margin-left:-1px;][border=transparent; height:100%; width:calc(100% + 1px); padding:1px 0 0 0; opacity:0.4; background: var(--color-1); position:absolute; top:-0.5px; left:-0.8px;][/border][border=transparent; height:auto; width:auto; padding:0; color: var(--h1); font-family: var(--header); line-height:100%; font-size:15px; font-weight:bold; letter-spacing:1px; position:relative; z-index:3; text-align:center; text-shadow:1px 1px var(--color-2); white-space:nowrap;][comment]

----* * * section number here----

[/comment]03.[/border][/border]

   [comment]----section title----[/comment]
   [border=transparent; height:100%; flex:1; padding:0 13px 0 12px; box-sizing:border-box; display:flex; align-items:center; background: var(--bg-2);][border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:3px 5px; box-sizing:border-box; border-radius:2px; background: var(--color-1); font-family: var(--body); font-weight:bold; color: var(--h1); font-size:11px; text-transform:uppercase; letter-spacing:2px; line-height:100%;][comment]

----* * * section title here----

[/comment]psyche[/border][/border]
[/border]
[comment]----section title container end----[/comment]

[comment]----section contents----[/comment]
[border=transparent; height:auto; width:100%; padding:15px 0 5px 0; box-sizing:border-box; background: var(--bg-2);][border=transparent; height:auto; max-height:341px; width:100%; padding:12px 0; box-sizing:border-box; border:1px solid var(--color-1); display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 15px; box-sizing:border-box;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-8px;][/border]

   [comment]----copy this whole thing to make another bit of info (text)----[/comment]
   [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin:3px 0 5px 0;]
      [border=transparent; width:100%; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:14px; text-align:justify; margin:5px 0 0 0;][comment]

----* * * text starts here here----

[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur tempor purus a lacus iaculis accumsan. Integer justo justo, ultrices interdum feugiat et, pharetra vitae felis. Ut at arcu quis ante vehicula imperdiet. Etiam aliquam dui id commodo faucibus. Ut semper, ipsum et rhoncus mollis, sem sapien consequat turpis, vitae mollis erat eros quis diam. Curabitur feugiat, ligula id feugiat pulvinar, augue nunc blandit nisl, sit amet aliquam lectus turpis non nunc. Suspendisse elementum nisi eget varius aliquet. Quisque non nibh fermentum, efficitur arcu quis, feugiat turpis. Morbi cursus non lacus sed tempus.[/border]
   [/border]
   [comment]----copy me too!----[/comment]

   [comment]----copy this whole thing to make another bit of info----[/comment]
   [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin-top:3px;]
      [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10px; color: var(--h1); flex-shrink:0; margin:5px 8px 0 0;][comment]

----* * * info title here----

[/comment]likes[/border]
      [border=transparent; min-width:fit-content; min-width:-moz-fit-content; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:13px; text-align:left; margin:5px 0 0 0;][comment]

----* * * info contents here----

[/comment]answer[/border]
   [/border]
   [comment]----copy me too!----[/comment]

   [comment]----copy this whole thing to make another bit of info----[/comment]
   [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin-top:3px;]
      [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10px; color: var(--h1); flex-shrink:0; margin:5px 8px 0 0;][comment]

----* * * info title here----

[/comment]dislikes[/border]
      [border=transparent; min-width:fit-content; min-width:-moz-fit-content; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:13px; text-align:left; margin:5px 0 0 0;][comment]

----* * * info contents here----

[/comment]answer[/border]
   [/border]
   [comment]----copy me too!----[/comment]

   [comment]----copy this whole thing to make another bit of info----[/comment]
   [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin-top:3px;]
      [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10px; color: var(--h1); flex-shrink:0; margin:5px 8px 0 0;][comment]

----* * * info title here----

[/comment]fears[/border]
      [border=transparent; min-width:fit-content; min-width:-moz-fit-content; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:13px; text-align:left; margin:5px 0 0 0;][comment]

----* * * info contents here----

[/comment]answer[/border]
   [/border]
   [comment]----copy me too!----[/comment]

[/border][/border][/border][/border]
[comment]----section contents end----[/comment]
         [/border]
         [comment]----section 2 end----[/comment]

         [comment]----section 3 (history)----[/comment]
         [border=transparent; height:auto; width:calc(50% + 28px); padding:0; scroll-snap-align:end; display:flex; flex-flow:column nowrap; border-right:28px solid var(--bg-2); border-top:23px solid var(--bg-2); box-sizing:border-box;]

[comment]----section title container----[/comment]
[border=transparent; height:38px; width:100%; padding:0; border:1px solid var(--color-1); box-sizing:border-box; position:relative; display:flex; flex-flow:row-reverse nowrap;]
[border=transparent; height:1px; width:calc(100% + 2px); padding:0 2px; background: var(--bg-2); position:absolute; top:-2px; left:-1px;][/border]
[border=transparent; height:1px; width:100%; padding:0; background: var(--bg-2); position:absolute; top:-0.2px; left:0;][/border]
[border=transparent; height:1px; width:100%; padding:0; background: var(--bg-2); position:absolute; bottom:-0.2px; left:0;][/border]
   [comment]----section number----[/comment]
   [border=transparent; height:36px; min-width:41px; border:5px solid var(--bg-2); padding:0 3px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; position:relative; flex-shrink:0; margin-left:-1px;][border=transparent; height:100%; width:calc(100% + 1px); padding:1px 0 0 0; opacity:0.4; background: var(--color-1); position:absolute; top:-0.5px; left:-0.8px;][/border][border=transparent; height:auto; width:auto; padding:0; color: var(--h1); font-family: var(--header); line-height:100%; font-size:15px; font-weight:bold; letter-spacing:1px; position:relative; z-index:3; text-align:center; text-shadow:1px 1px var(--color-2); white-space:nowrap;][comment]

----* * * section number here----

[/comment]04.[/border][/border]

   [comment]----section title----[/comment]
   [border=transparent; height:100%; flex:1; padding:0 13px 0 12px; box-sizing:border-box; display:flex; align-items:center; background: var(--bg-2);][border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:3px 5px; box-sizing:border-box; border-radius:2px; background: var(--color-1); font-family: var(--body); font-weight:bold; color: var(--h1); font-size:11px; text-transform:uppercase; letter-spacing:2px; line-height:100%;][comment]

----* * * section title here----

[/comment]history[/border][/border]
[/border]
[comment]----section title container end----[/comment]

[comment]----section contents----[/comment]
[border=transparent; height:auto; width:100%; padding:15px 0 5px 0; box-sizing:border-box; background: var(--bg-2);][border=transparent; height:auto; max-height:341px; width:100%; padding:12px 0; box-sizing:border-box; border:1px solid var(--color-1); display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 15px; box-sizing:border-box;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-8px;][/border]

   [comment]----copy this whole thing to make another bit of info (text)----[/comment]
   [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin:3px 0 5px 0;]
      [border=transparent; width:100%; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:14px; text-align:justify; margin:5px 0 0 0;][comment]

----* * * text starts here here----

[/comment]this scrolls if you add enough content.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse finibus erat mi, vel consectetur neque ultrices a. Nulla facilisi. Fusce at quam ut sem pharetra posuere nec nec enim. Mauris rhoncus fermentum sapien, ac finibus mi tempus sed. Praesent sed eros pulvinar, fringilla dui a, vestibulum nisi. Cras blandit enim laoreet orci porta ultrices. Cras purus erat, commodo a rhoncus ac, dapibus quis mauris.

Ut rhoncus libero eu fermentum bibendum. Nullam ac ipsum augue. Donec commodo dui efficitur iaculis venenatis. Mauris a neque pellentesque, faucibus urna vel, dapibus nulla. Sed tincidunt dui sed dictum vestibulum. Ut venenatis urna in elit hendrerit, eu molestie massa efficitur. Nullam sit amet sem ut ligula gravida ultricies. Etiam gravida quis diam at elementum. In dignissim eros ut sapien fringilla, vel lobortis nibh auctor. Sed ut nibh bibendum, tincidunt ex in, mattis odio. Donec egestas facilisis dapibus. Proin varius ornare sapien, at auctor sem lacinia non.
      [/border]
   [/border]
   [comment]----copy me too!----[/comment]

[/border][/border][/border][/border]
[comment]----section contents end----[/comment]
         [/border]
         [comment]----section 3 end----[/comment]

         [comment]----section 4 (gallery)----[/comment]
         [border=transparent; height:auto; width:calc(50% + 28px); padding:0; scroll-snap-align:end; display:flex; flex-flow:column nowrap; border-right:28px solid var(--bg-2); border-top:23px solid var(--bg-2); box-sizing:border-box;]

[comment]----section title container----[/comment]
[border=transparent; height:38px; width:100%; padding:0; border:1px solid var(--color-1); box-sizing:border-box; position:relative; display:flex; flex-flow:row-reverse nowrap;]
[border=transparent; height:1px; width:calc(100% + 2px); padding:0 2px; background: var(--bg-2); position:absolute; top:-2px; left:-1px;][/border]
[border=transparent; height:1px; width:100%; padding:0; background: var(--bg-2); position:absolute; top:-0.2px; left:0;][/border]
[border=transparent; height:1px; width:100%; padding:0; background: var(--bg-2); position:absolute; bottom:-0.2px; left:0;][/border]
   [comment]----section number----[/comment]
   [border=transparent; height:36px; min-width:41px; border:5px solid var(--bg-2); padding:0 3px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; position:relative; flex-shrink:0; margin-left:-1px;][border=transparent; height:100%; width:calc(100% + 1px); padding:1px 0 0 0; opacity:0.4; background: var(--color-1); position:absolute; top:-0.5px; left:-0.8px;][/border][border=transparent; height:auto; width:auto; padding:0; color: var(--h1); font-family: var(--header); line-height:100%; font-size:15px; font-weight:bold; letter-spacing:1px; position:relative; z-index:3; text-align:center; text-shadow:1px 1px var(--color-2); white-space:nowrap;][comment]

----* * * section number here----

[/comment]05.[/border][/border]

   [comment]----section title----[/comment]
   [border=transparent; height:100%; flex:1; padding:0 13px 0 12px; box-sizing:border-box; display:flex; align-items:center; background: var(--bg-2);][border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:3px 5px; box-sizing:border-box; border-radius:2px; background: var(--color-1); font-family: var(--body); font-weight:bold; color: var(--h1); font-size:11px; text-transform:uppercase; letter-spacing:2px; line-height:100%;][comment]

----* * * section title here----

[/comment]gallery[/border][/border]
[/border]
[comment]----section title container end----[/comment]

[comment]----section contents----[/comment]
[border=transparent; --imgwidth: 70px; --margin: 4px; height:auto; width:100%; padding:15px 0 5px 0; box-sizing:border-box; background: var(--bg-2);][border=transparent; height:auto; width:100%; padding:12px 15px; box-sizing:border-box; border:1px solid var(--color-1); display:flex; flex-flow:row wrap;]

   [comment]----gallery image----[/comment]
   [border=transparent; flex:1; min-width: var(--imgwidth); padding:0; margin: var(--margin); flex-shrink:0;][border=transparent; padding:0; padding-top:100%; background: var(--gimg-1); background-size:cover;

/*edit the following to adjust the cropping of the image*/ background-position:50% 50%;

position:relative;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2; position:absolute; top:0; left:0;][/border][/border][/border]
   [comment]----gallery image----[/comment]
   [border=transparent; flex:1; min-width: var(--imgwidth); padding:0; margin: var(--margin); flex-shrink:0;][border=transparent; padding:0; padding-top:100%; background: var(--gimg-2); background-size:cover;

/*edit the following to adjust the cropping of the image*/ background-position:50% 50%;

position:relative;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2; position:absolute; top:0; left:0;][/border][/border][/border]
   [comment]----gallery image----[/comment]
   [border=transparent; flex:1; min-width: var(--imgwidth); padding:0; margin: var(--margin); flex-shrink:0;][border=transparent; padding:0; padding-top:100%; background: var(--gimg-3); background-size:cover;

/*edit the following to adjust the cropping of the image*/ background-position:50% 50%;

position:relative;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2; position:absolute; top:0; left:0;][/border][/border][/border]
   [comment]----gallery image----[/comment]
   [border=transparent; flex:1; min-width: var(--imgwidth); padding:0; margin: var(--margin); flex-shrink:0;][border=transparent; padding:0; padding-top:100%; background: var(--gimg-4); background-size:cover;

/*edit the following to adjust the cropping of the image*/ background-position:50% 50%;

position:relative;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2; position:absolute; top:0; left:0;][/border][/border][/border]
   [comment]----gallery image----[/comment]
   [border=transparent; flex:1; min-width: var(--imgwidth); padding:0; margin: var(--margin); flex-shrink:0;][border=transparent; padding:0; padding-top:100%; background: var(--gimg-5); background-size:cover;

/*edit the following to adjust the cropping of the image*/ background-position:50% 50%;

position:relative;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2; position:absolute; top:0; left:0;][/border][/border][/border]
   [comment]----gallery image----[/comment]
   [border=transparent; flex:1; min-width: var(--imgwidth); padding:0; margin: var(--margin); flex-shrink:0;][border=transparent; padding:0; padding-top:100%; background: var(--gimg-6); background-size:cover;

/*edit the following to adjust the cropping of the image*/ background-position:50% 50%;

position:relative;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2; position:absolute; top:0; left:0;][/border][/border][/border]

[/border][/border]
[comment]----section contents end----[/comment]
         [/border]
         [comment]----section 4 end----[/comment]

         [comment]----section 5 (relationships)----[/comment]
         [border=transparent; height:auto; width:calc(50% + 28px); padding:0; scroll-snap-align:end; display:flex; flex-flow:column nowrap; border-right:28px solid var(--bg-2); border-top:23px solid var(--bg-2); box-sizing:border-box;]

[comment]----section title container----[/comment]
[border=transparent; height:38px; width:100%; padding:0; border:1px solid var(--color-1); box-sizing:border-box; position:relative; display:flex; flex-flow:row-reverse nowrap;]
[border=transparent; height:1px; width:calc(100% + 2px); padding:0 2px; background: var(--bg-2); position:absolute; top:-2px; left:-1px;][/border]
[border=transparent; height:1px; width:100%; padding:0; background: var(--bg-2); position:absolute; top:-0.2px; left:0;][/border]
[border=transparent; height:1px; width:100%; padding:0; background: var(--bg-2); position:absolute; bottom:-0.2px; left:0;][/border]
   [comment]----section number----[/comment]
   [border=transparent; height:36px; min-width:41px; border:5px solid var(--bg-2); padding:0 3px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; position:relative; flex-shrink:0; margin-left:-1px;][border=transparent; height:100%; width:calc(100% + 1px); padding:1px 0 0 0; opacity:0.4; background: var(--color-1); position:absolute; top:-0.5px; left:-0.8px;][/border][border=transparent; height:auto; width:auto; padding:0; color: var(--h1); font-family: var(--header); line-height:100%; font-size:15px; font-weight:bold; letter-spacing:1px; position:relative; z-index:3; text-align:center; text-shadow:1px 1px var(--color-2); white-space:nowrap;][comment]

----* * * section number here----

[/comment]06.[/border][/border]

   [comment]----section title----[/comment]
   [border=transparent; height:100%; flex:1; padding:0 13px 0 12px; box-sizing:border-box; display:flex; align-items:center; background: var(--bg-2);][border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:3px 5px; box-sizing:border-box; border-radius:2px; background: var(--color-1); font-family: var(--body); font-weight:bold; color: var(--h1); font-size:11px; text-transform:uppercase; letter-spacing:2px; line-height:100%;][comment]

----* * * section title here----

[/comment]connections[/border][/border]
[/border]
[comment]----section title container end----[/comment]

[comment]----section contents----[/comment]
[border=transparent; height:auto; width:100%; padding:15px 0 5px 0; box-sizing:border-box; background: var(--bg-2);][border=transparent; height:auto; max-height:341px; width:100%; padding:12px 0; box-sizing:border-box; border:1px solid var(--color-1); display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0 15px; box-sizing:border-box;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-20px;][/border]

   [comment]----copy this whole thing to make another relationship----[/comment]
   [border=transparent; height:auto; width:100%; padding:17px 0 8px 0; box-sizing:border-box; display:flex; flex-flow:row nowrap; margin-top:10px; position:relative;][border=transparent; height:100%; width:82%; padding:0; position:absolute; top:0; left:9%; pointer-events:none; border-top:1px solid var(--color-2); box-sizing:border-box;][/border]

      [comment]----character icon----[/comment]
      [border=transparent; width:clamp(65px, 10vw, 80px); padding:0; flex-shrink:0;][border=transparent; padding:0; padding-top:100%; border-radius:50%; border:1px solid var(--color-1); position:relative; overflow:hidden;][border=transparent; height:100%; width:100%; padding:clamp(4px, 0.8vw, 6px); box-sizing:border-box; position:absolute; top:0; left:0;][border=transparent; height:100%; width:100%; padding:0;

/*edit the number in rX to match the number in the variables*/ background: var(--r1);

/*edit the following to adjust the cropping of the image*/ background-position:50% 50%;

background-size:cover; border-radius:50%;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2;][/border][/border][/border][/border][/border]

      [comment]----character info----[/comment]
      [border=transparent; height:auto; max-height:95px; flex:1; padding:0; margin-left:15px; display:flex; flex-flow:column nowrap; font-family: var(--body);]

         [comment]----character name----[/comment]
         [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10.5px; color: var(--h1); flex-shrink:0; margin-top:3px;][comment]

----* * * character name here----

[/comment]character name[/border]

         [comment]----character description----[/comment]
         [border=transparent; height:95%; width:100%; padding:0; margin:8px 0 0 1px; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; color: var(--t-color); font-size:11px; text-align:justify; line-height:14px;][comment]

----* * * text starts here----

[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse finibus erat mi, vel consectetur neque ultrices a. Nulla facilisi. Fusce at quam ut sem pharetra posuere nec nec enim. Mauris rhoncus fermentum sapien, ac finibus mi tempus sed.
[/border][/border][/border]
         [comment]----character description end----[/comment]
      [/border]
      [comment]----character info end----[/comment]
   [/border]
   [comment]----copy me too!----[/comment]

   [comment]----copy this whole thing to make another relationship----[/comment]
   [border=transparent; height:auto; width:100%; padding:17px 0 8px 0; box-sizing:border-box; display:flex; flex-flow:row nowrap; margin-top:10px; position:relative;][border=transparent; height:100%; width:82%; padding:0; position:absolute; top:0; left:9%; pointer-events:none; border-top:1px solid var(--color-2); box-sizing:border-box;][/border]

      [comment]----character icon----[/comment]
      [border=transparent; width:clamp(65px, 10vw, 80px); padding:0; flex-shrink:0;][border=transparent; padding:0; padding-top:100%; border-radius:50%; border:1px solid var(--color-1); position:relative; overflow:hidden;][border=transparent; height:100%; width:100%; padding:clamp(4px, 0.8vw, 6px); box-sizing:border-box; position:absolute; top:0; left:0;][border=transparent; height:100%; width:100%; padding:0;

/*edit the number in rX to match the number in the variables*/ background: var(--r2);

/*edit the following to adjust the cropping of the image*/ background-position:50% 50%;

background-size:cover; border-radius:50%;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2;][/border][/border][/border][/border][/border]

      [comment]----character info----[/comment]
      [border=transparent; height:auto; max-height:95px; flex:1; padding:0; margin-left:15px; display:flex; flex-flow:column nowrap; font-family: var(--body);]

         [comment]----character name----[/comment]
         [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10.5px; color: var(--h1); flex-shrink:0; margin-top:3px;][comment]

----* * * character name here----

[/comment]character name[/border]

         [comment]----character description----[/comment]
         [border=transparent; height:95%; width:100%; padding:0; margin:8px 0 0 1px; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; color: var(--t-color); font-size:11px; text-align:justify; line-height:14px;][comment]

----* * * text starts here----

[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse finibus erat mi, vel consectetur neque ultrices a. Nulla facilisi. Fusce at quam ut sem pharetra posuere nec nec enim. Mauris rhoncus fermentum sapien, ac finibus mi tempus sed.
[/border][/border][/border]
         [comment]----character description end----[/comment]
      [/border]
      [comment]----character info end----[/comment]
   [/border]
   [comment]----copy me too!----[/comment]

   [comment]----copy this whole thing to make another relationship----[/comment]
   [border=transparent; height:auto; width:100%; padding:17px 0 8px 0; box-sizing:border-box; display:flex; flex-flow:row nowrap; margin-top:10px; position:relative;][border=transparent; height:100%; width:82%; padding:0; position:absolute; top:0; left:9%; pointer-events:none; border-top:1px solid var(--color-2); box-sizing:border-box;][/border]

      [comment]----character icon----[/comment]
      [border=transparent; width:clamp(65px, 10vw, 80px); padding:0; flex-shrink:0;][border=transparent; padding:0; padding-top:100%; border-radius:50%; border:1px solid var(--color-1); position:relative; overflow:hidden;][border=transparent; height:100%; width:100%; padding:clamp(4px, 0.8vw, 6px); box-sizing:border-box; position:absolute; top:0; left:0;][border=transparent; height:100%; width:100%; padding:0;

/*edit the number in rX to match the number in the variables*/ background: var(--r3);

/*edit the following to adjust the cropping of the image*/ background-position:50% 50%;

background-size:cover;  border-radius:50%;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2;][/border][/border][/border][/border][/border]

      [comment]----character info----[/comment]
      [border=transparent; height:auto; max-height:95px; flex:1; padding:0; margin-left:15px; display:flex; flex-flow:column nowrap; font-family: var(--body);]

         [comment]----character name----[/comment]
         [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10.5px; color: var(--h1); flex-shrink:0; margin-top:3px;][comment]

----* * * character name here----

[/comment]character name[/border]

         [comment]----character description----[/comment]
         [border=transparent; height:95%; width:100%; padding:0; margin:8px 0 0 1px; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; color: var(--t-color); font-size:11px; text-align:justify; line-height:14px;][comment]

----* * * text starts here----

[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse finibus erat mi, vel consectetur neque ultrices a. Nulla facilisi. Fusce at quam ut sem pharetra posuere nec nec enim. Mauris rhoncus fermentum sapien, ac finibus mi tempus sed.
[/border][/border][/border]
         [comment]----character description end----[/comment]
      [/border]
      [comment]----character info end----[/comment]
   [/border]
   [comment]----copy me too!----[/comment]

   [comment]----copy this whole thing to make another relationship----[/comment]
   [border=transparent; height:auto; width:100%; padding:17px 0 8px 0; box-sizing:border-box; display:flex; flex-flow:row nowrap; margin-top:10px; position:relative;][border=transparent; height:100%; width:82%; padding:0; position:absolute; top:0; left:9%; pointer-events:none; border-top:1px solid var(--color-2); box-sizing:border-box;][/border]

      [comment]----character icon----[/comment]
      [border=transparent; width:clamp(65px, 10vw, 80px); padding:0; flex-shrink:0;][border=transparent; padding:0; padding-top:100%; border-radius:50%; border:1px solid var(--color-1); position:relative; overflow:hidden;][border=transparent; height:100%; width:100%; padding:clamp(4px, 0.8vw, 6px); box-sizing:border-box; position:absolute; top:0; left:0;][border=transparent; height:100%; width:100%; padding:0;

/*edit the number in rX to match the number in the variables*/ background: var(--r4);

/*edit the following to adjust the cropping of the image*/ background-position:50% 50%;

background-size:cover;  border-radius:50%;][border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2;][/border][/border][/border][/border][/border]

      [comment]----character info----[/comment]
      [border=transparent ;height:auto; max-height:95px; flex:1; padding:0; margin-left:15px; display:flex; flex-flow:column nowrap; font-family: var(--body);]

         [comment]----character name----[/comment]
         [border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10.5px; color: var(--h1); flex-shrink:0; margin-top:3px;][comment]

----* * * character name here----

[/comment]character name[/border]

         [comment]----character description----[/comment]
         [border=transparent; height:95%; width:100%; padding:0; margin:8px 0 0 1px; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; color: var(--t-color); font-size:11px; text-align:justify; line-height:14px;][comment]

----* * * text starts here----

[/comment]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse finibus erat mi, vel consectetur neque ultrices a. Nulla facilisi. Fusce at quam ut sem pharetra posuere nec nec enim. Mauris rhoncus fermentum sapien, ac finibus mi tempus sed.
[/border][/border][/border]
         [comment]----character description end----[/comment]
      [/border]
      [comment]----character info end----[/comment]
   [/border]
   [comment]----copy me too!----[/comment]

[/border][/border][/border][/border]
[comment]----section contents end----[/comment]
         [/border]
         [comment]----section 5 end----[/comment]

         [comment]----section 6 (extra information)----[/comment]
         [border=transparent; height:auto; width:calc(50% + 28px); padding:0; scroll-snap-align:end; display:flex; flex-flow:column nowrap; border-right:28px solid var(--bg-2); border-top:23px solid var(--bg-2); box-sizing:border-box;]

[comment]----section title container----[/comment]
[border=transparent; height:38px; width:100%; padding:0; border:1px solid var(--color-1); box-sizing:border-box; position:relative; display:flex; flex-flow:row-reverse nowrap;]
[border=transparent; height:1px; width:calc(100% + 2px); padding:0 2px; background: var(--bg-2); position:absolute; top:-2px; left:-1px;][/border]
[border=transparent; height:1px; width:100%; padding:0; background: var(--bg-2); position:absolute; top:-0.2px; left:0;][/border]
[border=transparent; height:1px; width:100%; padding:0; background: var(--bg-2); position:absolute; bottom:-0.2px; left:0;][/border]
   [comment]----section number----[/comment]
   [border=transparent; height:36px; min-width:41px; border:5px solid var(--bg-2); padding:0 3px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; position:relative; flex-shrink:0; margin-left:-1px;][border=transparent; height:100%; width:calc(100% + 1px); padding:1px 0 0 0; opacity:0.4; background: var(--color-1); position:absolute; top:-0.5px; left:-0.8px;][/border][border=transparent; height:auto; width:auto; padding:0; color: var(--h1); font-family: var(--header); line-height:100%; font-size:15px; font-weight:bold; letter-spacing:1px; position:relative; z-index:3; text-align:center; text-shadow:1px 1px var(--color-2); white-space:nowrap;][comment]

----* * * section number here----

[/comment]07.[/border][/border]

   [comment]----section title----[/comment]
   [border=transparent; height:100%; flex:1; padding:0 13px 0 12px; box-sizing:border-box; display:flex; align-items:center; background: var(--bg-2);][border=transparent; height:auto; width:fit-content; width:-moz-fit-content; padding:3px 5px; box-sizing:border-box; border-radius:2px; background: var(--color-1); font-family: var(--body); font-weight:bold; color: var(--h1); font-size:11px; text-transform:uppercase; letter-spacing:2px; line-height:100%;][comment]

----* * * section title here----

[/comment]miscellaneous[/border][/border]
[/border]
[comment]----section title container end----[/comment]

[comment]----section contents----[/comment]
[border=transparent; height:auto; width:100%; padding:15px 0 5px 0; box-sizing:border-box; background: var(--bg-2); display:flex; flex-flow:column nowrap;]
   [comment]----row one----[/comment]
   [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row-reverse nowrap;]
      [comment]----image----[/comment]
      [border=transparent; height:auto; min-height:100%; width:clamp(85px, 10vw, 115px); flex-shrink:0; border:1px solid var(--color-1); padding:8px; box-sizing:border-box;][border=transparent; height:100%; width:100%; padding:0; background: var(--img-4); background-size:cover;

/*edit the following to adjust the cropping of the image*/ background-position:50% 50%;]
      [border=transparent; height:100%; width:100%; padding:0; background: var(--bg-2); opacity:0.2;][/border][/border][/border]

      [comment]----misc contents----[/comment]
      [border=transparent; height:auto; min-height:clamp(85px, 10vw, 115px); max-height:260px; flex:1; margin:0 10px 0 1px; padding:0; display:flex; flex-direction:column; overflow:hidden;][border=transparent; height:100%; width:200%; padding:0; overflow-y:scroll;][border=transparent; height:auto; width:50%; padding:0; display:flex; flex-flow:column nowrap;][border=transparent; height:0; width:100%; padding:0; margin-bottom:-8px;][/border]

         [comment]----copy this whole thing to make another bit of info----[/comment]
         [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin-top:3px;]
[border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10px; color: var(--h1); flex-shrink:0; margin:5px 8px 0 0;][comment]

----* * * info title here----

[/comment]whatever[/border]
[border=transparent; min-width:fit-content; min-width:-moz-fit-content; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:13px; text-align:left; margin:5px 0 0 0;][comment]

----* * * info contents here----

[/comment]hello[/border]
         [/border]
         [comment]----copy me too!----[/comment]

         [comment]----copy this whole thing to make another bit of info----[/comment]
         [border=transparent; height:auto; width:100%; padding:0; display:flex; flex-flow:row wrap; font-family: var(--body); align-items:center; margin-top:3px;]
[border=transparent; height:fit-content; width:fit-content; width:-moz-fit-content; padding:3px 5px 3px 6px; background: var(--color-1); border-radius:2px; box-sizing:border-box; text-transform:uppercase; font-weight:bold; letter-spacing:1.5px; line-height:100%; font-size:10px; color: var(--h1); flex-shrink:0; margin:5px 8px 0 0;][comment]

----* * * info title here----

[/comment]whatever[/border]
[border=transparent; min-width:fit-content; min-width:-moz-fit-content; height:auto; padding:0; box-sizing:border-box; color: var(--t-color); font-size:11px; line-height:13px; text-align:left; margin:5px 0 0 0;][comment]

----* * * info contents here----

[/comment]hello[/border]
         [/border]
         [comment]----copy me too!----[/comment]

      [/border][/border][/border]
      [comment]----misc contents end----[/comment]
   [/border]
   [comment]----row one end----[/comment]

[/border]
[comment]----section contents end----[/comment]
         [/border]
         [comment]----section 6 end----[/comment]

      [/border][/border]
      [comment]----right end----[/comment]

   [/border][/border][/border][/border]
   [comment]----main container end----[/comment]

[/border][/border][comment]
----signature! do not remove
[/comment][bg=transparent; height:auto; width:auto; padding:0; position:absolute;z-index:6;opacity:0.4;color: var(--bg-1); font-size:10px;text-align:center; top:13px; right:15px; line-height:100%; -webkit-filter:brightness(0.8);][font=Open Sans]♡coded by uxie♡[/font][/bg][/border]
 
You must log in or register to reply here.

Users who are viewing this thread

Total: 2 (members: 0, guests: 2)

Similar threads

mizton
Help quote bubble codes?
Replies
1
Views
141
Uxie
Uxie
arsensonfire
Help Anyone's shop still open?
Replies
1
Views
229
The Dark Wizard
The Dark Wizard
Alteras
Resource Text Templater — a plain text template to form field generator
Replies
3
Views
202
A Murder Of Corviknight
A Murder Of Corviknight
roxybirdie
Closed music player button [resolved]
Replies
2
Views
396
roxybirdie
roxybirdie
JCKane
Help Tabs messing up due to too much text?
Replies
12
Views
87
JCKane
JCKane
Back
Top